[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-copilotkit-advanced-visualization-techniques":3,"mdc-umxcrc-key":55,"related-repo-copilotkit-advanced-visualization-techniques":16712,"related-org-copilotkit-advanced-visualization-techniques":16751},{"slug":4,"name":5,"fn":6,"description":7,"org":8,"tags":12,"stars":29,"repoUrl":30,"updatedAt":31,"license":32,"forks":33,"topics":34,"repo":50,"sourceUrl":53,"mdContent":54},"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},"copilotkit","CopilotKit","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fcopilotkit.png",[13,17,20,23,26],{"name":14,"slug":15,"type":16},"Dashboards","dashboards","tag",{"name":18,"slug":19,"type":16},"Generative Art","generative-art",{"name":21,"slug":22,"type":16},"UI Components","ui-components",{"name":24,"slug":25,"type":16},"Frontend","frontend",{"name":27,"slug":28,"type":16},"Design","design",1440,"https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI","2026-07-12T08:06:40.712754",null,192,[35,36,37,38,39,40,41,42,43,44,45,46,47,48,49],"agent-native","agentic-ai","agentic-visualization","agents","ai-agents","ai-copilot","ai-visualization","assistant-chat-bots","copilot","generative-ui","javascript","llm","open-source","typescript","visualization",{"repoUrl":30,"stars":29,"forks":33,"topics":51,"description":52},[35,36,37,38,39,40,41,42,43,44,45,46,47,48,49],"Open-Source Generative UI Framework","https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI\u002Ftree\u002FHEAD\u002Fapps\u002Fagent\u002Fskills\u002Fadvanced-visualization","---\nname: \"Advanced Visualization Techniques\"\ndescription: \"UI mockups, dashboards, advanced interactivity, generative art, simulations, math visualizations, and design system rules for producing rich generateSandboxedUi output.\"\nallowed-tools: []\n---\n\n# Agent Visualization Skills — Volume 2: Advanced Techniques\n\nPrerequisite: Volume 1 (SVG diagrams, basic interactive widgets, Chart.js, Mermaid).\nThis volume covers: UI mockups, dashboards, advanced interactivity, generative art,\nsimulations, math visualizations, and the design system that ties everything together.\n\n---\n\n## Part 0: The Tool Contract — generateSandboxedUi\n\nEverything in this volume ships through the `generateSandboxedUi` tool. The UI\nstreams as you generate it, so emit the parameters in this EXACT order:\n\n1. `initialHeight` — estimated height of the finished UI in px.\n2. `placeholderMessages` — 2-4 short, playful progress messages.\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. No `\u003Cstyle>` blocks (the css\n   parameter owns all styles), no monolithic inline `\u003Cscript>` blocks.\n5. `jsFunctions` — named function declarations: the reusable toolbox of behavior.\n6. `jsExpressions` — small statements invoking those functions, applied one-by-one\n   so the user watches each take effect.\n\nWrite parameterized generators in `jsFunctions` (`drawWing(color)`, not\n`drawRedWing()`). A well-parameterized toolbox lets a later refinement turn —\n\"make the wings red\" — append ONE new expression to `jsExpressions` instead of\nregenerating the whole document.\n\nThe sandbox iframe has NO same-origin access: no localStorage, sessionStorage,\ncookies, IndexedDB, or same-origin fetch. The host bridge is\n`await Websandbox.connection.remote.sendPrompt({ text })` and\n`await Websandbox.connection.remote.openLink({ url })` (https only). The design\nsystem (Part 1) and an importmap for `three`, `gsap`, `d3`, and `chart.js`\n(Part 7) are pre-injected.\n\n---\n\n## Part 1: The Design System\n\nEvery visual you produce should feel native to the host interface — not like\nan embedded iframe from somewhere else. These rules apply to ALL output types.\n\n### CSS Variables (Auto Light\u002FDark Mode)\n\n```css\n\u002F* Backgrounds *\u002F\n--color-background-primary    \u002F* white in light, near-black in dark *\u002F\n--color-background-secondary  \u002F* surface cards *\u002F\n--color-background-tertiary   \u002F* page background *\u002F\n--color-background-info       \u002F* blue tint *\u002F\n--color-background-danger     \u002F* red tint *\u002F\n--color-background-success    \u002F* green tint *\u002F\n--color-background-warning    \u002F* amber tint *\u002F\n\n\u002F* Text *\u002F\n--color-text-primary          \u002F* main text *\u002F\n--color-text-secondary        \u002F* muted \u002F labels *\u002F\n--color-text-tertiary         \u002F* hints \u002F placeholders *\u002F\n--color-text-info \u002F -danger \u002F -success \u002F -warning\n\n\u002F* Borders *\u002F\n--color-border-tertiary       \u002F* default: 0.15 alpha *\u002F\n--color-border-secondary      \u002F* hover: 0.3 alpha *\u002F\n--color-border-primary        \u002F* active: 0.4 alpha *\u002F\n\n\u002F* Typography *\u002F\n--font-sans                   \u002F* default body font *\u002F\n--font-serif                  \u002F* editorial \u002F blockquote only *\u002F\n--font-mono                   \u002F* code *\u002F\n\n\u002F* Layout *\u002F\n--border-radius-md            \u002F* 8px - most elements *\u002F\n--border-radius-lg            \u002F* 12px - cards *\u002F\n--border-radius-xl            \u002F* 16px - large containers *\u002F\n```\n\n**Critical rule**: Never hardcode colors like `#333` or `#fff` in HTML.\nThey break in the opposite mode. Always use CSS variables.\n\n### Typography Rules\n- h1 = 22px, h2 = 18px, h3 = 16px — all font-weight: 500\n- Body = 16px, weight 400, line-height: 1.7\n- Only two weights: 400 (regular) and 500 (medium). Never 600 or 700.\n- Sentence case everywhere. Never Title Case or ALL CAPS.\n- No mid-sentence bolding. Use `code style` for entity\u002Fclass\u002Ffunction names.\n- No font-size below 11px anywhere.\n\n### Component Tokens\n- Borders: `0.5px solid var(--color-border-tertiary)`\n- Cards: `background: var(--color-background-primary)`,\n  `border: 0.5px solid var(--color-border-tertiary)`,\n  `border-radius: var(--border-radius-lg)`, `padding: 1rem 1.25rem`\n- No gradients, drop shadows, blur, glow, or neon effects\n- No emoji — use CSS shapes or SVG paths for icons\n- Background of outer container is always transparent\n\n### Number Formatting\nAlways round displayed numbers. JavaScript float math leaks artifacts:\n`0.1 + 0.2 = 0.30000000000000004`. Every number on screen must go through\n`Math.round()`, `.toFixed(n)`, or `Intl.NumberFormat`.\n\n---\n\n## Part 2: UI Mockups\n\nFor when the user asks you to design or prototype a UI.\n\n### When to Use\n- \"Design a settings page for...\"\n- \"Mock up a dashboard\"\n- \"What should this form look like?\"\n- \"Show me a card layout for...\"\n- Prototyping before building\n\n### Presentation Rules\n\n**Contained mockups** (mobile screens, modals, chat threads, single cards):\nWrap in a background surface so they don't float naked:\n```html\n\u003Cdiv style=\"background: var(--color-background-secondary);\n            border-radius: var(--border-radius-lg);\n            padding: 2rem; display: flex; justify-content: center;\">\n  \u003C!-- Your mockup inside -->\n\u003C\u002Fdiv>\n```\n\n**Full-width mockups** (dashboards, settings pages, data tables):\nNo wrapper needed — they naturally fill the viewport.\n\n**Where the styles go**: repeated patterns become classes in the css parameter;\nthe html parameter stays clean markup. The metric cards below model the\ntranslation — the remaining patterns in this part are shown with inline style\nattributes for compactness, and you should lift them into css-parameter classes\nthe same way.\n\n### Metric Cards (for dashboards)\n\ncss parameter:\n```css\n.metric-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 12px;\n  margin-bottom: 1.5rem;\n}\n.metric-card {\n  background: var(--color-background-secondary);\n  border-radius: var(--border-radius-md);\n  padding: 1rem;\n}\n.metric-label {\n  font-size: 13px;\n  color: var(--color-text-secondary);\n  margin-bottom: 4px;\n}\n.metric-value { font-size: 24px; font-weight: 500; }\n```\n\nhtml parameter:\n```html\n\u003Cdiv class=\"metric-grid\">\n  \u003Cdiv class=\"metric-card\">\n    \u003Cdiv class=\"metric-label\">Total revenue\u003C\u002Fdiv>\n    \u003Cdiv class=\"metric-value\">$142,800\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"metric-card\">\n    \u003Cdiv class=\"metric-label\">Active users\u003C\u002Fdiv>\n    \u003Cdiv class=\"metric-value\">8,421\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n### Contact \u002F Data Record Card\n```html\n\u003Cdiv style=\"background: var(--color-background-primary);\n            border-radius: var(--border-radius-lg);\n            border: 0.5px solid var(--color-border-tertiary);\n            padding: 1rem 1.25rem;\">\n\n  \u003Cdiv style=\"display: flex; align-items: center; gap: 12px;\n              margin-bottom: 16px;\">\n    \u003C!-- Avatar circle with initials -->\n    \u003Cdiv style=\"width: 44px; height: 44px; border-radius: 50%;\n                background: var(--color-background-info);\n                display: flex; align-items: center; justify-content: center;\n                font-weight: 500; font-size: 14px;\n                color: var(--color-text-info);\">JD\u003C\u002Fdiv>\n    \u003Cdiv>\n      \u003Cp style=\"font-weight: 500; font-size: 15px; margin: 0;\">Jane Doe\u003C\u002Fp>\n      \u003Cp style=\"font-size: 13px; color: var(--color-text-secondary);\n                margin: 0;\">Lead Engineer\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"border-top: 0.5px solid var(--color-border-tertiary);\n              padding-top: 12px;\">\n    \u003Ctable style=\"width: 100%; font-size: 13px;\">\n      \u003Ctr>\n        \u003Ctd style=\"color: var(--color-text-secondary); padding: 4px 0;\">\n          Email\u003C\u002Ftd>\n        \u003Ctd style=\"text-align: right; padding: 4px 0;\n                   color: var(--color-text-info);\">jane@company.com\u003C\u002Ftd>\n      \u003C\u002Ftr>\n    \u003C\u002Ftable>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n### Badges and Status Pills\n```html\n\u003C!-- Status badge -->\n\u003Cspan style=\"display: inline-block; font-size: 12px; padding: 4px 12px;\n             border-radius: var(--border-radius-md);\n             background: var(--color-background-success);\n             color: var(--color-text-success);\">Active\u003C\u002Fspan>\n\n\u003C!-- Featured accent (the ONLY case where 2px border is allowed) -->\n\u003Cdiv style=\"border: 2px solid var(--color-border-info);\n            border-radius: var(--border-radius-lg);\n            padding: 1rem 1.25rem;\">\n  \u003Cspan style=\"font-size: 12px; padding: 4px 12px;\n               border-radius: var(--border-radius-md);\n               background: var(--color-background-info);\n               color: var(--color-text-info);\">Most popular\u003C\u002Fspan>\n\u003C\u002Fdiv>\n```\n\n### Form Elements\nInputs, selects, textareas, buttons, and range sliders are pre-styled\nin the host environment. Write bare tags — they inherit correct styling:\n- Text inputs: 36px height, hover\u002Ffocus states built in\n- Range sliders: 4px track + 18px thumb\n- Buttons: transparent bg, 0.5px border, hover\u002Factive states\n\n**Never use `\u003Cform>` tags.** Use `onClick` \u002F `onChange` handlers directly.\n\n### Comparison Cards\nFor \"help me choose between X and Y\":\n```html\n\u003Cdiv style=\"display: grid; grid-template-columns:\n            repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;\">\n\n  \u003Cdiv style=\"background: var(--color-background-primary);\n              border: 0.5px solid var(--color-border-tertiary);\n              border-radius: var(--border-radius-lg);\n              padding: 1rem 1.25rem;\">\n    \u003Ch3 style=\"font-size: 16px; font-weight: 500; margin: 0 0 8px;\">\n      Option A\u003C\u002Fh3>\n    \u003Cp style=\"font-size: 13px; color: var(--color-text-secondary);\n              margin: 0;\">Description here\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\n  \u003C!-- Repeat for Option B, C... -->\n\u003C\u002Fdiv>\n```\n\n---\n\n## Part 3: Advanced Interactive Widgets\n\n### Simulations and Physics\nFor teaching physics, algorithms, or systems behavior with real-time updates.\n\n**Pattern: Animation Loop with Controls**\n\ncss parameter:\n```css\n.sim-controls {\n  display: flex; align-items: center; gap: 16px;\n  margin: 12px 0; font-size: 13px;\n  color: var(--color-text-secondary);\n}\n#sim {\n  width: 100%; height: 300px;\n  border-radius: var(--border-radius-md);\n  background: var(--color-background-secondary);\n}\n```\n\nhtml parameter:\n```html\n\u003Ccanvas id=\"sim\">\u003C\u002Fcanvas>\n\n\u003Cdiv class=\"sim-controls\">\n  \u003Cbutton onclick=\"toggleSim()\">Play \u002F Pause\u003C\u002Fbutton>\n  \u003Clabel>Speed\n    \u003Cinput type=\"range\" min=\"1\" max=\"10\" value=\"5\" id=\"speed\"\n           oninput=\"setSimSpeed(+this.value)\">\n  \u003C\u002Flabel>\n  \u003Cbutton onclick=\"resetSim()\">Reset\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n```\n\njsFunctions parameter:\n```js\nfunction initSim(count) {\n  const canvas = document.getElementById('sim');\n  canvas.width = canvas.offsetWidth;\n  canvas.height = canvas.offsetHeight;\n  window.sim = {\n    canvas,\n    ctx: canvas.getContext('2d'),\n    running: true,\n    speed: 5,\n    particles: Array.from({ length: count }, () => ({\n      x: Math.random() * canvas.width,\n      y: Math.random() * canvas.height,\n      vx: (Math.random() - 0.5) * 2,\n      vy: (Math.random() - 0.5) * 2\n    }))\n  };\n}\n\nfunction stepSim() {\n  const { canvas, ctx, particles, speed, running } = window.sim;\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  for (const p of particles) {\n    p.x += p.vx * speed * 0.2;\n    p.y += p.vy * speed * 0.2;\n    if (p.x \u003C 0 || p.x > canvas.width) p.vx *= -1;\n    if (p.y \u003C 0 || p.y > canvas.height) p.vy *= -1;\n    ctx.beginPath();\n    ctx.arc(p.x, p.y, 4, 0, Math.PI * 2);\n    ctx.fillStyle = '#534AB7';\n    ctx.fill();\n  }\n  if (running) requestAnimationFrame(stepSim);\n}\n\nfunction setSimSpeed(value) { window.sim.speed = value; }\n\nfunction toggleSim() {\n  window.sim.running = !window.sim.running;\n  if (window.sim.running) stepSim();\n}\n\nfunction resetSim() {\n  const wasRunning = window.sim.running;\n  initSim(window.sim.particles.length);\n  if (!wasRunning) stepSim();\n}\n```\n\njsExpressions parameter:\n```js\ninitSim(50);\nstepSim();\n```\n\n### Math Visualizations\nFor plotting functions, showing geometric relationships, or exploring equations.\n\n**Pattern: Function Plotter with SVG**\n\ncss parameter:\n```css\n.plot-controls {\n  display: flex; gap: 16px; align-items: center;\n  margin: 12px 0; font-size: 13px;\n  color: var(--color-text-secondary);\n}\n.plot-controls input[type=\"number\"] { width: 60px; }\n.plot-controls input[type=\"range\"] { flex: 1; }\n```\n\nhtml parameter:\n```html\n\u003Csvg id=\"plot\" width=\"100%\" viewBox=\"0 0 680 400\">\n  \u003C!-- Grid -->\n  \u003Cline x1=\"60\" y1=\"200\" x2=\"640\" y2=\"200\"\n        stroke=\"var(--color-border-tertiary)\" stroke-width=\"0.5\"\u002F>\n  \u003Cline x1=\"340\" y1=\"20\" x2=\"340\" y2=\"380\"\n        stroke=\"var(--color-border-tertiary)\" stroke-width=\"0.5\"\u002F>\n  \u003C!-- Axes labels -->\n  \u003Ctext x=\"645\" y=\"196\" font-size=\"12\"\n        fill=\"var(--color-text-tertiary)\">x\u003C\u002Ftext>\n  \u003Ctext x=\"345\" y=\"16\" font-size=\"12\"\n        fill=\"var(--color-text-tertiary)\">y\u003C\u002Ftext>\n  \u003C!-- Function path drawn by JS -->\n  \u003Cpath id=\"fn-path\" fill=\"none\" stroke=\"#534AB7\" stroke-width=\"2\"\u002F>\n\u003C\u002Fsvg>\n\n\u003Cdiv class=\"plot-controls\">\n  \u003Clabel>f(x) = sin(\n    \u003Cinput type=\"number\" id=\"freq\" value=\"1\" min=\"0.1\" max=\"10\" step=\"0.1\"\n           oninput=\"plotFn()\">x)\n  \u003C\u002Flabel>\n  \u003Clabel>Amplitude\n    \u003Cinput type=\"range\" id=\"amp\" min=\"0.1\" max=\"3\" value=\"1\" step=\"0.1\"\n           oninput=\"plotFn()\">\n  \u003C\u002Flabel>\n\u003C\u002Fdiv>\n```\n\njsFunctions parameter:\n```js\nfunction plotFn() {\n  const freq = +document.getElementById('freq').value;\n  const amp = +document.getElementById('amp').value;\n  const xMin = -5, xMax = 5, yMin = -3, yMax = 3;\n  const toSvgX = x => 60 + (x - xMin) \u002F (xMax - xMin) * 580;\n  const toSvgY = y => 20 + (yMax - y) \u002F (yMax - yMin) * 360;\n  let d = '';\n  for (let px = 0; px \u003C= 580; px++) {\n    const x = xMin + px \u002F 580 * (xMax - xMin);\n    const y = amp * Math.sin(freq * x);\n    d += (px === 0 ? 'M' : 'L') + toSvgX(x).toFixed(1)\n       + ' ' + toSvgY(y).toFixed(1);\n  }\n  document.getElementById('fn-path').setAttribute('d', d);\n}\n```\n\njsExpressions parameter:\n```js\nplotFn();\n```\n\n### Sortable \u002F Filterable Data Tables\n\ncss parameter:\n```css\n.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }\n.data-table th {\n  text-align: left; padding: 8px 12px; font-weight: 500;\n  border-bottom: 0.5px solid var(--color-border-secondary);\n  color: var(--color-text-secondary); cursor: pointer;\n  user-select: none; font-size: 12px;\n}\n.data-table th:hover { color: var(--color-text-primary); }\n.data-table td {\n  padding: 8px 12px;\n  border-bottom: 0.5px solid var(--color-border-tertiary);\n}\n.table-filter { width: 100%; margin-bottom: 12px; }\n.status-pill {\n  font-size: 12px; padding: 2px 10px;\n  border-radius: var(--border-radius-md);\n}\n.status-pill.active {\n  background: var(--color-background-success);\n  color: var(--color-text-success);\n}\n.status-pill.paused {\n  background: var(--color-background-warning);\n  color: var(--color-text-warning);\n}\n```\n\nhtml parameter:\n```html\n\u003Cinput type=\"text\" class=\"table-filter\" placeholder=\"Filter...\"\n       oninput=\"filterTable(this.value)\">\n\n\u003Ctable class=\"data-table\" id=\"table\">\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth onclick=\"sortTable(0)\">Name\u003C\u002Fth>\n      \u003Cth onclick=\"sortTable(1)\">Value\u003C\u002Fth>\n      \u003Cth onclick=\"sortTable(2)\">Status\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody id=\"tbody\">\n    \u003C!-- Rows populated by JS -->\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n```\n\njsFunctions parameter:\n```js\nfunction initTable(rows) {\n  window.tableData = rows;\n  window.sortCol = -1;\n  window.sortAsc = true;\n  renderRows(rows);\n}\n\nfunction renderRows(rows) {\n  document.getElementById('tbody').innerHTML = rows.map(r =>\n    `\u003Ctr>\u003Ctd>${r[0]}\u003C\u002Ftd>\u003Ctd>${r[1]}\u003C\u002Ftd>\n     \u003Ctd>\u003Cspan class=\"status-pill ${r[2] === 'Active' ? 'active' : 'paused'}\">${r[2]}\u003C\u002Fspan>\n     \u003C\u002Ftd>\u003C\u002Ftr>`\n  ).join('');\n}\n\nfunction sortTable(col) {\n  window.sortAsc = window.sortCol === col ? !window.sortAsc : true;\n  window.sortCol = col;\n  const asc = window.sortAsc;\n  window.tableData.sort((a, b) => {\n    if (a[col] \u003C b[col]) return asc ? -1 : 1;\n    if (a[col] > b[col]) return asc ? 1 : -1;\n    return 0;\n  });\n  renderRows(window.tableData);\n}\n\nfunction filterTable(q) {\n  const low = q.toLowerCase();\n  renderRows(window.tableData.filter(r =>\n    r.some(c => String(c).toLowerCase().includes(low))));\n}\n```\n\njsExpressions parameter:\n```js\ninitTable([\n  ['Alpha', 42, 'Active'],\n  ['Beta', 18, 'Paused'],\n  ['Gamma', 91, 'Active'],\n]);\n```\n\n---\n\n## Part 4: Chart.js — Advanced Patterns\n\n### Dark Mode Awareness\n```javascript\nconst isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\nconst textColor = isDark ? '#c2c0b6' : '#3d3d3a';\nconst gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)';\nconst tooltipBg = isDark ? '#2C2C2A' : '#fff';\n```\n\nCanvas cannot read CSS variables — always detect dark mode and use\nhardcoded hex values.\n\n### Wrapper Pattern (Critical for Sizing)\n```html\n\u003Cdiv style=\"position: relative; width: 100%; height: 300px;\">\n  \u003Ccanvas id=\"chart\">\u003C\u002Fcanvas>\n\u003C\u002Fdiv>\n```\n- Height goes on the wrapper div ONLY, never on canvas.\n- Always set `responsive: true, maintainAspectRatio: false`.\n- For horizontal bar charts: height = (bars x 40) + 80 pixels.\n\n### Custom Legend (Always Use This)\nDisable Chart.js default legend and build HTML:\n```javascript\nplugins: { legend: { display: false } }\n```\n```html\n\u003Cdiv style=\"display: flex; flex-wrap: wrap; gap: 16px;\n            margin-bottom: 8px; font-size: 12px;\n            color: var(--color-text-secondary);\">\n  \u003Cspan style=\"display: flex; align-items: center; gap: 4px;\">\n    \u003Cspan style=\"width: 10px; height: 10px; border-radius: 2px;\n                 background: #534AB7;\">\u003C\u002Fspan>Series A — 65%\n  \u003C\u002Fspan>\n  \u003Cspan style=\"display: flex; align-items: center; gap: 4px;\">\n    \u003Cspan style=\"width: 10px; height: 10px; border-radius: 2px;\n                 background: #0F6E56;\">\u003C\u002Fspan>Series B — 35%\n  \u003C\u002Fspan>\n\u003C\u002Fdiv>\n```\n\n### Dashboard Layout\nMetric cards on top -> chart below -> drill-down buttons wired to the\nsendPrompt bridge (Part 6):\n```html\n\u003C!-- Metric cards grid -->\n\u003Cdiv style=\"display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n            gap: 12px; margin-bottom: 1.5rem;\">\n  \u003C!-- cards here -->\n\u003C\u002Fdiv>\n\n\u003C!-- Chart (no card wrapper) -->\n\u003Cdiv style=\"position: relative; width: 100%; height: 300px;\">\n  \u003Ccanvas id=\"chart\">\u003C\u002Fcanvas>\n\u003C\u002Fdiv>\n```\n\n### Chart Type Selection Guide\n| Data pattern               | Chart type          |\n|----------------------------|---------------------|\n| Trend over time            | Line                |\n| Category comparison        | Vertical bar        |\n| Ranking (few items)        | Horizontal bar      |\n| Part of whole              | Doughnut            |\n| Distribution               | Histogram (bar)     |\n| Correlation (2 variables)  | Scatter             |\n| Multi-variable comparison  | Radar               |\n| Range \u002F uncertainty        | Line with fill area |\n\n---\n\n## Part 5: Generative Art and Illustration\n\nFor when the user asks for something creative, decorative, or aesthetic.\n\n### When to Use\n- \"Draw me a sunset\" \u002F \"Create a pattern\"\n- Decorative headers or visual breaks\n- Mood illustrations for creative writing\n- Abstract visualizations of data or music\n\n### Rules (Different from Diagrams)\n- Fill the canvas — art should feel rich, not sparse\n- Bold colors are encouraged. You can use custom hex freely.\n- Layered overlapping shapes create depth\n- Organic forms with `\u003Cpath>` curves, `\u003Cellipse>`, `\u003Ccircle>`\n- Texture via repetition (hatching, dots, parallel lines)\n- Geometric patterns with `\u003Cg transform=\"rotate()\">`\n- NO gradients, shadows, blur, or glow (still flat aesthetic)\n\n### Pattern: Geometric Art\n```svg\n\u003Csvg width=\"100%\" viewBox=\"0 0 680 400\">\n  \u003C!-- Background shapes -->\n  \u003Ccircle cx=\"200\" cy=\"200\" r=\"150\" fill=\"#EEEDFE\" opacity=\"0.8\"\u002F>\n  \u003Ccircle cx=\"480\" cy=\"180\" r=\"120\" fill=\"#E1F5EE\" opacity=\"0.8\"\u002F>\n\n  \u003C!-- Overlapping geometric forms -->\n  \u003Crect x=\"150\" y=\"100\" width=\"200\" height=\"200\" rx=\"8\"\n        fill=\"#CECBF6\" opacity=\"0.6\"\n        transform=\"rotate(15 250 200)\"\u002F>\n  \u003Crect x=\"320\" y=\"80\" width=\"180\" height=\"180\" rx=\"8\"\n        fill=\"#9FE1CB\" opacity=\"0.6\"\n        transform=\"rotate(-10 410 170)\"\u002F>\n\n  \u003C!-- Detail lines -->\n  \u003Cline x1=\"100\" y1=\"300\" x2=\"580\" y2=\"300\"\n        stroke=\"#534AB7\" stroke-width=\"0.5\" opacity=\"0.3\"\u002F>\n  \u003Cline x1=\"100\" y1=\"310\" x2=\"580\" y2=\"310\"\n        stroke=\"#534AB7\" stroke-width=\"0.5\" opacity=\"0.2\"\u002F>\n\u003C\u002Fsvg>\n```\n\n### Pattern: Radial Symmetry\n```svg\n\u003Csvg width=\"100%\" viewBox=\"0 0 680 680\">\n  \u003Cg transform=\"translate(340 340)\">\n    \u003C!-- Repeat a shape at angular intervals -->\n    \u003Cg transform=\"rotate(0)\">\n      \u003Cellipse cx=\"0\" cy=\"-120\" rx=\"30\" ry=\"80\"\n               fill=\"#FAECE7\" stroke=\"#993C1D\" stroke-width=\"0.5\"\u002F>\n    \u003C\u002Fg>\n    \u003Cg transform=\"rotate(45)\">\n      \u003Cellipse cx=\"0\" cy=\"-120\" rx=\"30\" ry=\"80\"\n               fill=\"#FBEAF0\" stroke=\"#993556\" stroke-width=\"0.5\"\u002F>\n    \u003C\u002Fg>\n    \u003C!-- ... repeat for 90, 135, 180, 225, 270, 315 -->\n  \u003C\u002Fg>\n\u003C\u002Fsvg>\n```\n\n### Pattern: Landscape with Layered Shapes\nFor physical scenes, use ALL hardcoded hex (no theme classes):\n```svg\n\u003Csvg width=\"100%\" viewBox=\"0 0 680 400\">\n  \u003C!-- Sky -->\n  \u003Crect x=\"0\" y=\"0\" width=\"680\" height=\"250\" fill=\"#E6F1FB\"\u002F>\n  \u003C!-- Mountains -->\n  \u003Cpolygon points=\"0,250 150,100 300,250\" fill=\"#B4B2A9\"\u002F>\n  \u003Cpolygon points=\"200,250 400,60 600,250\" fill=\"#888780\"\u002F>\n  \u003C!-- Ground -->\n  \u003Crect x=\"0\" y=\"250\" width=\"680\" height=\"150\" fill=\"#C0DD97\"\u002F>\n  \u003C!-- Sun -->\n  \u003Ccircle cx=\"550\" cy=\"80\" r=\"40\" fill=\"#FAC775\"\u002F>\n\u003C\u002Fsvg>\n```\n\n---\n\n## Part 6: Advanced Patterns\n\n### Tabbed \u002F Multi-View Interfaces\nSince html streams top-down, don't use `display: none` during streaming.\nInstead, render all content stacked, then let a jsExpression create the tabs\nonce the document is complete:\n\ncss parameter:\n```css\n#tabs { display: flex; gap: 4px; margin-bottom: 16px; }\n```\n\nhtml parameter:\n```html\n\u003Cdiv id=\"tabs\">\n  \u003Cbutton onclick=\"showTab(0)\">Overview\u003C\u002Fbutton>\n  \u003Cbutton onclick=\"showTab(1)\">Details\u003C\u002Fbutton>\n  \u003Cbutton onclick=\"showTab(2)\">Code\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\n\u003Cdiv id=\"panel-0\">\u003C!-- Overview content -->\u003C\u002Fdiv>\n\u003Cdiv id=\"panel-1\">\u003C!-- Details content -->\u003C\u002Fdiv>\n\u003Cdiv id=\"panel-2\">\u003C!-- Code content -->\u003C\u002Fdiv>\n```\n\njsFunctions parameter:\n```js\nfunction showTab(n) {\n  for (let i = 0; i \u003C 3; i++) {\n    document.getElementById('panel-' + i).style.display =\n      i === n ? 'block' : 'none';\n  }\n  document.querySelectorAll('#tabs button').forEach((b, i) => {\n    b.style.fontWeight = i === n ? '500' : '400';\n    b.style.color = i === n\n      ? 'var(--color-text-primary)' : 'var(--color-text-tertiary)';\n  });\n}\n```\n\njsExpressions parameter:\n```js\nshowTab(0);\n```\n\n### sendPrompt — Chat-Driven Interactivity\nThe host bridge exposes `await Websandbox.connection.remote.sendPrompt({ text })`,\nwhich sends a message as if the user typed it. Use it when the user's next\naction benefits from AI thinking. Wire it through a named jsFunction:\n\njsFunctions parameter:\n```js\nfunction drillDown(text) {\n  Websandbox.connection.remote.sendPrompt({ text });\n}\n```\n\nhtml parameter:\n```html\n\u003Cbutton onclick=\"drillDown('Break down Q4 revenue by region')\">\n  Drill into Q4 ↗\n\u003C\u002Fbutton>\n\u003Cbutton onclick=\"drillDown('Explain what shear force is')\">\n  Learn about shear ↗\n\u003C\u002Fbutton>\n```\n\n**Use for**: drill-downs, follow-up questions, \"explain this part\".\n**Don't use for**: filtering, sorting, toggling — handle those in JS.\nAppend ` ↗` to button text when it triggers the bridge.\nFor external links use `await Websandbox.connection.remote.openLink({ url })`\n(https only — anything else is rejected).\n\n### Responsive Grid Pattern\n```css\ndisplay: grid;\ngrid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\ngap: 12px;\n```\nUse `minmax(0, 1fr)` if children have large min-content that could overflow.\n\n### CSS Animations (Subtle and Purposeful)\n```css\n\u002F* Only animate transform and opacity for performance *\u002F\n@keyframes fadeSlideIn {\n  from { opacity: 0; transform: translateY(8px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\u002F* Always respect user 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\u002F* Flowing particles \u002F convection currents *\u002F\n@keyframes flow { to { stroke-dashoffset: -20; } }\n.flowing {\n  stroke-dasharray: 5 5;\n  animation: flow 1.6s linear infinite;\n}\n\n\u002F* Pulsing for active elements *\u002F\n@keyframes pulse {\n  0%, 100% { opacity: 0.3; }\n  50% { opacity: 0.7; }\n}\n```\n\n---\n\n## Part 7: External Libraries\n\n### Importmap Libraries (Pre-Injected)\n\nAn importmap for `three`, `gsap`, `d3`, and `chart.js` (served via esm.sh) is\npre-injected into every sandbox. jsFunctions and jsExpressions execute as classic\nscripts, where top-level await is a SyntaxError that fails silently — so PREFER\nloading libraries with dynamic imports INSIDE an async function declared in\njsFunctions, and keep jsExpressions synchronous invocations of those functions:\n\n```js\nasync function setupScene() {\n  const THREE = await import('three');\n  const { OrbitControls } =\n    await import('three\u002Fexamples\u002Fjsm\u002Fcontrols\u002FOrbitControls.js');\n  \u002F\u002F ... build the scene with real geometry and PBR materials.\n  \u002F\u002F NEVER fake 3D with CSS transforms or Canvas 2D projection.\n}\n```\n\n```js\nasync function setupLibraries() {\n  const { default: gsap } = await import('gsap');\n  const d3 = await import('d3');\n  const { default: Chart } = await import('chart.js\u002Fauto');\n  \u002F\u002F ... use the libraries here.\n}\n```\n\nWhere a module script genuinely belongs in the html parameter,\n`\u003Cscript type=\"module\">` with bare specifiers also resolves through the importmap:\n\n```html\n\u003Cscript type=\"module\">\nimport * as THREE from 'three';\nimport { OrbitControls } from 'three\u002Fexamples\u002Fjsm\u002Fcontrols\u002FOrbitControls.js';\n\u002F\u002F ... your Three.js code here\n\u003C\u002Fscript>\n```\n\n**Critical**: Regular `\u003Cscript>` tags cannot use `import` statements — use\n`\u003Cscript type=\"module\">` in html. In jsFunctions\u002FjsExpressions (classic-script\nsemantics) dynamic `await import(...)` works only inside an async function body,\nnever at top level.\n\n### CDN Allowlist (For Everything Else)\n\nOnly these CDN origins work (CSP-enforced):\n- `cdnjs.cloudflare.com`\n- `esm.sh`\n- `cdn.jsdelivr.net`\n- `unpkg.com`\n\n`\u003Cscript src>` \u002F `\u003Clink>` CDN tags still work in the html head for libraries\noutside the importmap:\n\n**Mermaid** (ERDs, sequence diagrams, class diagrams):\n```html\n\u003Cscript type=\"module\">\nimport mermaid from 'https:\u002F\u002Fesm.sh\u002Fmermaid@11\u002Fdist\u002Fmermaid.esm.min.mjs';\n\u003C\u002Fscript>\n```\n\n**Tone.js** (audio synthesis):\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Ftone\u002F14.8.49\u002FTone.min.js\">\u003C\u002Fscript>\n```\n\n### Three.js Coordinate Conventions\n\nThree.js uses a **right-handed Y-up** coordinate system:\n- **X** = right (positive) \u002F left (negative)\n- **Y** = up (positive) \u002F down (negative)\n- **Z** = toward the viewer (positive) \u002F away from the viewer (negative)\n\n**Critical for vehicles and aircraft:** The fuselage\u002Fbody extends along **Z** (nose at -Z, tail at +Z). Wings extend along **X** (left\u002Fright). The vertical stabilizer extends along **Y**.\n\nWhen building an aircraft from primitives:\n- **Fuselage** = cylinder or box, long axis along **Z** (use `geometry` default or rotate 90° around X)\n- **Wings** = flat box, wide along **X**, thin along **Y**, short along **Z**\n- **Tail fin** = flat box, tall along **Y**, thin along **X**, short along **Z**\n\n```javascript\n\u002F\u002F Correct aircraft orientation example:\n\u002F\u002F Fuselage along Z\nconst fuselage = new THREE.Mesh(\n  new THREE.CylinderGeometry(0.15, 0.08, 2.0, 12),\n  material\n);\nfuselage.rotation.x = Math.PI \u002F 2; \u002F\u002F CylinderGeometry default is Y-up, rotate to Z-forward\n\n\u002F\u002F Wings along X\nconst wing = new THREE.Mesh(\n  new THREE.BoxGeometry(2.5, 0.03, 0.4), \u002F\u002F wide X, thin Y, short Z\n  material\n);\n\n\u002F\u002F Vertical stabilizer along Y\nconst tailFin = new THREE.Mesh(\n  new THREE.BoxGeometry(0.03, 0.4, 0.3), \u002F\u002F thin X, tall Y, short Z\n  material\n);\ntailFin.position.set(0, 0.2, 0.9); \u002F\u002F above and behind\n```\n\n**Rotation axes for flight dynamics:**\n- **Pitch** = rotation around **X** (nose up\u002Fdown)\n- **Roll** = rotation around **Z** (wings tilt)\n- **Yaw** = rotation around **Y** (nose left\u002Fright)\n\n**Common mistake:** Using the wing box as the fuselage (wide along X instead of Z). Always verify: the longest dimension of the fuselage should be along Z.\n\n---\n\n## Part 8: Quality Checklist\n\nBefore producing any visual, run through this:\n\n### Functional\n- [ ] Does it work without JavaScript during streaming? (Content visible)\n- [ ] All styles live in the css parameter (no `\u003Cstyle>` blocks in html)\n- [ ] Behavior is split into jsFunctions (parameterized toolbox) +\n      jsExpressions (one invocation per statement)\n- [ ] Do all interactive controls have event handlers?\n- [ ] Are all displayed numbers rounded properly?\n- [ ] Does the canvas\u002FSVG fit within the container width?\n\n### Visual\n- [ ] Dark mode test: would every element be readable on near-black?\n- [ ] No hardcoded text colors in HTML (use CSS variables)\n- [ ] No gradients, shadows, blur, or glow\n- [ ] Borders are 0.5px (except 2px for featured item accent)\n- [ ] Font weights are only 400 or 500\n- [ ] All text is sentence case\n\n### Content\n- [ ] Explanatory text is in the response, not inside the widget\n- [ ] No titles or headings embedded in the HTML output\n- [ ] Visual is self-explanatory without reading the narration\n- [ ] Narration adds value beyond what the visual shows\n- [ ] Offered a clear \"go deeper\" path\n\n### Accessibility\n- [ ] `@media (prefers-reduced-motion: reduce)` for all animations\n- [ ] Text contrast is sufficient (dark text on light fills, vice versa)\n- [ ] Interactive elements are large enough to click (min 44px touch target)\n- [ ] No information conveyed by color alone\n\n---\n\n## Part 9: Decision Matrix — Picking the Right Visual\n\n| User asks about...          | Output type              | Technology          |\n|-----------------------------|--------------------------|---------------------|\n| How X works (physical)      | Illustrative diagram     | SVG                 |\n| How X works (abstract)      | Interactive explainer    | HTML + inline SVG   |\n| Process \u002F steps             | Flowchart                | SVG                 |\n| Architecture \u002F containment  | Structural diagram       | SVG                 |\n| Database schema \u002F ERD       | Relationship diagram     | Mermaid             |\n| Trends over time            | Line chart               | Chart.js            |\n| Category comparison         | Bar chart                | Chart.js            |\n| Part of whole               | Doughnut chart           | Chart.js            |\n| KPIs \u002F metrics              | Dashboard                | HTML metric cards   |\n| Design a UI                 | Mockup                   | HTML                |\n| Choose between options      | Comparison cards         | HTML grid           |\n| Cyclic process              | Step-through             | HTML stepper        |\n| Physics \u002F math              | Simulation               | Canvas + JS         |\n| Function \u002F equation         | Plotter                  | SVG + JS            |\n| Data exploration            | Sortable table           | HTML + JS           |\n| Creative \u002F decorative       | Art \u002F illustration       | SVG                 |\n| 3D visualization            | 3D scene                 | Three.js            |\n| Music \u002F audio               | Synthesizer              | Tone.js             |\n| Network \u002F graph             | Force layout             | D3.js               |\n| Quick factual answer        | Plain text               | None                |\n| Code solution               | Code block               | None                |\n| Emotional support           | Warm text                | None                |\n",{"data":56,"body":58},{"name":5,"description":7,"allowed-tools":57},[],{"type":59,"children":60},"root",[61,70,76,80,87,101,188,223,275,278,284,289,296,664,691,697,739,745,807,813,849,852,858,863,869,897,903,913,1007,1017,1027,1033,1038,1455,1460,1830,1836,2494,2500,2749,2755,2760,2778,2812,2818,2823,3101,3104,3110,3116,3121,3129,3133,3404,3408,3841,3846,5612,5617,5664,5670,5675,5683,5687,5976,5980,7197,7201,8108,8112,8134,8140,8144,8893,8897,9414,9418,10575,10579,10772,10775,10781,10787,11032,11037,11043,11145,11170,11176,11181,11239,11527,11533,11538,11736,11742,11868,11871,11877,11882,11887,11910,11916,11981,11987,12145,12151,12267,12273,12278,12371,12374,12380,12386,12399,12403,12478,12482,12898,12902,13393,13397,13427,13433,13445,13449,13551,13555,13721,13753,13759,13816,13829,13835,14406,14409,14415,14421,14451,14618,14842,14855,15004,15043,15049,15054,15093,15111,15121,15211,15221,15273,15279,15291,15324,15351,15356,15433,15958,15966,16015,16025,16028,16034,16039,16045,16113,16119,16177,16183,16232,16238,16286,16289,16295,16707],{"type":62,"tag":63,"props":64,"children":66},"element","h1",{"id":65},"agent-visualization-skills-volume-2-advanced-techniques",[67],{"type":68,"value":69},"text","Agent Visualization Skills — Volume 2: Advanced Techniques",{"type":62,"tag":71,"props":72,"children":73},"p",{},[74],{"type":68,"value":75},"Prerequisite: Volume 1 (SVG diagrams, basic interactive widgets, Chart.js, Mermaid).\nThis volume covers: UI mockups, dashboards, advanced interactivity, generative art,\nsimulations, math visualizations, and the design system that ties everything together.",{"type":62,"tag":77,"props":78,"children":79},"hr",{},[],{"type":62,"tag":81,"props":82,"children":84},"h2",{"id":83},"part-0-the-tool-contract-generatesandboxedui",[85],{"type":68,"value":86},"Part 0: The Tool Contract — generateSandboxedUi",{"type":62,"tag":71,"props":88,"children":89},{},[90,92,99],{"type":68,"value":91},"Everything in this volume ships through the ",{"type":62,"tag":93,"props":94,"children":96},"code",{"className":95},[],[97],{"type":68,"value":98},"generateSandboxedUi",{"type":68,"value":100}," tool. The UI\nstreams as you generate it, so emit the parameters in this EXACT order:",{"type":62,"tag":102,"props":103,"children":104},"ol",{},[105,117,128,139,166,177],{"type":62,"tag":106,"props":107,"children":108},"li",{},[109,115],{"type":62,"tag":93,"props":110,"children":112},{"className":111},[],[113],{"type":68,"value":114},"initialHeight",{"type":68,"value":116}," — estimated height of the finished UI in px.",{"type":62,"tag":106,"props":118,"children":119},{},[120,126],{"type":62,"tag":93,"props":121,"children":123},{"className":122},[],[124],{"type":68,"value":125},"placeholderMessages",{"type":68,"value":127}," — 2-4 short, playful progress messages.",{"type":62,"tag":106,"props":129,"children":130},{},[131,137],{"type":62,"tag":93,"props":132,"children":134},{"className":133},[],[135],{"type":68,"value":136},"css",{"type":68,"value":138}," — 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":62,"tag":106,"props":140,"children":141},{},[142,148,150,156,158,164],{"type":62,"tag":93,"props":143,"children":145},{"className":144},[],[146],{"type":68,"value":147},"html",{"type":68,"value":149}," — clean body markup, streamed in live. No ",{"type":62,"tag":93,"props":151,"children":153},{"className":152},[],[154],{"type":68,"value":155},"\u003Cstyle>",{"type":68,"value":157}," blocks (the css\nparameter owns all styles), no monolithic inline ",{"type":62,"tag":93,"props":159,"children":161},{"className":160},[],[162],{"type":68,"value":163},"\u003Cscript>",{"type":68,"value":165}," blocks.",{"type":62,"tag":106,"props":167,"children":168},{},[169,175],{"type":62,"tag":93,"props":170,"children":172},{"className":171},[],[173],{"type":68,"value":174},"jsFunctions",{"type":68,"value":176}," — named function declarations: the reusable toolbox of behavior.",{"type":62,"tag":106,"props":178,"children":179},{},[180,186],{"type":62,"tag":93,"props":181,"children":183},{"className":182},[],[184],{"type":68,"value":185},"jsExpressions",{"type":68,"value":187}," — small statements invoking those functions, applied one-by-one\nso the user watches each take effect.",{"type":62,"tag":71,"props":189,"children":190},{},[191,193,198,200,206,208,214,216,221],{"type":68,"value":192},"Write parameterized generators in ",{"type":62,"tag":93,"props":194,"children":196},{"className":195},[],[197],{"type":68,"value":174},{"type":68,"value":199}," (",{"type":62,"tag":93,"props":201,"children":203},{"className":202},[],[204],{"type":68,"value":205},"drawWing(color)",{"type":68,"value":207},", not\n",{"type":62,"tag":93,"props":209,"children":211},{"className":210},[],[212],{"type":68,"value":213},"drawRedWing()",{"type":68,"value":215},"). A well-parameterized toolbox lets a later refinement turn —\n\"make the wings red\" — append ONE new expression to ",{"type":62,"tag":93,"props":217,"children":219},{"className":218},[],[220],{"type":68,"value":185},{"type":68,"value":222}," instead of\nregenerating the whole document.",{"type":62,"tag":71,"props":224,"children":225},{},[226,228,234,236,242,244,250,252,258,259,265,267,273],{"type":68,"value":227},"The sandbox iframe has NO same-origin access: no localStorage, sessionStorage,\ncookies, IndexedDB, or same-origin fetch. The host bridge is\n",{"type":62,"tag":93,"props":229,"children":231},{"className":230},[],[232],{"type":68,"value":233},"await Websandbox.connection.remote.sendPrompt({ text })",{"type":68,"value":235}," and\n",{"type":62,"tag":93,"props":237,"children":239},{"className":238},[],[240],{"type":68,"value":241},"await Websandbox.connection.remote.openLink({ url })",{"type":68,"value":243}," (https only). The design\nsystem (Part 1) and an importmap for ",{"type":62,"tag":93,"props":245,"children":247},{"className":246},[],[248],{"type":68,"value":249},"three",{"type":68,"value":251},", ",{"type":62,"tag":93,"props":253,"children":255},{"className":254},[],[256],{"type":68,"value":257},"gsap",{"type":68,"value":251},{"type":62,"tag":93,"props":260,"children":262},{"className":261},[],[263],{"type":68,"value":264},"d3",{"type":68,"value":266},", and ",{"type":62,"tag":93,"props":268,"children":270},{"className":269},[],[271],{"type":68,"value":272},"chart.js",{"type":68,"value":274},"\n(Part 7) are pre-injected.",{"type":62,"tag":77,"props":276,"children":277},{},[],{"type":62,"tag":81,"props":279,"children":281},{"id":280},"part-1-the-design-system",[282],{"type":68,"value":283},"Part 1: The Design System",{"type":62,"tag":71,"props":285,"children":286},{},[287],{"type":68,"value":288},"Every visual you produce should feel native to the host interface — not like\nan embedded iframe from somewhere else. These rules apply to ALL output types.",{"type":62,"tag":290,"props":291,"children":293},"h3",{"id":292},"css-variables-auto-lightdark-mode",[294],{"type":68,"value":295},"CSS Variables (Auto Light\u002FDark Mode)",{"type":62,"tag":297,"props":298,"children":302},"pre",{"className":299,"code":300,"language":136,"meta":301,"style":301},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* Backgrounds *\u002F\n--color-background-primary    \u002F* white in light, near-black in dark *\u002F\n--color-background-secondary  \u002F* surface cards *\u002F\n--color-background-tertiary   \u002F* page background *\u002F\n--color-background-info       \u002F* blue tint *\u002F\n--color-background-danger     \u002F* red tint *\u002F\n--color-background-success    \u002F* green tint *\u002F\n--color-background-warning    \u002F* amber tint *\u002F\n\n\u002F* Text *\u002F\n--color-text-primary          \u002F* main text *\u002F\n--color-text-secondary        \u002F* muted \u002F labels *\u002F\n--color-text-tertiary         \u002F* hints \u002F placeholders *\u002F\n--color-text-info \u002F -danger \u002F -success \u002F -warning\n\n\u002F* Borders *\u002F\n--color-border-tertiary       \u002F* default: 0.15 alpha *\u002F\n--color-border-secondary      \u002F* hover: 0.3 alpha *\u002F\n--color-border-primary        \u002F* active: 0.4 alpha *\u002F\n\n\u002F* Typography *\u002F\n--font-sans                   \u002F* default body font *\u002F\n--font-serif                  \u002F* editorial \u002F blockquote only *\u002F\n--font-mono                   \u002F* code *\u002F\n\n\u002F* Layout *\u002F\n--border-radius-md            \u002F* 8px - most elements *\u002F\n--border-radius-lg            \u002F* 12px - cards *\u002F\n--border-radius-xl            \u002F* 16px - large containers *\u002F\n","",[303],{"type":62,"tag":93,"props":304,"children":305},{"__ignoreMap":301},[306,318,333,347,361,375,389,403,417,427,436,450,464,478,487,495,504,518,532,546,554,563,577,591,605,613,622,636,650],{"type":62,"tag":307,"props":308,"children":311},"span",{"class":309,"line":310},"line",1,[312],{"type":62,"tag":307,"props":313,"children":315},{"style":314},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[316],{"type":68,"value":317},"\u002F* Backgrounds *\u002F\n",{"type":62,"tag":307,"props":319,"children":321},{"class":309,"line":320},2,[322,328],{"type":62,"tag":307,"props":323,"children":325},{"style":324},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[326],{"type":68,"value":327},"--color-background-primary    ",{"type":62,"tag":307,"props":329,"children":330},{"style":314},[331],{"type":68,"value":332},"\u002F* white in light, near-black in dark *\u002F\n",{"type":62,"tag":307,"props":334,"children":336},{"class":309,"line":335},3,[337,342],{"type":62,"tag":307,"props":338,"children":339},{"style":324},[340],{"type":68,"value":341},"--color-background-secondary  ",{"type":62,"tag":307,"props":343,"children":344},{"style":314},[345],{"type":68,"value":346},"\u002F* surface cards *\u002F\n",{"type":62,"tag":307,"props":348,"children":350},{"class":309,"line":349},4,[351,356],{"type":62,"tag":307,"props":352,"children":353},{"style":324},[354],{"type":68,"value":355},"--color-background-tertiary   ",{"type":62,"tag":307,"props":357,"children":358},{"style":314},[359],{"type":68,"value":360},"\u002F* page background *\u002F\n",{"type":62,"tag":307,"props":362,"children":364},{"class":309,"line":363},5,[365,370],{"type":62,"tag":307,"props":366,"children":367},{"style":324},[368],{"type":68,"value":369},"--color-background-info       ",{"type":62,"tag":307,"props":371,"children":372},{"style":314},[373],{"type":68,"value":374},"\u002F* blue tint *\u002F\n",{"type":62,"tag":307,"props":376,"children":378},{"class":309,"line":377},6,[379,384],{"type":62,"tag":307,"props":380,"children":381},{"style":324},[382],{"type":68,"value":383},"--color-background-danger     ",{"type":62,"tag":307,"props":385,"children":386},{"style":314},[387],{"type":68,"value":388},"\u002F* red tint *\u002F\n",{"type":62,"tag":307,"props":390,"children":392},{"class":309,"line":391},7,[393,398],{"type":62,"tag":307,"props":394,"children":395},{"style":324},[396],{"type":68,"value":397},"--color-background-success    ",{"type":62,"tag":307,"props":399,"children":400},{"style":314},[401],{"type":68,"value":402},"\u002F* green tint *\u002F\n",{"type":62,"tag":307,"props":404,"children":406},{"class":309,"line":405},8,[407,412],{"type":62,"tag":307,"props":408,"children":409},{"style":324},[410],{"type":68,"value":411},"--color-background-warning    ",{"type":62,"tag":307,"props":413,"children":414},{"style":314},[415],{"type":68,"value":416},"\u002F* amber tint *\u002F\n",{"type":62,"tag":307,"props":418,"children":420},{"class":309,"line":419},9,[421],{"type":62,"tag":307,"props":422,"children":424},{"emptyLinePlaceholder":423},true,[425],{"type":68,"value":426},"\n",{"type":62,"tag":307,"props":428,"children":430},{"class":309,"line":429},10,[431],{"type":62,"tag":307,"props":432,"children":433},{"style":314},[434],{"type":68,"value":435},"\u002F* Text *\u002F\n",{"type":62,"tag":307,"props":437,"children":439},{"class":309,"line":438},11,[440,445],{"type":62,"tag":307,"props":441,"children":442},{"style":324},[443],{"type":68,"value":444},"--color-text-primary          ",{"type":62,"tag":307,"props":446,"children":447},{"style":314},[448],{"type":68,"value":449},"\u002F* main text *\u002F\n",{"type":62,"tag":307,"props":451,"children":453},{"class":309,"line":452},12,[454,459],{"type":62,"tag":307,"props":455,"children":456},{"style":324},[457],{"type":68,"value":458},"--color-text-secondary        ",{"type":62,"tag":307,"props":460,"children":461},{"style":314},[462],{"type":68,"value":463},"\u002F* muted \u002F labels *\u002F\n",{"type":62,"tag":307,"props":465,"children":467},{"class":309,"line":466},13,[468,473],{"type":62,"tag":307,"props":469,"children":470},{"style":324},[471],{"type":68,"value":472},"--color-text-tertiary         ",{"type":62,"tag":307,"props":474,"children":475},{"style":314},[476],{"type":68,"value":477},"\u002F* hints \u002F placeholders *\u002F\n",{"type":62,"tag":307,"props":479,"children":481},{"class":309,"line":480},14,[482],{"type":62,"tag":307,"props":483,"children":484},{"style":324},[485],{"type":68,"value":486},"--color-text-info \u002F -danger \u002F -success \u002F -warning\n",{"type":62,"tag":307,"props":488,"children":490},{"class":309,"line":489},15,[491],{"type":62,"tag":307,"props":492,"children":493},{"emptyLinePlaceholder":423},[494],{"type":68,"value":426},{"type":62,"tag":307,"props":496,"children":498},{"class":309,"line":497},16,[499],{"type":62,"tag":307,"props":500,"children":501},{"style":314},[502],{"type":68,"value":503},"\u002F* Borders *\u002F\n",{"type":62,"tag":307,"props":505,"children":507},{"class":309,"line":506},17,[508,513],{"type":62,"tag":307,"props":509,"children":510},{"style":324},[511],{"type":68,"value":512},"--color-border-tertiary       ",{"type":62,"tag":307,"props":514,"children":515},{"style":314},[516],{"type":68,"value":517},"\u002F* default: 0.15 alpha *\u002F\n",{"type":62,"tag":307,"props":519,"children":521},{"class":309,"line":520},18,[522,527],{"type":62,"tag":307,"props":523,"children":524},{"style":324},[525],{"type":68,"value":526},"--color-border-secondary      ",{"type":62,"tag":307,"props":528,"children":529},{"style":314},[530],{"type":68,"value":531},"\u002F* hover: 0.3 alpha *\u002F\n",{"type":62,"tag":307,"props":533,"children":535},{"class":309,"line":534},19,[536,541],{"type":62,"tag":307,"props":537,"children":538},{"style":324},[539],{"type":68,"value":540},"--color-border-primary        ",{"type":62,"tag":307,"props":542,"children":543},{"style":314},[544],{"type":68,"value":545},"\u002F* active: 0.4 alpha *\u002F\n",{"type":62,"tag":307,"props":547,"children":549},{"class":309,"line":548},20,[550],{"type":62,"tag":307,"props":551,"children":552},{"emptyLinePlaceholder":423},[553],{"type":68,"value":426},{"type":62,"tag":307,"props":555,"children":557},{"class":309,"line":556},21,[558],{"type":62,"tag":307,"props":559,"children":560},{"style":314},[561],{"type":68,"value":562},"\u002F* Typography *\u002F\n",{"type":62,"tag":307,"props":564,"children":566},{"class":309,"line":565},22,[567,572],{"type":62,"tag":307,"props":568,"children":569},{"style":324},[570],{"type":68,"value":571},"--font-sans                   ",{"type":62,"tag":307,"props":573,"children":574},{"style":314},[575],{"type":68,"value":576},"\u002F* default body font *\u002F\n",{"type":62,"tag":307,"props":578,"children":580},{"class":309,"line":579},23,[581,586],{"type":62,"tag":307,"props":582,"children":583},{"style":324},[584],{"type":68,"value":585},"--font-serif                  ",{"type":62,"tag":307,"props":587,"children":588},{"style":314},[589],{"type":68,"value":590},"\u002F* editorial \u002F blockquote only *\u002F\n",{"type":62,"tag":307,"props":592,"children":594},{"class":309,"line":593},24,[595,600],{"type":62,"tag":307,"props":596,"children":597},{"style":324},[598],{"type":68,"value":599},"--font-mono                   ",{"type":62,"tag":307,"props":601,"children":602},{"style":314},[603],{"type":68,"value":604},"\u002F* code *\u002F\n",{"type":62,"tag":307,"props":606,"children":608},{"class":309,"line":607},25,[609],{"type":62,"tag":307,"props":610,"children":611},{"emptyLinePlaceholder":423},[612],{"type":68,"value":426},{"type":62,"tag":307,"props":614,"children":616},{"class":309,"line":615},26,[617],{"type":62,"tag":307,"props":618,"children":619},{"style":314},[620],{"type":68,"value":621},"\u002F* Layout *\u002F\n",{"type":62,"tag":307,"props":623,"children":625},{"class":309,"line":624},27,[626,631],{"type":62,"tag":307,"props":627,"children":628},{"style":324},[629],{"type":68,"value":630},"--border-radius-md            ",{"type":62,"tag":307,"props":632,"children":633},{"style":314},[634],{"type":68,"value":635},"\u002F* 8px - most elements *\u002F\n",{"type":62,"tag":307,"props":637,"children":639},{"class":309,"line":638},28,[640,645],{"type":62,"tag":307,"props":641,"children":642},{"style":324},[643],{"type":68,"value":644},"--border-radius-lg            ",{"type":62,"tag":307,"props":646,"children":647},{"style":314},[648],{"type":68,"value":649},"\u002F* 12px - cards *\u002F\n",{"type":62,"tag":307,"props":651,"children":653},{"class":309,"line":652},29,[654,659],{"type":62,"tag":307,"props":655,"children":656},{"style":324},[657],{"type":68,"value":658},"--border-radius-xl            ",{"type":62,"tag":307,"props":660,"children":661},{"style":314},[662],{"type":68,"value":663},"\u002F* 16px - large containers *\u002F\n",{"type":62,"tag":71,"props":665,"children":666},{},[667,673,675,681,683,689],{"type":62,"tag":668,"props":669,"children":670},"strong",{},[671],{"type":68,"value":672},"Critical rule",{"type":68,"value":674},": Never hardcode colors like ",{"type":62,"tag":93,"props":676,"children":678},{"className":677},[],[679],{"type":68,"value":680},"#333",{"type":68,"value":682}," or ",{"type":62,"tag":93,"props":684,"children":686},{"className":685},[],[687],{"type":68,"value":688},"#fff",{"type":68,"value":690}," in HTML.\nThey break in the opposite mode. Always use CSS variables.",{"type":62,"tag":290,"props":692,"children":694},{"id":693},"typography-rules",[695],{"type":68,"value":696},"Typography Rules",{"type":62,"tag":698,"props":699,"children":700},"ul",{},[701,706,711,716,721,734],{"type":62,"tag":106,"props":702,"children":703},{},[704],{"type":68,"value":705},"h1 = 22px, h2 = 18px, h3 = 16px — all font-weight: 500",{"type":62,"tag":106,"props":707,"children":708},{},[709],{"type":68,"value":710},"Body = 16px, weight 400, line-height: 1.7",{"type":62,"tag":106,"props":712,"children":713},{},[714],{"type":68,"value":715},"Only two weights: 400 (regular) and 500 (medium). Never 600 or 700.",{"type":62,"tag":106,"props":717,"children":718},{},[719],{"type":68,"value":720},"Sentence case everywhere. Never Title Case or ALL CAPS.",{"type":62,"tag":106,"props":722,"children":723},{},[724,726,732],{"type":68,"value":725},"No mid-sentence bolding. Use ",{"type":62,"tag":93,"props":727,"children":729},{"className":728},[],[730],{"type":68,"value":731},"code style",{"type":68,"value":733}," for entity\u002Fclass\u002Ffunction names.",{"type":62,"tag":106,"props":735,"children":736},{},[737],{"type":68,"value":738},"No font-size below 11px anywhere.",{"type":62,"tag":290,"props":740,"children":742},{"id":741},"component-tokens",[743],{"type":68,"value":744},"Component Tokens",{"type":62,"tag":698,"props":746,"children":747},{},[748,759,792,797,802],{"type":62,"tag":106,"props":749,"children":750},{},[751,753],{"type":68,"value":752},"Borders: ",{"type":62,"tag":93,"props":754,"children":756},{"className":755},[],[757],{"type":68,"value":758},"0.5px solid var(--color-border-tertiary)",{"type":62,"tag":106,"props":760,"children":761},{},[762,764,770,772,778,779,785,786],{"type":68,"value":763},"Cards: ",{"type":62,"tag":93,"props":765,"children":767},{"className":766},[],[768],{"type":68,"value":769},"background: var(--color-background-primary)",{"type":68,"value":771},",\n",{"type":62,"tag":93,"props":773,"children":775},{"className":774},[],[776],{"type":68,"value":777},"border: 0.5px solid var(--color-border-tertiary)",{"type":68,"value":771},{"type":62,"tag":93,"props":780,"children":782},{"className":781},[],[783],{"type":68,"value":784},"border-radius: var(--border-radius-lg)",{"type":68,"value":251},{"type":62,"tag":93,"props":787,"children":789},{"className":788},[],[790],{"type":68,"value":791},"padding: 1rem 1.25rem",{"type":62,"tag":106,"props":793,"children":794},{},[795],{"type":68,"value":796},"No gradients, drop shadows, blur, glow, or neon effects",{"type":62,"tag":106,"props":798,"children":799},{},[800],{"type":68,"value":801},"No emoji — use CSS shapes or SVG paths for icons",{"type":62,"tag":106,"props":803,"children":804},{},[805],{"type":68,"value":806},"Background of outer container is always transparent",{"type":62,"tag":290,"props":808,"children":810},{"id":809},"number-formatting",[811],{"type":68,"value":812},"Number Formatting",{"type":62,"tag":71,"props":814,"children":815},{},[816,818,824,826,832,833,839,841,847],{"type":68,"value":817},"Always round displayed numbers. JavaScript float math leaks artifacts:\n",{"type":62,"tag":93,"props":819,"children":821},{"className":820},[],[822],{"type":68,"value":823},"0.1 + 0.2 = 0.30000000000000004",{"type":68,"value":825},". Every number on screen must go through\n",{"type":62,"tag":93,"props":827,"children":829},{"className":828},[],[830],{"type":68,"value":831},"Math.round()",{"type":68,"value":251},{"type":62,"tag":93,"props":834,"children":836},{"className":835},[],[837],{"type":68,"value":838},".toFixed(n)",{"type":68,"value":840},", or ",{"type":62,"tag":93,"props":842,"children":844},{"className":843},[],[845],{"type":68,"value":846},"Intl.NumberFormat",{"type":68,"value":848},".",{"type":62,"tag":77,"props":850,"children":851},{},[],{"type":62,"tag":81,"props":853,"children":855},{"id":854},"part-2-ui-mockups",[856],{"type":68,"value":857},"Part 2: UI Mockups",{"type":62,"tag":71,"props":859,"children":860},{},[861],{"type":68,"value":862},"For when the user asks you to design or prototype a UI.",{"type":62,"tag":290,"props":864,"children":866},{"id":865},"when-to-use",[867],{"type":68,"value":868},"When to Use",{"type":62,"tag":698,"props":870,"children":871},{},[872,877,882,887,892],{"type":62,"tag":106,"props":873,"children":874},{},[875],{"type":68,"value":876},"\"Design a settings page for...\"",{"type":62,"tag":106,"props":878,"children":879},{},[880],{"type":68,"value":881},"\"Mock up a dashboard\"",{"type":62,"tag":106,"props":883,"children":884},{},[885],{"type":68,"value":886},"\"What should this form look like?\"",{"type":62,"tag":106,"props":888,"children":889},{},[890],{"type":68,"value":891},"\"Show me a card layout for...\"",{"type":62,"tag":106,"props":893,"children":894},{},[895],{"type":68,"value":896},"Prototyping before building",{"type":62,"tag":290,"props":898,"children":900},{"id":899},"presentation-rules",[901],{"type":68,"value":902},"Presentation Rules",{"type":62,"tag":71,"props":904,"children":905},{},[906,911],{"type":62,"tag":668,"props":907,"children":908},{},[909],{"type":68,"value":910},"Contained mockups",{"type":68,"value":912}," (mobile screens, modals, chat threads, single cards):\nWrap in a background surface so they don't float naked:",{"type":62,"tag":297,"props":914,"children":917},{"className":915,"code":916,"language":147,"meta":301,"style":301},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv style=\"background: var(--color-background-secondary);\n            border-radius: var(--border-radius-lg);\n            padding: 2rem; display: flex; justify-content: center;\">\n  \u003C!-- Your mockup inside -->\n\u003C\u002Fdiv>\n",[918],{"type":62,"tag":93,"props":919,"children":920},{"__ignoreMap":301},[921,958,966,983,991],{"type":62,"tag":307,"props":922,"children":923},{"class":309,"line":310},[924,930,936,942,947,952],{"type":62,"tag":307,"props":925,"children":927},{"style":926},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[928],{"type":68,"value":929},"\u003C",{"type":62,"tag":307,"props":931,"children":933},{"style":932},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[934],{"type":68,"value":935},"div",{"type":62,"tag":307,"props":937,"children":939},{"style":938},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[940],{"type":68,"value":941}," style",{"type":62,"tag":307,"props":943,"children":944},{"style":926},[945],{"type":68,"value":946},"=",{"type":62,"tag":307,"props":948,"children":949},{"style":926},[950],{"type":68,"value":951},"\"",{"type":62,"tag":307,"props":953,"children":955},{"style":954},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[956],{"type":68,"value":957},"background: var(--color-background-secondary);\n",{"type":62,"tag":307,"props":959,"children":960},{"class":309,"line":320},[961],{"type":62,"tag":307,"props":962,"children":963},{"style":954},[964],{"type":68,"value":965},"            border-radius: var(--border-radius-lg);\n",{"type":62,"tag":307,"props":967,"children":968},{"class":309,"line":335},[969,974,978],{"type":62,"tag":307,"props":970,"children":971},{"style":954},[972],{"type":68,"value":973},"            padding: 2rem; display: flex; justify-content: center;",{"type":62,"tag":307,"props":975,"children":976},{"style":926},[977],{"type":68,"value":951},{"type":62,"tag":307,"props":979,"children":980},{"style":926},[981],{"type":68,"value":982},">\n",{"type":62,"tag":307,"props":984,"children":985},{"class":309,"line":349},[986],{"type":62,"tag":307,"props":987,"children":988},{"style":314},[989],{"type":68,"value":990},"  \u003C!-- Your mockup inside -->\n",{"type":62,"tag":307,"props":992,"children":993},{"class":309,"line":363},[994,999,1003],{"type":62,"tag":307,"props":995,"children":996},{"style":926},[997],{"type":68,"value":998},"\u003C\u002F",{"type":62,"tag":307,"props":1000,"children":1001},{"style":932},[1002],{"type":68,"value":935},{"type":62,"tag":307,"props":1004,"children":1005},{"style":926},[1006],{"type":68,"value":982},{"type":62,"tag":71,"props":1008,"children":1009},{},[1010,1015],{"type":62,"tag":668,"props":1011,"children":1012},{},[1013],{"type":68,"value":1014},"Full-width mockups",{"type":68,"value":1016}," (dashboards, settings pages, data tables):\nNo wrapper needed — they naturally fill the viewport.",{"type":62,"tag":71,"props":1018,"children":1019},{},[1020,1025],{"type":62,"tag":668,"props":1021,"children":1022},{},[1023],{"type":68,"value":1024},"Where the styles go",{"type":68,"value":1026},": repeated patterns become classes in the css parameter;\nthe html parameter stays clean markup. The metric cards below model the\ntranslation — the remaining patterns in this part are shown with inline style\nattributes for compactness, and you should lift them into css-parameter classes\nthe same way.",{"type":62,"tag":290,"props":1028,"children":1030},{"id":1029},"metric-cards-for-dashboards",[1031],{"type":68,"value":1032},"Metric Cards (for dashboards)",{"type":62,"tag":71,"props":1034,"children":1035},{},[1036],{"type":68,"value":1037},"css parameter:",{"type":62,"tag":297,"props":1039,"children":1041},{"className":299,"code":1040,"language":136,"meta":301,"style":301},".metric-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 12px;\n  margin-bottom: 1.5rem;\n}\n.metric-card {\n  background: var(--color-background-secondary);\n  border-radius: var(--border-radius-md);\n  padding: 1rem;\n}\n.metric-label {\n  font-size: 13px;\n  color: var(--color-text-secondary);\n  margin-bottom: 4px;\n}\n.metric-value { font-size: 24px; font-weight: 500; }\n",[1042],{"type":62,"tag":93,"props":1043,"children":1044},{"__ignoreMap":301},[1045,1063,1087,1149,1170,1191,1199,1215,1246,1275,1296,1303,1319,1340,1369,1389,1396],{"type":62,"tag":307,"props":1046,"children":1047},{"class":309,"line":310},[1048,1052,1058],{"type":62,"tag":307,"props":1049,"children":1050},{"style":926},[1051],{"type":68,"value":848},{"type":62,"tag":307,"props":1053,"children":1055},{"style":1054},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1056],{"type":68,"value":1057},"metric-grid",{"type":62,"tag":307,"props":1059,"children":1060},{"style":926},[1061],{"type":68,"value":1062}," {\n",{"type":62,"tag":307,"props":1064,"children":1065},{"class":309,"line":320},[1066,1072,1077,1082],{"type":62,"tag":307,"props":1067,"children":1069},{"style":1068},"--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6",[1070],{"type":68,"value":1071},"  display",{"type":62,"tag":307,"props":1073,"children":1074},{"style":926},[1075],{"type":68,"value":1076},":",{"type":62,"tag":307,"props":1078,"children":1079},{"style":324},[1080],{"type":68,"value":1081}," grid",{"type":62,"tag":307,"props":1083,"children":1084},{"style":926},[1085],{"type":68,"value":1086},";\n",{"type":62,"tag":307,"props":1088,"children":1089},{"class":309,"line":335},[1090,1095,1099,1105,1110,1115,1120,1125,1129,1135,1139,1144],{"type":62,"tag":307,"props":1091,"children":1092},{"style":1068},[1093],{"type":68,"value":1094},"  grid-template-columns",{"type":62,"tag":307,"props":1096,"children":1097},{"style":926},[1098],{"type":68,"value":1076},{"type":62,"tag":307,"props":1100,"children":1102},{"style":1101},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1103],{"type":68,"value":1104}," repeat",{"type":62,"tag":307,"props":1106,"children":1107},{"style":926},[1108],{"type":68,"value":1109},"(",{"type":62,"tag":307,"props":1111,"children":1112},{"style":324},[1113],{"type":68,"value":1114},"auto-fit",{"type":62,"tag":307,"props":1116,"children":1117},{"style":926},[1118],{"type":68,"value":1119},",",{"type":62,"tag":307,"props":1121,"children":1122},{"style":1101},[1123],{"type":68,"value":1124}," minmax",{"type":62,"tag":307,"props":1126,"children":1127},{"style":926},[1128],{"type":68,"value":1109},{"type":62,"tag":307,"props":1130,"children":1132},{"style":1131},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1133],{"type":68,"value":1134},"160px",{"type":62,"tag":307,"props":1136,"children":1137},{"style":926},[1138],{"type":68,"value":1119},{"type":62,"tag":307,"props":1140,"children":1141},{"style":1131},[1142],{"type":68,"value":1143}," 1fr",{"type":62,"tag":307,"props":1145,"children":1146},{"style":926},[1147],{"type":68,"value":1148},"));\n",{"type":62,"tag":307,"props":1150,"children":1151},{"class":309,"line":349},[1152,1157,1161,1166],{"type":62,"tag":307,"props":1153,"children":1154},{"style":1068},[1155],{"type":68,"value":1156},"  gap",{"type":62,"tag":307,"props":1158,"children":1159},{"style":926},[1160],{"type":68,"value":1076},{"type":62,"tag":307,"props":1162,"children":1163},{"style":1131},[1164],{"type":68,"value":1165}," 12px",{"type":62,"tag":307,"props":1167,"children":1168},{"style":926},[1169],{"type":68,"value":1086},{"type":62,"tag":307,"props":1171,"children":1172},{"class":309,"line":363},[1173,1178,1182,1187],{"type":62,"tag":307,"props":1174,"children":1175},{"style":1068},[1176],{"type":68,"value":1177},"  margin-bottom",{"type":62,"tag":307,"props":1179,"children":1180},{"style":926},[1181],{"type":68,"value":1076},{"type":62,"tag":307,"props":1183,"children":1184},{"style":1131},[1185],{"type":68,"value":1186}," 1.5rem",{"type":62,"tag":307,"props":1188,"children":1189},{"style":926},[1190],{"type":68,"value":1086},{"type":62,"tag":307,"props":1192,"children":1193},{"class":309,"line":377},[1194],{"type":62,"tag":307,"props":1195,"children":1196},{"style":926},[1197],{"type":68,"value":1198},"}\n",{"type":62,"tag":307,"props":1200,"children":1201},{"class":309,"line":391},[1202,1206,1211],{"type":62,"tag":307,"props":1203,"children":1204},{"style":926},[1205],{"type":68,"value":848},{"type":62,"tag":307,"props":1207,"children":1208},{"style":1054},[1209],{"type":68,"value":1210},"metric-card",{"type":62,"tag":307,"props":1212,"children":1213},{"style":926},[1214],{"type":68,"value":1062},{"type":62,"tag":307,"props":1216,"children":1217},{"class":309,"line":405},[1218,1223,1227,1232,1236,1241],{"type":62,"tag":307,"props":1219,"children":1220},{"style":1068},[1221],{"type":68,"value":1222},"  background",{"type":62,"tag":307,"props":1224,"children":1225},{"style":926},[1226],{"type":68,"value":1076},{"type":62,"tag":307,"props":1228,"children":1229},{"style":1101},[1230],{"type":68,"value":1231}," var",{"type":62,"tag":307,"props":1233,"children":1234},{"style":926},[1235],{"type":68,"value":1109},{"type":62,"tag":307,"props":1237,"children":1238},{"style":324},[1239],{"type":68,"value":1240},"--color-background-secondary",{"type":62,"tag":307,"props":1242,"children":1243},{"style":926},[1244],{"type":68,"value":1245},");\n",{"type":62,"tag":307,"props":1247,"children":1248},{"class":309,"line":419},[1249,1254,1258,1262,1266,1271],{"type":62,"tag":307,"props":1250,"children":1251},{"style":1068},[1252],{"type":68,"value":1253},"  border-radius",{"type":62,"tag":307,"props":1255,"children":1256},{"style":926},[1257],{"type":68,"value":1076},{"type":62,"tag":307,"props":1259,"children":1260},{"style":1101},[1261],{"type":68,"value":1231},{"type":62,"tag":307,"props":1263,"children":1264},{"style":926},[1265],{"type":68,"value":1109},{"type":62,"tag":307,"props":1267,"children":1268},{"style":324},[1269],{"type":68,"value":1270},"--border-radius-md",{"type":62,"tag":307,"props":1272,"children":1273},{"style":926},[1274],{"type":68,"value":1245},{"type":62,"tag":307,"props":1276,"children":1277},{"class":309,"line":429},[1278,1283,1287,1292],{"type":62,"tag":307,"props":1279,"children":1280},{"style":1068},[1281],{"type":68,"value":1282},"  padding",{"type":62,"tag":307,"props":1284,"children":1285},{"style":926},[1286],{"type":68,"value":1076},{"type":62,"tag":307,"props":1288,"children":1289},{"style":1131},[1290],{"type":68,"value":1291}," 1rem",{"type":62,"tag":307,"props":1293,"children":1294},{"style":926},[1295],{"type":68,"value":1086},{"type":62,"tag":307,"props":1297,"children":1298},{"class":309,"line":438},[1299],{"type":62,"tag":307,"props":1300,"children":1301},{"style":926},[1302],{"type":68,"value":1198},{"type":62,"tag":307,"props":1304,"children":1305},{"class":309,"line":452},[1306,1310,1315],{"type":62,"tag":307,"props":1307,"children":1308},{"style":926},[1309],{"type":68,"value":848},{"type":62,"tag":307,"props":1311,"children":1312},{"style":1054},[1313],{"type":68,"value":1314},"metric-label",{"type":62,"tag":307,"props":1316,"children":1317},{"style":926},[1318],{"type":68,"value":1062},{"type":62,"tag":307,"props":1320,"children":1321},{"class":309,"line":466},[1322,1327,1331,1336],{"type":62,"tag":307,"props":1323,"children":1324},{"style":1068},[1325],{"type":68,"value":1326},"  font-size",{"type":62,"tag":307,"props":1328,"children":1329},{"style":926},[1330],{"type":68,"value":1076},{"type":62,"tag":307,"props":1332,"children":1333},{"style":1131},[1334],{"type":68,"value":1335}," 13px",{"type":62,"tag":307,"props":1337,"children":1338},{"style":926},[1339],{"type":68,"value":1086},{"type":62,"tag":307,"props":1341,"children":1342},{"class":309,"line":480},[1343,1348,1352,1356,1360,1365],{"type":62,"tag":307,"props":1344,"children":1345},{"style":1068},[1346],{"type":68,"value":1347},"  color",{"type":62,"tag":307,"props":1349,"children":1350},{"style":926},[1351],{"type":68,"value":1076},{"type":62,"tag":307,"props":1353,"children":1354},{"style":1101},[1355],{"type":68,"value":1231},{"type":62,"tag":307,"props":1357,"children":1358},{"style":926},[1359],{"type":68,"value":1109},{"type":62,"tag":307,"props":1361,"children":1362},{"style":324},[1363],{"type":68,"value":1364},"--color-text-secondary",{"type":62,"tag":307,"props":1366,"children":1367},{"style":926},[1368],{"type":68,"value":1245},{"type":62,"tag":307,"props":1370,"children":1371},{"class":309,"line":489},[1372,1376,1380,1385],{"type":62,"tag":307,"props":1373,"children":1374},{"style":1068},[1375],{"type":68,"value":1177},{"type":62,"tag":307,"props":1377,"children":1378},{"style":926},[1379],{"type":68,"value":1076},{"type":62,"tag":307,"props":1381,"children":1382},{"style":1131},[1383],{"type":68,"value":1384}," 4px",{"type":62,"tag":307,"props":1386,"children":1387},{"style":926},[1388],{"type":68,"value":1086},{"type":62,"tag":307,"props":1390,"children":1391},{"class":309,"line":497},[1392],{"type":62,"tag":307,"props":1393,"children":1394},{"style":926},[1395],{"type":68,"value":1198},{"type":62,"tag":307,"props":1397,"children":1398},{"class":309,"line":506},[1399,1403,1408,1413,1418,1422,1427,1432,1437,1441,1446,1450],{"type":62,"tag":307,"props":1400,"children":1401},{"style":926},[1402],{"type":68,"value":848},{"type":62,"tag":307,"props":1404,"children":1405},{"style":1054},[1406],{"type":68,"value":1407},"metric-value",{"type":62,"tag":307,"props":1409,"children":1410},{"style":926},[1411],{"type":68,"value":1412}," {",{"type":62,"tag":307,"props":1414,"children":1415},{"style":1068},[1416],{"type":68,"value":1417}," font-size",{"type":62,"tag":307,"props":1419,"children":1420},{"style":926},[1421],{"type":68,"value":1076},{"type":62,"tag":307,"props":1423,"children":1424},{"style":1131},[1425],{"type":68,"value":1426}," 24px",{"type":62,"tag":307,"props":1428,"children":1429},{"style":926},[1430],{"type":68,"value":1431},";",{"type":62,"tag":307,"props":1433,"children":1434},{"style":1068},[1435],{"type":68,"value":1436}," font-weight",{"type":62,"tag":307,"props":1438,"children":1439},{"style":926},[1440],{"type":68,"value":1076},{"type":62,"tag":307,"props":1442,"children":1443},{"style":1131},[1444],{"type":68,"value":1445}," 500",{"type":62,"tag":307,"props":1447,"children":1448},{"style":926},[1449],{"type":68,"value":1431},{"type":62,"tag":307,"props":1451,"children":1452},{"style":926},[1453],{"type":68,"value":1454}," }\n",{"type":62,"tag":71,"props":1456,"children":1457},{},[1458],{"type":68,"value":1459},"html parameter:",{"type":62,"tag":297,"props":1461,"children":1463},{"className":915,"code":1462,"language":147,"meta":301,"style":301},"\u003Cdiv class=\"metric-grid\">\n  \u003Cdiv class=\"metric-card\">\n    \u003Cdiv class=\"metric-label\">Total revenue\u003C\u002Fdiv>\n    \u003Cdiv class=\"metric-value\">$142,800\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"metric-card\">\n    \u003Cdiv class=\"metric-label\">Active users\u003C\u002Fdiv>\n    \u003Cdiv class=\"metric-value\">8,421\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[1464],{"type":62,"tag":93,"props":1465,"children":1466},{"__ignoreMap":301},[1467,1503,1539,1593,1645,1661,1696,1748,1800,1815],{"type":62,"tag":307,"props":1468,"children":1469},{"class":309,"line":310},[1470,1474,1478,1483,1487,1491,1495,1499],{"type":62,"tag":307,"props":1471,"children":1472},{"style":926},[1473],{"type":68,"value":929},{"type":62,"tag":307,"props":1475,"children":1476},{"style":932},[1477],{"type":68,"value":935},{"type":62,"tag":307,"props":1479,"children":1480},{"style":938},[1481],{"type":68,"value":1482}," class",{"type":62,"tag":307,"props":1484,"children":1485},{"style":926},[1486],{"type":68,"value":946},{"type":62,"tag":307,"props":1488,"children":1489},{"style":926},[1490],{"type":68,"value":951},{"type":62,"tag":307,"props":1492,"children":1493},{"style":954},[1494],{"type":68,"value":1057},{"type":62,"tag":307,"props":1496,"children":1497},{"style":926},[1498],{"type":68,"value":951},{"type":62,"tag":307,"props":1500,"children":1501},{"style":926},[1502],{"type":68,"value":982},{"type":62,"tag":307,"props":1504,"children":1505},{"class":309,"line":320},[1506,1511,1515,1519,1523,1527,1531,1535],{"type":62,"tag":307,"props":1507,"children":1508},{"style":926},[1509],{"type":68,"value":1510},"  \u003C",{"type":62,"tag":307,"props":1512,"children":1513},{"style":932},[1514],{"type":68,"value":935},{"type":62,"tag":307,"props":1516,"children":1517},{"style":938},[1518],{"type":68,"value":1482},{"type":62,"tag":307,"props":1520,"children":1521},{"style":926},[1522],{"type":68,"value":946},{"type":62,"tag":307,"props":1524,"children":1525},{"style":926},[1526],{"type":68,"value":951},{"type":62,"tag":307,"props":1528,"children":1529},{"style":954},[1530],{"type":68,"value":1210},{"type":62,"tag":307,"props":1532,"children":1533},{"style":926},[1534],{"type":68,"value":951},{"type":62,"tag":307,"props":1536,"children":1537},{"style":926},[1538],{"type":68,"value":982},{"type":62,"tag":307,"props":1540,"children":1541},{"class":309,"line":335},[1542,1547,1551,1555,1559,1563,1567,1571,1576,1581,1585,1589],{"type":62,"tag":307,"props":1543,"children":1544},{"style":926},[1545],{"type":68,"value":1546},"    \u003C",{"type":62,"tag":307,"props":1548,"children":1549},{"style":932},[1550],{"type":68,"value":935},{"type":62,"tag":307,"props":1552,"children":1553},{"style":938},[1554],{"type":68,"value":1482},{"type":62,"tag":307,"props":1556,"children":1557},{"style":926},[1558],{"type":68,"value":946},{"type":62,"tag":307,"props":1560,"children":1561},{"style":926},[1562],{"type":68,"value":951},{"type":62,"tag":307,"props":1564,"children":1565},{"style":954},[1566],{"type":68,"value":1314},{"type":62,"tag":307,"props":1568,"children":1569},{"style":926},[1570],{"type":68,"value":951},{"type":62,"tag":307,"props":1572,"children":1573},{"style":926},[1574],{"type":68,"value":1575},">",{"type":62,"tag":307,"props":1577,"children":1578},{"style":324},[1579],{"type":68,"value":1580},"Total revenue",{"type":62,"tag":307,"props":1582,"children":1583},{"style":926},[1584],{"type":68,"value":998},{"type":62,"tag":307,"props":1586,"children":1587},{"style":932},[1588],{"type":68,"value":935},{"type":62,"tag":307,"props":1590,"children":1591},{"style":926},[1592],{"type":68,"value":982},{"type":62,"tag":307,"props":1594,"children":1595},{"class":309,"line":349},[1596,1600,1604,1608,1612,1616,1620,1624,1628,1633,1637,1641],{"type":62,"tag":307,"props":1597,"children":1598},{"style":926},[1599],{"type":68,"value":1546},{"type":62,"tag":307,"props":1601,"children":1602},{"style":932},[1603],{"type":68,"value":935},{"type":62,"tag":307,"props":1605,"children":1606},{"style":938},[1607],{"type":68,"value":1482},{"type":62,"tag":307,"props":1609,"children":1610},{"style":926},[1611],{"type":68,"value":946},{"type":62,"tag":307,"props":1613,"children":1614},{"style":926},[1615],{"type":68,"value":951},{"type":62,"tag":307,"props":1617,"children":1618},{"style":954},[1619],{"type":68,"value":1407},{"type":62,"tag":307,"props":1621,"children":1622},{"style":926},[1623],{"type":68,"value":951},{"type":62,"tag":307,"props":1625,"children":1626},{"style":926},[1627],{"type":68,"value":1575},{"type":62,"tag":307,"props":1629,"children":1630},{"style":324},[1631],{"type":68,"value":1632},"$142,800",{"type":62,"tag":307,"props":1634,"children":1635},{"style":926},[1636],{"type":68,"value":998},{"type":62,"tag":307,"props":1638,"children":1639},{"style":932},[1640],{"type":68,"value":935},{"type":62,"tag":307,"props":1642,"children":1643},{"style":926},[1644],{"type":68,"value":982},{"type":62,"tag":307,"props":1646,"children":1647},{"class":309,"line":363},[1648,1653,1657],{"type":62,"tag":307,"props":1649,"children":1650},{"style":926},[1651],{"type":68,"value":1652},"  \u003C\u002F",{"type":62,"tag":307,"props":1654,"children":1655},{"style":932},[1656],{"type":68,"value":935},{"type":62,"tag":307,"props":1658,"children":1659},{"style":926},[1660],{"type":68,"value":982},{"type":62,"tag":307,"props":1662,"children":1663},{"class":309,"line":377},[1664,1668,1672,1676,1680,1684,1688,1692],{"type":62,"tag":307,"props":1665,"children":1666},{"style":926},[1667],{"type":68,"value":1510},{"type":62,"tag":307,"props":1669,"children":1670},{"style":932},[1671],{"type":68,"value":935},{"type":62,"tag":307,"props":1673,"children":1674},{"style":938},[1675],{"type":68,"value":1482},{"type":62,"tag":307,"props":1677,"children":1678},{"style":926},[1679],{"type":68,"value":946},{"type":62,"tag":307,"props":1681,"children":1682},{"style":926},[1683],{"type":68,"value":951},{"type":62,"tag":307,"props":1685,"children":1686},{"style":954},[1687],{"type":68,"value":1210},{"type":62,"tag":307,"props":1689,"children":1690},{"style":926},[1691],{"type":68,"value":951},{"type":62,"tag":307,"props":1693,"children":1694},{"style":926},[1695],{"type":68,"value":982},{"type":62,"tag":307,"props":1697,"children":1698},{"class":309,"line":391},[1699,1703,1707,1711,1715,1719,1723,1727,1731,1736,1740,1744],{"type":62,"tag":307,"props":1700,"children":1701},{"style":926},[1702],{"type":68,"value":1546},{"type":62,"tag":307,"props":1704,"children":1705},{"style":932},[1706],{"type":68,"value":935},{"type":62,"tag":307,"props":1708,"children":1709},{"style":938},[1710],{"type":68,"value":1482},{"type":62,"tag":307,"props":1712,"children":1713},{"style":926},[1714],{"type":68,"value":946},{"type":62,"tag":307,"props":1716,"children":1717},{"style":926},[1718],{"type":68,"value":951},{"type":62,"tag":307,"props":1720,"children":1721},{"style":954},[1722],{"type":68,"value":1314},{"type":62,"tag":307,"props":1724,"children":1725},{"style":926},[1726],{"type":68,"value":951},{"type":62,"tag":307,"props":1728,"children":1729},{"style":926},[1730],{"type":68,"value":1575},{"type":62,"tag":307,"props":1732,"children":1733},{"style":324},[1734],{"type":68,"value":1735},"Active users",{"type":62,"tag":307,"props":1737,"children":1738},{"style":926},[1739],{"type":68,"value":998},{"type":62,"tag":307,"props":1741,"children":1742},{"style":932},[1743],{"type":68,"value":935},{"type":62,"tag":307,"props":1745,"children":1746},{"style":926},[1747],{"type":68,"value":982},{"type":62,"tag":307,"props":1749,"children":1750},{"class":309,"line":405},[1751,1755,1759,1763,1767,1771,1775,1779,1783,1788,1792,1796],{"type":62,"tag":307,"props":1752,"children":1753},{"style":926},[1754],{"type":68,"value":1546},{"type":62,"tag":307,"props":1756,"children":1757},{"style":932},[1758],{"type":68,"value":935},{"type":62,"tag":307,"props":1760,"children":1761},{"style":938},[1762],{"type":68,"value":1482},{"type":62,"tag":307,"props":1764,"children":1765},{"style":926},[1766],{"type":68,"value":946},{"type":62,"tag":307,"props":1768,"children":1769},{"style":926},[1770],{"type":68,"value":951},{"type":62,"tag":307,"props":1772,"children":1773},{"style":954},[1774],{"type":68,"value":1407},{"type":62,"tag":307,"props":1776,"children":1777},{"style":926},[1778],{"type":68,"value":951},{"type":62,"tag":307,"props":1780,"children":1781},{"style":926},[1782],{"type":68,"value":1575},{"type":62,"tag":307,"props":1784,"children":1785},{"style":324},[1786],{"type":68,"value":1787},"8,421",{"type":62,"tag":307,"props":1789,"children":1790},{"style":926},[1791],{"type":68,"value":998},{"type":62,"tag":307,"props":1793,"children":1794},{"style":932},[1795],{"type":68,"value":935},{"type":62,"tag":307,"props":1797,"children":1798},{"style":926},[1799],{"type":68,"value":982},{"type":62,"tag":307,"props":1801,"children":1802},{"class":309,"line":419},[1803,1807,1811],{"type":62,"tag":307,"props":1804,"children":1805},{"style":926},[1806],{"type":68,"value":1652},{"type":62,"tag":307,"props":1808,"children":1809},{"style":932},[1810],{"type":68,"value":935},{"type":62,"tag":307,"props":1812,"children":1813},{"style":926},[1814],{"type":68,"value":982},{"type":62,"tag":307,"props":1816,"children":1817},{"class":309,"line":429},[1818,1822,1826],{"type":62,"tag":307,"props":1819,"children":1820},{"style":926},[1821],{"type":68,"value":998},{"type":62,"tag":307,"props":1823,"children":1824},{"style":932},[1825],{"type":68,"value":935},{"type":62,"tag":307,"props":1827,"children":1828},{"style":926},[1829],{"type":68,"value":982},{"type":62,"tag":290,"props":1831,"children":1833},{"id":1832},"contact-data-record-card",[1834],{"type":68,"value":1835},"Contact \u002F Data Record Card",{"type":62,"tag":297,"props":1837,"children":1839},{"className":915,"code":1838,"language":147,"meta":301,"style":301},"\u003Cdiv style=\"background: var(--color-background-primary);\n            border-radius: var(--border-radius-lg);\n            border: 0.5px solid var(--color-border-tertiary);\n            padding: 1rem 1.25rem;\">\n\n  \u003Cdiv style=\"display: flex; align-items: center; gap: 12px;\n              margin-bottom: 16px;\">\n    \u003C!-- Avatar circle with initials -->\n    \u003Cdiv style=\"width: 44px; height: 44px; border-radius: 50%;\n                background: var(--color-background-info);\n                display: flex; align-items: center; justify-content: center;\n                font-weight: 500; font-size: 14px;\n                color: var(--color-text-info);\">JD\u003C\u002Fdiv>\n    \u003Cdiv>\n      \u003Cp style=\"font-weight: 500; font-size: 15px; margin: 0;\">Jane Doe\u003C\u002Fp>\n      \u003Cp style=\"font-size: 13px; color: var(--color-text-secondary);\n                margin: 0;\">Lead Engineer\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"border-top: 0.5px solid var(--color-border-tertiary);\n              padding-top: 12px;\">\n    \u003Ctable style=\"width: 100%; font-size: 13px;\">\n      \u003Ctr>\n        \u003Ctd style=\"color: var(--color-text-secondary); padding: 4px 0;\">\n          Email\u003C\u002Ftd>\n        \u003Ctd style=\"text-align: right; padding: 4px 0;\n                   color: var(--color-text-info);\">jane@company.com\u003C\u002Ftd>\n      \u003C\u002Ftr>\n    \u003C\u002Ftable>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[1840],{"type":62,"tag":93,"props":1841,"children":1842},{"__ignoreMap":301},[1843,1871,1878,1886,1902,1909,1937,1953,1961,1989,1997,2005,2013,2046,2061,2115,2143,2176,2192,2207,2214,2242,2258,2295,2311,2349,2369,2397,2430,2446,2462,2478],{"type":62,"tag":307,"props":1844,"children":1845},{"class":309,"line":310},[1846,1850,1854,1858,1862,1866],{"type":62,"tag":307,"props":1847,"children":1848},{"style":926},[1849],{"type":68,"value":929},{"type":62,"tag":307,"props":1851,"children":1852},{"style":932},[1853],{"type":68,"value":935},{"type":62,"tag":307,"props":1855,"children":1856},{"style":938},[1857],{"type":68,"value":941},{"type":62,"tag":307,"props":1859,"children":1860},{"style":926},[1861],{"type":68,"value":946},{"type":62,"tag":307,"props":1863,"children":1864},{"style":926},[1865],{"type":68,"value":951},{"type":62,"tag":307,"props":1867,"children":1868},{"style":954},[1869],{"type":68,"value":1870},"background: var(--color-background-primary);\n",{"type":62,"tag":307,"props":1872,"children":1873},{"class":309,"line":320},[1874],{"type":62,"tag":307,"props":1875,"children":1876},{"style":954},[1877],{"type":68,"value":965},{"type":62,"tag":307,"props":1879,"children":1880},{"class":309,"line":335},[1881],{"type":62,"tag":307,"props":1882,"children":1883},{"style":954},[1884],{"type":68,"value":1885},"            border: 0.5px solid var(--color-border-tertiary);\n",{"type":62,"tag":307,"props":1887,"children":1888},{"class":309,"line":349},[1889,1894,1898],{"type":62,"tag":307,"props":1890,"children":1891},{"style":954},[1892],{"type":68,"value":1893},"            padding: 1rem 1.25rem;",{"type":62,"tag":307,"props":1895,"children":1896},{"style":926},[1897],{"type":68,"value":951},{"type":62,"tag":307,"props":1899,"children":1900},{"style":926},[1901],{"type":68,"value":982},{"type":62,"tag":307,"props":1903,"children":1904},{"class":309,"line":363},[1905],{"type":62,"tag":307,"props":1906,"children":1907},{"emptyLinePlaceholder":423},[1908],{"type":68,"value":426},{"type":62,"tag":307,"props":1910,"children":1911},{"class":309,"line":377},[1912,1916,1920,1924,1928,1932],{"type":62,"tag":307,"props":1913,"children":1914},{"style":926},[1915],{"type":68,"value":1510},{"type":62,"tag":307,"props":1917,"children":1918},{"style":932},[1919],{"type":68,"value":935},{"type":62,"tag":307,"props":1921,"children":1922},{"style":938},[1923],{"type":68,"value":941},{"type":62,"tag":307,"props":1925,"children":1926},{"style":926},[1927],{"type":68,"value":946},{"type":62,"tag":307,"props":1929,"children":1930},{"style":926},[1931],{"type":68,"value":951},{"type":62,"tag":307,"props":1933,"children":1934},{"style":954},[1935],{"type":68,"value":1936},"display: flex; align-items: center; gap: 12px;\n",{"type":62,"tag":307,"props":1938,"children":1939},{"class":309,"line":391},[1940,1945,1949],{"type":62,"tag":307,"props":1941,"children":1942},{"style":954},[1943],{"type":68,"value":1944},"              margin-bottom: 16px;",{"type":62,"tag":307,"props":1946,"children":1947},{"style":926},[1948],{"type":68,"value":951},{"type":62,"tag":307,"props":1950,"children":1951},{"style":926},[1952],{"type":68,"value":982},{"type":62,"tag":307,"props":1954,"children":1955},{"class":309,"line":405},[1956],{"type":62,"tag":307,"props":1957,"children":1958},{"style":314},[1959],{"type":68,"value":1960},"    \u003C!-- Avatar circle with initials -->\n",{"type":62,"tag":307,"props":1962,"children":1963},{"class":309,"line":419},[1964,1968,1972,1976,1980,1984],{"type":62,"tag":307,"props":1965,"children":1966},{"style":926},[1967],{"type":68,"value":1546},{"type":62,"tag":307,"props":1969,"children":1970},{"style":932},[1971],{"type":68,"value":935},{"type":62,"tag":307,"props":1973,"children":1974},{"style":938},[1975],{"type":68,"value":941},{"type":62,"tag":307,"props":1977,"children":1978},{"style":926},[1979],{"type":68,"value":946},{"type":62,"tag":307,"props":1981,"children":1982},{"style":926},[1983],{"type":68,"value":951},{"type":62,"tag":307,"props":1985,"children":1986},{"style":954},[1987],{"type":68,"value":1988},"width: 44px; height: 44px; border-radius: 50%;\n",{"type":62,"tag":307,"props":1990,"children":1991},{"class":309,"line":429},[1992],{"type":62,"tag":307,"props":1993,"children":1994},{"style":954},[1995],{"type":68,"value":1996},"                background: var(--color-background-info);\n",{"type":62,"tag":307,"props":1998,"children":1999},{"class":309,"line":438},[2000],{"type":62,"tag":307,"props":2001,"children":2002},{"style":954},[2003],{"type":68,"value":2004},"                display: flex; align-items: center; justify-content: center;\n",{"type":62,"tag":307,"props":2006,"children":2007},{"class":309,"line":452},[2008],{"type":62,"tag":307,"props":2009,"children":2010},{"style":954},[2011],{"type":68,"value":2012},"                font-weight: 500; font-size: 14px;\n",{"type":62,"tag":307,"props":2014,"children":2015},{"class":309,"line":466},[2016,2021,2025,2029,2034,2038,2042],{"type":62,"tag":307,"props":2017,"children":2018},{"style":954},[2019],{"type":68,"value":2020},"                color: var(--color-text-info);",{"type":62,"tag":307,"props":2022,"children":2023},{"style":926},[2024],{"type":68,"value":951},{"type":62,"tag":307,"props":2026,"children":2027},{"style":926},[2028],{"type":68,"value":1575},{"type":62,"tag":307,"props":2030,"children":2031},{"style":324},[2032],{"type":68,"value":2033},"JD",{"type":62,"tag":307,"props":2035,"children":2036},{"style":926},[2037],{"type":68,"value":998},{"type":62,"tag":307,"props":2039,"children":2040},{"style":932},[2041],{"type":68,"value":935},{"type":62,"tag":307,"props":2043,"children":2044},{"style":926},[2045],{"type":68,"value":982},{"type":62,"tag":307,"props":2047,"children":2048},{"class":309,"line":480},[2049,2053,2057],{"type":62,"tag":307,"props":2050,"children":2051},{"style":926},[2052],{"type":68,"value":1546},{"type":62,"tag":307,"props":2054,"children":2055},{"style":932},[2056],{"type":68,"value":935},{"type":62,"tag":307,"props":2058,"children":2059},{"style":926},[2060],{"type":68,"value":982},{"type":62,"tag":307,"props":2062,"children":2063},{"class":309,"line":489},[2064,2069,2073,2077,2081,2085,2090,2094,2098,2103,2107,2111],{"type":62,"tag":307,"props":2065,"children":2066},{"style":926},[2067],{"type":68,"value":2068},"      \u003C",{"type":62,"tag":307,"props":2070,"children":2071},{"style":932},[2072],{"type":68,"value":71},{"type":62,"tag":307,"props":2074,"children":2075},{"style":938},[2076],{"type":68,"value":941},{"type":62,"tag":307,"props":2078,"children":2079},{"style":926},[2080],{"type":68,"value":946},{"type":62,"tag":307,"props":2082,"children":2083},{"style":926},[2084],{"type":68,"value":951},{"type":62,"tag":307,"props":2086,"children":2087},{"style":954},[2088],{"type":68,"value":2089},"font-weight: 500; font-size: 15px; margin: 0;",{"type":62,"tag":307,"props":2091,"children":2092},{"style":926},[2093],{"type":68,"value":951},{"type":62,"tag":307,"props":2095,"children":2096},{"style":926},[2097],{"type":68,"value":1575},{"type":62,"tag":307,"props":2099,"children":2100},{"style":324},[2101],{"type":68,"value":2102},"Jane Doe",{"type":62,"tag":307,"props":2104,"children":2105},{"style":926},[2106],{"type":68,"value":998},{"type":62,"tag":307,"props":2108,"children":2109},{"style":932},[2110],{"type":68,"value":71},{"type":62,"tag":307,"props":2112,"children":2113},{"style":926},[2114],{"type":68,"value":982},{"type":62,"tag":307,"props":2116,"children":2117},{"class":309,"line":497},[2118,2122,2126,2130,2134,2138],{"type":62,"tag":307,"props":2119,"children":2120},{"style":926},[2121],{"type":68,"value":2068},{"type":62,"tag":307,"props":2123,"children":2124},{"style":932},[2125],{"type":68,"value":71},{"type":62,"tag":307,"props":2127,"children":2128},{"style":938},[2129],{"type":68,"value":941},{"type":62,"tag":307,"props":2131,"children":2132},{"style":926},[2133],{"type":68,"value":946},{"type":62,"tag":307,"props":2135,"children":2136},{"style":926},[2137],{"type":68,"value":951},{"type":62,"tag":307,"props":2139,"children":2140},{"style":954},[2141],{"type":68,"value":2142},"font-size: 13px; color: var(--color-text-secondary);\n",{"type":62,"tag":307,"props":2144,"children":2145},{"class":309,"line":506},[2146,2151,2155,2159,2164,2168,2172],{"type":62,"tag":307,"props":2147,"children":2148},{"style":954},[2149],{"type":68,"value":2150},"                margin: 0;",{"type":62,"tag":307,"props":2152,"children":2153},{"style":926},[2154],{"type":68,"value":951},{"type":62,"tag":307,"props":2156,"children":2157},{"style":926},[2158],{"type":68,"value":1575},{"type":62,"tag":307,"props":2160,"children":2161},{"style":324},[2162],{"type":68,"value":2163},"Lead Engineer",{"type":62,"tag":307,"props":2165,"children":2166},{"style":926},[2167],{"type":68,"value":998},{"type":62,"tag":307,"props":2169,"children":2170},{"style":932},[2171],{"type":68,"value":71},{"type":62,"tag":307,"props":2173,"children":2174},{"style":926},[2175],{"type":68,"value":982},{"type":62,"tag":307,"props":2177,"children":2178},{"class":309,"line":520},[2179,2184,2188],{"type":62,"tag":307,"props":2180,"children":2181},{"style":926},[2182],{"type":68,"value":2183},"    \u003C\u002F",{"type":62,"tag":307,"props":2185,"children":2186},{"style":932},[2187],{"type":68,"value":935},{"type":62,"tag":307,"props":2189,"children":2190},{"style":926},[2191],{"type":68,"value":982},{"type":62,"tag":307,"props":2193,"children":2194},{"class":309,"line":534},[2195,2199,2203],{"type":62,"tag":307,"props":2196,"children":2197},{"style":926},[2198],{"type":68,"value":1652},{"type":62,"tag":307,"props":2200,"children":2201},{"style":932},[2202],{"type":68,"value":935},{"type":62,"tag":307,"props":2204,"children":2205},{"style":926},[2206],{"type":68,"value":982},{"type":62,"tag":307,"props":2208,"children":2209},{"class":309,"line":548},[2210],{"type":62,"tag":307,"props":2211,"children":2212},{"emptyLinePlaceholder":423},[2213],{"type":68,"value":426},{"type":62,"tag":307,"props":2215,"children":2216},{"class":309,"line":556},[2217,2221,2225,2229,2233,2237],{"type":62,"tag":307,"props":2218,"children":2219},{"style":926},[2220],{"type":68,"value":1510},{"type":62,"tag":307,"props":2222,"children":2223},{"style":932},[2224],{"type":68,"value":935},{"type":62,"tag":307,"props":2226,"children":2227},{"style":938},[2228],{"type":68,"value":941},{"type":62,"tag":307,"props":2230,"children":2231},{"style":926},[2232],{"type":68,"value":946},{"type":62,"tag":307,"props":2234,"children":2235},{"style":926},[2236],{"type":68,"value":951},{"type":62,"tag":307,"props":2238,"children":2239},{"style":954},[2240],{"type":68,"value":2241},"border-top: 0.5px solid var(--color-border-tertiary);\n",{"type":62,"tag":307,"props":2243,"children":2244},{"class":309,"line":565},[2245,2250,2254],{"type":62,"tag":307,"props":2246,"children":2247},{"style":954},[2248],{"type":68,"value":2249},"              padding-top: 12px;",{"type":62,"tag":307,"props":2251,"children":2252},{"style":926},[2253],{"type":68,"value":951},{"type":62,"tag":307,"props":2255,"children":2256},{"style":926},[2257],{"type":68,"value":982},{"type":62,"tag":307,"props":2259,"children":2260},{"class":309,"line":579},[2261,2265,2270,2274,2278,2282,2287,2291],{"type":62,"tag":307,"props":2262,"children":2263},{"style":926},[2264],{"type":68,"value":1546},{"type":62,"tag":307,"props":2266,"children":2267},{"style":932},[2268],{"type":68,"value":2269},"table",{"type":62,"tag":307,"props":2271,"children":2272},{"style":938},[2273],{"type":68,"value":941},{"type":62,"tag":307,"props":2275,"children":2276},{"style":926},[2277],{"type":68,"value":946},{"type":62,"tag":307,"props":2279,"children":2280},{"style":926},[2281],{"type":68,"value":951},{"type":62,"tag":307,"props":2283,"children":2284},{"style":954},[2285],{"type":68,"value":2286},"width: 100%; font-size: 13px;",{"type":62,"tag":307,"props":2288,"children":2289},{"style":926},[2290],{"type":68,"value":951},{"type":62,"tag":307,"props":2292,"children":2293},{"style":926},[2294],{"type":68,"value":982},{"type":62,"tag":307,"props":2296,"children":2297},{"class":309,"line":593},[2298,2302,2307],{"type":62,"tag":307,"props":2299,"children":2300},{"style":926},[2301],{"type":68,"value":2068},{"type":62,"tag":307,"props":2303,"children":2304},{"style":932},[2305],{"type":68,"value":2306},"tr",{"type":62,"tag":307,"props":2308,"children":2309},{"style":926},[2310],{"type":68,"value":982},{"type":62,"tag":307,"props":2312,"children":2313},{"class":309,"line":607},[2314,2319,2324,2328,2332,2336,2341,2345],{"type":62,"tag":307,"props":2315,"children":2316},{"style":926},[2317],{"type":68,"value":2318},"        \u003C",{"type":62,"tag":307,"props":2320,"children":2321},{"style":932},[2322],{"type":68,"value":2323},"td",{"type":62,"tag":307,"props":2325,"children":2326},{"style":938},[2327],{"type":68,"value":941},{"type":62,"tag":307,"props":2329,"children":2330},{"style":926},[2331],{"type":68,"value":946},{"type":62,"tag":307,"props":2333,"children":2334},{"style":926},[2335],{"type":68,"value":951},{"type":62,"tag":307,"props":2337,"children":2338},{"style":954},[2339],{"type":68,"value":2340},"color: var(--color-text-secondary); padding: 4px 0;",{"type":62,"tag":307,"props":2342,"children":2343},{"style":926},[2344],{"type":68,"value":951},{"type":62,"tag":307,"props":2346,"children":2347},{"style":926},[2348],{"type":68,"value":982},{"type":62,"tag":307,"props":2350,"children":2351},{"class":309,"line":615},[2352,2357,2361,2365],{"type":62,"tag":307,"props":2353,"children":2354},{"style":324},[2355],{"type":68,"value":2356},"          Email",{"type":62,"tag":307,"props":2358,"children":2359},{"style":926},[2360],{"type":68,"value":998},{"type":62,"tag":307,"props":2362,"children":2363},{"style":932},[2364],{"type":68,"value":2323},{"type":62,"tag":307,"props":2366,"children":2367},{"style":926},[2368],{"type":68,"value":982},{"type":62,"tag":307,"props":2370,"children":2371},{"class":309,"line":624},[2372,2376,2380,2384,2388,2392],{"type":62,"tag":307,"props":2373,"children":2374},{"style":926},[2375],{"type":68,"value":2318},{"type":62,"tag":307,"props":2377,"children":2378},{"style":932},[2379],{"type":68,"value":2323},{"type":62,"tag":307,"props":2381,"children":2382},{"style":938},[2383],{"type":68,"value":941},{"type":62,"tag":307,"props":2385,"children":2386},{"style":926},[2387],{"type":68,"value":946},{"type":62,"tag":307,"props":2389,"children":2390},{"style":926},[2391],{"type":68,"value":951},{"type":62,"tag":307,"props":2393,"children":2394},{"style":954},[2395],{"type":68,"value":2396},"text-align: right; padding: 4px 0;\n",{"type":62,"tag":307,"props":2398,"children":2399},{"class":309,"line":638},[2400,2405,2409,2413,2418,2422,2426],{"type":62,"tag":307,"props":2401,"children":2402},{"style":954},[2403],{"type":68,"value":2404},"                   color: var(--color-text-info);",{"type":62,"tag":307,"props":2406,"children":2407},{"style":926},[2408],{"type":68,"value":951},{"type":62,"tag":307,"props":2410,"children":2411},{"style":926},[2412],{"type":68,"value":1575},{"type":62,"tag":307,"props":2414,"children":2415},{"style":324},[2416],{"type":68,"value":2417},"jane@company.com",{"type":62,"tag":307,"props":2419,"children":2420},{"style":926},[2421],{"type":68,"value":998},{"type":62,"tag":307,"props":2423,"children":2424},{"style":932},[2425],{"type":68,"value":2323},{"type":62,"tag":307,"props":2427,"children":2428},{"style":926},[2429],{"type":68,"value":982},{"type":62,"tag":307,"props":2431,"children":2432},{"class":309,"line":652},[2433,2438,2442],{"type":62,"tag":307,"props":2434,"children":2435},{"style":926},[2436],{"type":68,"value":2437},"      \u003C\u002F",{"type":62,"tag":307,"props":2439,"children":2440},{"style":932},[2441],{"type":68,"value":2306},{"type":62,"tag":307,"props":2443,"children":2444},{"style":926},[2445],{"type":68,"value":982},{"type":62,"tag":307,"props":2447,"children":2449},{"class":309,"line":2448},30,[2450,2454,2458],{"type":62,"tag":307,"props":2451,"children":2452},{"style":926},[2453],{"type":68,"value":2183},{"type":62,"tag":307,"props":2455,"children":2456},{"style":932},[2457],{"type":68,"value":2269},{"type":62,"tag":307,"props":2459,"children":2460},{"style":926},[2461],{"type":68,"value":982},{"type":62,"tag":307,"props":2463,"children":2465},{"class":309,"line":2464},31,[2466,2470,2474],{"type":62,"tag":307,"props":2467,"children":2468},{"style":926},[2469],{"type":68,"value":1652},{"type":62,"tag":307,"props":2471,"children":2472},{"style":932},[2473],{"type":68,"value":935},{"type":62,"tag":307,"props":2475,"children":2476},{"style":926},[2477],{"type":68,"value":982},{"type":62,"tag":307,"props":2479,"children":2481},{"class":309,"line":2480},32,[2482,2486,2490],{"type":62,"tag":307,"props":2483,"children":2484},{"style":926},[2485],{"type":68,"value":998},{"type":62,"tag":307,"props":2487,"children":2488},{"style":932},[2489],{"type":68,"value":935},{"type":62,"tag":307,"props":2491,"children":2492},{"style":926},[2493],{"type":68,"value":982},{"type":62,"tag":290,"props":2495,"children":2497},{"id":2496},"badges-and-status-pills",[2498],{"type":68,"value":2499},"Badges and Status Pills",{"type":62,"tag":297,"props":2501,"children":2503},{"className":915,"code":2502,"language":147,"meta":301,"style":301},"\u003C!-- Status badge -->\n\u003Cspan style=\"display: inline-block; font-size: 12px; padding: 4px 12px;\n             border-radius: var(--border-radius-md);\n             background: var(--color-background-success);\n             color: var(--color-text-success);\">Active\u003C\u002Fspan>\n\n\u003C!-- Featured accent (the ONLY case where 2px border is allowed) -->\n\u003Cdiv style=\"border: 2px solid var(--color-border-info);\n            border-radius: var(--border-radius-lg);\n            padding: 1rem 1.25rem;\">\n  \u003Cspan style=\"font-size: 12px; padding: 4px 12px;\n               border-radius: var(--border-radius-md);\n               background: var(--color-background-info);\n               color: var(--color-text-info);\">Most popular\u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[2504],{"type":62,"tag":93,"props":2505,"children":2506},{"__ignoreMap":301},[2507,2515,2543,2551,2559,2592,2599,2607,2635,2642,2657,2685,2693,2701,2734],{"type":62,"tag":307,"props":2508,"children":2509},{"class":309,"line":310},[2510],{"type":62,"tag":307,"props":2511,"children":2512},{"style":314},[2513],{"type":68,"value":2514},"\u003C!-- Status badge -->\n",{"type":62,"tag":307,"props":2516,"children":2517},{"class":309,"line":320},[2518,2522,2526,2530,2534,2538],{"type":62,"tag":307,"props":2519,"children":2520},{"style":926},[2521],{"type":68,"value":929},{"type":62,"tag":307,"props":2523,"children":2524},{"style":932},[2525],{"type":68,"value":307},{"type":62,"tag":307,"props":2527,"children":2528},{"style":938},[2529],{"type":68,"value":941},{"type":62,"tag":307,"props":2531,"children":2532},{"style":926},[2533],{"type":68,"value":946},{"type":62,"tag":307,"props":2535,"children":2536},{"style":926},[2537],{"type":68,"value":951},{"type":62,"tag":307,"props":2539,"children":2540},{"style":954},[2541],{"type":68,"value":2542},"display: inline-block; font-size: 12px; padding: 4px 12px;\n",{"type":62,"tag":307,"props":2544,"children":2545},{"class":309,"line":335},[2546],{"type":62,"tag":307,"props":2547,"children":2548},{"style":954},[2549],{"type":68,"value":2550},"             border-radius: var(--border-radius-md);\n",{"type":62,"tag":307,"props":2552,"children":2553},{"class":309,"line":349},[2554],{"type":62,"tag":307,"props":2555,"children":2556},{"style":954},[2557],{"type":68,"value":2558},"             background: var(--color-background-success);\n",{"type":62,"tag":307,"props":2560,"children":2561},{"class":309,"line":363},[2562,2567,2571,2575,2580,2584,2588],{"type":62,"tag":307,"props":2563,"children":2564},{"style":954},[2565],{"type":68,"value":2566},"             color: var(--color-text-success);",{"type":62,"tag":307,"props":2568,"children":2569},{"style":926},[2570],{"type":68,"value":951},{"type":62,"tag":307,"props":2572,"children":2573},{"style":926},[2574],{"type":68,"value":1575},{"type":62,"tag":307,"props":2576,"children":2577},{"style":324},[2578],{"type":68,"value":2579},"Active",{"type":62,"tag":307,"props":2581,"children":2582},{"style":926},[2583],{"type":68,"value":998},{"type":62,"tag":307,"props":2585,"children":2586},{"style":932},[2587],{"type":68,"value":307},{"type":62,"tag":307,"props":2589,"children":2590},{"style":926},[2591],{"type":68,"value":982},{"type":62,"tag":307,"props":2593,"children":2594},{"class":309,"line":377},[2595],{"type":62,"tag":307,"props":2596,"children":2597},{"emptyLinePlaceholder":423},[2598],{"type":68,"value":426},{"type":62,"tag":307,"props":2600,"children":2601},{"class":309,"line":391},[2602],{"type":62,"tag":307,"props":2603,"children":2604},{"style":314},[2605],{"type":68,"value":2606},"\u003C!-- Featured accent (the ONLY case where 2px border is allowed) -->\n",{"type":62,"tag":307,"props":2608,"children":2609},{"class":309,"line":405},[2610,2614,2618,2622,2626,2630],{"type":62,"tag":307,"props":2611,"children":2612},{"style":926},[2613],{"type":68,"value":929},{"type":62,"tag":307,"props":2615,"children":2616},{"style":932},[2617],{"type":68,"value":935},{"type":62,"tag":307,"props":2619,"children":2620},{"style":938},[2621],{"type":68,"value":941},{"type":62,"tag":307,"props":2623,"children":2624},{"style":926},[2625],{"type":68,"value":946},{"type":62,"tag":307,"props":2627,"children":2628},{"style":926},[2629],{"type":68,"value":951},{"type":62,"tag":307,"props":2631,"children":2632},{"style":954},[2633],{"type":68,"value":2634},"border: 2px solid var(--color-border-info);\n",{"type":62,"tag":307,"props":2636,"children":2637},{"class":309,"line":419},[2638],{"type":62,"tag":307,"props":2639,"children":2640},{"style":954},[2641],{"type":68,"value":965},{"type":62,"tag":307,"props":2643,"children":2644},{"class":309,"line":429},[2645,2649,2653],{"type":62,"tag":307,"props":2646,"children":2647},{"style":954},[2648],{"type":68,"value":1893},{"type":62,"tag":307,"props":2650,"children":2651},{"style":926},[2652],{"type":68,"value":951},{"type":62,"tag":307,"props":2654,"children":2655},{"style":926},[2656],{"type":68,"value":982},{"type":62,"tag":307,"props":2658,"children":2659},{"class":309,"line":438},[2660,2664,2668,2672,2676,2680],{"type":62,"tag":307,"props":2661,"children":2662},{"style":926},[2663],{"type":68,"value":1510},{"type":62,"tag":307,"props":2665,"children":2666},{"style":932},[2667],{"type":68,"value":307},{"type":62,"tag":307,"props":2669,"children":2670},{"style":938},[2671],{"type":68,"value":941},{"type":62,"tag":307,"props":2673,"children":2674},{"style":926},[2675],{"type":68,"value":946},{"type":62,"tag":307,"props":2677,"children":2678},{"style":926},[2679],{"type":68,"value":951},{"type":62,"tag":307,"props":2681,"children":2682},{"style":954},[2683],{"type":68,"value":2684},"font-size: 12px; padding: 4px 12px;\n",{"type":62,"tag":307,"props":2686,"children":2687},{"class":309,"line":452},[2688],{"type":62,"tag":307,"props":2689,"children":2690},{"style":954},[2691],{"type":68,"value":2692},"               border-radius: var(--border-radius-md);\n",{"type":62,"tag":307,"props":2694,"children":2695},{"class":309,"line":466},[2696],{"type":62,"tag":307,"props":2697,"children":2698},{"style":954},[2699],{"type":68,"value":2700},"               background: var(--color-background-info);\n",{"type":62,"tag":307,"props":2702,"children":2703},{"class":309,"line":480},[2704,2709,2713,2717,2722,2726,2730],{"type":62,"tag":307,"props":2705,"children":2706},{"style":954},[2707],{"type":68,"value":2708},"               color: var(--color-text-info);",{"type":62,"tag":307,"props":2710,"children":2711},{"style":926},[2712],{"type":68,"value":951},{"type":62,"tag":307,"props":2714,"children":2715},{"style":926},[2716],{"type":68,"value":1575},{"type":62,"tag":307,"props":2718,"children":2719},{"style":324},[2720],{"type":68,"value":2721},"Most popular",{"type":62,"tag":307,"props":2723,"children":2724},{"style":926},[2725],{"type":68,"value":998},{"type":62,"tag":307,"props":2727,"children":2728},{"style":932},[2729],{"type":68,"value":307},{"type":62,"tag":307,"props":2731,"children":2732},{"style":926},[2733],{"type":68,"value":982},{"type":62,"tag":307,"props":2735,"children":2736},{"class":309,"line":489},[2737,2741,2745],{"type":62,"tag":307,"props":2738,"children":2739},{"style":926},[2740],{"type":68,"value":998},{"type":62,"tag":307,"props":2742,"children":2743},{"style":932},[2744],{"type":68,"value":935},{"type":62,"tag":307,"props":2746,"children":2747},{"style":926},[2748],{"type":68,"value":982},{"type":62,"tag":290,"props":2750,"children":2752},{"id":2751},"form-elements",[2753],{"type":68,"value":2754},"Form Elements",{"type":62,"tag":71,"props":2756,"children":2757},{},[2758],{"type":68,"value":2759},"Inputs, selects, textareas, buttons, and range sliders are pre-styled\nin the host environment. Write bare tags — they inherit correct styling:",{"type":62,"tag":698,"props":2761,"children":2762},{},[2763,2768,2773],{"type":62,"tag":106,"props":2764,"children":2765},{},[2766],{"type":68,"value":2767},"Text inputs: 36px height, hover\u002Ffocus states built in",{"type":62,"tag":106,"props":2769,"children":2770},{},[2771],{"type":68,"value":2772},"Range sliders: 4px track + 18px thumb",{"type":62,"tag":106,"props":2774,"children":2775},{},[2776],{"type":68,"value":2777},"Buttons: transparent bg, 0.5px border, hover\u002Factive states",{"type":62,"tag":71,"props":2779,"children":2780},{},[2781,2794,2796,2802,2804,2810],{"type":62,"tag":668,"props":2782,"children":2783},{},[2784,2786,2792],{"type":68,"value":2785},"Never use ",{"type":62,"tag":93,"props":2787,"children":2789},{"className":2788},[],[2790],{"type":68,"value":2791},"\u003Cform>",{"type":68,"value":2793}," tags.",{"type":68,"value":2795}," Use ",{"type":62,"tag":93,"props":2797,"children":2799},{"className":2798},[],[2800],{"type":68,"value":2801},"onClick",{"type":68,"value":2803}," \u002F ",{"type":62,"tag":93,"props":2805,"children":2807},{"className":2806},[],[2808],{"type":68,"value":2809},"onChange",{"type":68,"value":2811}," handlers directly.",{"type":62,"tag":290,"props":2813,"children":2815},{"id":2814},"comparison-cards",[2816],{"type":68,"value":2817},"Comparison Cards",{"type":62,"tag":71,"props":2819,"children":2820},{},[2821],{"type":68,"value":2822},"For \"help me choose between X and Y\":",{"type":62,"tag":297,"props":2824,"children":2826},{"className":915,"code":2825,"language":147,"meta":301,"style":301},"\u003Cdiv style=\"display: grid; grid-template-columns:\n            repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;\">\n\n  \u003Cdiv style=\"background: var(--color-background-primary);\n              border: 0.5px solid var(--color-border-tertiary);\n              border-radius: var(--border-radius-lg);\n              padding: 1rem 1.25rem;\">\n    \u003Ch3 style=\"font-size: 16px; font-weight: 500; margin: 0 0 8px;\">\n      Option A\u003C\u002Fh3>\n    \u003Cp style=\"font-size: 13px; color: var(--color-text-secondary);\n              margin: 0;\">Description here\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\n  \u003C!-- Repeat for Option B, C... -->\n\u003C\u002Fdiv>\n",[2827],{"type":62,"tag":93,"props":2828,"children":2829},{"__ignoreMap":301},[2830,2858,2874,2881,2908,2916,2924,2940,2976,2996,3023,3056,3071,3078,3086],{"type":62,"tag":307,"props":2831,"children":2832},{"class":309,"line":310},[2833,2837,2841,2845,2849,2853],{"type":62,"tag":307,"props":2834,"children":2835},{"style":926},[2836],{"type":68,"value":929},{"type":62,"tag":307,"props":2838,"children":2839},{"style":932},[2840],{"type":68,"value":935},{"type":62,"tag":307,"props":2842,"children":2843},{"style":938},[2844],{"type":68,"value":941},{"type":62,"tag":307,"props":2846,"children":2847},{"style":926},[2848],{"type":68,"value":946},{"type":62,"tag":307,"props":2850,"children":2851},{"style":926},[2852],{"type":68,"value":951},{"type":62,"tag":307,"props":2854,"children":2855},{"style":954},[2856],{"type":68,"value":2857},"display: grid; grid-template-columns:\n",{"type":62,"tag":307,"props":2859,"children":2860},{"class":309,"line":320},[2861,2866,2870],{"type":62,"tag":307,"props":2862,"children":2863},{"style":954},[2864],{"type":68,"value":2865},"            repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;",{"type":62,"tag":307,"props":2867,"children":2868},{"style":926},[2869],{"type":68,"value":951},{"type":62,"tag":307,"props":2871,"children":2872},{"style":926},[2873],{"type":68,"value":982},{"type":62,"tag":307,"props":2875,"children":2876},{"class":309,"line":335},[2877],{"type":62,"tag":307,"props":2878,"children":2879},{"emptyLinePlaceholder":423},[2880],{"type":68,"value":426},{"type":62,"tag":307,"props":2882,"children":2883},{"class":309,"line":349},[2884,2888,2892,2896,2900,2904],{"type":62,"tag":307,"props":2885,"children":2886},{"style":926},[2887],{"type":68,"value":1510},{"type":62,"tag":307,"props":2889,"children":2890},{"style":932},[2891],{"type":68,"value":935},{"type":62,"tag":307,"props":2893,"children":2894},{"style":938},[2895],{"type":68,"value":941},{"type":62,"tag":307,"props":2897,"children":2898},{"style":926},[2899],{"type":68,"value":946},{"type":62,"tag":307,"props":2901,"children":2902},{"style":926},[2903],{"type":68,"value":951},{"type":62,"tag":307,"props":2905,"children":2906},{"style":954},[2907],{"type":68,"value":1870},{"type":62,"tag":307,"props":2909,"children":2910},{"class":309,"line":363},[2911],{"type":62,"tag":307,"props":2912,"children":2913},{"style":954},[2914],{"type":68,"value":2915},"              border: 0.5px solid var(--color-border-tertiary);\n",{"type":62,"tag":307,"props":2917,"children":2918},{"class":309,"line":377},[2919],{"type":62,"tag":307,"props":2920,"children":2921},{"style":954},[2922],{"type":68,"value":2923},"              border-radius: var(--border-radius-lg);\n",{"type":62,"tag":307,"props":2925,"children":2926},{"class":309,"line":391},[2927,2932,2936],{"type":62,"tag":307,"props":2928,"children":2929},{"style":954},[2930],{"type":68,"value":2931},"              padding: 1rem 1.25rem;",{"type":62,"tag":307,"props":2933,"children":2934},{"style":926},[2935],{"type":68,"value":951},{"type":62,"tag":307,"props":2937,"children":2938},{"style":926},[2939],{"type":68,"value":982},{"type":62,"tag":307,"props":2941,"children":2942},{"class":309,"line":405},[2943,2947,2951,2955,2959,2963,2968,2972],{"type":62,"tag":307,"props":2944,"children":2945},{"style":926},[2946],{"type":68,"value":1546},{"type":62,"tag":307,"props":2948,"children":2949},{"style":932},[2950],{"type":68,"value":290},{"type":62,"tag":307,"props":2952,"children":2953},{"style":938},[2954],{"type":68,"value":941},{"type":62,"tag":307,"props":2956,"children":2957},{"style":926},[2958],{"type":68,"value":946},{"type":62,"tag":307,"props":2960,"children":2961},{"style":926},[2962],{"type":68,"value":951},{"type":62,"tag":307,"props":2964,"children":2965},{"style":954},[2966],{"type":68,"value":2967},"font-size: 16px; font-weight: 500; margin: 0 0 8px;",{"type":62,"tag":307,"props":2969,"children":2970},{"style":926},[2971],{"type":68,"value":951},{"type":62,"tag":307,"props":2973,"children":2974},{"style":926},[2975],{"type":68,"value":982},{"type":62,"tag":307,"props":2977,"children":2978},{"class":309,"line":419},[2979,2984,2988,2992],{"type":62,"tag":307,"props":2980,"children":2981},{"style":324},[2982],{"type":68,"value":2983},"      Option A",{"type":62,"tag":307,"props":2985,"children":2986},{"style":926},[2987],{"type":68,"value":998},{"type":62,"tag":307,"props":2989,"children":2990},{"style":932},[2991],{"type":68,"value":290},{"type":62,"tag":307,"props":2993,"children":2994},{"style":926},[2995],{"type":68,"value":982},{"type":62,"tag":307,"props":2997,"children":2998},{"class":309,"line":429},[2999,3003,3007,3011,3015,3019],{"type":62,"tag":307,"props":3000,"children":3001},{"style":926},[3002],{"type":68,"value":1546},{"type":62,"tag":307,"props":3004,"children":3005},{"style":932},[3006],{"type":68,"value":71},{"type":62,"tag":307,"props":3008,"children":3009},{"style":938},[3010],{"type":68,"value":941},{"type":62,"tag":307,"props":3012,"children":3013},{"style":926},[3014],{"type":68,"value":946},{"type":62,"tag":307,"props":3016,"children":3017},{"style":926},[3018],{"type":68,"value":951},{"type":62,"tag":307,"props":3020,"children":3021},{"style":954},[3022],{"type":68,"value":2142},{"type":62,"tag":307,"props":3024,"children":3025},{"class":309,"line":438},[3026,3031,3035,3039,3044,3048,3052],{"type":62,"tag":307,"props":3027,"children":3028},{"style":954},[3029],{"type":68,"value":3030},"              margin: 0;",{"type":62,"tag":307,"props":3032,"children":3033},{"style":926},[3034],{"type":68,"value":951},{"type":62,"tag":307,"props":3036,"children":3037},{"style":926},[3038],{"type":68,"value":1575},{"type":62,"tag":307,"props":3040,"children":3041},{"style":324},[3042],{"type":68,"value":3043},"Description here",{"type":62,"tag":307,"props":3045,"children":3046},{"style":926},[3047],{"type":68,"value":998},{"type":62,"tag":307,"props":3049,"children":3050},{"style":932},[3051],{"type":68,"value":71},{"type":62,"tag":307,"props":3053,"children":3054},{"style":926},[3055],{"type":68,"value":982},{"type":62,"tag":307,"props":3057,"children":3058},{"class":309,"line":452},[3059,3063,3067],{"type":62,"tag":307,"props":3060,"children":3061},{"style":926},[3062],{"type":68,"value":1652},{"type":62,"tag":307,"props":3064,"children":3065},{"style":932},[3066],{"type":68,"value":935},{"type":62,"tag":307,"props":3068,"children":3069},{"style":926},[3070],{"type":68,"value":982},{"type":62,"tag":307,"props":3072,"children":3073},{"class":309,"line":466},[3074],{"type":62,"tag":307,"props":3075,"children":3076},{"emptyLinePlaceholder":423},[3077],{"type":68,"value":426},{"type":62,"tag":307,"props":3079,"children":3080},{"class":309,"line":480},[3081],{"type":62,"tag":307,"props":3082,"children":3083},{"style":314},[3084],{"type":68,"value":3085},"  \u003C!-- Repeat for Option B, C... -->\n",{"type":62,"tag":307,"props":3087,"children":3088},{"class":309,"line":489},[3089,3093,3097],{"type":62,"tag":307,"props":3090,"children":3091},{"style":926},[3092],{"type":68,"value":998},{"type":62,"tag":307,"props":3094,"children":3095},{"style":932},[3096],{"type":68,"value":935},{"type":62,"tag":307,"props":3098,"children":3099},{"style":926},[3100],{"type":68,"value":982},{"type":62,"tag":77,"props":3102,"children":3103},{},[],{"type":62,"tag":81,"props":3105,"children":3107},{"id":3106},"part-3-advanced-interactive-widgets",[3108],{"type":68,"value":3109},"Part 3: Advanced Interactive Widgets",{"type":62,"tag":290,"props":3111,"children":3113},{"id":3112},"simulations-and-physics",[3114],{"type":68,"value":3115},"Simulations and Physics",{"type":62,"tag":71,"props":3117,"children":3118},{},[3119],{"type":68,"value":3120},"For teaching physics, algorithms, or systems behavior with real-time updates.",{"type":62,"tag":71,"props":3122,"children":3123},{},[3124],{"type":62,"tag":668,"props":3125,"children":3126},{},[3127],{"type":68,"value":3128},"Pattern: Animation Loop with Controls",{"type":62,"tag":71,"props":3130,"children":3131},{},[3132],{"type":68,"value":1037},{"type":62,"tag":297,"props":3134,"children":3136},{"className":299,"code":3135,"language":136,"meta":301,"style":301},".sim-controls {\n  display: flex; align-items: center; gap: 16px;\n  margin: 12px 0; font-size: 13px;\n  color: var(--color-text-secondary);\n}\n#sim {\n  width: 100%; height: 300px;\n  border-radius: var(--border-radius-md);\n  background: var(--color-background-secondary);\n}\n",[3137],{"type":62,"tag":93,"props":3138,"children":3139},{"__ignoreMap":301},[3140,3156,3212,3253,3280,3287,3304,3343,3370,3397],{"type":62,"tag":307,"props":3141,"children":3142},{"class":309,"line":310},[3143,3147,3152],{"type":62,"tag":307,"props":3144,"children":3145},{"style":926},[3146],{"type":68,"value":848},{"type":62,"tag":307,"props":3148,"children":3149},{"style":1054},[3150],{"type":68,"value":3151},"sim-controls",{"type":62,"tag":307,"props":3153,"children":3154},{"style":926},[3155],{"type":68,"value":1062},{"type":62,"tag":307,"props":3157,"children":3158},{"class":309,"line":320},[3159,3163,3167,3172,3176,3181,3185,3190,3194,3199,3203,3208],{"type":62,"tag":307,"props":3160,"children":3161},{"style":1068},[3162],{"type":68,"value":1071},{"type":62,"tag":307,"props":3164,"children":3165},{"style":926},[3166],{"type":68,"value":1076},{"type":62,"tag":307,"props":3168,"children":3169},{"style":324},[3170],{"type":68,"value":3171}," flex",{"type":62,"tag":307,"props":3173,"children":3174},{"style":926},[3175],{"type":68,"value":1431},{"type":62,"tag":307,"props":3177,"children":3178},{"style":1068},[3179],{"type":68,"value":3180}," align-items",{"type":62,"tag":307,"props":3182,"children":3183},{"style":926},[3184],{"type":68,"value":1076},{"type":62,"tag":307,"props":3186,"children":3187},{"style":324},[3188],{"type":68,"value":3189}," center",{"type":62,"tag":307,"props":3191,"children":3192},{"style":926},[3193],{"type":68,"value":1431},{"type":62,"tag":307,"props":3195,"children":3196},{"style":1068},[3197],{"type":68,"value":3198}," gap",{"type":62,"tag":307,"props":3200,"children":3201},{"style":926},[3202],{"type":68,"value":1076},{"type":62,"tag":307,"props":3204,"children":3205},{"style":1131},[3206],{"type":68,"value":3207}," 16px",{"type":62,"tag":307,"props":3209,"children":3210},{"style":926},[3211],{"type":68,"value":1086},{"type":62,"tag":307,"props":3213,"children":3214},{"class":309,"line":335},[3215,3220,3224,3228,3233,3237,3241,3245,3249],{"type":62,"tag":307,"props":3216,"children":3217},{"style":1068},[3218],{"type":68,"value":3219},"  margin",{"type":62,"tag":307,"props":3221,"children":3222},{"style":926},[3223],{"type":68,"value":1076},{"type":62,"tag":307,"props":3225,"children":3226},{"style":1131},[3227],{"type":68,"value":1165},{"type":62,"tag":307,"props":3229,"children":3230},{"style":1131},[3231],{"type":68,"value":3232}," 0",{"type":62,"tag":307,"props":3234,"children":3235},{"style":926},[3236],{"type":68,"value":1431},{"type":62,"tag":307,"props":3238,"children":3239},{"style":1068},[3240],{"type":68,"value":1417},{"type":62,"tag":307,"props":3242,"children":3243},{"style":926},[3244],{"type":68,"value":1076},{"type":62,"tag":307,"props":3246,"children":3247},{"style":1131},[3248],{"type":68,"value":1335},{"type":62,"tag":307,"props":3250,"children":3251},{"style":926},[3252],{"type":68,"value":1086},{"type":62,"tag":307,"props":3254,"children":3255},{"class":309,"line":349},[3256,3260,3264,3268,3272,3276],{"type":62,"tag":307,"props":3257,"children":3258},{"style":1068},[3259],{"type":68,"value":1347},{"type":62,"tag":307,"props":3261,"children":3262},{"style":926},[3263],{"type":68,"value":1076},{"type":62,"tag":307,"props":3265,"children":3266},{"style":1101},[3267],{"type":68,"value":1231},{"type":62,"tag":307,"props":3269,"children":3270},{"style":926},[3271],{"type":68,"value":1109},{"type":62,"tag":307,"props":3273,"children":3274},{"style":324},[3275],{"type":68,"value":1364},{"type":62,"tag":307,"props":3277,"children":3278},{"style":926},[3279],{"type":68,"value":1245},{"type":62,"tag":307,"props":3281,"children":3282},{"class":309,"line":363},[3283],{"type":62,"tag":307,"props":3284,"children":3285},{"style":926},[3286],{"type":68,"value":1198},{"type":62,"tag":307,"props":3288,"children":3289},{"class":309,"line":377},[3290,3295,3300],{"type":62,"tag":307,"props":3291,"children":3292},{"style":926},[3293],{"type":68,"value":3294},"#",{"type":62,"tag":307,"props":3296,"children":3297},{"style":1131},[3298],{"type":68,"value":3299},"sim",{"type":62,"tag":307,"props":3301,"children":3302},{"style":926},[3303],{"type":68,"value":1062},{"type":62,"tag":307,"props":3305,"children":3306},{"class":309,"line":391},[3307,3312,3316,3321,3325,3330,3334,3339],{"type":62,"tag":307,"props":3308,"children":3309},{"style":1068},[3310],{"type":68,"value":3311},"  width",{"type":62,"tag":307,"props":3313,"children":3314},{"style":926},[3315],{"type":68,"value":1076},{"type":62,"tag":307,"props":3317,"children":3318},{"style":1131},[3319],{"type":68,"value":3320}," 100%",{"type":62,"tag":307,"props":3322,"children":3323},{"style":926},[3324],{"type":68,"value":1431},{"type":62,"tag":307,"props":3326,"children":3327},{"style":1068},[3328],{"type":68,"value":3329}," height",{"type":62,"tag":307,"props":3331,"children":3332},{"style":926},[3333],{"type":68,"value":1076},{"type":62,"tag":307,"props":3335,"children":3336},{"style":1131},[3337],{"type":68,"value":3338}," 300px",{"type":62,"tag":307,"props":3340,"children":3341},{"style":926},[3342],{"type":68,"value":1086},{"type":62,"tag":307,"props":3344,"children":3345},{"class":309,"line":405},[3346,3350,3354,3358,3362,3366],{"type":62,"tag":307,"props":3347,"children":3348},{"style":1068},[3349],{"type":68,"value":1253},{"type":62,"tag":307,"props":3351,"children":3352},{"style":926},[3353],{"type":68,"value":1076},{"type":62,"tag":307,"props":3355,"children":3356},{"style":1101},[3357],{"type":68,"value":1231},{"type":62,"tag":307,"props":3359,"children":3360},{"style":926},[3361],{"type":68,"value":1109},{"type":62,"tag":307,"props":3363,"children":3364},{"style":324},[3365],{"type":68,"value":1270},{"type":62,"tag":307,"props":3367,"children":3368},{"style":926},[3369],{"type":68,"value":1245},{"type":62,"tag":307,"props":3371,"children":3372},{"class":309,"line":419},[3373,3377,3381,3385,3389,3393],{"type":62,"tag":307,"props":3374,"children":3375},{"style":1068},[3376],{"type":68,"value":1222},{"type":62,"tag":307,"props":3378,"children":3379},{"style":926},[3380],{"type":68,"value":1076},{"type":62,"tag":307,"props":3382,"children":3383},{"style":1101},[3384],{"type":68,"value":1231},{"type":62,"tag":307,"props":3386,"children":3387},{"style":926},[3388],{"type":68,"value":1109},{"type":62,"tag":307,"props":3390,"children":3391},{"style":324},[3392],{"type":68,"value":1240},{"type":62,"tag":307,"props":3394,"children":3395},{"style":926},[3396],{"type":68,"value":1245},{"type":62,"tag":307,"props":3398,"children":3399},{"class":309,"line":429},[3400],{"type":62,"tag":307,"props":3401,"children":3402},{"style":926},[3403],{"type":68,"value":1198},{"type":62,"tag":71,"props":3405,"children":3406},{},[3407],{"type":68,"value":1459},{"type":62,"tag":297,"props":3409,"children":3411},{"className":915,"code":3410,"language":147,"meta":301,"style":301},"\u003Ccanvas id=\"sim\">\u003C\u002Fcanvas>\n\n\u003Cdiv class=\"sim-controls\">\n  \u003Cbutton onclick=\"toggleSim()\">Play \u002F Pause\u003C\u002Fbutton>\n  \u003Clabel>Speed\n    \u003Cinput type=\"range\" min=\"1\" max=\"10\" value=\"5\" id=\"speed\"\n           oninput=\"setSimSpeed(+this.value)\">\n  \u003C\u002Flabel>\n  \u003Cbutton onclick=\"resetSim()\">Reset\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[3412],{"type":62,"tag":93,"props":3413,"children":3414},{"__ignoreMap":301},[3415,3461,3468,3503,3563,3584,3706,3754,3769,3826],{"type":62,"tag":307,"props":3416,"children":3417},{"class":309,"line":310},[3418,3422,3427,3432,3436,3440,3444,3448,3453,3457],{"type":62,"tag":307,"props":3419,"children":3420},{"style":926},[3421],{"type":68,"value":929},{"type":62,"tag":307,"props":3423,"children":3424},{"style":932},[3425],{"type":68,"value":3426},"canvas",{"type":62,"tag":307,"props":3428,"children":3429},{"style":938},[3430],{"type":68,"value":3431}," id",{"type":62,"tag":307,"props":3433,"children":3434},{"style":926},[3435],{"type":68,"value":946},{"type":62,"tag":307,"props":3437,"children":3438},{"style":926},[3439],{"type":68,"value":951},{"type":62,"tag":307,"props":3441,"children":3442},{"style":954},[3443],{"type":68,"value":3299},{"type":62,"tag":307,"props":3445,"children":3446},{"style":926},[3447],{"type":68,"value":951},{"type":62,"tag":307,"props":3449,"children":3450},{"style":926},[3451],{"type":68,"value":3452},">\u003C\u002F",{"type":62,"tag":307,"props":3454,"children":3455},{"style":932},[3456],{"type":68,"value":3426},{"type":62,"tag":307,"props":3458,"children":3459},{"style":926},[3460],{"type":68,"value":982},{"type":62,"tag":307,"props":3462,"children":3463},{"class":309,"line":320},[3464],{"type":62,"tag":307,"props":3465,"children":3466},{"emptyLinePlaceholder":423},[3467],{"type":68,"value":426},{"type":62,"tag":307,"props":3469,"children":3470},{"class":309,"line":335},[3471,3475,3479,3483,3487,3491,3495,3499],{"type":62,"tag":307,"props":3472,"children":3473},{"style":926},[3474],{"type":68,"value":929},{"type":62,"tag":307,"props":3476,"children":3477},{"style":932},[3478],{"type":68,"value":935},{"type":62,"tag":307,"props":3480,"children":3481},{"style":938},[3482],{"type":68,"value":1482},{"type":62,"tag":307,"props":3484,"children":3485},{"style":926},[3486],{"type":68,"value":946},{"type":62,"tag":307,"props":3488,"children":3489},{"style":926},[3490],{"type":68,"value":951},{"type":62,"tag":307,"props":3492,"children":3493},{"style":954},[3494],{"type":68,"value":3151},{"type":62,"tag":307,"props":3496,"children":3497},{"style":926},[3498],{"type":68,"value":951},{"type":62,"tag":307,"props":3500,"children":3501},{"style":926},[3502],{"type":68,"value":982},{"type":62,"tag":307,"props":3504,"children":3505},{"class":309,"line":349},[3506,3510,3515,3520,3524,3528,3533,3538,3542,3546,3551,3555,3559],{"type":62,"tag":307,"props":3507,"children":3508},{"style":926},[3509],{"type":68,"value":1510},{"type":62,"tag":307,"props":3511,"children":3512},{"style":932},[3513],{"type":68,"value":3514},"button",{"type":62,"tag":307,"props":3516,"children":3517},{"style":938},[3518],{"type":68,"value":3519}," onclick",{"type":62,"tag":307,"props":3521,"children":3522},{"style":926},[3523],{"type":68,"value":946},{"type":62,"tag":307,"props":3525,"children":3526},{"style":926},[3527],{"type":68,"value":951},{"type":62,"tag":307,"props":3529,"children":3530},{"style":1101},[3531],{"type":68,"value":3532},"toggleSim",{"type":62,"tag":307,"props":3534,"children":3535},{"style":954},[3536],{"type":68,"value":3537},"()",{"type":62,"tag":307,"props":3539,"children":3540},{"style":926},[3541],{"type":68,"value":951},{"type":62,"tag":307,"props":3543,"children":3544},{"style":926},[3545],{"type":68,"value":1575},{"type":62,"tag":307,"props":3547,"children":3548},{"style":324},[3549],{"type":68,"value":3550},"Play \u002F Pause",{"type":62,"tag":307,"props":3552,"children":3553},{"style":926},[3554],{"type":68,"value":998},{"type":62,"tag":307,"props":3556,"children":3557},{"style":932},[3558],{"type":68,"value":3514},{"type":62,"tag":307,"props":3560,"children":3561},{"style":926},[3562],{"type":68,"value":982},{"type":62,"tag":307,"props":3564,"children":3565},{"class":309,"line":363},[3566,3570,3575,3579],{"type":62,"tag":307,"props":3567,"children":3568},{"style":926},[3569],{"type":68,"value":1510},{"type":62,"tag":307,"props":3571,"children":3572},{"style":932},[3573],{"type":68,"value":3574},"label",{"type":62,"tag":307,"props":3576,"children":3577},{"style":926},[3578],{"type":68,"value":1575},{"type":62,"tag":307,"props":3580,"children":3581},{"style":324},[3582],{"type":68,"value":3583},"Speed\n",{"type":62,"tag":307,"props":3585,"children":3586},{"class":309,"line":377},[3587,3591,3596,3601,3605,3609,3614,3618,3623,3627,3631,3636,3640,3645,3649,3653,3658,3662,3667,3671,3675,3680,3684,3688,3692,3696,3701],{"type":62,"tag":307,"props":3588,"children":3589},{"style":926},[3590],{"type":68,"value":1546},{"type":62,"tag":307,"props":3592,"children":3593},{"style":932},[3594],{"type":68,"value":3595},"input",{"type":62,"tag":307,"props":3597,"children":3598},{"style":938},[3599],{"type":68,"value":3600}," type",{"type":62,"tag":307,"props":3602,"children":3603},{"style":926},[3604],{"type":68,"value":946},{"type":62,"tag":307,"props":3606,"children":3607},{"style":926},[3608],{"type":68,"value":951},{"type":62,"tag":307,"props":3610,"children":3611},{"style":954},[3612],{"type":68,"value":3613},"range",{"type":62,"tag":307,"props":3615,"children":3616},{"style":926},[3617],{"type":68,"value":951},{"type":62,"tag":307,"props":3619,"children":3620},{"style":938},[3621],{"type":68,"value":3622}," min",{"type":62,"tag":307,"props":3624,"children":3625},{"style":926},[3626],{"type":68,"value":946},{"type":62,"tag":307,"props":3628,"children":3629},{"style":926},[3630],{"type":68,"value":951},{"type":62,"tag":307,"props":3632,"children":3633},{"style":954},[3634],{"type":68,"value":3635},"1",{"type":62,"tag":307,"props":3637,"children":3638},{"style":926},[3639],{"type":68,"value":951},{"type":62,"tag":307,"props":3641,"children":3642},{"style":938},[3643],{"type":68,"value":3644}," max",{"type":62,"tag":307,"props":3646,"children":3647},{"style":926},[3648],{"type":68,"value":946},{"type":62,"tag":307,"props":3650,"children":3651},{"style":926},[3652],{"type":68,"value":951},{"type":62,"tag":307,"props":3654,"children":3655},{"style":954},[3656],{"type":68,"value":3657},"10",{"type":62,"tag":307,"props":3659,"children":3660},{"style":926},[3661],{"type":68,"value":951},{"type":62,"tag":307,"props":3663,"children":3664},{"style":938},[3665],{"type":68,"value":3666}," value",{"type":62,"tag":307,"props":3668,"children":3669},{"style":926},[3670],{"type":68,"value":946},{"type":62,"tag":307,"props":3672,"children":3673},{"style":926},[3674],{"type":68,"value":951},{"type":62,"tag":307,"props":3676,"children":3677},{"style":954},[3678],{"type":68,"value":3679},"5",{"type":62,"tag":307,"props":3681,"children":3682},{"style":926},[3683],{"type":68,"value":951},{"type":62,"tag":307,"props":3685,"children":3686},{"style":938},[3687],{"type":68,"value":3431},{"type":62,"tag":307,"props":3689,"children":3690},{"style":926},[3691],{"type":68,"value":946},{"type":62,"tag":307,"props":3693,"children":3694},{"style":926},[3695],{"type":68,"value":951},{"type":62,"tag":307,"props":3697,"children":3698},{"style":954},[3699],{"type":68,"value":3700},"speed",{"type":62,"tag":307,"props":3702,"children":3703},{"style":926},[3704],{"type":68,"value":3705},"\"\n",{"type":62,"tag":307,"props":3707,"children":3708},{"class":309,"line":391},[3709,3714,3718,3722,3727,3731,3736,3741,3746,3750],{"type":62,"tag":307,"props":3710,"children":3711},{"style":938},[3712],{"type":68,"value":3713},"           oninput",{"type":62,"tag":307,"props":3715,"children":3716},{"style":926},[3717],{"type":68,"value":946},{"type":62,"tag":307,"props":3719,"children":3720},{"style":926},[3721],{"type":68,"value":951},{"type":62,"tag":307,"props":3723,"children":3724},{"style":1101},[3725],{"type":68,"value":3726},"setSimSpeed",{"type":62,"tag":307,"props":3728,"children":3729},{"style":954},[3730],{"type":68,"value":1109},{"type":62,"tag":307,"props":3732,"children":3733},{"style":926},[3734],{"type":68,"value":3735},"+this.",{"type":62,"tag":307,"props":3737,"children":3738},{"style":324},[3739],{"type":68,"value":3740},"value",{"type":62,"tag":307,"props":3742,"children":3743},{"style":954},[3744],{"type":68,"value":3745},")",{"type":62,"tag":307,"props":3747,"children":3748},{"style":926},[3749],{"type":68,"value":951},{"type":62,"tag":307,"props":3751,"children":3752},{"style":926},[3753],{"type":68,"value":982},{"type":62,"tag":307,"props":3755,"children":3756},{"class":309,"line":405},[3757,3761,3765],{"type":62,"tag":307,"props":3758,"children":3759},{"style":926},[3760],{"type":68,"value":1652},{"type":62,"tag":307,"props":3762,"children":3763},{"style":932},[3764],{"type":68,"value":3574},{"type":62,"tag":307,"props":3766,"children":3767},{"style":926},[3768],{"type":68,"value":982},{"type":62,"tag":307,"props":3770,"children":3771},{"class":309,"line":419},[3772,3776,3780,3784,3788,3792,3797,3801,3805,3809,3814,3818,3822],{"type":62,"tag":307,"props":3773,"children":3774},{"style":926},[3775],{"type":68,"value":1510},{"type":62,"tag":307,"props":3777,"children":3778},{"style":932},[3779],{"type":68,"value":3514},{"type":62,"tag":307,"props":3781,"children":3782},{"style":938},[3783],{"type":68,"value":3519},{"type":62,"tag":307,"props":3785,"children":3786},{"style":926},[3787],{"type":68,"value":946},{"type":62,"tag":307,"props":3789,"children":3790},{"style":926},[3791],{"type":68,"value":951},{"type":62,"tag":307,"props":3793,"children":3794},{"style":1101},[3795],{"type":68,"value":3796},"resetSim",{"type":62,"tag":307,"props":3798,"children":3799},{"style":954},[3800],{"type":68,"value":3537},{"type":62,"tag":307,"props":3802,"children":3803},{"style":926},[3804],{"type":68,"value":951},{"type":62,"tag":307,"props":3806,"children":3807},{"style":926},[3808],{"type":68,"value":1575},{"type":62,"tag":307,"props":3810,"children":3811},{"style":324},[3812],{"type":68,"value":3813},"Reset",{"type":62,"tag":307,"props":3815,"children":3816},{"style":926},[3817],{"type":68,"value":998},{"type":62,"tag":307,"props":3819,"children":3820},{"style":932},[3821],{"type":68,"value":3514},{"type":62,"tag":307,"props":3823,"children":3824},{"style":926},[3825],{"type":68,"value":982},{"type":62,"tag":307,"props":3827,"children":3828},{"class":309,"line":429},[3829,3833,3837],{"type":62,"tag":307,"props":3830,"children":3831},{"style":926},[3832],{"type":68,"value":998},{"type":62,"tag":307,"props":3834,"children":3835},{"style":932},[3836],{"type":68,"value":935},{"type":62,"tag":307,"props":3838,"children":3839},{"style":926},[3840],{"type":68,"value":982},{"type":62,"tag":71,"props":3842,"children":3843},{},[3844],{"type":68,"value":3845},"jsFunctions parameter:",{"type":62,"tag":297,"props":3847,"children":3851},{"className":3848,"code":3849,"language":3850,"meta":301,"style":301},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function initSim(count) {\n  const canvas = document.getElementById('sim');\n  canvas.width = canvas.offsetWidth;\n  canvas.height = canvas.offsetHeight;\n  window.sim = {\n    canvas,\n    ctx: canvas.getContext('2d'),\n    running: true,\n    speed: 5,\n    particles: Array.from({ length: count }, () => ({\n      x: Math.random() * canvas.width,\n      y: Math.random() * canvas.height,\n      vx: (Math.random() - 0.5) * 2,\n      vy: (Math.random() - 0.5) * 2\n    }))\n  };\n}\n\nfunction stepSim() {\n  const { canvas, ctx, particles, speed, running } = window.sim;\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  for (const p of particles) {\n    p.x += p.vx * speed * 0.2;\n    p.y += p.vy * speed * 0.2;\n    if (p.x \u003C 0 || p.x > canvas.width) p.vx *= -1;\n    if (p.y \u003C 0 || p.y > canvas.height) p.vy *= -1;\n    ctx.beginPath();\n    ctx.arc(p.x, p.y, 4, 0, Math.PI * 2);\n    ctx.fillStyle = '#534AB7';\n    ctx.fill();\n  }\n  if (running) requestAnimationFrame(stepSim);\n}\n\nfunction setSimSpeed(value) { window.sim.speed = value; }\n\nfunction toggleSim() {\n  window.sim.running = !window.sim.running;\n  if (window.sim.running) stepSim();\n}\n\nfunction resetSim() {\n  const wasRunning = window.sim.running;\n  initSim(window.sim.particles.length);\n  if (!wasRunning) stepSim();\n}\n","js",[3852],{"type":62,"tag":93,"props":3853,"children":3854},{"__ignoreMap":301},[3855,3886,3943,3981,4018,4042,4054,4104,4126,4147,4220,4272,4320,4381,4434,4447,4455,4462,4469,4489,4566,4640,4680,4737,4790,4891,4986,5010,5108,5146,5170,5178,5221,5229,5237,5302,5310,5331,5389,5437,5445,5453,5474,5515,5566,5604],{"type":62,"tag":307,"props":3856,"children":3857},{"class":309,"line":310},[3858,3863,3868,3872,3878,3882],{"type":62,"tag":307,"props":3859,"children":3860},{"style":938},[3861],{"type":68,"value":3862},"function",{"type":62,"tag":307,"props":3864,"children":3865},{"style":1101},[3866],{"type":68,"value":3867}," initSim",{"type":62,"tag":307,"props":3869,"children":3870},{"style":926},[3871],{"type":68,"value":1109},{"type":62,"tag":307,"props":3873,"children":3875},{"style":3874},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[3876],{"type":68,"value":3877},"count",{"type":62,"tag":307,"props":3879,"children":3880},{"style":926},[3881],{"type":68,"value":3745},{"type":62,"tag":307,"props":3883,"children":3884},{"style":926},[3885],{"type":68,"value":1062},{"type":62,"tag":307,"props":3887,"children":3888},{"class":309,"line":320},[3889,3894,3899,3904,3909,3913,3918,3922,3927,3931,3935,3939],{"type":62,"tag":307,"props":3890,"children":3891},{"style":938},[3892],{"type":68,"value":3893},"  const",{"type":62,"tag":307,"props":3895,"children":3896},{"style":324},[3897],{"type":68,"value":3898}," canvas",{"type":62,"tag":307,"props":3900,"children":3901},{"style":926},[3902],{"type":68,"value":3903}," =",{"type":62,"tag":307,"props":3905,"children":3906},{"style":324},[3907],{"type":68,"value":3908}," document",{"type":62,"tag":307,"props":3910,"children":3911},{"style":926},[3912],{"type":68,"value":848},{"type":62,"tag":307,"props":3914,"children":3915},{"style":1101},[3916],{"type":68,"value":3917},"getElementById",{"type":62,"tag":307,"props":3919,"children":3920},{"style":932},[3921],{"type":68,"value":1109},{"type":62,"tag":307,"props":3923,"children":3924},{"style":926},[3925],{"type":68,"value":3926},"'",{"type":62,"tag":307,"props":3928,"children":3929},{"style":954},[3930],{"type":68,"value":3299},{"type":62,"tag":307,"props":3932,"children":3933},{"style":926},[3934],{"type":68,"value":3926},{"type":62,"tag":307,"props":3936,"children":3937},{"style":932},[3938],{"type":68,"value":3745},{"type":62,"tag":307,"props":3940,"children":3941},{"style":926},[3942],{"type":68,"value":1086},{"type":62,"tag":307,"props":3944,"children":3945},{"class":309,"line":335},[3946,3951,3955,3960,3964,3968,3972,3977],{"type":62,"tag":307,"props":3947,"children":3948},{"style":324},[3949],{"type":68,"value":3950},"  canvas",{"type":62,"tag":307,"props":3952,"children":3953},{"style":926},[3954],{"type":68,"value":848},{"type":62,"tag":307,"props":3956,"children":3957},{"style":324},[3958],{"type":68,"value":3959},"width",{"type":62,"tag":307,"props":3961,"children":3962},{"style":926},[3963],{"type":68,"value":3903},{"type":62,"tag":307,"props":3965,"children":3966},{"style":324},[3967],{"type":68,"value":3898},{"type":62,"tag":307,"props":3969,"children":3970},{"style":926},[3971],{"type":68,"value":848},{"type":62,"tag":307,"props":3973,"children":3974},{"style":324},[3975],{"type":68,"value":3976},"offsetWidth",{"type":62,"tag":307,"props":3978,"children":3979},{"style":926},[3980],{"type":68,"value":1086},{"type":62,"tag":307,"props":3982,"children":3983},{"class":309,"line":349},[3984,3988,3992,3997,4001,4005,4009,4014],{"type":62,"tag":307,"props":3985,"children":3986},{"style":324},[3987],{"type":68,"value":3950},{"type":62,"tag":307,"props":3989,"children":3990},{"style":926},[3991],{"type":68,"value":848},{"type":62,"tag":307,"props":3993,"children":3994},{"style":324},[3995],{"type":68,"value":3996},"height",{"type":62,"tag":307,"props":3998,"children":3999},{"style":926},[4000],{"type":68,"value":3903},{"type":62,"tag":307,"props":4002,"children":4003},{"style":324},[4004],{"type":68,"value":3898},{"type":62,"tag":307,"props":4006,"children":4007},{"style":926},[4008],{"type":68,"value":848},{"type":62,"tag":307,"props":4010,"children":4011},{"style":324},[4012],{"type":68,"value":4013},"offsetHeight",{"type":62,"tag":307,"props":4015,"children":4016},{"style":926},[4017],{"type":68,"value":1086},{"type":62,"tag":307,"props":4019,"children":4020},{"class":309,"line":363},[4021,4026,4030,4034,4038],{"type":62,"tag":307,"props":4022,"children":4023},{"style":324},[4024],{"type":68,"value":4025},"  window",{"type":62,"tag":307,"props":4027,"children":4028},{"style":926},[4029],{"type":68,"value":848},{"type":62,"tag":307,"props":4031,"children":4032},{"style":324},[4033],{"type":68,"value":3299},{"type":62,"tag":307,"props":4035,"children":4036},{"style":926},[4037],{"type":68,"value":3903},{"type":62,"tag":307,"props":4039,"children":4040},{"style":926},[4041],{"type":68,"value":1062},{"type":62,"tag":307,"props":4043,"children":4044},{"class":309,"line":377},[4045,4050],{"type":62,"tag":307,"props":4046,"children":4047},{"style":324},[4048],{"type":68,"value":4049},"    canvas",{"type":62,"tag":307,"props":4051,"children":4052},{"style":926},[4053],{"type":68,"value":771},{"type":62,"tag":307,"props":4055,"children":4056},{"class":309,"line":391},[4057,4062,4066,4070,4074,4079,4083,4087,4092,4096,4100],{"type":62,"tag":307,"props":4058,"children":4059},{"style":932},[4060],{"type":68,"value":4061},"    ctx",{"type":62,"tag":307,"props":4063,"children":4064},{"style":926},[4065],{"type":68,"value":1076},{"type":62,"tag":307,"props":4067,"children":4068},{"style":324},[4069],{"type":68,"value":3898},{"type":62,"tag":307,"props":4071,"children":4072},{"style":926},[4073],{"type":68,"value":848},{"type":62,"tag":307,"props":4075,"children":4076},{"style":1101},[4077],{"type":68,"value":4078},"getContext",{"type":62,"tag":307,"props":4080,"children":4081},{"style":932},[4082],{"type":68,"value":1109},{"type":62,"tag":307,"props":4084,"children":4085},{"style":926},[4086],{"type":68,"value":3926},{"type":62,"tag":307,"props":4088,"children":4089},{"style":954},[4090],{"type":68,"value":4091},"2d",{"type":62,"tag":307,"props":4093,"children":4094},{"style":926},[4095],{"type":68,"value":3926},{"type":62,"tag":307,"props":4097,"children":4098},{"style":932},[4099],{"type":68,"value":3745},{"type":62,"tag":307,"props":4101,"children":4102},{"style":926},[4103],{"type":68,"value":771},{"type":62,"tag":307,"props":4105,"children":4106},{"class":309,"line":405},[4107,4112,4116,4122],{"type":62,"tag":307,"props":4108,"children":4109},{"style":932},[4110],{"type":68,"value":4111},"    running",{"type":62,"tag":307,"props":4113,"children":4114},{"style":926},[4115],{"type":68,"value":1076},{"type":62,"tag":307,"props":4117,"children":4119},{"style":4118},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[4120],{"type":68,"value":4121}," true",{"type":62,"tag":307,"props":4123,"children":4124},{"style":926},[4125],{"type":68,"value":771},{"type":62,"tag":307,"props":4127,"children":4128},{"class":309,"line":419},[4129,4134,4138,4143],{"type":62,"tag":307,"props":4130,"children":4131},{"style":932},[4132],{"type":68,"value":4133},"    speed",{"type":62,"tag":307,"props":4135,"children":4136},{"style":926},[4137],{"type":68,"value":1076},{"type":62,"tag":307,"props":4139,"children":4140},{"style":1131},[4141],{"type":68,"value":4142}," 5",{"type":62,"tag":307,"props":4144,"children":4145},{"style":926},[4146],{"type":68,"value":771},{"type":62,"tag":307,"props":4148,"children":4149},{"class":309,"line":429},[4150,4155,4159,4164,4168,4173,4177,4182,4187,4191,4196,4201,4206,4211,4215],{"type":62,"tag":307,"props":4151,"children":4152},{"style":932},[4153],{"type":68,"value":4154},"    particles",{"type":62,"tag":307,"props":4156,"children":4157},{"style":926},[4158],{"type":68,"value":1076},{"type":62,"tag":307,"props":4160,"children":4161},{"style":324},[4162],{"type":68,"value":4163}," Array",{"type":62,"tag":307,"props":4165,"children":4166},{"style":926},[4167],{"type":68,"value":848},{"type":62,"tag":307,"props":4169,"children":4170},{"style":1101},[4171],{"type":68,"value":4172},"from",{"type":62,"tag":307,"props":4174,"children":4175},{"style":932},[4176],{"type":68,"value":1109},{"type":62,"tag":307,"props":4178,"children":4179},{"style":926},[4180],{"type":68,"value":4181},"{",{"type":62,"tag":307,"props":4183,"children":4184},{"style":932},[4185],{"type":68,"value":4186}," length",{"type":62,"tag":307,"props":4188,"children":4189},{"style":926},[4190],{"type":68,"value":1076},{"type":62,"tag":307,"props":4192,"children":4193},{"style":324},[4194],{"type":68,"value":4195}," count",{"type":62,"tag":307,"props":4197,"children":4198},{"style":926},[4199],{"type":68,"value":4200}," },",{"type":62,"tag":307,"props":4202,"children":4203},{"style":926},[4204],{"type":68,"value":4205}," ()",{"type":62,"tag":307,"props":4207,"children":4208},{"style":938},[4209],{"type":68,"value":4210}," =>",{"type":62,"tag":307,"props":4212,"children":4213},{"style":932},[4214],{"type":68,"value":199},{"type":62,"tag":307,"props":4216,"children":4217},{"style":926},[4218],{"type":68,"value":4219},"{\n",{"type":62,"tag":307,"props":4221,"children":4222},{"class":309,"line":438},[4223,4228,4232,4237,4241,4246,4251,4256,4260,4264,4268],{"type":62,"tag":307,"props":4224,"children":4225},{"style":932},[4226],{"type":68,"value":4227},"      x",{"type":62,"tag":307,"props":4229,"children":4230},{"style":926},[4231],{"type":68,"value":1076},{"type":62,"tag":307,"props":4233,"children":4234},{"style":324},[4235],{"type":68,"value":4236}," Math",{"type":62,"tag":307,"props":4238,"children":4239},{"style":926},[4240],{"type":68,"value":848},{"type":62,"tag":307,"props":4242,"children":4243},{"style":1101},[4244],{"type":68,"value":4245},"random",{"type":62,"tag":307,"props":4247,"children":4248},{"style":932},[4249],{"type":68,"value":4250},"() ",{"type":62,"tag":307,"props":4252,"children":4253},{"style":926},[4254],{"type":68,"value":4255},"*",{"type":62,"tag":307,"props":4257,"children":4258},{"style":324},[4259],{"type":68,"value":3898},{"type":62,"tag":307,"props":4261,"children":4262},{"style":926},[4263],{"type":68,"value":848},{"type":62,"tag":307,"props":4265,"children":4266},{"style":324},[4267],{"type":68,"value":3959},{"type":62,"tag":307,"props":4269,"children":4270},{"style":926},[4271],{"type":68,"value":771},{"type":62,"tag":307,"props":4273,"children":4274},{"class":309,"line":452},[4275,4280,4284,4288,4292,4296,4300,4304,4308,4312,4316],{"type":62,"tag":307,"props":4276,"children":4277},{"style":932},[4278],{"type":68,"value":4279},"      y",{"type":62,"tag":307,"props":4281,"children":4282},{"style":926},[4283],{"type":68,"value":1076},{"type":62,"tag":307,"props":4285,"children":4286},{"style":324},[4287],{"type":68,"value":4236},{"type":62,"tag":307,"props":4289,"children":4290},{"style":926},[4291],{"type":68,"value":848},{"type":62,"tag":307,"props":4293,"children":4294},{"style":1101},[4295],{"type":68,"value":4245},{"type":62,"tag":307,"props":4297,"children":4298},{"style":932},[4299],{"type":68,"value":4250},{"type":62,"tag":307,"props":4301,"children":4302},{"style":926},[4303],{"type":68,"value":4255},{"type":62,"tag":307,"props":4305,"children":4306},{"style":324},[4307],{"type":68,"value":3898},{"type":62,"tag":307,"props":4309,"children":4310},{"style":926},[4311],{"type":68,"value":848},{"type":62,"tag":307,"props":4313,"children":4314},{"style":324},[4315],{"type":68,"value":3996},{"type":62,"tag":307,"props":4317,"children":4318},{"style":926},[4319],{"type":68,"value":771},{"type":62,"tag":307,"props":4321,"children":4322},{"class":309,"line":466},[4323,4328,4332,4336,4341,4345,4349,4353,4358,4363,4368,4372,4377],{"type":62,"tag":307,"props":4324,"children":4325},{"style":932},[4326],{"type":68,"value":4327},"      vx",{"type":62,"tag":307,"props":4329,"children":4330},{"style":926},[4331],{"type":68,"value":1076},{"type":62,"tag":307,"props":4333,"children":4334},{"style":932},[4335],{"type":68,"value":199},{"type":62,"tag":307,"props":4337,"children":4338},{"style":324},[4339],{"type":68,"value":4340},"Math",{"type":62,"tag":307,"props":4342,"children":4343},{"style":926},[4344],{"type":68,"value":848},{"type":62,"tag":307,"props":4346,"children":4347},{"style":1101},[4348],{"type":68,"value":4245},{"type":62,"tag":307,"props":4350,"children":4351},{"style":932},[4352],{"type":68,"value":4250},{"type":62,"tag":307,"props":4354,"children":4355},{"style":926},[4356],{"type":68,"value":4357},"-",{"type":62,"tag":307,"props":4359,"children":4360},{"style":1131},[4361],{"type":68,"value":4362}," 0.5",{"type":62,"tag":307,"props":4364,"children":4365},{"style":932},[4366],{"type":68,"value":4367},") ",{"type":62,"tag":307,"props":4369,"children":4370},{"style":926},[4371],{"type":68,"value":4255},{"type":62,"tag":307,"props":4373,"children":4374},{"style":1131},[4375],{"type":68,"value":4376}," 2",{"type":62,"tag":307,"props":4378,"children":4379},{"style":926},[4380],{"type":68,"value":771},{"type":62,"tag":307,"props":4382,"children":4383},{"class":309,"line":480},[4384,4389,4393,4397,4401,4405,4409,4413,4417,4421,4425,4429],{"type":62,"tag":307,"props":4385,"children":4386},{"style":932},[4387],{"type":68,"value":4388},"      vy",{"type":62,"tag":307,"props":4390,"children":4391},{"style":926},[4392],{"type":68,"value":1076},{"type":62,"tag":307,"props":4394,"children":4395},{"style":932},[4396],{"type":68,"value":199},{"type":62,"tag":307,"props":4398,"children":4399},{"style":324},[4400],{"type":68,"value":4340},{"type":62,"tag":307,"props":4402,"children":4403},{"style":926},[4404],{"type":68,"value":848},{"type":62,"tag":307,"props":4406,"children":4407},{"style":1101},[4408],{"type":68,"value":4245},{"type":62,"tag":307,"props":4410,"children":4411},{"style":932},[4412],{"type":68,"value":4250},{"type":62,"tag":307,"props":4414,"children":4415},{"style":926},[4416],{"type":68,"value":4357},{"type":62,"tag":307,"props":4418,"children":4419},{"style":1131},[4420],{"type":68,"value":4362},{"type":62,"tag":307,"props":4422,"children":4423},{"style":932},[4424],{"type":68,"value":4367},{"type":62,"tag":307,"props":4426,"children":4427},{"style":926},[4428],{"type":68,"value":4255},{"type":62,"tag":307,"props":4430,"children":4431},{"style":1131},[4432],{"type":68,"value":4433}," 2\n",{"type":62,"tag":307,"props":4435,"children":4436},{"class":309,"line":489},[4437,4442],{"type":62,"tag":307,"props":4438,"children":4439},{"style":926},[4440],{"type":68,"value":4441},"    }",{"type":62,"tag":307,"props":4443,"children":4444},{"style":932},[4445],{"type":68,"value":4446},"))\n",{"type":62,"tag":307,"props":4448,"children":4449},{"class":309,"line":497},[4450],{"type":62,"tag":307,"props":4451,"children":4452},{"style":926},[4453],{"type":68,"value":4454},"  };\n",{"type":62,"tag":307,"props":4456,"children":4457},{"class":309,"line":506},[4458],{"type":62,"tag":307,"props":4459,"children":4460},{"style":926},[4461],{"type":68,"value":1198},{"type":62,"tag":307,"props":4463,"children":4464},{"class":309,"line":520},[4465],{"type":62,"tag":307,"props":4466,"children":4467},{"emptyLinePlaceholder":423},[4468],{"type":68,"value":426},{"type":62,"tag":307,"props":4470,"children":4471},{"class":309,"line":534},[4472,4476,4481,4485],{"type":62,"tag":307,"props":4473,"children":4474},{"style":938},[4475],{"type":68,"value":3862},{"type":62,"tag":307,"props":4477,"children":4478},{"style":1101},[4479],{"type":68,"value":4480}," stepSim",{"type":62,"tag":307,"props":4482,"children":4483},{"style":926},[4484],{"type":68,"value":3537},{"type":62,"tag":307,"props":4486,"children":4487},{"style":926},[4488],{"type":68,"value":1062},{"type":62,"tag":307,"props":4490,"children":4491},{"class":309,"line":548},[4492,4496,4500,4504,4508,4513,4517,4522,4526,4531,4535,4540,4545,4549,4554,4558,4562],{"type":62,"tag":307,"props":4493,"children":4494},{"style":938},[4495],{"type":68,"value":3893},{"type":62,"tag":307,"props":4497,"children":4498},{"style":926},[4499],{"type":68,"value":1412},{"type":62,"tag":307,"props":4501,"children":4502},{"style":324},[4503],{"type":68,"value":3898},{"type":62,"tag":307,"props":4505,"children":4506},{"style":926},[4507],{"type":68,"value":1119},{"type":62,"tag":307,"props":4509,"children":4510},{"style":324},[4511],{"type":68,"value":4512}," ctx",{"type":62,"tag":307,"props":4514,"children":4515},{"style":926},[4516],{"type":68,"value":1119},{"type":62,"tag":307,"props":4518,"children":4519},{"style":324},[4520],{"type":68,"value":4521}," particles",{"type":62,"tag":307,"props":4523,"children":4524},{"style":926},[4525],{"type":68,"value":1119},{"type":62,"tag":307,"props":4527,"children":4528},{"style":324},[4529],{"type":68,"value":4530}," speed",{"type":62,"tag":307,"props":4532,"children":4533},{"style":926},[4534],{"type":68,"value":1119},{"type":62,"tag":307,"props":4536,"children":4537},{"style":324},[4538],{"type":68,"value":4539}," running",{"type":62,"tag":307,"props":4541,"children":4542},{"style":926},[4543],{"type":68,"value":4544}," }",{"type":62,"tag":307,"props":4546,"children":4547},{"style":926},[4548],{"type":68,"value":3903},{"type":62,"tag":307,"props":4550,"children":4551},{"style":324},[4552],{"type":68,"value":4553}," window",{"type":62,"tag":307,"props":4555,"children":4556},{"style":926},[4557],{"type":68,"value":848},{"type":62,"tag":307,"props":4559,"children":4560},{"style":324},[4561],{"type":68,"value":3299},{"type":62,"tag":307,"props":4563,"children":4564},{"style":926},[4565],{"type":68,"value":1086},{"type":62,"tag":307,"props":4567,"children":4568},{"class":309,"line":556},[4569,4574,4578,4583,4587,4592,4596,4600,4604,4608,4612,4616,4620,4624,4628,4632,4636],{"type":62,"tag":307,"props":4570,"children":4571},{"style":324},[4572],{"type":68,"value":4573},"  ctx",{"type":62,"tag":307,"props":4575,"children":4576},{"style":926},[4577],{"type":68,"value":848},{"type":62,"tag":307,"props":4579,"children":4580},{"style":1101},[4581],{"type":68,"value":4582},"clearRect",{"type":62,"tag":307,"props":4584,"children":4585},{"style":932},[4586],{"type":68,"value":1109},{"type":62,"tag":307,"props":4588,"children":4589},{"style":1131},[4590],{"type":68,"value":4591},"0",{"type":62,"tag":307,"props":4593,"children":4594},{"style":926},[4595],{"type":68,"value":1119},{"type":62,"tag":307,"props":4597,"children":4598},{"style":1131},[4599],{"type":68,"value":3232},{"type":62,"tag":307,"props":4601,"children":4602},{"style":926},[4603],{"type":68,"value":1119},{"type":62,"tag":307,"props":4605,"children":4606},{"style":324},[4607],{"type":68,"value":3898},{"type":62,"tag":307,"props":4609,"children":4610},{"style":926},[4611],{"type":68,"value":848},{"type":62,"tag":307,"props":4613,"children":4614},{"style":324},[4615],{"type":68,"value":3959},{"type":62,"tag":307,"props":4617,"children":4618},{"style":926},[4619],{"type":68,"value":1119},{"type":62,"tag":307,"props":4621,"children":4622},{"style":324},[4623],{"type":68,"value":3898},{"type":62,"tag":307,"props":4625,"children":4626},{"style":926},[4627],{"type":68,"value":848},{"type":62,"tag":307,"props":4629,"children":4630},{"style":324},[4631],{"type":68,"value":3996},{"type":62,"tag":307,"props":4633,"children":4634},{"style":932},[4635],{"type":68,"value":3745},{"type":62,"tag":307,"props":4637,"children":4638},{"style":926},[4639],{"type":68,"value":1086},{"type":62,"tag":307,"props":4641,"children":4642},{"class":309,"line":565},[4643,4649,4653,4658,4663,4668,4672,4676],{"type":62,"tag":307,"props":4644,"children":4646},{"style":4645},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[4647],{"type":68,"value":4648},"  for",{"type":62,"tag":307,"props":4650,"children":4651},{"style":932},[4652],{"type":68,"value":199},{"type":62,"tag":307,"props":4654,"children":4655},{"style":938},[4656],{"type":68,"value":4657},"const",{"type":62,"tag":307,"props":4659,"children":4660},{"style":324},[4661],{"type":68,"value":4662}," p",{"type":62,"tag":307,"props":4664,"children":4665},{"style":926},[4666],{"type":68,"value":4667}," of",{"type":62,"tag":307,"props":4669,"children":4670},{"style":324},[4671],{"type":68,"value":4521},{"type":62,"tag":307,"props":4673,"children":4674},{"style":932},[4675],{"type":68,"value":4367},{"type":62,"tag":307,"props":4677,"children":4678},{"style":926},[4679],{"type":68,"value":4219},{"type":62,"tag":307,"props":4681,"children":4682},{"class":309,"line":579},[4683,4688,4692,4697,4702,4706,4710,4715,4720,4724,4728,4733],{"type":62,"tag":307,"props":4684,"children":4685},{"style":324},[4686],{"type":68,"value":4687},"    p",{"type":62,"tag":307,"props":4689,"children":4690},{"style":926},[4691],{"type":68,"value":848},{"type":62,"tag":307,"props":4693,"children":4694},{"style":324},[4695],{"type":68,"value":4696},"x",{"type":62,"tag":307,"props":4698,"children":4699},{"style":926},[4700],{"type":68,"value":4701}," +=",{"type":62,"tag":307,"props":4703,"children":4704},{"style":324},[4705],{"type":68,"value":4662},{"type":62,"tag":307,"props":4707,"children":4708},{"style":926},[4709],{"type":68,"value":848},{"type":62,"tag":307,"props":4711,"children":4712},{"style":324},[4713],{"type":68,"value":4714},"vx",{"type":62,"tag":307,"props":4716,"children":4717},{"style":926},[4718],{"type":68,"value":4719}," *",{"type":62,"tag":307,"props":4721,"children":4722},{"style":324},[4723],{"type":68,"value":4530},{"type":62,"tag":307,"props":4725,"children":4726},{"style":926},[4727],{"type":68,"value":4719},{"type":62,"tag":307,"props":4729,"children":4730},{"style":1131},[4731],{"type":68,"value":4732}," 0.2",{"type":62,"tag":307,"props":4734,"children":4735},{"style":926},[4736],{"type":68,"value":1086},{"type":62,"tag":307,"props":4738,"children":4739},{"class":309,"line":593},[4740,4744,4748,4753,4757,4761,4765,4770,4774,4778,4782,4786],{"type":62,"tag":307,"props":4741,"children":4742},{"style":324},[4743],{"type":68,"value":4687},{"type":62,"tag":307,"props":4745,"children":4746},{"style":926},[4747],{"type":68,"value":848},{"type":62,"tag":307,"props":4749,"children":4750},{"style":324},[4751],{"type":68,"value":4752},"y",{"type":62,"tag":307,"props":4754,"children":4755},{"style":926},[4756],{"type":68,"value":4701},{"type":62,"tag":307,"props":4758,"children":4759},{"style":324},[4760],{"type":68,"value":4662},{"type":62,"tag":307,"props":4762,"children":4763},{"style":926},[4764],{"type":68,"value":848},{"type":62,"tag":307,"props":4766,"children":4767},{"style":324},[4768],{"type":68,"value":4769},"vy",{"type":62,"tag":307,"props":4771,"children":4772},{"style":926},[4773],{"type":68,"value":4719},{"type":62,"tag":307,"props":4775,"children":4776},{"style":324},[4777],{"type":68,"value":4530},{"type":62,"tag":307,"props":4779,"children":4780},{"style":926},[4781],{"type":68,"value":4719},{"type":62,"tag":307,"props":4783,"children":4784},{"style":1131},[4785],{"type":68,"value":4732},{"type":62,"tag":307,"props":4787,"children":4788},{"style":926},[4789],{"type":68,"value":1086},{"type":62,"tag":307,"props":4791,"children":4792},{"class":309,"line":607},[4793,4798,4802,4806,4810,4814,4819,4823,4828,4832,4836,4840,4845,4849,4853,4857,4861,4865,4869,4873,4878,4883,4887],{"type":62,"tag":307,"props":4794,"children":4795},{"style":4645},[4796],{"type":68,"value":4797},"    if",{"type":62,"tag":307,"props":4799,"children":4800},{"style":932},[4801],{"type":68,"value":199},{"type":62,"tag":307,"props":4803,"children":4804},{"style":324},[4805],{"type":68,"value":71},{"type":62,"tag":307,"props":4807,"children":4808},{"style":926},[4809],{"type":68,"value":848},{"type":62,"tag":307,"props":4811,"children":4812},{"style":324},[4813],{"type":68,"value":4696},{"type":62,"tag":307,"props":4815,"children":4816},{"style":926},[4817],{"type":68,"value":4818}," \u003C",{"type":62,"tag":307,"props":4820,"children":4821},{"style":1131},[4822],{"type":68,"value":3232},{"type":62,"tag":307,"props":4824,"children":4825},{"style":926},[4826],{"type":68,"value":4827}," ||",{"type":62,"tag":307,"props":4829,"children":4830},{"style":324},[4831],{"type":68,"value":4662},{"type":62,"tag":307,"props":4833,"children":4834},{"style":926},[4835],{"type":68,"value":848},{"type":62,"tag":307,"props":4837,"children":4838},{"style":324},[4839],{"type":68,"value":4696},{"type":62,"tag":307,"props":4841,"children":4842},{"style":926},[4843],{"type":68,"value":4844}," >",{"type":62,"tag":307,"props":4846,"children":4847},{"style":324},[4848],{"type":68,"value":3898},{"type":62,"tag":307,"props":4850,"children":4851},{"style":926},[4852],{"type":68,"value":848},{"type":62,"tag":307,"props":4854,"children":4855},{"style":324},[4856],{"type":68,"value":3959},{"type":62,"tag":307,"props":4858,"children":4859},{"style":932},[4860],{"type":68,"value":4367},{"type":62,"tag":307,"props":4862,"children":4863},{"style":324},[4864],{"type":68,"value":71},{"type":62,"tag":307,"props":4866,"children":4867},{"style":926},[4868],{"type":68,"value":848},{"type":62,"tag":307,"props":4870,"children":4871},{"style":324},[4872],{"type":68,"value":4714},{"type":62,"tag":307,"props":4874,"children":4875},{"style":926},[4876],{"type":68,"value":4877}," *=",{"type":62,"tag":307,"props":4879,"children":4880},{"style":926},[4881],{"type":68,"value":4882}," -",{"type":62,"tag":307,"props":4884,"children":4885},{"style":1131},[4886],{"type":68,"value":3635},{"type":62,"tag":307,"props":4888,"children":4889},{"style":926},[4890],{"type":68,"value":1086},{"type":62,"tag":307,"props":4892,"children":4893},{"class":309,"line":615},[4894,4898,4902,4906,4910,4914,4918,4922,4926,4930,4934,4938,4942,4946,4950,4954,4958,4962,4966,4970,4974,4978,4982],{"type":62,"tag":307,"props":4895,"children":4896},{"style":4645},[4897],{"type":68,"value":4797},{"type":62,"tag":307,"props":4899,"children":4900},{"style":932},[4901],{"type":68,"value":199},{"type":62,"tag":307,"props":4903,"children":4904},{"style":324},[4905],{"type":68,"value":71},{"type":62,"tag":307,"props":4907,"children":4908},{"style":926},[4909],{"type":68,"value":848},{"type":62,"tag":307,"props":4911,"children":4912},{"style":324},[4913],{"type":68,"value":4752},{"type":62,"tag":307,"props":4915,"children":4916},{"style":926},[4917],{"type":68,"value":4818},{"type":62,"tag":307,"props":4919,"children":4920},{"style":1131},[4921],{"type":68,"value":3232},{"type":62,"tag":307,"props":4923,"children":4924},{"style":926},[4925],{"type":68,"value":4827},{"type":62,"tag":307,"props":4927,"children":4928},{"style":324},[4929],{"type":68,"value":4662},{"type":62,"tag":307,"props":4931,"children":4932},{"style":926},[4933],{"type":68,"value":848},{"type":62,"tag":307,"props":4935,"children":4936},{"style":324},[4937],{"type":68,"value":4752},{"type":62,"tag":307,"props":4939,"children":4940},{"style":926},[4941],{"type":68,"value":4844},{"type":62,"tag":307,"props":4943,"children":4944},{"style":324},[4945],{"type":68,"value":3898},{"type":62,"tag":307,"props":4947,"children":4948},{"style":926},[4949],{"type":68,"value":848},{"type":62,"tag":307,"props":4951,"children":4952},{"style":324},[4953],{"type":68,"value":3996},{"type":62,"tag":307,"props":4955,"children":4956},{"style":932},[4957],{"type":68,"value":4367},{"type":62,"tag":307,"props":4959,"children":4960},{"style":324},[4961],{"type":68,"value":71},{"type":62,"tag":307,"props":4963,"children":4964},{"style":926},[4965],{"type":68,"value":848},{"type":62,"tag":307,"props":4967,"children":4968},{"style":324},[4969],{"type":68,"value":4769},{"type":62,"tag":307,"props":4971,"children":4972},{"style":926},[4973],{"type":68,"value":4877},{"type":62,"tag":307,"props":4975,"children":4976},{"style":926},[4977],{"type":68,"value":4882},{"type":62,"tag":307,"props":4979,"children":4980},{"style":1131},[4981],{"type":68,"value":3635},{"type":62,"tag":307,"props":4983,"children":4984},{"style":926},[4985],{"type":68,"value":1086},{"type":62,"tag":307,"props":4987,"children":4988},{"class":309,"line":624},[4989,4993,4997,5002,5006],{"type":62,"tag":307,"props":4990,"children":4991},{"style":324},[4992],{"type":68,"value":4061},{"type":62,"tag":307,"props":4994,"children":4995},{"style":926},[4996],{"type":68,"value":848},{"type":62,"tag":307,"props":4998,"children":4999},{"style":1101},[5000],{"type":68,"value":5001},"beginPath",{"type":62,"tag":307,"props":5003,"children":5004},{"style":932},[5005],{"type":68,"value":3537},{"type":62,"tag":307,"props":5007,"children":5008},{"style":926},[5009],{"type":68,"value":1086},{"type":62,"tag":307,"props":5011,"children":5012},{"class":309,"line":638},[5013,5017,5021,5026,5030,5034,5038,5042,5046,5050,5054,5058,5062,5067,5071,5075,5079,5083,5087,5092,5096,5100,5104],{"type":62,"tag":307,"props":5014,"children":5015},{"style":324},[5016],{"type":68,"value":4061},{"type":62,"tag":307,"props":5018,"children":5019},{"style":926},[5020],{"type":68,"value":848},{"type":62,"tag":307,"props":5022,"children":5023},{"style":1101},[5024],{"type":68,"value":5025},"arc",{"type":62,"tag":307,"props":5027,"children":5028},{"style":932},[5029],{"type":68,"value":1109},{"type":62,"tag":307,"props":5031,"children":5032},{"style":324},[5033],{"type":68,"value":71},{"type":62,"tag":307,"props":5035,"children":5036},{"style":926},[5037],{"type":68,"value":848},{"type":62,"tag":307,"props":5039,"children":5040},{"style":324},[5041],{"type":68,"value":4696},{"type":62,"tag":307,"props":5043,"children":5044},{"style":926},[5045],{"type":68,"value":1119},{"type":62,"tag":307,"props":5047,"children":5048},{"style":324},[5049],{"type":68,"value":4662},{"type":62,"tag":307,"props":5051,"children":5052},{"style":926},[5053],{"type":68,"value":848},{"type":62,"tag":307,"props":5055,"children":5056},{"style":324},[5057],{"type":68,"value":4752},{"type":62,"tag":307,"props":5059,"children":5060},{"style":926},[5061],{"type":68,"value":1119},{"type":62,"tag":307,"props":5063,"children":5064},{"style":1131},[5065],{"type":68,"value":5066}," 4",{"type":62,"tag":307,"props":5068,"children":5069},{"style":926},[5070],{"type":68,"value":1119},{"type":62,"tag":307,"props":5072,"children":5073},{"style":1131},[5074],{"type":68,"value":3232},{"type":62,"tag":307,"props":5076,"children":5077},{"style":926},[5078],{"type":68,"value":1119},{"type":62,"tag":307,"props":5080,"children":5081},{"style":324},[5082],{"type":68,"value":4236},{"type":62,"tag":307,"props":5084,"children":5085},{"style":926},[5086],{"type":68,"value":848},{"type":62,"tag":307,"props":5088,"children":5089},{"style":324},[5090],{"type":68,"value":5091},"PI",{"type":62,"tag":307,"props":5093,"children":5094},{"style":926},[5095],{"type":68,"value":4719},{"type":62,"tag":307,"props":5097,"children":5098},{"style":1131},[5099],{"type":68,"value":4376},{"type":62,"tag":307,"props":5101,"children":5102},{"style":932},[5103],{"type":68,"value":3745},{"type":62,"tag":307,"props":5105,"children":5106},{"style":926},[5107],{"type":68,"value":1086},{"type":62,"tag":307,"props":5109,"children":5110},{"class":309,"line":652},[5111,5115,5119,5124,5128,5133,5138,5142],{"type":62,"tag":307,"props":5112,"children":5113},{"style":324},[5114],{"type":68,"value":4061},{"type":62,"tag":307,"props":5116,"children":5117},{"style":926},[5118],{"type":68,"value":848},{"type":62,"tag":307,"props":5120,"children":5121},{"style":324},[5122],{"type":68,"value":5123},"fillStyle",{"type":62,"tag":307,"props":5125,"children":5126},{"style":926},[5127],{"type":68,"value":3903},{"type":62,"tag":307,"props":5129,"children":5130},{"style":926},[5131],{"type":68,"value":5132}," '",{"type":62,"tag":307,"props":5134,"children":5135},{"style":954},[5136],{"type":68,"value":5137},"#534AB7",{"type":62,"tag":307,"props":5139,"children":5140},{"style":926},[5141],{"type":68,"value":3926},{"type":62,"tag":307,"props":5143,"children":5144},{"style":926},[5145],{"type":68,"value":1086},{"type":62,"tag":307,"props":5147,"children":5148},{"class":309,"line":2448},[5149,5153,5157,5162,5166],{"type":62,"tag":307,"props":5150,"children":5151},{"style":324},[5152],{"type":68,"value":4061},{"type":62,"tag":307,"props":5154,"children":5155},{"style":926},[5156],{"type":68,"value":848},{"type":62,"tag":307,"props":5158,"children":5159},{"style":1101},[5160],{"type":68,"value":5161},"fill",{"type":62,"tag":307,"props":5163,"children":5164},{"style":932},[5165],{"type":68,"value":3537},{"type":62,"tag":307,"props":5167,"children":5168},{"style":926},[5169],{"type":68,"value":1086},{"type":62,"tag":307,"props":5171,"children":5172},{"class":309,"line":2464},[5173],{"type":62,"tag":307,"props":5174,"children":5175},{"style":926},[5176],{"type":68,"value":5177},"  }\n",{"type":62,"tag":307,"props":5179,"children":5180},{"class":309,"line":2480},[5181,5186,5190,5195,5199,5204,5208,5213,5217],{"type":62,"tag":307,"props":5182,"children":5183},{"style":4645},[5184],{"type":68,"value":5185},"  if",{"type":62,"tag":307,"props":5187,"children":5188},{"style":932},[5189],{"type":68,"value":199},{"type":62,"tag":307,"props":5191,"children":5192},{"style":324},[5193],{"type":68,"value":5194},"running",{"type":62,"tag":307,"props":5196,"children":5197},{"style":932},[5198],{"type":68,"value":4367},{"type":62,"tag":307,"props":5200,"children":5201},{"style":1101},[5202],{"type":68,"value":5203},"requestAnimationFrame",{"type":62,"tag":307,"props":5205,"children":5206},{"style":932},[5207],{"type":68,"value":1109},{"type":62,"tag":307,"props":5209,"children":5210},{"style":324},[5211],{"type":68,"value":5212},"stepSim",{"type":62,"tag":307,"props":5214,"children":5215},{"style":932},[5216],{"type":68,"value":3745},{"type":62,"tag":307,"props":5218,"children":5219},{"style":926},[5220],{"type":68,"value":1086},{"type":62,"tag":307,"props":5222,"children":5224},{"class":309,"line":5223},33,[5225],{"type":62,"tag":307,"props":5226,"children":5227},{"style":926},[5228],{"type":68,"value":1198},{"type":62,"tag":307,"props":5230,"children":5232},{"class":309,"line":5231},34,[5233],{"type":62,"tag":307,"props":5234,"children":5235},{"emptyLinePlaceholder":423},[5236],{"type":68,"value":426},{"type":62,"tag":307,"props":5238,"children":5240},{"class":309,"line":5239},35,[5241,5245,5250,5254,5258,5262,5266,5270,5274,5278,5282,5286,5290,5294,5298],{"type":62,"tag":307,"props":5242,"children":5243},{"style":938},[5244],{"type":68,"value":3862},{"type":62,"tag":307,"props":5246,"children":5247},{"style":1101},[5248],{"type":68,"value":5249}," setSimSpeed",{"type":62,"tag":307,"props":5251,"children":5252},{"style":926},[5253],{"type":68,"value":1109},{"type":62,"tag":307,"props":5255,"children":5256},{"style":3874},[5257],{"type":68,"value":3740},{"type":62,"tag":307,"props":5259,"children":5260},{"style":926},[5261],{"type":68,"value":3745},{"type":62,"tag":307,"props":5263,"children":5264},{"style":926},[5265],{"type":68,"value":1412},{"type":62,"tag":307,"props":5267,"children":5268},{"style":324},[5269],{"type":68,"value":4553},{"type":62,"tag":307,"props":5271,"children":5272},{"style":926},[5273],{"type":68,"value":848},{"type":62,"tag":307,"props":5275,"children":5276},{"style":324},[5277],{"type":68,"value":3299},{"type":62,"tag":307,"props":5279,"children":5280},{"style":926},[5281],{"type":68,"value":848},{"type":62,"tag":307,"props":5283,"children":5284},{"style":324},[5285],{"type":68,"value":3700},{"type":62,"tag":307,"props":5287,"children":5288},{"style":926},[5289],{"type":68,"value":3903},{"type":62,"tag":307,"props":5291,"children":5292},{"style":324},[5293],{"type":68,"value":3666},{"type":62,"tag":307,"props":5295,"children":5296},{"style":926},[5297],{"type":68,"value":1431},{"type":62,"tag":307,"props":5299,"children":5300},{"style":926},[5301],{"type":68,"value":1454},{"type":62,"tag":307,"props":5303,"children":5305},{"class":309,"line":5304},36,[5306],{"type":62,"tag":307,"props":5307,"children":5308},{"emptyLinePlaceholder":423},[5309],{"type":68,"value":426},{"type":62,"tag":307,"props":5311,"children":5313},{"class":309,"line":5312},37,[5314,5318,5323,5327],{"type":62,"tag":307,"props":5315,"children":5316},{"style":938},[5317],{"type":68,"value":3862},{"type":62,"tag":307,"props":5319,"children":5320},{"style":1101},[5321],{"type":68,"value":5322}," toggleSim",{"type":62,"tag":307,"props":5324,"children":5325},{"style":926},[5326],{"type":68,"value":3537},{"type":62,"tag":307,"props":5328,"children":5329},{"style":926},[5330],{"type":68,"value":1062},{"type":62,"tag":307,"props":5332,"children":5334},{"class":309,"line":5333},38,[5335,5339,5343,5347,5351,5355,5359,5364,5369,5373,5377,5381,5385],{"type":62,"tag":307,"props":5336,"children":5337},{"style":324},[5338],{"type":68,"value":4025},{"type":62,"tag":307,"props":5340,"children":5341},{"style":926},[5342],{"type":68,"value":848},{"type":62,"tag":307,"props":5344,"children":5345},{"style":324},[5346],{"type":68,"value":3299},{"type":62,"tag":307,"props":5348,"children":5349},{"style":926},[5350],{"type":68,"value":848},{"type":62,"tag":307,"props":5352,"children":5353},{"style":324},[5354],{"type":68,"value":5194},{"type":62,"tag":307,"props":5356,"children":5357},{"style":926},[5358],{"type":68,"value":3903},{"type":62,"tag":307,"props":5360,"children":5361},{"style":926},[5362],{"type":68,"value":5363}," !",{"type":62,"tag":307,"props":5365,"children":5366},{"style":324},[5367],{"type":68,"value":5368},"window",{"type":62,"tag":307,"props":5370,"children":5371},{"style":926},[5372],{"type":68,"value":848},{"type":62,"tag":307,"props":5374,"children":5375},{"style":324},[5376],{"type":68,"value":3299},{"type":62,"tag":307,"props":5378,"children":5379},{"style":926},[5380],{"type":68,"value":848},{"type":62,"tag":307,"props":5382,"children":5383},{"style":324},[5384],{"type":68,"value":5194},{"type":62,"tag":307,"props":5386,"children":5387},{"style":926},[5388],{"type":68,"value":1086},{"type":62,"tag":307,"props":5390,"children":5392},{"class":309,"line":5391},39,[5393,5397,5401,5405,5409,5413,5417,5421,5425,5429,5433],{"type":62,"tag":307,"props":5394,"children":5395},{"style":4645},[5396],{"type":68,"value":5185},{"type":62,"tag":307,"props":5398,"children":5399},{"style":932},[5400],{"type":68,"value":199},{"type":62,"tag":307,"props":5402,"children":5403},{"style":324},[5404],{"type":68,"value":5368},{"type":62,"tag":307,"props":5406,"children":5407},{"style":926},[5408],{"type":68,"value":848},{"type":62,"tag":307,"props":5410,"children":5411},{"style":324},[5412],{"type":68,"value":3299},{"type":62,"tag":307,"props":5414,"children":5415},{"style":926},[5416],{"type":68,"value":848},{"type":62,"tag":307,"props":5418,"children":5419},{"style":324},[5420],{"type":68,"value":5194},{"type":62,"tag":307,"props":5422,"children":5423},{"style":932},[5424],{"type":68,"value":4367},{"type":62,"tag":307,"props":5426,"children":5427},{"style":1101},[5428],{"type":68,"value":5212},{"type":62,"tag":307,"props":5430,"children":5431},{"style":932},[5432],{"type":68,"value":3537},{"type":62,"tag":307,"props":5434,"children":5435},{"style":926},[5436],{"type":68,"value":1086},{"type":62,"tag":307,"props":5438,"children":5440},{"class":309,"line":5439},40,[5441],{"type":62,"tag":307,"props":5442,"children":5443},{"style":926},[5444],{"type":68,"value":1198},{"type":62,"tag":307,"props":5446,"children":5448},{"class":309,"line":5447},41,[5449],{"type":62,"tag":307,"props":5450,"children":5451},{"emptyLinePlaceholder":423},[5452],{"type":68,"value":426},{"type":62,"tag":307,"props":5454,"children":5456},{"class":309,"line":5455},42,[5457,5461,5466,5470],{"type":62,"tag":307,"props":5458,"children":5459},{"style":938},[5460],{"type":68,"value":3862},{"type":62,"tag":307,"props":5462,"children":5463},{"style":1101},[5464],{"type":68,"value":5465}," resetSim",{"type":62,"tag":307,"props":5467,"children":5468},{"style":926},[5469],{"type":68,"value":3537},{"type":62,"tag":307,"props":5471,"children":5472},{"style":926},[5473],{"type":68,"value":1062},{"type":62,"tag":307,"props":5475,"children":5477},{"class":309,"line":5476},43,[5478,5482,5487,5491,5495,5499,5503,5507,5511],{"type":62,"tag":307,"props":5479,"children":5480},{"style":938},[5481],{"type":68,"value":3893},{"type":62,"tag":307,"props":5483,"children":5484},{"style":324},[5485],{"type":68,"value":5486}," wasRunning",{"type":62,"tag":307,"props":5488,"children":5489},{"style":926},[5490],{"type":68,"value":3903},{"type":62,"tag":307,"props":5492,"children":5493},{"style":324},[5494],{"type":68,"value":4553},{"type":62,"tag":307,"props":5496,"children":5497},{"style":926},[5498],{"type":68,"value":848},{"type":62,"tag":307,"props":5500,"children":5501},{"style":324},[5502],{"type":68,"value":3299},{"type":62,"tag":307,"props":5504,"children":5505},{"style":926},[5506],{"type":68,"value":848},{"type":62,"tag":307,"props":5508,"children":5509},{"style":324},[5510],{"type":68,"value":5194},{"type":62,"tag":307,"props":5512,"children":5513},{"style":926},[5514],{"type":68,"value":1086},{"type":62,"tag":307,"props":5516,"children":5518},{"class":309,"line":5517},44,[5519,5524,5528,5532,5536,5540,5544,5549,5553,5558,5562],{"type":62,"tag":307,"props":5520,"children":5521},{"style":1101},[5522],{"type":68,"value":5523},"  initSim",{"type":62,"tag":307,"props":5525,"children":5526},{"style":932},[5527],{"type":68,"value":1109},{"type":62,"tag":307,"props":5529,"children":5530},{"style":324},[5531],{"type":68,"value":5368},{"type":62,"tag":307,"props":5533,"children":5534},{"style":926},[5535],{"type":68,"value":848},{"type":62,"tag":307,"props":5537,"children":5538},{"style":324},[5539],{"type":68,"value":3299},{"type":62,"tag":307,"props":5541,"children":5542},{"style":926},[5543],{"type":68,"value":848},{"type":62,"tag":307,"props":5545,"children":5546},{"style":324},[5547],{"type":68,"value":5548},"particles",{"type":62,"tag":307,"props":5550,"children":5551},{"style":926},[5552],{"type":68,"value":848},{"type":62,"tag":307,"props":5554,"children":5555},{"style":324},[5556],{"type":68,"value":5557},"length",{"type":62,"tag":307,"props":5559,"children":5560},{"style":932},[5561],{"type":68,"value":3745},{"type":62,"tag":307,"props":5563,"children":5564},{"style":926},[5565],{"type":68,"value":1086},{"type":62,"tag":307,"props":5567,"children":5569},{"class":309,"line":5568},45,[5570,5574,5578,5583,5588,5592,5596,5600],{"type":62,"tag":307,"props":5571,"children":5572},{"style":4645},[5573],{"type":68,"value":5185},{"type":62,"tag":307,"props":5575,"children":5576},{"style":932},[5577],{"type":68,"value":199},{"type":62,"tag":307,"props":5579,"children":5580},{"style":926},[5581],{"type":68,"value":5582},"!",{"type":62,"tag":307,"props":5584,"children":5585},{"style":324},[5586],{"type":68,"value":5587},"wasRunning",{"type":62,"tag":307,"props":5589,"children":5590},{"style":932},[5591],{"type":68,"value":4367},{"type":62,"tag":307,"props":5593,"children":5594},{"style":1101},[5595],{"type":68,"value":5212},{"type":62,"tag":307,"props":5597,"children":5598},{"style":932},[5599],{"type":68,"value":3537},{"type":62,"tag":307,"props":5601,"children":5602},{"style":926},[5603],{"type":68,"value":1086},{"type":62,"tag":307,"props":5605,"children":5607},{"class":309,"line":5606},46,[5608],{"type":62,"tag":307,"props":5609,"children":5610},{"style":926},[5611],{"type":68,"value":1198},{"type":62,"tag":71,"props":5613,"children":5614},{},[5615],{"type":68,"value":5616},"jsExpressions parameter:",{"type":62,"tag":297,"props":5618,"children":5620},{"className":3848,"code":5619,"language":3850,"meta":301,"style":301},"initSim(50);\nstepSim();\n",[5621],{"type":62,"tag":93,"props":5622,"children":5623},{"__ignoreMap":301},[5624,5649],{"type":62,"tag":307,"props":5625,"children":5626},{"class":309,"line":310},[5627,5632,5636,5641,5645],{"type":62,"tag":307,"props":5628,"children":5629},{"style":1101},[5630],{"type":68,"value":5631},"initSim",{"type":62,"tag":307,"props":5633,"children":5634},{"style":324},[5635],{"type":68,"value":1109},{"type":62,"tag":307,"props":5637,"children":5638},{"style":1131},[5639],{"type":68,"value":5640},"50",{"type":62,"tag":307,"props":5642,"children":5643},{"style":324},[5644],{"type":68,"value":3745},{"type":62,"tag":307,"props":5646,"children":5647},{"style":926},[5648],{"type":68,"value":1086},{"type":62,"tag":307,"props":5650,"children":5651},{"class":309,"line":320},[5652,5656,5660],{"type":62,"tag":307,"props":5653,"children":5654},{"style":1101},[5655],{"type":68,"value":5212},{"type":62,"tag":307,"props":5657,"children":5658},{"style":324},[5659],{"type":68,"value":3537},{"type":62,"tag":307,"props":5661,"children":5662},{"style":926},[5663],{"type":68,"value":1086},{"type":62,"tag":290,"props":5665,"children":5667},{"id":5666},"math-visualizations",[5668],{"type":68,"value":5669},"Math Visualizations",{"type":62,"tag":71,"props":5671,"children":5672},{},[5673],{"type":68,"value":5674},"For plotting functions, showing geometric relationships, or exploring equations.",{"type":62,"tag":71,"props":5676,"children":5677},{},[5678],{"type":62,"tag":668,"props":5679,"children":5680},{},[5681],{"type":68,"value":5682},"Pattern: Function Plotter with SVG",{"type":62,"tag":71,"props":5684,"children":5685},{},[5686],{"type":68,"value":1037},{"type":62,"tag":297,"props":5688,"children":5690},{"className":299,"code":5689,"language":136,"meta":301,"style":301},".plot-controls {\n  display: flex; gap: 16px; align-items: center;\n  margin: 12px 0; font-size: 13px;\n  color: var(--color-text-secondary);\n}\n.plot-controls input[type=\"number\"] { width: 60px; }\n.plot-controls input[type=\"range\"] { flex: 1; }\n",[5691],{"type":62,"tag":93,"props":5692,"children":5693},{"__ignoreMap":301},[5694,5710,5761,5800,5827,5834,5908],{"type":62,"tag":307,"props":5695,"children":5696},{"class":309,"line":310},[5697,5701,5706],{"type":62,"tag":307,"props":5698,"children":5699},{"style":926},[5700],{"type":68,"value":848},{"type":62,"tag":307,"props":5702,"children":5703},{"style":1054},[5704],{"type":68,"value":5705},"plot-controls",{"type":62,"tag":307,"props":5707,"children":5708},{"style":926},[5709],{"type":68,"value":1062},{"type":62,"tag":307,"props":5711,"children":5712},{"class":309,"line":320},[5713,5717,5721,5725,5729,5733,5737,5741,5745,5749,5753,5757],{"type":62,"tag":307,"props":5714,"children":5715},{"style":1068},[5716],{"type":68,"value":1071},{"type":62,"tag":307,"props":5718,"children":5719},{"style":926},[5720],{"type":68,"value":1076},{"type":62,"tag":307,"props":5722,"children":5723},{"style":324},[5724],{"type":68,"value":3171},{"type":62,"tag":307,"props":5726,"children":5727},{"style":926},[5728],{"type":68,"value":1431},{"type":62,"tag":307,"props":5730,"children":5731},{"style":1068},[5732],{"type":68,"value":3198},{"type":62,"tag":307,"props":5734,"children":5735},{"style":926},[5736],{"type":68,"value":1076},{"type":62,"tag":307,"props":5738,"children":5739},{"style":1131},[5740],{"type":68,"value":3207},{"type":62,"tag":307,"props":5742,"children":5743},{"style":926},[5744],{"type":68,"value":1431},{"type":62,"tag":307,"props":5746,"children":5747},{"style":1068},[5748],{"type":68,"value":3180},{"type":62,"tag":307,"props":5750,"children":5751},{"style":926},[5752],{"type":68,"value":1076},{"type":62,"tag":307,"props":5754,"children":5755},{"style":324},[5756],{"type":68,"value":3189},{"type":62,"tag":307,"props":5758,"children":5759},{"style":926},[5760],{"type":68,"value":1086},{"type":62,"tag":307,"props":5762,"children":5763},{"class":309,"line":335},[5764,5768,5772,5776,5780,5784,5788,5792,5796],{"type":62,"tag":307,"props":5765,"children":5766},{"style":1068},[5767],{"type":68,"value":3219},{"type":62,"tag":307,"props":5769,"children":5770},{"style":926},[5771],{"type":68,"value":1076},{"type":62,"tag":307,"props":5773,"children":5774},{"style":1131},[5775],{"type":68,"value":1165},{"type":62,"tag":307,"props":5777,"children":5778},{"style":1131},[5779],{"type":68,"value":3232},{"type":62,"tag":307,"props":5781,"children":5782},{"style":926},[5783],{"type":68,"value":1431},{"type":62,"tag":307,"props":5785,"children":5786},{"style":1068},[5787],{"type":68,"value":1417},{"type":62,"tag":307,"props":5789,"children":5790},{"style":926},[5791],{"type":68,"value":1076},{"type":62,"tag":307,"props":5793,"children":5794},{"style":1131},[5795],{"type":68,"value":1335},{"type":62,"tag":307,"props":5797,"children":5798},{"style":926},[5799],{"type":68,"value":1086},{"type":62,"tag":307,"props":5801,"children":5802},{"class":309,"line":349},[5803,5807,5811,5815,5819,5823],{"type":62,"tag":307,"props":5804,"children":5805},{"style":1068},[5806],{"type":68,"value":1347},{"type":62,"tag":307,"props":5808,"children":5809},{"style":926},[5810],{"type":68,"value":1076},{"type":62,"tag":307,"props":5812,"children":5813},{"style":1101},[5814],{"type":68,"value":1231},{"type":62,"tag":307,"props":5816,"children":5817},{"style":926},[5818],{"type":68,"value":1109},{"type":62,"tag":307,"props":5820,"children":5821},{"style":324},[5822],{"type":68,"value":1364},{"type":62,"tag":307,"props":5824,"children":5825},{"style":926},[5826],{"type":68,"value":1245},{"type":62,"tag":307,"props":5828,"children":5829},{"class":309,"line":363},[5830],{"type":62,"tag":307,"props":5831,"children":5832},{"style":926},[5833],{"type":68,"value":1198},{"type":62,"tag":307,"props":5835,"children":5836},{"class":309,"line":377},[5837,5841,5845,5850,5855,5860,5864,5868,5873,5877,5882,5886,5891,5895,5900,5904],{"type":62,"tag":307,"props":5838,"children":5839},{"style":926},[5840],{"type":68,"value":848},{"type":62,"tag":307,"props":5842,"children":5843},{"style":1054},[5844],{"type":68,"value":5705},{"type":62,"tag":307,"props":5846,"children":5847},{"style":1054},[5848],{"type":68,"value":5849}," input",{"type":62,"tag":307,"props":5851,"children":5852},{"style":926},[5853],{"type":68,"value":5854},"[",{"type":62,"tag":307,"props":5856,"children":5857},{"style":938},[5858],{"type":68,"value":5859},"type",{"type":62,"tag":307,"props":5861,"children":5862},{"style":926},[5863],{"type":68,"value":946},{"type":62,"tag":307,"props":5865,"children":5866},{"style":926},[5867],{"type":68,"value":951},{"type":62,"tag":307,"props":5869,"children":5870},{"style":954},[5871],{"type":68,"value":5872},"number",{"type":62,"tag":307,"props":5874,"children":5875},{"style":926},[5876],{"type":68,"value":951},{"type":62,"tag":307,"props":5878,"children":5879},{"style":926},[5880],{"type":68,"value":5881},"]",{"type":62,"tag":307,"props":5883,"children":5884},{"style":926},[5885],{"type":68,"value":1412},{"type":62,"tag":307,"props":5887,"children":5888},{"style":1068},[5889],{"type":68,"value":5890}," width",{"type":62,"tag":307,"props":5892,"children":5893},{"style":926},[5894],{"type":68,"value":1076},{"type":62,"tag":307,"props":5896,"children":5897},{"style":1131},[5898],{"type":68,"value":5899}," 60px",{"type":62,"tag":307,"props":5901,"children":5902},{"style":926},[5903],{"type":68,"value":1431},{"type":62,"tag":307,"props":5905,"children":5906},{"style":926},[5907],{"type":68,"value":1454},{"type":62,"tag":307,"props":5909,"children":5910},{"class":309,"line":391},[5911,5915,5919,5923,5927,5931,5935,5939,5943,5947,5951,5955,5959,5963,5968,5972],{"type":62,"tag":307,"props":5912,"children":5913},{"style":926},[5914],{"type":68,"value":848},{"type":62,"tag":307,"props":5916,"children":5917},{"style":1054},[5918],{"type":68,"value":5705},{"type":62,"tag":307,"props":5920,"children":5921},{"style":1054},[5922],{"type":68,"value":5849},{"type":62,"tag":307,"props":5924,"children":5925},{"style":926},[5926],{"type":68,"value":5854},{"type":62,"tag":307,"props":5928,"children":5929},{"style":938},[5930],{"type":68,"value":5859},{"type":62,"tag":307,"props":5932,"children":5933},{"style":926},[5934],{"type":68,"value":946},{"type":62,"tag":307,"props":5936,"children":5937},{"style":926},[5938],{"type":68,"value":951},{"type":62,"tag":307,"props":5940,"children":5941},{"style":954},[5942],{"type":68,"value":3613},{"type":62,"tag":307,"props":5944,"children":5945},{"style":926},[5946],{"type":68,"value":951},{"type":62,"tag":307,"props":5948,"children":5949},{"style":926},[5950],{"type":68,"value":5881},{"type":62,"tag":307,"props":5952,"children":5953},{"style":926},[5954],{"type":68,"value":1412},{"type":62,"tag":307,"props":5956,"children":5957},{"style":1068},[5958],{"type":68,"value":3171},{"type":62,"tag":307,"props":5960,"children":5961},{"style":926},[5962],{"type":68,"value":1076},{"type":62,"tag":307,"props":5964,"children":5965},{"style":1131},[5966],{"type":68,"value":5967}," 1",{"type":62,"tag":307,"props":5969,"children":5970},{"style":926},[5971],{"type":68,"value":1431},{"type":62,"tag":307,"props":5973,"children":5974},{"style":926},[5975],{"type":68,"value":1454},{"type":62,"tag":71,"props":5977,"children":5978},{},[5979],{"type":68,"value":1459},{"type":62,"tag":297,"props":5981,"children":5983},{"className":915,"code":5982,"language":147,"meta":301,"style":301},"\u003Csvg id=\"plot\" width=\"100%\" viewBox=\"0 0 680 400\">\n  \u003C!-- Grid -->\n  \u003Cline x1=\"60\" y1=\"200\" x2=\"640\" y2=\"200\"\n        stroke=\"var(--color-border-tertiary)\" stroke-width=\"0.5\"\u002F>\n  \u003Cline x1=\"340\" y1=\"20\" x2=\"340\" y2=\"380\"\n        stroke=\"var(--color-border-tertiary)\" stroke-width=\"0.5\"\u002F>\n  \u003C!-- Axes labels -->\n  \u003Ctext x=\"645\" y=\"196\" font-size=\"12\"\n        fill=\"var(--color-text-tertiary)\">x\u003C\u002Ftext>\n  \u003Ctext x=\"345\" y=\"16\" font-size=\"12\"\n        fill=\"var(--color-text-tertiary)\">y\u003C\u002Ftext>\n  \u003C!-- Function path drawn by JS -->\n  \u003Cpath id=\"fn-path\" fill=\"none\" stroke=\"#534AB7\" stroke-width=\"2\"\u002F>\n\u003C\u002Fsvg>\n\n\u003Cdiv class=\"plot-controls\">\n  \u003Clabel>f(x) = sin(\n    \u003Cinput type=\"number\" id=\"freq\" value=\"1\" min=\"0.1\" max=\"10\" step=\"0.1\"\n           oninput=\"plotFn()\">x)\n  \u003C\u002Flabel>\n  \u003Clabel>Amplitude\n    \u003Cinput type=\"range\" id=\"amp\" min=\"0.1\" max=\"3\" value=\"1\" step=\"0.1\"\n           oninput=\"plotFn()\">\n  \u003C\u002Flabel>\n\u003C\u002Fdiv>\n",[5984],{"type":62,"tag":93,"props":5985,"children":5986},{"__ignoreMap":301},[5987,6067,6075,6173,6225,6319,6366,6374,6450,6495,6568,6611,6619,6720,6735,6742,6777,6797,6931,6968,6983,7003,7136,7167,7182],{"type":62,"tag":307,"props":5988,"children":5989},{"class":309,"line":310},[5990,5994,5999,6003,6007,6011,6016,6020,6024,6028,6032,6037,6041,6046,6050,6054,6059,6063],{"type":62,"tag":307,"props":5991,"children":5992},{"style":926},[5993],{"type":68,"value":929},{"type":62,"tag":307,"props":5995,"children":5996},{"style":932},[5997],{"type":68,"value":5998},"svg",{"type":62,"tag":307,"props":6000,"children":6001},{"style":938},[6002],{"type":68,"value":3431},{"type":62,"tag":307,"props":6004,"children":6005},{"style":926},[6006],{"type":68,"value":946},{"type":62,"tag":307,"props":6008,"children":6009},{"style":926},[6010],{"type":68,"value":951},{"type":62,"tag":307,"props":6012,"children":6013},{"style":954},[6014],{"type":68,"value":6015},"plot",{"type":62,"tag":307,"props":6017,"children":6018},{"style":926},[6019],{"type":68,"value":951},{"type":62,"tag":307,"props":6021,"children":6022},{"style":938},[6023],{"type":68,"value":5890},{"type":62,"tag":307,"props":6025,"children":6026},{"style":926},[6027],{"type":68,"value":946},{"type":62,"tag":307,"props":6029,"children":6030},{"style":926},[6031],{"type":68,"value":951},{"type":62,"tag":307,"props":6033,"children":6034},{"style":954},[6035],{"type":68,"value":6036},"100%",{"type":62,"tag":307,"props":6038,"children":6039},{"style":926},[6040],{"type":68,"value":951},{"type":62,"tag":307,"props":6042,"children":6043},{"style":938},[6044],{"type":68,"value":6045}," viewBox",{"type":62,"tag":307,"props":6047,"children":6048},{"style":926},[6049],{"type":68,"value":946},{"type":62,"tag":307,"props":6051,"children":6052},{"style":926},[6053],{"type":68,"value":951},{"type":62,"tag":307,"props":6055,"children":6056},{"style":954},[6057],{"type":68,"value":6058},"0 0 680 400",{"type":62,"tag":307,"props":6060,"children":6061},{"style":926},[6062],{"type":68,"value":951},{"type":62,"tag":307,"props":6064,"children":6065},{"style":926},[6066],{"type":68,"value":982},{"type":62,"tag":307,"props":6068,"children":6069},{"class":309,"line":320},[6070],{"type":62,"tag":307,"props":6071,"children":6072},{"style":314},[6073],{"type":68,"value":6074},"  \u003C!-- Grid -->\n",{"type":62,"tag":307,"props":6076,"children":6077},{"class":309,"line":335},[6078,6082,6086,6091,6095,6099,6104,6108,6113,6117,6121,6126,6130,6135,6139,6143,6148,6152,6157,6161,6165,6169],{"type":62,"tag":307,"props":6079,"children":6080},{"style":926},[6081],{"type":68,"value":1510},{"type":62,"tag":307,"props":6083,"children":6084},{"style":932},[6085],{"type":68,"value":309},{"type":62,"tag":307,"props":6087,"children":6088},{"style":938},[6089],{"type":68,"value":6090}," x1",{"type":62,"tag":307,"props":6092,"children":6093},{"style":926},[6094],{"type":68,"value":946},{"type":62,"tag":307,"props":6096,"children":6097},{"style":926},[6098],{"type":68,"value":951},{"type":62,"tag":307,"props":6100,"children":6101},{"style":954},[6102],{"type":68,"value":6103},"60",{"type":62,"tag":307,"props":6105,"children":6106},{"style":926},[6107],{"type":68,"value":951},{"type":62,"tag":307,"props":6109,"children":6110},{"style":938},[6111],{"type":68,"value":6112}," y1",{"type":62,"tag":307,"props":6114,"children":6115},{"style":926},[6116],{"type":68,"value":946},{"type":62,"tag":307,"props":6118,"children":6119},{"style":926},[6120],{"type":68,"value":951},{"type":62,"tag":307,"props":6122,"children":6123},{"style":954},[6124],{"type":68,"value":6125},"200",{"type":62,"tag":307,"props":6127,"children":6128},{"style":926},[6129],{"type":68,"value":951},{"type":62,"tag":307,"props":6131,"children":6132},{"style":938},[6133],{"type":68,"value":6134}," x2",{"type":62,"tag":307,"props":6136,"children":6137},{"style":926},[6138],{"type":68,"value":946},{"type":62,"tag":307,"props":6140,"children":6141},{"style":926},[6142],{"type":68,"value":951},{"type":62,"tag":307,"props":6144,"children":6145},{"style":954},[6146],{"type":68,"value":6147},"640",{"type":62,"tag":307,"props":6149,"children":6150},{"style":926},[6151],{"type":68,"value":951},{"type":62,"tag":307,"props":6153,"children":6154},{"style":938},[6155],{"type":68,"value":6156}," y2",{"type":62,"tag":307,"props":6158,"children":6159},{"style":926},[6160],{"type":68,"value":946},{"type":62,"tag":307,"props":6162,"children":6163},{"style":926},[6164],{"type":68,"value":951},{"type":62,"tag":307,"props":6166,"children":6167},{"style":954},[6168],{"type":68,"value":6125},{"type":62,"tag":307,"props":6170,"children":6171},{"style":926},[6172],{"type":68,"value":3705},{"type":62,"tag":307,"props":6174,"children":6175},{"class":309,"line":349},[6176,6181,6185,6189,6194,6198,6203,6207,6211,6216,6220],{"type":62,"tag":307,"props":6177,"children":6178},{"style":938},[6179],{"type":68,"value":6180},"        stroke",{"type":62,"tag":307,"props":6182,"children":6183},{"style":926},[6184],{"type":68,"value":946},{"type":62,"tag":307,"props":6186,"children":6187},{"style":926},[6188],{"type":68,"value":951},{"type":62,"tag":307,"props":6190,"children":6191},{"style":954},[6192],{"type":68,"value":6193},"var(--color-border-tertiary)",{"type":62,"tag":307,"props":6195,"children":6196},{"style":926},[6197],{"type":68,"value":951},{"type":62,"tag":307,"props":6199,"children":6200},{"style":938},[6201],{"type":68,"value":6202}," stroke-width",{"type":62,"tag":307,"props":6204,"children":6205},{"style":926},[6206],{"type":68,"value":946},{"type":62,"tag":307,"props":6208,"children":6209},{"style":926},[6210],{"type":68,"value":951},{"type":62,"tag":307,"props":6212,"children":6213},{"style":954},[6214],{"type":68,"value":6215},"0.5",{"type":62,"tag":307,"props":6217,"children":6218},{"style":926},[6219],{"type":68,"value":951},{"type":62,"tag":307,"props":6221,"children":6222},{"style":926},[6223],{"type":68,"value":6224},"\u002F>\n",{"type":62,"tag":307,"props":6226,"children":6227},{"class":309,"line":363},[6228,6232,6236,6240,6244,6248,6253,6257,6261,6265,6269,6274,6278,6282,6286,6290,6294,6298,6302,6306,6310,6315],{"type":62,"tag":307,"props":6229,"children":6230},{"style":926},[6231],{"type":68,"value":1510},{"type":62,"tag":307,"props":6233,"children":6234},{"style":932},[6235],{"type":68,"value":309},{"type":62,"tag":307,"props":6237,"children":6238},{"style":938},[6239],{"type":68,"value":6090},{"type":62,"tag":307,"props":6241,"children":6242},{"style":926},[6243],{"type":68,"value":946},{"type":62,"tag":307,"props":6245,"children":6246},{"style":926},[6247],{"type":68,"value":951},{"type":62,"tag":307,"props":6249,"children":6250},{"style":954},[6251],{"type":68,"value":6252},"340",{"type":62,"tag":307,"props":6254,"children":6255},{"style":926},[6256],{"type":68,"value":951},{"type":62,"tag":307,"props":6258,"children":6259},{"style":938},[6260],{"type":68,"value":6112},{"type":62,"tag":307,"props":6262,"children":6263},{"style":926},[6264],{"type":68,"value":946},{"type":62,"tag":307,"props":6266,"children":6267},{"style":926},[6268],{"type":68,"value":951},{"type":62,"tag":307,"props":6270,"children":6271},{"style":954},[6272],{"type":68,"value":6273},"20",{"type":62,"tag":307,"props":6275,"children":6276},{"style":926},[6277],{"type":68,"value":951},{"type":62,"tag":307,"props":6279,"children":6280},{"style":938},[6281],{"type":68,"value":6134},{"type":62,"tag":307,"props":6283,"children":6284},{"style":926},[6285],{"type":68,"value":946},{"type":62,"tag":307,"props":6287,"children":6288},{"style":926},[6289],{"type":68,"value":951},{"type":62,"tag":307,"props":6291,"children":6292},{"style":954},[6293],{"type":68,"value":6252},{"type":62,"tag":307,"props":6295,"children":6296},{"style":926},[6297],{"type":68,"value":951},{"type":62,"tag":307,"props":6299,"children":6300},{"style":938},[6301],{"type":68,"value":6156},{"type":62,"tag":307,"props":6303,"children":6304},{"style":926},[6305],{"type":68,"value":946},{"type":62,"tag":307,"props":6307,"children":6308},{"style":926},[6309],{"type":68,"value":951},{"type":62,"tag":307,"props":6311,"children":6312},{"style":954},[6313],{"type":68,"value":6314},"380",{"type":62,"tag":307,"props":6316,"children":6317},{"style":926},[6318],{"type":68,"value":3705},{"type":62,"tag":307,"props":6320,"children":6321},{"class":309,"line":377},[6322,6326,6330,6334,6338,6342,6346,6350,6354,6358,6362],{"type":62,"tag":307,"props":6323,"children":6324},{"style":938},[6325],{"type":68,"value":6180},{"type":62,"tag":307,"props":6327,"children":6328},{"style":926},[6329],{"type":68,"value":946},{"type":62,"tag":307,"props":6331,"children":6332},{"style":926},[6333],{"type":68,"value":951},{"type":62,"tag":307,"props":6335,"children":6336},{"style":954},[6337],{"type":68,"value":6193},{"type":62,"tag":307,"props":6339,"children":6340},{"style":926},[6341],{"type":68,"value":951},{"type":62,"tag":307,"props":6343,"children":6344},{"style":938},[6345],{"type":68,"value":6202},{"type":62,"tag":307,"props":6347,"children":6348},{"style":926},[6349],{"type":68,"value":946},{"type":62,"tag":307,"props":6351,"children":6352},{"style":926},[6353],{"type":68,"value":951},{"type":62,"tag":307,"props":6355,"children":6356},{"style":954},[6357],{"type":68,"value":6215},{"type":62,"tag":307,"props":6359,"children":6360},{"style":926},[6361],{"type":68,"value":951},{"type":62,"tag":307,"props":6363,"children":6364},{"style":926},[6365],{"type":68,"value":6224},{"type":62,"tag":307,"props":6367,"children":6368},{"class":309,"line":391},[6369],{"type":62,"tag":307,"props":6370,"children":6371},{"style":314},[6372],{"type":68,"value":6373},"  \u003C!-- Axes labels -->\n",{"type":62,"tag":307,"props":6375,"children":6376},{"class":309,"line":405},[6377,6381,6385,6390,6394,6398,6403,6407,6412,6416,6420,6425,6429,6433,6437,6441,6446],{"type":62,"tag":307,"props":6378,"children":6379},{"style":926},[6380],{"type":68,"value":1510},{"type":62,"tag":307,"props":6382,"children":6383},{"style":932},[6384],{"type":68,"value":68},{"type":62,"tag":307,"props":6386,"children":6387},{"style":938},[6388],{"type":68,"value":6389}," x",{"type":62,"tag":307,"props":6391,"children":6392},{"style":926},[6393],{"type":68,"value":946},{"type":62,"tag":307,"props":6395,"children":6396},{"style":926},[6397],{"type":68,"value":951},{"type":62,"tag":307,"props":6399,"children":6400},{"style":954},[6401],{"type":68,"value":6402},"645",{"type":62,"tag":307,"props":6404,"children":6405},{"style":926},[6406],{"type":68,"value":951},{"type":62,"tag":307,"props":6408,"children":6409},{"style":938},[6410],{"type":68,"value":6411}," y",{"type":62,"tag":307,"props":6413,"children":6414},{"style":926},[6415],{"type":68,"value":946},{"type":62,"tag":307,"props":6417,"children":6418},{"style":926},[6419],{"type":68,"value":951},{"type":62,"tag":307,"props":6421,"children":6422},{"style":954},[6423],{"type":68,"value":6424},"196",{"type":62,"tag":307,"props":6426,"children":6427},{"style":926},[6428],{"type":68,"value":951},{"type":62,"tag":307,"props":6430,"children":6431},{"style":938},[6432],{"type":68,"value":1417},{"type":62,"tag":307,"props":6434,"children":6435},{"style":926},[6436],{"type":68,"value":946},{"type":62,"tag":307,"props":6438,"children":6439},{"style":926},[6440],{"type":68,"value":951},{"type":62,"tag":307,"props":6442,"children":6443},{"style":954},[6444],{"type":68,"value":6445},"12",{"type":62,"tag":307,"props":6447,"children":6448},{"style":926},[6449],{"type":68,"value":3705},{"type":62,"tag":307,"props":6451,"children":6452},{"class":309,"line":419},[6453,6458,6462,6466,6471,6475,6479,6483,6487,6491],{"type":62,"tag":307,"props":6454,"children":6455},{"style":938},[6456],{"type":68,"value":6457},"        fill",{"type":62,"tag":307,"props":6459,"children":6460},{"style":926},[6461],{"type":68,"value":946},{"type":62,"tag":307,"props":6463,"children":6464},{"style":926},[6465],{"type":68,"value":951},{"type":62,"tag":307,"props":6467,"children":6468},{"style":954},[6469],{"type":68,"value":6470},"var(--color-text-tertiary)",{"type":62,"tag":307,"props":6472,"children":6473},{"style":926},[6474],{"type":68,"value":951},{"type":62,"tag":307,"props":6476,"children":6477},{"style":926},[6478],{"type":68,"value":1575},{"type":62,"tag":307,"props":6480,"children":6481},{"style":324},[6482],{"type":68,"value":4696},{"type":62,"tag":307,"props":6484,"children":6485},{"style":926},[6486],{"type":68,"value":998},{"type":62,"tag":307,"props":6488,"children":6489},{"style":932},[6490],{"type":68,"value":68},{"type":62,"tag":307,"props":6492,"children":6493},{"style":926},[6494],{"type":68,"value":982},{"type":62,"tag":307,"props":6496,"children":6497},{"class":309,"line":429},[6498,6502,6506,6510,6514,6518,6523,6527,6531,6535,6539,6544,6548,6552,6556,6560,6564],{"type":62,"tag":307,"props":6499,"children":6500},{"style":926},[6501],{"type":68,"value":1510},{"type":62,"tag":307,"props":6503,"children":6504},{"style":932},[6505],{"type":68,"value":68},{"type":62,"tag":307,"props":6507,"children":6508},{"style":938},[6509],{"type":68,"value":6389},{"type":62,"tag":307,"props":6511,"children":6512},{"style":926},[6513],{"type":68,"value":946},{"type":62,"tag":307,"props":6515,"children":6516},{"style":926},[6517],{"type":68,"value":951},{"type":62,"tag":307,"props":6519,"children":6520},{"style":954},[6521],{"type":68,"value":6522},"345",{"type":62,"tag":307,"props":6524,"children":6525},{"style":926},[6526],{"type":68,"value":951},{"type":62,"tag":307,"props":6528,"children":6529},{"style":938},[6530],{"type":68,"value":6411},{"type":62,"tag":307,"props":6532,"children":6533},{"style":926},[6534],{"type":68,"value":946},{"type":62,"tag":307,"props":6536,"children":6537},{"style":926},[6538],{"type":68,"value":951},{"type":62,"tag":307,"props":6540,"children":6541},{"style":954},[6542],{"type":68,"value":6543},"16",{"type":62,"tag":307,"props":6545,"children":6546},{"style":926},[6547],{"type":68,"value":951},{"type":62,"tag":307,"props":6549,"children":6550},{"style":938},[6551],{"type":68,"value":1417},{"type":62,"tag":307,"props":6553,"children":6554},{"style":926},[6555],{"type":68,"value":946},{"type":62,"tag":307,"props":6557,"children":6558},{"style":926},[6559],{"type":68,"value":951},{"type":62,"tag":307,"props":6561,"children":6562},{"style":954},[6563],{"type":68,"value":6445},{"type":62,"tag":307,"props":6565,"children":6566},{"style":926},[6567],{"type":68,"value":3705},{"type":62,"tag":307,"props":6569,"children":6570},{"class":309,"line":438},[6571,6575,6579,6583,6587,6591,6595,6599,6603,6607],{"type":62,"tag":307,"props":6572,"children":6573},{"style":938},[6574],{"type":68,"value":6457},{"type":62,"tag":307,"props":6576,"children":6577},{"style":926},[6578],{"type":68,"value":946},{"type":62,"tag":307,"props":6580,"children":6581},{"style":926},[6582],{"type":68,"value":951},{"type":62,"tag":307,"props":6584,"children":6585},{"style":954},[6586],{"type":68,"value":6470},{"type":62,"tag":307,"props":6588,"children":6589},{"style":926},[6590],{"type":68,"value":951},{"type":62,"tag":307,"props":6592,"children":6593},{"style":926},[6594],{"type":68,"value":1575},{"type":62,"tag":307,"props":6596,"children":6597},{"style":324},[6598],{"type":68,"value":4752},{"type":62,"tag":307,"props":6600,"children":6601},{"style":926},[6602],{"type":68,"value":998},{"type":62,"tag":307,"props":6604,"children":6605},{"style":932},[6606],{"type":68,"value":68},{"type":62,"tag":307,"props":6608,"children":6609},{"style":926},[6610],{"type":68,"value":982},{"type":62,"tag":307,"props":6612,"children":6613},{"class":309,"line":452},[6614],{"type":62,"tag":307,"props":6615,"children":6616},{"style":314},[6617],{"type":68,"value":6618},"  \u003C!-- Function path drawn by JS -->\n",{"type":62,"tag":307,"props":6620,"children":6621},{"class":309,"line":466},[6622,6626,6631,6635,6639,6643,6648,6652,6657,6661,6665,6670,6674,6679,6683,6687,6691,6695,6699,6703,6707,6712,6716],{"type":62,"tag":307,"props":6623,"children":6624},{"style":926},[6625],{"type":68,"value":1510},{"type":62,"tag":307,"props":6627,"children":6628},{"style":932},[6629],{"type":68,"value":6630},"path",{"type":62,"tag":307,"props":6632,"children":6633},{"style":938},[6634],{"type":68,"value":3431},{"type":62,"tag":307,"props":6636,"children":6637},{"style":926},[6638],{"type":68,"value":946},{"type":62,"tag":307,"props":6640,"children":6641},{"style":926},[6642],{"type":68,"value":951},{"type":62,"tag":307,"props":6644,"children":6645},{"style":954},[6646],{"type":68,"value":6647},"fn-path",{"type":62,"tag":307,"props":6649,"children":6650},{"style":926},[6651],{"type":68,"value":951},{"type":62,"tag":307,"props":6653,"children":6654},{"style":938},[6655],{"type":68,"value":6656}," fill",{"type":62,"tag":307,"props":6658,"children":6659},{"style":926},[6660],{"type":68,"value":946},{"type":62,"tag":307,"props":6662,"children":6663},{"style":926},[6664],{"type":68,"value":951},{"type":62,"tag":307,"props":6666,"children":6667},{"style":954},[6668],{"type":68,"value":6669},"none",{"type":62,"tag":307,"props":6671,"children":6672},{"style":926},[6673],{"type":68,"value":951},{"type":62,"tag":307,"props":6675,"children":6676},{"style":938},[6677],{"type":68,"value":6678}," stroke",{"type":62,"tag":307,"props":6680,"children":6681},{"style":926},[6682],{"type":68,"value":946},{"type":62,"tag":307,"props":6684,"children":6685},{"style":926},[6686],{"type":68,"value":951},{"type":62,"tag":307,"props":6688,"children":6689},{"style":954},[6690],{"type":68,"value":5137},{"type":62,"tag":307,"props":6692,"children":6693},{"style":926},[6694],{"type":68,"value":951},{"type":62,"tag":307,"props":6696,"children":6697},{"style":938},[6698],{"type":68,"value":6202},{"type":62,"tag":307,"props":6700,"children":6701},{"style":926},[6702],{"type":68,"value":946},{"type":62,"tag":307,"props":6704,"children":6705},{"style":926},[6706],{"type":68,"value":951},{"type":62,"tag":307,"props":6708,"children":6709},{"style":954},[6710],{"type":68,"value":6711},"2",{"type":62,"tag":307,"props":6713,"children":6714},{"style":926},[6715],{"type":68,"value":951},{"type":62,"tag":307,"props":6717,"children":6718},{"style":926},[6719],{"type":68,"value":6224},{"type":62,"tag":307,"props":6721,"children":6722},{"class":309,"line":480},[6723,6727,6731],{"type":62,"tag":307,"props":6724,"children":6725},{"style":926},[6726],{"type":68,"value":998},{"type":62,"tag":307,"props":6728,"children":6729},{"style":932},[6730],{"type":68,"value":5998},{"type":62,"tag":307,"props":6732,"children":6733},{"style":926},[6734],{"type":68,"value":982},{"type":62,"tag":307,"props":6736,"children":6737},{"class":309,"line":489},[6738],{"type":62,"tag":307,"props":6739,"children":6740},{"emptyLinePlaceholder":423},[6741],{"type":68,"value":426},{"type":62,"tag":307,"props":6743,"children":6744},{"class":309,"line":497},[6745,6749,6753,6757,6761,6765,6769,6773],{"type":62,"tag":307,"props":6746,"children":6747},{"style":926},[6748],{"type":68,"value":929},{"type":62,"tag":307,"props":6750,"children":6751},{"style":932},[6752],{"type":68,"value":935},{"type":62,"tag":307,"props":6754,"children":6755},{"style":938},[6756],{"type":68,"value":1482},{"type":62,"tag":307,"props":6758,"children":6759},{"style":926},[6760],{"type":68,"value":946},{"type":62,"tag":307,"props":6762,"children":6763},{"style":926},[6764],{"type":68,"value":951},{"type":62,"tag":307,"props":6766,"children":6767},{"style":954},[6768],{"type":68,"value":5705},{"type":62,"tag":307,"props":6770,"children":6771},{"style":926},[6772],{"type":68,"value":951},{"type":62,"tag":307,"props":6774,"children":6775},{"style":926},[6776],{"type":68,"value":982},{"type":62,"tag":307,"props":6778,"children":6779},{"class":309,"line":506},[6780,6784,6788,6792],{"type":62,"tag":307,"props":6781,"children":6782},{"style":926},[6783],{"type":68,"value":1510},{"type":62,"tag":307,"props":6785,"children":6786},{"style":932},[6787],{"type":68,"value":3574},{"type":62,"tag":307,"props":6789,"children":6790},{"style":926},[6791],{"type":68,"value":1575},{"type":62,"tag":307,"props":6793,"children":6794},{"style":324},[6795],{"type":68,"value":6796},"f(x) = sin(\n",{"type":62,"tag":307,"props":6798,"children":6799},{"class":309,"line":520},[6800,6804,6808,6812,6816,6820,6824,6828,6832,6836,6840,6845,6849,6853,6857,6861,6865,6869,6873,6877,6881,6886,6890,6894,6898,6902,6906,6910,6915,6919,6923,6927],{"type":62,"tag":307,"props":6801,"children":6802},{"style":926},[6803],{"type":68,"value":1546},{"type":62,"tag":307,"props":6805,"children":6806},{"style":932},[6807],{"type":68,"value":3595},{"type":62,"tag":307,"props":6809,"children":6810},{"style":938},[6811],{"type":68,"value":3600},{"type":62,"tag":307,"props":6813,"children":6814},{"style":926},[6815],{"type":68,"value":946},{"type":62,"tag":307,"props":6817,"children":6818},{"style":926},[6819],{"type":68,"value":951},{"type":62,"tag":307,"props":6821,"children":6822},{"style":954},[6823],{"type":68,"value":5872},{"type":62,"tag":307,"props":6825,"children":6826},{"style":926},[6827],{"type":68,"value":951},{"type":62,"tag":307,"props":6829,"children":6830},{"style":938},[6831],{"type":68,"value":3431},{"type":62,"tag":307,"props":6833,"children":6834},{"style":926},[6835],{"type":68,"value":946},{"type":62,"tag":307,"props":6837,"children":6838},{"style":926},[6839],{"type":68,"value":951},{"type":62,"tag":307,"props":6841,"children":6842},{"style":954},[6843],{"type":68,"value":6844},"freq",{"type":62,"tag":307,"props":6846,"children":6847},{"style":926},[6848],{"type":68,"value":951},{"type":62,"tag":307,"props":6850,"children":6851},{"style":938},[6852],{"type":68,"value":3666},{"type":62,"tag":307,"props":6854,"children":6855},{"style":926},[6856],{"type":68,"value":946},{"type":62,"tag":307,"props":6858,"children":6859},{"style":926},[6860],{"type":68,"value":951},{"type":62,"tag":307,"props":6862,"children":6863},{"style":954},[6864],{"type":68,"value":3635},{"type":62,"tag":307,"props":6866,"children":6867},{"style":926},[6868],{"type":68,"value":951},{"type":62,"tag":307,"props":6870,"children":6871},{"style":938},[6872],{"type":68,"value":3622},{"type":62,"tag":307,"props":6874,"children":6875},{"style":926},[6876],{"type":68,"value":946},{"type":62,"tag":307,"props":6878,"children":6879},{"style":926},[6880],{"type":68,"value":951},{"type":62,"tag":307,"props":6882,"children":6883},{"style":954},[6884],{"type":68,"value":6885},"0.1",{"type":62,"tag":307,"props":6887,"children":6888},{"style":926},[6889],{"type":68,"value":951},{"type":62,"tag":307,"props":6891,"children":6892},{"style":938},[6893],{"type":68,"value":3644},{"type":62,"tag":307,"props":6895,"children":6896},{"style":926},[6897],{"type":68,"value":946},{"type":62,"tag":307,"props":6899,"children":6900},{"style":926},[6901],{"type":68,"value":951},{"type":62,"tag":307,"props":6903,"children":6904},{"style":954},[6905],{"type":68,"value":3657},{"type":62,"tag":307,"props":6907,"children":6908},{"style":926},[6909],{"type":68,"value":951},{"type":62,"tag":307,"props":6911,"children":6912},{"style":938},[6913],{"type":68,"value":6914}," step",{"type":62,"tag":307,"props":6916,"children":6917},{"style":926},[6918],{"type":68,"value":946},{"type":62,"tag":307,"props":6920,"children":6921},{"style":926},[6922],{"type":68,"value":951},{"type":62,"tag":307,"props":6924,"children":6925},{"style":954},[6926],{"type":68,"value":6885},{"type":62,"tag":307,"props":6928,"children":6929},{"style":926},[6930],{"type":68,"value":3705},{"type":62,"tag":307,"props":6932,"children":6933},{"class":309,"line":534},[6934,6938,6942,6946,6951,6955,6959,6963],{"type":62,"tag":307,"props":6935,"children":6936},{"style":938},[6937],{"type":68,"value":3713},{"type":62,"tag":307,"props":6939,"children":6940},{"style":926},[6941],{"type":68,"value":946},{"type":62,"tag":307,"props":6943,"children":6944},{"style":926},[6945],{"type":68,"value":951},{"type":62,"tag":307,"props":6947,"children":6948},{"style":1101},[6949],{"type":68,"value":6950},"plotFn",{"type":62,"tag":307,"props":6952,"children":6953},{"style":954},[6954],{"type":68,"value":3537},{"type":62,"tag":307,"props":6956,"children":6957},{"style":926},[6958],{"type":68,"value":951},{"type":62,"tag":307,"props":6960,"children":6961},{"style":926},[6962],{"type":68,"value":1575},{"type":62,"tag":307,"props":6964,"children":6965},{"style":324},[6966],{"type":68,"value":6967},"x)\n",{"type":62,"tag":307,"props":6969,"children":6970},{"class":309,"line":548},[6971,6975,6979],{"type":62,"tag":307,"props":6972,"children":6973},{"style":926},[6974],{"type":68,"value":1652},{"type":62,"tag":307,"props":6976,"children":6977},{"style":932},[6978],{"type":68,"value":3574},{"type":62,"tag":307,"props":6980,"children":6981},{"style":926},[6982],{"type":68,"value":982},{"type":62,"tag":307,"props":6984,"children":6985},{"class":309,"line":556},[6986,6990,6994,6998],{"type":62,"tag":307,"props":6987,"children":6988},{"style":926},[6989],{"type":68,"value":1510},{"type":62,"tag":307,"props":6991,"children":6992},{"style":932},[6993],{"type":68,"value":3574},{"type":62,"tag":307,"props":6995,"children":6996},{"style":926},[6997],{"type":68,"value":1575},{"type":62,"tag":307,"props":6999,"children":7000},{"style":324},[7001],{"type":68,"value":7002},"Amplitude\n",{"type":62,"tag":307,"props":7004,"children":7005},{"class":309,"line":565},[7006,7010,7014,7018,7022,7026,7030,7034,7038,7042,7046,7051,7055,7059,7063,7067,7071,7075,7079,7083,7087,7092,7096,7100,7104,7108,7112,7116,7120,7124,7128,7132],{"type":62,"tag":307,"props":7007,"children":7008},{"style":926},[7009],{"type":68,"value":1546},{"type":62,"tag":307,"props":7011,"children":7012},{"style":932},[7013],{"type":68,"value":3595},{"type":62,"tag":307,"props":7015,"children":7016},{"style":938},[7017],{"type":68,"value":3600},{"type":62,"tag":307,"props":7019,"children":7020},{"style":926},[7021],{"type":68,"value":946},{"type":62,"tag":307,"props":7023,"children":7024},{"style":926},[7025],{"type":68,"value":951},{"type":62,"tag":307,"props":7027,"children":7028},{"style":954},[7029],{"type":68,"value":3613},{"type":62,"tag":307,"props":7031,"children":7032},{"style":926},[7033],{"type":68,"value":951},{"type":62,"tag":307,"props":7035,"children":7036},{"style":938},[7037],{"type":68,"value":3431},{"type":62,"tag":307,"props":7039,"children":7040},{"style":926},[7041],{"type":68,"value":946},{"type":62,"tag":307,"props":7043,"children":7044},{"style":926},[7045],{"type":68,"value":951},{"type":62,"tag":307,"props":7047,"children":7048},{"style":954},[7049],{"type":68,"value":7050},"amp",{"type":62,"tag":307,"props":7052,"children":7053},{"style":926},[7054],{"type":68,"value":951},{"type":62,"tag":307,"props":7056,"children":7057},{"style":938},[7058],{"type":68,"value":3622},{"type":62,"tag":307,"props":7060,"children":7061},{"style":926},[7062],{"type":68,"value":946},{"type":62,"tag":307,"props":7064,"children":7065},{"style":926},[7066],{"type":68,"value":951},{"type":62,"tag":307,"props":7068,"children":7069},{"style":954},[7070],{"type":68,"value":6885},{"type":62,"tag":307,"props":7072,"children":7073},{"style":926},[7074],{"type":68,"value":951},{"type":62,"tag":307,"props":7076,"children":7077},{"style":938},[7078],{"type":68,"value":3644},{"type":62,"tag":307,"props":7080,"children":7081},{"style":926},[7082],{"type":68,"value":946},{"type":62,"tag":307,"props":7084,"children":7085},{"style":926},[7086],{"type":68,"value":951},{"type":62,"tag":307,"props":7088,"children":7089},{"style":954},[7090],{"type":68,"value":7091},"3",{"type":62,"tag":307,"props":7093,"children":7094},{"style":926},[7095],{"type":68,"value":951},{"type":62,"tag":307,"props":7097,"children":7098},{"style":938},[7099],{"type":68,"value":3666},{"type":62,"tag":307,"props":7101,"children":7102},{"style":926},[7103],{"type":68,"value":946},{"type":62,"tag":307,"props":7105,"children":7106},{"style":926},[7107],{"type":68,"value":951},{"type":62,"tag":307,"props":7109,"children":7110},{"style":954},[7111],{"type":68,"value":3635},{"type":62,"tag":307,"props":7113,"children":7114},{"style":926},[7115],{"type":68,"value":951},{"type":62,"tag":307,"props":7117,"children":7118},{"style":938},[7119],{"type":68,"value":6914},{"type":62,"tag":307,"props":7121,"children":7122},{"style":926},[7123],{"type":68,"value":946},{"type":62,"tag":307,"props":7125,"children":7126},{"style":926},[7127],{"type":68,"value":951},{"type":62,"tag":307,"props":7129,"children":7130},{"style":954},[7131],{"type":68,"value":6885},{"type":62,"tag":307,"props":7133,"children":7134},{"style":926},[7135],{"type":68,"value":3705},{"type":62,"tag":307,"props":7137,"children":7138},{"class":309,"line":579},[7139,7143,7147,7151,7155,7159,7163],{"type":62,"tag":307,"props":7140,"children":7141},{"style":938},[7142],{"type":68,"value":3713},{"type":62,"tag":307,"props":7144,"children":7145},{"style":926},[7146],{"type":68,"value":946},{"type":62,"tag":307,"props":7148,"children":7149},{"style":926},[7150],{"type":68,"value":951},{"type":62,"tag":307,"props":7152,"children":7153},{"style":1101},[7154],{"type":68,"value":6950},{"type":62,"tag":307,"props":7156,"children":7157},{"style":954},[7158],{"type":68,"value":3537},{"type":62,"tag":307,"props":7160,"children":7161},{"style":926},[7162],{"type":68,"value":951},{"type":62,"tag":307,"props":7164,"children":7165},{"style":926},[7166],{"type":68,"value":982},{"type":62,"tag":307,"props":7168,"children":7169},{"class":309,"line":593},[7170,7174,7178],{"type":62,"tag":307,"props":7171,"children":7172},{"style":926},[7173],{"type":68,"value":1652},{"type":62,"tag":307,"props":7175,"children":7176},{"style":932},[7177],{"type":68,"value":3574},{"type":62,"tag":307,"props":7179,"children":7180},{"style":926},[7181],{"type":68,"value":982},{"type":62,"tag":307,"props":7183,"children":7184},{"class":309,"line":607},[7185,7189,7193],{"type":62,"tag":307,"props":7186,"children":7187},{"style":926},[7188],{"type":68,"value":998},{"type":62,"tag":307,"props":7190,"children":7191},{"style":932},[7192],{"type":68,"value":935},{"type":62,"tag":307,"props":7194,"children":7195},{"style":926},[7196],{"type":68,"value":982},{"type":62,"tag":71,"props":7198,"children":7199},{},[7200],{"type":68,"value":3845},{"type":62,"tag":297,"props":7202,"children":7204},{"className":3848,"code":7203,"language":3850,"meta":301,"style":301},"function plotFn() {\n  const freq = +document.getElementById('freq').value;\n  const amp = +document.getElementById('amp').value;\n  const xMin = -5, xMax = 5, yMin = -3, yMax = 3;\n  const toSvgX = x => 60 + (x - xMin) \u002F (xMax - xMin) * 580;\n  const toSvgY = y => 20 + (yMax - y) \u002F (yMax - yMin) * 360;\n  let d = '';\n  for (let px = 0; px \u003C= 580; px++) {\n    const x = xMin + px \u002F 580 * (xMax - xMin);\n    const y = amp * Math.sin(freq * x);\n    d += (px === 0 ? 'M' : 'L') + toSvgX(x).toFixed(1)\n       + ' ' + toSvgY(y).toFixed(1);\n  }\n  document.getElementById('fn-path').setAttribute('d', d);\n}\n",[7205],{"type":62,"tag":93,"props":7206,"children":7207},{"__ignoreMap":301},[7208,7228,7294,7358,7442,7534,7625,7651,7718,7783,7843,7956,8016,8023,8101],{"type":62,"tag":307,"props":7209,"children":7210},{"class":309,"line":310},[7211,7215,7220,7224],{"type":62,"tag":307,"props":7212,"children":7213},{"style":938},[7214],{"type":68,"value":3862},{"type":62,"tag":307,"props":7216,"children":7217},{"style":1101},[7218],{"type":68,"value":7219}," plotFn",{"type":62,"tag":307,"props":7221,"children":7222},{"style":926},[7223],{"type":68,"value":3537},{"type":62,"tag":307,"props":7225,"children":7226},{"style":926},[7227],{"type":68,"value":1062},{"type":62,"tag":307,"props":7229,"children":7230},{"class":309,"line":320},[7231,7235,7240,7244,7249,7254,7258,7262,7266,7270,7274,7278,7282,7286,7290],{"type":62,"tag":307,"props":7232,"children":7233},{"style":938},[7234],{"type":68,"value":3893},{"type":62,"tag":307,"props":7236,"children":7237},{"style":324},[7238],{"type":68,"value":7239}," freq",{"type":62,"tag":307,"props":7241,"children":7242},{"style":926},[7243],{"type":68,"value":3903},{"type":62,"tag":307,"props":7245,"children":7246},{"style":926},[7247],{"type":68,"value":7248}," +",{"type":62,"tag":307,"props":7250,"children":7251},{"style":324},[7252],{"type":68,"value":7253},"document",{"type":62,"tag":307,"props":7255,"children":7256},{"style":926},[7257],{"type":68,"value":848},{"type":62,"tag":307,"props":7259,"children":7260},{"style":1101},[7261],{"type":68,"value":3917},{"type":62,"tag":307,"props":7263,"children":7264},{"style":932},[7265],{"type":68,"value":1109},{"type":62,"tag":307,"props":7267,"children":7268},{"style":926},[7269],{"type":68,"value":3926},{"type":62,"tag":307,"props":7271,"children":7272},{"style":954},[7273],{"type":68,"value":6844},{"type":62,"tag":307,"props":7275,"children":7276},{"style":926},[7277],{"type":68,"value":3926},{"type":62,"tag":307,"props":7279,"children":7280},{"style":932},[7281],{"type":68,"value":3745},{"type":62,"tag":307,"props":7283,"children":7284},{"style":926},[7285],{"type":68,"value":848},{"type":62,"tag":307,"props":7287,"children":7288},{"style":324},[7289],{"type":68,"value":3740},{"type":62,"tag":307,"props":7291,"children":7292},{"style":926},[7293],{"type":68,"value":1086},{"type":62,"tag":307,"props":7295,"children":7296},{"class":309,"line":335},[7297,7301,7306,7310,7314,7318,7322,7326,7330,7334,7338,7342,7346,7350,7354],{"type":62,"tag":307,"props":7298,"children":7299},{"style":938},[7300],{"type":68,"value":3893},{"type":62,"tag":307,"props":7302,"children":7303},{"style":324},[7304],{"type":68,"value":7305}," amp",{"type":62,"tag":307,"props":7307,"children":7308},{"style":926},[7309],{"type":68,"value":3903},{"type":62,"tag":307,"props":7311,"children":7312},{"style":926},[7313],{"type":68,"value":7248},{"type":62,"tag":307,"props":7315,"children":7316},{"style":324},[7317],{"type":68,"value":7253},{"type":62,"tag":307,"props":7319,"children":7320},{"style":926},[7321],{"type":68,"value":848},{"type":62,"tag":307,"props":7323,"children":7324},{"style":1101},[7325],{"type":68,"value":3917},{"type":62,"tag":307,"props":7327,"children":7328},{"style":932},[7329],{"type":68,"value":1109},{"type":62,"tag":307,"props":7331,"children":7332},{"style":926},[7333],{"type":68,"value":3926},{"type":62,"tag":307,"props":7335,"children":7336},{"style":954},[7337],{"type":68,"value":7050},{"type":62,"tag":307,"props":7339,"children":7340},{"style":926},[7341],{"type":68,"value":3926},{"type":62,"tag":307,"props":7343,"children":7344},{"style":932},[7345],{"type":68,"value":3745},{"type":62,"tag":307,"props":7347,"children":7348},{"style":926},[7349],{"type":68,"value":848},{"type":62,"tag":307,"props":7351,"children":7352},{"style":324},[7353],{"type":68,"value":3740},{"type":62,"tag":307,"props":7355,"children":7356},{"style":926},[7357],{"type":68,"value":1086},{"type":62,"tag":307,"props":7359,"children":7360},{"class":309,"line":349},[7361,7365,7370,7374,7378,7382,7386,7391,7395,7399,7403,7408,7412,7416,7420,7424,7429,7433,7438],{"type":62,"tag":307,"props":7362,"children":7363},{"style":938},[7364],{"type":68,"value":3893},{"type":62,"tag":307,"props":7366,"children":7367},{"style":324},[7368],{"type":68,"value":7369}," xMin",{"type":62,"tag":307,"props":7371,"children":7372},{"style":926},[7373],{"type":68,"value":3903},{"type":62,"tag":307,"props":7375,"children":7376},{"style":926},[7377],{"type":68,"value":4882},{"type":62,"tag":307,"props":7379,"children":7380},{"style":1131},[7381],{"type":68,"value":3679},{"type":62,"tag":307,"props":7383,"children":7384},{"style":926},[7385],{"type":68,"value":1119},{"type":62,"tag":307,"props":7387,"children":7388},{"style":324},[7389],{"type":68,"value":7390}," xMax",{"type":62,"tag":307,"props":7392,"children":7393},{"style":926},[7394],{"type":68,"value":3903},{"type":62,"tag":307,"props":7396,"children":7397},{"style":1131},[7398],{"type":68,"value":4142},{"type":62,"tag":307,"props":7400,"children":7401},{"style":926},[7402],{"type":68,"value":1119},{"type":62,"tag":307,"props":7404,"children":7405},{"style":324},[7406],{"type":68,"value":7407}," yMin",{"type":62,"tag":307,"props":7409,"children":7410},{"style":926},[7411],{"type":68,"value":3903},{"type":62,"tag":307,"props":7413,"children":7414},{"style":926},[7415],{"type":68,"value":4882},{"type":62,"tag":307,"props":7417,"children":7418},{"style":1131},[7419],{"type":68,"value":7091},{"type":62,"tag":307,"props":7421,"children":7422},{"style":926},[7423],{"type":68,"value":1119},{"type":62,"tag":307,"props":7425,"children":7426},{"style":324},[7427],{"type":68,"value":7428}," yMax",{"type":62,"tag":307,"props":7430,"children":7431},{"style":926},[7432],{"type":68,"value":3903},{"type":62,"tag":307,"props":7434,"children":7435},{"style":1131},[7436],{"type":68,"value":7437}," 3",{"type":62,"tag":307,"props":7439,"children":7440},{"style":926},[7441],{"type":68,"value":1086},{"type":62,"tag":307,"props":7443,"children":7444},{"class":309,"line":363},[7445,7449,7454,7458,7462,7466,7471,7475,7479,7483,7487,7491,7495,7500,7504,7509,7513,7517,7521,7525,7530],{"type":62,"tag":307,"props":7446,"children":7447},{"style":938},[7448],{"type":68,"value":3893},{"type":62,"tag":307,"props":7450,"children":7451},{"style":324},[7452],{"type":68,"value":7453}," toSvgX",{"type":62,"tag":307,"props":7455,"children":7456},{"style":926},[7457],{"type":68,"value":3903},{"type":62,"tag":307,"props":7459,"children":7460},{"style":3874},[7461],{"type":68,"value":6389},{"type":62,"tag":307,"props":7463,"children":7464},{"style":938},[7465],{"type":68,"value":4210},{"type":62,"tag":307,"props":7467,"children":7468},{"style":1131},[7469],{"type":68,"value":7470}," 60",{"type":62,"tag":307,"props":7472,"children":7473},{"style":926},[7474],{"type":68,"value":7248},{"type":62,"tag":307,"props":7476,"children":7477},{"style":932},[7478],{"type":68,"value":199},{"type":62,"tag":307,"props":7480,"children":7481},{"style":324},[7482],{"type":68,"value":4696},{"type":62,"tag":307,"props":7484,"children":7485},{"style":926},[7486],{"type":68,"value":4882},{"type":62,"tag":307,"props":7488,"children":7489},{"style":324},[7490],{"type":68,"value":7369},{"type":62,"tag":307,"props":7492,"children":7493},{"style":932},[7494],{"type":68,"value":4367},{"type":62,"tag":307,"props":7496,"children":7497},{"style":926},[7498],{"type":68,"value":7499},"\u002F",{"type":62,"tag":307,"props":7501,"children":7502},{"style":932},[7503],{"type":68,"value":199},{"type":62,"tag":307,"props":7505,"children":7506},{"style":324},[7507],{"type":68,"value":7508},"xMax",{"type":62,"tag":307,"props":7510,"children":7511},{"style":926},[7512],{"type":68,"value":4882},{"type":62,"tag":307,"props":7514,"children":7515},{"style":324},[7516],{"type":68,"value":7369},{"type":62,"tag":307,"props":7518,"children":7519},{"style":932},[7520],{"type":68,"value":4367},{"type":62,"tag":307,"props":7522,"children":7523},{"style":926},[7524],{"type":68,"value":4255},{"type":62,"tag":307,"props":7526,"children":7527},{"style":1131},[7528],{"type":68,"value":7529}," 580",{"type":62,"tag":307,"props":7531,"children":7532},{"style":926},[7533],{"type":68,"value":1086},{"type":62,"tag":307,"props":7535,"children":7536},{"class":309,"line":377},[7537,7541,7546,7550,7554,7558,7563,7567,7571,7576,7580,7584,7588,7592,7596,7600,7604,7608,7612,7616,7621],{"type":62,"tag":307,"props":7538,"children":7539},{"style":938},[7540],{"type":68,"value":3893},{"type":62,"tag":307,"props":7542,"children":7543},{"style":324},[7544],{"type":68,"value":7545}," toSvgY",{"type":62,"tag":307,"props":7547,"children":7548},{"style":926},[7549],{"type":68,"value":3903},{"type":62,"tag":307,"props":7551,"children":7552},{"style":3874},[7553],{"type":68,"value":6411},{"type":62,"tag":307,"props":7555,"children":7556},{"style":938},[7557],{"type":68,"value":4210},{"type":62,"tag":307,"props":7559,"children":7560},{"style":1131},[7561],{"type":68,"value":7562}," 20",{"type":62,"tag":307,"props":7564,"children":7565},{"style":926},[7566],{"type":68,"value":7248},{"type":62,"tag":307,"props":7568,"children":7569},{"style":932},[7570],{"type":68,"value":199},{"type":62,"tag":307,"props":7572,"children":7573},{"style":324},[7574],{"type":68,"value":7575},"yMax",{"type":62,"tag":307,"props":7577,"children":7578},{"style":926},[7579],{"type":68,"value":4882},{"type":62,"tag":307,"props":7581,"children":7582},{"style":324},[7583],{"type":68,"value":6411},{"type":62,"tag":307,"props":7585,"children":7586},{"style":932},[7587],{"type":68,"value":4367},{"type":62,"tag":307,"props":7589,"children":7590},{"style":926},[7591],{"type":68,"value":7499},{"type":62,"tag":307,"props":7593,"children":7594},{"style":932},[7595],{"type":68,"value":199},{"type":62,"tag":307,"props":7597,"children":7598},{"style":324},[7599],{"type":68,"value":7575},{"type":62,"tag":307,"props":7601,"children":7602},{"style":926},[7603],{"type":68,"value":4882},{"type":62,"tag":307,"props":7605,"children":7606},{"style":324},[7607],{"type":68,"value":7407},{"type":62,"tag":307,"props":7609,"children":7610},{"style":932},[7611],{"type":68,"value":4367},{"type":62,"tag":307,"props":7613,"children":7614},{"style":926},[7615],{"type":68,"value":4255},{"type":62,"tag":307,"props":7617,"children":7618},{"style":1131},[7619],{"type":68,"value":7620}," 360",{"type":62,"tag":307,"props":7622,"children":7623},{"style":926},[7624],{"type":68,"value":1086},{"type":62,"tag":307,"props":7626,"children":7627},{"class":309,"line":391},[7628,7633,7638,7642,7647],{"type":62,"tag":307,"props":7629,"children":7630},{"style":938},[7631],{"type":68,"value":7632},"  let",{"type":62,"tag":307,"props":7634,"children":7635},{"style":324},[7636],{"type":68,"value":7637}," d",{"type":62,"tag":307,"props":7639,"children":7640},{"style":926},[7641],{"type":68,"value":3903},{"type":62,"tag":307,"props":7643,"children":7644},{"style":926},[7645],{"type":68,"value":7646}," ''",{"type":62,"tag":307,"props":7648,"children":7649},{"style":926},[7650],{"type":68,"value":1086},{"type":62,"tag":307,"props":7652,"children":7653},{"class":309,"line":405},[7654,7658,7662,7667,7672,7676,7680,7684,7688,7693,7697,7701,7705,7710,7714],{"type":62,"tag":307,"props":7655,"children":7656},{"style":4645},[7657],{"type":68,"value":4648},{"type":62,"tag":307,"props":7659,"children":7660},{"style":932},[7661],{"type":68,"value":199},{"type":62,"tag":307,"props":7663,"children":7664},{"style":938},[7665],{"type":68,"value":7666},"let",{"type":62,"tag":307,"props":7668,"children":7669},{"style":324},[7670],{"type":68,"value":7671}," px",{"type":62,"tag":307,"props":7673,"children":7674},{"style":926},[7675],{"type":68,"value":3903},{"type":62,"tag":307,"props":7677,"children":7678},{"style":1131},[7679],{"type":68,"value":3232},{"type":62,"tag":307,"props":7681,"children":7682},{"style":926},[7683],{"type":68,"value":1431},{"type":62,"tag":307,"props":7685,"children":7686},{"style":324},[7687],{"type":68,"value":7671},{"type":62,"tag":307,"props":7689,"children":7690},{"style":926},[7691],{"type":68,"value":7692}," \u003C=",{"type":62,"tag":307,"props":7694,"children":7695},{"style":1131},[7696],{"type":68,"value":7529},{"type":62,"tag":307,"props":7698,"children":7699},{"style":926},[7700],{"type":68,"value":1431},{"type":62,"tag":307,"props":7702,"children":7703},{"style":324},[7704],{"type":68,"value":7671},{"type":62,"tag":307,"props":7706,"children":7707},{"style":926},[7708],{"type":68,"value":7709},"++",{"type":62,"tag":307,"props":7711,"children":7712},{"style":932},[7713],{"type":68,"value":4367},{"type":62,"tag":307,"props":7715,"children":7716},{"style":926},[7717],{"type":68,"value":4219},{"type":62,"tag":307,"props":7719,"children":7720},{"class":309,"line":419},[7721,7726,7730,7734,7738,7742,7746,7751,7755,7759,7763,7767,7771,7775,7779],{"type":62,"tag":307,"props":7722,"children":7723},{"style":938},[7724],{"type":68,"value":7725},"    const",{"type":62,"tag":307,"props":7727,"children":7728},{"style":324},[7729],{"type":68,"value":6389},{"type":62,"tag":307,"props":7731,"children":7732},{"style":926},[7733],{"type":68,"value":3903},{"type":62,"tag":307,"props":7735,"children":7736},{"style":324},[7737],{"type":68,"value":7369},{"type":62,"tag":307,"props":7739,"children":7740},{"style":926},[7741],{"type":68,"value":7248},{"type":62,"tag":307,"props":7743,"children":7744},{"style":324},[7745],{"type":68,"value":7671},{"type":62,"tag":307,"props":7747,"children":7748},{"style":926},[7749],{"type":68,"value":7750}," \u002F",{"type":62,"tag":307,"props":7752,"children":7753},{"style":1131},[7754],{"type":68,"value":7529},{"type":62,"tag":307,"props":7756,"children":7757},{"style":926},[7758],{"type":68,"value":4719},{"type":62,"tag":307,"props":7760,"children":7761},{"style":932},[7762],{"type":68,"value":199},{"type":62,"tag":307,"props":7764,"children":7765},{"style":324},[7766],{"type":68,"value":7508},{"type":62,"tag":307,"props":7768,"children":7769},{"style":926},[7770],{"type":68,"value":4882},{"type":62,"tag":307,"props":7772,"children":7773},{"style":324},[7774],{"type":68,"value":7369},{"type":62,"tag":307,"props":7776,"children":7777},{"style":932},[7778],{"type":68,"value":3745},{"type":62,"tag":307,"props":7780,"children":7781},{"style":926},[7782],{"type":68,"value":1086},{"type":62,"tag":307,"props":7784,"children":7785},{"class":309,"line":429},[7786,7790,7794,7798,7802,7806,7810,7814,7819,7823,7827,7831,7835,7839],{"type":62,"tag":307,"props":7787,"children":7788},{"style":938},[7789],{"type":68,"value":7725},{"type":62,"tag":307,"props":7791,"children":7792},{"style":324},[7793],{"type":68,"value":6411},{"type":62,"tag":307,"props":7795,"children":7796},{"style":926},[7797],{"type":68,"value":3903},{"type":62,"tag":307,"props":7799,"children":7800},{"style":324},[7801],{"type":68,"value":7305},{"type":62,"tag":307,"props":7803,"children":7804},{"style":926},[7805],{"type":68,"value":4719},{"type":62,"tag":307,"props":7807,"children":7808},{"style":324},[7809],{"type":68,"value":4236},{"type":62,"tag":307,"props":7811,"children":7812},{"style":926},[7813],{"type":68,"value":848},{"type":62,"tag":307,"props":7815,"children":7816},{"style":1101},[7817],{"type":68,"value":7818},"sin",{"type":62,"tag":307,"props":7820,"children":7821},{"style":932},[7822],{"type":68,"value":1109},{"type":62,"tag":307,"props":7824,"children":7825},{"style":324},[7826],{"type":68,"value":6844},{"type":62,"tag":307,"props":7828,"children":7829},{"style":926},[7830],{"type":68,"value":4719},{"type":62,"tag":307,"props":7832,"children":7833},{"style":324},[7834],{"type":68,"value":6389},{"type":62,"tag":307,"props":7836,"children":7837},{"style":932},[7838],{"type":68,"value":3745},{"type":62,"tag":307,"props":7840,"children":7841},{"style":926},[7842],{"type":68,"value":1086},{"type":62,"tag":307,"props":7844,"children":7845},{"class":309,"line":438},[7846,7851,7855,7859,7864,7869,7873,7878,7882,7887,7891,7896,7900,7905,7909,7913,7918,7922,7926,7930,7934,7938,7943,7947,7951],{"type":62,"tag":307,"props":7847,"children":7848},{"style":324},[7849],{"type":68,"value":7850},"    d",{"type":62,"tag":307,"props":7852,"children":7853},{"style":926},[7854],{"type":68,"value":4701},{"type":62,"tag":307,"props":7856,"children":7857},{"style":932},[7858],{"type":68,"value":199},{"type":62,"tag":307,"props":7860,"children":7861},{"style":324},[7862],{"type":68,"value":7863},"px",{"type":62,"tag":307,"props":7865,"children":7866},{"style":926},[7867],{"type":68,"value":7868}," ===",{"type":62,"tag":307,"props":7870,"children":7871},{"style":1131},[7872],{"type":68,"value":3232},{"type":62,"tag":307,"props":7874,"children":7875},{"style":926},[7876],{"type":68,"value":7877}," ?",{"type":62,"tag":307,"props":7879,"children":7880},{"style":926},[7881],{"type":68,"value":5132},{"type":62,"tag":307,"props":7883,"children":7884},{"style":954},[7885],{"type":68,"value":7886},"M",{"type":62,"tag":307,"props":7888,"children":7889},{"style":926},[7890],{"type":68,"value":3926},{"type":62,"tag":307,"props":7892,"children":7893},{"style":926},[7894],{"type":68,"value":7895}," :",{"type":62,"tag":307,"props":7897,"children":7898},{"style":926},[7899],{"type":68,"value":5132},{"type":62,"tag":307,"props":7901,"children":7902},{"style":954},[7903],{"type":68,"value":7904},"L",{"type":62,"tag":307,"props":7906,"children":7907},{"style":926},[7908],{"type":68,"value":3926},{"type":62,"tag":307,"props":7910,"children":7911},{"style":932},[7912],{"type":68,"value":4367},{"type":62,"tag":307,"props":7914,"children":7915},{"style":926},[7916],{"type":68,"value":7917},"+",{"type":62,"tag":307,"props":7919,"children":7920},{"style":1101},[7921],{"type":68,"value":7453},{"type":62,"tag":307,"props":7923,"children":7924},{"style":932},[7925],{"type":68,"value":1109},{"type":62,"tag":307,"props":7927,"children":7928},{"style":324},[7929],{"type":68,"value":4696},{"type":62,"tag":307,"props":7931,"children":7932},{"style":932},[7933],{"type":68,"value":3745},{"type":62,"tag":307,"props":7935,"children":7936},{"style":926},[7937],{"type":68,"value":848},{"type":62,"tag":307,"props":7939,"children":7940},{"style":1101},[7941],{"type":68,"value":7942},"toFixed",{"type":62,"tag":307,"props":7944,"children":7945},{"style":932},[7946],{"type":68,"value":1109},{"type":62,"tag":307,"props":7948,"children":7949},{"style":1131},[7950],{"type":68,"value":3635},{"type":62,"tag":307,"props":7952,"children":7953},{"style":932},[7954],{"type":68,"value":7955},")\n",{"type":62,"tag":307,"props":7957,"children":7958},{"class":309,"line":452},[7959,7964,7968,7972,7976,7980,7984,7988,7992,7996,8000,8004,8008,8012],{"type":62,"tag":307,"props":7960,"children":7961},{"style":926},[7962],{"type":68,"value":7963},"       +",{"type":62,"tag":307,"props":7965,"children":7966},{"style":926},[7967],{"type":68,"value":5132},{"type":62,"tag":307,"props":7969,"children":7970},{"style":926},[7971],{"type":68,"value":5132},{"type":62,"tag":307,"props":7973,"children":7974},{"style":926},[7975],{"type":68,"value":7248},{"type":62,"tag":307,"props":7977,"children":7978},{"style":1101},[7979],{"type":68,"value":7545},{"type":62,"tag":307,"props":7981,"children":7982},{"style":932},[7983],{"type":68,"value":1109},{"type":62,"tag":307,"props":7985,"children":7986},{"style":324},[7987],{"type":68,"value":4752},{"type":62,"tag":307,"props":7989,"children":7990},{"style":932},[7991],{"type":68,"value":3745},{"type":62,"tag":307,"props":7993,"children":7994},{"style":926},[7995],{"type":68,"value":848},{"type":62,"tag":307,"props":7997,"children":7998},{"style":1101},[7999],{"type":68,"value":7942},{"type":62,"tag":307,"props":8001,"children":8002},{"style":932},[8003],{"type":68,"value":1109},{"type":62,"tag":307,"props":8005,"children":8006},{"style":1131},[8007],{"type":68,"value":3635},{"type":62,"tag":307,"props":8009,"children":8010},{"style":932},[8011],{"type":68,"value":3745},{"type":62,"tag":307,"props":8013,"children":8014},{"style":926},[8015],{"type":68,"value":1086},{"type":62,"tag":307,"props":8017,"children":8018},{"class":309,"line":466},[8019],{"type":62,"tag":307,"props":8020,"children":8021},{"style":926},[8022],{"type":68,"value":5177},{"type":62,"tag":307,"props":8024,"children":8025},{"class":309,"line":480},[8026,8031,8035,8039,8043,8047,8051,8055,8059,8063,8068,8072,8076,8081,8085,8089,8093,8097],{"type":62,"tag":307,"props":8027,"children":8028},{"style":324},[8029],{"type":68,"value":8030},"  document",{"type":62,"tag":307,"props":8032,"children":8033},{"style":926},[8034],{"type":68,"value":848},{"type":62,"tag":307,"props":8036,"children":8037},{"style":1101},[8038],{"type":68,"value":3917},{"type":62,"tag":307,"props":8040,"children":8041},{"style":932},[8042],{"type":68,"value":1109},{"type":62,"tag":307,"props":8044,"children":8045},{"style":926},[8046],{"type":68,"value":3926},{"type":62,"tag":307,"props":8048,"children":8049},{"style":954},[8050],{"type":68,"value":6647},{"type":62,"tag":307,"props":8052,"children":8053},{"style":926},[8054],{"type":68,"value":3926},{"type":62,"tag":307,"props":8056,"children":8057},{"style":932},[8058],{"type":68,"value":3745},{"type":62,"tag":307,"props":8060,"children":8061},{"style":926},[8062],{"type":68,"value":848},{"type":62,"tag":307,"props":8064,"children":8065},{"style":1101},[8066],{"type":68,"value":8067},"setAttribute",{"type":62,"tag":307,"props":8069,"children":8070},{"style":932},[8071],{"type":68,"value":1109},{"type":62,"tag":307,"props":8073,"children":8074},{"style":926},[8075],{"type":68,"value":3926},{"type":62,"tag":307,"props":8077,"children":8078},{"style":954},[8079],{"type":68,"value":8080},"d",{"type":62,"tag":307,"props":8082,"children":8083},{"style":926},[8084],{"type":68,"value":3926},{"type":62,"tag":307,"props":8086,"children":8087},{"style":926},[8088],{"type":68,"value":1119},{"type":62,"tag":307,"props":8090,"children":8091},{"style":324},[8092],{"type":68,"value":7637},{"type":62,"tag":307,"props":8094,"children":8095},{"style":932},[8096],{"type":68,"value":3745},{"type":62,"tag":307,"props":8098,"children":8099},{"style":926},[8100],{"type":68,"value":1086},{"type":62,"tag":307,"props":8102,"children":8103},{"class":309,"line":489},[8104],{"type":62,"tag":307,"props":8105,"children":8106},{"style":926},[8107],{"type":68,"value":1198},{"type":62,"tag":71,"props":8109,"children":8110},{},[8111],{"type":68,"value":5616},{"type":62,"tag":297,"props":8113,"children":8115},{"className":3848,"code":8114,"language":3850,"meta":301,"style":301},"plotFn();\n",[8116],{"type":62,"tag":93,"props":8117,"children":8118},{"__ignoreMap":301},[8119],{"type":62,"tag":307,"props":8120,"children":8121},{"class":309,"line":310},[8122,8126,8130],{"type":62,"tag":307,"props":8123,"children":8124},{"style":1101},[8125],{"type":68,"value":6950},{"type":62,"tag":307,"props":8127,"children":8128},{"style":324},[8129],{"type":68,"value":3537},{"type":62,"tag":307,"props":8131,"children":8132},{"style":926},[8133],{"type":68,"value":1086},{"type":62,"tag":290,"props":8135,"children":8137},{"id":8136},"sortable-filterable-data-tables",[8138],{"type":68,"value":8139},"Sortable \u002F Filterable Data Tables",{"type":62,"tag":71,"props":8141,"children":8142},{},[8143],{"type":68,"value":1037},{"type":62,"tag":297,"props":8145,"children":8147},{"className":299,"code":8146,"language":136,"meta":301,"style":301},".data-table { width: 100%; border-collapse: collapse; font-size: 14px; }\n.data-table th {\n  text-align: left; padding: 8px 12px; font-weight: 500;\n  border-bottom: 0.5px solid var(--color-border-secondary);\n  color: var(--color-text-secondary); cursor: pointer;\n  user-select: none; font-size: 12px;\n}\n.data-table th:hover { color: var(--color-text-primary); }\n.data-table td {\n  padding: 8px 12px;\n  border-bottom: 0.5px solid var(--color-border-tertiary);\n}\n.table-filter { width: 100%; margin-bottom: 12px; }\n.status-pill {\n  font-size: 12px; padding: 2px 10px;\n  border-radius: var(--border-radius-md);\n}\n.status-pill.active {\n  background: var(--color-background-success);\n  color: var(--color-text-success);\n}\n.status-pill.paused {\n  background: var(--color-background-warning);\n  color: var(--color-text-warning);\n}\n",[8148],{"type":62,"tag":93,"props":8149,"children":8150},{"__ignoreMap":301},[8151,8222,8242,8301,8341,8387,8424,8431,8489,8509,8532,8568,8575,8628,8644,8685,8712,8719,8743,8771,8799,8806,8830,8858,8886],{"type":62,"tag":307,"props":8152,"children":8153},{"class":309,"line":310},[8154,8158,8163,8167,8171,8175,8179,8183,8188,8192,8197,8201,8205,8209,8214,8218],{"type":62,"tag":307,"props":8155,"children":8156},{"style":926},[8157],{"type":68,"value":848},{"type":62,"tag":307,"props":8159,"children":8160},{"style":1054},[8161],{"type":68,"value":8162},"data-table",{"type":62,"tag":307,"props":8164,"children":8165},{"style":926},[8166],{"type":68,"value":1412},{"type":62,"tag":307,"props":8168,"children":8169},{"style":1068},[8170],{"type":68,"value":5890},{"type":62,"tag":307,"props":8172,"children":8173},{"style":926},[8174],{"type":68,"value":1076},{"type":62,"tag":307,"props":8176,"children":8177},{"style":1131},[8178],{"type":68,"value":3320},{"type":62,"tag":307,"props":8180,"children":8181},{"style":926},[8182],{"type":68,"value":1431},{"type":62,"tag":307,"props":8184,"children":8185},{"style":1068},[8186],{"type":68,"value":8187}," border-collapse",{"type":62,"tag":307,"props":8189,"children":8190},{"style":926},[8191],{"type":68,"value":1076},{"type":62,"tag":307,"props":8193,"children":8194},{"style":324},[8195],{"type":68,"value":8196}," collapse",{"type":62,"tag":307,"props":8198,"children":8199},{"style":926},[8200],{"type":68,"value":1431},{"type":62,"tag":307,"props":8202,"children":8203},{"style":1068},[8204],{"type":68,"value":1417},{"type":62,"tag":307,"props":8206,"children":8207},{"style":926},[8208],{"type":68,"value":1076},{"type":62,"tag":307,"props":8210,"children":8211},{"style":1131},[8212],{"type":68,"value":8213}," 14px",{"type":62,"tag":307,"props":8215,"children":8216},{"style":926},[8217],{"type":68,"value":1431},{"type":62,"tag":307,"props":8219,"children":8220},{"style":926},[8221],{"type":68,"value":1454},{"type":62,"tag":307,"props":8223,"children":8224},{"class":309,"line":320},[8225,8229,8233,8238],{"type":62,"tag":307,"props":8226,"children":8227},{"style":926},[8228],{"type":68,"value":848},{"type":62,"tag":307,"props":8230,"children":8231},{"style":1054},[8232],{"type":68,"value":8162},{"type":62,"tag":307,"props":8234,"children":8235},{"style":1054},[8236],{"type":68,"value":8237}," th",{"type":62,"tag":307,"props":8239,"children":8240},{"style":926},[8241],{"type":68,"value":1062},{"type":62,"tag":307,"props":8243,"children":8244},{"class":309,"line":335},[8245,8250,8254,8259,8263,8268,8272,8277,8281,8285,8289,8293,8297],{"type":62,"tag":307,"props":8246,"children":8247},{"style":1068},[8248],{"type":68,"value":8249},"  text-align",{"type":62,"tag":307,"props":8251,"children":8252},{"style":926},[8253],{"type":68,"value":1076},{"type":62,"tag":307,"props":8255,"children":8256},{"style":324},[8257],{"type":68,"value":8258}," left",{"type":62,"tag":307,"props":8260,"children":8261},{"style":926},[8262],{"type":68,"value":1431},{"type":62,"tag":307,"props":8264,"children":8265},{"style":1068},[8266],{"type":68,"value":8267}," padding",{"type":62,"tag":307,"props":8269,"children":8270},{"style":926},[8271],{"type":68,"value":1076},{"type":62,"tag":307,"props":8273,"children":8274},{"style":1131},[8275],{"type":68,"value":8276}," 8px",{"type":62,"tag":307,"props":8278,"children":8279},{"style":1131},[8280],{"type":68,"value":1165},{"type":62,"tag":307,"props":8282,"children":8283},{"style":926},[8284],{"type":68,"value":1431},{"type":62,"tag":307,"props":8286,"children":8287},{"style":1068},[8288],{"type":68,"value":1436},{"type":62,"tag":307,"props":8290,"children":8291},{"style":926},[8292],{"type":68,"value":1076},{"type":62,"tag":307,"props":8294,"children":8295},{"style":1131},[8296],{"type":68,"value":1445},{"type":62,"tag":307,"props":8298,"children":8299},{"style":926},[8300],{"type":68,"value":1086},{"type":62,"tag":307,"props":8302,"children":8303},{"class":309,"line":349},[8304,8309,8313,8318,8323,8328,8332,8337],{"type":62,"tag":307,"props":8305,"children":8306},{"style":1068},[8307],{"type":68,"value":8308},"  border-bottom",{"type":62,"tag":307,"props":8310,"children":8311},{"style":926},[8312],{"type":68,"value":1076},{"type":62,"tag":307,"props":8314,"children":8315},{"style":1131},[8316],{"type":68,"value":8317}," 0.5px",{"type":62,"tag":307,"props":8319,"children":8320},{"style":324},[8321],{"type":68,"value":8322}," solid ",{"type":62,"tag":307,"props":8324,"children":8325},{"style":1101},[8326],{"type":68,"value":8327},"var",{"type":62,"tag":307,"props":8329,"children":8330},{"style":926},[8331],{"type":68,"value":1109},{"type":62,"tag":307,"props":8333,"children":8334},{"style":324},[8335],{"type":68,"value":8336},"--color-border-secondary",{"type":62,"tag":307,"props":8338,"children":8339},{"style":926},[8340],{"type":68,"value":1245},{"type":62,"tag":307,"props":8342,"children":8343},{"class":309,"line":363},[8344,8348,8352,8356,8360,8364,8369,8374,8378,8383],{"type":62,"tag":307,"props":8345,"children":8346},{"style":1068},[8347],{"type":68,"value":1347},{"type":62,"tag":307,"props":8349,"children":8350},{"style":926},[8351],{"type":68,"value":1076},{"type":62,"tag":307,"props":8353,"children":8354},{"style":1101},[8355],{"type":68,"value":1231},{"type":62,"tag":307,"props":8357,"children":8358},{"style":926},[8359],{"type":68,"value":1109},{"type":62,"tag":307,"props":8361,"children":8362},{"style":324},[8363],{"type":68,"value":1364},{"type":62,"tag":307,"props":8365,"children":8366},{"style":926},[8367],{"type":68,"value":8368},");",{"type":62,"tag":307,"props":8370,"children":8371},{"style":1068},[8372],{"type":68,"value":8373}," cursor",{"type":62,"tag":307,"props":8375,"children":8376},{"style":926},[8377],{"type":68,"value":1076},{"type":62,"tag":307,"props":8379,"children":8380},{"style":324},[8381],{"type":68,"value":8382}," pointer",{"type":62,"tag":307,"props":8384,"children":8385},{"style":926},[8386],{"type":68,"value":1086},{"type":62,"tag":307,"props":8388,"children":8389},{"class":309,"line":377},[8390,8395,8399,8404,8408,8412,8416,8420],{"type":62,"tag":307,"props":8391,"children":8392},{"style":1068},[8393],{"type":68,"value":8394},"  user-select",{"type":62,"tag":307,"props":8396,"children":8397},{"style":926},[8398],{"type":68,"value":1076},{"type":62,"tag":307,"props":8400,"children":8401},{"style":324},[8402],{"type":68,"value":8403}," none",{"type":62,"tag":307,"props":8405,"children":8406},{"style":926},[8407],{"type":68,"value":1431},{"type":62,"tag":307,"props":8409,"children":8410},{"style":1068},[8411],{"type":68,"value":1417},{"type":62,"tag":307,"props":8413,"children":8414},{"style":926},[8415],{"type":68,"value":1076},{"type":62,"tag":307,"props":8417,"children":8418},{"style":1131},[8419],{"type":68,"value":1165},{"type":62,"tag":307,"props":8421,"children":8422},{"style":926},[8423],{"type":68,"value":1086},{"type":62,"tag":307,"props":8425,"children":8426},{"class":309,"line":391},[8427],{"type":62,"tag":307,"props":8428,"children":8429},{"style":926},[8430],{"type":68,"value":1198},{"type":62,"tag":307,"props":8432,"children":8433},{"class":309,"line":405},[8434,8438,8442,8446,8450,8455,8459,8464,8468,8472,8476,8481,8485],{"type":62,"tag":307,"props":8435,"children":8436},{"style":926},[8437],{"type":68,"value":848},{"type":62,"tag":307,"props":8439,"children":8440},{"style":1054},[8441],{"type":68,"value":8162},{"type":62,"tag":307,"props":8443,"children":8444},{"style":1054},[8445],{"type":68,"value":8237},{"type":62,"tag":307,"props":8447,"children":8448},{"style":926},[8449],{"type":68,"value":1076},{"type":62,"tag":307,"props":8451,"children":8452},{"style":938},[8453],{"type":68,"value":8454},"hover",{"type":62,"tag":307,"props":8456,"children":8457},{"style":926},[8458],{"type":68,"value":1412},{"type":62,"tag":307,"props":8460,"children":8461},{"style":1068},[8462],{"type":68,"value":8463}," color",{"type":62,"tag":307,"props":8465,"children":8466},{"style":926},[8467],{"type":68,"value":1076},{"type":62,"tag":307,"props":8469,"children":8470},{"style":1101},[8471],{"type":68,"value":1231},{"type":62,"tag":307,"props":8473,"children":8474},{"style":926},[8475],{"type":68,"value":1109},{"type":62,"tag":307,"props":8477,"children":8478},{"style":324},[8479],{"type":68,"value":8480},"--color-text-primary",{"type":62,"tag":307,"props":8482,"children":8483},{"style":926},[8484],{"type":68,"value":8368},{"type":62,"tag":307,"props":8486,"children":8487},{"style":926},[8488],{"type":68,"value":1454},{"type":62,"tag":307,"props":8490,"children":8491},{"class":309,"line":419},[8492,8496,8500,8505],{"type":62,"tag":307,"props":8493,"children":8494},{"style":926},[8495],{"type":68,"value":848},{"type":62,"tag":307,"props":8497,"children":8498},{"style":1054},[8499],{"type":68,"value":8162},{"type":62,"tag":307,"props":8501,"children":8502},{"style":1054},[8503],{"type":68,"value":8504}," td",{"type":62,"tag":307,"props":8506,"children":8507},{"style":926},[8508],{"type":68,"value":1062},{"type":62,"tag":307,"props":8510,"children":8511},{"class":309,"line":429},[8512,8516,8520,8524,8528],{"type":62,"tag":307,"props":8513,"children":8514},{"style":1068},[8515],{"type":68,"value":1282},{"type":62,"tag":307,"props":8517,"children":8518},{"style":926},[8519],{"type":68,"value":1076},{"type":62,"tag":307,"props":8521,"children":8522},{"style":1131},[8523],{"type":68,"value":8276},{"type":62,"tag":307,"props":8525,"children":8526},{"style":1131},[8527],{"type":68,"value":1165},{"type":62,"tag":307,"props":8529,"children":8530},{"style":926},[8531],{"type":68,"value":1086},{"type":62,"tag":307,"props":8533,"children":8534},{"class":309,"line":438},[8535,8539,8543,8547,8551,8555,8559,8564],{"type":62,"tag":307,"props":8536,"children":8537},{"style":1068},[8538],{"type":68,"value":8308},{"type":62,"tag":307,"props":8540,"children":8541},{"style":926},[8542],{"type":68,"value":1076},{"type":62,"tag":307,"props":8544,"children":8545},{"style":1131},[8546],{"type":68,"value":8317},{"type":62,"tag":307,"props":8548,"children":8549},{"style":324},[8550],{"type":68,"value":8322},{"type":62,"tag":307,"props":8552,"children":8553},{"style":1101},[8554],{"type":68,"value":8327},{"type":62,"tag":307,"props":8556,"children":8557},{"style":926},[8558],{"type":68,"value":1109},{"type":62,"tag":307,"props":8560,"children":8561},{"style":324},[8562],{"type":68,"value":8563},"--color-border-tertiary",{"type":62,"tag":307,"props":8565,"children":8566},{"style":926},[8567],{"type":68,"value":1245},{"type":62,"tag":307,"props":8569,"children":8570},{"class":309,"line":452},[8571],{"type":62,"tag":307,"props":8572,"children":8573},{"style":926},[8574],{"type":68,"value":1198},{"type":62,"tag":307,"props":8576,"children":8577},{"class":309,"line":466},[8578,8582,8587,8591,8595,8599,8603,8607,8612,8616,8620,8624],{"type":62,"tag":307,"props":8579,"children":8580},{"style":926},[8581],{"type":68,"value":848},{"type":62,"tag":307,"props":8583,"children":8584},{"style":1054},[8585],{"type":68,"value":8586},"table-filter",{"type":62,"tag":307,"props":8588,"children":8589},{"style":926},[8590],{"type":68,"value":1412},{"type":62,"tag":307,"props":8592,"children":8593},{"style":1068},[8594],{"type":68,"value":5890},{"type":62,"tag":307,"props":8596,"children":8597},{"style":926},[8598],{"type":68,"value":1076},{"type":62,"tag":307,"props":8600,"children":8601},{"style":1131},[8602],{"type":68,"value":3320},{"type":62,"tag":307,"props":8604,"children":8605},{"style":926},[8606],{"type":68,"value":1431},{"type":62,"tag":307,"props":8608,"children":8609},{"style":1068},[8610],{"type":68,"value":8611}," margin-bottom",{"type":62,"tag":307,"props":8613,"children":8614},{"style":926},[8615],{"type":68,"value":1076},{"type":62,"tag":307,"props":8617,"children":8618},{"style":1131},[8619],{"type":68,"value":1165},{"type":62,"tag":307,"props":8621,"children":8622},{"style":926},[8623],{"type":68,"value":1431},{"type":62,"tag":307,"props":8625,"children":8626},{"style":926},[8627],{"type":68,"value":1454},{"type":62,"tag":307,"props":8629,"children":8630},{"class":309,"line":480},[8631,8635,8640],{"type":62,"tag":307,"props":8632,"children":8633},{"style":926},[8634],{"type":68,"value":848},{"type":62,"tag":307,"props":8636,"children":8637},{"style":1054},[8638],{"type":68,"value":8639},"status-pill",{"type":62,"tag":307,"props":8641,"children":8642},{"style":926},[8643],{"type":68,"value":1062},{"type":62,"tag":307,"props":8645,"children":8646},{"class":309,"line":489},[8647,8651,8655,8659,8663,8667,8671,8676,8681],{"type":62,"tag":307,"props":8648,"children":8649},{"style":1068},[8650],{"type":68,"value":1326},{"type":62,"tag":307,"props":8652,"children":8653},{"style":926},[8654],{"type":68,"value":1076},{"type":62,"tag":307,"props":8656,"children":8657},{"style":1131},[8658],{"type":68,"value":1165},{"type":62,"tag":307,"props":8660,"children":8661},{"style":926},[8662],{"type":68,"value":1431},{"type":62,"tag":307,"props":8664,"children":8665},{"style":1068},[8666],{"type":68,"value":8267},{"type":62,"tag":307,"props":8668,"children":8669},{"style":926},[8670],{"type":68,"value":1076},{"type":62,"tag":307,"props":8672,"children":8673},{"style":1131},[8674],{"type":68,"value":8675}," 2px",{"type":62,"tag":307,"props":8677,"children":8678},{"style":1131},[8679],{"type":68,"value":8680}," 10px",{"type":62,"tag":307,"props":8682,"children":8683},{"style":926},[8684],{"type":68,"value":1086},{"type":62,"tag":307,"props":8686,"children":8687},{"class":309,"line":497},[8688,8692,8696,8700,8704,8708],{"type":62,"tag":307,"props":8689,"children":8690},{"style":1068},[8691],{"type":68,"value":1253},{"type":62,"tag":307,"props":8693,"children":8694},{"style":926},[8695],{"type":68,"value":1076},{"type":62,"tag":307,"props":8697,"children":8698},{"style":1101},[8699],{"type":68,"value":1231},{"type":62,"tag":307,"props":8701,"children":8702},{"style":926},[8703],{"type":68,"value":1109},{"type":62,"tag":307,"props":8705,"children":8706},{"style":324},[8707],{"type":68,"value":1270},{"type":62,"tag":307,"props":8709,"children":8710},{"style":926},[8711],{"type":68,"value":1245},{"type":62,"tag":307,"props":8713,"children":8714},{"class":309,"line":506},[8715],{"type":62,"tag":307,"props":8716,"children":8717},{"style":926},[8718],{"type":68,"value":1198},{"type":62,"tag":307,"props":8720,"children":8721},{"class":309,"line":520},[8722,8726,8730,8734,8739],{"type":62,"tag":307,"props":8723,"children":8724},{"style":926},[8725],{"type":68,"value":848},{"type":62,"tag":307,"props":8727,"children":8728},{"style":1054},[8729],{"type":68,"value":8639},{"type":62,"tag":307,"props":8731,"children":8732},{"style":926},[8733],{"type":68,"value":848},{"type":62,"tag":307,"props":8735,"children":8736},{"style":1054},[8737],{"type":68,"value":8738},"active",{"type":62,"tag":307,"props":8740,"children":8741},{"style":926},[8742],{"type":68,"value":1062},{"type":62,"tag":307,"props":8744,"children":8745},{"class":309,"line":534},[8746,8750,8754,8758,8762,8767],{"type":62,"tag":307,"props":8747,"children":8748},{"style":1068},[8749],{"type":68,"value":1222},{"type":62,"tag":307,"props":8751,"children":8752},{"style":926},[8753],{"type":68,"value":1076},{"type":62,"tag":307,"props":8755,"children":8756},{"style":1101},[8757],{"type":68,"value":1231},{"type":62,"tag":307,"props":8759,"children":8760},{"style":926},[8761],{"type":68,"value":1109},{"type":62,"tag":307,"props":8763,"children":8764},{"style":324},[8765],{"type":68,"value":8766},"--color-background-success",{"type":62,"tag":307,"props":8768,"children":8769},{"style":926},[8770],{"type":68,"value":1245},{"type":62,"tag":307,"props":8772,"children":8773},{"class":309,"line":548},[8774,8778,8782,8786,8790,8795],{"type":62,"tag":307,"props":8775,"children":8776},{"style":1068},[8777],{"type":68,"value":1347},{"type":62,"tag":307,"props":8779,"children":8780},{"style":926},[8781],{"type":68,"value":1076},{"type":62,"tag":307,"props":8783,"children":8784},{"style":1101},[8785],{"type":68,"value":1231},{"type":62,"tag":307,"props":8787,"children":8788},{"style":926},[8789],{"type":68,"value":1109},{"type":62,"tag":307,"props":8791,"children":8792},{"style":324},[8793],{"type":68,"value":8794},"--color-text-success",{"type":62,"tag":307,"props":8796,"children":8797},{"style":926},[8798],{"type":68,"value":1245},{"type":62,"tag":307,"props":8800,"children":8801},{"class":309,"line":556},[8802],{"type":62,"tag":307,"props":8803,"children":8804},{"style":926},[8805],{"type":68,"value":1198},{"type":62,"tag":307,"props":8807,"children":8808},{"class":309,"line":565},[8809,8813,8817,8821,8826],{"type":62,"tag":307,"props":8810,"children":8811},{"style":926},[8812],{"type":68,"value":848},{"type":62,"tag":307,"props":8814,"children":8815},{"style":1054},[8816],{"type":68,"value":8639},{"type":62,"tag":307,"props":8818,"children":8819},{"style":926},[8820],{"type":68,"value":848},{"type":62,"tag":307,"props":8822,"children":8823},{"style":1054},[8824],{"type":68,"value":8825},"paused",{"type":62,"tag":307,"props":8827,"children":8828},{"style":926},[8829],{"type":68,"value":1062},{"type":62,"tag":307,"props":8831,"children":8832},{"class":309,"line":579},[8833,8837,8841,8845,8849,8854],{"type":62,"tag":307,"props":8834,"children":8835},{"style":1068},[8836],{"type":68,"value":1222},{"type":62,"tag":307,"props":8838,"children":8839},{"style":926},[8840],{"type":68,"value":1076},{"type":62,"tag":307,"props":8842,"children":8843},{"style":1101},[8844],{"type":68,"value":1231},{"type":62,"tag":307,"props":8846,"children":8847},{"style":926},[8848],{"type":68,"value":1109},{"type":62,"tag":307,"props":8850,"children":8851},{"style":324},[8852],{"type":68,"value":8853},"--color-background-warning",{"type":62,"tag":307,"props":8855,"children":8856},{"style":926},[8857],{"type":68,"value":1245},{"type":62,"tag":307,"props":8859,"children":8860},{"class":309,"line":593},[8861,8865,8869,8873,8877,8882],{"type":62,"tag":307,"props":8862,"children":8863},{"style":1068},[8864],{"type":68,"value":1347},{"type":62,"tag":307,"props":8866,"children":8867},{"style":926},[8868],{"type":68,"value":1076},{"type":62,"tag":307,"props":8870,"children":8871},{"style":1101},[8872],{"type":68,"value":1231},{"type":62,"tag":307,"props":8874,"children":8875},{"style":926},[8876],{"type":68,"value":1109},{"type":62,"tag":307,"props":8878,"children":8879},{"style":324},[8880],{"type":68,"value":8881},"--color-text-warning",{"type":62,"tag":307,"props":8883,"children":8884},{"style":926},[8885],{"type":68,"value":1245},{"type":62,"tag":307,"props":8887,"children":8888},{"class":309,"line":607},[8889],{"type":62,"tag":307,"props":8890,"children":8891},{"style":926},[8892],{"type":68,"value":1198},{"type":62,"tag":71,"props":8894,"children":8895},{},[8896],{"type":68,"value":1459},{"type":62,"tag":297,"props":8898,"children":8900},{"className":915,"code":8899,"language":147,"meta":301,"style":301},"\u003Cinput type=\"text\" class=\"table-filter\" placeholder=\"Filter...\"\n       oninput=\"filterTable(this.value)\">\n\n\u003Ctable class=\"data-table\" id=\"table\">\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth onclick=\"sortTable(0)\">Name\u003C\u002Fth>\n      \u003Cth onclick=\"sortTable(1)\">Value\u003C\u002Fth>\n      \u003Cth onclick=\"sortTable(2)\">Status\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody id=\"tbody\">\n    \u003C!-- Rows populated by JS -->\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n",[8901],{"type":62,"tag":93,"props":8902,"children":8903},{"__ignoreMap":301},[8904,8977,9023,9030,9085,9101,9116,9182,9246,9310,9325,9340,9376,9384,9399],{"type":62,"tag":307,"props":8905,"children":8906},{"class":309,"line":310},[8907,8911,8915,8919,8923,8927,8931,8935,8939,8943,8947,8951,8955,8960,8964,8968,8973],{"type":62,"tag":307,"props":8908,"children":8909},{"style":926},[8910],{"type":68,"value":929},{"type":62,"tag":307,"props":8912,"children":8913},{"style":932},[8914],{"type":68,"value":3595},{"type":62,"tag":307,"props":8916,"children":8917},{"style":938},[8918],{"type":68,"value":3600},{"type":62,"tag":307,"props":8920,"children":8921},{"style":926},[8922],{"type":68,"value":946},{"type":62,"tag":307,"props":8924,"children":8925},{"style":926},[8926],{"type":68,"value":951},{"type":62,"tag":307,"props":8928,"children":8929},{"style":954},[8930],{"type":68,"value":68},{"type":62,"tag":307,"props":8932,"children":8933},{"style":926},[8934],{"type":68,"value":951},{"type":62,"tag":307,"props":8936,"children":8937},{"style":938},[8938],{"type":68,"value":1482},{"type":62,"tag":307,"props":8940,"children":8941},{"style":926},[8942],{"type":68,"value":946},{"type":62,"tag":307,"props":8944,"children":8945},{"style":926},[8946],{"type":68,"value":951},{"type":62,"tag":307,"props":8948,"children":8949},{"style":954},[8950],{"type":68,"value":8586},{"type":62,"tag":307,"props":8952,"children":8953},{"style":926},[8954],{"type":68,"value":951},{"type":62,"tag":307,"props":8956,"children":8957},{"style":938},[8958],{"type":68,"value":8959}," placeholder",{"type":62,"tag":307,"props":8961,"children":8962},{"style":926},[8963],{"type":68,"value":946},{"type":62,"tag":307,"props":8965,"children":8966},{"style":926},[8967],{"type":68,"value":951},{"type":62,"tag":307,"props":8969,"children":8970},{"style":954},[8971],{"type":68,"value":8972},"Filter...",{"type":62,"tag":307,"props":8974,"children":8975},{"style":926},[8976],{"type":68,"value":3705},{"type":62,"tag":307,"props":8978,"children":8979},{"class":309,"line":320},[8980,8985,8989,8993,8998,9002,9007,9011,9015,9019],{"type":62,"tag":307,"props":8981,"children":8982},{"style":938},[8983],{"type":68,"value":8984},"       oninput",{"type":62,"tag":307,"props":8986,"children":8987},{"style":926},[8988],{"type":68,"value":946},{"type":62,"tag":307,"props":8990,"children":8991},{"style":926},[8992],{"type":68,"value":951},{"type":62,"tag":307,"props":8994,"children":8995},{"style":1101},[8996],{"type":68,"value":8997},"filterTable",{"type":62,"tag":307,"props":8999,"children":9000},{"style":954},[9001],{"type":68,"value":1109},{"type":62,"tag":307,"props":9003,"children":9004},{"style":926},[9005],{"type":68,"value":9006},"this.",{"type":62,"tag":307,"props":9008,"children":9009},{"style":324},[9010],{"type":68,"value":3740},{"type":62,"tag":307,"props":9012,"children":9013},{"style":954},[9014],{"type":68,"value":3745},{"type":62,"tag":307,"props":9016,"children":9017},{"style":926},[9018],{"type":68,"value":951},{"type":62,"tag":307,"props":9020,"children":9021},{"style":926},[9022],{"type":68,"value":982},{"type":62,"tag":307,"props":9024,"children":9025},{"class":309,"line":335},[9026],{"type":62,"tag":307,"props":9027,"children":9028},{"emptyLinePlaceholder":423},[9029],{"type":68,"value":426},{"type":62,"tag":307,"props":9031,"children":9032},{"class":309,"line":349},[9033,9037,9041,9045,9049,9053,9057,9061,9065,9069,9073,9077,9081],{"type":62,"tag":307,"props":9034,"children":9035},{"style":926},[9036],{"type":68,"value":929},{"type":62,"tag":307,"props":9038,"children":9039},{"style":932},[9040],{"type":68,"value":2269},{"type":62,"tag":307,"props":9042,"children":9043},{"style":938},[9044],{"type":68,"value":1482},{"type":62,"tag":307,"props":9046,"children":9047},{"style":926},[9048],{"type":68,"value":946},{"type":62,"tag":307,"props":9050,"children":9051},{"style":926},[9052],{"type":68,"value":951},{"type":62,"tag":307,"props":9054,"children":9055},{"style":954},[9056],{"type":68,"value":8162},{"type":62,"tag":307,"props":9058,"children":9059},{"style":926},[9060],{"type":68,"value":951},{"type":62,"tag":307,"props":9062,"children":9063},{"style":938},[9064],{"type":68,"value":3431},{"type":62,"tag":307,"props":9066,"children":9067},{"style":926},[9068],{"type":68,"value":946},{"type":62,"tag":307,"props":9070,"children":9071},{"style":926},[9072],{"type":68,"value":951},{"type":62,"tag":307,"props":9074,"children":9075},{"style":954},[9076],{"type":68,"value":2269},{"type":62,"tag":307,"props":9078,"children":9079},{"style":926},[9080],{"type":68,"value":951},{"type":62,"tag":307,"props":9082,"children":9083},{"style":926},[9084],{"type":68,"value":982},{"type":62,"tag":307,"props":9086,"children":9087},{"class":309,"line":363},[9088,9092,9097],{"type":62,"tag":307,"props":9089,"children":9090},{"style":926},[9091],{"type":68,"value":1510},{"type":62,"tag":307,"props":9093,"children":9094},{"style":932},[9095],{"type":68,"value":9096},"thead",{"type":62,"tag":307,"props":9098,"children":9099},{"style":926},[9100],{"type":68,"value":982},{"type":62,"tag":307,"props":9102,"children":9103},{"class":309,"line":377},[9104,9108,9112],{"type":62,"tag":307,"props":9105,"children":9106},{"style":926},[9107],{"type":68,"value":1546},{"type":62,"tag":307,"props":9109,"children":9110},{"style":932},[9111],{"type":68,"value":2306},{"type":62,"tag":307,"props":9113,"children":9114},{"style":926},[9115],{"type":68,"value":982},{"type":62,"tag":307,"props":9117,"children":9118},{"class":309,"line":391},[9119,9123,9128,9132,9136,9140,9145,9149,9153,9157,9161,9165,9170,9174,9178],{"type":62,"tag":307,"props":9120,"children":9121},{"style":926},[9122],{"type":68,"value":2068},{"type":62,"tag":307,"props":9124,"children":9125},{"style":932},[9126],{"type":68,"value":9127},"th",{"type":62,"tag":307,"props":9129,"children":9130},{"style":938},[9131],{"type":68,"value":3519},{"type":62,"tag":307,"props":9133,"children":9134},{"style":926},[9135],{"type":68,"value":946},{"type":62,"tag":307,"props":9137,"children":9138},{"style":926},[9139],{"type":68,"value":951},{"type":62,"tag":307,"props":9141,"children":9142},{"style":1101},[9143],{"type":68,"value":9144},"sortTable",{"type":62,"tag":307,"props":9146,"children":9147},{"style":954},[9148],{"type":68,"value":1109},{"type":62,"tag":307,"props":9150,"children":9151},{"style":1131},[9152],{"type":68,"value":4591},{"type":62,"tag":307,"props":9154,"children":9155},{"style":954},[9156],{"type":68,"value":3745},{"type":62,"tag":307,"props":9158,"children":9159},{"style":926},[9160],{"type":68,"value":951},{"type":62,"tag":307,"props":9162,"children":9163},{"style":926},[9164],{"type":68,"value":1575},{"type":62,"tag":307,"props":9166,"children":9167},{"style":324},[9168],{"type":68,"value":9169},"Name",{"type":62,"tag":307,"props":9171,"children":9172},{"style":926},[9173],{"type":68,"value":998},{"type":62,"tag":307,"props":9175,"children":9176},{"style":932},[9177],{"type":68,"value":9127},{"type":62,"tag":307,"props":9179,"children":9180},{"style":926},[9181],{"type":68,"value":982},{"type":62,"tag":307,"props":9183,"children":9184},{"class":309,"line":405},[9185,9189,9193,9197,9201,9205,9209,9213,9217,9221,9225,9229,9234,9238,9242],{"type":62,"tag":307,"props":9186,"children":9187},{"style":926},[9188],{"type":68,"value":2068},{"type":62,"tag":307,"props":9190,"children":9191},{"style":932},[9192],{"type":68,"value":9127},{"type":62,"tag":307,"props":9194,"children":9195},{"style":938},[9196],{"type":68,"value":3519},{"type":62,"tag":307,"props":9198,"children":9199},{"style":926},[9200],{"type":68,"value":946},{"type":62,"tag":307,"props":9202,"children":9203},{"style":926},[9204],{"type":68,"value":951},{"type":62,"tag":307,"props":9206,"children":9207},{"style":1101},[9208],{"type":68,"value":9144},{"type":62,"tag":307,"props":9210,"children":9211},{"style":954},[9212],{"type":68,"value":1109},{"type":62,"tag":307,"props":9214,"children":9215},{"style":1131},[9216],{"type":68,"value":3635},{"type":62,"tag":307,"props":9218,"children":9219},{"style":954},[9220],{"type":68,"value":3745},{"type":62,"tag":307,"props":9222,"children":9223},{"style":926},[9224],{"type":68,"value":951},{"type":62,"tag":307,"props":9226,"children":9227},{"style":926},[9228],{"type":68,"value":1575},{"type":62,"tag":307,"props":9230,"children":9231},{"style":324},[9232],{"type":68,"value":9233},"Value",{"type":62,"tag":307,"props":9235,"children":9236},{"style":926},[9237],{"type":68,"value":998},{"type":62,"tag":307,"props":9239,"children":9240},{"style":932},[9241],{"type":68,"value":9127},{"type":62,"tag":307,"props":9243,"children":9244},{"style":926},[9245],{"type":68,"value":982},{"type":62,"tag":307,"props":9247,"children":9248},{"class":309,"line":419},[9249,9253,9257,9261,9265,9269,9273,9277,9281,9285,9289,9293,9298,9302,9306],{"type":62,"tag":307,"props":9250,"children":9251},{"style":926},[9252],{"type":68,"value":2068},{"type":62,"tag":307,"props":9254,"children":9255},{"style":932},[9256],{"type":68,"value":9127},{"type":62,"tag":307,"props":9258,"children":9259},{"style":938},[9260],{"type":68,"value":3519},{"type":62,"tag":307,"props":9262,"children":9263},{"style":926},[9264],{"type":68,"value":946},{"type":62,"tag":307,"props":9266,"children":9267},{"style":926},[9268],{"type":68,"value":951},{"type":62,"tag":307,"props":9270,"children":9271},{"style":1101},[9272],{"type":68,"value":9144},{"type":62,"tag":307,"props":9274,"children":9275},{"style":954},[9276],{"type":68,"value":1109},{"type":62,"tag":307,"props":9278,"children":9279},{"style":1131},[9280],{"type":68,"value":6711},{"type":62,"tag":307,"props":9282,"children":9283},{"style":954},[9284],{"type":68,"value":3745},{"type":62,"tag":307,"props":9286,"children":9287},{"style":926},[9288],{"type":68,"value":951},{"type":62,"tag":307,"props":9290,"children":9291},{"style":926},[9292],{"type":68,"value":1575},{"type":62,"tag":307,"props":9294,"children":9295},{"style":324},[9296],{"type":68,"value":9297},"Status",{"type":62,"tag":307,"props":9299,"children":9300},{"style":926},[9301],{"type":68,"value":998},{"type":62,"tag":307,"props":9303,"children":9304},{"style":932},[9305],{"type":68,"value":9127},{"type":62,"tag":307,"props":9307,"children":9308},{"style":926},[9309],{"type":68,"value":982},{"type":62,"tag":307,"props":9311,"children":9312},{"class":309,"line":429},[9313,9317,9321],{"type":62,"tag":307,"props":9314,"children":9315},{"style":926},[9316],{"type":68,"value":2183},{"type":62,"tag":307,"props":9318,"children":9319},{"style":932},[9320],{"type":68,"value":2306},{"type":62,"tag":307,"props":9322,"children":9323},{"style":926},[9324],{"type":68,"value":982},{"type":62,"tag":307,"props":9326,"children":9327},{"class":309,"line":438},[9328,9332,9336],{"type":62,"tag":307,"props":9329,"children":9330},{"style":926},[9331],{"type":68,"value":1652},{"type":62,"tag":307,"props":9333,"children":9334},{"style":932},[9335],{"type":68,"value":9096},{"type":62,"tag":307,"props":9337,"children":9338},{"style":926},[9339],{"type":68,"value":982},{"type":62,"tag":307,"props":9341,"children":9342},{"class":309,"line":452},[9343,9347,9352,9356,9360,9364,9368,9372],{"type":62,"tag":307,"props":9344,"children":9345},{"style":926},[9346],{"type":68,"value":1510},{"type":62,"tag":307,"props":9348,"children":9349},{"style":932},[9350],{"type":68,"value":9351},"tbody",{"type":62,"tag":307,"props":9353,"children":9354},{"style":938},[9355],{"type":68,"value":3431},{"type":62,"tag":307,"props":9357,"children":9358},{"style":926},[9359],{"type":68,"value":946},{"type":62,"tag":307,"props":9361,"children":9362},{"style":926},[9363],{"type":68,"value":951},{"type":62,"tag":307,"props":9365,"children":9366},{"style":954},[9367],{"type":68,"value":9351},{"type":62,"tag":307,"props":9369,"children":9370},{"style":926},[9371],{"type":68,"value":951},{"type":62,"tag":307,"props":9373,"children":9374},{"style":926},[9375],{"type":68,"value":982},{"type":62,"tag":307,"props":9377,"children":9378},{"class":309,"line":466},[9379],{"type":62,"tag":307,"props":9380,"children":9381},{"style":314},[9382],{"type":68,"value":9383},"    \u003C!-- Rows populated by JS -->\n",{"type":62,"tag":307,"props":9385,"children":9386},{"class":309,"line":480},[9387,9391,9395],{"type":62,"tag":307,"props":9388,"children":9389},{"style":926},[9390],{"type":68,"value":1652},{"type":62,"tag":307,"props":9392,"children":9393},{"style":932},[9394],{"type":68,"value":9351},{"type":62,"tag":307,"props":9396,"children":9397},{"style":926},[9398],{"type":68,"value":982},{"type":62,"tag":307,"props":9400,"children":9401},{"class":309,"line":489},[9402,9406,9410],{"type":62,"tag":307,"props":9403,"children":9404},{"style":926},[9405],{"type":68,"value":998},{"type":62,"tag":307,"props":9407,"children":9408},{"style":932},[9409],{"type":68,"value":2269},{"type":62,"tag":307,"props":9411,"children":9412},{"style":926},[9413],{"type":68,"value":982},{"type":62,"tag":71,"props":9415,"children":9416},{},[9417],{"type":68,"value":3845},{"type":62,"tag":297,"props":9419,"children":9421},{"className":3848,"code":9420,"language":3850,"meta":301,"style":301},"function initTable(rows) {\n  window.tableData = rows;\n  window.sortCol = -1;\n  window.sortAsc = true;\n  renderRows(rows);\n}\n\nfunction renderRows(rows) {\n  document.getElementById('tbody').innerHTML = rows.map(r =>\n    `\u003Ctr>\u003Ctd>${r[0]}\u003C\u002Ftd>\u003Ctd>${r[1]}\u003C\u002Ftd>\n     \u003Ctd>\u003Cspan class=\"status-pill ${r[2] === 'Active' ? 'active' : 'paused'}\">${r[2]}\u003C\u002Fspan>\n     \u003C\u002Ftd>\u003C\u002Ftr>`\n  ).join('');\n}\n\nfunction sortTable(col) {\n  window.sortAsc = window.sortCol === col ? !window.sortAsc : true;\n  window.sortCol = col;\n  const asc = window.sortAsc;\n  window.tableData.sort((a, b) => {\n    if (a[col] \u003C b[col]) return asc ? -1 : 1;\n    if (a[col] > b[col]) return asc ? 1 : -1;\n    return 0;\n  });\n  renderRows(window.tableData);\n}\n\nfunction filterTable(q) {\n  const low = q.toLowerCase();\n  renderRows(window.tableData.filter(r =>\n    r.some(c => String(c).toLowerCase().includes(low))));\n}\n",[9422],{"type":62,"tag":93,"props":9423,"children":9424},{"__ignoreMap":301},[9425,9454,9483,9515,9543,9567,9574,9581,9609,9684,9750,9855,9868,9902,9909,9916,9945,10017,10044,10076,10134,10215,10294,10310,10326,10357,10364,10371,10400,10438,10482,10568],{"type":62,"tag":307,"props":9426,"children":9427},{"class":309,"line":310},[9428,9432,9437,9441,9446,9450],{"type":62,"tag":307,"props":9429,"children":9430},{"style":938},[9431],{"type":68,"value":3862},{"type":62,"tag":307,"props":9433,"children":9434},{"style":1101},[9435],{"type":68,"value":9436}," initTable",{"type":62,"tag":307,"props":9438,"children":9439},{"style":926},[9440],{"type":68,"value":1109},{"type":62,"tag":307,"props":9442,"children":9443},{"style":3874},[9444],{"type":68,"value":9445},"rows",{"type":62,"tag":307,"props":9447,"children":9448},{"style":926},[9449],{"type":68,"value":3745},{"type":62,"tag":307,"props":9451,"children":9452},{"style":926},[9453],{"type":68,"value":1062},{"type":62,"tag":307,"props":9455,"children":9456},{"class":309,"line":320},[9457,9461,9465,9470,9474,9479],{"type":62,"tag":307,"props":9458,"children":9459},{"style":324},[9460],{"type":68,"value":4025},{"type":62,"tag":307,"props":9462,"children":9463},{"style":926},[9464],{"type":68,"value":848},{"type":62,"tag":307,"props":9466,"children":9467},{"style":324},[9468],{"type":68,"value":9469},"tableData",{"type":62,"tag":307,"props":9471,"children":9472},{"style":926},[9473],{"type":68,"value":3903},{"type":62,"tag":307,"props":9475,"children":9476},{"style":324},[9477],{"type":68,"value":9478}," rows",{"type":62,"tag":307,"props":9480,"children":9481},{"style":926},[9482],{"type":68,"value":1086},{"type":62,"tag":307,"props":9484,"children":9485},{"class":309,"line":335},[9486,9490,9494,9499,9503,9507,9511],{"type":62,"tag":307,"props":9487,"children":9488},{"style":324},[9489],{"type":68,"value":4025},{"type":62,"tag":307,"props":9491,"children":9492},{"style":926},[9493],{"type":68,"value":848},{"type":62,"tag":307,"props":9495,"children":9496},{"style":324},[9497],{"type":68,"value":9498},"sortCol",{"type":62,"tag":307,"props":9500,"children":9501},{"style":926},[9502],{"type":68,"value":3903},{"type":62,"tag":307,"props":9504,"children":9505},{"style":926},[9506],{"type":68,"value":4882},{"type":62,"tag":307,"props":9508,"children":9509},{"style":1131},[9510],{"type":68,"value":3635},{"type":62,"tag":307,"props":9512,"children":9513},{"style":926},[9514],{"type":68,"value":1086},{"type":62,"tag":307,"props":9516,"children":9517},{"class":309,"line":349},[9518,9522,9526,9531,9535,9539],{"type":62,"tag":307,"props":9519,"children":9520},{"style":324},[9521],{"type":68,"value":4025},{"type":62,"tag":307,"props":9523,"children":9524},{"style":926},[9525],{"type":68,"value":848},{"type":62,"tag":307,"props":9527,"children":9528},{"style":324},[9529],{"type":68,"value":9530},"sortAsc",{"type":62,"tag":307,"props":9532,"children":9533},{"style":926},[9534],{"type":68,"value":3903},{"type":62,"tag":307,"props":9536,"children":9537},{"style":4118},[9538],{"type":68,"value":4121},{"type":62,"tag":307,"props":9540,"children":9541},{"style":926},[9542],{"type":68,"value":1086},{"type":62,"tag":307,"props":9544,"children":9545},{"class":309,"line":363},[9546,9551,9555,9559,9563],{"type":62,"tag":307,"props":9547,"children":9548},{"style":1101},[9549],{"type":68,"value":9550},"  renderRows",{"type":62,"tag":307,"props":9552,"children":9553},{"style":932},[9554],{"type":68,"value":1109},{"type":62,"tag":307,"props":9556,"children":9557},{"style":324},[9558],{"type":68,"value":9445},{"type":62,"tag":307,"props":9560,"children":9561},{"style":932},[9562],{"type":68,"value":3745},{"type":62,"tag":307,"props":9564,"children":9565},{"style":926},[9566],{"type":68,"value":1086},{"type":62,"tag":307,"props":9568,"children":9569},{"class":309,"line":377},[9570],{"type":62,"tag":307,"props":9571,"children":9572},{"style":926},[9573],{"type":68,"value":1198},{"type":62,"tag":307,"props":9575,"children":9576},{"class":309,"line":391},[9577],{"type":62,"tag":307,"props":9578,"children":9579},{"emptyLinePlaceholder":423},[9580],{"type":68,"value":426},{"type":62,"tag":307,"props":9582,"children":9583},{"class":309,"line":405},[9584,9588,9593,9597,9601,9605],{"type":62,"tag":307,"props":9585,"children":9586},{"style":938},[9587],{"type":68,"value":3862},{"type":62,"tag":307,"props":9589,"children":9590},{"style":1101},[9591],{"type":68,"value":9592}," renderRows",{"type":62,"tag":307,"props":9594,"children":9595},{"style":926},[9596],{"type":68,"value":1109},{"type":62,"tag":307,"props":9598,"children":9599},{"style":3874},[9600],{"type":68,"value":9445},{"type":62,"tag":307,"props":9602,"children":9603},{"style":926},[9604],{"type":68,"value":3745},{"type":62,"tag":307,"props":9606,"children":9607},{"style":926},[9608],{"type":68,"value":1062},{"type":62,"tag":307,"props":9610,"children":9611},{"class":309,"line":419},[9612,9616,9620,9624,9628,9632,9636,9640,9644,9648,9653,9657,9661,9665,9670,9674,9679],{"type":62,"tag":307,"props":9613,"children":9614},{"style":324},[9615],{"type":68,"value":8030},{"type":62,"tag":307,"props":9617,"children":9618},{"style":926},[9619],{"type":68,"value":848},{"type":62,"tag":307,"props":9621,"children":9622},{"style":1101},[9623],{"type":68,"value":3917},{"type":62,"tag":307,"props":9625,"children":9626},{"style":932},[9627],{"type":68,"value":1109},{"type":62,"tag":307,"props":9629,"children":9630},{"style":926},[9631],{"type":68,"value":3926},{"type":62,"tag":307,"props":9633,"children":9634},{"style":954},[9635],{"type":68,"value":9351},{"type":62,"tag":307,"props":9637,"children":9638},{"style":926},[9639],{"type":68,"value":3926},{"type":62,"tag":307,"props":9641,"children":9642},{"style":932},[9643],{"type":68,"value":3745},{"type":62,"tag":307,"props":9645,"children":9646},{"style":926},[9647],{"type":68,"value":848},{"type":62,"tag":307,"props":9649,"children":9650},{"style":324},[9651],{"type":68,"value":9652},"innerHTML",{"type":62,"tag":307,"props":9654,"children":9655},{"style":926},[9656],{"type":68,"value":3903},{"type":62,"tag":307,"props":9658,"children":9659},{"style":324},[9660],{"type":68,"value":9478},{"type":62,"tag":307,"props":9662,"children":9663},{"style":926},[9664],{"type":68,"value":848},{"type":62,"tag":307,"props":9666,"children":9667},{"style":1101},[9668],{"type":68,"value":9669},"map",{"type":62,"tag":307,"props":9671,"children":9672},{"style":932},[9673],{"type":68,"value":1109},{"type":62,"tag":307,"props":9675,"children":9676},{"style":3874},[9677],{"type":68,"value":9678},"r",{"type":62,"tag":307,"props":9680,"children":9681},{"style":938},[9682],{"type":68,"value":9683}," =>\n",{"type":62,"tag":307,"props":9685,"children":9686},{"class":309,"line":429},[9687,9692,9697,9702,9707,9711,9715,9720,9725,9729,9733,9737,9741,9745],{"type":62,"tag":307,"props":9688,"children":9689},{"style":926},[9690],{"type":68,"value":9691},"    `",{"type":62,"tag":307,"props":9693,"children":9694},{"style":954},[9695],{"type":68,"value":9696},"\u003Ctr>\u003Ctd>",{"type":62,"tag":307,"props":9698,"children":9699},{"style":926},[9700],{"type":68,"value":9701},"${",{"type":62,"tag":307,"props":9703,"children":9704},{"style":324},[9705],{"type":68,"value":9706},"r[",{"type":62,"tag":307,"props":9708,"children":9709},{"style":1131},[9710],{"type":68,"value":4591},{"type":62,"tag":307,"props":9712,"children":9713},{"style":324},[9714],{"type":68,"value":5881},{"type":62,"tag":307,"props":9716,"children":9717},{"style":926},[9718],{"type":68,"value":9719},"}",{"type":62,"tag":307,"props":9721,"children":9722},{"style":954},[9723],{"type":68,"value":9724},"\u003C\u002Ftd>\u003Ctd>",{"type":62,"tag":307,"props":9726,"children":9727},{"style":926},[9728],{"type":68,"value":9701},{"type":62,"tag":307,"props":9730,"children":9731},{"style":324},[9732],{"type":68,"value":9706},{"type":62,"tag":307,"props":9734,"children":9735},{"style":1131},[9736],{"type":68,"value":3635},{"type":62,"tag":307,"props":9738,"children":9739},{"style":324},[9740],{"type":68,"value":5881},{"type":62,"tag":307,"props":9742,"children":9743},{"style":926},[9744],{"type":68,"value":9719},{"type":62,"tag":307,"props":9746,"children":9747},{"style":954},[9748],{"type":68,"value":9749},"\u003C\u002Ftd>\n",{"type":62,"tag":307,"props":9751,"children":9752},{"class":309,"line":438},[9753,9758,9762,9766,9770,9775,9780,9784,9788,9792,9796,9800,9804,9808,9812,9816,9820,9825,9830,9834,9838,9842,9846,9850],{"type":62,"tag":307,"props":9754,"children":9755},{"style":954},[9756],{"type":68,"value":9757},"     \u003Ctd>\u003Cspan class=\"status-pill ",{"type":62,"tag":307,"props":9759,"children":9760},{"style":926},[9761],{"type":68,"value":9701},{"type":62,"tag":307,"props":9763,"children":9764},{"style":324},[9765],{"type":68,"value":9706},{"type":62,"tag":307,"props":9767,"children":9768},{"style":1131},[9769],{"type":68,"value":6711},{"type":62,"tag":307,"props":9771,"children":9772},{"style":324},[9773],{"type":68,"value":9774},"] ",{"type":62,"tag":307,"props":9776,"children":9777},{"style":926},[9778],{"type":68,"value":9779},"===",{"type":62,"tag":307,"props":9781,"children":9782},{"style":926},[9783],{"type":68,"value":5132},{"type":62,"tag":307,"props":9785,"children":9786},{"style":954},[9787],{"type":68,"value":2579},{"type":62,"tag":307,"props":9789,"children":9790},{"style":926},[9791],{"type":68,"value":3926},{"type":62,"tag":307,"props":9793,"children":9794},{"style":926},[9795],{"type":68,"value":7877},{"type":62,"tag":307,"props":9797,"children":9798},{"style":926},[9799],{"type":68,"value":5132},{"type":62,"tag":307,"props":9801,"children":9802},{"style":954},[9803],{"type":68,"value":8738},{"type":62,"tag":307,"props":9805,"children":9806},{"style":926},[9807],{"type":68,"value":3926},{"type":62,"tag":307,"props":9809,"children":9810},{"style":926},[9811],{"type":68,"value":7895},{"type":62,"tag":307,"props":9813,"children":9814},{"style":926},[9815],{"type":68,"value":5132},{"type":62,"tag":307,"props":9817,"children":9818},{"style":954},[9819],{"type":68,"value":8825},{"type":62,"tag":307,"props":9821,"children":9822},{"style":926},[9823],{"type":68,"value":9824},"'}",{"type":62,"tag":307,"props":9826,"children":9827},{"style":954},[9828],{"type":68,"value":9829},"\">",{"type":62,"tag":307,"props":9831,"children":9832},{"style":926},[9833],{"type":68,"value":9701},{"type":62,"tag":307,"props":9835,"children":9836},{"style":324},[9837],{"type":68,"value":9706},{"type":62,"tag":307,"props":9839,"children":9840},{"style":1131},[9841],{"type":68,"value":6711},{"type":62,"tag":307,"props":9843,"children":9844},{"style":324},[9845],{"type":68,"value":5881},{"type":62,"tag":307,"props":9847,"children":9848},{"style":926},[9849],{"type":68,"value":9719},{"type":62,"tag":307,"props":9851,"children":9852},{"style":954},[9853],{"type":68,"value":9854},"\u003C\u002Fspan>\n",{"type":62,"tag":307,"props":9856,"children":9857},{"class":309,"line":452},[9858,9863],{"type":62,"tag":307,"props":9859,"children":9860},{"style":954},[9861],{"type":68,"value":9862},"     \u003C\u002Ftd>\u003C\u002Ftr>",{"type":62,"tag":307,"props":9864,"children":9865},{"style":926},[9866],{"type":68,"value":9867},"`\n",{"type":62,"tag":307,"props":9869,"children":9870},{"class":309,"line":466},[9871,9876,9880,9885,9889,9894,9898],{"type":62,"tag":307,"props":9872,"children":9873},{"style":932},[9874],{"type":68,"value":9875},"  )",{"type":62,"tag":307,"props":9877,"children":9878},{"style":926},[9879],{"type":68,"value":848},{"type":62,"tag":307,"props":9881,"children":9882},{"style":1101},[9883],{"type":68,"value":9884},"join",{"type":62,"tag":307,"props":9886,"children":9887},{"style":932},[9888],{"type":68,"value":1109},{"type":62,"tag":307,"props":9890,"children":9891},{"style":926},[9892],{"type":68,"value":9893},"''",{"type":62,"tag":307,"props":9895,"children":9896},{"style":932},[9897],{"type":68,"value":3745},{"type":62,"tag":307,"props":9899,"children":9900},{"style":926},[9901],{"type":68,"value":1086},{"type":62,"tag":307,"props":9903,"children":9904},{"class":309,"line":480},[9905],{"type":62,"tag":307,"props":9906,"children":9907},{"style":926},[9908],{"type":68,"value":1198},{"type":62,"tag":307,"props":9910,"children":9911},{"class":309,"line":489},[9912],{"type":62,"tag":307,"props":9913,"children":9914},{"emptyLinePlaceholder":423},[9915],{"type":68,"value":426},{"type":62,"tag":307,"props":9917,"children":9918},{"class":309,"line":497},[9919,9923,9928,9932,9937,9941],{"type":62,"tag":307,"props":9920,"children":9921},{"style":938},[9922],{"type":68,"value":3862},{"type":62,"tag":307,"props":9924,"children":9925},{"style":1101},[9926],{"type":68,"value":9927}," sortTable",{"type":62,"tag":307,"props":9929,"children":9930},{"style":926},[9931],{"type":68,"value":1109},{"type":62,"tag":307,"props":9933,"children":9934},{"style":3874},[9935],{"type":68,"value":9936},"col",{"type":62,"tag":307,"props":9938,"children":9939},{"style":926},[9940],{"type":68,"value":3745},{"type":62,"tag":307,"props":9942,"children":9943},{"style":926},[9944],{"type":68,"value":1062},{"type":62,"tag":307,"props":9946,"children":9947},{"class":309,"line":506},[9948,9952,9956,9960,9964,9968,9972,9976,9980,9985,9989,9993,9997,10001,10005,10009,10013],{"type":62,"tag":307,"props":9949,"children":9950},{"style":324},[9951],{"type":68,"value":4025},{"type":62,"tag":307,"props":9953,"children":9954},{"style":926},[9955],{"type":68,"value":848},{"type":62,"tag":307,"props":9957,"children":9958},{"style":324},[9959],{"type":68,"value":9530},{"type":62,"tag":307,"props":9961,"children":9962},{"style":926},[9963],{"type":68,"value":3903},{"type":62,"tag":307,"props":9965,"children":9966},{"style":324},[9967],{"type":68,"value":4553},{"type":62,"tag":307,"props":9969,"children":9970},{"style":926},[9971],{"type":68,"value":848},{"type":62,"tag":307,"props":9973,"children":9974},{"style":324},[9975],{"type":68,"value":9498},{"type":62,"tag":307,"props":9977,"children":9978},{"style":926},[9979],{"type":68,"value":7868},{"type":62,"tag":307,"props":9981,"children":9982},{"style":324},[9983],{"type":68,"value":9984}," col",{"type":62,"tag":307,"props":9986,"children":9987},{"style":926},[9988],{"type":68,"value":7877},{"type":62,"tag":307,"props":9990,"children":9991},{"style":926},[9992],{"type":68,"value":5363},{"type":62,"tag":307,"props":9994,"children":9995},{"style":324},[9996],{"type":68,"value":5368},{"type":62,"tag":307,"props":9998,"children":9999},{"style":926},[10000],{"type":68,"value":848},{"type":62,"tag":307,"props":10002,"children":10003},{"style":324},[10004],{"type":68,"value":9530},{"type":62,"tag":307,"props":10006,"children":10007},{"style":926},[10008],{"type":68,"value":7895},{"type":62,"tag":307,"props":10010,"children":10011},{"style":4118},[10012],{"type":68,"value":4121},{"type":62,"tag":307,"props":10014,"children":10015},{"style":926},[10016],{"type":68,"value":1086},{"type":62,"tag":307,"props":10018,"children":10019},{"class":309,"line":520},[10020,10024,10028,10032,10036,10040],{"type":62,"tag":307,"props":10021,"children":10022},{"style":324},[10023],{"type":68,"value":4025},{"type":62,"tag":307,"props":10025,"children":10026},{"style":926},[10027],{"type":68,"value":848},{"type":62,"tag":307,"props":10029,"children":10030},{"style":324},[10031],{"type":68,"value":9498},{"type":62,"tag":307,"props":10033,"children":10034},{"style":926},[10035],{"type":68,"value":3903},{"type":62,"tag":307,"props":10037,"children":10038},{"style":324},[10039],{"type":68,"value":9984},{"type":62,"tag":307,"props":10041,"children":10042},{"style":926},[10043],{"type":68,"value":1086},{"type":62,"tag":307,"props":10045,"children":10046},{"class":309,"line":534},[10047,10051,10056,10060,10064,10068,10072],{"type":62,"tag":307,"props":10048,"children":10049},{"style":938},[10050],{"type":68,"value":3893},{"type":62,"tag":307,"props":10052,"children":10053},{"style":324},[10054],{"type":68,"value":10055}," asc",{"type":62,"tag":307,"props":10057,"children":10058},{"style":926},[10059],{"type":68,"value":3903},{"type":62,"tag":307,"props":10061,"children":10062},{"style":324},[10063],{"type":68,"value":4553},{"type":62,"tag":307,"props":10065,"children":10066},{"style":926},[10067],{"type":68,"value":848},{"type":62,"tag":307,"props":10069,"children":10070},{"style":324},[10071],{"type":68,"value":9530},{"type":62,"tag":307,"props":10073,"children":10074},{"style":926},[10075],{"type":68,"value":1086},{"type":62,"tag":307,"props":10077,"children":10078},{"class":309,"line":548},[10079,10083,10087,10091,10095,10100,10104,10108,10113,10117,10122,10126,10130],{"type":62,"tag":307,"props":10080,"children":10081},{"style":324},[10082],{"type":68,"value":4025},{"type":62,"tag":307,"props":10084,"children":10085},{"style":926},[10086],{"type":68,"value":848},{"type":62,"tag":307,"props":10088,"children":10089},{"style":324},[10090],{"type":68,"value":9469},{"type":62,"tag":307,"props":10092,"children":10093},{"style":926},[10094],{"type":68,"value":848},{"type":62,"tag":307,"props":10096,"children":10097},{"style":1101},[10098],{"type":68,"value":10099},"sort",{"type":62,"tag":307,"props":10101,"children":10102},{"style":932},[10103],{"type":68,"value":1109},{"type":62,"tag":307,"props":10105,"children":10106},{"style":926},[10107],{"type":68,"value":1109},{"type":62,"tag":307,"props":10109,"children":10110},{"style":3874},[10111],{"type":68,"value":10112},"a",{"type":62,"tag":307,"props":10114,"children":10115},{"style":926},[10116],{"type":68,"value":1119},{"type":62,"tag":307,"props":10118,"children":10119},{"style":3874},[10120],{"type":68,"value":10121}," b",{"type":62,"tag":307,"props":10123,"children":10124},{"style":926},[10125],{"type":68,"value":3745},{"type":62,"tag":307,"props":10127,"children":10128},{"style":938},[10129],{"type":68,"value":4210},{"type":62,"tag":307,"props":10131,"children":10132},{"style":926},[10133],{"type":68,"value":1062},{"type":62,"tag":307,"props":10135,"children":10136},{"class":309,"line":556},[10137,10141,10145,10149,10153,10157,10161,10165,10169,10173,10177,10182,10187,10191,10195,10199,10203,10207,10211],{"type":62,"tag":307,"props":10138,"children":10139},{"style":4645},[10140],{"type":68,"value":4797},{"type":62,"tag":307,"props":10142,"children":10143},{"style":932},[10144],{"type":68,"value":199},{"type":62,"tag":307,"props":10146,"children":10147},{"style":324},[10148],{"type":68,"value":10112},{"type":62,"tag":307,"props":10150,"children":10151},{"style":932},[10152],{"type":68,"value":5854},{"type":62,"tag":307,"props":10154,"children":10155},{"style":324},[10156],{"type":68,"value":9936},{"type":62,"tag":307,"props":10158,"children":10159},{"style":932},[10160],{"type":68,"value":9774},{"type":62,"tag":307,"props":10162,"children":10163},{"style":926},[10164],{"type":68,"value":929},{"type":62,"tag":307,"props":10166,"children":10167},{"style":324},[10168],{"type":68,"value":10121},{"type":62,"tag":307,"props":10170,"children":10171},{"style":932},[10172],{"type":68,"value":5854},{"type":62,"tag":307,"props":10174,"children":10175},{"style":324},[10176],{"type":68,"value":9936},{"type":62,"tag":307,"props":10178,"children":10179},{"style":932},[10180],{"type":68,"value":10181},"]) ",{"type":62,"tag":307,"props":10183,"children":10184},{"style":4645},[10185],{"type":68,"value":10186},"return",{"type":62,"tag":307,"props":10188,"children":10189},{"style":324},[10190],{"type":68,"value":10055},{"type":62,"tag":307,"props":10192,"children":10193},{"style":926},[10194],{"type":68,"value":7877},{"type":62,"tag":307,"props":10196,"children":10197},{"style":926},[10198],{"type":68,"value":4882},{"type":62,"tag":307,"props":10200,"children":10201},{"style":1131},[10202],{"type":68,"value":3635},{"type":62,"tag":307,"props":10204,"children":10205},{"style":926},[10206],{"type":68,"value":7895},{"type":62,"tag":307,"props":10208,"children":10209},{"style":1131},[10210],{"type":68,"value":5967},{"type":62,"tag":307,"props":10212,"children":10213},{"style":926},[10214],{"type":68,"value":1086},{"type":62,"tag":307,"props":10216,"children":10217},{"class":309,"line":565},[10218,10222,10226,10230,10234,10238,10242,10246,10250,10254,10258,10262,10266,10270,10274,10278,10282,10286,10290],{"type":62,"tag":307,"props":10219,"children":10220},{"style":4645},[10221],{"type":68,"value":4797},{"type":62,"tag":307,"props":10223,"children":10224},{"style":932},[10225],{"type":68,"value":199},{"type":62,"tag":307,"props":10227,"children":10228},{"style":324},[10229],{"type":68,"value":10112},{"type":62,"tag":307,"props":10231,"children":10232},{"style":932},[10233],{"type":68,"value":5854},{"type":62,"tag":307,"props":10235,"children":10236},{"style":324},[10237],{"type":68,"value":9936},{"type":62,"tag":307,"props":10239,"children":10240},{"style":932},[10241],{"type":68,"value":9774},{"type":62,"tag":307,"props":10243,"children":10244},{"style":926},[10245],{"type":68,"value":1575},{"type":62,"tag":307,"props":10247,"children":10248},{"style":324},[10249],{"type":68,"value":10121},{"type":62,"tag":307,"props":10251,"children":10252},{"style":932},[10253],{"type":68,"value":5854},{"type":62,"tag":307,"props":10255,"children":10256},{"style":324},[10257],{"type":68,"value":9936},{"type":62,"tag":307,"props":10259,"children":10260},{"style":932},[10261],{"type":68,"value":10181},{"type":62,"tag":307,"props":10263,"children":10264},{"style":4645},[10265],{"type":68,"value":10186},{"type":62,"tag":307,"props":10267,"children":10268},{"style":324},[10269],{"type":68,"value":10055},{"type":62,"tag":307,"props":10271,"children":10272},{"style":926},[10273],{"type":68,"value":7877},{"type":62,"tag":307,"props":10275,"children":10276},{"style":1131},[10277],{"type":68,"value":5967},{"type":62,"tag":307,"props":10279,"children":10280},{"style":926},[10281],{"type":68,"value":7895},{"type":62,"tag":307,"props":10283,"children":10284},{"style":926},[10285],{"type":68,"value":4882},{"type":62,"tag":307,"props":10287,"children":10288},{"style":1131},[10289],{"type":68,"value":3635},{"type":62,"tag":307,"props":10291,"children":10292},{"style":926},[10293],{"type":68,"value":1086},{"type":62,"tag":307,"props":10295,"children":10296},{"class":309,"line":579},[10297,10302,10306],{"type":62,"tag":307,"props":10298,"children":10299},{"style":4645},[10300],{"type":68,"value":10301},"    return",{"type":62,"tag":307,"props":10303,"children":10304},{"style":1131},[10305],{"type":68,"value":3232},{"type":62,"tag":307,"props":10307,"children":10308},{"style":926},[10309],{"type":68,"value":1086},{"type":62,"tag":307,"props":10311,"children":10312},{"class":309,"line":593},[10313,10318,10322],{"type":62,"tag":307,"props":10314,"children":10315},{"style":926},[10316],{"type":68,"value":10317},"  }",{"type":62,"tag":307,"props":10319,"children":10320},{"style":932},[10321],{"type":68,"value":3745},{"type":62,"tag":307,"props":10323,"children":10324},{"style":926},[10325],{"type":68,"value":1086},{"type":62,"tag":307,"props":10327,"children":10328},{"class":309,"line":607},[10329,10333,10337,10341,10345,10349,10353],{"type":62,"tag":307,"props":10330,"children":10331},{"style":1101},[10332],{"type":68,"value":9550},{"type":62,"tag":307,"props":10334,"children":10335},{"style":932},[10336],{"type":68,"value":1109},{"type":62,"tag":307,"props":10338,"children":10339},{"style":324},[10340],{"type":68,"value":5368},{"type":62,"tag":307,"props":10342,"children":10343},{"style":926},[10344],{"type":68,"value":848},{"type":62,"tag":307,"props":10346,"children":10347},{"style":324},[10348],{"type":68,"value":9469},{"type":62,"tag":307,"props":10350,"children":10351},{"style":932},[10352],{"type":68,"value":3745},{"type":62,"tag":307,"props":10354,"children":10355},{"style":926},[10356],{"type":68,"value":1086},{"type":62,"tag":307,"props":10358,"children":10359},{"class":309,"line":615},[10360],{"type":62,"tag":307,"props":10361,"children":10362},{"style":926},[10363],{"type":68,"value":1198},{"type":62,"tag":307,"props":10365,"children":10366},{"class":309,"line":624},[10367],{"type":62,"tag":307,"props":10368,"children":10369},{"emptyLinePlaceholder":423},[10370],{"type":68,"value":426},{"type":62,"tag":307,"props":10372,"children":10373},{"class":309,"line":638},[10374,10378,10383,10387,10392,10396],{"type":62,"tag":307,"props":10375,"children":10376},{"style":938},[10377],{"type":68,"value":3862},{"type":62,"tag":307,"props":10379,"children":10380},{"style":1101},[10381],{"type":68,"value":10382}," filterTable",{"type":62,"tag":307,"props":10384,"children":10385},{"style":926},[10386],{"type":68,"value":1109},{"type":62,"tag":307,"props":10388,"children":10389},{"style":3874},[10390],{"type":68,"value":10391},"q",{"type":62,"tag":307,"props":10393,"children":10394},{"style":926},[10395],{"type":68,"value":3745},{"type":62,"tag":307,"props":10397,"children":10398},{"style":926},[10399],{"type":68,"value":1062},{"type":62,"tag":307,"props":10401,"children":10402},{"class":309,"line":652},[10403,10407,10412,10416,10421,10425,10430,10434],{"type":62,"tag":307,"props":10404,"children":10405},{"style":938},[10406],{"type":68,"value":3893},{"type":62,"tag":307,"props":10408,"children":10409},{"style":324},[10410],{"type":68,"value":10411}," low",{"type":62,"tag":307,"props":10413,"children":10414},{"style":926},[10415],{"type":68,"value":3903},{"type":62,"tag":307,"props":10417,"children":10418},{"style":324},[10419],{"type":68,"value":10420}," q",{"type":62,"tag":307,"props":10422,"children":10423},{"style":926},[10424],{"type":68,"value":848},{"type":62,"tag":307,"props":10426,"children":10427},{"style":1101},[10428],{"type":68,"value":10429},"toLowerCase",{"type":62,"tag":307,"props":10431,"children":10432},{"style":932},[10433],{"type":68,"value":3537},{"type":62,"tag":307,"props":10435,"children":10436},{"style":926},[10437],{"type":68,"value":1086},{"type":62,"tag":307,"props":10439,"children":10440},{"class":309,"line":2448},[10441,10445,10449,10453,10457,10461,10465,10470,10474,10478],{"type":62,"tag":307,"props":10442,"children":10443},{"style":1101},[10444],{"type":68,"value":9550},{"type":62,"tag":307,"props":10446,"children":10447},{"style":932},[10448],{"type":68,"value":1109},{"type":62,"tag":307,"props":10450,"children":10451},{"style":324},[10452],{"type":68,"value":5368},{"type":62,"tag":307,"props":10454,"children":10455},{"style":926},[10456],{"type":68,"value":848},{"type":62,"tag":307,"props":10458,"children":10459},{"style":324},[10460],{"type":68,"value":9469},{"type":62,"tag":307,"props":10462,"children":10463},{"style":926},[10464],{"type":68,"value":848},{"type":62,"tag":307,"props":10466,"children":10467},{"style":1101},[10468],{"type":68,"value":10469},"filter",{"type":62,"tag":307,"props":10471,"children":10472},{"style":932},[10473],{"type":68,"value":1109},{"type":62,"tag":307,"props":10475,"children":10476},{"style":3874},[10477],{"type":68,"value":9678},{"type":62,"tag":307,"props":10479,"children":10480},{"style":938},[10481],{"type":68,"value":9683},{"type":62,"tag":307,"props":10483,"children":10484},{"class":309,"line":2464},[10485,10490,10494,10499,10503,10508,10512,10517,10521,10525,10529,10533,10537,10541,10545,10550,10554,10559,10564],{"type":62,"tag":307,"props":10486,"children":10487},{"style":324},[10488],{"type":68,"value":10489},"    r",{"type":62,"tag":307,"props":10491,"children":10492},{"style":926},[10493],{"type":68,"value":848},{"type":62,"tag":307,"props":10495,"children":10496},{"style":1101},[10497],{"type":68,"value":10498},"some",{"type":62,"tag":307,"props":10500,"children":10501},{"style":932},[10502],{"type":68,"value":1109},{"type":62,"tag":307,"props":10504,"children":10505},{"style":3874},[10506],{"type":68,"value":10507},"c",{"type":62,"tag":307,"props":10509,"children":10510},{"style":938},[10511],{"type":68,"value":4210},{"type":62,"tag":307,"props":10513,"children":10514},{"style":1101},[10515],{"type":68,"value":10516}," String",{"type":62,"tag":307,"props":10518,"children":10519},{"style":932},[10520],{"type":68,"value":1109},{"type":62,"tag":307,"props":10522,"children":10523},{"style":324},[10524],{"type":68,"value":10507},{"type":62,"tag":307,"props":10526,"children":10527},{"style":932},[10528],{"type":68,"value":3745},{"type":62,"tag":307,"props":10530,"children":10531},{"style":926},[10532],{"type":68,"value":848},{"type":62,"tag":307,"props":10534,"children":10535},{"style":1101},[10536],{"type":68,"value":10429},{"type":62,"tag":307,"props":10538,"children":10539},{"style":932},[10540],{"type":68,"value":3537},{"type":62,"tag":307,"props":10542,"children":10543},{"style":926},[10544],{"type":68,"value":848},{"type":62,"tag":307,"props":10546,"children":10547},{"style":1101},[10548],{"type":68,"value":10549},"includes",{"type":62,"tag":307,"props":10551,"children":10552},{"style":932},[10553],{"type":68,"value":1109},{"type":62,"tag":307,"props":10555,"children":10556},{"style":324},[10557],{"type":68,"value":10558},"low",{"type":62,"tag":307,"props":10560,"children":10561},{"style":932},[10562],{"type":68,"value":10563},"))))",{"type":62,"tag":307,"props":10565,"children":10566},{"style":926},[10567],{"type":68,"value":1086},{"type":62,"tag":307,"props":10569,"children":10570},{"class":309,"line":2480},[10571],{"type":62,"tag":307,"props":10572,"children":10573},{"style":926},[10574],{"type":68,"value":1198},{"type":62,"tag":71,"props":10576,"children":10577},{},[10578],{"type":68,"value":5616},{"type":62,"tag":297,"props":10580,"children":10582},{"className":3848,"code":10581,"language":3850,"meta":301,"style":301},"initTable([\n  ['Alpha', 42, 'Active'],\n  ['Beta', 18, 'Paused'],\n  ['Gamma', 91, 'Active'],\n]);\n",[10583],{"type":62,"tag":93,"props":10584,"children":10585},{"__ignoreMap":301},[10586,10599,10653,10707,10760],{"type":62,"tag":307,"props":10587,"children":10588},{"class":309,"line":310},[10589,10594],{"type":62,"tag":307,"props":10590,"children":10591},{"style":1101},[10592],{"type":68,"value":10593},"initTable",{"type":62,"tag":307,"props":10595,"children":10596},{"style":324},[10597],{"type":68,"value":10598},"([\n",{"type":62,"tag":307,"props":10600,"children":10601},{"class":309,"line":320},[10602,10607,10611,10616,10620,10624,10629,10633,10637,10641,10645,10649],{"type":62,"tag":307,"props":10603,"children":10604},{"style":324},[10605],{"type":68,"value":10606},"  [",{"type":62,"tag":307,"props":10608,"children":10609},{"style":926},[10610],{"type":68,"value":3926},{"type":62,"tag":307,"props":10612,"children":10613},{"style":954},[10614],{"type":68,"value":10615},"Alpha",{"type":62,"tag":307,"props":10617,"children":10618},{"style":926},[10619],{"type":68,"value":3926},{"type":62,"tag":307,"props":10621,"children":10622},{"style":926},[10623],{"type":68,"value":1119},{"type":62,"tag":307,"props":10625,"children":10626},{"style":1131},[10627],{"type":68,"value":10628}," 42",{"type":62,"tag":307,"props":10630,"children":10631},{"style":926},[10632],{"type":68,"value":1119},{"type":62,"tag":307,"props":10634,"children":10635},{"style":926},[10636],{"type":68,"value":5132},{"type":62,"tag":307,"props":10638,"children":10639},{"style":954},[10640],{"type":68,"value":2579},{"type":62,"tag":307,"props":10642,"children":10643},{"style":926},[10644],{"type":68,"value":3926},{"type":62,"tag":307,"props":10646,"children":10647},{"style":324},[10648],{"type":68,"value":5881},{"type":62,"tag":307,"props":10650,"children":10651},{"style":926},[10652],{"type":68,"value":771},{"type":62,"tag":307,"props":10654,"children":10655},{"class":309,"line":335},[10656,10660,10664,10669,10673,10677,10682,10686,10690,10695,10699,10703],{"type":62,"tag":307,"props":10657,"children":10658},{"style":324},[10659],{"type":68,"value":10606},{"type":62,"tag":307,"props":10661,"children":10662},{"style":926},[10663],{"type":68,"value":3926},{"type":62,"tag":307,"props":10665,"children":10666},{"style":954},[10667],{"type":68,"value":10668},"Beta",{"type":62,"tag":307,"props":10670,"children":10671},{"style":926},[10672],{"type":68,"value":3926},{"type":62,"tag":307,"props":10674,"children":10675},{"style":926},[10676],{"type":68,"value":1119},{"type":62,"tag":307,"props":10678,"children":10679},{"style":1131},[10680],{"type":68,"value":10681}," 18",{"type":62,"tag":307,"props":10683,"children":10684},{"style":926},[10685],{"type":68,"value":1119},{"type":62,"tag":307,"props":10687,"children":10688},{"style":926},[10689],{"type":68,"value":5132},{"type":62,"tag":307,"props":10691,"children":10692},{"style":954},[10693],{"type":68,"value":10694},"Paused",{"type":62,"tag":307,"props":10696,"children":10697},{"style":926},[10698],{"type":68,"value":3926},{"type":62,"tag":307,"props":10700,"children":10701},{"style":324},[10702],{"type":68,"value":5881},{"type":62,"tag":307,"props":10704,"children":10705},{"style":926},[10706],{"type":68,"value":771},{"type":62,"tag":307,"props":10708,"children":10709},{"class":309,"line":349},[10710,10714,10718,10723,10727,10731,10736,10740,10744,10748,10752,10756],{"type":62,"tag":307,"props":10711,"children":10712},{"style":324},[10713],{"type":68,"value":10606},{"type":62,"tag":307,"props":10715,"children":10716},{"style":926},[10717],{"type":68,"value":3926},{"type":62,"tag":307,"props":10719,"children":10720},{"style":954},[10721],{"type":68,"value":10722},"Gamma",{"type":62,"tag":307,"props":10724,"children":10725},{"style":926},[10726],{"type":68,"value":3926},{"type":62,"tag":307,"props":10728,"children":10729},{"style":926},[10730],{"type":68,"value":1119},{"type":62,"tag":307,"props":10732,"children":10733},{"style":1131},[10734],{"type":68,"value":10735}," 91",{"type":62,"tag":307,"props":10737,"children":10738},{"style":926},[10739],{"type":68,"value":1119},{"type":62,"tag":307,"props":10741,"children":10742},{"style":926},[10743],{"type":68,"value":5132},{"type":62,"tag":307,"props":10745,"children":10746},{"style":954},[10747],{"type":68,"value":2579},{"type":62,"tag":307,"props":10749,"children":10750},{"style":926},[10751],{"type":68,"value":3926},{"type":62,"tag":307,"props":10753,"children":10754},{"style":324},[10755],{"type":68,"value":5881},{"type":62,"tag":307,"props":10757,"children":10758},{"style":926},[10759],{"type":68,"value":771},{"type":62,"tag":307,"props":10761,"children":10762},{"class":309,"line":363},[10763,10768],{"type":62,"tag":307,"props":10764,"children":10765},{"style":324},[10766],{"type":68,"value":10767},"])",{"type":62,"tag":307,"props":10769,"children":10770},{"style":926},[10771],{"type":68,"value":1086},{"type":62,"tag":77,"props":10773,"children":10774},{},[],{"type":62,"tag":81,"props":10776,"children":10778},{"id":10777},"part-4-chartjs-advanced-patterns",[10779],{"type":68,"value":10780},"Part 4: Chart.js — Advanced Patterns",{"type":62,"tag":290,"props":10782,"children":10784},{"id":10783},"dark-mode-awareness",[10785],{"type":68,"value":10786},"Dark Mode Awareness",{"type":62,"tag":297,"props":10788,"children":10791},{"className":10789,"code":10790,"language":45,"meta":301,"style":301},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\nconst textColor = isDark ? '#c2c0b6' : '#3d3d3a';\nconst gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)';\nconst tooltipBg = isDark ? '#2C2C2A' : '#fff';\n",[10792],{"type":62,"tag":93,"props":10793,"children":10794},{"__ignoreMap":301},[10795,10858,10917,10975],{"type":62,"tag":307,"props":10796,"children":10797},{"class":309,"line":310},[10798,10802,10807,10811,10815,10819,10824,10828,10832,10837,10841,10845,10849,10854],{"type":62,"tag":307,"props":10799,"children":10800},{"style":938},[10801],{"type":68,"value":4657},{"type":62,"tag":307,"props":10803,"children":10804},{"style":324},[10805],{"type":68,"value":10806}," isDark ",{"type":62,"tag":307,"props":10808,"children":10809},{"style":926},[10810],{"type":68,"value":946},{"type":62,"tag":307,"props":10812,"children":10813},{"style":324},[10814],{"type":68,"value":4553},{"type":62,"tag":307,"props":10816,"children":10817},{"style":926},[10818],{"type":68,"value":848},{"type":62,"tag":307,"props":10820,"children":10821},{"style":1101},[10822],{"type":68,"value":10823},"matchMedia",{"type":62,"tag":307,"props":10825,"children":10826},{"style":324},[10827],{"type":68,"value":1109},{"type":62,"tag":307,"props":10829,"children":10830},{"style":926},[10831],{"type":68,"value":3926},{"type":62,"tag":307,"props":10833,"children":10834},{"style":954},[10835],{"type":68,"value":10836},"(prefers-color-scheme: dark)",{"type":62,"tag":307,"props":10838,"children":10839},{"style":926},[10840],{"type":68,"value":3926},{"type":62,"tag":307,"props":10842,"children":10843},{"style":324},[10844],{"type":68,"value":3745},{"type":62,"tag":307,"props":10846,"children":10847},{"style":926},[10848],{"type":68,"value":848},{"type":62,"tag":307,"props":10850,"children":10851},{"style":324},[10852],{"type":68,"value":10853},"matches",{"type":62,"tag":307,"props":10855,"children":10856},{"style":926},[10857],{"type":68,"value":1086},{"type":62,"tag":307,"props":10859,"children":10860},{"class":309,"line":320},[10861,10865,10870,10874,10878,10883,10887,10892,10896,10900,10904,10909,10913],{"type":62,"tag":307,"props":10862,"children":10863},{"style":938},[10864],{"type":68,"value":4657},{"type":62,"tag":307,"props":10866,"children":10867},{"style":324},[10868],{"type":68,"value":10869}," textColor ",{"type":62,"tag":307,"props":10871,"children":10872},{"style":926},[10873],{"type":68,"value":946},{"type":62,"tag":307,"props":10875,"children":10876},{"style":324},[10877],{"type":68,"value":10806},{"type":62,"tag":307,"props":10879,"children":10880},{"style":926},[10881],{"type":68,"value":10882},"?",{"type":62,"tag":307,"props":10884,"children":10885},{"style":926},[10886],{"type":68,"value":5132},{"type":62,"tag":307,"props":10888,"children":10889},{"style":954},[10890],{"type":68,"value":10891},"#c2c0b6",{"type":62,"tag":307,"props":10893,"children":10894},{"style":926},[10895],{"type":68,"value":3926},{"type":62,"tag":307,"props":10897,"children":10898},{"style":926},[10899],{"type":68,"value":7895},{"type":62,"tag":307,"props":10901,"children":10902},{"style":926},[10903],{"type":68,"value":5132},{"type":62,"tag":307,"props":10905,"children":10906},{"style":954},[10907],{"type":68,"value":10908},"#3d3d3a",{"type":62,"tag":307,"props":10910,"children":10911},{"style":926},[10912],{"type":68,"value":3926},{"type":62,"tag":307,"props":10914,"children":10915},{"style":926},[10916],{"type":68,"value":1086},{"type":62,"tag":307,"props":10918,"children":10919},{"class":309,"line":335},[10920,10924,10929,10933,10937,10941,10945,10950,10954,10958,10962,10967,10971],{"type":62,"tag":307,"props":10921,"children":10922},{"style":938},[10923],{"type":68,"value":4657},{"type":62,"tag":307,"props":10925,"children":10926},{"style":324},[10927],{"type":68,"value":10928}," gridColor ",{"type":62,"tag":307,"props":10930,"children":10931},{"style":926},[10932],{"type":68,"value":946},{"type":62,"tag":307,"props":10934,"children":10935},{"style":324},[10936],{"type":68,"value":10806},{"type":62,"tag":307,"props":10938,"children":10939},{"style":926},[10940],{"type":68,"value":10882},{"type":62,"tag":307,"props":10942,"children":10943},{"style":926},[10944],{"type":68,"value":5132},{"type":62,"tag":307,"props":10946,"children":10947},{"style":954},[10948],{"type":68,"value":10949},"rgba(255,255,255,0.08)",{"type":62,"tag":307,"props":10951,"children":10952},{"style":926},[10953],{"type":68,"value":3926},{"type":62,"tag":307,"props":10955,"children":10956},{"style":926},[10957],{"type":68,"value":7895},{"type":62,"tag":307,"props":10959,"children":10960},{"style":926},[10961],{"type":68,"value":5132},{"type":62,"tag":307,"props":10963,"children":10964},{"style":954},[10965],{"type":68,"value":10966},"rgba(0,0,0,0.06)",{"type":62,"tag":307,"props":10968,"children":10969},{"style":926},[10970],{"type":68,"value":3926},{"type":62,"tag":307,"props":10972,"children":10973},{"style":926},[10974],{"type":68,"value":1086},{"type":62,"tag":307,"props":10976,"children":10977},{"class":309,"line":349},[10978,10982,10987,10991,10995,10999,11003,11008,11012,11016,11020,11024,11028],{"type":62,"tag":307,"props":10979,"children":10980},{"style":938},[10981],{"type":68,"value":4657},{"type":62,"tag":307,"props":10983,"children":10984},{"style":324},[10985],{"type":68,"value":10986}," tooltipBg ",{"type":62,"tag":307,"props":10988,"children":10989},{"style":926},[10990],{"type":68,"value":946},{"type":62,"tag":307,"props":10992,"children":10993},{"style":324},[10994],{"type":68,"value":10806},{"type":62,"tag":307,"props":10996,"children":10997},{"style":926},[10998],{"type":68,"value":10882},{"type":62,"tag":307,"props":11000,"children":11001},{"style":926},[11002],{"type":68,"value":5132},{"type":62,"tag":307,"props":11004,"children":11005},{"style":954},[11006],{"type":68,"value":11007},"#2C2C2A",{"type":62,"tag":307,"props":11009,"children":11010},{"style":926},[11011],{"type":68,"value":3926},{"type":62,"tag":307,"props":11013,"children":11014},{"style":926},[11015],{"type":68,"value":7895},{"type":62,"tag":307,"props":11017,"children":11018},{"style":926},[11019],{"type":68,"value":5132},{"type":62,"tag":307,"props":11021,"children":11022},{"style":954},[11023],{"type":68,"value":688},{"type":62,"tag":307,"props":11025,"children":11026},{"style":926},[11027],{"type":68,"value":3926},{"type":62,"tag":307,"props":11029,"children":11030},{"style":926},[11031],{"type":68,"value":1086},{"type":62,"tag":71,"props":11033,"children":11034},{},[11035],{"type":68,"value":11036},"Canvas cannot read CSS variables — always detect dark mode and use\nhardcoded hex values.",{"type":62,"tag":290,"props":11038,"children":11040},{"id":11039},"wrapper-pattern-critical-for-sizing",[11041],{"type":68,"value":11042},"Wrapper Pattern (Critical for Sizing)",{"type":62,"tag":297,"props":11044,"children":11046},{"className":915,"code":11045,"language":147,"meta":301,"style":301},"\u003Cdiv style=\"position: relative; width: 100%; height: 300px;\">\n  \u003Ccanvas id=\"chart\">\u003C\u002Fcanvas>\n\u003C\u002Fdiv>\n",[11047],{"type":62,"tag":93,"props":11048,"children":11049},{"__ignoreMap":301},[11050,11086,11130],{"type":62,"tag":307,"props":11051,"children":11052},{"class":309,"line":310},[11053,11057,11061,11065,11069,11073,11078,11082],{"type":62,"tag":307,"props":11054,"children":11055},{"style":926},[11056],{"type":68,"value":929},{"type":62,"tag":307,"props":11058,"children":11059},{"style":932},[11060],{"type":68,"value":935},{"type":62,"tag":307,"props":11062,"children":11063},{"style":938},[11064],{"type":68,"value":941},{"type":62,"tag":307,"props":11066,"children":11067},{"style":926},[11068],{"type":68,"value":946},{"type":62,"tag":307,"props":11070,"children":11071},{"style":926},[11072],{"type":68,"value":951},{"type":62,"tag":307,"props":11074,"children":11075},{"style":954},[11076],{"type":68,"value":11077},"position: relative; width: 100%; height: 300px;",{"type":62,"tag":307,"props":11079,"children":11080},{"style":926},[11081],{"type":68,"value":951},{"type":62,"tag":307,"props":11083,"children":11084},{"style":926},[11085],{"type":68,"value":982},{"type":62,"tag":307,"props":11087,"children":11088},{"class":309,"line":320},[11089,11093,11097,11101,11105,11109,11114,11118,11122,11126],{"type":62,"tag":307,"props":11090,"children":11091},{"style":926},[11092],{"type":68,"value":1510},{"type":62,"tag":307,"props":11094,"children":11095},{"style":932},[11096],{"type":68,"value":3426},{"type":62,"tag":307,"props":11098,"children":11099},{"style":938},[11100],{"type":68,"value":3431},{"type":62,"tag":307,"props":11102,"children":11103},{"style":926},[11104],{"type":68,"value":946},{"type":62,"tag":307,"props":11106,"children":11107},{"style":926},[11108],{"type":68,"value":951},{"type":62,"tag":307,"props":11110,"children":11111},{"style":954},[11112],{"type":68,"value":11113},"chart",{"type":62,"tag":307,"props":11115,"children":11116},{"style":926},[11117],{"type":68,"value":951},{"type":62,"tag":307,"props":11119,"children":11120},{"style":926},[11121],{"type":68,"value":3452},{"type":62,"tag":307,"props":11123,"children":11124},{"style":932},[11125],{"type":68,"value":3426},{"type":62,"tag":307,"props":11127,"children":11128},{"style":926},[11129],{"type":68,"value":982},{"type":62,"tag":307,"props":11131,"children":11132},{"class":309,"line":335},[11133,11137,11141],{"type":62,"tag":307,"props":11134,"children":11135},{"style":926},[11136],{"type":68,"value":998},{"type":62,"tag":307,"props":11138,"children":11139},{"style":932},[11140],{"type":68,"value":935},{"type":62,"tag":307,"props":11142,"children":11143},{"style":926},[11144],{"type":68,"value":982},{"type":62,"tag":698,"props":11146,"children":11147},{},[11148,11153,11165],{"type":62,"tag":106,"props":11149,"children":11150},{},[11151],{"type":68,"value":11152},"Height goes on the wrapper div ONLY, never on canvas.",{"type":62,"tag":106,"props":11154,"children":11155},{},[11156,11158,11164],{"type":68,"value":11157},"Always set ",{"type":62,"tag":93,"props":11159,"children":11161},{"className":11160},[],[11162],{"type":68,"value":11163},"responsive: true, maintainAspectRatio: false",{"type":68,"value":848},{"type":62,"tag":106,"props":11166,"children":11167},{},[11168],{"type":68,"value":11169},"For horizontal bar charts: height = (bars x 40) + 80 pixels.",{"type":62,"tag":290,"props":11171,"children":11173},{"id":11172},"custom-legend-always-use-this",[11174],{"type":68,"value":11175},"Custom Legend (Always Use This)",{"type":62,"tag":71,"props":11177,"children":11178},{},[11179],{"type":68,"value":11180},"Disable Chart.js default legend and build HTML:",{"type":62,"tag":297,"props":11182,"children":11184},{"className":10789,"code":11183,"language":45,"meta":301,"style":301},"plugins: { legend: { display: false } }\n",[11185],{"type":62,"tag":93,"props":11186,"children":11187},{"__ignoreMap":301},[11188],{"type":62,"tag":307,"props":11189,"children":11190},{"class":309,"line":310},[11191,11196,11200,11204,11209,11213,11217,11222,11226,11231,11235],{"type":62,"tag":307,"props":11192,"children":11193},{"style":1054},[11194],{"type":68,"value":11195},"plugins",{"type":62,"tag":307,"props":11197,"children":11198},{"style":926},[11199],{"type":68,"value":1076},{"type":62,"tag":307,"props":11201,"children":11202},{"style":926},[11203],{"type":68,"value":1412},{"type":62,"tag":307,"props":11205,"children":11206},{"style":1054},[11207],{"type":68,"value":11208}," legend",{"type":62,"tag":307,"props":11210,"children":11211},{"style":926},[11212],{"type":68,"value":1076},{"type":62,"tag":307,"props":11214,"children":11215},{"style":926},[11216],{"type":68,"value":1412},{"type":62,"tag":307,"props":11218,"children":11219},{"style":1054},[11220],{"type":68,"value":11221}," display",{"type":62,"tag":307,"props":11223,"children":11224},{"style":926},[11225],{"type":68,"value":1076},{"type":62,"tag":307,"props":11227,"children":11228},{"style":4118},[11229],{"type":68,"value":11230}," false",{"type":62,"tag":307,"props":11232,"children":11233},{"style":926},[11234],{"type":68,"value":4544},{"type":62,"tag":307,"props":11236,"children":11237},{"style":926},[11238],{"type":68,"value":1454},{"type":62,"tag":297,"props":11240,"children":11242},{"className":915,"code":11241,"language":147,"meta":301,"style":301},"\u003Cdiv style=\"display: flex; flex-wrap: wrap; gap: 16px;\n            margin-bottom: 8px; font-size: 12px;\n            color: var(--color-text-secondary);\">\n  \u003Cspan style=\"display: flex; align-items: center; gap: 4px;\">\n    \u003Cspan style=\"width: 10px; height: 10px; border-radius: 2px;\n                 background: #534AB7;\">\u003C\u002Fspan>Series A — 65%\n  \u003C\u002Fspan>\n  \u003Cspan style=\"display: flex; align-items: center; gap: 4px;\">\n    \u003Cspan style=\"width: 10px; height: 10px; border-radius: 2px;\n                 background: #0F6E56;\">\u003C\u002Fspan>Series B — 35%\n  \u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[11243],{"type":62,"tag":93,"props":11244,"children":11245},{"__ignoreMap":301},[11246,11274,11282,11298,11334,11362,11391,11406,11441,11468,11497,11512],{"type":62,"tag":307,"props":11247,"children":11248},{"class":309,"line":310},[11249,11253,11257,11261,11265,11269],{"type":62,"tag":307,"props":11250,"children":11251},{"style":926},[11252],{"type":68,"value":929},{"type":62,"tag":307,"props":11254,"children":11255},{"style":932},[11256],{"type":68,"value":935},{"type":62,"tag":307,"props":11258,"children":11259},{"style":938},[11260],{"type":68,"value":941},{"type":62,"tag":307,"props":11262,"children":11263},{"style":926},[11264],{"type":68,"value":946},{"type":62,"tag":307,"props":11266,"children":11267},{"style":926},[11268],{"type":68,"value":951},{"type":62,"tag":307,"props":11270,"children":11271},{"style":954},[11272],{"type":68,"value":11273},"display: flex; flex-wrap: wrap; gap: 16px;\n",{"type":62,"tag":307,"props":11275,"children":11276},{"class":309,"line":320},[11277],{"type":62,"tag":307,"props":11278,"children":11279},{"style":954},[11280],{"type":68,"value":11281},"            margin-bottom: 8px; font-size: 12px;\n",{"type":62,"tag":307,"props":11283,"children":11284},{"class":309,"line":335},[11285,11290,11294],{"type":62,"tag":307,"props":11286,"children":11287},{"style":954},[11288],{"type":68,"value":11289},"            color: var(--color-text-secondary);",{"type":62,"tag":307,"props":11291,"children":11292},{"style":926},[11293],{"type":68,"value":951},{"type":62,"tag":307,"props":11295,"children":11296},{"style":926},[11297],{"type":68,"value":982},{"type":62,"tag":307,"props":11299,"children":11300},{"class":309,"line":349},[11301,11305,11309,11313,11317,11321,11326,11330],{"type":62,"tag":307,"props":11302,"children":11303},{"style":926},[11304],{"type":68,"value":1510},{"type":62,"tag":307,"props":11306,"children":11307},{"style":932},[11308],{"type":68,"value":307},{"type":62,"tag":307,"props":11310,"children":11311},{"style":938},[11312],{"type":68,"value":941},{"type":62,"tag":307,"props":11314,"children":11315},{"style":926},[11316],{"type":68,"value":946},{"type":62,"tag":307,"props":11318,"children":11319},{"style":926},[11320],{"type":68,"value":951},{"type":62,"tag":307,"props":11322,"children":11323},{"style":954},[11324],{"type":68,"value":11325},"display: flex; align-items: center; gap: 4px;",{"type":62,"tag":307,"props":11327,"children":11328},{"style":926},[11329],{"type":68,"value":951},{"type":62,"tag":307,"props":11331,"children":11332},{"style":926},[11333],{"type":68,"value":982},{"type":62,"tag":307,"props":11335,"children":11336},{"class":309,"line":363},[11337,11341,11345,11349,11353,11357],{"type":62,"tag":307,"props":11338,"children":11339},{"style":926},[11340],{"type":68,"value":1546},{"type":62,"tag":307,"props":11342,"children":11343},{"style":932},[11344],{"type":68,"value":307},{"type":62,"tag":307,"props":11346,"children":11347},{"style":938},[11348],{"type":68,"value":941},{"type":62,"tag":307,"props":11350,"children":11351},{"style":926},[11352],{"type":68,"value":946},{"type":62,"tag":307,"props":11354,"children":11355},{"style":926},[11356],{"type":68,"value":951},{"type":62,"tag":307,"props":11358,"children":11359},{"style":954},[11360],{"type":68,"value":11361},"width: 10px; height: 10px; border-radius: 2px;\n",{"type":62,"tag":307,"props":11363,"children":11364},{"class":309,"line":377},[11365,11370,11374,11378,11382,11386],{"type":62,"tag":307,"props":11366,"children":11367},{"style":954},[11368],{"type":68,"value":11369},"                 background: #534AB7;",{"type":62,"tag":307,"props":11371,"children":11372},{"style":926},[11373],{"type":68,"value":951},{"type":62,"tag":307,"props":11375,"children":11376},{"style":926},[11377],{"type":68,"value":3452},{"type":62,"tag":307,"props":11379,"children":11380},{"style":932},[11381],{"type":68,"value":307},{"type":62,"tag":307,"props":11383,"children":11384},{"style":926},[11385],{"type":68,"value":1575},{"type":62,"tag":307,"props":11387,"children":11388},{"style":324},[11389],{"type":68,"value":11390},"Series A — 65%\n",{"type":62,"tag":307,"props":11392,"children":11393},{"class":309,"line":391},[11394,11398,11402],{"type":62,"tag":307,"props":11395,"children":11396},{"style":926},[11397],{"type":68,"value":1652},{"type":62,"tag":307,"props":11399,"children":11400},{"style":932},[11401],{"type":68,"value":307},{"type":62,"tag":307,"props":11403,"children":11404},{"style":926},[11405],{"type":68,"value":982},{"type":62,"tag":307,"props":11407,"children":11408},{"class":309,"line":405},[11409,11413,11417,11421,11425,11429,11433,11437],{"type":62,"tag":307,"props":11410,"children":11411},{"style":926},[11412],{"type":68,"value":1510},{"type":62,"tag":307,"props":11414,"children":11415},{"style":932},[11416],{"type":68,"value":307},{"type":62,"tag":307,"props":11418,"children":11419},{"style":938},[11420],{"type":68,"value":941},{"type":62,"tag":307,"props":11422,"children":11423},{"style":926},[11424],{"type":68,"value":946},{"type":62,"tag":307,"props":11426,"children":11427},{"style":926},[11428],{"type":68,"value":951},{"type":62,"tag":307,"props":11430,"children":11431},{"style":954},[11432],{"type":68,"value":11325},{"type":62,"tag":307,"props":11434,"children":11435},{"style":926},[11436],{"type":68,"value":951},{"type":62,"tag":307,"props":11438,"children":11439},{"style":926},[11440],{"type":68,"value":982},{"type":62,"tag":307,"props":11442,"children":11443},{"class":309,"line":419},[11444,11448,11452,11456,11460,11464],{"type":62,"tag":307,"props":11445,"children":11446},{"style":926},[11447],{"type":68,"value":1546},{"type":62,"tag":307,"props":11449,"children":11450},{"style":932},[11451],{"type":68,"value":307},{"type":62,"tag":307,"props":11453,"children":11454},{"style":938},[11455],{"type":68,"value":941},{"type":62,"tag":307,"props":11457,"children":11458},{"style":926},[11459],{"type":68,"value":946},{"type":62,"tag":307,"props":11461,"children":11462},{"style":926},[11463],{"type":68,"value":951},{"type":62,"tag":307,"props":11465,"children":11466},{"style":954},[11467],{"type":68,"value":11361},{"type":62,"tag":307,"props":11469,"children":11470},{"class":309,"line":429},[11471,11476,11480,11484,11488,11492],{"type":62,"tag":307,"props":11472,"children":11473},{"style":954},[11474],{"type":68,"value":11475},"                 background: #0F6E56;",{"type":62,"tag":307,"props":11477,"children":11478},{"style":926},[11479],{"type":68,"value":951},{"type":62,"tag":307,"props":11481,"children":11482},{"style":926},[11483],{"type":68,"value":3452},{"type":62,"tag":307,"props":11485,"children":11486},{"style":932},[11487],{"type":68,"value":307},{"type":62,"tag":307,"props":11489,"children":11490},{"style":926},[11491],{"type":68,"value":1575},{"type":62,"tag":307,"props":11493,"children":11494},{"style":324},[11495],{"type":68,"value":11496},"Series B — 35%\n",{"type":62,"tag":307,"props":11498,"children":11499},{"class":309,"line":438},[11500,11504,11508],{"type":62,"tag":307,"props":11501,"children":11502},{"style":926},[11503],{"type":68,"value":1652},{"type":62,"tag":307,"props":11505,"children":11506},{"style":932},[11507],{"type":68,"value":307},{"type":62,"tag":307,"props":11509,"children":11510},{"style":926},[11511],{"type":68,"value":982},{"type":62,"tag":307,"props":11513,"children":11514},{"class":309,"line":452},[11515,11519,11523],{"type":62,"tag":307,"props":11516,"children":11517},{"style":926},[11518],{"type":68,"value":998},{"type":62,"tag":307,"props":11520,"children":11521},{"style":932},[11522],{"type":68,"value":935},{"type":62,"tag":307,"props":11524,"children":11525},{"style":926},[11526],{"type":68,"value":982},{"type":62,"tag":290,"props":11528,"children":11530},{"id":11529},"dashboard-layout",[11531],{"type":68,"value":11532},"Dashboard Layout",{"type":62,"tag":71,"props":11534,"children":11535},{},[11536],{"type":68,"value":11537},"Metric cards on top -> chart below -> drill-down buttons wired to the\nsendPrompt bridge (Part 6):",{"type":62,"tag":297,"props":11539,"children":11541},{"className":915,"code":11540,"language":147,"meta":301,"style":301},"\u003C!-- Metric cards grid -->\n\u003Cdiv style=\"display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n            gap: 12px; margin-bottom: 1.5rem;\">\n  \u003C!-- cards here -->\n\u003C\u002Fdiv>\n\n\u003C!-- Chart (no card wrapper) -->\n\u003Cdiv style=\"position: relative; width: 100%; height: 300px;\">\n  \u003Ccanvas id=\"chart\">\u003C\u002Fcanvas>\n\u003C\u002Fdiv>\n",[11542],{"type":62,"tag":93,"props":11543,"children":11544},{"__ignoreMap":301},[11545,11553,11581,11589,11605,11613,11628,11635,11643,11678,11721],{"type":62,"tag":307,"props":11546,"children":11547},{"class":309,"line":310},[11548],{"type":62,"tag":307,"props":11549,"children":11550},{"style":314},[11551],{"type":68,"value":11552},"\u003C!-- Metric cards grid -->\n",{"type":62,"tag":307,"props":11554,"children":11555},{"class":309,"line":320},[11556,11560,11564,11568,11572,11576],{"type":62,"tag":307,"props":11557,"children":11558},{"style":926},[11559],{"type":68,"value":929},{"type":62,"tag":307,"props":11561,"children":11562},{"style":932},[11563],{"type":68,"value":935},{"type":62,"tag":307,"props":11565,"children":11566},{"style":938},[11567],{"type":68,"value":941},{"type":62,"tag":307,"props":11569,"children":11570},{"style":926},[11571],{"type":68,"value":946},{"type":62,"tag":307,"props":11573,"children":11574},{"style":926},[11575],{"type":68,"value":951},{"type":62,"tag":307,"props":11577,"children":11578},{"style":954},[11579],{"type":68,"value":11580},"display: grid;\n",{"type":62,"tag":307,"props":11582,"children":11583},{"class":309,"line":335},[11584],{"type":62,"tag":307,"props":11585,"children":11586},{"style":954},[11587],{"type":68,"value":11588},"            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n",{"type":62,"tag":307,"props":11590,"children":11591},{"class":309,"line":349},[11592,11597,11601],{"type":62,"tag":307,"props":11593,"children":11594},{"style":954},[11595],{"type":68,"value":11596},"            gap: 12px; margin-bottom: 1.5rem;",{"type":62,"tag":307,"props":11598,"children":11599},{"style":926},[11600],{"type":68,"value":951},{"type":62,"tag":307,"props":11602,"children":11603},{"style":926},[11604],{"type":68,"value":982},{"type":62,"tag":307,"props":11606,"children":11607},{"class":309,"line":363},[11608],{"type":62,"tag":307,"props":11609,"children":11610},{"style":314},[11611],{"type":68,"value":11612},"  \u003C!-- cards here -->\n",{"type":62,"tag":307,"props":11614,"children":11615},{"class":309,"line":377},[11616,11620,11624],{"type":62,"tag":307,"props":11617,"children":11618},{"style":926},[11619],{"type":68,"value":998},{"type":62,"tag":307,"props":11621,"children":11622},{"style":932},[11623],{"type":68,"value":935},{"type":62,"tag":307,"props":11625,"children":11626},{"style":926},[11627],{"type":68,"value":982},{"type":62,"tag":307,"props":11629,"children":11630},{"class":309,"line":391},[11631],{"type":62,"tag":307,"props":11632,"children":11633},{"emptyLinePlaceholder":423},[11634],{"type":68,"value":426},{"type":62,"tag":307,"props":11636,"children":11637},{"class":309,"line":405},[11638],{"type":62,"tag":307,"props":11639,"children":11640},{"style":314},[11641],{"type":68,"value":11642},"\u003C!-- Chart (no card wrapper) -->\n",{"type":62,"tag":307,"props":11644,"children":11645},{"class":309,"line":419},[11646,11650,11654,11658,11662,11666,11670,11674],{"type":62,"tag":307,"props":11647,"children":11648},{"style":926},[11649],{"type":68,"value":929},{"type":62,"tag":307,"props":11651,"children":11652},{"style":932},[11653],{"type":68,"value":935},{"type":62,"tag":307,"props":11655,"children":11656},{"style":938},[11657],{"type":68,"value":941},{"type":62,"tag":307,"props":11659,"children":11660},{"style":926},[11661],{"type":68,"value":946},{"type":62,"tag":307,"props":11663,"children":11664},{"style":926},[11665],{"type":68,"value":951},{"type":62,"tag":307,"props":11667,"children":11668},{"style":954},[11669],{"type":68,"value":11077},{"type":62,"tag":307,"props":11671,"children":11672},{"style":926},[11673],{"type":68,"value":951},{"type":62,"tag":307,"props":11675,"children":11676},{"style":926},[11677],{"type":68,"value":982},{"type":62,"tag":307,"props":11679,"children":11680},{"class":309,"line":429},[11681,11685,11689,11693,11697,11701,11705,11709,11713,11717],{"type":62,"tag":307,"props":11682,"children":11683},{"style":926},[11684],{"type":68,"value":1510},{"type":62,"tag":307,"props":11686,"children":11687},{"style":932},[11688],{"type":68,"value":3426},{"type":62,"tag":307,"props":11690,"children":11691},{"style":938},[11692],{"type":68,"value":3431},{"type":62,"tag":307,"props":11694,"children":11695},{"style":926},[11696],{"type":68,"value":946},{"type":62,"tag":307,"props":11698,"children":11699},{"style":926},[11700],{"type":68,"value":951},{"type":62,"tag":307,"props":11702,"children":11703},{"style":954},[11704],{"type":68,"value":11113},{"type":62,"tag":307,"props":11706,"children":11707},{"style":926},[11708],{"type":68,"value":951},{"type":62,"tag":307,"props":11710,"children":11711},{"style":926},[11712],{"type":68,"value":3452},{"type":62,"tag":307,"props":11714,"children":11715},{"style":932},[11716],{"type":68,"value":3426},{"type":62,"tag":307,"props":11718,"children":11719},{"style":926},[11720],{"type":68,"value":982},{"type":62,"tag":307,"props":11722,"children":11723},{"class":309,"line":438},[11724,11728,11732],{"type":62,"tag":307,"props":11725,"children":11726},{"style":926},[11727],{"type":68,"value":998},{"type":62,"tag":307,"props":11729,"children":11730},{"style":932},[11731],{"type":68,"value":935},{"type":62,"tag":307,"props":11733,"children":11734},{"style":926},[11735],{"type":68,"value":982},{"type":62,"tag":290,"props":11737,"children":11739},{"id":11738},"chart-type-selection-guide",[11740],{"type":68,"value":11741},"Chart Type Selection Guide",{"type":62,"tag":2269,"props":11743,"children":11744},{},[11745,11761],{"type":62,"tag":9096,"props":11746,"children":11747},{},[11748],{"type":62,"tag":2306,"props":11749,"children":11750},{},[11751,11756],{"type":62,"tag":9127,"props":11752,"children":11753},{},[11754],{"type":68,"value":11755},"Data pattern",{"type":62,"tag":9127,"props":11757,"children":11758},{},[11759],{"type":68,"value":11760},"Chart type",{"type":62,"tag":9351,"props":11762,"children":11763},{},[11764,11777,11790,11803,11816,11829,11842,11855],{"type":62,"tag":2306,"props":11765,"children":11766},{},[11767,11772],{"type":62,"tag":2323,"props":11768,"children":11769},{},[11770],{"type":68,"value":11771},"Trend over time",{"type":62,"tag":2323,"props":11773,"children":11774},{},[11775],{"type":68,"value":11776},"Line",{"type":62,"tag":2306,"props":11778,"children":11779},{},[11780,11785],{"type":62,"tag":2323,"props":11781,"children":11782},{},[11783],{"type":68,"value":11784},"Category comparison",{"type":62,"tag":2323,"props":11786,"children":11787},{},[11788],{"type":68,"value":11789},"Vertical bar",{"type":62,"tag":2306,"props":11791,"children":11792},{},[11793,11798],{"type":62,"tag":2323,"props":11794,"children":11795},{},[11796],{"type":68,"value":11797},"Ranking (few items)",{"type":62,"tag":2323,"props":11799,"children":11800},{},[11801],{"type":68,"value":11802},"Horizontal bar",{"type":62,"tag":2306,"props":11804,"children":11805},{},[11806,11811],{"type":62,"tag":2323,"props":11807,"children":11808},{},[11809],{"type":68,"value":11810},"Part of whole",{"type":62,"tag":2323,"props":11812,"children":11813},{},[11814],{"type":68,"value":11815},"Doughnut",{"type":62,"tag":2306,"props":11817,"children":11818},{},[11819,11824],{"type":62,"tag":2323,"props":11820,"children":11821},{},[11822],{"type":68,"value":11823},"Distribution",{"type":62,"tag":2323,"props":11825,"children":11826},{},[11827],{"type":68,"value":11828},"Histogram (bar)",{"type":62,"tag":2306,"props":11830,"children":11831},{},[11832,11837],{"type":62,"tag":2323,"props":11833,"children":11834},{},[11835],{"type":68,"value":11836},"Correlation (2 variables)",{"type":62,"tag":2323,"props":11838,"children":11839},{},[11840],{"type":68,"value":11841},"Scatter",{"type":62,"tag":2306,"props":11843,"children":11844},{},[11845,11850],{"type":62,"tag":2323,"props":11846,"children":11847},{},[11848],{"type":68,"value":11849},"Multi-variable comparison",{"type":62,"tag":2323,"props":11851,"children":11852},{},[11853],{"type":68,"value":11854},"Radar",{"type":62,"tag":2306,"props":11856,"children":11857},{},[11858,11863],{"type":62,"tag":2323,"props":11859,"children":11860},{},[11861],{"type":68,"value":11862},"Range \u002F uncertainty",{"type":62,"tag":2323,"props":11864,"children":11865},{},[11866],{"type":68,"value":11867},"Line with fill area",{"type":62,"tag":77,"props":11869,"children":11870},{},[],{"type":62,"tag":81,"props":11872,"children":11874},{"id":11873},"part-5-generative-art-and-illustration",[11875],{"type":68,"value":11876},"Part 5: Generative Art and Illustration",{"type":62,"tag":71,"props":11878,"children":11879},{},[11880],{"type":68,"value":11881},"For when the user asks for something creative, decorative, or aesthetic.",{"type":62,"tag":290,"props":11883,"children":11885},{"id":11884},"when-to-use-1",[11886],{"type":68,"value":868},{"type":62,"tag":698,"props":11888,"children":11889},{},[11890,11895,11900,11905],{"type":62,"tag":106,"props":11891,"children":11892},{},[11893],{"type":68,"value":11894},"\"Draw me a sunset\" \u002F \"Create a pattern\"",{"type":62,"tag":106,"props":11896,"children":11897},{},[11898],{"type":68,"value":11899},"Decorative headers or visual breaks",{"type":62,"tag":106,"props":11901,"children":11902},{},[11903],{"type":68,"value":11904},"Mood illustrations for creative writing",{"type":62,"tag":106,"props":11906,"children":11907},{},[11908],{"type":68,"value":11909},"Abstract visualizations of data or music",{"type":62,"tag":290,"props":11911,"children":11913},{"id":11912},"rules-different-from-diagrams",[11914],{"type":68,"value":11915},"Rules (Different from Diagrams)",{"type":62,"tag":698,"props":11917,"children":11918},{},[11919,11924,11929,11934,11960,11965,11976],{"type":62,"tag":106,"props":11920,"children":11921},{},[11922],{"type":68,"value":11923},"Fill the canvas — art should feel rich, not sparse",{"type":62,"tag":106,"props":11925,"children":11926},{},[11927],{"type":68,"value":11928},"Bold colors are encouraged. You can use custom hex freely.",{"type":62,"tag":106,"props":11930,"children":11931},{},[11932],{"type":68,"value":11933},"Layered overlapping shapes create depth",{"type":62,"tag":106,"props":11935,"children":11936},{},[11937,11939,11945,11947,11953,11954],{"type":68,"value":11938},"Organic forms with ",{"type":62,"tag":93,"props":11940,"children":11942},{"className":11941},[],[11943],{"type":68,"value":11944},"\u003Cpath>",{"type":68,"value":11946}," curves, ",{"type":62,"tag":93,"props":11948,"children":11950},{"className":11949},[],[11951],{"type":68,"value":11952},"\u003Cellipse>",{"type":68,"value":251},{"type":62,"tag":93,"props":11955,"children":11957},{"className":11956},[],[11958],{"type":68,"value":11959},"\u003Ccircle>",{"type":62,"tag":106,"props":11961,"children":11962},{},[11963],{"type":68,"value":11964},"Texture via repetition (hatching, dots, parallel lines)",{"type":62,"tag":106,"props":11966,"children":11967},{},[11968,11970],{"type":68,"value":11969},"Geometric patterns with ",{"type":62,"tag":93,"props":11971,"children":11973},{"className":11972},[],[11974],{"type":68,"value":11975},"\u003Cg transform=\"rotate()\">",{"type":62,"tag":106,"props":11977,"children":11978},{},[11979],{"type":68,"value":11980},"NO gradients, shadows, blur, or glow (still flat aesthetic)",{"type":62,"tag":290,"props":11982,"children":11984},{"id":11983},"pattern-geometric-art",[11985],{"type":68,"value":11986},"Pattern: Geometric Art",{"type":62,"tag":297,"props":11988,"children":11991},{"className":11989,"code":11990,"language":5998,"meta":301,"style":301},"language-svg shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Csvg width=\"100%\" viewBox=\"0 0 680 400\">\n  \u003C!-- Background shapes -->\n  \u003Ccircle cx=\"200\" cy=\"200\" r=\"150\" fill=\"#EEEDFE\" opacity=\"0.8\"\u002F>\n  \u003Ccircle cx=\"480\" cy=\"180\" r=\"120\" fill=\"#E1F5EE\" opacity=\"0.8\"\u002F>\n\n  \u003C!-- Overlapping geometric forms -->\n  \u003Crect x=\"150\" y=\"100\" width=\"200\" height=\"200\" rx=\"8\"\n        fill=\"#CECBF6\" opacity=\"0.6\"\n        transform=\"rotate(15 250 200)\"\u002F>\n  \u003Crect x=\"320\" y=\"80\" width=\"180\" height=\"180\" rx=\"8\"\n        fill=\"#9FE1CB\" opacity=\"0.6\"\n        transform=\"rotate(-10 410 170)\"\u002F>\n\n  \u003C!-- Detail lines -->\n  \u003Cline x1=\"100\" y1=\"300\" x2=\"580\" y2=\"300\"\n        stroke=\"#534AB7\" stroke-width=\"0.5\" opacity=\"0.3\"\u002F>\n  \u003Cline x1=\"100\" y1=\"310\" x2=\"580\" y2=\"310\"\n        stroke=\"#534AB7\" stroke-width=\"0.5\" opacity=\"0.2\"\u002F>\n\u003C\u002Fsvg>\n",[11992],{"type":62,"tag":93,"props":11993,"children":11994},{"__ignoreMap":301},[11995,12003,12011,12019,12027,12034,12042,12050,12058,12066,12074,12082,12090,12097,12105,12113,12121,12129,12137],{"type":62,"tag":307,"props":11996,"children":11997},{"class":309,"line":310},[11998],{"type":62,"tag":307,"props":11999,"children":12000},{},[12001],{"type":68,"value":12002},"\u003Csvg width=\"100%\" viewBox=\"0 0 680 400\">\n",{"type":62,"tag":307,"props":12004,"children":12005},{"class":309,"line":320},[12006],{"type":62,"tag":307,"props":12007,"children":12008},{},[12009],{"type":68,"value":12010},"  \u003C!-- Background shapes -->\n",{"type":62,"tag":307,"props":12012,"children":12013},{"class":309,"line":335},[12014],{"type":62,"tag":307,"props":12015,"children":12016},{},[12017],{"type":68,"value":12018},"  \u003Ccircle cx=\"200\" cy=\"200\" r=\"150\" fill=\"#EEEDFE\" opacity=\"0.8\"\u002F>\n",{"type":62,"tag":307,"props":12020,"children":12021},{"class":309,"line":349},[12022],{"type":62,"tag":307,"props":12023,"children":12024},{},[12025],{"type":68,"value":12026},"  \u003Ccircle cx=\"480\" cy=\"180\" r=\"120\" fill=\"#E1F5EE\" opacity=\"0.8\"\u002F>\n",{"type":62,"tag":307,"props":12028,"children":12029},{"class":309,"line":363},[12030],{"type":62,"tag":307,"props":12031,"children":12032},{"emptyLinePlaceholder":423},[12033],{"type":68,"value":426},{"type":62,"tag":307,"props":12035,"children":12036},{"class":309,"line":377},[12037],{"type":62,"tag":307,"props":12038,"children":12039},{},[12040],{"type":68,"value":12041},"  \u003C!-- Overlapping geometric forms -->\n",{"type":62,"tag":307,"props":12043,"children":12044},{"class":309,"line":391},[12045],{"type":62,"tag":307,"props":12046,"children":12047},{},[12048],{"type":68,"value":12049},"  \u003Crect x=\"150\" y=\"100\" width=\"200\" height=\"200\" rx=\"8\"\n",{"type":62,"tag":307,"props":12051,"children":12052},{"class":309,"line":405},[12053],{"type":62,"tag":307,"props":12054,"children":12055},{},[12056],{"type":68,"value":12057},"        fill=\"#CECBF6\" opacity=\"0.6\"\n",{"type":62,"tag":307,"props":12059,"children":12060},{"class":309,"line":419},[12061],{"type":62,"tag":307,"props":12062,"children":12063},{},[12064],{"type":68,"value":12065},"        transform=\"rotate(15 250 200)\"\u002F>\n",{"type":62,"tag":307,"props":12067,"children":12068},{"class":309,"line":429},[12069],{"type":62,"tag":307,"props":12070,"children":12071},{},[12072],{"type":68,"value":12073},"  \u003Crect x=\"320\" y=\"80\" width=\"180\" height=\"180\" rx=\"8\"\n",{"type":62,"tag":307,"props":12075,"children":12076},{"class":309,"line":438},[12077],{"type":62,"tag":307,"props":12078,"children":12079},{},[12080],{"type":68,"value":12081},"        fill=\"#9FE1CB\" opacity=\"0.6\"\n",{"type":62,"tag":307,"props":12083,"children":12084},{"class":309,"line":452},[12085],{"type":62,"tag":307,"props":12086,"children":12087},{},[12088],{"type":68,"value":12089},"        transform=\"rotate(-10 410 170)\"\u002F>\n",{"type":62,"tag":307,"props":12091,"children":12092},{"class":309,"line":466},[12093],{"type":62,"tag":307,"props":12094,"children":12095},{"emptyLinePlaceholder":423},[12096],{"type":68,"value":426},{"type":62,"tag":307,"props":12098,"children":12099},{"class":309,"line":480},[12100],{"type":62,"tag":307,"props":12101,"children":12102},{},[12103],{"type":68,"value":12104},"  \u003C!-- Detail lines -->\n",{"type":62,"tag":307,"props":12106,"children":12107},{"class":309,"line":489},[12108],{"type":62,"tag":307,"props":12109,"children":12110},{},[12111],{"type":68,"value":12112},"  \u003Cline x1=\"100\" y1=\"300\" x2=\"580\" y2=\"300\"\n",{"type":62,"tag":307,"props":12114,"children":12115},{"class":309,"line":497},[12116],{"type":62,"tag":307,"props":12117,"children":12118},{},[12119],{"type":68,"value":12120},"        stroke=\"#534AB7\" stroke-width=\"0.5\" opacity=\"0.3\"\u002F>\n",{"type":62,"tag":307,"props":12122,"children":12123},{"class":309,"line":506},[12124],{"type":62,"tag":307,"props":12125,"children":12126},{},[12127],{"type":68,"value":12128},"  \u003Cline x1=\"100\" y1=\"310\" x2=\"580\" y2=\"310\"\n",{"type":62,"tag":307,"props":12130,"children":12131},{"class":309,"line":520},[12132],{"type":62,"tag":307,"props":12133,"children":12134},{},[12135],{"type":68,"value":12136},"        stroke=\"#534AB7\" stroke-width=\"0.5\" opacity=\"0.2\"\u002F>\n",{"type":62,"tag":307,"props":12138,"children":12139},{"class":309,"line":534},[12140],{"type":62,"tag":307,"props":12141,"children":12142},{},[12143],{"type":68,"value":12144},"\u003C\u002Fsvg>\n",{"type":62,"tag":290,"props":12146,"children":12148},{"id":12147},"pattern-radial-symmetry",[12149],{"type":68,"value":12150},"Pattern: Radial Symmetry",{"type":62,"tag":297,"props":12152,"children":12154},{"className":11989,"code":12153,"language":5998,"meta":301,"style":301},"\u003Csvg width=\"100%\" viewBox=\"0 0 680 680\">\n  \u003Cg transform=\"translate(340 340)\">\n    \u003C!-- Repeat a shape at angular intervals -->\n    \u003Cg transform=\"rotate(0)\">\n      \u003Cellipse cx=\"0\" cy=\"-120\" rx=\"30\" ry=\"80\"\n               fill=\"#FAECE7\" stroke=\"#993C1D\" stroke-width=\"0.5\"\u002F>\n    \u003C\u002Fg>\n    \u003Cg transform=\"rotate(45)\">\n      \u003Cellipse cx=\"0\" cy=\"-120\" rx=\"30\" ry=\"80\"\n               fill=\"#FBEAF0\" stroke=\"#993556\" stroke-width=\"0.5\"\u002F>\n    \u003C\u002Fg>\n    \u003C!-- ... repeat for 90, 135, 180, 225, 270, 315 -->\n  \u003C\u002Fg>\n\u003C\u002Fsvg>\n",[12155],{"type":62,"tag":93,"props":12156,"children":12157},{"__ignoreMap":301},[12158,12166,12174,12182,12190,12198,12206,12214,12222,12229,12237,12244,12252,12260],{"type":62,"tag":307,"props":12159,"children":12160},{"class":309,"line":310},[12161],{"type":62,"tag":307,"props":12162,"children":12163},{},[12164],{"type":68,"value":12165},"\u003Csvg width=\"100%\" viewBox=\"0 0 680 680\">\n",{"type":62,"tag":307,"props":12167,"children":12168},{"class":309,"line":320},[12169],{"type":62,"tag":307,"props":12170,"children":12171},{},[12172],{"type":68,"value":12173},"  \u003Cg transform=\"translate(340 340)\">\n",{"type":62,"tag":307,"props":12175,"children":12176},{"class":309,"line":335},[12177],{"type":62,"tag":307,"props":12178,"children":12179},{},[12180],{"type":68,"value":12181},"    \u003C!-- Repeat a shape at angular intervals -->\n",{"type":62,"tag":307,"props":12183,"children":12184},{"class":309,"line":349},[12185],{"type":62,"tag":307,"props":12186,"children":12187},{},[12188],{"type":68,"value":12189},"    \u003Cg transform=\"rotate(0)\">\n",{"type":62,"tag":307,"props":12191,"children":12192},{"class":309,"line":363},[12193],{"type":62,"tag":307,"props":12194,"children":12195},{},[12196],{"type":68,"value":12197},"      \u003Cellipse cx=\"0\" cy=\"-120\" rx=\"30\" ry=\"80\"\n",{"type":62,"tag":307,"props":12199,"children":12200},{"class":309,"line":377},[12201],{"type":62,"tag":307,"props":12202,"children":12203},{},[12204],{"type":68,"value":12205},"               fill=\"#FAECE7\" stroke=\"#993C1D\" stroke-width=\"0.5\"\u002F>\n",{"type":62,"tag":307,"props":12207,"children":12208},{"class":309,"line":391},[12209],{"type":62,"tag":307,"props":12210,"children":12211},{},[12212],{"type":68,"value":12213},"    \u003C\u002Fg>\n",{"type":62,"tag":307,"props":12215,"children":12216},{"class":309,"line":405},[12217],{"type":62,"tag":307,"props":12218,"children":12219},{},[12220],{"type":68,"value":12221},"    \u003Cg transform=\"rotate(45)\">\n",{"type":62,"tag":307,"props":12223,"children":12224},{"class":309,"line":419},[12225],{"type":62,"tag":307,"props":12226,"children":12227},{},[12228],{"type":68,"value":12197},{"type":62,"tag":307,"props":12230,"children":12231},{"class":309,"line":429},[12232],{"type":62,"tag":307,"props":12233,"children":12234},{},[12235],{"type":68,"value":12236},"               fill=\"#FBEAF0\" stroke=\"#993556\" stroke-width=\"0.5\"\u002F>\n",{"type":62,"tag":307,"props":12238,"children":12239},{"class":309,"line":438},[12240],{"type":62,"tag":307,"props":12241,"children":12242},{},[12243],{"type":68,"value":12213},{"type":62,"tag":307,"props":12245,"children":12246},{"class":309,"line":452},[12247],{"type":62,"tag":307,"props":12248,"children":12249},{},[12250],{"type":68,"value":12251},"    \u003C!-- ... repeat for 90, 135, 180, 225, 270, 315 -->\n",{"type":62,"tag":307,"props":12253,"children":12254},{"class":309,"line":466},[12255],{"type":62,"tag":307,"props":12256,"children":12257},{},[12258],{"type":68,"value":12259},"  \u003C\u002Fg>\n",{"type":62,"tag":307,"props":12261,"children":12262},{"class":309,"line":480},[12263],{"type":62,"tag":307,"props":12264,"children":12265},{},[12266],{"type":68,"value":12144},{"type":62,"tag":290,"props":12268,"children":12270},{"id":12269},"pattern-landscape-with-layered-shapes",[12271],{"type":68,"value":12272},"Pattern: Landscape with Layered Shapes",{"type":62,"tag":71,"props":12274,"children":12275},{},[12276],{"type":68,"value":12277},"For physical scenes, use ALL hardcoded hex (no theme classes):",{"type":62,"tag":297,"props":12279,"children":12281},{"className":11989,"code":12280,"language":5998,"meta":301,"style":301},"\u003Csvg width=\"100%\" viewBox=\"0 0 680 400\">\n  \u003C!-- Sky -->\n  \u003Crect x=\"0\" y=\"0\" width=\"680\" height=\"250\" fill=\"#E6F1FB\"\u002F>\n  \u003C!-- Mountains -->\n  \u003Cpolygon points=\"0,250 150,100 300,250\" fill=\"#B4B2A9\"\u002F>\n  \u003Cpolygon points=\"200,250 400,60 600,250\" fill=\"#888780\"\u002F>\n  \u003C!-- Ground -->\n  \u003Crect x=\"0\" y=\"250\" width=\"680\" height=\"150\" fill=\"#C0DD97\"\u002F>\n  \u003C!-- Sun -->\n  \u003Ccircle cx=\"550\" cy=\"80\" r=\"40\" fill=\"#FAC775\"\u002F>\n\u003C\u002Fsvg>\n",[12282],{"type":62,"tag":93,"props":12283,"children":12284},{"__ignoreMap":301},[12285,12292,12300,12308,12316,12324,12332,12340,12348,12356,12364],{"type":62,"tag":307,"props":12286,"children":12287},{"class":309,"line":310},[12288],{"type":62,"tag":307,"props":12289,"children":12290},{},[12291],{"type":68,"value":12002},{"type":62,"tag":307,"props":12293,"children":12294},{"class":309,"line":320},[12295],{"type":62,"tag":307,"props":12296,"children":12297},{},[12298],{"type":68,"value":12299},"  \u003C!-- Sky -->\n",{"type":62,"tag":307,"props":12301,"children":12302},{"class":309,"line":335},[12303],{"type":62,"tag":307,"props":12304,"children":12305},{},[12306],{"type":68,"value":12307},"  \u003Crect x=\"0\" y=\"0\" width=\"680\" height=\"250\" fill=\"#E6F1FB\"\u002F>\n",{"type":62,"tag":307,"props":12309,"children":12310},{"class":309,"line":349},[12311],{"type":62,"tag":307,"props":12312,"children":12313},{},[12314],{"type":68,"value":12315},"  \u003C!-- Mountains -->\n",{"type":62,"tag":307,"props":12317,"children":12318},{"class":309,"line":363},[12319],{"type":62,"tag":307,"props":12320,"children":12321},{},[12322],{"type":68,"value":12323},"  \u003Cpolygon points=\"0,250 150,100 300,250\" fill=\"#B4B2A9\"\u002F>\n",{"type":62,"tag":307,"props":12325,"children":12326},{"class":309,"line":377},[12327],{"type":62,"tag":307,"props":12328,"children":12329},{},[12330],{"type":68,"value":12331},"  \u003Cpolygon points=\"200,250 400,60 600,250\" fill=\"#888780\"\u002F>\n",{"type":62,"tag":307,"props":12333,"children":12334},{"class":309,"line":391},[12335],{"type":62,"tag":307,"props":12336,"children":12337},{},[12338],{"type":68,"value":12339},"  \u003C!-- Ground -->\n",{"type":62,"tag":307,"props":12341,"children":12342},{"class":309,"line":405},[12343],{"type":62,"tag":307,"props":12344,"children":12345},{},[12346],{"type":68,"value":12347},"  \u003Crect x=\"0\" y=\"250\" width=\"680\" height=\"150\" fill=\"#C0DD97\"\u002F>\n",{"type":62,"tag":307,"props":12349,"children":12350},{"class":309,"line":419},[12351],{"type":62,"tag":307,"props":12352,"children":12353},{},[12354],{"type":68,"value":12355},"  \u003C!-- Sun -->\n",{"type":62,"tag":307,"props":12357,"children":12358},{"class":309,"line":429},[12359],{"type":62,"tag":307,"props":12360,"children":12361},{},[12362],{"type":68,"value":12363},"  \u003Ccircle cx=\"550\" cy=\"80\" r=\"40\" fill=\"#FAC775\"\u002F>\n",{"type":62,"tag":307,"props":12365,"children":12366},{"class":309,"line":438},[12367],{"type":62,"tag":307,"props":12368,"children":12369},{},[12370],{"type":68,"value":12144},{"type":62,"tag":77,"props":12372,"children":12373},{},[],{"type":62,"tag":81,"props":12375,"children":12377},{"id":12376},"part-6-advanced-patterns",[12378],{"type":68,"value":12379},"Part 6: Advanced Patterns",{"type":62,"tag":290,"props":12381,"children":12383},{"id":12382},"tabbed-multi-view-interfaces",[12384],{"type":68,"value":12385},"Tabbed \u002F Multi-View Interfaces",{"type":62,"tag":71,"props":12387,"children":12388},{},[12389,12391,12397],{"type":68,"value":12390},"Since html streams top-down, don't use ",{"type":62,"tag":93,"props":12392,"children":12394},{"className":12393},[],[12395],{"type":68,"value":12396},"display: none",{"type":68,"value":12398}," during streaming.\nInstead, render all content stacked, then let a jsExpression create the tabs\nonce the document is complete:",{"type":62,"tag":71,"props":12400,"children":12401},{},[12402],{"type":68,"value":1037},{"type":62,"tag":297,"props":12404,"children":12406},{"className":299,"code":12405,"language":136,"meta":301,"style":301},"#tabs { display: flex; gap: 4px; margin-bottom: 16px; }\n",[12407],{"type":62,"tag":93,"props":12408,"children":12409},{"__ignoreMap":301},[12410],{"type":62,"tag":307,"props":12411,"children":12412},{"class":309,"line":310},[12413,12417,12422,12426,12430,12434,12438,12442,12446,12450,12454,12458,12462,12466,12470,12474],{"type":62,"tag":307,"props":12414,"children":12415},{"style":926},[12416],{"type":68,"value":3294},{"type":62,"tag":307,"props":12418,"children":12419},{"style":1131},[12420],{"type":68,"value":12421},"tabs",{"type":62,"tag":307,"props":12423,"children":12424},{"style":926},[12425],{"type":68,"value":1412},{"type":62,"tag":307,"props":12427,"children":12428},{"style":1068},[12429],{"type":68,"value":11221},{"type":62,"tag":307,"props":12431,"children":12432},{"style":926},[12433],{"type":68,"value":1076},{"type":62,"tag":307,"props":12435,"children":12436},{"style":324},[12437],{"type":68,"value":3171},{"type":62,"tag":307,"props":12439,"children":12440},{"style":926},[12441],{"type":68,"value":1431},{"type":62,"tag":307,"props":12443,"children":12444},{"style":1068},[12445],{"type":68,"value":3198},{"type":62,"tag":307,"props":12447,"children":12448},{"style":926},[12449],{"type":68,"value":1076},{"type":62,"tag":307,"props":12451,"children":12452},{"style":1131},[12453],{"type":68,"value":1384},{"type":62,"tag":307,"props":12455,"children":12456},{"style":926},[12457],{"type":68,"value":1431},{"type":62,"tag":307,"props":12459,"children":12460},{"style":1068},[12461],{"type":68,"value":8611},{"type":62,"tag":307,"props":12463,"children":12464},{"style":926},[12465],{"type":68,"value":1076},{"type":62,"tag":307,"props":12467,"children":12468},{"style":1131},[12469],{"type":68,"value":3207},{"type":62,"tag":307,"props":12471,"children":12472},{"style":926},[12473],{"type":68,"value":1431},{"type":62,"tag":307,"props":12475,"children":12476},{"style":926},[12477],{"type":68,"value":1454},{"type":62,"tag":71,"props":12479,"children":12480},{},[12481],{"type":68,"value":1459},{"type":62,"tag":297,"props":12483,"children":12485},{"className":915,"code":12484,"language":147,"meta":301,"style":301},"\u003Cdiv id=\"tabs\">\n  \u003Cbutton onclick=\"showTab(0)\">Overview\u003C\u002Fbutton>\n  \u003Cbutton onclick=\"showTab(1)\">Details\u003C\u002Fbutton>\n  \u003Cbutton onclick=\"showTab(2)\">Code\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\n\u003Cdiv id=\"panel-0\">\u003C!-- Overview content -->\u003C\u002Fdiv>\n\u003Cdiv id=\"panel-1\">\u003C!-- Details content -->\u003C\u002Fdiv>\n\u003Cdiv id=\"panel-2\">\u003C!-- Code content -->\u003C\u002Fdiv>\n",[12486],{"type":62,"tag":93,"props":12487,"children":12488},{"__ignoreMap":301},[12489,12524,12589,12653,12717,12732,12739,12792,12845],{"type":62,"tag":307,"props":12490,"children":12491},{"class":309,"line":310},[12492,12496,12500,12504,12508,12512,12516,12520],{"type":62,"tag":307,"props":12493,"children":12494},{"style":926},[12495],{"type":68,"value":929},{"type":62,"tag":307,"props":12497,"children":12498},{"style":932},[12499],{"type":68,"value":935},{"type":62,"tag":307,"props":12501,"children":12502},{"style":938},[12503],{"type":68,"value":3431},{"type":62,"tag":307,"props":12505,"children":12506},{"style":926},[12507],{"type":68,"value":946},{"type":62,"tag":307,"props":12509,"children":12510},{"style":926},[12511],{"type":68,"value":951},{"type":62,"tag":307,"props":12513,"children":12514},{"style":954},[12515],{"type":68,"value":12421},{"type":62,"tag":307,"props":12517,"children":12518},{"style":926},[12519],{"type":68,"value":951},{"type":62,"tag":307,"props":12521,"children":12522},{"style":926},[12523],{"type":68,"value":982},{"type":62,"tag":307,"props":12525,"children":12526},{"class":309,"line":320},[12527,12531,12535,12539,12543,12547,12552,12556,12560,12564,12568,12572,12577,12581,12585],{"type":62,"tag":307,"props":12528,"children":12529},{"style":926},[12530],{"type":68,"value":1510},{"type":62,"tag":307,"props":12532,"children":12533},{"style":932},[12534],{"type":68,"value":3514},{"type":62,"tag":307,"props":12536,"children":12537},{"style":938},[12538],{"type":68,"value":3519},{"type":62,"tag":307,"props":12540,"children":12541},{"style":926},[12542],{"type":68,"value":946},{"type":62,"tag":307,"props":12544,"children":12545},{"style":926},[12546],{"type":68,"value":951},{"type":62,"tag":307,"props":12548,"children":12549},{"style":1101},[12550],{"type":68,"value":12551},"showTab",{"type":62,"tag":307,"props":12553,"children":12554},{"style":954},[12555],{"type":68,"value":1109},{"type":62,"tag":307,"props":12557,"children":12558},{"style":1131},[12559],{"type":68,"value":4591},{"type":62,"tag":307,"props":12561,"children":12562},{"style":954},[12563],{"type":68,"value":3745},{"type":62,"tag":307,"props":12565,"children":12566},{"style":926},[12567],{"type":68,"value":951},{"type":62,"tag":307,"props":12569,"children":12570},{"style":926},[12571],{"type":68,"value":1575},{"type":62,"tag":307,"props":12573,"children":12574},{"style":324},[12575],{"type":68,"value":12576},"Overview",{"type":62,"tag":307,"props":12578,"children":12579},{"style":926},[12580],{"type":68,"value":998},{"type":62,"tag":307,"props":12582,"children":12583},{"style":932},[12584],{"type":68,"value":3514},{"type":62,"tag":307,"props":12586,"children":12587},{"style":926},[12588],{"type":68,"value":982},{"type":62,"tag":307,"props":12590,"children":12591},{"class":309,"line":335},[12592,12596,12600,12604,12608,12612,12616,12620,12624,12628,12632,12636,12641,12645,12649],{"type":62,"tag":307,"props":12593,"children":12594},{"style":926},[12595],{"type":68,"value":1510},{"type":62,"tag":307,"props":12597,"children":12598},{"style":932},[12599],{"type":68,"value":3514},{"type":62,"tag":307,"props":12601,"children":12602},{"style":938},[12603],{"type":68,"value":3519},{"type":62,"tag":307,"props":12605,"children":12606},{"style":926},[12607],{"type":68,"value":946},{"type":62,"tag":307,"props":12609,"children":12610},{"style":926},[12611],{"type":68,"value":951},{"type":62,"tag":307,"props":12613,"children":12614},{"style":1101},[12615],{"type":68,"value":12551},{"type":62,"tag":307,"props":12617,"children":12618},{"style":954},[12619],{"type":68,"value":1109},{"type":62,"tag":307,"props":12621,"children":12622},{"style":1131},[12623],{"type":68,"value":3635},{"type":62,"tag":307,"props":12625,"children":12626},{"style":954},[12627],{"type":68,"value":3745},{"type":62,"tag":307,"props":12629,"children":12630},{"style":926},[12631],{"type":68,"value":951},{"type":62,"tag":307,"props":12633,"children":12634},{"style":926},[12635],{"type":68,"value":1575},{"type":62,"tag":307,"props":12637,"children":12638},{"style":324},[12639],{"type":68,"value":12640},"Details",{"type":62,"tag":307,"props":12642,"children":12643},{"style":926},[12644],{"type":68,"value":998},{"type":62,"tag":307,"props":12646,"children":12647},{"style":932},[12648],{"type":68,"value":3514},{"type":62,"tag":307,"props":12650,"children":12651},{"style":926},[12652],{"type":68,"value":982},{"type":62,"tag":307,"props":12654,"children":12655},{"class":309,"line":349},[12656,12660,12664,12668,12672,12676,12680,12684,12688,12692,12696,12700,12705,12709,12713],{"type":62,"tag":307,"props":12657,"children":12658},{"style":926},[12659],{"type":68,"value":1510},{"type":62,"tag":307,"props":12661,"children":12662},{"style":932},[12663],{"type":68,"value":3514},{"type":62,"tag":307,"props":12665,"children":12666},{"style":938},[12667],{"type":68,"value":3519},{"type":62,"tag":307,"props":12669,"children":12670},{"style":926},[12671],{"type":68,"value":946},{"type":62,"tag":307,"props":12673,"children":12674},{"style":926},[12675],{"type":68,"value":951},{"type":62,"tag":307,"props":12677,"children":12678},{"style":1101},[12679],{"type":68,"value":12551},{"type":62,"tag":307,"props":12681,"children":12682},{"style":954},[12683],{"type":68,"value":1109},{"type":62,"tag":307,"props":12685,"children":12686},{"style":1131},[12687],{"type":68,"value":6711},{"type":62,"tag":307,"props":12689,"children":12690},{"style":954},[12691],{"type":68,"value":3745},{"type":62,"tag":307,"props":12693,"children":12694},{"style":926},[12695],{"type":68,"value":951},{"type":62,"tag":307,"props":12697,"children":12698},{"style":926},[12699],{"type":68,"value":1575},{"type":62,"tag":307,"props":12701,"children":12702},{"style":324},[12703],{"type":68,"value":12704},"Code",{"type":62,"tag":307,"props":12706,"children":12707},{"style":926},[12708],{"type":68,"value":998},{"type":62,"tag":307,"props":12710,"children":12711},{"style":932},[12712],{"type":68,"value":3514},{"type":62,"tag":307,"props":12714,"children":12715},{"style":926},[12716],{"type":68,"value":982},{"type":62,"tag":307,"props":12718,"children":12719},{"class":309,"line":363},[12720,12724,12728],{"type":62,"tag":307,"props":12721,"children":12722},{"style":926},[12723],{"type":68,"value":998},{"type":62,"tag":307,"props":12725,"children":12726},{"style":932},[12727],{"type":68,"value":935},{"type":62,"tag":307,"props":12729,"children":12730},{"style":926},[12731],{"type":68,"value":982},{"type":62,"tag":307,"props":12733,"children":12734},{"class":309,"line":377},[12735],{"type":62,"tag":307,"props":12736,"children":12737},{"emptyLinePlaceholder":423},[12738],{"type":68,"value":426},{"type":62,"tag":307,"props":12740,"children":12741},{"class":309,"line":391},[12742,12746,12750,12754,12758,12762,12767,12771,12775,12780,12784,12788],{"type":62,"tag":307,"props":12743,"children":12744},{"style":926},[12745],{"type":68,"value":929},{"type":62,"tag":307,"props":12747,"children":12748},{"style":932},[12749],{"type":68,"value":935},{"type":62,"tag":307,"props":12751,"children":12752},{"style":938},[12753],{"type":68,"value":3431},{"type":62,"tag":307,"props":12755,"children":12756},{"style":926},[12757],{"type":68,"value":946},{"type":62,"tag":307,"props":12759,"children":12760},{"style":926},[12761],{"type":68,"value":951},{"type":62,"tag":307,"props":12763,"children":12764},{"style":954},[12765],{"type":68,"value":12766},"panel-0",{"type":62,"tag":307,"props":12768,"children":12769},{"style":926},[12770],{"type":68,"value":951},{"type":62,"tag":307,"props":12772,"children":12773},{"style":926},[12774],{"type":68,"value":1575},{"type":62,"tag":307,"props":12776,"children":12777},{"style":314},[12778],{"type":68,"value":12779},"\u003C!-- Overview content -->",{"type":62,"tag":307,"props":12781,"children":12782},{"style":926},[12783],{"type":68,"value":998},{"type":62,"tag":307,"props":12785,"children":12786},{"style":932},[12787],{"type":68,"value":935},{"type":62,"tag":307,"props":12789,"children":12790},{"style":926},[12791],{"type":68,"value":982},{"type":62,"tag":307,"props":12793,"children":12794},{"class":309,"line":405},[12795,12799,12803,12807,12811,12815,12820,12824,12828,12833,12837,12841],{"type":62,"tag":307,"props":12796,"children":12797},{"style":926},[12798],{"type":68,"value":929},{"type":62,"tag":307,"props":12800,"children":12801},{"style":932},[12802],{"type":68,"value":935},{"type":62,"tag":307,"props":12804,"children":12805},{"style":938},[12806],{"type":68,"value":3431},{"type":62,"tag":307,"props":12808,"children":12809},{"style":926},[12810],{"type":68,"value":946},{"type":62,"tag":307,"props":12812,"children":12813},{"style":926},[12814],{"type":68,"value":951},{"type":62,"tag":307,"props":12816,"children":12817},{"style":954},[12818],{"type":68,"value":12819},"panel-1",{"type":62,"tag":307,"props":12821,"children":12822},{"style":926},[12823],{"type":68,"value":951},{"type":62,"tag":307,"props":12825,"children":12826},{"style":926},[12827],{"type":68,"value":1575},{"type":62,"tag":307,"props":12829,"children":12830},{"style":314},[12831],{"type":68,"value":12832},"\u003C!-- Details content -->",{"type":62,"tag":307,"props":12834,"children":12835},{"style":926},[12836],{"type":68,"value":998},{"type":62,"tag":307,"props":12838,"children":12839},{"style":932},[12840],{"type":68,"value":935},{"type":62,"tag":307,"props":12842,"children":12843},{"style":926},[12844],{"type":68,"value":982},{"type":62,"tag":307,"props":12846,"children":12847},{"class":309,"line":419},[12848,12852,12856,12860,12864,12868,12873,12877,12881,12886,12890,12894],{"type":62,"tag":307,"props":12849,"children":12850},{"style":926},[12851],{"type":68,"value":929},{"type":62,"tag":307,"props":12853,"children":12854},{"style":932},[12855],{"type":68,"value":935},{"type":62,"tag":307,"props":12857,"children":12858},{"style":938},[12859],{"type":68,"value":3431},{"type":62,"tag":307,"props":12861,"children":12862},{"style":926},[12863],{"type":68,"value":946},{"type":62,"tag":307,"props":12865,"children":12866},{"style":926},[12867],{"type":68,"value":951},{"type":62,"tag":307,"props":12869,"children":12870},{"style":954},[12871],{"type":68,"value":12872},"panel-2",{"type":62,"tag":307,"props":12874,"children":12875},{"style":926},[12876],{"type":68,"value":951},{"type":62,"tag":307,"props":12878,"children":12879},{"style":926},[12880],{"type":68,"value":1575},{"type":62,"tag":307,"props":12882,"children":12883},{"style":314},[12884],{"type":68,"value":12885},"\u003C!-- Code content -->",{"type":62,"tag":307,"props":12887,"children":12888},{"style":926},[12889],{"type":68,"value":998},{"type":62,"tag":307,"props":12891,"children":12892},{"style":932},[12893],{"type":68,"value":935},{"type":62,"tag":307,"props":12895,"children":12896},{"style":926},[12897],{"type":68,"value":982},{"type":62,"tag":71,"props":12899,"children":12900},{},[12901],{"type":68,"value":3845},{"type":62,"tag":297,"props":12903,"children":12905},{"className":3848,"code":12904,"language":3850,"meta":301,"style":301},"function showTab(n) {\n  for (let i = 0; i \u003C 3; i++) {\n    document.getElementById('panel-' + i).style.display =\n      i === n ? 'block' : 'none';\n  }\n  document.querySelectorAll('#tabs button').forEach((b, i) => {\n    b.style.fontWeight = i === n ? '500' : '400';\n    b.style.color = i === n\n      ? 'var(--color-text-primary)' : 'var(--color-text-tertiary)';\n  });\n}\n",[12906],{"type":62,"tag":93,"props":12907,"children":12908},{"__ignoreMap":301},[12909,12938,13002,13070,13124,13131,13210,13289,13330,13371,13386],{"type":62,"tag":307,"props":12910,"children":12911},{"class":309,"line":310},[12912,12916,12921,12925,12930,12934],{"type":62,"tag":307,"props":12913,"children":12914},{"style":938},[12915],{"type":68,"value":3862},{"type":62,"tag":307,"props":12917,"children":12918},{"style":1101},[12919],{"type":68,"value":12920}," showTab",{"type":62,"tag":307,"props":12922,"children":12923},{"style":926},[12924],{"type":68,"value":1109},{"type":62,"tag":307,"props":12926,"children":12927},{"style":3874},[12928],{"type":68,"value":12929},"n",{"type":62,"tag":307,"props":12931,"children":12932},{"style":926},[12933],{"type":68,"value":3745},{"type":62,"tag":307,"props":12935,"children":12936},{"style":926},[12937],{"type":68,"value":1062},{"type":62,"tag":307,"props":12939,"children":12940},{"class":309,"line":320},[12941,12945,12949,12953,12958,12962,12966,12970,12974,12978,12982,12986,12990,12994,12998],{"type":62,"tag":307,"props":12942,"children":12943},{"style":4645},[12944],{"type":68,"value":4648},{"type":62,"tag":307,"props":12946,"children":12947},{"style":932},[12948],{"type":68,"value":199},{"type":62,"tag":307,"props":12950,"children":12951},{"style":938},[12952],{"type":68,"value":7666},{"type":62,"tag":307,"props":12954,"children":12955},{"style":324},[12956],{"type":68,"value":12957}," i",{"type":62,"tag":307,"props":12959,"children":12960},{"style":926},[12961],{"type":68,"value":3903},{"type":62,"tag":307,"props":12963,"children":12964},{"style":1131},[12965],{"type":68,"value":3232},{"type":62,"tag":307,"props":12967,"children":12968},{"style":926},[12969],{"type":68,"value":1431},{"type":62,"tag":307,"props":12971,"children":12972},{"style":324},[12973],{"type":68,"value":12957},{"type":62,"tag":307,"props":12975,"children":12976},{"style":926},[12977],{"type":68,"value":4818},{"type":62,"tag":307,"props":12979,"children":12980},{"style":1131},[12981],{"type":68,"value":7437},{"type":62,"tag":307,"props":12983,"children":12984},{"style":926},[12985],{"type":68,"value":1431},{"type":62,"tag":307,"props":12987,"children":12988},{"style":324},[12989],{"type":68,"value":12957},{"type":62,"tag":307,"props":12991,"children":12992},{"style":926},[12993],{"type":68,"value":7709},{"type":62,"tag":307,"props":12995,"children":12996},{"style":932},[12997],{"type":68,"value":4367},{"type":62,"tag":307,"props":12999,"children":13000},{"style":926},[13001],{"type":68,"value":4219},{"type":62,"tag":307,"props":13003,"children":13004},{"class":309,"line":335},[13005,13010,13014,13018,13022,13026,13031,13035,13039,13043,13047,13051,13056,13060,13065],{"type":62,"tag":307,"props":13006,"children":13007},{"style":324},[13008],{"type":68,"value":13009},"    document",{"type":62,"tag":307,"props":13011,"children":13012},{"style":926},[13013],{"type":68,"value":848},{"type":62,"tag":307,"props":13015,"children":13016},{"style":1101},[13017],{"type":68,"value":3917},{"type":62,"tag":307,"props":13019,"children":13020},{"style":932},[13021],{"type":68,"value":1109},{"type":62,"tag":307,"props":13023,"children":13024},{"style":926},[13025],{"type":68,"value":3926},{"type":62,"tag":307,"props":13027,"children":13028},{"style":954},[13029],{"type":68,"value":13030},"panel-",{"type":62,"tag":307,"props":13032,"children":13033},{"style":926},[13034],{"type":68,"value":3926},{"type":62,"tag":307,"props":13036,"children":13037},{"style":926},[13038],{"type":68,"value":7248},{"type":62,"tag":307,"props":13040,"children":13041},{"style":324},[13042],{"type":68,"value":12957},{"type":62,"tag":307,"props":13044,"children":13045},{"style":932},[13046],{"type":68,"value":3745},{"type":62,"tag":307,"props":13048,"children":13049},{"style":926},[13050],{"type":68,"value":848},{"type":62,"tag":307,"props":13052,"children":13053},{"style":324},[13054],{"type":68,"value":13055},"style",{"type":62,"tag":307,"props":13057,"children":13058},{"style":926},[13059],{"type":68,"value":848},{"type":62,"tag":307,"props":13061,"children":13062},{"style":324},[13063],{"type":68,"value":13064},"display",{"type":62,"tag":307,"props":13066,"children":13067},{"style":926},[13068],{"type":68,"value":13069}," =\n",{"type":62,"tag":307,"props":13071,"children":13072},{"class":309,"line":349},[13073,13078,13082,13087,13091,13095,13100,13104,13108,13112,13116,13120],{"type":62,"tag":307,"props":13074,"children":13075},{"style":324},[13076],{"type":68,"value":13077},"      i",{"type":62,"tag":307,"props":13079,"children":13080},{"style":926},[13081],{"type":68,"value":7868},{"type":62,"tag":307,"props":13083,"children":13084},{"style":324},[13085],{"type":68,"value":13086}," n",{"type":62,"tag":307,"props":13088,"children":13089},{"style":926},[13090],{"type":68,"value":7877},{"type":62,"tag":307,"props":13092,"children":13093},{"style":926},[13094],{"type":68,"value":5132},{"type":62,"tag":307,"props":13096,"children":13097},{"style":954},[13098],{"type":68,"value":13099},"block",{"type":62,"tag":307,"props":13101,"children":13102},{"style":926},[13103],{"type":68,"value":3926},{"type":62,"tag":307,"props":13105,"children":13106},{"style":926},[13107],{"type":68,"value":7895},{"type":62,"tag":307,"props":13109,"children":13110},{"style":926},[13111],{"type":68,"value":5132},{"type":62,"tag":307,"props":13113,"children":13114},{"style":954},[13115],{"type":68,"value":6669},{"type":62,"tag":307,"props":13117,"children":13118},{"style":926},[13119],{"type":68,"value":3926},{"type":62,"tag":307,"props":13121,"children":13122},{"style":926},[13123],{"type":68,"value":1086},{"type":62,"tag":307,"props":13125,"children":13126},{"class":309,"line":363},[13127],{"type":62,"tag":307,"props":13128,"children":13129},{"style":926},[13130],{"type":68,"value":5177},{"type":62,"tag":307,"props":13132,"children":13133},{"class":309,"line":377},[13134,13138,13142,13147,13151,13155,13160,13164,13168,13172,13177,13181,13185,13190,13194,13198,13202,13206],{"type":62,"tag":307,"props":13135,"children":13136},{"style":324},[13137],{"type":68,"value":8030},{"type":62,"tag":307,"props":13139,"children":13140},{"style":926},[13141],{"type":68,"value":848},{"type":62,"tag":307,"props":13143,"children":13144},{"style":1101},[13145],{"type":68,"value":13146},"querySelectorAll",{"type":62,"tag":307,"props":13148,"children":13149},{"style":932},[13150],{"type":68,"value":1109},{"type":62,"tag":307,"props":13152,"children":13153},{"style":926},[13154],{"type":68,"value":3926},{"type":62,"tag":307,"props":13156,"children":13157},{"style":954},[13158],{"type":68,"value":13159},"#tabs button",{"type":62,"tag":307,"props":13161,"children":13162},{"style":926},[13163],{"type":68,"value":3926},{"type":62,"tag":307,"props":13165,"children":13166},{"style":932},[13167],{"type":68,"value":3745},{"type":62,"tag":307,"props":13169,"children":13170},{"style":926},[13171],{"type":68,"value":848},{"type":62,"tag":307,"props":13173,"children":13174},{"style":1101},[13175],{"type":68,"value":13176},"forEach",{"type":62,"tag":307,"props":13178,"children":13179},{"style":932},[13180],{"type":68,"value":1109},{"type":62,"tag":307,"props":13182,"children":13183},{"style":926},[13184],{"type":68,"value":1109},{"type":62,"tag":307,"props":13186,"children":13187},{"style":3874},[13188],{"type":68,"value":13189},"b",{"type":62,"tag":307,"props":13191,"children":13192},{"style":926},[13193],{"type":68,"value":1119},{"type":62,"tag":307,"props":13195,"children":13196},{"style":3874},[13197],{"type":68,"value":12957},{"type":62,"tag":307,"props":13199,"children":13200},{"style":926},[13201],{"type":68,"value":3745},{"type":62,"tag":307,"props":13203,"children":13204},{"style":938},[13205],{"type":68,"value":4210},{"type":62,"tag":307,"props":13207,"children":13208},{"style":926},[13209],{"type":68,"value":1062},{"type":62,"tag":307,"props":13211,"children":13212},{"class":309,"line":391},[13213,13218,13222,13226,13230,13235,13239,13243,13247,13251,13255,13259,13264,13268,13272,13276,13281,13285],{"type":62,"tag":307,"props":13214,"children":13215},{"style":324},[13216],{"type":68,"value":13217},"    b",{"type":62,"tag":307,"props":13219,"children":13220},{"style":926},[13221],{"type":68,"value":848},{"type":62,"tag":307,"props":13223,"children":13224},{"style":324},[13225],{"type":68,"value":13055},{"type":62,"tag":307,"props":13227,"children":13228},{"style":926},[13229],{"type":68,"value":848},{"type":62,"tag":307,"props":13231,"children":13232},{"style":324},[13233],{"type":68,"value":13234},"fontWeight",{"type":62,"tag":307,"props":13236,"children":13237},{"style":926},[13238],{"type":68,"value":3903},{"type":62,"tag":307,"props":13240,"children":13241},{"style":324},[13242],{"type":68,"value":12957},{"type":62,"tag":307,"props":13244,"children":13245},{"style":926},[13246],{"type":68,"value":7868},{"type":62,"tag":307,"props":13248,"children":13249},{"style":324},[13250],{"type":68,"value":13086},{"type":62,"tag":307,"props":13252,"children":13253},{"style":926},[13254],{"type":68,"value":7877},{"type":62,"tag":307,"props":13256,"children":13257},{"style":926},[13258],{"type":68,"value":5132},{"type":62,"tag":307,"props":13260,"children":13261},{"style":954},[13262],{"type":68,"value":13263},"500",{"type":62,"tag":307,"props":13265,"children":13266},{"style":926},[13267],{"type":68,"value":3926},{"type":62,"tag":307,"props":13269,"children":13270},{"style":926},[13271],{"type":68,"value":7895},{"type":62,"tag":307,"props":13273,"children":13274},{"style":926},[13275],{"type":68,"value":5132},{"type":62,"tag":307,"props":13277,"children":13278},{"style":954},[13279],{"type":68,"value":13280},"400",{"type":62,"tag":307,"props":13282,"children":13283},{"style":926},[13284],{"type":68,"value":3926},{"type":62,"tag":307,"props":13286,"children":13287},{"style":926},[13288],{"type":68,"value":1086},{"type":62,"tag":307,"props":13290,"children":13291},{"class":309,"line":405},[13292,13296,13300,13304,13308,13313,13317,13321,13325],{"type":62,"tag":307,"props":13293,"children":13294},{"style":324},[13295],{"type":68,"value":13217},{"type":62,"tag":307,"props":13297,"children":13298},{"style":926},[13299],{"type":68,"value":848},{"type":62,"tag":307,"props":13301,"children":13302},{"style":324},[13303],{"type":68,"value":13055},{"type":62,"tag":307,"props":13305,"children":13306},{"style":926},[13307],{"type":68,"value":848},{"type":62,"tag":307,"props":13309,"children":13310},{"style":324},[13311],{"type":68,"value":13312},"color",{"type":62,"tag":307,"props":13314,"children":13315},{"style":926},[13316],{"type":68,"value":3903},{"type":62,"tag":307,"props":13318,"children":13319},{"style":324},[13320],{"type":68,"value":12957},{"type":62,"tag":307,"props":13322,"children":13323},{"style":926},[13324],{"type":68,"value":7868},{"type":62,"tag":307,"props":13326,"children":13327},{"style":324},[13328],{"type":68,"value":13329}," n\n",{"type":62,"tag":307,"props":13331,"children":13332},{"class":309,"line":419},[13333,13338,13342,13347,13351,13355,13359,13363,13367],{"type":62,"tag":307,"props":13334,"children":13335},{"style":926},[13336],{"type":68,"value":13337},"      ?",{"type":62,"tag":307,"props":13339,"children":13340},{"style":926},[13341],{"type":68,"value":5132},{"type":62,"tag":307,"props":13343,"children":13344},{"style":954},[13345],{"type":68,"value":13346},"var(--color-text-primary)",{"type":62,"tag":307,"props":13348,"children":13349},{"style":926},[13350],{"type":68,"value":3926},{"type":62,"tag":307,"props":13352,"children":13353},{"style":926},[13354],{"type":68,"value":7895},{"type":62,"tag":307,"props":13356,"children":13357},{"style":926},[13358],{"type":68,"value":5132},{"type":62,"tag":307,"props":13360,"children":13361},{"style":954},[13362],{"type":68,"value":6470},{"type":62,"tag":307,"props":13364,"children":13365},{"style":926},[13366],{"type":68,"value":3926},{"type":62,"tag":307,"props":13368,"children":13369},{"style":926},[13370],{"type":68,"value":1086},{"type":62,"tag":307,"props":13372,"children":13373},{"class":309,"line":429},[13374,13378,13382],{"type":62,"tag":307,"props":13375,"children":13376},{"style":926},[13377],{"type":68,"value":10317},{"type":62,"tag":307,"props":13379,"children":13380},{"style":932},[13381],{"type":68,"value":3745},{"type":62,"tag":307,"props":13383,"children":13384},{"style":926},[13385],{"type":68,"value":1086},{"type":62,"tag":307,"props":13387,"children":13388},{"class":309,"line":438},[13389],{"type":62,"tag":307,"props":13390,"children":13391},{"style":926},[13392],{"type":68,"value":1198},{"type":62,"tag":71,"props":13394,"children":13395},{},[13396],{"type":68,"value":5616},{"type":62,"tag":297,"props":13398,"children":13400},{"className":3848,"code":13399,"language":3850,"meta":301,"style":301},"showTab(0);\n",[13401],{"type":62,"tag":93,"props":13402,"children":13403},{"__ignoreMap":301},[13404],{"type":62,"tag":307,"props":13405,"children":13406},{"class":309,"line":310},[13407,13411,13415,13419,13423],{"type":62,"tag":307,"props":13408,"children":13409},{"style":1101},[13410],{"type":68,"value":12551},{"type":62,"tag":307,"props":13412,"children":13413},{"style":324},[13414],{"type":68,"value":1109},{"type":62,"tag":307,"props":13416,"children":13417},{"style":1131},[13418],{"type":68,"value":4591},{"type":62,"tag":307,"props":13420,"children":13421},{"style":324},[13422],{"type":68,"value":3745},{"type":62,"tag":307,"props":13424,"children":13425},{"style":926},[13426],{"type":68,"value":1086},{"type":62,"tag":290,"props":13428,"children":13430},{"id":13429},"sendprompt-chat-driven-interactivity",[13431],{"type":68,"value":13432},"sendPrompt — Chat-Driven Interactivity",{"type":62,"tag":71,"props":13434,"children":13435},{},[13436,13438,13443],{"type":68,"value":13437},"The host bridge exposes ",{"type":62,"tag":93,"props":13439,"children":13441},{"className":13440},[],[13442],{"type":68,"value":233},{"type":68,"value":13444},",\nwhich sends a message as if the user typed it. Use it when the user's next\naction benefits from AI thinking. Wire it through a named jsFunction:",{"type":62,"tag":71,"props":13446,"children":13447},{},[13448],{"type":68,"value":3845},{"type":62,"tag":297,"props":13450,"children":13452},{"className":3848,"code":13451,"language":3850,"meta":301,"style":301},"function drillDown(text) {\n  Websandbox.connection.remote.sendPrompt({ text });\n}\n",[13453],{"type":62,"tag":93,"props":13454,"children":13455},{"__ignoreMap":301},[13456,13484,13544],{"type":62,"tag":307,"props":13457,"children":13458},{"class":309,"line":310},[13459,13463,13468,13472,13476,13480],{"type":62,"tag":307,"props":13460,"children":13461},{"style":938},[13462],{"type":68,"value":3862},{"type":62,"tag":307,"props":13464,"children":13465},{"style":1101},[13466],{"type":68,"value":13467}," drillDown",{"type":62,"tag":307,"props":13469,"children":13470},{"style":926},[13471],{"type":68,"value":1109},{"type":62,"tag":307,"props":13473,"children":13474},{"style":3874},[13475],{"type":68,"value":68},{"type":62,"tag":307,"props":13477,"children":13478},{"style":926},[13479],{"type":68,"value":3745},{"type":62,"tag":307,"props":13481,"children":13482},{"style":926},[13483],{"type":68,"value":1062},{"type":62,"tag":307,"props":13485,"children":13486},{"class":309,"line":320},[13487,13492,13496,13501,13505,13510,13514,13519,13523,13527,13532,13536,13540],{"type":62,"tag":307,"props":13488,"children":13489},{"style":324},[13490],{"type":68,"value":13491},"  Websandbox",{"type":62,"tag":307,"props":13493,"children":13494},{"style":926},[13495],{"type":68,"value":848},{"type":62,"tag":307,"props":13497,"children":13498},{"style":324},[13499],{"type":68,"value":13500},"connection",{"type":62,"tag":307,"props":13502,"children":13503},{"style":926},[13504],{"type":68,"value":848},{"type":62,"tag":307,"props":13506,"children":13507},{"style":324},[13508],{"type":68,"value":13509},"remote",{"type":62,"tag":307,"props":13511,"children":13512},{"style":926},[13513],{"type":68,"value":848},{"type":62,"tag":307,"props":13515,"children":13516},{"style":1101},[13517],{"type":68,"value":13518},"sendPrompt",{"type":62,"tag":307,"props":13520,"children":13521},{"style":932},[13522],{"type":68,"value":1109},{"type":62,"tag":307,"props":13524,"children":13525},{"style":926},[13526],{"type":68,"value":4181},{"type":62,"tag":307,"props":13528,"children":13529},{"style":324},[13530],{"type":68,"value":13531}," text",{"type":62,"tag":307,"props":13533,"children":13534},{"style":926},[13535],{"type":68,"value":4544},{"type":62,"tag":307,"props":13537,"children":13538},{"style":932},[13539],{"type":68,"value":3745},{"type":62,"tag":307,"props":13541,"children":13542},{"style":926},[13543],{"type":68,"value":1086},{"type":62,"tag":307,"props":13545,"children":13546},{"class":309,"line":335},[13547],{"type":62,"tag":307,"props":13548,"children":13549},{"style":926},[13550],{"type":68,"value":1198},{"type":62,"tag":71,"props":13552,"children":13553},{},[13554],{"type":68,"value":1459},{"type":62,"tag":297,"props":13556,"children":13558},{"className":915,"code":13557,"language":147,"meta":301,"style":301},"\u003Cbutton onclick=\"drillDown('Break down Q4 revenue by region')\">\n  Drill into Q4 ↗\n\u003C\u002Fbutton>\n\u003Cbutton onclick=\"drillDown('Explain what shear force is')\">\n  Learn about shear ↗\n\u003C\u002Fbutton>\n",[13559],{"type":62,"tag":93,"props":13560,"children":13561},{"__ignoreMap":301},[13562,13619,13627,13642,13698,13706],{"type":62,"tag":307,"props":13563,"children":13564},{"class":309,"line":310},[13565,13569,13573,13577,13581,13585,13590,13594,13598,13603,13607,13611,13615],{"type":62,"tag":307,"props":13566,"children":13567},{"style":926},[13568],{"type":68,"value":929},{"type":62,"tag":307,"props":13570,"children":13571},{"style":932},[13572],{"type":68,"value":3514},{"type":62,"tag":307,"props":13574,"children":13575},{"style":938},[13576],{"type":68,"value":3519},{"type":62,"tag":307,"props":13578,"children":13579},{"style":926},[13580],{"type":68,"value":946},{"type":62,"tag":307,"props":13582,"children":13583},{"style":926},[13584],{"type":68,"value":951},{"type":62,"tag":307,"props":13586,"children":13587},{"style":1101},[13588],{"type":68,"value":13589},"drillDown",{"type":62,"tag":307,"props":13591,"children":13592},{"style":954},[13593],{"type":68,"value":1109},{"type":62,"tag":307,"props":13595,"children":13596},{"style":926},[13597],{"type":68,"value":3926},{"type":62,"tag":307,"props":13599,"children":13600},{"style":954},[13601],{"type":68,"value":13602},"Break down Q4 revenue by region",{"type":62,"tag":307,"props":13604,"children":13605},{"style":926},[13606],{"type":68,"value":3926},{"type":62,"tag":307,"props":13608,"children":13609},{"style":954},[13610],{"type":68,"value":3745},{"type":62,"tag":307,"props":13612,"children":13613},{"style":926},[13614],{"type":68,"value":951},{"type":62,"tag":307,"props":13616,"children":13617},{"style":926},[13618],{"type":68,"value":982},{"type":62,"tag":307,"props":13620,"children":13621},{"class":309,"line":320},[13622],{"type":62,"tag":307,"props":13623,"children":13624},{"style":324},[13625],{"type":68,"value":13626},"  Drill into Q4 ↗\n",{"type":62,"tag":307,"props":13628,"children":13629},{"class":309,"line":335},[13630,13634,13638],{"type":62,"tag":307,"props":13631,"children":13632},{"style":926},[13633],{"type":68,"value":998},{"type":62,"tag":307,"props":13635,"children":13636},{"style":932},[13637],{"type":68,"value":3514},{"type":62,"tag":307,"props":13639,"children":13640},{"style":926},[13641],{"type":68,"value":982},{"type":62,"tag":307,"props":13643,"children":13644},{"class":309,"line":349},[13645,13649,13653,13657,13661,13665,13669,13673,13677,13682,13686,13690,13694],{"type":62,"tag":307,"props":13646,"children":13647},{"style":926},[13648],{"type":68,"value":929},{"type":62,"tag":307,"props":13650,"children":13651},{"style":932},[13652],{"type":68,"value":3514},{"type":62,"tag":307,"props":13654,"children":13655},{"style":938},[13656],{"type":68,"value":3519},{"type":62,"tag":307,"props":13658,"children":13659},{"style":926},[13660],{"type":68,"value":946},{"type":62,"tag":307,"props":13662,"children":13663},{"style":926},[13664],{"type":68,"value":951},{"type":62,"tag":307,"props":13666,"children":13667},{"style":1101},[13668],{"type":68,"value":13589},{"type":62,"tag":307,"props":13670,"children":13671},{"style":954},[13672],{"type":68,"value":1109},{"type":62,"tag":307,"props":13674,"children":13675},{"style":926},[13676],{"type":68,"value":3926},{"type":62,"tag":307,"props":13678,"children":13679},{"style":954},[13680],{"type":68,"value":13681},"Explain what shear force is",{"type":62,"tag":307,"props":13683,"children":13684},{"style":926},[13685],{"type":68,"value":3926},{"type":62,"tag":307,"props":13687,"children":13688},{"style":954},[13689],{"type":68,"value":3745},{"type":62,"tag":307,"props":13691,"children":13692},{"style":926},[13693],{"type":68,"value":951},{"type":62,"tag":307,"props":13695,"children":13696},{"style":926},[13697],{"type":68,"value":982},{"type":62,"tag":307,"props":13699,"children":13700},{"class":309,"line":363},[13701],{"type":62,"tag":307,"props":13702,"children":13703},{"style":324},[13704],{"type":68,"value":13705},"  Learn about shear ↗\n",{"type":62,"tag":307,"props":13707,"children":13708},{"class":309,"line":377},[13709,13713,13717],{"type":62,"tag":307,"props":13710,"children":13711},{"style":926},[13712],{"type":68,"value":998},{"type":62,"tag":307,"props":13714,"children":13715},{"style":932},[13716],{"type":68,"value":3514},{"type":62,"tag":307,"props":13718,"children":13719},{"style":926},[13720],{"type":68,"value":982},{"type":62,"tag":71,"props":13722,"children":13723},{},[13724,13729,13731,13736,13738,13744,13746,13751],{"type":62,"tag":668,"props":13725,"children":13726},{},[13727],{"type":68,"value":13728},"Use for",{"type":68,"value":13730},": drill-downs, follow-up questions, \"explain this part\".\n",{"type":62,"tag":668,"props":13732,"children":13733},{},[13734],{"type":68,"value":13735},"Don't use for",{"type":68,"value":13737},": filtering, sorting, toggling — handle those in JS.\nAppend ",{"type":62,"tag":93,"props":13739,"children":13741},{"className":13740},[],[13742],{"type":68,"value":13743}," ↗",{"type":68,"value":13745}," to button text when it triggers the bridge.\nFor external links use ",{"type":62,"tag":93,"props":13747,"children":13749},{"className":13748},[],[13750],{"type":68,"value":241},{"type":68,"value":13752},"\n(https only — anything else is rejected).",{"type":62,"tag":290,"props":13754,"children":13756},{"id":13755},"responsive-grid-pattern",[13757],{"type":68,"value":13758},"Responsive Grid Pattern",{"type":62,"tag":297,"props":13760,"children":13762},{"className":299,"code":13761,"language":136,"meta":301,"style":301},"display: grid;\ngrid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\ngap: 12px;\n",[13763],{"type":62,"tag":93,"props":13764,"children":13765},{"__ignoreMap":301},[13766,13773,13808],{"type":62,"tag":307,"props":13767,"children":13768},{"class":309,"line":310},[13769],{"type":62,"tag":307,"props":13770,"children":13771},{"style":324},[13772],{"type":68,"value":11580},{"type":62,"tag":307,"props":13774,"children":13775},{"class":309,"line":320},[13776,13781,13786,13790,13794,13799,13803],{"type":62,"tag":307,"props":13777,"children":13778},{"style":1054},[13779],{"type":68,"value":13780},"grid-template-columns",{"type":62,"tag":307,"props":13782,"children":13783},{"style":324},[13784],{"type":68,"value":13785},": repeat(",{"type":62,"tag":307,"props":13787,"children":13788},{"style":1054},[13789],{"type":68,"value":1114},{"type":62,"tag":307,"props":13791,"children":13792},{"style":926},[13793],{"type":68,"value":1119},{"type":62,"tag":307,"props":13795,"children":13796},{"style":324},[13797],{"type":68,"value":13798}," minmax(160px",{"type":62,"tag":307,"props":13800,"children":13801},{"style":926},[13802],{"type":68,"value":1119},{"type":62,"tag":307,"props":13804,"children":13805},{"style":324},[13806],{"type":68,"value":13807}," 1fr));\n",{"type":62,"tag":307,"props":13809,"children":13810},{"class":309,"line":335},[13811],{"type":62,"tag":307,"props":13812,"children":13813},{"style":324},[13814],{"type":68,"value":13815},"gap: 12px;\n",{"type":62,"tag":71,"props":13817,"children":13818},{},[13819,13821,13827],{"type":68,"value":13820},"Use ",{"type":62,"tag":93,"props":13822,"children":13824},{"className":13823},[],[13825],{"type":68,"value":13826},"minmax(0, 1fr)",{"type":68,"value":13828}," if children have large min-content that could overflow.",{"type":62,"tag":290,"props":13830,"children":13832},{"id":13831},"css-animations-subtle-and-purposeful",[13833],{"type":68,"value":13834},"CSS Animations (Subtle and Purposeful)",{"type":62,"tag":297,"props":13836,"children":13838},{"className":299,"code":13837,"language":136,"meta":301,"style":301},"\u002F* Only animate transform and opacity for performance *\u002F\n@keyframes fadeSlideIn {\n  from { opacity: 0; transform: translateY(8px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\u002F* Always respect user 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\u002F* Flowing particles \u002F convection currents *\u002F\n@keyframes flow { to { stroke-dashoffset: -20; } }\n.flowing {\n  stroke-dasharray: 5 5;\n  animation: flow 1.6s linear infinite;\n}\n\n\u002F* Pulsing for active elements *\u002F\n@keyframes pulse {\n  0%, 100% { opacity: 0.3; }\n  50% { opacity: 0.7; }\n}\n",[13839],{"type":62,"tag":93,"props":13840,"children":13841},{"__ignoreMap":301},[13842,13850,13867,13927,13983,13990,13997,14005,14039,14086,14112,14136,14143,14150,14157,14165,14216,14232,14256,14287,14294,14301,14309,14325,14366,14399],{"type":62,"tag":307,"props":13843,"children":13844},{"class":309,"line":310},[13845],{"type":62,"tag":307,"props":13846,"children":13847},{"style":314},[13848],{"type":68,"value":13849},"\u002F* Only animate transform and opacity for performance *\u002F\n",{"type":62,"tag":307,"props":13851,"children":13852},{"class":309,"line":320},[13853,13858,13863],{"type":62,"tag":307,"props":13854,"children":13855},{"style":4645},[13856],{"type":68,"value":13857},"@keyframes",{"type":62,"tag":307,"props":13859,"children":13860},{"style":3874},[13861],{"type":68,"value":13862}," fadeSlideIn",{"type":62,"tag":307,"props":13864,"children":13865},{"style":926},[13866],{"type":68,"value":1062},{"type":62,"tag":307,"props":13868,"children":13869},{"class":309,"line":335},[13870,13875,13879,13884,13888,13892,13896,13901,13905,13910,13914,13919,13923],{"type":62,"tag":307,"props":13871,"children":13872},{"style":1054},[13873],{"type":68,"value":13874},"  from",{"type":62,"tag":307,"props":13876,"children":13877},{"style":926},[13878],{"type":68,"value":1412},{"type":62,"tag":307,"props":13880,"children":13881},{"style":1068},[13882],{"type":68,"value":13883}," opacity",{"type":62,"tag":307,"props":13885,"children":13886},{"style":926},[13887],{"type":68,"value":1076},{"type":62,"tag":307,"props":13889,"children":13890},{"style":1131},[13891],{"type":68,"value":3232},{"type":62,"tag":307,"props":13893,"children":13894},{"style":926},[13895],{"type":68,"value":1431},{"type":62,"tag":307,"props":13897,"children":13898},{"style":1068},[13899],{"type":68,"value":13900}," transform",{"type":62,"tag":307,"props":13902,"children":13903},{"style":926},[13904],{"type":68,"value":1076},{"type":62,"tag":307,"props":13906,"children":13907},{"style":1101},[13908],{"type":68,"value":13909}," translateY",{"type":62,"tag":307,"props":13911,"children":13912},{"style":926},[13913],{"type":68,"value":1109},{"type":62,"tag":307,"props":13915,"children":13916},{"style":1131},[13917],{"type":68,"value":13918},"8px",{"type":62,"tag":307,"props":13920,"children":13921},{"style":926},[13922],{"type":68,"value":8368},{"type":62,"tag":307,"props":13924,"children":13925},{"style":926},[13926],{"type":68,"value":1454},{"type":62,"tag":307,"props":13928,"children":13929},{"class":309,"line":349},[13930,13935,13939,13943,13947,13951,13955,13959,13963,13967,13971,13975,13979],{"type":62,"tag":307,"props":13931,"children":13932},{"style":1054},[13933],{"type":68,"value":13934},"  to",{"type":62,"tag":307,"props":13936,"children":13937},{"style":926},[13938],{"type":68,"value":1412},{"type":62,"tag":307,"props":13940,"children":13941},{"style":1068},[13942],{"type":68,"value":13883},{"type":62,"tag":307,"props":13944,"children":13945},{"style":926},[13946],{"type":68,"value":1076},{"type":62,"tag":307,"props":13948,"children":13949},{"style":1131},[13950],{"type":68,"value":5967},{"type":62,"tag":307,"props":13952,"children":13953},{"style":926},[13954],{"type":68,"value":1431},{"type":62,"tag":307,"props":13956,"children":13957},{"style":1068},[13958],{"type":68,"value":13900},{"type":62,"tag":307,"props":13960,"children":13961},{"style":926},[13962],{"type":68,"value":1076},{"type":62,"tag":307,"props":13964,"children":13965},{"style":1101},[13966],{"type":68,"value":13909},{"type":62,"tag":307,"props":13968,"children":13969},{"style":926},[13970],{"type":68,"value":1109},{"type":62,"tag":307,"props":13972,"children":13973},{"style":1131},[13974],{"type":68,"value":4591},{"type":62,"tag":307,"props":13976,"children":13977},{"style":926},[13978],{"type":68,"value":8368},{"type":62,"tag":307,"props":13980,"children":13981},{"style":926},[13982],{"type":68,"value":1454},{"type":62,"tag":307,"props":13984,"children":13985},{"class":309,"line":363},[13986],{"type":62,"tag":307,"props":13987,"children":13988},{"style":926},[13989],{"type":68,"value":1198},{"type":62,"tag":307,"props":13991,"children":13992},{"class":309,"line":377},[13993],{"type":62,"tag":307,"props":13994,"children":13995},{"emptyLinePlaceholder":423},[13996],{"type":68,"value":426},{"type":62,"tag":307,"props":13998,"children":13999},{"class":309,"line":391},[14000],{"type":62,"tag":307,"props":14001,"children":14002},{"style":314},[14003],{"type":68,"value":14004},"\u002F* Always respect user preferences *\u002F\n",{"type":62,"tag":307,"props":14006,"children":14007},{"class":309,"line":405},[14008,14013,14017,14022,14026,14031,14035],{"type":62,"tag":307,"props":14009,"children":14010},{"style":4645},[14011],{"type":68,"value":14012},"@media",{"type":62,"tag":307,"props":14014,"children":14015},{"style":926},[14016],{"type":68,"value":199},{"type":62,"tag":307,"props":14018,"children":14019},{"style":324},[14020],{"type":68,"value":14021},"prefers-reduced-motion",{"type":62,"tag":307,"props":14023,"children":14024},{"style":926},[14025],{"type":68,"value":1076},{"type":62,"tag":307,"props":14027,"children":14028},{"style":324},[14029],{"type":68,"value":14030}," reduce",{"type":62,"tag":307,"props":14032,"children":14033},{"style":926},[14034],{"type":68,"value":3745},{"type":62,"tag":307,"props":14036,"children":14037},{"style":926},[14038],{"type":68,"value":1062},{"type":62,"tag":307,"props":14040,"children":14041},{"class":309,"line":419},[14042,14047,14051,14055,14060,14065,14069,14073,14077,14082],{"type":62,"tag":307,"props":14043,"children":14044},{"style":1054},[14045],{"type":68,"value":14046},"  *",{"type":62,"tag":307,"props":14048,"children":14049},{"style":926},[14050],{"type":68,"value":1119},{"type":62,"tag":307,"props":14052,"children":14053},{"style":1054},[14054],{"type":68,"value":4719},{"type":62,"tag":307,"props":14056,"children":14057},{"style":926},[14058],{"type":68,"value":14059},"::",{"type":62,"tag":307,"props":14061,"children":14062},{"style":938},[14063],{"type":68,"value":14064},"before",{"type":62,"tag":307,"props":14066,"children":14067},{"style":926},[14068],{"type":68,"value":1119},{"type":62,"tag":307,"props":14070,"children":14071},{"style":1054},[14072],{"type":68,"value":4719},{"type":62,"tag":307,"props":14074,"children":14075},{"style":926},[14076],{"type":68,"value":14059},{"type":62,"tag":307,"props":14078,"children":14079},{"style":938},[14080],{"type":68,"value":14081},"after",{"type":62,"tag":307,"props":14083,"children":14084},{"style":926},[14085],{"type":68,"value":1062},{"type":62,"tag":307,"props":14087,"children":14088},{"class":309,"line":429},[14089,14094,14098,14103,14108],{"type":62,"tag":307,"props":14090,"children":14091},{"style":1068},[14092],{"type":68,"value":14093},"    animation-duration",{"type":62,"tag":307,"props":14095,"children":14096},{"style":926},[14097],{"type":68,"value":1076},{"type":62,"tag":307,"props":14099,"children":14100},{"style":1131},[14101],{"type":68,"value":14102}," 0.01ms",{"type":62,"tag":307,"props":14104,"children":14105},{"style":1131},[14106],{"type":68,"value":14107}," !important",{"type":62,"tag":307,"props":14109,"children":14110},{"style":926},[14111],{"type":68,"value":1086},{"type":62,"tag":307,"props":14113,"children":14114},{"class":309,"line":438},[14115,14120,14124,14128,14132],{"type":62,"tag":307,"props":14116,"children":14117},{"style":1068},[14118],{"type":68,"value":14119},"    animation-iteration-count",{"type":62,"tag":307,"props":14121,"children":14122},{"style":926},[14123],{"type":68,"value":1076},{"type":62,"tag":307,"props":14125,"children":14126},{"style":1131},[14127],{"type":68,"value":5967},{"type":62,"tag":307,"props":14129,"children":14130},{"style":1131},[14131],{"type":68,"value":14107},{"type":62,"tag":307,"props":14133,"children":14134},{"style":926},[14135],{"type":68,"value":1086},{"type":62,"tag":307,"props":14137,"children":14138},{"class":309,"line":452},[14139],{"type":62,"tag":307,"props":14140,"children":14141},{"style":926},[14142],{"type":68,"value":5177},{"type":62,"tag":307,"props":14144,"children":14145},{"class":309,"line":466},[14146],{"type":62,"tag":307,"props":14147,"children":14148},{"style":926},[14149],{"type":68,"value":1198},{"type":62,"tag":307,"props":14151,"children":14152},{"class":309,"line":480},[14153],{"type":62,"tag":307,"props":14154,"children":14155},{"emptyLinePlaceholder":423},[14156],{"type":68,"value":426},{"type":62,"tag":307,"props":14158,"children":14159},{"class":309,"line":489},[14160],{"type":62,"tag":307,"props":14161,"children":14162},{"style":314},[14163],{"type":68,"value":14164},"\u002F* Flowing particles \u002F convection currents *\u002F\n",{"type":62,"tag":307,"props":14166,"children":14167},{"class":309,"line":497},[14168,14172,14177,14181,14186,14190,14195,14199,14204,14208,14212],{"type":62,"tag":307,"props":14169,"children":14170},{"style":4645},[14171],{"type":68,"value":13857},{"type":62,"tag":307,"props":14173,"children":14174},{"style":3874},[14175],{"type":68,"value":14176}," flow",{"type":62,"tag":307,"props":14178,"children":14179},{"style":926},[14180],{"type":68,"value":1412},{"type":62,"tag":307,"props":14182,"children":14183},{"style":1054},[14184],{"type":68,"value":14185}," to",{"type":62,"tag":307,"props":14187,"children":14188},{"style":926},[14189],{"type":68,"value":1412},{"type":62,"tag":307,"props":14191,"children":14192},{"style":1068},[14193],{"type":68,"value":14194}," stroke-dashoffset",{"type":62,"tag":307,"props":14196,"children":14197},{"style":926},[14198],{"type":68,"value":1076},{"type":62,"tag":307,"props":14200,"children":14201},{"style":1131},[14202],{"type":68,"value":14203}," -20",{"type":62,"tag":307,"props":14205,"children":14206},{"style":926},[14207],{"type":68,"value":1431},{"type":62,"tag":307,"props":14209,"children":14210},{"style":926},[14211],{"type":68,"value":4544},{"type":62,"tag":307,"props":14213,"children":14214},{"style":926},[14215],{"type":68,"value":1454},{"type":62,"tag":307,"props":14217,"children":14218},{"class":309,"line":506},[14219,14223,14228],{"type":62,"tag":307,"props":14220,"children":14221},{"style":926},[14222],{"type":68,"value":848},{"type":62,"tag":307,"props":14224,"children":14225},{"style":1054},[14226],{"type":68,"value":14227},"flowing",{"type":62,"tag":307,"props":14229,"children":14230},{"style":926},[14231],{"type":68,"value":1062},{"type":62,"tag":307,"props":14233,"children":14234},{"class":309,"line":520},[14235,14240,14244,14248,14252],{"type":62,"tag":307,"props":14236,"children":14237},{"style":1068},[14238],{"type":68,"value":14239},"  stroke-dasharray",{"type":62,"tag":307,"props":14241,"children":14242},{"style":926},[14243],{"type":68,"value":1076},{"type":62,"tag":307,"props":14245,"children":14246},{"style":1131},[14247],{"type":68,"value":4142},{"type":62,"tag":307,"props":14249,"children":14250},{"style":1131},[14251],{"type":68,"value":4142},{"type":62,"tag":307,"props":14253,"children":14254},{"style":926},[14255],{"type":68,"value":1086},{"type":62,"tag":307,"props":14257,"children":14258},{"class":309,"line":534},[14259,14264,14268,14273,14278,14283],{"type":62,"tag":307,"props":14260,"children":14261},{"style":1068},[14262],{"type":68,"value":14263},"  animation",{"type":62,"tag":307,"props":14265,"children":14266},{"style":926},[14267],{"type":68,"value":1076},{"type":62,"tag":307,"props":14269,"children":14270},{"style":324},[14271],{"type":68,"value":14272}," flow ",{"type":62,"tag":307,"props":14274,"children":14275},{"style":1131},[14276],{"type":68,"value":14277},"1.6s",{"type":62,"tag":307,"props":14279,"children":14280},{"style":324},[14281],{"type":68,"value":14282}," linear infinite",{"type":62,"tag":307,"props":14284,"children":14285},{"style":926},[14286],{"type":68,"value":1086},{"type":62,"tag":307,"props":14288,"children":14289},{"class":309,"line":548},[14290],{"type":62,"tag":307,"props":14291,"children":14292},{"style":926},[14293],{"type":68,"value":1198},{"type":62,"tag":307,"props":14295,"children":14296},{"class":309,"line":556},[14297],{"type":62,"tag":307,"props":14298,"children":14299},{"emptyLinePlaceholder":423},[14300],{"type":68,"value":426},{"type":62,"tag":307,"props":14302,"children":14303},{"class":309,"line":565},[14304],{"type":62,"tag":307,"props":14305,"children":14306},{"style":314},[14307],{"type":68,"value":14308},"\u002F* Pulsing for active elements *\u002F\n",{"type":62,"tag":307,"props":14310,"children":14311},{"class":309,"line":579},[14312,14316,14321],{"type":62,"tag":307,"props":14313,"children":14314},{"style":4645},[14315],{"type":68,"value":13857},{"type":62,"tag":307,"props":14317,"children":14318},{"style":3874},[14319],{"type":68,"value":14320}," pulse",{"type":62,"tag":307,"props":14322,"children":14323},{"style":926},[14324],{"type":68,"value":1062},{"type":62,"tag":307,"props":14326,"children":14327},{"class":309,"line":593},[14328,14333,14337,14341,14345,14349,14353,14358,14362],{"type":62,"tag":307,"props":14329,"children":14330},{"style":1054},[14331],{"type":68,"value":14332},"  0%",{"type":62,"tag":307,"props":14334,"children":14335},{"style":324},[14336],{"type":68,"value":251},{"type":62,"tag":307,"props":14338,"children":14339},{"style":1054},[14340],{"type":68,"value":6036},{"type":62,"tag":307,"props":14342,"children":14343},{"style":926},[14344],{"type":68,"value":1412},{"type":62,"tag":307,"props":14346,"children":14347},{"style":1068},[14348],{"type":68,"value":13883},{"type":62,"tag":307,"props":14350,"children":14351},{"style":926},[14352],{"type":68,"value":1076},{"type":62,"tag":307,"props":14354,"children":14355},{"style":1131},[14356],{"type":68,"value":14357}," 0.3",{"type":62,"tag":307,"props":14359,"children":14360},{"style":926},[14361],{"type":68,"value":1431},{"type":62,"tag":307,"props":14363,"children":14364},{"style":926},[14365],{"type":68,"value":1454},{"type":62,"tag":307,"props":14367,"children":14368},{"class":309,"line":607},[14369,14374,14378,14382,14386,14391,14395],{"type":62,"tag":307,"props":14370,"children":14371},{"style":1054},[14372],{"type":68,"value":14373},"  50%",{"type":62,"tag":307,"props":14375,"children":14376},{"style":926},[14377],{"type":68,"value":1412},{"type":62,"tag":307,"props":14379,"children":14380},{"style":1068},[14381],{"type":68,"value":13883},{"type":62,"tag":307,"props":14383,"children":14384},{"style":926},[14385],{"type":68,"value":1076},{"type":62,"tag":307,"props":14387,"children":14388},{"style":1131},[14389],{"type":68,"value":14390}," 0.7",{"type":62,"tag":307,"props":14392,"children":14393},{"style":926},[14394],{"type":68,"value":1431},{"type":62,"tag":307,"props":14396,"children":14397},{"style":926},[14398],{"type":68,"value":1454},{"type":62,"tag":307,"props":14400,"children":14401},{"class":309,"line":615},[14402],{"type":62,"tag":307,"props":14403,"children":14404},{"style":926},[14405],{"type":68,"value":1198},{"type":62,"tag":77,"props":14407,"children":14408},{},[],{"type":62,"tag":81,"props":14410,"children":14412},{"id":14411},"part-7-external-libraries",[14413],{"type":68,"value":14414},"Part 7: External Libraries",{"type":62,"tag":290,"props":14416,"children":14418},{"id":14417},"importmap-libraries-pre-injected",[14419],{"type":68,"value":14420},"Importmap Libraries (Pre-Injected)",{"type":62,"tag":71,"props":14422,"children":14423},{},[14424,14426,14431,14432,14437,14438,14443,14444,14449],{"type":68,"value":14425},"An importmap for ",{"type":62,"tag":93,"props":14427,"children":14429},{"className":14428},[],[14430],{"type":68,"value":249},{"type":68,"value":251},{"type":62,"tag":93,"props":14433,"children":14435},{"className":14434},[],[14436],{"type":68,"value":257},{"type":68,"value":251},{"type":62,"tag":93,"props":14439,"children":14441},{"className":14440},[],[14442],{"type":68,"value":264},{"type":68,"value":266},{"type":62,"tag":93,"props":14445,"children":14447},{"className":14446},[],[14448],{"type":68,"value":272},{"type":68,"value":14450}," (served via esm.sh) is\npre-injected into every sandbox. jsFunctions and jsExpressions execute as classic\nscripts, where top-level await is a SyntaxError that fails silently — so PREFER\nloading libraries with dynamic imports INSIDE an async function declared in\njsFunctions, and keep jsExpressions synchronous invocations of those functions:",{"type":62,"tag":297,"props":14452,"children":14454},{"className":3848,"code":14453,"language":3850,"meta":301,"style":301},"async function setupScene() {\n  const THREE = await import('three');\n  const { OrbitControls } =\n    await import('three\u002Fexamples\u002Fjsm\u002Fcontrols\u002FOrbitControls.js');\n  \u002F\u002F ... build the scene with real geometry and PBR materials.\n  \u002F\u002F NEVER fake 3D with CSS transforms or Canvas 2D projection.\n}\n",[14455],{"type":62,"tag":93,"props":14456,"children":14457},{"__ignoreMap":301},[14458,14484,14534,14558,14595,14603,14611],{"type":62,"tag":307,"props":14459,"children":14460},{"class":309,"line":310},[14461,14466,14471,14476,14480],{"type":62,"tag":307,"props":14462,"children":14463},{"style":938},[14464],{"type":68,"value":14465},"async",{"type":62,"tag":307,"props":14467,"children":14468},{"style":938},[14469],{"type":68,"value":14470}," function",{"type":62,"tag":307,"props":14472,"children":14473},{"style":1101},[14474],{"type":68,"value":14475}," setupScene",{"type":62,"tag":307,"props":14477,"children":14478},{"style":926},[14479],{"type":68,"value":3537},{"type":62,"tag":307,"props":14481,"children":14482},{"style":926},[14483],{"type":68,"value":1062},{"type":62,"tag":307,"props":14485,"children":14486},{"class":309,"line":320},[14487,14491,14496,14500,14505,14510,14514,14518,14522,14526,14530],{"type":62,"tag":307,"props":14488,"children":14489},{"style":938},[14490],{"type":68,"value":3893},{"type":62,"tag":307,"props":14492,"children":14493},{"style":324},[14494],{"type":68,"value":14495}," THREE",{"type":62,"tag":307,"props":14497,"children":14498},{"style":926},[14499],{"type":68,"value":3903},{"type":62,"tag":307,"props":14501,"children":14502},{"style":4645},[14503],{"type":68,"value":14504}," await",{"type":62,"tag":307,"props":14506,"children":14507},{"style":926},[14508],{"type":68,"value":14509}," import",{"type":62,"tag":307,"props":14511,"children":14512},{"style":932},[14513],{"type":68,"value":1109},{"type":62,"tag":307,"props":14515,"children":14516},{"style":926},[14517],{"type":68,"value":3926},{"type":62,"tag":307,"props":14519,"children":14520},{"style":954},[14521],{"type":68,"value":249},{"type":62,"tag":307,"props":14523,"children":14524},{"style":926},[14525],{"type":68,"value":3926},{"type":62,"tag":307,"props":14527,"children":14528},{"style":932},[14529],{"type":68,"value":3745},{"type":62,"tag":307,"props":14531,"children":14532},{"style":926},[14533],{"type":68,"value":1086},{"type":62,"tag":307,"props":14535,"children":14536},{"class":309,"line":335},[14537,14541,14545,14550,14554],{"type":62,"tag":307,"props":14538,"children":14539},{"style":938},[14540],{"type":68,"value":3893},{"type":62,"tag":307,"props":14542,"children":14543},{"style":926},[14544],{"type":68,"value":1412},{"type":62,"tag":307,"props":14546,"children":14547},{"style":324},[14548],{"type":68,"value":14549}," OrbitControls",{"type":62,"tag":307,"props":14551,"children":14552},{"style":926},[14553],{"type":68,"value":4544},{"type":62,"tag":307,"props":14555,"children":14556},{"style":926},[14557],{"type":68,"value":13069},{"type":62,"tag":307,"props":14559,"children":14560},{"class":309,"line":349},[14561,14566,14570,14574,14578,14583,14587,14591],{"type":62,"tag":307,"props":14562,"children":14563},{"style":4645},[14564],{"type":68,"value":14565},"    await",{"type":62,"tag":307,"props":14567,"children":14568},{"style":926},[14569],{"type":68,"value":14509},{"type":62,"tag":307,"props":14571,"children":14572},{"style":932},[14573],{"type":68,"value":1109},{"type":62,"tag":307,"props":14575,"children":14576},{"style":926},[14577],{"type":68,"value":3926},{"type":62,"tag":307,"props":14579,"children":14580},{"style":954},[14581],{"type":68,"value":14582},"three\u002Fexamples\u002Fjsm\u002Fcontrols\u002FOrbitControls.js",{"type":62,"tag":307,"props":14584,"children":14585},{"style":926},[14586],{"type":68,"value":3926},{"type":62,"tag":307,"props":14588,"children":14589},{"style":932},[14590],{"type":68,"value":3745},{"type":62,"tag":307,"props":14592,"children":14593},{"style":926},[14594],{"type":68,"value":1086},{"type":62,"tag":307,"props":14596,"children":14597},{"class":309,"line":363},[14598],{"type":62,"tag":307,"props":14599,"children":14600},{"style":314},[14601],{"type":68,"value":14602},"  \u002F\u002F ... build the scene with real geometry and PBR materials.\n",{"type":62,"tag":307,"props":14604,"children":14605},{"class":309,"line":377},[14606],{"type":62,"tag":307,"props":14607,"children":14608},{"style":314},[14609],{"type":68,"value":14610},"  \u002F\u002F NEVER fake 3D with CSS transforms or Canvas 2D projection.\n",{"type":62,"tag":307,"props":14612,"children":14613},{"class":309,"line":391},[14614],{"type":62,"tag":307,"props":14615,"children":14616},{"style":926},[14617],{"type":68,"value":1198},{"type":62,"tag":297,"props":14619,"children":14621},{"className":3848,"code":14620,"language":3850,"meta":301,"style":301},"async function setupLibraries() {\n  const { default: gsap } = await import('gsap');\n  const d3 = await import('d3');\n  const { default: Chart } = await import('chart.js\u002Fauto');\n  \u002F\u002F ... use the libraries here.\n}\n",[14622],{"type":62,"tag":93,"props":14623,"children":14624},{"__ignoreMap":301},[14625,14649,14714,14762,14827,14835],{"type":62,"tag":307,"props":14626,"children":14627},{"class":309,"line":310},[14628,14632,14636,14641,14645],{"type":62,"tag":307,"props":14629,"children":14630},{"style":938},[14631],{"type":68,"value":14465},{"type":62,"tag":307,"props":14633,"children":14634},{"style":938},[14635],{"type":68,"value":14470},{"type":62,"tag":307,"props":14637,"children":14638},{"style":1101},[14639],{"type":68,"value":14640}," setupLibraries",{"type":62,"tag":307,"props":14642,"children":14643},{"style":926},[14644],{"type":68,"value":3537},{"type":62,"tag":307,"props":14646,"children":14647},{"style":926},[14648],{"type":68,"value":1062},{"type":62,"tag":307,"props":14650,"children":14651},{"class":309,"line":320},[14652,14656,14660,14665,14669,14674,14678,14682,14686,14690,14694,14698,14702,14706,14710],{"type":62,"tag":307,"props":14653,"children":14654},{"style":938},[14655],{"type":68,"value":3893},{"type":62,"tag":307,"props":14657,"children":14658},{"style":926},[14659],{"type":68,"value":1412},{"type":62,"tag":307,"props":14661,"children":14662},{"style":932},[14663],{"type":68,"value":14664}," default",{"type":62,"tag":307,"props":14666,"children":14667},{"style":926},[14668],{"type":68,"value":1076},{"type":62,"tag":307,"props":14670,"children":14671},{"style":324},[14672],{"type":68,"value":14673}," gsap",{"type":62,"tag":307,"props":14675,"children":14676},{"style":926},[14677],{"type":68,"value":4544},{"type":62,"tag":307,"props":14679,"children":14680},{"style":926},[14681],{"type":68,"value":3903},{"type":62,"tag":307,"props":14683,"children":14684},{"style":4645},[14685],{"type":68,"value":14504},{"type":62,"tag":307,"props":14687,"children":14688},{"style":926},[14689],{"type":68,"value":14509},{"type":62,"tag":307,"props":14691,"children":14692},{"style":932},[14693],{"type":68,"value":1109},{"type":62,"tag":307,"props":14695,"children":14696},{"style":926},[14697],{"type":68,"value":3926},{"type":62,"tag":307,"props":14699,"children":14700},{"style":954},[14701],{"type":68,"value":257},{"type":62,"tag":307,"props":14703,"children":14704},{"style":926},[14705],{"type":68,"value":3926},{"type":62,"tag":307,"props":14707,"children":14708},{"style":932},[14709],{"type":68,"value":3745},{"type":62,"tag":307,"props":14711,"children":14712},{"style":926},[14713],{"type":68,"value":1086},{"type":62,"tag":307,"props":14715,"children":14716},{"class":309,"line":335},[14717,14721,14726,14730,14734,14738,14742,14746,14750,14754,14758],{"type":62,"tag":307,"props":14718,"children":14719},{"style":938},[14720],{"type":68,"value":3893},{"type":62,"tag":307,"props":14722,"children":14723},{"style":324},[14724],{"type":68,"value":14725}," d3",{"type":62,"tag":307,"props":14727,"children":14728},{"style":926},[14729],{"type":68,"value":3903},{"type":62,"tag":307,"props":14731,"children":14732},{"style":4645},[14733],{"type":68,"value":14504},{"type":62,"tag":307,"props":14735,"children":14736},{"style":926},[14737],{"type":68,"value":14509},{"type":62,"tag":307,"props":14739,"children":14740},{"style":932},[14741],{"type":68,"value":1109},{"type":62,"tag":307,"props":14743,"children":14744},{"style":926},[14745],{"type":68,"value":3926},{"type":62,"tag":307,"props":14747,"children":14748},{"style":954},[14749],{"type":68,"value":264},{"type":62,"tag":307,"props":14751,"children":14752},{"style":926},[14753],{"type":68,"value":3926},{"type":62,"tag":307,"props":14755,"children":14756},{"style":932},[14757],{"type":68,"value":3745},{"type":62,"tag":307,"props":14759,"children":14760},{"style":926},[14761],{"type":68,"value":1086},{"type":62,"tag":307,"props":14763,"children":14764},{"class":309,"line":349},[14765,14769,14773,14777,14781,14786,14790,14794,14798,14802,14806,14810,14815,14819,14823],{"type":62,"tag":307,"props":14766,"children":14767},{"style":938},[14768],{"type":68,"value":3893},{"type":62,"tag":307,"props":14770,"children":14771},{"style":926},[14772],{"type":68,"value":1412},{"type":62,"tag":307,"props":14774,"children":14775},{"style":932},[14776],{"type":68,"value":14664},{"type":62,"tag":307,"props":14778,"children":14779},{"style":926},[14780],{"type":68,"value":1076},{"type":62,"tag":307,"props":14782,"children":14783},{"style":324},[14784],{"type":68,"value":14785}," Chart",{"type":62,"tag":307,"props":14787,"children":14788},{"style":926},[14789],{"type":68,"value":4544},{"type":62,"tag":307,"props":14791,"children":14792},{"style":926},[14793],{"type":68,"value":3903},{"type":62,"tag":307,"props":14795,"children":14796},{"style":4645},[14797],{"type":68,"value":14504},{"type":62,"tag":307,"props":14799,"children":14800},{"style":926},[14801],{"type":68,"value":14509},{"type":62,"tag":307,"props":14803,"children":14804},{"style":932},[14805],{"type":68,"value":1109},{"type":62,"tag":307,"props":14807,"children":14808},{"style":926},[14809],{"type":68,"value":3926},{"type":62,"tag":307,"props":14811,"children":14812},{"style":954},[14813],{"type":68,"value":14814},"chart.js\u002Fauto",{"type":62,"tag":307,"props":14816,"children":14817},{"style":926},[14818],{"type":68,"value":3926},{"type":62,"tag":307,"props":14820,"children":14821},{"style":932},[14822],{"type":68,"value":3745},{"type":62,"tag":307,"props":14824,"children":14825},{"style":926},[14826],{"type":68,"value":1086},{"type":62,"tag":307,"props":14828,"children":14829},{"class":309,"line":363},[14830],{"type":62,"tag":307,"props":14831,"children":14832},{"style":314},[14833],{"type":68,"value":14834},"  \u002F\u002F ... use the libraries here.\n",{"type":62,"tag":307,"props":14836,"children":14837},{"class":309,"line":377},[14838],{"type":62,"tag":307,"props":14839,"children":14840},{"style":926},[14841],{"type":68,"value":1198},{"type":62,"tag":71,"props":14843,"children":14844},{},[14845,14847,14853],{"type":68,"value":14846},"Where a module script genuinely belongs in the html parameter,\n",{"type":62,"tag":93,"props":14848,"children":14850},{"className":14849},[],[14851],{"type":68,"value":14852},"\u003Cscript type=\"module\">",{"type":68,"value":14854}," with bare specifiers also resolves through the importmap:",{"type":62,"tag":297,"props":14856,"children":14858},{"className":915,"code":14857,"language":147,"meta":301,"style":301},"\u003Cscript type=\"module\">\nimport * as THREE from 'three';\nimport { OrbitControls } from 'three\u002Fexamples\u002Fjsm\u002Fcontrols\u002FOrbitControls.js';\n\u002F\u002F ... your Three.js code here\n\u003C\u002Fscript>\n",[14859],{"type":62,"tag":93,"props":14860,"children":14861},{"__ignoreMap":301},[14862,14899,14941,14981,14989],{"type":62,"tag":307,"props":14863,"children":14864},{"class":309,"line":310},[14865,14869,14874,14878,14882,14886,14891,14895],{"type":62,"tag":307,"props":14866,"children":14867},{"style":926},[14868],{"type":68,"value":929},{"type":62,"tag":307,"props":14870,"children":14871},{"style":932},[14872],{"type":68,"value":14873},"script",{"type":62,"tag":307,"props":14875,"children":14876},{"style":938},[14877],{"type":68,"value":3600},{"type":62,"tag":307,"props":14879,"children":14880},{"style":926},[14881],{"type":68,"value":946},{"type":62,"tag":307,"props":14883,"children":14884},{"style":926},[14885],{"type":68,"value":951},{"type":62,"tag":307,"props":14887,"children":14888},{"style":954},[14889],{"type":68,"value":14890},"module",{"type":62,"tag":307,"props":14892,"children":14893},{"style":926},[14894],{"type":68,"value":951},{"type":62,"tag":307,"props":14896,"children":14897},{"style":926},[14898],{"type":68,"value":982},{"type":62,"tag":307,"props":14900,"children":14901},{"class":309,"line":320},[14902,14907,14911,14916,14921,14925,14929,14933,14937],{"type":62,"tag":307,"props":14903,"children":14904},{"style":4645},[14905],{"type":68,"value":14906},"import",{"type":62,"tag":307,"props":14908,"children":14909},{"style":926},[14910],{"type":68,"value":4719},{"type":62,"tag":307,"props":14912,"children":14913},{"style":4645},[14914],{"type":68,"value":14915}," as",{"type":62,"tag":307,"props":14917,"children":14918},{"style":324},[14919],{"type":68,"value":14920}," THREE ",{"type":62,"tag":307,"props":14922,"children":14923},{"style":4645},[14924],{"type":68,"value":4172},{"type":62,"tag":307,"props":14926,"children":14927},{"style":926},[14928],{"type":68,"value":5132},{"type":62,"tag":307,"props":14930,"children":14931},{"style":954},[14932],{"type":68,"value":249},{"type":62,"tag":307,"props":14934,"children":14935},{"style":926},[14936],{"type":68,"value":3926},{"type":62,"tag":307,"props":14938,"children":14939},{"style":926},[14940],{"type":68,"value":1086},{"type":62,"tag":307,"props":14942,"children":14943},{"class":309,"line":335},[14944,14948,14952,14956,14960,14965,14969,14973,14977],{"type":62,"tag":307,"props":14945,"children":14946},{"style":4645},[14947],{"type":68,"value":14906},{"type":62,"tag":307,"props":14949,"children":14950},{"style":926},[14951],{"type":68,"value":1412},{"type":62,"tag":307,"props":14953,"children":14954},{"style":324},[14955],{"type":68,"value":14549},{"type":62,"tag":307,"props":14957,"children":14958},{"style":926},[14959],{"type":68,"value":4544},{"type":62,"tag":307,"props":14961,"children":14962},{"style":4645},[14963],{"type":68,"value":14964}," from",{"type":62,"tag":307,"props":14966,"children":14967},{"style":926},[14968],{"type":68,"value":5132},{"type":62,"tag":307,"props":14970,"children":14971},{"style":954},[14972],{"type":68,"value":14582},{"type":62,"tag":307,"props":14974,"children":14975},{"style":926},[14976],{"type":68,"value":3926},{"type":62,"tag":307,"props":14978,"children":14979},{"style":926},[14980],{"type":68,"value":1086},{"type":62,"tag":307,"props":14982,"children":14983},{"class":309,"line":349},[14984],{"type":62,"tag":307,"props":14985,"children":14986},{"style":314},[14987],{"type":68,"value":14988},"\u002F\u002F ... your Three.js code here\n",{"type":62,"tag":307,"props":14990,"children":14991},{"class":309,"line":363},[14992,14996,15000],{"type":62,"tag":307,"props":14993,"children":14994},{"style":926},[14995],{"type":68,"value":998},{"type":62,"tag":307,"props":14997,"children":14998},{"style":932},[14999],{"type":68,"value":14873},{"type":62,"tag":307,"props":15001,"children":15002},{"style":926},[15003],{"type":68,"value":982},{"type":62,"tag":71,"props":15005,"children":15006},{},[15007,15012,15014,15019,15021,15026,15028,15033,15035,15041],{"type":62,"tag":668,"props":15008,"children":15009},{},[15010],{"type":68,"value":15011},"Critical",{"type":68,"value":15013},": Regular ",{"type":62,"tag":93,"props":15015,"children":15017},{"className":15016},[],[15018],{"type":68,"value":163},{"type":68,"value":15020}," tags cannot use ",{"type":62,"tag":93,"props":15022,"children":15024},{"className":15023},[],[15025],{"type":68,"value":14906},{"type":68,"value":15027}," statements — use\n",{"type":62,"tag":93,"props":15029,"children":15031},{"className":15030},[],[15032],{"type":68,"value":14852},{"type":68,"value":15034}," in html. In jsFunctions\u002FjsExpressions (classic-script\nsemantics) dynamic ",{"type":62,"tag":93,"props":15036,"children":15038},{"className":15037},[],[15039],{"type":68,"value":15040},"await import(...)",{"type":68,"value":15042}," works only inside an async function body,\nnever at top level.",{"type":62,"tag":290,"props":15044,"children":15046},{"id":15045},"cdn-allowlist-for-everything-else",[15047],{"type":68,"value":15048},"CDN Allowlist (For Everything Else)",{"type":62,"tag":71,"props":15050,"children":15051},{},[15052],{"type":68,"value":15053},"Only these CDN origins work (CSP-enforced):",{"type":62,"tag":698,"props":15055,"children":15056},{},[15057,15066,15075,15084],{"type":62,"tag":106,"props":15058,"children":15059},{},[15060],{"type":62,"tag":93,"props":15061,"children":15063},{"className":15062},[],[15064],{"type":68,"value":15065},"cdnjs.cloudflare.com",{"type":62,"tag":106,"props":15067,"children":15068},{},[15069],{"type":62,"tag":93,"props":15070,"children":15072},{"className":15071},[],[15073],{"type":68,"value":15074},"esm.sh",{"type":62,"tag":106,"props":15076,"children":15077},{},[15078],{"type":62,"tag":93,"props":15079,"children":15081},{"className":15080},[],[15082],{"type":68,"value":15083},"cdn.jsdelivr.net",{"type":62,"tag":106,"props":15085,"children":15086},{},[15087],{"type":62,"tag":93,"props":15088,"children":15090},{"className":15089},[],[15091],{"type":68,"value":15092},"unpkg.com",{"type":62,"tag":71,"props":15094,"children":15095},{},[15096,15102,15103,15109],{"type":62,"tag":93,"props":15097,"children":15099},{"className":15098},[],[15100],{"type":68,"value":15101},"\u003Cscript src>",{"type":68,"value":2803},{"type":62,"tag":93,"props":15104,"children":15106},{"className":15105},[],[15107],{"type":68,"value":15108},"\u003Clink>",{"type":68,"value":15110}," CDN tags still work in the html head for libraries\noutside the importmap:",{"type":62,"tag":71,"props":15112,"children":15113},{},[15114,15119],{"type":62,"tag":668,"props":15115,"children":15116},{},[15117],{"type":68,"value":15118},"Mermaid",{"type":68,"value":15120}," (ERDs, sequence diagrams, class diagrams):",{"type":62,"tag":297,"props":15122,"children":15124},{"className":915,"code":15123,"language":147,"meta":301,"style":301},"\u003Cscript type=\"module\">\nimport mermaid from 'https:\u002F\u002Fesm.sh\u002Fmermaid@11\u002Fdist\u002Fmermaid.esm.min.mjs';\n\u003C\u002Fscript>\n",[15125],{"type":62,"tag":93,"props":15126,"children":15127},{"__ignoreMap":301},[15128,15163,15196],{"type":62,"tag":307,"props":15129,"children":15130},{"class":309,"line":310},[15131,15135,15139,15143,15147,15151,15155,15159],{"type":62,"tag":307,"props":15132,"children":15133},{"style":926},[15134],{"type":68,"value":929},{"type":62,"tag":307,"props":15136,"children":15137},{"style":932},[15138],{"type":68,"value":14873},{"type":62,"tag":307,"props":15140,"children":15141},{"style":938},[15142],{"type":68,"value":3600},{"type":62,"tag":307,"props":15144,"children":15145},{"style":926},[15146],{"type":68,"value":946},{"type":62,"tag":307,"props":15148,"children":15149},{"style":926},[15150],{"type":68,"value":951},{"type":62,"tag":307,"props":15152,"children":15153},{"style":954},[15154],{"type":68,"value":14890},{"type":62,"tag":307,"props":15156,"children":15157},{"style":926},[15158],{"type":68,"value":951},{"type":62,"tag":307,"props":15160,"children":15161},{"style":926},[15162],{"type":68,"value":982},{"type":62,"tag":307,"props":15164,"children":15165},{"class":309,"line":320},[15166,15170,15175,15179,15183,15188,15192],{"type":62,"tag":307,"props":15167,"children":15168},{"style":4645},[15169],{"type":68,"value":14906},{"type":62,"tag":307,"props":15171,"children":15172},{"style":324},[15173],{"type":68,"value":15174}," mermaid ",{"type":62,"tag":307,"props":15176,"children":15177},{"style":4645},[15178],{"type":68,"value":4172},{"type":62,"tag":307,"props":15180,"children":15181},{"style":926},[15182],{"type":68,"value":5132},{"type":62,"tag":307,"props":15184,"children":15185},{"style":954},[15186],{"type":68,"value":15187},"https:\u002F\u002Fesm.sh\u002Fmermaid@11\u002Fdist\u002Fmermaid.esm.min.mjs",{"type":62,"tag":307,"props":15189,"children":15190},{"style":926},[15191],{"type":68,"value":3926},{"type":62,"tag":307,"props":15193,"children":15194},{"style":926},[15195],{"type":68,"value":1086},{"type":62,"tag":307,"props":15197,"children":15198},{"class":309,"line":335},[15199,15203,15207],{"type":62,"tag":307,"props":15200,"children":15201},{"style":926},[15202],{"type":68,"value":998},{"type":62,"tag":307,"props":15204,"children":15205},{"style":932},[15206],{"type":68,"value":14873},{"type":62,"tag":307,"props":15208,"children":15209},{"style":926},[15210],{"type":68,"value":982},{"type":62,"tag":71,"props":15212,"children":15213},{},[15214,15219],{"type":62,"tag":668,"props":15215,"children":15216},{},[15217],{"type":68,"value":15218},"Tone.js",{"type":68,"value":15220}," (audio synthesis):",{"type":62,"tag":297,"props":15222,"children":15224},{"className":915,"code":15223,"language":147,"meta":301,"style":301},"\u003Cscript src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Ftone\u002F14.8.49\u002FTone.min.js\">\u003C\u002Fscript>\n",[15225],{"type":62,"tag":93,"props":15226,"children":15227},{"__ignoreMap":301},[15228],{"type":62,"tag":307,"props":15229,"children":15230},{"class":309,"line":310},[15231,15235,15239,15244,15248,15252,15257,15261,15265,15269],{"type":62,"tag":307,"props":15232,"children":15233},{"style":926},[15234],{"type":68,"value":929},{"type":62,"tag":307,"props":15236,"children":15237},{"style":932},[15238],{"type":68,"value":14873},{"type":62,"tag":307,"props":15240,"children":15241},{"style":938},[15242],{"type":68,"value":15243}," src",{"type":62,"tag":307,"props":15245,"children":15246},{"style":926},[15247],{"type":68,"value":946},{"type":62,"tag":307,"props":15249,"children":15250},{"style":926},[15251],{"type":68,"value":951},{"type":62,"tag":307,"props":15253,"children":15254},{"style":954},[15255],{"type":68,"value":15256},"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Ftone\u002F14.8.49\u002FTone.min.js",{"type":62,"tag":307,"props":15258,"children":15259},{"style":926},[15260],{"type":68,"value":951},{"type":62,"tag":307,"props":15262,"children":15263},{"style":926},[15264],{"type":68,"value":3452},{"type":62,"tag":307,"props":15266,"children":15267},{"style":932},[15268],{"type":68,"value":14873},{"type":62,"tag":307,"props":15270,"children":15271},{"style":926},[15272],{"type":68,"value":982},{"type":62,"tag":290,"props":15274,"children":15276},{"id":15275},"threejs-coordinate-conventions",[15277],{"type":68,"value":15278},"Three.js Coordinate Conventions",{"type":62,"tag":71,"props":15280,"children":15281},{},[15282,15284,15289],{"type":68,"value":15283},"Three.js uses a ",{"type":62,"tag":668,"props":15285,"children":15286},{},[15287],{"type":68,"value":15288},"right-handed Y-up",{"type":68,"value":15290}," coordinate system:",{"type":62,"tag":698,"props":15292,"children":15293},{},[15294,15304,15314],{"type":62,"tag":106,"props":15295,"children":15296},{},[15297,15302],{"type":62,"tag":668,"props":15298,"children":15299},{},[15300],{"type":68,"value":15301},"X",{"type":68,"value":15303}," = right (positive) \u002F left (negative)",{"type":62,"tag":106,"props":15305,"children":15306},{},[15307,15312],{"type":62,"tag":668,"props":15308,"children":15309},{},[15310],{"type":68,"value":15311},"Y",{"type":68,"value":15313}," = up (positive) \u002F down (negative)",{"type":62,"tag":106,"props":15315,"children":15316},{},[15317,15322],{"type":62,"tag":668,"props":15318,"children":15319},{},[15320],{"type":68,"value":15321},"Z",{"type":68,"value":15323}," = toward the viewer (positive) \u002F away from the viewer (negative)",{"type":62,"tag":71,"props":15325,"children":15326},{},[15327,15332,15334,15338,15340,15344,15346,15350],{"type":62,"tag":668,"props":15328,"children":15329},{},[15330],{"type":68,"value":15331},"Critical for vehicles and aircraft:",{"type":68,"value":15333}," The fuselage\u002Fbody extends along ",{"type":62,"tag":668,"props":15335,"children":15336},{},[15337],{"type":68,"value":15321},{"type":68,"value":15339}," (nose at -Z, tail at +Z). Wings extend along ",{"type":62,"tag":668,"props":15341,"children":15342},{},[15343],{"type":68,"value":15301},{"type":68,"value":15345}," (left\u002Fright). The vertical stabilizer extends along ",{"type":62,"tag":668,"props":15347,"children":15348},{},[15349],{"type":68,"value":15311},{"type":68,"value":848},{"type":62,"tag":71,"props":15352,"children":15353},{},[15354],{"type":68,"value":15355},"When building an aircraft from primitives:",{"type":62,"tag":698,"props":15357,"children":15358},{},[15359,15383,15409],{"type":62,"tag":106,"props":15360,"children":15361},{},[15362,15367,15369,15373,15375,15381],{"type":62,"tag":668,"props":15363,"children":15364},{},[15365],{"type":68,"value":15366},"Fuselage",{"type":68,"value":15368}," = cylinder or box, long axis along ",{"type":62,"tag":668,"props":15370,"children":15371},{},[15372],{"type":68,"value":15321},{"type":68,"value":15374}," (use ",{"type":62,"tag":93,"props":15376,"children":15378},{"className":15377},[],[15379],{"type":68,"value":15380},"geometry",{"type":68,"value":15382}," default or rotate 90° around X)",{"type":62,"tag":106,"props":15384,"children":15385},{},[15386,15391,15393,15397,15399,15403,15405],{"type":62,"tag":668,"props":15387,"children":15388},{},[15389],{"type":68,"value":15390},"Wings",{"type":68,"value":15392}," = flat box, wide along ",{"type":62,"tag":668,"props":15394,"children":15395},{},[15396],{"type":68,"value":15301},{"type":68,"value":15398},", thin along ",{"type":62,"tag":668,"props":15400,"children":15401},{},[15402],{"type":68,"value":15311},{"type":68,"value":15404},", short along ",{"type":62,"tag":668,"props":15406,"children":15407},{},[15408],{"type":68,"value":15321},{"type":62,"tag":106,"props":15410,"children":15411},{},[15412,15417,15419,15423,15424,15428,15429],{"type":62,"tag":668,"props":15413,"children":15414},{},[15415],{"type":68,"value":15416},"Tail fin",{"type":68,"value":15418}," = flat box, tall along ",{"type":62,"tag":668,"props":15420,"children":15421},{},[15422],{"type":68,"value":15311},{"type":68,"value":15398},{"type":62,"tag":668,"props":15425,"children":15426},{},[15427],{"type":68,"value":15301},{"type":68,"value":15404},{"type":62,"tag":668,"props":15430,"children":15431},{},[15432],{"type":68,"value":15321},{"type":62,"tag":297,"props":15434,"children":15436},{"className":10789,"code":15435,"language":45,"meta":301,"style":301},"\u002F\u002F Correct aircraft orientation example:\n\u002F\u002F Fuselage along Z\nconst fuselage = new THREE.Mesh(\n  new THREE.CylinderGeometry(0.15, 0.08, 2.0, 12),\n  material\n);\nfuselage.rotation.x = Math.PI \u002F 2; \u002F\u002F CylinderGeometry default is Y-up, rotate to Z-forward\n\n\u002F\u002F Wings along X\nconst wing = new THREE.Mesh(\n  new THREE.BoxGeometry(2.5, 0.03, 0.4), \u002F\u002F wide X, thin Y, short Z\n  material\n);\n\n\u002F\u002F Vertical stabilizer along Y\nconst tailFin = new THREE.Mesh(\n  new THREE.BoxGeometry(0.03, 0.4, 0.3), \u002F\u002F thin X, tall Y, short Z\n  material\n);\ntailFin.position.set(0, 0.2, 0.9); \u002F\u002F above and behind\n",[15437],{"type":62,"tag":93,"props":15438,"children":15439},{"__ignoreMap":301},[15440,15448,15456,15495,15560,15568,15579,15639,15646,15654,15690,15750,15757,15768,15775,15783,15819,15876,15883,15894],{"type":62,"tag":307,"props":15441,"children":15442},{"class":309,"line":310},[15443],{"type":62,"tag":307,"props":15444,"children":15445},{"style":314},[15446],{"type":68,"value":15447},"\u002F\u002F Correct aircraft orientation example:\n",{"type":62,"tag":307,"props":15449,"children":15450},{"class":309,"line":320},[15451],{"type":62,"tag":307,"props":15452,"children":15453},{"style":314},[15454],{"type":68,"value":15455},"\u002F\u002F Fuselage along Z\n",{"type":62,"tag":307,"props":15457,"children":15458},{"class":309,"line":335},[15459,15463,15468,15472,15477,15481,15485,15490],{"type":62,"tag":307,"props":15460,"children":15461},{"style":938},[15462],{"type":68,"value":4657},{"type":62,"tag":307,"props":15464,"children":15465},{"style":324},[15466],{"type":68,"value":15467}," fuselage ",{"type":62,"tag":307,"props":15469,"children":15470},{"style":926},[15471],{"type":68,"value":946},{"type":62,"tag":307,"props":15473,"children":15474},{"style":926},[15475],{"type":68,"value":15476}," new",{"type":62,"tag":307,"props":15478,"children":15479},{"style":324},[15480],{"type":68,"value":14495},{"type":62,"tag":307,"props":15482,"children":15483},{"style":926},[15484],{"type":68,"value":848},{"type":62,"tag":307,"props":15486,"children":15487},{"style":1101},[15488],{"type":68,"value":15489},"Mesh",{"type":62,"tag":307,"props":15491,"children":15492},{"style":324},[15493],{"type":68,"value":15494},"(\n",{"type":62,"tag":307,"props":15496,"children":15497},{"class":309,"line":349},[15498,15503,15507,15511,15516,15520,15525,15529,15534,15538,15543,15547,15552,15556],{"type":62,"tag":307,"props":15499,"children":15500},{"style":926},[15501],{"type":68,"value":15502},"  new",{"type":62,"tag":307,"props":15504,"children":15505},{"style":324},[15506],{"type":68,"value":14495},{"type":62,"tag":307,"props":15508,"children":15509},{"style":926},[15510],{"type":68,"value":848},{"type":62,"tag":307,"props":15512,"children":15513},{"style":1101},[15514],{"type":68,"value":15515},"CylinderGeometry",{"type":62,"tag":307,"props":15517,"children":15518},{"style":324},[15519],{"type":68,"value":1109},{"type":62,"tag":307,"props":15521,"children":15522},{"style":1131},[15523],{"type":68,"value":15524},"0.15",{"type":62,"tag":307,"props":15526,"children":15527},{"style":926},[15528],{"type":68,"value":1119},{"type":62,"tag":307,"props":15530,"children":15531},{"style":1131},[15532],{"type":68,"value":15533}," 0.08",{"type":62,"tag":307,"props":15535,"children":15536},{"style":926},[15537],{"type":68,"value":1119},{"type":62,"tag":307,"props":15539,"children":15540},{"style":1131},[15541],{"type":68,"value":15542}," 2.0",{"type":62,"tag":307,"props":15544,"children":15545},{"style":926},[15546],{"type":68,"value":1119},{"type":62,"tag":307,"props":15548,"children":15549},{"style":1131},[15550],{"type":68,"value":15551}," 12",{"type":62,"tag":307,"props":15553,"children":15554},{"style":324},[15555],{"type":68,"value":3745},{"type":62,"tag":307,"props":15557,"children":15558},{"style":926},[15559],{"type":68,"value":771},{"type":62,"tag":307,"props":15561,"children":15562},{"class":309,"line":363},[15563],{"type":62,"tag":307,"props":15564,"children":15565},{"style":324},[15566],{"type":68,"value":15567},"  material\n",{"type":62,"tag":307,"props":15569,"children":15570},{"class":309,"line":377},[15571,15575],{"type":62,"tag":307,"props":15572,"children":15573},{"style":324},[15574],{"type":68,"value":3745},{"type":62,"tag":307,"props":15576,"children":15577},{"style":926},[15578],{"type":68,"value":1086},{"type":62,"tag":307,"props":15580,"children":15581},{"class":309,"line":391},[15582,15587,15591,15596,15600,15605,15609,15613,15617,15622,15626,15630,15634],{"type":62,"tag":307,"props":15583,"children":15584},{"style":324},[15585],{"type":68,"value":15586},"fuselage",{"type":62,"tag":307,"props":15588,"children":15589},{"style":926},[15590],{"type":68,"value":848},{"type":62,"tag":307,"props":15592,"children":15593},{"style":324},[15594],{"type":68,"value":15595},"rotation",{"type":62,"tag":307,"props":15597,"children":15598},{"style":926},[15599],{"type":68,"value":848},{"type":62,"tag":307,"props":15601,"children":15602},{"style":324},[15603],{"type":68,"value":15604},"x ",{"type":62,"tag":307,"props":15606,"children":15607},{"style":926},[15608],{"type":68,"value":946},{"type":62,"tag":307,"props":15610,"children":15611},{"style":324},[15612],{"type":68,"value":4236},{"type":62,"tag":307,"props":15614,"children":15615},{"style":926},[15616],{"type":68,"value":848},{"type":62,"tag":307,"props":15618,"children":15619},{"style":324},[15620],{"type":68,"value":15621},"PI ",{"type":62,"tag":307,"props":15623,"children":15624},{"style":926},[15625],{"type":68,"value":7499},{"type":62,"tag":307,"props":15627,"children":15628},{"style":1131},[15629],{"type":68,"value":4376},{"type":62,"tag":307,"props":15631,"children":15632},{"style":926},[15633],{"type":68,"value":1431},{"type":62,"tag":307,"props":15635,"children":15636},{"style":314},[15637],{"type":68,"value":15638}," \u002F\u002F CylinderGeometry default is Y-up, rotate to Z-forward\n",{"type":62,"tag":307,"props":15640,"children":15641},{"class":309,"line":405},[15642],{"type":62,"tag":307,"props":15643,"children":15644},{"emptyLinePlaceholder":423},[15645],{"type":68,"value":426},{"type":62,"tag":307,"props":15647,"children":15648},{"class":309,"line":419},[15649],{"type":62,"tag":307,"props":15650,"children":15651},{"style":314},[15652],{"type":68,"value":15653},"\u002F\u002F Wings along X\n",{"type":62,"tag":307,"props":15655,"children":15656},{"class":309,"line":429},[15657,15661,15666,15670,15674,15678,15682,15686],{"type":62,"tag":307,"props":15658,"children":15659},{"style":938},[15660],{"type":68,"value":4657},{"type":62,"tag":307,"props":15662,"children":15663},{"style":324},[15664],{"type":68,"value":15665}," wing ",{"type":62,"tag":307,"props":15667,"children":15668},{"style":926},[15669],{"type":68,"value":946},{"type":62,"tag":307,"props":15671,"children":15672},{"style":926},[15673],{"type":68,"value":15476},{"type":62,"tag":307,"props":15675,"children":15676},{"style":324},[15677],{"type":68,"value":14495},{"type":62,"tag":307,"props":15679,"children":15680},{"style":926},[15681],{"type":68,"value":848},{"type":62,"tag":307,"props":15683,"children":15684},{"style":1101},[15685],{"type":68,"value":15489},{"type":62,"tag":307,"props":15687,"children":15688},{"style":324},[15689],{"type":68,"value":15494},{"type":62,"tag":307,"props":15691,"children":15692},{"class":309,"line":438},[15693,15697,15701,15705,15710,15714,15719,15723,15728,15732,15737,15741,15745],{"type":62,"tag":307,"props":15694,"children":15695},{"style":926},[15696],{"type":68,"value":15502},{"type":62,"tag":307,"props":15698,"children":15699},{"style":324},[15700],{"type":68,"value":14495},{"type":62,"tag":307,"props":15702,"children":15703},{"style":926},[15704],{"type":68,"value":848},{"type":62,"tag":307,"props":15706,"children":15707},{"style":1101},[15708],{"type":68,"value":15709},"BoxGeometry",{"type":62,"tag":307,"props":15711,"children":15712},{"style":324},[15713],{"type":68,"value":1109},{"type":62,"tag":307,"props":15715,"children":15716},{"style":1131},[15717],{"type":68,"value":15718},"2.5",{"type":62,"tag":307,"props":15720,"children":15721},{"style":926},[15722],{"type":68,"value":1119},{"type":62,"tag":307,"props":15724,"children":15725},{"style":1131},[15726],{"type":68,"value":15727}," 0.03",{"type":62,"tag":307,"props":15729,"children":15730},{"style":926},[15731],{"type":68,"value":1119},{"type":62,"tag":307,"props":15733,"children":15734},{"style":1131},[15735],{"type":68,"value":15736}," 0.4",{"type":62,"tag":307,"props":15738,"children":15739},{"style":324},[15740],{"type":68,"value":3745},{"type":62,"tag":307,"props":15742,"children":15743},{"style":926},[15744],{"type":68,"value":1119},{"type":62,"tag":307,"props":15746,"children":15747},{"style":314},[15748],{"type":68,"value":15749}," \u002F\u002F wide X, thin Y, short Z\n",{"type":62,"tag":307,"props":15751,"children":15752},{"class":309,"line":452},[15753],{"type":62,"tag":307,"props":15754,"children":15755},{"style":324},[15756],{"type":68,"value":15567},{"type":62,"tag":307,"props":15758,"children":15759},{"class":309,"line":466},[15760,15764],{"type":62,"tag":307,"props":15761,"children":15762},{"style":324},[15763],{"type":68,"value":3745},{"type":62,"tag":307,"props":15765,"children":15766},{"style":926},[15767],{"type":68,"value":1086},{"type":62,"tag":307,"props":15769,"children":15770},{"class":309,"line":480},[15771],{"type":62,"tag":307,"props":15772,"children":15773},{"emptyLinePlaceholder":423},[15774],{"type":68,"value":426},{"type":62,"tag":307,"props":15776,"children":15777},{"class":309,"line":489},[15778],{"type":62,"tag":307,"props":15779,"children":15780},{"style":314},[15781],{"type":68,"value":15782},"\u002F\u002F Vertical stabilizer along Y\n",{"type":62,"tag":307,"props":15784,"children":15785},{"class":309,"line":497},[15786,15790,15795,15799,15803,15807,15811,15815],{"type":62,"tag":307,"props":15787,"children":15788},{"style":938},[15789],{"type":68,"value":4657},{"type":62,"tag":307,"props":15791,"children":15792},{"style":324},[15793],{"type":68,"value":15794}," tailFin ",{"type":62,"tag":307,"props":15796,"children":15797},{"style":926},[15798],{"type":68,"value":946},{"type":62,"tag":307,"props":15800,"children":15801},{"style":926},[15802],{"type":68,"value":15476},{"type":62,"tag":307,"props":15804,"children":15805},{"style":324},[15806],{"type":68,"value":14495},{"type":62,"tag":307,"props":15808,"children":15809},{"style":926},[15810],{"type":68,"value":848},{"type":62,"tag":307,"props":15812,"children":15813},{"style":1101},[15814],{"type":68,"value":15489},{"type":62,"tag":307,"props":15816,"children":15817},{"style":324},[15818],{"type":68,"value":15494},{"type":62,"tag":307,"props":15820,"children":15821},{"class":309,"line":506},[15822,15826,15830,15834,15838,15842,15847,15851,15855,15859,15863,15867,15871],{"type":62,"tag":307,"props":15823,"children":15824},{"style":926},[15825],{"type":68,"value":15502},{"type":62,"tag":307,"props":15827,"children":15828},{"style":324},[15829],{"type":68,"value":14495},{"type":62,"tag":307,"props":15831,"children":15832},{"style":926},[15833],{"type":68,"value":848},{"type":62,"tag":307,"props":15835,"children":15836},{"style":1101},[15837],{"type":68,"value":15709},{"type":62,"tag":307,"props":15839,"children":15840},{"style":324},[15841],{"type":68,"value":1109},{"type":62,"tag":307,"props":15843,"children":15844},{"style":1131},[15845],{"type":68,"value":15846},"0.03",{"type":62,"tag":307,"props":15848,"children":15849},{"style":926},[15850],{"type":68,"value":1119},{"type":62,"tag":307,"props":15852,"children":15853},{"style":1131},[15854],{"type":68,"value":15736},{"type":62,"tag":307,"props":15856,"children":15857},{"style":926},[15858],{"type":68,"value":1119},{"type":62,"tag":307,"props":15860,"children":15861},{"style":1131},[15862],{"type":68,"value":14357},{"type":62,"tag":307,"props":15864,"children":15865},{"style":324},[15866],{"type":68,"value":3745},{"type":62,"tag":307,"props":15868,"children":15869},{"style":926},[15870],{"type":68,"value":1119},{"type":62,"tag":307,"props":15872,"children":15873},{"style":314},[15874],{"type":68,"value":15875}," \u002F\u002F thin X, tall Y, short Z\n",{"type":62,"tag":307,"props":15877,"children":15878},{"class":309,"line":520},[15879],{"type":62,"tag":307,"props":15880,"children":15881},{"style":324},[15882],{"type":68,"value":15567},{"type":62,"tag":307,"props":15884,"children":15885},{"class":309,"line":534},[15886,15890],{"type":62,"tag":307,"props":15887,"children":15888},{"style":324},[15889],{"type":68,"value":3745},{"type":62,"tag":307,"props":15891,"children":15892},{"style":926},[15893],{"type":68,"value":1086},{"type":62,"tag":307,"props":15895,"children":15896},{"class":309,"line":548},[15897,15902,15906,15911,15915,15920,15924,15928,15932,15936,15940,15945,15949,15953],{"type":62,"tag":307,"props":15898,"children":15899},{"style":324},[15900],{"type":68,"value":15901},"tailFin",{"type":62,"tag":307,"props":15903,"children":15904},{"style":926},[15905],{"type":68,"value":848},{"type":62,"tag":307,"props":15907,"children":15908},{"style":324},[15909],{"type":68,"value":15910},"position",{"type":62,"tag":307,"props":15912,"children":15913},{"style":926},[15914],{"type":68,"value":848},{"type":62,"tag":307,"props":15916,"children":15917},{"style":1101},[15918],{"type":68,"value":15919},"set",{"type":62,"tag":307,"props":15921,"children":15922},{"style":324},[15923],{"type":68,"value":1109},{"type":62,"tag":307,"props":15925,"children":15926},{"style":1131},[15927],{"type":68,"value":4591},{"type":62,"tag":307,"props":15929,"children":15930},{"style":926},[15931],{"type":68,"value":1119},{"type":62,"tag":307,"props":15933,"children":15934},{"style":1131},[15935],{"type":68,"value":4732},{"type":62,"tag":307,"props":15937,"children":15938},{"style":926},[15939],{"type":68,"value":1119},{"type":62,"tag":307,"props":15941,"children":15942},{"style":1131},[15943],{"type":68,"value":15944}," 0.9",{"type":62,"tag":307,"props":15946,"children":15947},{"style":324},[15948],{"type":68,"value":3745},{"type":62,"tag":307,"props":15950,"children":15951},{"style":926},[15952],{"type":68,"value":1431},{"type":62,"tag":307,"props":15954,"children":15955},{"style":314},[15956],{"type":68,"value":15957}," \u002F\u002F above and behind\n",{"type":62,"tag":71,"props":15959,"children":15960},{},[15961],{"type":62,"tag":668,"props":15962,"children":15963},{},[15964],{"type":68,"value":15965},"Rotation axes for flight dynamics:",{"type":62,"tag":698,"props":15967,"children":15968},{},[15969,15985,16000],{"type":62,"tag":106,"props":15970,"children":15971},{},[15972,15977,15979,15983],{"type":62,"tag":668,"props":15973,"children":15974},{},[15975],{"type":68,"value":15976},"Pitch",{"type":68,"value":15978}," = rotation around ",{"type":62,"tag":668,"props":15980,"children":15981},{},[15982],{"type":68,"value":15301},{"type":68,"value":15984}," (nose up\u002Fdown)",{"type":62,"tag":106,"props":15986,"children":15987},{},[15988,15993,15994,15998],{"type":62,"tag":668,"props":15989,"children":15990},{},[15991],{"type":68,"value":15992},"Roll",{"type":68,"value":15978},{"type":62,"tag":668,"props":15995,"children":15996},{},[15997],{"type":68,"value":15321},{"type":68,"value":15999}," (wings tilt)",{"type":62,"tag":106,"props":16001,"children":16002},{},[16003,16008,16009,16013],{"type":62,"tag":668,"props":16004,"children":16005},{},[16006],{"type":68,"value":16007},"Yaw",{"type":68,"value":15978},{"type":62,"tag":668,"props":16010,"children":16011},{},[16012],{"type":68,"value":15311},{"type":68,"value":16014}," (nose left\u002Fright)",{"type":62,"tag":71,"props":16016,"children":16017},{},[16018,16023],{"type":62,"tag":668,"props":16019,"children":16020},{},[16021],{"type":68,"value":16022},"Common mistake:",{"type":68,"value":16024}," Using the wing box as the fuselage (wide along X instead of Z). Always verify: the longest dimension of the fuselage should be along Z.",{"type":62,"tag":77,"props":16026,"children":16027},{},[],{"type":62,"tag":81,"props":16029,"children":16031},{"id":16030},"part-8-quality-checklist",[16032],{"type":68,"value":16033},"Part 8: Quality Checklist",{"type":62,"tag":71,"props":16035,"children":16036},{},[16037],{"type":68,"value":16038},"Before producing any visual, run through this:",{"type":62,"tag":290,"props":16040,"children":16042},{"id":16041},"functional",[16043],{"type":68,"value":16044},"Functional",{"type":62,"tag":698,"props":16046,"children":16049},{"className":16047},[16048],"contains-task-list",[16050,16061,16077,16086,16095,16104],{"type":62,"tag":106,"props":16051,"children":16054},{"className":16052},[16053],"task-list-item",[16055,16059],{"type":62,"tag":3595,"props":16056,"children":16058},{"disabled":423,"type":16057},"checkbox",[],{"type":68,"value":16060}," Does it work without JavaScript during streaming? (Content visible)",{"type":62,"tag":106,"props":16062,"children":16064},{"className":16063},[16053],[16065,16068,16070,16075],{"type":62,"tag":3595,"props":16066,"children":16067},{"disabled":423,"type":16057},[],{"type":68,"value":16069}," All styles live in the css parameter (no ",{"type":62,"tag":93,"props":16071,"children":16073},{"className":16072},[],[16074],{"type":68,"value":155},{"type":68,"value":16076}," blocks in html)",{"type":62,"tag":106,"props":16078,"children":16080},{"className":16079},[16053],[16081,16084],{"type":62,"tag":3595,"props":16082,"children":16083},{"disabled":423,"type":16057},[],{"type":68,"value":16085}," Behavior is split into jsFunctions (parameterized toolbox) +\njsExpressions (one invocation per statement)",{"type":62,"tag":106,"props":16087,"children":16089},{"className":16088},[16053],[16090,16093],{"type":62,"tag":3595,"props":16091,"children":16092},{"disabled":423,"type":16057},[],{"type":68,"value":16094}," Do all interactive controls have event handlers?",{"type":62,"tag":106,"props":16096,"children":16098},{"className":16097},[16053],[16099,16102],{"type":62,"tag":3595,"props":16100,"children":16101},{"disabled":423,"type":16057},[],{"type":68,"value":16103}," Are all displayed numbers rounded properly?",{"type":62,"tag":106,"props":16105,"children":16107},{"className":16106},[16053],[16108,16111],{"type":62,"tag":3595,"props":16109,"children":16110},{"disabled":423,"type":16057},[],{"type":68,"value":16112}," Does the canvas\u002FSVG fit within the container width?",{"type":62,"tag":290,"props":16114,"children":16116},{"id":16115},"visual",[16117],{"type":68,"value":16118},"Visual",{"type":62,"tag":698,"props":16120,"children":16122},{"className":16121},[16048],[16123,16132,16141,16150,16159,16168],{"type":62,"tag":106,"props":16124,"children":16126},{"className":16125},[16053],[16127,16130],{"type":62,"tag":3595,"props":16128,"children":16129},{"disabled":423,"type":16057},[],{"type":68,"value":16131}," Dark mode test: would every element be readable on near-black?",{"type":62,"tag":106,"props":16133,"children":16135},{"className":16134},[16053],[16136,16139],{"type":62,"tag":3595,"props":16137,"children":16138},{"disabled":423,"type":16057},[],{"type":68,"value":16140}," No hardcoded text colors in HTML (use CSS variables)",{"type":62,"tag":106,"props":16142,"children":16144},{"className":16143},[16053],[16145,16148],{"type":62,"tag":3595,"props":16146,"children":16147},{"disabled":423,"type":16057},[],{"type":68,"value":16149}," No gradients, shadows, blur, or glow",{"type":62,"tag":106,"props":16151,"children":16153},{"className":16152},[16053],[16154,16157],{"type":62,"tag":3595,"props":16155,"children":16156},{"disabled":423,"type":16057},[],{"type":68,"value":16158}," Borders are 0.5px (except 2px for featured item accent)",{"type":62,"tag":106,"props":16160,"children":16162},{"className":16161},[16053],[16163,16166],{"type":62,"tag":3595,"props":16164,"children":16165},{"disabled":423,"type":16057},[],{"type":68,"value":16167}," Font weights are only 400 or 500",{"type":62,"tag":106,"props":16169,"children":16171},{"className":16170},[16053],[16172,16175],{"type":62,"tag":3595,"props":16173,"children":16174},{"disabled":423,"type":16057},[],{"type":68,"value":16176}," All text is sentence case",{"type":62,"tag":290,"props":16178,"children":16180},{"id":16179},"content",[16181],{"type":68,"value":16182},"Content",{"type":62,"tag":698,"props":16184,"children":16186},{"className":16185},[16048],[16187,16196,16205,16214,16223],{"type":62,"tag":106,"props":16188,"children":16190},{"className":16189},[16053],[16191,16194],{"type":62,"tag":3595,"props":16192,"children":16193},{"disabled":423,"type":16057},[],{"type":68,"value":16195}," Explanatory text is in the response, not inside the widget",{"type":62,"tag":106,"props":16197,"children":16199},{"className":16198},[16053],[16200,16203],{"type":62,"tag":3595,"props":16201,"children":16202},{"disabled":423,"type":16057},[],{"type":68,"value":16204}," No titles or headings embedded in the HTML output",{"type":62,"tag":106,"props":16206,"children":16208},{"className":16207},[16053],[16209,16212],{"type":62,"tag":3595,"props":16210,"children":16211},{"disabled":423,"type":16057},[],{"type":68,"value":16213}," Visual is self-explanatory without reading the narration",{"type":62,"tag":106,"props":16215,"children":16217},{"className":16216},[16053],[16218,16221],{"type":62,"tag":3595,"props":16219,"children":16220},{"disabled":423,"type":16057},[],{"type":68,"value":16222}," Narration adds value beyond what the visual shows",{"type":62,"tag":106,"props":16224,"children":16226},{"className":16225},[16053],[16227,16230],{"type":62,"tag":3595,"props":16228,"children":16229},{"disabled":423,"type":16057},[],{"type":68,"value":16231}," Offered a clear \"go deeper\" path",{"type":62,"tag":290,"props":16233,"children":16235},{"id":16234},"accessibility",[16236],{"type":68,"value":16237},"Accessibility",{"type":62,"tag":698,"props":16239,"children":16241},{"className":16240},[16048],[16242,16259,16268,16277],{"type":62,"tag":106,"props":16243,"children":16245},{"className":16244},[16053],[16246,16249,16251,16257],{"type":62,"tag":3595,"props":16247,"children":16248},{"disabled":423,"type":16057},[],{"type":68,"value":16250}," ",{"type":62,"tag":93,"props":16252,"children":16254},{"className":16253},[],[16255],{"type":68,"value":16256},"@media (prefers-reduced-motion: reduce)",{"type":68,"value":16258}," for all animations",{"type":62,"tag":106,"props":16260,"children":16262},{"className":16261},[16053],[16263,16266],{"type":62,"tag":3595,"props":16264,"children":16265},{"disabled":423,"type":16057},[],{"type":68,"value":16267}," Text contrast is sufficient (dark text on light fills, vice versa)",{"type":62,"tag":106,"props":16269,"children":16271},{"className":16270},[16053],[16272,16275],{"type":62,"tag":3595,"props":16273,"children":16274},{"disabled":423,"type":16057},[],{"type":68,"value":16276}," Interactive elements are large enough to click (min 44px touch target)",{"type":62,"tag":106,"props":16278,"children":16280},{"className":16279},[16053],[16281,16284],{"type":62,"tag":3595,"props":16282,"children":16283},{"disabled":423,"type":16057},[],{"type":68,"value":16285}," No information conveyed by color alone",{"type":62,"tag":77,"props":16287,"children":16288},{},[],{"type":62,"tag":81,"props":16290,"children":16292},{"id":16291},"part-9-decision-matrix-picking-the-right-visual",[16293],{"type":68,"value":16294},"Part 9: Decision Matrix — Picking the Right Visual",{"type":62,"tag":2269,"props":16296,"children":16297},{},[16298,16319],{"type":62,"tag":9096,"props":16299,"children":16300},{},[16301],{"type":62,"tag":2306,"props":16302,"children":16303},{},[16304,16309,16314],{"type":62,"tag":9127,"props":16305,"children":16306},{},[16307],{"type":68,"value":16308},"User asks about...",{"type":62,"tag":9127,"props":16310,"children":16311},{},[16312],{"type":68,"value":16313},"Output type",{"type":62,"tag":9127,"props":16315,"children":16316},{},[16317],{"type":68,"value":16318},"Technology",{"type":62,"tag":9351,"props":16320,"children":16321},{},[16322,16340,16358,16375,16392,16409,16427,16443,16459,16477,16495,16513,16531,16549,16567,16585,16602,16620,16637,16655,16673,16690],{"type":62,"tag":2306,"props":16323,"children":16324},{},[16325,16330,16335],{"type":62,"tag":2323,"props":16326,"children":16327},{},[16328],{"type":68,"value":16329},"How X works (physical)",{"type":62,"tag":2323,"props":16331,"children":16332},{},[16333],{"type":68,"value":16334},"Illustrative diagram",{"type":62,"tag":2323,"props":16336,"children":16337},{},[16338],{"type":68,"value":16339},"SVG",{"type":62,"tag":2306,"props":16341,"children":16342},{},[16343,16348,16353],{"type":62,"tag":2323,"props":16344,"children":16345},{},[16346],{"type":68,"value":16347},"How X works (abstract)",{"type":62,"tag":2323,"props":16349,"children":16350},{},[16351],{"type":68,"value":16352},"Interactive explainer",{"type":62,"tag":2323,"props":16354,"children":16355},{},[16356],{"type":68,"value":16357},"HTML + inline SVG",{"type":62,"tag":2306,"props":16359,"children":16360},{},[16361,16366,16371],{"type":62,"tag":2323,"props":16362,"children":16363},{},[16364],{"type":68,"value":16365},"Process \u002F steps",{"type":62,"tag":2323,"props":16367,"children":16368},{},[16369],{"type":68,"value":16370},"Flowchart",{"type":62,"tag":2323,"props":16372,"children":16373},{},[16374],{"type":68,"value":16339},{"type":62,"tag":2306,"props":16376,"children":16377},{},[16378,16383,16388],{"type":62,"tag":2323,"props":16379,"children":16380},{},[16381],{"type":68,"value":16382},"Architecture \u002F containment",{"type":62,"tag":2323,"props":16384,"children":16385},{},[16386],{"type":68,"value":16387},"Structural diagram",{"type":62,"tag":2323,"props":16389,"children":16390},{},[16391],{"type":68,"value":16339},{"type":62,"tag":2306,"props":16393,"children":16394},{},[16395,16400,16405],{"type":62,"tag":2323,"props":16396,"children":16397},{},[16398],{"type":68,"value":16399},"Database schema \u002F ERD",{"type":62,"tag":2323,"props":16401,"children":16402},{},[16403],{"type":68,"value":16404},"Relationship diagram",{"type":62,"tag":2323,"props":16406,"children":16407},{},[16408],{"type":68,"value":15118},{"type":62,"tag":2306,"props":16410,"children":16411},{},[16412,16417,16422],{"type":62,"tag":2323,"props":16413,"children":16414},{},[16415],{"type":68,"value":16416},"Trends over time",{"type":62,"tag":2323,"props":16418,"children":16419},{},[16420],{"type":68,"value":16421},"Line chart",{"type":62,"tag":2323,"props":16423,"children":16424},{},[16425],{"type":68,"value":16426},"Chart.js",{"type":62,"tag":2306,"props":16428,"children":16429},{},[16430,16434,16439],{"type":62,"tag":2323,"props":16431,"children":16432},{},[16433],{"type":68,"value":11784},{"type":62,"tag":2323,"props":16435,"children":16436},{},[16437],{"type":68,"value":16438},"Bar chart",{"type":62,"tag":2323,"props":16440,"children":16441},{},[16442],{"type":68,"value":16426},{"type":62,"tag":2306,"props":16444,"children":16445},{},[16446,16450,16455],{"type":62,"tag":2323,"props":16447,"children":16448},{},[16449],{"type":68,"value":11810},{"type":62,"tag":2323,"props":16451,"children":16452},{},[16453],{"type":68,"value":16454},"Doughnut chart",{"type":62,"tag":2323,"props":16456,"children":16457},{},[16458],{"type":68,"value":16426},{"type":62,"tag":2306,"props":16460,"children":16461},{},[16462,16467,16472],{"type":62,"tag":2323,"props":16463,"children":16464},{},[16465],{"type":68,"value":16466},"KPIs \u002F metrics",{"type":62,"tag":2323,"props":16468,"children":16469},{},[16470],{"type":68,"value":16471},"Dashboard",{"type":62,"tag":2323,"props":16473,"children":16474},{},[16475],{"type":68,"value":16476},"HTML metric cards",{"type":62,"tag":2306,"props":16478,"children":16479},{},[16480,16485,16490],{"type":62,"tag":2323,"props":16481,"children":16482},{},[16483],{"type":68,"value":16484},"Design a UI",{"type":62,"tag":2323,"props":16486,"children":16487},{},[16488],{"type":68,"value":16489},"Mockup",{"type":62,"tag":2323,"props":16491,"children":16492},{},[16493],{"type":68,"value":16494},"HTML",{"type":62,"tag":2306,"props":16496,"children":16497},{},[16498,16503,16508],{"type":62,"tag":2323,"props":16499,"children":16500},{},[16501],{"type":68,"value":16502},"Choose between options",{"type":62,"tag":2323,"props":16504,"children":16505},{},[16506],{"type":68,"value":16507},"Comparison cards",{"type":62,"tag":2323,"props":16509,"children":16510},{},[16511],{"type":68,"value":16512},"HTML grid",{"type":62,"tag":2306,"props":16514,"children":16515},{},[16516,16521,16526],{"type":62,"tag":2323,"props":16517,"children":16518},{},[16519],{"type":68,"value":16520},"Cyclic process",{"type":62,"tag":2323,"props":16522,"children":16523},{},[16524],{"type":68,"value":16525},"Step-through",{"type":62,"tag":2323,"props":16527,"children":16528},{},[16529],{"type":68,"value":16530},"HTML stepper",{"type":62,"tag":2306,"props":16532,"children":16533},{},[16534,16539,16544],{"type":62,"tag":2323,"props":16535,"children":16536},{},[16537],{"type":68,"value":16538},"Physics \u002F math",{"type":62,"tag":2323,"props":16540,"children":16541},{},[16542],{"type":68,"value":16543},"Simulation",{"type":62,"tag":2323,"props":16545,"children":16546},{},[16547],{"type":68,"value":16548},"Canvas + JS",{"type":62,"tag":2306,"props":16550,"children":16551},{},[16552,16557,16562],{"type":62,"tag":2323,"props":16553,"children":16554},{},[16555],{"type":68,"value":16556},"Function \u002F equation",{"type":62,"tag":2323,"props":16558,"children":16559},{},[16560],{"type":68,"value":16561},"Plotter",{"type":62,"tag":2323,"props":16563,"children":16564},{},[16565],{"type":68,"value":16566},"SVG + JS",{"type":62,"tag":2306,"props":16568,"children":16569},{},[16570,16575,16580],{"type":62,"tag":2323,"props":16571,"children":16572},{},[16573],{"type":68,"value":16574},"Data exploration",{"type":62,"tag":2323,"props":16576,"children":16577},{},[16578],{"type":68,"value":16579},"Sortable table",{"type":62,"tag":2323,"props":16581,"children":16582},{},[16583],{"type":68,"value":16584},"HTML + JS",{"type":62,"tag":2306,"props":16586,"children":16587},{},[16588,16593,16598],{"type":62,"tag":2323,"props":16589,"children":16590},{},[16591],{"type":68,"value":16592},"Creative \u002F decorative",{"type":62,"tag":2323,"props":16594,"children":16595},{},[16596],{"type":68,"value":16597},"Art \u002F illustration",{"type":62,"tag":2323,"props":16599,"children":16600},{},[16601],{"type":68,"value":16339},{"type":62,"tag":2306,"props":16603,"children":16604},{},[16605,16610,16615],{"type":62,"tag":2323,"props":16606,"children":16607},{},[16608],{"type":68,"value":16609},"3D visualization",{"type":62,"tag":2323,"props":16611,"children":16612},{},[16613],{"type":68,"value":16614},"3D scene",{"type":62,"tag":2323,"props":16616,"children":16617},{},[16618],{"type":68,"value":16619},"Three.js",{"type":62,"tag":2306,"props":16621,"children":16622},{},[16623,16628,16633],{"type":62,"tag":2323,"props":16624,"children":16625},{},[16626],{"type":68,"value":16627},"Music \u002F audio",{"type":62,"tag":2323,"props":16629,"children":16630},{},[16631],{"type":68,"value":16632},"Synthesizer",{"type":62,"tag":2323,"props":16634,"children":16635},{},[16636],{"type":68,"value":15218},{"type":62,"tag":2306,"props":16638,"children":16639},{},[16640,16645,16650],{"type":62,"tag":2323,"props":16641,"children":16642},{},[16643],{"type":68,"value":16644},"Network \u002F graph",{"type":62,"tag":2323,"props":16646,"children":16647},{},[16648],{"type":68,"value":16649},"Force layout",{"type":62,"tag":2323,"props":16651,"children":16652},{},[16653],{"type":68,"value":16654},"D3.js",{"type":62,"tag":2306,"props":16656,"children":16657},{},[16658,16663,16668],{"type":62,"tag":2323,"props":16659,"children":16660},{},[16661],{"type":68,"value":16662},"Quick factual answer",{"type":62,"tag":2323,"props":16664,"children":16665},{},[16666],{"type":68,"value":16667},"Plain text",{"type":62,"tag":2323,"props":16669,"children":16670},{},[16671],{"type":68,"value":16672},"None",{"type":62,"tag":2306,"props":16674,"children":16675},{},[16676,16681,16686],{"type":62,"tag":2323,"props":16677,"children":16678},{},[16679],{"type":68,"value":16680},"Code solution",{"type":62,"tag":2323,"props":16682,"children":16683},{},[16684],{"type":68,"value":16685},"Code block",{"type":62,"tag":2323,"props":16687,"children":16688},{},[16689],{"type":68,"value":16672},{"type":62,"tag":2306,"props":16691,"children":16692},{},[16693,16698,16703],{"type":62,"tag":2323,"props":16694,"children":16695},{},[16696],{"type":68,"value":16697},"Emotional support",{"type":62,"tag":2323,"props":16699,"children":16700},{},[16701],{"type":68,"value":16702},"Warm text",{"type":62,"tag":2323,"props":16704,"children":16705},{},[16706],{"type":68,"value":16672},{"type":62,"tag":13055,"props":16708,"children":16709},{},[16710],{"type":68,"value":16711},"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":16713,"total":335},[16714,16722,16737],{"slug":4,"name":5,"fn":6,"description":7,"org":16715,"tags":16716,"stars":29,"repoUrl":30,"updatedAt":31},{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[16717,16718,16719,16720,16721],{"name":14,"slug":15,"type":16},{"name":27,"slug":28,"type":16},{"name":24,"slug":25,"type":16},{"name":18,"slug":19,"type":16},{"name":21,"slug":22,"type":16},{"slug":16723,"name":16724,"fn":16725,"description":16726,"org":16727,"tags":16728,"stars":29,"repoUrl":30,"updatedAt":16736},"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},[16729,16731,16732,16733],{"name":16730,"slug":38,"type":16},"Agents",{"name":10,"slug":9,"type":16},{"name":27,"slug":28,"type":16},{"name":16734,"slug":16735,"type":16},"Education","education","2026-07-12T08:06:39.416086",{"slug":16738,"name":16739,"fn":16740,"description":16741,"org":16742,"tags":16743,"stars":29,"repoUrl":30,"updatedAt":16750},"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},[16744,16745,16746,16749],{"name":10,"slug":9,"type":16},{"name":27,"slug":28,"type":16},{"name":16747,"slug":16748,"type":16},"Diagrams","diagrams",{"name":16339,"slug":5998,"type":16},"2026-07-12T08:06:38.154791",{"items":16752,"total":480},[16753,16766,16784,16801,16813,16826,16839,16853,16865,16877,16893,16907],{"slug":16754,"name":16754,"fn":16755,"description":16756,"org":16757,"tags":16758,"stars":16763,"repoUrl":16764,"updatedAt":16765},"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},[16759,16760,16761,16762],{"name":10,"slug":9,"type":16},{"name":27,"slug":28,"type":16},{"name":24,"slug":25,"type":16},{"name":21,"slug":22,"type":16},35928,"https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit","2026-07-12T08:06:36.722091",{"slug":16767,"name":16767,"fn":16768,"description":16769,"org":16770,"tags":16771,"stars":16763,"repoUrl":16764,"updatedAt":16783},"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},[16772,16773,16776,16779,16780],{"name":16730,"slug":38,"type":16},{"name":16774,"slug":16775,"type":16},"API Development","api-development",{"name":16777,"slug":16778,"type":16},"Backend","backend",{"name":10,"slug":9,"type":16},{"name":16781,"slug":16782,"type":16},"Debugging","debugging","2026-07-12T08:06:22.179755",{"slug":16785,"name":16785,"fn":16786,"description":16787,"org":16788,"tags":16789,"stars":16763,"repoUrl":16764,"updatedAt":16800},"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},[16790,16791,16794,16797],{"name":10,"slug":9,"type":16},{"name":16792,"slug":16793,"type":16},"Engineering","engineering",{"name":16795,"slug":16796,"type":16},"GitHub","github",{"name":16798,"slug":16799,"type":16},"Pull Requests","pull-requests","2026-07-12T08:06:30.102192",{"slug":16802,"name":16802,"fn":16803,"description":16804,"org":16805,"tags":16806,"stars":16763,"repoUrl":16764,"updatedAt":16812},"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},[16807,16808,16809],{"name":10,"slug":9,"type":16},{"name":16781,"slug":16782,"type":16},{"name":16810,"slug":16811,"type":16},"Observability","observability","2026-07-12T08:06:23.407872",{"slug":16814,"name":16814,"fn":16815,"description":16816,"org":16817,"tags":16818,"stars":16763,"repoUrl":16764,"updatedAt":16825},"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},[16819,16820,16823,16824],{"name":16730,"slug":38,"type":16},{"name":16821,"slug":16822,"type":16},"AI Context","ai-context",{"name":10,"slug":9,"type":16},{"name":24,"slug":25,"type":16},"2026-07-12T08:06:28.856644",{"slug":16827,"name":16827,"fn":16828,"description":16829,"org":16830,"tags":16831,"stars":16763,"repoUrl":16764,"updatedAt":16838},"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},[16832,16833,16834,16835],{"name":16730,"slug":38,"type":16},{"name":16774,"slug":16775,"type":16},{"name":10,"slug":9,"type":16},{"name":16836,"slug":16837,"type":16},"Integrations","integrations","2026-07-12T08:06:32.560054",{"slug":16840,"name":16840,"fn":16841,"description":16842,"org":16843,"tags":16844,"stars":16763,"repoUrl":16764,"updatedAt":16852},"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},[16845,16846,16849],{"name":10,"slug":9,"type":16},{"name":16847,"slug":16848,"type":16},"Documentation","documentation",{"name":16850,"slug":16851,"type":16},"Productivity","productivity","2026-07-12T08:06:31.345052",{"slug":16854,"name":16854,"fn":16855,"description":16856,"org":16857,"tags":16858,"stars":16763,"repoUrl":16764,"updatedAt":16864},"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},[16859,16860,16861],{"name":10,"slug":9,"type":16},{"name":24,"slug":25,"type":16},{"name":16862,"slug":16863,"type":16},"Onboarding","onboarding","2026-07-12T08:06:25.534415",{"slug":16866,"name":16866,"fn":16867,"description":16868,"org":16869,"tags":16870,"stars":16763,"repoUrl":16764,"updatedAt":16876},"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},[16871,16872,16873],{"name":10,"slug":9,"type":16},{"name":16792,"slug":16793,"type":16},{"name":16874,"slug":16875,"type":16},"Migration","migration","2026-07-12T08:06:26.949801",{"slug":16878,"name":16878,"fn":16879,"description":16880,"org":16881,"tags":16882,"stars":16763,"repoUrl":16764,"updatedAt":16892},"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},[16883,16884,16885,16888,16891],{"name":10,"slug":9,"type":16},{"name":24,"slug":25,"type":16},{"name":16886,"slug":16887,"type":16},"Next.js","next-js",{"name":16889,"slug":16890,"type":16},"React","react",{"name":21,"slug":22,"type":16},"2026-07-12T08:06:15.72619",{"slug":16894,"name":16894,"fn":16895,"description":16896,"org":16897,"tags":16898,"stars":16763,"repoUrl":16764,"updatedAt":16906},"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},[16899,16900,16901,16903],{"name":16777,"slug":16778,"type":16},{"name":10,"slug":9,"type":16},{"name":16902,"slug":45,"type":16},"JavaScript",{"name":16904,"slug":16905,"type":16},"Middleware","middleware","2026-07-12T08:06:10.034875",{"slug":4,"name":5,"fn":6,"description":7,"org":16908,"tags":16909,"stars":29,"repoUrl":30,"updatedAt":31},{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[16910,16911,16912,16913,16914],{"name":14,"slug":15,"type":16},{"name":27,"slug":28,"type":16},{"name":24,"slug":25,"type":16},{"name":18,"slug":19,"type":16},{"name":21,"slug":22,"type":16}]