"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", annotation: "annotation", blockquote: "blockquote", code: "code", del: "del", figcaption: "figcaption", figure: "figure", h2: "h2", h3: "h3", hr: "hr", input: "input", li: "li", mark: "mark", math: "math", mi: "mi", mn: "mn", mo: "mo", mrow: "mrow", msub: "msub", msup: "msup", ol: "ol", p: "p", pre: "pre", semantics: "semantics", span: "span", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }, {AuthoringFlowDemo, AuthoringPathDemo, Button, Callout, CodeTabs, CommandBlock, ComponentPreview, DocsFileTabs, Figure, Guide, GuideStep, IconCatalog, InstallTab, InstallTabs, ItemList, LineItem, ListItem, ListSubtitle, ListTitle, Mark, Step, Steps} = _components; if (!AuthoringFlowDemo) _missingMdxReference("AuthoringFlowDemo", true); if (!AuthoringPathDemo) _missingMdxReference("AuthoringPathDemo", true); if (!Button) _missingMdxReference("Button", true); if (!Callout) _missingMdxReference("Callout", true); if (!CodeTabs) _missingMdxReference("CodeTabs", true); if (!CommandBlock) _missingMdxReference("CommandBlock", true); if (!ComponentPreview) _missingMdxReference("ComponentPreview", true); if (!DocsFileTabs) _missingMdxReference("DocsFileTabs", true); if (!Figure) _missingMdxReference("Figure", true); if (!Guide) _missingMdxReference("Guide", true); if (!GuideStep) _missingMdxReference("GuideStep", true); if (!IconCatalog) _missingMdxReference("IconCatalog", true); if (!InstallTab) _missingMdxReference("InstallTab", true); if (!InstallTabs) _missingMdxReference("InstallTabs", true); if (!ItemList) _missingMdxReference("ItemList", true); if (!LineItem) _missingMdxReference("LineItem", true); if (!ListItem) _missingMdxReference("ListItem", true); if (!ListSubtitle) _missingMdxReference("ListSubtitle", true); if (!ListTitle) _missingMdxReference("ListTitle", true); if (!Mark) _missingMdxReference("Mark", true); if (!Step) _missingMdxReference("Step", true); if (!Steps) _missingMdxReference("Steps", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["How to write posts and Learn materials for this site. Each feature below has ", _jsx(_components.strong, { children: "Source" }), " (what you type) then ", _jsx(_components.strong, { children: "Result" }), " (what readers see)."] }), "\n", _jsxs(_components.p, { children: ["Also see: ", _jsx(_components.a, { href: "/blog/examples/markdown-all", children: "MDX test" }), " · ", _jsx(_components.a, { href: "/blog/examples/advanced-code-examples", children: "Code features" }), " · ", _jsx(_components.a, { href: "/blog/examples/advanced-rehype-pretty-code-shiki-examples", children: "Shiki transformers" })] }), "\n", _jsx(_components.h2, { id: "how-this-page-works", children: "How this page works" }), "\n", _jsxs(_components.p, { children: ["To show MDX as text without executing it, wrap it in a fence with ", _jsx(_components.strong, { children: "more backticks" }), " than any fence inside:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Outer: four backticks + ", _jsx(_components.code, { children: "mdx" }), " (or ", _jsx(_components.code, { children: "md" }), ")"] }), "\n", _jsx(_components.li, { children: "Inner: normal three-backtick fences and/or JSX" }), "\n", _jsx(_components.li, { children: "Close with four backticks" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Do ", _jsx(_components.strong, { children: "not" }), " escape fences with ````` — that does not work."] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "where-posts-live", children: "Where posts live" }), "\n", _jsxs(_components.p, { children: ["Every ", _jsx(_components.code, { children: ".md" }), " / ", _jsx(_components.code, { children: ".mdx" }), " under ", _jsx(_components.code, { children: "content/blog/" }), " becomes a blog post."] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "File" }), _jsx(_components.th, { children: "URL" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "content/blog/algorithms/sorting.mdx" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "/blog/algorithms/sorting" }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "content/blog/guides/content-authoring.mdx" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "/blog/guides/content-authoring" }) })] })] })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Prefer ", _jsx(_components.code, { children: ".mdx" }), " when you need components (", _jsx(_components.code, { children: "Figure" }), ", ", _jsx(_components.code, { children: "CodeTabs" }), ", ", _jsx(_components.code, { children: "PathVisualizer" }), ")."] }), "\n", _jsx(_components.li, { children: "Kebab-case folders; numeric prefixes sort the tree only." }), "\n", _jsxs(_components.li, { children: ["Learn courses live under ", _jsx(_components.code, { children: "content/learn/" }), " → ", _jsx(_components.code, { children: "/learn/..." }), " (separate from the blog tree)."] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "frontmatter", children: "Frontmatter" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Source" }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "yaml", "data-theme": "github-light dracula", __rawstring__: "---\ntitle: 'Understanding Vectors in Linear Algebra'\ndate: '2024-01-15'\nexcerpt: 'Vectors, operations, and geometric intuition.'\ntags: ['math', 'linear-algebra', 'vectors']\ncoverImage: '/v1/content/math/linear-algebra/cover.png'\ncoverImageAlt: 'Two vectors added tip-to-tail'\n---\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "yaml", "data-theme": "github-light dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "1", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#F8F8F2" }, children: "---" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#8BE9FD" }, children: "title" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Understanding Vectors in Linear Algebra" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#8BE9FD" }, children: "date" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "2024-01-15" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#8BE9FD" }, children: "excerpt" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Vectors, operations, and geometric intuition." }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#8BE9FD" }, children: "tags" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " [" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "math" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "linear-algebra" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "vectors" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "]" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#8BE9FD" }, children: "coverImage" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "/v1/content/math/linear-algebra/cover.png" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#8BE9FD" }, children: "coverImageAlt" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Two vectors added tip-to-tail" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#F8F8F2" }, children: "---" }) })] }) }) }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "Field" }), _jsx(_components.th, { children: "Required" }), _jsx(_components.th, { children: "Notes" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "title" }) }), _jsx(_components.td, { children: "yes" }), _jsx(_components.td, { children: "Hero, cards, tree, SEO" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "date" }) }), _jsx(_components.td, { children: "yes" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "YYYY-MM-DD" }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "excerpt" }) }), _jsx(_components.td, { children: "recommended" }), _jsx(_components.td, { children: "Card / subtitle" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "tags" }) }), _jsx(_components.td, { children: "recommended" }), _jsx(_components.td, { children: "Related posts" })] }), _jsxs(_components.tr, { children: [_jsxs(_components.td, { children: [_jsx(_components.code, { children: "coverImage" }), " / ", _jsx(_components.code, { children: "coverImageAlt" })] }), _jsx(_components.td, { children: "optional" }), _jsx(_components.td, { children: "Cards only show a cover when set" })] })] })] }), "\n", _jsxs(_components.p, { children: ["Layout already renders ", _jsx(_components.code, { children: "title" }), " as ", _jsx(_components.code, { children: "
" }), " — start the body at ", _jsx(_components.code, { children: "##" }), "."] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "code-blocks-automatic", children: "Code blocks (automatic)" }), "\n", _jsx(_components.p, { children: "Fenced code gets the shared card shell: filename or language badge, copy, collapse for long files. No wrapper component." }), "\n", _jsx(_components.h3, { id: "language-badge-only", children: "Language badge only" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Source" }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "mdx", "data-theme": "github-light dracula", __rawstring__: "```ts\nconst n = 1\n```\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "mdx", "data-theme": "github-light dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "1", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "```" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "ts" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "const" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#F8F8F2" }, children: " n" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 1" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "```" }) })] }) }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Result" }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "ts", "data-theme": "github-light dracula", __rawstring__: "const n = 1\n", children: _jsx(_components.code, { "data-line-numbers": "", "data-language": "ts", "data-theme": "github-light dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "1", children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "const" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#F8F8F2" }, children: " n" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 1" })] }) }) }) }), "\n", _jsx(_components.h3, { id: "filename-in-the-header", children: "Filename in the header" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Source" }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "mdx", "data-theme": "github-light dracula", __rawstring__: "```tsx title=\"Button.tsx\"\nexport function Button() {\n return \n}\n```\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "mdx", "data-theme": "github-light dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "1", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "```" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "tsx" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " title=\"Button.tsx\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " function" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " Button" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " return" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#FF79C6" }, children: "button" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#50FA7B", "--shiki-dark-font-style": "italic" }, children: " className" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "btn" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ">Save" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "```" }) })] }) }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Result" }) }), "\n", _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "tsx", "data-theme": "github-light dracula", children: "Button.tsx" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "tsx", "data-theme": "github-light dracula", __rawstring__: "export function Button() {\n return \n}\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "tsx", "data-theme": "github-light dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "1", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " function" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " Button" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " return" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#FF79C6" }, children: "button" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#50FA7B", "--shiki-dark-font-style": "italic" }, children: " className" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "btn" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ">Save" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "}" }) })] }) })] }), "\n", _jsxs(_components.h3, { id: "focus-code-focus--code-focusn", children: ["Focus (", _jsx(_components.code, { children: "[!code focus]" }), " / ", _jsx(_components.code, { children: "[!code focus:N]" }), ")"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "transformerNotationFocus" }), " dims non-focused lines."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Source" }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "mdx", "data-theme": "github-light dracula", __rawstring__: "console.log('Not focused')\nconsole.log('Not focused')\nconsole.log('Not focused')\n// [!code focus:2]\nconsole.log('Focused line 1')\nconsole.log('Focused line 2')\nconsole.log('Not focused')\nconsole.log('Not focused')\nconsole.log('Not focused')\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "mdx", "data-theme": "github-light dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "1", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console.log('Not focused')" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console.log('Not focused')" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console.log('Not focused')" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "// " }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "[" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "!code focus:2" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "]" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console.log('Focused line 1')" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console.log('Focused line 2')" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console.log('Not focused')" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console.log('Not focused')" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console.log('Not focused')" }) })] }) }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Result" }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { className: "has-focused", tabIndex: "0", "data-language": "ts", "data-theme": "github-light dracula", __rawstring__: "console.log('Not focused')\nconsole.log('Not focused')\nconsole.log('Not focused')\n// [!code focus:2]\nconsole.log('Focused line 1')\nconsole.log('Focused line 2')\nconsole.log('Not focused')\nconsole.log('Not focused')\nconsole.log('Not focused')\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "ts", "data-theme": "github-light dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "1", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "log" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Not focused" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "log" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Not focused" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "log" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Not focused" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "focused", "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "log" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Focused line 1" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "focused", "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "log" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Focused line 2" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "log" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Not focused" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "log" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Not focused" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "console." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "log" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Not focused" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ")" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["Focused lines stay bright; the ", _jsx(_components.code, { children: "
"
      }), " gains ", _jsx(_components.code, {
        children: "has-focused"
      }), "."]
    }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, {
      id: "codetabs-multi-file",
      children: [_jsx(_components.code, {
        children: "CodeTabs"
      }), " (multi-file)"]
    }), "\n", _jsxs(_components.p, {
      children: ["Wrap related fences. Each fence needs ", _jsx(_components.code, {
        children: "title=\"filename\""
      }), " for the tab label."]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n\n```csharp title=\"src/Services/MyApp.Api/Features/Products/CreateProduct/CreateProductCommand.cs\"\npublic sealed record CreateProductCommand(\n    string Name,\n    string Category,\n    decimal Price,\n    int Stock) : IRequest;\n```\n\n```csharp title=\"src/Services/MyApp.Api/Features/Products/GetProduct/GetProductQuery.cs\"\npublic sealed record GetProductQuery(Guid Id) : IRequest;\n```\n\n```csharp title=\"src/Services/MyApp.Api/Features/Products/GetProducts/GetProductsQuery.cs\"\npublic sealed record GetProductsQuery() : IRequest>;\n```\n\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "CodeTabs"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "csharp"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " title=\"src/Services/MyApp.Api/Features/Products/CreateProduct/CreateProductCommand.cs\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "public"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: " sealed"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: " record"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#8BE9FD"
              },
              children: " CreateProductCommand"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "    string"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#FFB86C",
                "--shiki-dark-font-style": "italic"
              },
              children: " Name"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ","
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "    string"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#FFB86C",
                "--shiki-dark-font-style": "italic"
              },
              children: " Category"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ","
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "    decimal"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#FFB86C",
                "--shiki-dark-font-style": "italic"
              },
              children: " Price"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ","
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "    int"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#FFB86C",
                "--shiki-dark-font-style": "italic"
              },
              children: " Stock"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ") : "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "IRequest"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Guid"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">;"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "csharp"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " title=\"src/Services/MyApp.Api/Features/Products/GetProduct/GetProductQuery.cs\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "public"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: " sealed"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: " record"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#8BE9FD"
              },
              children: " GetProductQuery"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Guid"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#FFB86C",
                "--shiki-dark-font-style": "italic"
              },
              children: " Id"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ") : "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "IRequest"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ProductDto"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "?>;"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "csharp"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " title=\"src/Services/MyApp.Api/Features/Products/GetProducts/GetProductsQuery.cs\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "public"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: " sealed"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: " record"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#8BE9FD"
              },
              children: " GetProductsQuery"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "() : "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "IRequest"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "List"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ProductDto"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">>;"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(CodeTabs, {
      children: [_jsxs(_components.figure, {
        "data-rehype-pretty-code-figure": "",
        children: [_jsx(_components.figcaption, {
          "data-rehype-pretty-code-title": "",
          "data-language": "csharp",
          "data-theme": "github-light dracula",
          children: "src/Services/MyApp.Api/Features/Products/CreateProduct/CreateProductCommand.cs"
        }), _jsx(_components.pre, {
          tabIndex: "0",
          "data-language": "csharp",
          "data-theme": "github-light dracula",
          __rawstring__: "public sealed record CreateProductCommand(\n    string Name,\n    string Category,\n    decimal Price,\n    int Stock) : IRequest;\n",
          children: _jsxs(_components.code, {
            "data-line-numbers": "",
            "data-language": "csharp",
            "data-theme": "github-light dracula",
            style: {
              display: "grid"
            },
            "data-line-numbers-max-digits": "1",
            children: [_jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  "--shiki-light": "#D73A49",
                  "--shiki-dark": "#FF79C6"
                },
                children: "public"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#D73A49",
                  "--shiki-dark": "#FF79C6"
                },
                children: " sealed"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#D73A49",
                  "--shiki-dark": "#FF79C6"
                },
                children: " record"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-dark": "#8BE9FD"
                },
                children: " CreateProductCommand"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: "("
              })]
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  "--shiki-light": "#D73A49",
                  "--shiki-dark": "#FF79C6"
                },
                children: "    string"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#FFB86C",
                  "--shiki-dark-font-style": "italic"
                },
                children: " Name"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: ","
              })]
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  "--shiki-light": "#D73A49",
                  "--shiki-dark": "#FF79C6"
                },
                children: "    string"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#FFB86C",
                  "--shiki-dark-font-style": "italic"
                },
                children: " Category"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: ","
              })]
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  "--shiki-light": "#D73A49",
                  "--shiki-dark": "#FF79C6"
                },
                children: "    decimal"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#FFB86C",
                  "--shiki-dark-font-style": "italic"
                },
                children: " Price"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: ","
              })]
            }), "\n", _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  "--shiki-light": "#D73A49",
                  "--shiki-dark": "#FF79C6"
                },
                children: "    int"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#FFB86C",
                  "--shiki-dark-font-style": "italic"
                },
                children: " Stock"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: ") : "
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#8BE9FD",
                  "--shiki-dark-font-style": "italic"
                },
                children: "IRequest"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: "<"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#8BE9FD",
                  "--shiki-dark-font-style": "italic"
                },
                children: "Guid"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: ">;"
              })]
            })]
          })
        })]
      }), _jsxs(_components.figure, {
        "data-rehype-pretty-code-figure": "",
        children: [_jsx(_components.figcaption, {
          "data-rehype-pretty-code-title": "",
          "data-language": "csharp",
          "data-theme": "github-light dracula",
          children: "src/Services/MyApp.Api/Features/Products/GetProduct/GetProductQuery.cs"
        }), _jsx(_components.pre, {
          tabIndex: "0",
          "data-language": "csharp",
          "data-theme": "github-light dracula",
          __rawstring__: "public sealed record GetProductQuery(Guid Id) : IRequest;\n",
          children: _jsx(_components.code, {
            "data-line-numbers": "",
            "data-language": "csharp",
            "data-theme": "github-light dracula",
            style: {
              display: "grid"
            },
            "data-line-numbers-max-digits": "1",
            children: _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  "--shiki-light": "#D73A49",
                  "--shiki-dark": "#FF79C6"
                },
                children: "public"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#D73A49",
                  "--shiki-dark": "#FF79C6"
                },
                children: " sealed"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#D73A49",
                  "--shiki-dark": "#FF79C6"
                },
                children: " record"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-dark": "#8BE9FD"
                },
                children: " GetProductQuery"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: "("
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#8BE9FD",
                  "--shiki-dark-font-style": "italic"
                },
                children: "Guid"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#FFB86C",
                  "--shiki-dark-font-style": "italic"
                },
                children: " Id"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: ") : "
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#8BE9FD",
                  "--shiki-dark-font-style": "italic"
                },
                children: "IRequest"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: "<"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#8BE9FD",
                  "--shiki-dark-font-style": "italic"
                },
                children: "ProductDto"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: "?>;"
              })]
            })
          })
        })]
      }), _jsxs(_components.figure, {
        "data-rehype-pretty-code-figure": "",
        children: [_jsx(_components.figcaption, {
          "data-rehype-pretty-code-title": "",
          "data-language": "csharp",
          "data-theme": "github-light dracula",
          children: "src/Services/MyApp.Api/Features/Products/GetProducts/GetProductsQuery.cs"
        }), _jsx(_components.pre, {
          tabIndex: "0",
          "data-language": "csharp",
          "data-theme": "github-light dracula",
          __rawstring__: "public sealed record GetProductsQuery() : IRequest>;\n",
          children: _jsx(_components.code, {
            "data-line-numbers": "",
            "data-language": "csharp",
            "data-theme": "github-light dracula",
            style: {
              display: "grid"
            },
            "data-line-numbers-max-digits": "1",
            children: _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  "--shiki-light": "#D73A49",
                  "--shiki-dark": "#FF79C6"
                },
                children: "public"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#D73A49",
                  "--shiki-dark": "#FF79C6"
                },
                children: " sealed"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#D73A49",
                  "--shiki-dark": "#FF79C6"
                },
                children: " record"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-dark": "#8BE9FD"
                },
                children: " GetProductsQuery"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: "() : "
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#8BE9FD",
                  "--shiki-dark-font-style": "italic"
                },
                children: "IRequest"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: "<"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#8BE9FD",
                  "--shiki-dark-font-style": "italic"
                },
                children: "List"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: "<"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#8BE9FD",
                  "--shiki-dark-font-style": "italic"
                },
                children: "ProductDto"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: ">>;"
              })]
            })
          })
        })]
      })]
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
      id: "diff--highlight-transformers",
      children: "Diff & highlight transformers"
    }), "\n", _jsxs(_components.p, {
      children: ["Comments like ", _jsx(_components.code, {
        children: "// [!code ++]"
      }), " style the line and are stripped from copy. More transformers: ", _jsx(_components.a, {
        href: "/blog/examples/advanced-rehype-pretty-code-shiki-examples",
        children: "Shiki examples"
      }), "."]
    }), "\n", _jsx(_components.h3, {
      id: "diff--error",
      children: "Diff / error"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        className: "has-diff has-highlighted",
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "```ts\nconsole.log('hewwo') // [!code --]\nconsole.log('hello') // [!code ++]\nconsole.error('boom') // [!code error]\n```\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "ts"
            })]
          }), "\n", _jsxs(_components.span, {
            className: "diff remove",
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "console."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "log"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "hewwo"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ") "
            })]
          }), "\n", _jsxs(_components.span, {
            className: "diff add",
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "console."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "log"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "hello"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ") "
            })]
          }), "\n", _jsxs(_components.span, {
            className: "highlighted error",
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "console."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "error"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "boom"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ") "
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            })
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        className: "has-diff has-highlighted",
        tabIndex: "0",
        "data-language": "ts",
        "data-theme": "github-light dracula",
        __rawstring__: "console.log('hewwo') // [!code --]\nconsole.log('hello') // [!code ++]\nconsole.error('boom') // [!code error]\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "ts",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsxs(_components.span, {
            className: "diff remove",
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "console."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "log"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "hewwo"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ") "
            })]
          }), "\n", _jsxs(_components.span, {
            className: "diff add",
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "console."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "log"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "hello"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ") "
            })]
          }), "\n", _jsxs(_components.span, {
            className: "highlighted error",
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "console."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "error"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "boom"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ") "
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.h3, {
      id: "meta-line-highlight",
      children: "Meta line highlight"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "```ts showLineNumbers {1-2}\nconsole.log('highlighted')\nconsole.log('also highlighted')\nconsole.log('plain')\n```\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "ts"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " showLineNumbers {1-2}"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "console."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "log"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "highlighted"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ")"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "console."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "log"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "also highlighted"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ")"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "console."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "log"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "plain"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ")"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            })
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "ts",
        "data-theme": "github-light dracula",
        __rawstring__: "console.log('highlighted')\nconsole.log('also highlighted')\nconsole.log('plain')\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "ts",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsxs(_components.span, {
            "data-line": "",
            "data-highlighted-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "console."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "log"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "highlighted"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ")"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            "data-highlighted-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "console."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "log"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "also highlighted"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ")"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "console."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "log"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "plain"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ")"
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.h3, {
      id: "word-highlight",
      children: "Word highlight"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "```ts /Hello/\nconst message = 'Hello World'\n```\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "ts"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " /Hello/"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "const"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#F8F8F2"
              },
              children: " message"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: " ="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: " '"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Hello World"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            })
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "ts",
        "data-theme": "github-light dracula",
        __rawstring__: "const message = 'Hello World'\n",
        children: _jsx(_components.code, {
          "data-language": "ts",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          children: _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "const"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#F8F8F2"
              },
              children: " message"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: " ="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: " '"
            }), _jsx(_components.mark, {
              "data-highlighted-chars": "",
              children: _jsx(_components.span, {
                style: {
                  "--shiki-light": "#032F62",
                  "--shiki-dark": "#F1FA8C"
                },
                children: "Hello"
              })
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: " World"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            })]
          })
        })
      })
    }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, {
      id: "figure-zoomable-images",
      children: [_jsx(_components.code, {
        children: "Figure"
      }), " (zoomable images)"]
    }), "\n", _jsxs(_components.p, {
      children: ["Captioned image with size / align. Click opens a theme-aware lightbox (scroll to zoom, drag to pan, Esc to close). Set ", _jsx(_components.code, {
        children: "zoom=\"false\""
      }), " for decorative images."]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.strong, {
        children: "Important:"
      }), " with ", _jsx(_components.code, {
        children: "next-mdx-remote"
      }), ", JSX expression props like ", _jsx(_components.code, {
        children: "width={960}"
      }), " are stripped at serialize time. Use ", _jsx(_components.strong, {
        children: "string"
      }), " attributes: ", _jsx(_components.code, {
        children: "width=\"960\""
      }), ", ", _jsx(_components.code, {
        children: "height=\"640\""
      }), ", ", _jsx(_components.code, {
        children: "zoom=\"false\""
      }), "."]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Figure"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  src"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=960&q=80"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  alt"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Code on a laptop screen"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  caption"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Fig 1. Click the image — scroll to zoom further"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  width"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "960"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  height"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "640"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  size"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "md"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "/>"
            })
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsx(Figure, {
      src: "https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=960&q=80",
      alt: "Code on a laptop screen",
      caption: "Fig 1. Click the image — scroll to zoom further",
      width: "960",
      height: "640",
      size: "md"
    }), "\n", _jsxs(_components.p, {
      children: ["Remote hosts must be listed in ", _jsx(_components.code, {
        children: "next.config.ts"
      }), " ", _jsx(_components.code, {
        children: "images.remotePatterns"
      }), " (Unsplash is already allowed). Local files go under ", _jsx(_components.code, {
        children: "public/"
      }), " and use root paths like ", _jsx(_components.code, {
        children: "/v1/..."
      }), "."]
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Figure"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  src"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "/v1/demo.png"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  alt"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "BFS vs DFS travarsing"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  caption"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "A visual comparison of BFS and DFS traversal"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "/>"
            })
          })]
        })
      })
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
      id: "math-katex",
      children: "Math (KaTeX)"
    }), "\n", _jsxs(_components.p, {
      children: ["Keep ", _jsx(_components.code, {
        children: "$...$"
      }), " tight (", _jsx(_components.code, {
        children: "$x$"
      }), ", not ", _jsx(_components.code, {
        children: "$ x $"
      }), ")."]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "Inline: the vector $\\mathbf{x} = (x_1, x_2, \\dots, x_n)$ lives in $\\mathbb{R}^n$.\n\n$$\n\\mathbf{x} + \\mathbf{y} = (x_1 + y_1, \\dots, x_n + y_n)\n$$\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "Inline: the vector $\\mathbf"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "{"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "x"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "}"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " = (x_1, x_2, \\dots, x_n)$ lives in $\\mathbb"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "{"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#F8F8F2"
              },
              children: "R"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "}"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "^n$."
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "$$"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "\\mathbf{x} + \\mathbf{y} = (x_1 + y_1, \\dots, x_n + y_n)"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "$$"
            })
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Inline: the vector ", _jsxs(_components.span, {
        className: "katex",
        children: [_jsx(_components.span, {
          className: "katex-mathml",
          children: _jsx(_components.math, {
            xmlns: "http://www.w3.org/1998/Math/MathML",
            children: _jsxs(_components.semantics, {
              children: [_jsxs(_components.mrow, {
                children: [_jsx(_components.mi, {
                  mathvariant: "bold",
                  children: "x"
                }), _jsx(_components.mo, {
                  children: "="
                }), _jsx(_components.mo, {
                  stretchy: "false",
                  children: "("
                }), _jsxs(_components.msub, {
                  children: [_jsx(_components.mi, {
                    children: "x"
                  }), _jsx(_components.mn, {
                    children: "1"
                  })]
                }), _jsx(_components.mo, {
                  separator: "true",
                  children: ","
                }), _jsxs(_components.msub, {
                  children: [_jsx(_components.mi, {
                    children: "x"
                  }), _jsx(_components.mn, {
                    children: "2"
                  })]
                }), _jsx(_components.mo, {
                  separator: "true",
                  children: ","
                }), _jsx(_components.mo, {
                  children: "…"
                }), _jsx(_components.mo, {
                  separator: "true",
                  children: ","
                }), _jsxs(_components.msub, {
                  children: [_jsx(_components.mi, {
                    children: "x"
                  }), _jsx(_components.mi, {
                    children: "n"
                  })]
                }), _jsx(_components.mo, {
                  stretchy: "false",
                  children: ")"
                })]
              }), _jsx(_components.annotation, {
                encoding: "application/x-tex",
                children: "\\mathbf{x} = (x_1, x_2, \\dots, x_n)"
              })]
            })
          })
        }), _jsxs(_components.span, {
          className: "katex-html",
          "aria-hidden": "true",
          children: [_jsxs(_components.span, {
            className: "base",
            children: [_jsx(_components.span, {
              className: "strut",
              style: {
                height: "0.4444em"
              }
            }), _jsx(_components.span, {
              className: "mord mathbf",
              children: "x"
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.2778em"
              }
            }), _jsx(_components.span, {
              className: "mrel",
              children: "="
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.2778em"
              }
            })]
          }), _jsxs(_components.span, {
            className: "base",
            children: [_jsx(_components.span, {
              className: "strut",
              style: {
                height: "1em",
                verticalAlign: "-0.25em"
              }
            }), _jsx(_components.span, {
              className: "mopen",
              children: "("
            }), _jsxs(_components.span, {
              className: "mord",
              children: [_jsx(_components.span, {
                className: "mord mathnormal",
                children: "x"
              }), _jsx(_components.span, {
                className: "msupsub",
                children: _jsxs(_components.span, {
                  className: "vlist-t vlist-t2",
                  children: [_jsxs(_components.span, {
                    className: "vlist-r",
                    children: [_jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.3011em"
                      },
                      children: _jsxs(_components.span, {
                        style: {
                          top: "-2.55em",
                          marginLeft: "0em",
                          marginRight: "0.05em"
                        },
                        children: [_jsx(_components.span, {
                          className: "pstrut",
                          style: {
                            height: "2.7em"
                          }
                        }), _jsx(_components.span, {
                          className: "sizing reset-size6 size3 mtight",
                          children: _jsx(_components.span, {
                            className: "mord mtight",
                            children: "1"
                          })
                        })]
                      })
                    }), _jsx(_components.span, {
                      className: "vlist-s",
                      children: ""
                    })]
                  }), _jsx(_components.span, {
                    className: "vlist-r",
                    children: _jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.15em"
                      },
                      children: _jsx(_components.span, {})
                    })
                  })]
                })
              })]
            }), _jsx(_components.span, {
              className: "mpunct",
              children: ","
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.1667em"
              }
            }), _jsxs(_components.span, {
              className: "mord",
              children: [_jsx(_components.span, {
                className: "mord mathnormal",
                children: "x"
              }), _jsx(_components.span, {
                className: "msupsub",
                children: _jsxs(_components.span, {
                  className: "vlist-t vlist-t2",
                  children: [_jsxs(_components.span, {
                    className: "vlist-r",
                    children: [_jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.3011em"
                      },
                      children: _jsxs(_components.span, {
                        style: {
                          top: "-2.55em",
                          marginLeft: "0em",
                          marginRight: "0.05em"
                        },
                        children: [_jsx(_components.span, {
                          className: "pstrut",
                          style: {
                            height: "2.7em"
                          }
                        }), _jsx(_components.span, {
                          className: "sizing reset-size6 size3 mtight",
                          children: _jsx(_components.span, {
                            className: "mord mtight",
                            children: "2"
                          })
                        })]
                      })
                    }), _jsx(_components.span, {
                      className: "vlist-s",
                      children: ""
                    })]
                  }), _jsx(_components.span, {
                    className: "vlist-r",
                    children: _jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.15em"
                      },
                      children: _jsx(_components.span, {})
                    })
                  })]
                })
              })]
            }), _jsx(_components.span, {
              className: "mpunct",
              children: ","
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.1667em"
              }
            }), _jsx(_components.span, {
              className: "minner",
              children: "…"
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.1667em"
              }
            }), _jsx(_components.span, {
              className: "mpunct",
              children: ","
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.1667em"
              }
            }), _jsxs(_components.span, {
              className: "mord",
              children: [_jsx(_components.span, {
                className: "mord mathnormal",
                children: "x"
              }), _jsx(_components.span, {
                className: "msupsub",
                children: _jsxs(_components.span, {
                  className: "vlist-t vlist-t2",
                  children: [_jsxs(_components.span, {
                    className: "vlist-r",
                    children: [_jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.1514em"
                      },
                      children: _jsxs(_components.span, {
                        style: {
                          top: "-2.55em",
                          marginLeft: "0em",
                          marginRight: "0.05em"
                        },
                        children: [_jsx(_components.span, {
                          className: "pstrut",
                          style: {
                            height: "2.7em"
                          }
                        }), _jsx(_components.span, {
                          className: "sizing reset-size6 size3 mtight",
                          children: _jsx(_components.span, {
                            className: "mord mathnormal mtight",
                            children: "n"
                          })
                        })]
                      })
                    }), _jsx(_components.span, {
                      className: "vlist-s",
                      children: ""
                    })]
                  }), _jsx(_components.span, {
                    className: "vlist-r",
                    children: _jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.15em"
                      },
                      children: _jsx(_components.span, {})
                    })
                  })]
                })
              })]
            }), _jsx(_components.span, {
              className: "mclose",
              children: ")"
            })]
          })]
        })]
      }), " lives in ", _jsxs(_components.span, {
        className: "katex",
        children: [_jsx(_components.span, {
          className: "katex-mathml",
          children: _jsx(_components.math, {
            xmlns: "http://www.w3.org/1998/Math/MathML",
            children: _jsxs(_components.semantics, {
              children: [_jsx(_components.mrow, {
                children: _jsxs(_components.msup, {
                  children: [_jsx(_components.mi, {
                    mathvariant: "double-struck",
                    children: "R"
                  }), _jsx(_components.mi, {
                    children: "n"
                  })]
                })
              }), _jsx(_components.annotation, {
                encoding: "application/x-tex",
                children: "\\mathbb{R}^n"
              })]
            })
          })
        }), _jsx(_components.span, {
          className: "katex-html",
          "aria-hidden": "true",
          children: _jsxs(_components.span, {
            className: "base",
            children: [_jsx(_components.span, {
              className: "strut",
              style: {
                height: "0.6889em"
              }
            }), _jsxs(_components.span, {
              className: "mord",
              children: [_jsx(_components.span, {
                className: "mord mathbb",
                children: "R"
              }), _jsx(_components.span, {
                className: "msupsub",
                children: _jsx(_components.span, {
                  className: "vlist-t",
                  children: _jsx(_components.span, {
                    className: "vlist-r",
                    children: _jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.6644em"
                      },
                      children: _jsxs(_components.span, {
                        style: {
                          top: "-3.063em",
                          marginRight: "0.05em"
                        },
                        children: [_jsx(_components.span, {
                          className: "pstrut",
                          style: {
                            height: "2.7em"
                          }
                        }), _jsx(_components.span, {
                          className: "sizing reset-size6 size3 mtight",
                          children: _jsx(_components.span, {
                            className: "mord mathnormal mtight",
                            children: "n"
                          })
                        })]
                      })
                    })
                  })
                })
              })]
            })]
          })
        })]
      }), "."]
    }), "\n", _jsx(_components.span, {
      className: "katex-display",
      children: _jsxs(_components.span, {
        className: "katex",
        children: [_jsx(_components.span, {
          className: "katex-mathml",
          children: _jsx(_components.math, {
            xmlns: "http://www.w3.org/1998/Math/MathML",
            display: "block",
            children: _jsxs(_components.semantics, {
              children: [_jsxs(_components.mrow, {
                children: [_jsx(_components.mi, {
                  mathvariant: "bold",
                  children: "x"
                }), _jsx(_components.mo, {
                  children: "+"
                }), _jsx(_components.mi, {
                  mathvariant: "bold",
                  children: "y"
                }), _jsx(_components.mo, {
                  children: "="
                }), _jsx(_components.mo, {
                  stretchy: "false",
                  children: "("
                }), _jsxs(_components.msub, {
                  children: [_jsx(_components.mi, {
                    children: "x"
                  }), _jsx(_components.mn, {
                    children: "1"
                  })]
                }), _jsx(_components.mo, {
                  children: "+"
                }), _jsxs(_components.msub, {
                  children: [_jsx(_components.mi, {
                    children: "y"
                  }), _jsx(_components.mn, {
                    children: "1"
                  })]
                }), _jsx(_components.mo, {
                  separator: "true",
                  children: ","
                }), _jsx(_components.mo, {
                  children: "…"
                }), _jsx(_components.mo, {
                  separator: "true",
                  children: ","
                }), _jsxs(_components.msub, {
                  children: [_jsx(_components.mi, {
                    children: "x"
                  }), _jsx(_components.mi, {
                    children: "n"
                  })]
                }), _jsx(_components.mo, {
                  children: "+"
                }), _jsxs(_components.msub, {
                  children: [_jsx(_components.mi, {
                    children: "y"
                  }), _jsx(_components.mi, {
                    children: "n"
                  })]
                }), _jsx(_components.mo, {
                  stretchy: "false",
                  children: ")"
                })]
              }), _jsx(_components.annotation, {
                encoding: "application/x-tex",
                children: "\\mathbf{x} + \\mathbf{y} = (x_1 + y_1, \\dots, x_n + y_n)"
              })]
            })
          })
        }), _jsxs(_components.span, {
          className: "katex-html",
          "aria-hidden": "true",
          children: [_jsxs(_components.span, {
            className: "base",
            children: [_jsx(_components.span, {
              className: "strut",
              style: {
                height: "0.6667em",
                verticalAlign: "-0.0833em"
              }
            }), _jsx(_components.span, {
              className: "mord mathbf",
              children: "x"
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.2222em"
              }
            }), _jsx(_components.span, {
              className: "mbin",
              children: "+"
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.2222em"
              }
            })]
          }), _jsxs(_components.span, {
            className: "base",
            children: [_jsx(_components.span, {
              className: "strut",
              style: {
                height: "0.6389em",
                verticalAlign: "-0.1944em"
              }
            }), _jsx(_components.span, {
              className: "mord mathbf",
              style: {
                marginRight: "0.016em"
              },
              children: "y"
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.2778em"
              }
            }), _jsx(_components.span, {
              className: "mrel",
              children: "="
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.2778em"
              }
            })]
          }), _jsxs(_components.span, {
            className: "base",
            children: [_jsx(_components.span, {
              className: "strut",
              style: {
                height: "1em",
                verticalAlign: "-0.25em"
              }
            }), _jsx(_components.span, {
              className: "mopen",
              children: "("
            }), _jsxs(_components.span, {
              className: "mord",
              children: [_jsx(_components.span, {
                className: "mord mathnormal",
                children: "x"
              }), _jsx(_components.span, {
                className: "msupsub",
                children: _jsxs(_components.span, {
                  className: "vlist-t vlist-t2",
                  children: [_jsxs(_components.span, {
                    className: "vlist-r",
                    children: [_jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.3011em"
                      },
                      children: _jsxs(_components.span, {
                        style: {
                          top: "-2.55em",
                          marginLeft: "0em",
                          marginRight: "0.05em"
                        },
                        children: [_jsx(_components.span, {
                          className: "pstrut",
                          style: {
                            height: "2.7em"
                          }
                        }), _jsx(_components.span, {
                          className: "sizing reset-size6 size3 mtight",
                          children: _jsx(_components.span, {
                            className: "mord mtight",
                            children: "1"
                          })
                        })]
                      })
                    }), _jsx(_components.span, {
                      className: "vlist-s",
                      children: ""
                    })]
                  }), _jsx(_components.span, {
                    className: "vlist-r",
                    children: _jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.15em"
                      },
                      children: _jsx(_components.span, {})
                    })
                  })]
                })
              })]
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.2222em"
              }
            }), _jsx(_components.span, {
              className: "mbin",
              children: "+"
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.2222em"
              }
            })]
          }), _jsxs(_components.span, {
            className: "base",
            children: [_jsx(_components.span, {
              className: "strut",
              style: {
                height: "0.7778em",
                verticalAlign: "-0.1944em"
              }
            }), _jsxs(_components.span, {
              className: "mord",
              children: [_jsx(_components.span, {
                className: "mord mathnormal",
                style: {
                  marginRight: "0.0359em"
                },
                children: "y"
              }), _jsx(_components.span, {
                className: "msupsub",
                children: _jsxs(_components.span, {
                  className: "vlist-t vlist-t2",
                  children: [_jsxs(_components.span, {
                    className: "vlist-r",
                    children: [_jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.3011em"
                      },
                      children: _jsxs(_components.span, {
                        style: {
                          top: "-2.55em",
                          marginLeft: "-0.0359em",
                          marginRight: "0.05em"
                        },
                        children: [_jsx(_components.span, {
                          className: "pstrut",
                          style: {
                            height: "2.7em"
                          }
                        }), _jsx(_components.span, {
                          className: "sizing reset-size6 size3 mtight",
                          children: _jsx(_components.span, {
                            className: "mord mtight",
                            children: "1"
                          })
                        })]
                      })
                    }), _jsx(_components.span, {
                      className: "vlist-s",
                      children: ""
                    })]
                  }), _jsx(_components.span, {
                    className: "vlist-r",
                    children: _jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.15em"
                      },
                      children: _jsx(_components.span, {})
                    })
                  })]
                })
              })]
            }), _jsx(_components.span, {
              className: "mpunct",
              children: ","
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.1667em"
              }
            }), _jsx(_components.span, {
              className: "minner",
              children: "…"
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.1667em"
              }
            }), _jsx(_components.span, {
              className: "mpunct",
              children: ","
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.1667em"
              }
            }), _jsxs(_components.span, {
              className: "mord",
              children: [_jsx(_components.span, {
                className: "mord mathnormal",
                children: "x"
              }), _jsx(_components.span, {
                className: "msupsub",
                children: _jsxs(_components.span, {
                  className: "vlist-t vlist-t2",
                  children: [_jsxs(_components.span, {
                    className: "vlist-r",
                    children: [_jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.1514em"
                      },
                      children: _jsxs(_components.span, {
                        style: {
                          top: "-2.55em",
                          marginLeft: "0em",
                          marginRight: "0.05em"
                        },
                        children: [_jsx(_components.span, {
                          className: "pstrut",
                          style: {
                            height: "2.7em"
                          }
                        }), _jsx(_components.span, {
                          className: "sizing reset-size6 size3 mtight",
                          children: _jsx(_components.span, {
                            className: "mord mathnormal mtight",
                            children: "n"
                          })
                        })]
                      })
                    }), _jsx(_components.span, {
                      className: "vlist-s",
                      children: ""
                    })]
                  }), _jsx(_components.span, {
                    className: "vlist-r",
                    children: _jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.15em"
                      },
                      children: _jsx(_components.span, {})
                    })
                  })]
                })
              })]
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.2222em"
              }
            }), _jsx(_components.span, {
              className: "mbin",
              children: "+"
            }), _jsx(_components.span, {
              className: "mspace",
              style: {
                marginRight: "0.2222em"
              }
            })]
          }), _jsxs(_components.span, {
            className: "base",
            children: [_jsx(_components.span, {
              className: "strut",
              style: {
                height: "1em",
                verticalAlign: "-0.25em"
              }
            }), _jsxs(_components.span, {
              className: "mord",
              children: [_jsx(_components.span, {
                className: "mord mathnormal",
                style: {
                  marginRight: "0.0359em"
                },
                children: "y"
              }), _jsx(_components.span, {
                className: "msupsub",
                children: _jsxs(_components.span, {
                  className: "vlist-t vlist-t2",
                  children: [_jsxs(_components.span, {
                    className: "vlist-r",
                    children: [_jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.1514em"
                      },
                      children: _jsxs(_components.span, {
                        style: {
                          top: "-2.55em",
                          marginLeft: "-0.0359em",
                          marginRight: "0.05em"
                        },
                        children: [_jsx(_components.span, {
                          className: "pstrut",
                          style: {
                            height: "2.7em"
                          }
                        }), _jsx(_components.span, {
                          className: "sizing reset-size6 size3 mtight",
                          children: _jsx(_components.span, {
                            className: "mord mathnormal mtight",
                            children: "n"
                          })
                        })]
                      })
                    }), _jsx(_components.span, {
                      className: "vlist-s",
                      children: ""
                    })]
                  }), _jsx(_components.span, {
                    className: "vlist-r",
                    children: _jsx(_components.span, {
                      className: "vlist",
                      style: {
                        height: "0.15em"
                      },
                      children: _jsx(_components.span, {})
                    })
                  })]
                })
              })]
            }), _jsx(_components.span, {
              className: "mclose",
              children: ")"
            })]
          })]
        })]
      })
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
      id: "standard-markdown",
      children: "Standard Markdown"
    }), "\n", _jsx(_components.p, {
      children: "GFM is on: tables, strikethrough, task lists, autolinks."
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "md",
        "data-theme": "github-light dracula",
        __rawstring__: "> Left-bordered blockquote — fine for callouts on blog posts.\n\n- Unordered item\n1. Ordered item\n\n- [ ] Todo\n- [x] Done\n\n| Algorithm | Average |\n| --- | --- |\n| Merge Sort | O(n log n) |\n\n~~deprecated~~ · [Internal link](/blog/algorithms/sorting) · [External](https://example.com) · [Same-page heading](#standard-markdown)\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "md",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#22863A",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#F1FA8C",
                "--shiki-dark-font-style": "italic"
              },
              children: "> Left-bordered blockquote — fine for callouts on blog posts."
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#E36209",
                "--shiki-dark": "#F8F8F2"
              },
              children: "-"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " Unordered item"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#E36209",
                "--shiki-dark": "#F8F8F2"
              },
              children: "1."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " Ordered item"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#E36209",
                "--shiki-dark": "#F8F8F2"
              },
              children: "-"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " [ ] Todo"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#E36209",
                "--shiki-dark": "#F8F8F2"
              },
              children: "-"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " ["
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-light-text-decoration": "underline",
                "--shiki-dark": "#FF79C6",
                "--shiki-dark-text-decoration": "inherit"
              },
              children: "x"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "] Done"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "| Algorithm | Average |"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "| --- | --- |"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "| Merge Sort | O(n log n) |"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-light-text-decoration": "line-through",
                "--shiki-dark": "#F8F8F2",
                "--shiki-dark-text-decoration": "inherit"
              },
              children: "~~deprecated~~"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " · ["
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-light-text-decoration": "underline",
                "--shiki-dark": "#FF79C6",
                "--shiki-dark-text-decoration": "inherit"
              },
              children: "Internal link"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "]("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-light-text-decoration": "underline",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-text-decoration": "underline"
              },
              children: "/blog/algorithms/sorting"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ") · ["
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-light-text-decoration": "underline",
                "--shiki-dark": "#FF79C6",
                "--shiki-dark-text-decoration": "inherit"
              },
              children: "External"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "]("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-light-text-decoration": "underline",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-text-decoration": "underline"
              },
              children: "https://example.com"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ") · ["
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-light-text-decoration": "underline",
                "--shiki-dark": "#FF79C6",
                "--shiki-dark-text-decoration": "inherit"
              },
              children: "Same-page heading"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "]("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-light-text-decoration": "underline",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-text-decoration": "underline"
              },
              children: "#standard-markdown"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ")"
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "Left-bordered blockquote — fine for callouts on blog posts."
      }), "\n"]
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Unordered item"
      }), "\n"]
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "Ordered item"
      }), "\n"]
    }), "\n", _jsxs(_components.ul, {
      className: "contains-task-list",
      children: ["\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", "Todo"]
      }), "\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          checked: true,
          disabled: true
        }), " ", "Done"]
      }), "\n"]
    }), "\n", _jsxs(_components.table, {
      children: [_jsx(_components.thead, {
        children: _jsxs(_components.tr, {
          children: [_jsx(_components.th, {
            children: "Algorithm"
          }), _jsx(_components.th, {
            children: "Average"
          })]
        })
      }), _jsx(_components.tbody, {
        children: _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: "Merge Sort"
          }), _jsx(_components.td, {
            children: _jsxs(_components.span, {
              className: "katex",
              children: [_jsx(_components.span, {
                className: "katex-mathml",
                children: _jsx(_components.math, {
                  xmlns: "http://www.w3.org/1998/Math/MathML",
                  children: _jsxs(_components.semantics, {
                    children: [_jsxs(_components.mrow, {
                      children: [_jsx(_components.mi, {
                        children: "O"
                      }), _jsx(_components.mo, {
                        stretchy: "false",
                        children: "("
                      }), _jsx(_components.mi, {
                        children: "n"
                      }), _jsx(_components.mi, {
                        children: "log"
                      }), _jsx(_components.mo, {
                        children: "⁡"
                      }), _jsx(_components.mi, {
                        children: "n"
                      }), _jsx(_components.mo, {
                        stretchy: "false",
                        children: ")"
                      })]
                    }), _jsx(_components.annotation, {
                      encoding: "application/x-tex",
                      children: "O(n \\log n)"
                    })]
                  })
                })
              }), _jsx(_components.span, {
                className: "katex-html",
                "aria-hidden": "true",
                children: _jsxs(_components.span, {
                  className: "base",
                  children: [_jsx(_components.span, {
                    className: "strut",
                    style: {
                      height: "1em",
                      verticalAlign: "-0.25em"
                    }
                  }), _jsx(_components.span, {
                    className: "mord mathnormal",
                    style: {
                      marginRight: "0.0278em"
                    },
                    children: "O"
                  }), _jsx(_components.span, {
                    className: "mopen",
                    children: "("
                  }), _jsx(_components.span, {
                    className: "mord mathnormal",
                    children: "n"
                  }), _jsx(_components.span, {
                    className: "mspace",
                    style: {
                      marginRight: "0.1667em"
                    }
                  }), _jsxs(_components.span, {
                    className: "mop",
                    children: ["lo", _jsx(_components.span, {
                      style: {
                        marginRight: "0.0139em"
                      },
                      children: "g"
                    })]
                  }), _jsx(_components.span, {
                    className: "mspace",
                    style: {
                      marginRight: "0.1667em"
                    }
                  }), _jsx(_components.span, {
                    className: "mord mathnormal",
                    children: "n"
                  }), _jsx(_components.span, {
                    className: "mclose",
                    children: ")"
                  })]
                })
              })]
            })
          })]
        })
      })]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.del, {
        children: "deprecated"
      }), " · ", _jsx(_components.a, {
        href: "/blog/algorithms/sorting",
        children: "Internal link"
      }), " · ", _jsx(_components.a, {
        href: "https://example.com",
        children: "External"
      }), " · ", _jsx(_components.a, {
        href: "#standard-markdown",
        children: "Same-page heading"
      })]
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
      id: "pathvisualizer",
      children: _jsx(_components.code, {
        children: "PathVisualizer"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Curriculum graph from YAML. Inline ", _jsx(_components.code, {
        children: "script={\\"
      }), "...`}` often arrives empty after MDX serialization — use a registered wrapper (like below) or the ", _jsx(_components.a, {
        href: "/tools/path-visualizer",
        children: "playground"
      }), "."]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n",
        children: _jsx(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "AuthoringPathDemo"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " />"
            })]
          })
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsx(AuthoringPathDemo, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
      id: "annotations-handwritten-marks",
      children: "Annotations (handwritten marks)"
    }), "\n", _jsxs(_components.p, {
      children: ["Hand-drawn underlines, circles, boxes, and optional arrow sidenotes — powered by ", _jsx(_components.a, {
        href: "https://roughnotation.com",
        children: "rough-notation"
      }), ". Available on ", _jsx(_components.strong, {
        children: "blog and Learn"
      }), ". Attach a note with props on the same ", _jsx(_components.code, {
        children: ""
      }), " (", _jsx(_components.code, {
        children: "note=\"…\""
      }), " must be a ", _jsx(_components.strong, {
        children: "string"
      }), "). Marks and notes are always visible."]
    }), "\n", _jsxs(_components.table, {
      children: [_jsx(_components.thead, {
        children: _jsxs(_components.tr, {
          children: [_jsx(_components.th, {
            children: "Prop"
          }), _jsx(_components.th, {
            children: "Default"
          }), _jsx(_components.th, {
            children: "Values"
          })]
        })
      }), _jsxs(_components.tbody, {
        children: [_jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "type"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "underline"
            })
          }), _jsxs(_components.td, {
            children: [_jsx(_components.code, {
              children: "underline"
            }), " | ", _jsx(_components.code, {
              children: "circle"
            }), " | ", _jsx(_components.code, {
              children: "box"
            }), " | ", _jsx(_components.code, {
              children: "highlight"
            }), " | ", _jsx(_components.code, {
              children: "strike-through"
            }), " | ", _jsx(_components.code, {
              children: "crossed-off"
            }), " | ", _jsx(_components.code, {
              children: "bracket"
            })]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "color"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "#F08F87"
            })
          }), _jsxs(_components.td, {
            children: ["Preset name ", _jsx(_components.strong, {
              children: "or"
            }), " any CSS color"]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "note"
            })
          }), _jsx(_components.td, {
            children: "—"
          }), _jsx(_components.td, {
            children: "String sidenote body"
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "noteLayout"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "floating"
            })
          }), _jsxs(_components.td, {
            children: [_jsx(_components.code, {
              children: "floating"
            }), " | ", _jsx(_components.code, {
              children: "margin"
            }), " | ", _jsx(_components.code, {
              children: "inline"
            })]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "noteSide"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "right"
            })
          }), _jsxs(_components.td, {
            children: [_jsx(_components.code, {
              children: "left"
            }), " | ", _jsx(_components.code, {
              children: "right"
            }), " | ", _jsx(_components.code, {
              children: "top"
            }), " | ", _jsx(_components.code, {
              children: "bottom"
            }), " (floating)"]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "noteVariant"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "plain"
            })
          }), _jsxs(_components.td, {
            children: [_jsx(_components.code, {
              children: "plain"
            }), " | ", _jsx(_components.code, {
              children: "sticky"
            }), " | ", _jsx(_components.code, {
              children: "card"
            })]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "noteMaxWidth"
            })
          }), _jsx(_components.td, {
            children: "content width"
          }), _jsxs(_components.td, {
            children: [_jsx(_components.code, {
              children: "18rem"
            }), ", ", _jsx(_components.code, {
              children: "280px"
            }), ", ", _jsx(_components.code, {
              children: "280"
            }), ", … (single-line + ellipsis)"]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "noteColor"
            })
          }), _jsxs(_components.td, {
            children: ["same as ", _jsx(_components.code, {
              children: "color"
            })]
          }), _jsx(_components.td, {
            children: "Preset or CSS color for note + arrow"
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "arrow"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "true"
            })
          }), _jsx(_components.td, {
            children: "Show L-shaped connector"
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "brackets"
            })
          }), _jsx(_components.td, {
            children: "—"
          }), _jsxs(_components.td, {
            children: [_jsx(_components.code, {
              children: "left"
            }), " | ", _jsx(_components.code, {
              children: "right"
            }), " | ", _jsx(_components.code, {
              children: "top"
            }), " | ", _jsx(_components.code, {
              children: "bottom"
            }), " (or array) when ", _jsx(_components.code, {
              children: "type=\"bracket\""
            })]
          })]
        })]
      })]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Color presets"
      })
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: ["Semantic: ", _jsx(_components.code, {
          children: "default"
        }), " (", _jsx(_components.code, {
          children: "#F08F87"
        }), "), ", _jsx(_components.code, {
          children: "note"
        }), ", ", _jsx(_components.code, {
          children: "tip"
        }), ", ", _jsx(_components.code, {
          children: "info"
        }), ", ", _jsx(_components.code, {
          children: "warning"
        }), ", ", _jsx(_components.code, {
          children: "danger"
        }), ", ", _jsx(_components.code, {
          children: "success"
        }), ", ", _jsx(_components.code, {
          children: "accent"
        })]
      }), "\n", _jsxs(_components.li, {
        children: ["Tailwind names (", _jsx(_components.code, {
          children: "*-500"
        }), "): ", _jsx(_components.code, {
          children: "slate"
        }), ", ", _jsx(_components.code, {
          children: "gray"
        }), ", ", _jsx(_components.code, {
          children: "zinc"
        }), ", ", _jsx(_components.code, {
          children: "neutral"
        }), ", ", _jsx(_components.code, {
          children: "stone"
        }), ", ", _jsx(_components.code, {
          children: "red"
        }), ", ", _jsx(_components.code, {
          children: "orange"
        }), ", ", _jsx(_components.code, {
          children: "amber"
        }), ", ", _jsx(_components.code, {
          children: "yellow"
        }), ", ", _jsx(_components.code, {
          children: "lime"
        }), ", ", _jsx(_components.code, {
          children: "green"
        }), ", ", _jsx(_components.code, {
          children: "emerald"
        }), ", ", _jsx(_components.code, {
          children: "teal"
        }), ", ", _jsx(_components.code, {
          children: "cyan"
        }), ", ", _jsx(_components.code, {
          children: "sky"
        }), ", ", _jsx(_components.code, {
          children: "blue"
        }), ", ", _jsx(_components.code, {
          children: "indigo"
        }), ", ", _jsx(_components.code, {
          children: "violet"
        }), ", ", _jsx(_components.code, {
          children: "purple"
        }), ", ", _jsx(_components.code, {
          children: "fuchsia"
        }), ", ", _jsx(_components.code, {
          children: "pink"
        }), ", ", _jsx(_components.code, {
          children: "rose"
        })]
      }), "\n", _jsxs(_components.li, {
        children: ["Or any CSS color: ", _jsx(_components.code, {
          children: "#2563eb"
        }), ", ", _jsx(_components.code, {
          children: "rgb(14 165 233)"
        }), ", …"]
      }), "\n"]
    }), "\n", _jsx(_components.h3, {
      id: "stroke-types",
      children: "Stroke types"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "underline ·\ncircle ·\nbox ·\nhighlight ·\nstrike-through ·\ncrossed-off ·\nbracket left ·\nbracket both\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "underline"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">underline ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "circle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">circle ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "box"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">box ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "highlight"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">highlight ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "strike-through"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">strike-through ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "crossed-off"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">crossed-off ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "bracket"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " brackets"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "left"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">bracket left ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "bracket"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " brackets"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "{["
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "left"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ", "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "right"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "]}>bracket both"
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(Mark, {
        type: "underline",
        children: "underline"
      }), " ·\n", _jsx(Mark, {
        type: "circle",
        children: "circle"
      }), " ·\n", _jsx(Mark, {
        type: "box",
        children: "box"
      }), " ·\n", _jsx(Mark, {
        type: "highlight",
        children: "highlight"
      }), " ·\n", _jsx(Mark, {
        type: "strike-through",
        children: "strike-through"
      }), " ·\n", _jsx(Mark, {
        type: "crossed-off",
        children: "crossed-off"
      }), " ·\n", _jsx(Mark, {
        type: "bracket",
        brackets: "left",
        children: "bracket left"
      }), " ·\n", _jsx(Mark, {
        type: "bracket",
        brackets: ['left', 'right'],
        children: "bracket both"
      })]
    }), "\n", _jsx(_components.h3, {
      id: "color-presets--tailwind-names--css",
      children: "Color presets + Tailwind names + CSS"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "Default coral ·\ndefault ·\nnote ·\ntip ·\ninfo ·\nwarning ·\ndanger ·\nsuccess ·\naccent ·\nred ·\norange ·\namber ·\nyellow ·\nlime ·\ngreen ·\nemerald ·\nteal ·\ncyan ·\nsky ·\nblue ·\nindigo ·\nviolet ·\npurple ·\nfuchsia ·\npink ·\nrose ·\nslate ·\n#2563eb ·\nrgb()\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "Default <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">coral ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "default"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">default ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">note ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "tip"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">tip ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "info"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">info ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "warning"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">warning ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "danger"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">danger ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "success"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">success ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "accent"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">accent ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "red"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">red ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "orange"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">orange ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "amber"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">amber ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "yellow"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">yellow ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "lime"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">lime ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "green"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">green ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "emerald"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">emerald ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "teal"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">teal ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "cyan"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">cyan ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "sky"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">sky ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "blue"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">blue ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "indigo"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">indigo ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "violet"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">violet ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "purple"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">purple ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "fuchsia"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">fuchsia ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "pink"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">pink ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "rose"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">rose ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "slate"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">slate ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "#2563eb"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">#2563eb ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "rgb(14 165 233)"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">rgb()"
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Default ", _jsx(Mark, {
        children: "coral"
      }), " ·\n", _jsx(Mark, {
        color: "default",
        children: "default"
      }), " ·\n", _jsx(Mark, {
        color: "note",
        children: "note"
      }), " ·\n", _jsx(Mark, {
        color: "tip",
        children: "tip"
      }), " ·\n", _jsx(Mark, {
        color: "info",
        children: "info"
      }), " ·\n", _jsx(Mark, {
        color: "warning",
        children: "warning"
      }), " ·\n", _jsx(Mark, {
        color: "danger",
        children: "danger"
      }), " ·\n", _jsx(Mark, {
        color: "success",
        children: "success"
      }), " ·\n", _jsx(Mark, {
        color: "accent",
        children: "accent"
      }), " ·\n", _jsx(Mark, {
        color: "red",
        children: "red"
      }), " ·\n", _jsx(Mark, {
        color: "orange",
        children: "orange"
      }), " ·\n", _jsx(Mark, {
        color: "amber",
        children: "amber"
      }), " ·\n", _jsx(Mark, {
        color: "yellow",
        children: "yellow"
      }), " ·\n", _jsx(Mark, {
        color: "lime",
        children: "lime"
      }), " ·\n", _jsx(Mark, {
        color: "green",
        children: "green"
      }), " ·\n", _jsx(Mark, {
        color: "emerald",
        children: "emerald"
      }), " ·\n", _jsx(Mark, {
        color: "teal",
        children: "teal"
      }), " ·\n", _jsx(Mark, {
        color: "cyan",
        children: "cyan"
      }), " ·\n", _jsx(Mark, {
        color: "sky",
        children: "sky"
      }), " ·\n", _jsx(Mark, {
        color: "blue",
        children: "blue"
      }), " ·\n", _jsx(Mark, {
        color: "indigo",
        children: "indigo"
      }), " ·\n", _jsx(Mark, {
        color: "violet",
        children: "violet"
      }), " ·\n", _jsx(Mark, {
        color: "purple",
        children: "purple"
      }), " ·\n", _jsx(Mark, {
        color: "fuchsia",
        children: "fuchsia"
      }), " ·\n", _jsx(Mark, {
        color: "pink",
        children: "pink"
      }), " ·\n", _jsx(Mark, {
        color: "rose",
        children: "rose"
      }), " ·\n", _jsx(Mark, {
        color: "slate",
        children: "slate"
      }), " ·\n", _jsx(Mark, {
        color: "#2563eb",
        children: "#2563eb"
      }), " ·\n", _jsx(Mark, {
        color: "rgb(14 165 233)",
        children: "rgb()"
      })]
    }), "\n", _jsx(_components.h3, {
      id: "type--color-matrix",
      children: "Type × color matrix"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "underline tip ·\ncircle warning ·\nbox info ·\nhighlight accent ·\nstrike danger ·\ncrossed note ·\nbracket success ·\ncircle hex\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "underline"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "tip"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">underline tip ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "circle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "warning"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">circle warning ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "box"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "info"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">box info ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "highlight"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "accent"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">highlight accent ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "strike-through"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "danger"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">strike danger ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "crossed-off"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">crossed note ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "bracket"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " brackets"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "right"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "success"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">bracket success ·"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "circle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "#F08F87"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">circle hex"
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(Mark, {
        type: "underline",
        color: "tip",
        children: "underline tip"
      }), " ·\n", _jsx(Mark, {
        type: "circle",
        color: "warning",
        children: "circle warning"
      }), " ·\n", _jsx(Mark, {
        type: "box",
        color: "info",
        children: "box info"
      }), " ·\n", _jsx(Mark, {
        type: "highlight",
        color: "accent",
        children: "highlight accent"
      }), " ·\n", _jsx(Mark, {
        type: "strike-through",
        color: "danger",
        children: "strike danger"
      }), " ·\n", _jsx(Mark, {
        type: "crossed-off",
        color: "note",
        children: "crossed note"
      }), " ·\n", _jsx(Mark, {
        type: "bracket",
        brackets: "right",
        color: "success",
        children: "bracket success"
      }), " ·\n", _jsx(Mark, {
        type: "circle",
        color: "#F08F87",
        children: "circle hex"
      })]
    }), "\n", _jsxs(_components.h3, {
      id: "sidenote-layouts-notelayout",
      children: ["Sidenote layouts (", _jsx(_components.code, {
        children: "noteLayout"
      }), ")"]
    }), "\n", _jsx(_components.p, {
      children: "Leave room in the paragraph so floating / margin notes do not collide."
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "Floating (default): a player makes a\nmove\nin chess.\n\nMargin (desktop): the\n\n  consistency boundary\n\nmatters.\n\nInline: the\n\n  agent–environment loop\n\nis central.\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "Floating (default): a player makes a"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "underline"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "RL?"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteLayout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "floating"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteSide"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "right"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">move"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "in chess."
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "Margin (desktop): the"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "circle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "CAP says pick two."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteLayout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "margin"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteVariant"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "card"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "info"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  consistency boundary"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "matters."
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "Inline: the"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "underline"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Drawn after the sentence."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteLayout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "inline"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "tip"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  agent–environment loop"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "is central."
            })
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Floating (default): a player makes a ", _jsx(Mark, {
        type: "underline",
        note: "RL?",
        noteLayout: "floating",
        noteSide: "right",
        children: "move"
      }), " in chess."]
    }), "\n", _jsxs(_components.p, {
      children: ["Margin (desktop): the ", _jsx(Mark, {
        type: "circle",
        note: "CAP says pick two.",
        noteLayout: "margin",
        noteVariant: "card",
        color: "info",
        children: "consistency boundary"
      }), " matters."]
    }), "\n", _jsxs(_components.p, {
      children: ["Inline: the ", _jsx(Mark, {
        type: "underline",
        note: "Drawn after the sentence.",
        noteLayout: "inline",
        color: "tip",
        children: "agent–environment loop"
      }), " is central."]
    }), "\n", _jsxs(_components.h3, {
      id: "floating-noteside",
      children: ["Floating ", _jsx(_components.code, {
        children: "noteSide"
      })]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "Right:\nanchor\n· Left:\nanchor\n· Top:\nanchor\n· Bottom:\nanchor\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "Right:"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "→ right"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteLayout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "floating"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteSide"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "right"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">anchor"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "· Left:"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "← left"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteLayout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "floating"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteSide"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "left"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">anchor"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "· Top:"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "↑ top"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteLayout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "floating"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteSide"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "top"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">anchor"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "· Bottom:"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "↓ bottom"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteLayout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "floating"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteSide"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "bottom"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">anchor"
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Right: ", _jsx(Mark, {
        note: "→ right",
        noteLayout: "floating",
        noteSide: "right",
        children: "anchor"
      }), "\n· Left: ", _jsx(Mark, {
        note: "← left",
        noteLayout: "floating",
        noteSide: "left",
        children: "anchor"
      }), "\n· Top: ", _jsx(Mark, {
        note: "↑ top",
        noteLayout: "floating",
        noteSide: "top",
        children: "anchor"
      }), "\n· Bottom: ", _jsx(Mark, {
        note: "↓ bottom",
        noteLayout: "floating",
        noteSide: "bottom",
        children: "anchor"
      })]
    }), "\n", _jsxs(_components.h3, {
      id: "note-variants-notevariant",
      children: ["Note variants (", _jsx(_components.code, {
        children: "noteVariant"
      }), ")"]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "Plain:\ntext\n· Sticky:\nevents\n· Card:\nboundary\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "Plain:"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "underline"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "plain ink"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteVariant"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "plain"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "tip"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">text"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "· Sticky:"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "underline"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Outbox first."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteVariant"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "sticky"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "warning"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">events"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "· Card:"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "circle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "CAP says pick two."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteVariant"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "card"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "info"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">boundary"
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Plain: ", _jsx(Mark, {
        type: "underline",
        note: "plain ink",
        noteVariant: "plain",
        color: "tip",
        children: "text"
      }), "\n· Sticky: ", _jsx(Mark, {
        type: "underline",
        note: "Outbox first.",
        noteVariant: "sticky",
        color: "warning",
        children: "events"
      }), "\n· Card: ", _jsx(Mark, {
        type: "circle",
        note: "CAP says pick two.",
        noteVariant: "card",
        color: "info",
        children: "boundary"
      })]
    }), "\n", _jsxs(_components.h3, {
      id: "notemaxwidth-notecolor-arrowfalse",
      children: [_jsx(_components.code, {
        children: "noteMaxWidth"
      }), ", ", _jsx(_components.code, {
        children: "noteColor"
      }), ", ", _jsx(_components.code, {
        children: "arrow={false}"
      })]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "Capped:\n\n  move\n\n· Separate note ink:\nstroke red\n· No arrow:\nboxed\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "Capped:"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "underline"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "can we say that is supervised learning or unsupervised learning?"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  noteMaxWidth"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "12rem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  noteVariant"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "card"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "warning"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  move"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "· Separate note ink:"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "circle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "green note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "danger"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteColor"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "tip"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">stroke red"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "· No arrow:"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "box"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "no arrow"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " arrow"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "{"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#BD93F9"
              },
              children: "false"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "} "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "accent"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">boxed"
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Capped: ", _jsx(Mark, {
        type: "underline",
        note: "can we say that is supervised learning or unsupervised learning?",
        noteMaxWidth: "12rem",
        noteVariant: "card",
        color: "warning",
        children: "move"
      }), "\n· Separate note ink: ", _jsx(Mark, {
        type: "circle",
        note: "green note",
        color: "danger",
        noteColor: "tip",
        children: "stroke red"
      }), "\n· No arrow: ", _jsx(Mark, {
        type: "box",
        note: "no arrow",
        arrow: false,
        color: "accent",
        children: "boxed"
      })]
    }), "\n", _jsx(_components.h3, {
      id: "combined-prose-example",
      children: "Combined prose example"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "A master chess player makes a\nmove\n— is that reinforcement learning? It differs from\n\n  supervised learning\n\nand\n\n  unsupervised learning\n.\nDomain\nevents\nneed an outbox.\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "A master chess player makes a"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "underline"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "RL?"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteLayout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "floating"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteSide"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "right"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">move"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "— is that reinforcement learning? It differs from"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "circle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "labels in, labels out"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteLayout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "floating"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteVariant"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "card"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "info"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  supervised learning"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "and"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "circle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "structure without labels"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteLayout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "floating"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteVariant"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "card"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "accent"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  unsupervised learning"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "."
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "Domain"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Mark"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " type"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "underline"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Outbox first."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " noteVariant"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "sticky"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " color"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "warning"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">events"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "need an outbox."
            })
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["A master chess player makes a ", _jsx(Mark, {
        type: "underline",
        note: "RL?",
        noteLayout: "floating",
        noteSide: "right",
        children: "move"
      }), " — is that reinforcement learning? It differs from ", _jsx(Mark, {
        type: "circle",
        note: "labels in, labels out",
        noteLayout: "floating",
        noteVariant: "card",
        color: "info",
        children: "supervised learning"
      }), " and ", _jsx(Mark, {
        type: "circle",
        note: "structure without labels",
        noteLayout: "floating",
        noteVariant: "card",
        color: "accent",
        children: "unsupervised learning"
      }), ". Domain ", _jsx(Mark, {
        type: "underline",
        note: "Outbox first.",
        noteVariant: "sticky",
        color: "warning",
        children: "events"
      }), " need an outbox."]
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
      id: "checklist-for-a-new-post",
      children: "Checklist for a new post"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsxs(_components.li, {
        children: ["Create ", _jsx(_components.code, {
          children: "content/blog//.mdx"
        }), "."]
      }), "\n", _jsxs(_components.li, {
        children: ["Fill ", _jsx(_components.code, {
          children: "title"
        }), ", ", _jsx(_components.code, {
          children: "date"
        }), ", ", _jsx(_components.code, {
          children: "excerpt"
        }), ", ", _jsx(_components.code, {
          children: "tags"
        }), " (+ cover only if you have a real image)."]
      }), "\n", _jsxs(_components.li, {
        children: ["Start body at ", _jsx(_components.code, {
          children: "##"
        }), "."]
      }), "\n", _jsxs(_components.li, {
        children: ["Use ", _jsx(_components.code, {
          children: "CodeTabs"
        }), " for related files; transformers for diffs."]
      }), "\n", _jsxs(_components.li, {
        children: ["Preview at ", _jsx(_components.code, {
          children: "/blog//"
        }), "."]
      }), "\n"]
    }), "\n", _jsx(_components.h3, {
      id: "do-not",
      children: "Do not"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Import React components in the post."
      }), "\n", _jsxs(_components.li, {
        children: ["Use deprecated ", _jsx(_components.code, {
          children: "MultiFileCodeBlock"
        }), "."]
      }), "\n", _jsx(_components.li, {
        children: "Repeat the frontmatter title as an H1."
      }), "\n", _jsxs(_components.li, {
        children: ["Invent ignored frontmatter (", _jsx(_components.code, {
          children: "author"
        }), ", ", _jsx(_components.code, {
          children: "draft"
        }), ", …)."]
      }), "\n", _jsxs(_components.li, {
        children: ["Hotlink image hosts not in ", _jsx(_components.code, {
          children: "next.config.ts"
        }), "."]
      }), "\n"]
    }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, {
      id: "learn-docs-contentlearn",
      children: ["Learn docs (", _jsx(_components.code, {
        children: "content/learn/"
      }), ")"]
    }), "\n", _jsxs(_components.p, {
      children: ["Study materials live under ", _jsx(_components.code, {
        children: "content/learn/"
      }), " and publish at ", _jsx(_components.code, {
        children: "/learn/..."
      }), ". They are ", _jsx(_components.strong, {
        children: "not"
      }), " blog posts — the blog crawler skips ", _jsx(_components.code, {
        children: "content/learn/"
      }), ". Browse courses from ", _jsx(_components.a, {
        href: "/learn",
        children: "/learn"
      }), "."]
    }), "\n", _jsxs(_components.table, {
      children: [_jsx(_components.thead, {
        children: _jsxs(_components.tr, {
          children: [_jsx(_components.th, {
            children: "File"
          }), _jsx(_components.th, {
            children: "URL"
          })]
        })
      }), _jsxs(_components.tbody, {
        children: [_jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "content/learn/aspire-dotnet/index.mdx"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "/learn/aspire-dotnet"
            })
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "content/learn/aspire-dotnet/02-apphost/01-resources.mdx"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "/learn/aspire-dotnet/apphost/resources"
            })
          })]
        })]
      })]
    }), "\n", _jsxs(_components.p, {
      children: ["Numeric folder/file prefixes (", _jsx(_components.code, {
        children: "01-overview"
      }), ") control sort order only; they are stripped from URLs."]
    }), "\n", _jsx(_components.h3, {
      id: "learn-frontmatter",
      children: "Learn frontmatter"
    }), "\n", _jsxs(_components.p, {
      children: ["Blog and Learn share the same baseline fields (", _jsx(_components.code, {
        children: "title"
      }), ", ", _jsx(_components.code, {
        children: "excerpt"
      }), ", ", _jsx(_components.code, {
        children: "tags"
      }), "). Course ", _jsx(_components.strong, {
        children: "roots"
      }), " (", _jsx(_components.code, {
        children: "content/learn//index.mdx"
      }), ") drive hub filtering — nested lessons do not need ", _jsx(_components.code, {
        children: "tags"
      }), "."]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Course root"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "yaml",
        "data-theme": "github-light dracula",
        __rawstring__: "---\ntitle: 'Domain-Driven Design'\nexcerpt: 'Refactor an anemic rental model into a rich domain with .NET Minimal API.'\ntags: ['ddd', 'domain-driven-design', 'dotnet']\nicon: 'Layers3'\nbadge: 'New'\n---\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "yaml",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#F8F8F2"
              },
              children: "---"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#22863A",
                "--shiki-dark": "#8BE9FD"
              },
              children: "title"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: " '"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Domain-Driven Design"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#22863A",
                "--shiki-dark": "#8BE9FD"
              },
              children: "excerpt"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: " '"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Refactor an anemic rental model into a rich domain with .NET Minimal API."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#22863A",
                "--shiki-dark": "#8BE9FD"
              },
              children: "tags"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " ["
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "ddd"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ", "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "domain-driven-design"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ", "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "dotnet"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "]"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#22863A",
                "--shiki-dark": "#8BE9FD"
              },
              children: "icon"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: " '"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Layers3"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#22863A",
                "--shiki-dark": "#8BE9FD"
              },
              children: "badge"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: " '"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "New"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#F8F8F2"
              },
              children: "---"
            })
          })]
        })
      })
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.strong, {
        children: "Nested lesson"
      }), " (tags optional; hub ignores them)"]
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "yaml",
        "data-theme": "github-light dracula",
        __rawstring__: "---\ntitle: 'Declaring Resources'\nexcerpt: 'Add databases and service references in AppHost.'\nicon: 'Database'\nbadge: 'New'\n---\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "yaml",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#F8F8F2"
              },
              children: "---"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#22863A",
                "--shiki-dark": "#8BE9FD"
              },
              children: "title"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: " '"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Declaring Resources"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#22863A",
                "--shiki-dark": "#8BE9FD"
              },
              children: "excerpt"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: " '"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Add databases and service references in AppHost."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#22863A",
                "--shiki-dark": "#8BE9FD"
              },
              children: "icon"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: " '"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Database"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#22863A",
                "--shiki-dark": "#8BE9FD"
              },
              children: "badge"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: " '"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "New"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#F8F8F2"
              },
              children: "---"
            })
          })]
        })
      })
    }), "\n", _jsxs(_components.table, {
      children: [_jsx(_components.thead, {
        children: _jsxs(_components.tr, {
          children: [_jsx(_components.th, {
            children: "Field"
          }), _jsx(_components.th, {
            children: "Course root"
          }), _jsx(_components.th, {
            children: "Nested lesson"
          }), _jsx(_components.th, {
            children: "Notes"
          })]
        })
      }), _jsxs(_components.tbody, {
        children: [_jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "title"
            })
          }), _jsx(_components.td, {
            children: "required"
          }), _jsx(_components.td, {
            children: "required"
          }), _jsx(_components.td, {
            children: "Page and sidebar label"
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "excerpt"
            })
          }), _jsx(_components.td, {
            children: "required"
          }), _jsx(_components.td, {
            children: "optional"
          }), _jsxs(_components.td, {
            children: ["Short blurb; legacy ", _jsx(_components.code, {
              children: "description"
            }), " still works via loader alias"]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "tags"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.strong, {
              children: "required"
            })
          }), _jsx(_components.td, {
            children: "omit"
          }), _jsxs(_components.td, {
            children: ["Hub filters/groups by ", _jsx(_components.strong, {
              children: "course-root"
            }), " tags only"]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "date"
            })
          }), _jsx(_components.td, {
            children: "recommended"
          }), _jsx(_components.td, {
            children: "omit OK"
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "YYYY-MM-DD"
            })
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "icon"
            })
          }), _jsx(_components.td, {
            children: "optional"
          }), _jsx(_components.td, {
            children: "optional"
          }), _jsxs(_components.td, {
            children: ["Lucide name from the Learn set (see gallery below). Unknown → ", _jsx(_components.code, {
              children: "BookOpen"
            }), "."]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "badge"
            })
          }), _jsx(_components.td, {
            children: "optional"
          }), _jsx(_components.td, {
            children: "optional"
          }), _jsxs(_components.td, {
            children: [_jsx(_components.code, {
              children: "New"
            }), " / ", _jsx(_components.code, {
              children: "Updated"
            }), " pill"]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "order"
            })
          }), _jsx(_components.td, {
            children: "optional"
          }), _jsx(_components.td, {
            children: "optional"
          }), _jsx(_components.td, {
            children: "Sort override"
          })]
        }), _jsxs(_components.tr, {
          children: [_jsxs(_components.td, {
            children: [_jsx(_components.code, {
              children: "coverImage"
            }), " / ", _jsx(_components.code, {
              children: "coverImageAlt"
            })]
          }), _jsx(_components.td, {
            children: "optional"
          }), _jsx(_components.td, {
            children: "omit OK"
          }), _jsx(_components.td, {
            children: "Rarely used on Learn"
          })]
        })]
      })]
    }), "\n", _jsxs(_components.p, {
      children: ["No need to invent a third summary field — prefer ", _jsx(_components.code, {
        children: "excerpt"
      }), "; the loader treats ", _jsx(_components.code, {
        children: "excerpt ?? description"
      }), " as the summary. Start body at ", _jsx(_components.code, {
        children: "##"
      }), "."]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.strong, {
        children: "Learn frontmatter icons"
      }), " (hub cards, course sidebar, home featured courses) — same allow-list:"]
    }), "\n", _jsx(IconCatalog, {
      set: "learn"
    }), "\n", _jsx(_components.h3, {
      id: "learn-only-mdx-components",
      children: "Learn-only MDX components"
    }), "\n", _jsxs(_components.p, {
      children: ["Learn uses the same ", _jsx(_components.strong, {
        children: _jsx(_components.code, {
          children: "CodeBlock"
        })
      }), " card shell as blog posts. Learn-specific wrappers:"]
    }), "\n", _jsxs(_components.table, {
      children: [_jsx(_components.thead, {
        children: _jsxs(_components.tr, {
          children: [_jsx(_components.th, {
            children: "Component"
          }), _jsx(_components.th, {
            children: "Use"
          })]
        })
      }), _jsxs(_components.tbody, {
        children: [_jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "ComponentPreview"
            })
          }), _jsxs(_components.td, {
            children: ["Preview | Code tabs. Props: ", _jsx(_components.code, {
              children: "replay"
            }), ", ", _jsx(_components.code, {
              children: "flush"
            }), ", ", _jsx(_components.code, {
              children: "previewClassName"
            }), ", ", _jsx(_components.code, {
              children: "align"
            }), ". Tab chrome sits ", _jsx(_components.strong, {
              children: "above"
            }), " the body so code is not double-wrapped."]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "Callout"
            })
          }), _jsxs(_components.td, {
            children: [_jsx(_components.code, {
              children: "variant"
            }), ": ", _jsx(_components.code, {
              children: "note"
            }), " | ", _jsx(_components.code, {
              children: "tip"
            }), " | ", _jsx(_components.code, {
              children: "warning"
            }), " | ", _jsx(_components.code, {
              children: "dont"
            }), "; optional ", _jsx(_components.code, {
              children: "title"
            })]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsxs(_components.td, {
            children: [_jsx(_components.code, {
              children: "ItemList"
            }), " + ", _jsx(_components.code, {
              children: "ListItem"
            }), " + ", _jsx(_components.code, {
              children: "ListTitle"
            }), " + ", _jsx(_components.code, {
              children: "ListSubtitle"
            }), " + ", _jsx(_components.code, {
              children: "LineItem"
            })]
          }), _jsxs(_components.td, {
            children: ["Icon-led list card. ", _jsx(_components.code, {
              children: "ItemList"
            }), " ", _jsx(_components.code, {
              children: "layout"
            }), ": ", _jsx(_components.code, {
              children: "stack"
            }), " (default) | ", _jsx(_components.code, {
              children: "2col"
            }), ". ", _jsx(_components.code, {
              children: "ListItem"
            }), ": optional ", _jsx(_components.code, {
              children: "icon"
            }), " (ItemList set). Nested ", _jsx(_components.code, {
              children: "LineItem"
            }), "s indent."]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "IconCatalog"
            })
          }), _jsxs(_components.td, {
            children: ["Visual allow-list. ", _jsx(_components.code, {
              children: "set"
            }), ": ", _jsx(_components.code, {
              children: "item-list"
            }), " | ", _jsx(_components.code, {
              children: "learn"
            })]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "DocsFileTabs"
            })
          }), _jsxs(_components.td, {
            children: ["Multi-file code — prefer over blog ", _jsx(_components.code, {
              children: "CodeTabs"
            }), " on Learn"]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsxs(_components.td, {
            children: [_jsx(_components.code, {
              children: "InstallTabs"
            }), " + ", _jsx(_components.code, {
              children: "InstallTab"
            })]
          }), _jsx(_components.td, {
            children: "CLI | Manual install sections"
          })]
        }), _jsxs(_components.tr, {
          children: [_jsxs(_components.td, {
            children: [_jsx(_components.code, {
              children: "Guide"
            }), " + ", _jsx(_components.code, {
              children: "GuideStep"
            })]
          }), _jsx(_components.td, {
            children: "Step-by-step tutorials"
          })]
        }), _jsxs(_components.tr, {
          children: [_jsxs(_components.td, {
            children: [_jsx(_components.code, {
              children: "Steps"
            }), " + ", _jsx(_components.code, {
              children: "Step"
            })]
          }), _jsxs(_components.td, {
            children: ["Compact numbered steps inside ", _jsx(_components.code, {
              children: "InstallTabs"
            }), " manual tab"]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "CommandBlock"
            })
          }), _jsx(_components.td, {
            children: "pnpm/npm/yarn/bun commands"
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "Mermaid"
            })
          }), _jsxs(_components.td, {
            children: [_jsx(_components.code, {
              children: "```mermaid"
            }), " fence or ", _jsx(_components.code, {
              children: "chart"
            }), " prop"]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "FlowDiagram"
            })
          }), _jsxs(_components.td, {
            children: ["Architecture graphs (", _jsx(_components.code, {
              children: "script"
            }), " YAML/JSON)"]
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "PathVisualizer"
            })
          }), _jsx(_components.td, {
            children: "Curriculum YAML graphs"
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "Mark"
            })
          }), _jsxs(_components.td, {
            children: ["Handwritten underline/circle/box + optional ", _jsx(_components.code, {
              children: "note"
            }), " arrow sidenote"]
          })]
        })]
      })]
    }), "\n", _jsxs(_components.p, {
      children: ["Do ", _jsx(_components.strong, {
        children: "not"
      }), " use blog-only names ", _jsx(_components.code, {
        children: "CodeFrame"
      }), ", ", _jsx(_components.code, {
        children: "CodeTabs"
      }), ", or ", _jsx(_components.code, {
        children: "MultiFileCodeBlock"
      }), " on Learn pages. Prefer ", _jsx(_components.code, {
        children: "DocsFileTabs"
      }), " over ", _jsx(_components.code, {
        children: "CodeTabs"
      }), "."]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.code, {
        children: "Button"
      }), ", ", _jsx(_components.code, {
        children: "Card"
      }), ", ", _jsx(_components.code, {
        children: "Badge"
      }), ", ", _jsx(_components.code, {
        children: "Input"
      }), " are available inside ", _jsx(_components.code, {
        children: "ComponentPreview"
      }), "."]
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
      id: "callout",
      children: _jsx(_components.code, {
        children: "Callout"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n  Supporting detail without changing the lesson flow.\n\n\n\n  Animate `x` / `y` / `scale` — not `left` / `width` — for 60fps UI motion.\n\n\n\n  Respect `prefers-reduced-motion` before autoplaying scroll demos.\n\n\n\n  `ease-in` starts slow. On a 200ms menu it feels unresponsive.\n\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Callout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " variant"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " title"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Note"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  Supporting detail without changing the lesson flow."
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Callout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " variant"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "tip"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " title"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Prefer transforms"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  Animate "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#50FA7B"
              },
              children: "x"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " / "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#50FA7B"
              },
              children: "y"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " / "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#50FA7B"
              },
              children: "scale"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " — not "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#50FA7B"
              },
              children: "left"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " / "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#50FA7B"
              },
              children: "width"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " — for 60fps UI motion."
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Callout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " variant"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "warning"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " title"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Reduced motion"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  Respect "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#50FA7B"
              },
              children: "prefers-reduced-motion"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " before autoplaying scroll demos."
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Callout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " variant"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "dont"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " title"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Do not ease-in on dropdowns"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "  `"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#50FA7B"
              },
              children: "ease-in"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " starts slow. On a 200ms menu it feels unresponsive."
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsx(Callout, {
      variant: "note",
      title: "Note",
      children: _jsx(_components.p, {
        children: "Supporting detail without changing the lesson flow."
      })
    }), "\n", _jsx(Callout, {
      variant: "tip",
      title: "Prefer transforms",
      children: _jsxs(_components.p, {
        children: ["Animate ", _jsx(_components.code, {
          children: "x"
        }), " / ", _jsx(_components.code, {
          children: "y"
        }), " / ", _jsx(_components.code, {
          children: "scale"
        }), " — not ", _jsx(_components.code, {
          children: "left"
        }), " / ", _jsx(_components.code, {
          children: "width"
        }), " — for 60fps UI motion."]
      })
    }), "\n", _jsx(Callout, {
      variant: "warning",
      title: "Reduced motion",
      children: _jsxs(_components.p, {
        children: ["Respect ", _jsx(_components.code, {
          children: "prefers-reduced-motion"
        }), " before autoplaying scroll demos."]
      })
    }), "\n", _jsx(Callout, {
      variant: "dont",
      title: "Do not ease-in on dropdowns",
      children: _jsxs(_components.p, {
        children: [_jsx(_components.code, {
          children: "ease-in"
        }), " starts slow. On a 200ms menu it feels unresponsive."]
      })
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
      id: "itemlist",
      children: _jsx(_components.code, {
        children: "ItemList"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Icon-led rows in one card. ", _jsxs(_components.strong, {
        children: ["No ", _jsx(_components.code, {
          children: "title="
        }), " / ", _jsx(_components.code, {
          children: "subtitle="
        }), " props"]
      }), " — use ", _jsx(_components.code, {
        children: "ListTitle"
      }), ", ", _jsx(_components.code, {
        children: "ListSubtitle"
      }), ", and nestable ", _jsx(_components.code, {
        children: "LineItem"
      }), " children (same idea as ", _jsx(_components.code, {
        children: "Callout"
      }), " body content)."]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.code, {
        children: "ItemList"
      }), " ", _jsx(_components.code, {
        children: "layout"
      }), ": ", _jsx(_components.code, {
        children: "stack"
      }), " (default, single column) or ", _jsx(_components.code, {
        children: "2col"
      }), " (two-column grid from ", _jsx(_components.code, {
        children: "sm"
      }), " up)."]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.code, {
        children: "ListItem"
      }), " ", _jsx(_components.code, {
        children: "icon"
      }), " is a Lucide name from the ItemList set (unknown → ", _jsx(_components.code, {
        children: "BookOpen"
      }), "):"]
    }), "\n", _jsx(IconCatalog, {
      set: "item-list"
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.strong, {
        children: "Source"
      }), " (", _jsx(_components.code, {
        children: "layout=\"stack\""
      }), ", default)"]
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n  \n    Part A — Tracking and experiments\n    Topics 3, 4, 5, 6, 7, and 13\n    \n      Experiments, runs, parameters, metrics, artifacts, logging functions,\n      autologging, concurrent runs, tracking servers, and the Python client.\n    \n    \n      i.e. `mlflow.log_param()` and `mlflow.log_params()`\n    \n  \n\n  \n    Part B — Models and evaluation\n    Topics 8, 9, and 10\n    \n      Log and load models, custom Python models, preprocessing pipelines,\n      model signatures, input examples, evaluation metrics, and model comparisons.\n    \n  \n\n  \n    Part C — Registry and deployment lifecycle\n    Topic 11\n    \n      Register a trained model, create versions, add aliases, load the selected\n      version, and promote a model for production use.\n    \n  \n\n  \n    Part D — Reproducible projects and commands\n    Topics 12 and 14\n    \n      Package training code with MLproject\n      Run named entry points, pass parameters, and use the MLflow CLI.\n    \n  \n\n  \n    Part E — AWS end-to-end project\n    Topic 15\n    \n      Store artifacts in S3, use a remote tracking server backed by a database,\n      configure IAM permissions, and connect training, registry, and deployment workflows.\n    \n  \n\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ItemList"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " icon"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "FlaskConical"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListTitle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Part A — Tracking and experiments"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListSubtitle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Topics 3, 4, 5, 6, 7, and 13"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "LineItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      Experiments, runs, parameters, metrics, artifacts, logging functions,"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      autologging, concurrent runs, tracking servers, and the Python client."
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "LineItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      i.e. "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#50FA7B"
              },
              children: "mlflow.log_param()"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " and "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#50FA7B"
              },
              children: "mlflow.log_params()"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  "
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " icon"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Boxes"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListTitle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Part B — Models and evaluation"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListSubtitle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Topics 8, 9, and 10"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "LineItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      Log and load models, custom Python models, preprocessing pipelines,"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      model signatures, input examples, evaluation metrics, and model comparisons."
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  "
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " icon"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Package"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListTitle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Part C — Registry and deployment lifecycle"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListSubtitle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Topic 11"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "LineItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      Register a trained model, create versions, add aliases, load the selected"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      version, and promote a model for production use."
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  "
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " icon"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Terminal"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListTitle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Part D — Reproducible projects and commands"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListSubtitle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Topics 12 and 14"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "LineItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      Package training code with MLproject"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "LineItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Run named entry points, pass parameters, and use the MLflow CLI."
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  "
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " icon"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Cloud"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListTitle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Part E — AWS end-to-end project"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListSubtitle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Topic 15"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "LineItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      Store artifacts in S3, use a remote tracking server backed by a database,"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      configure IAM permissions, and connect training, registry, and deployment workflows."
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(ItemList, {
      children: [_jsxs(ListItem, {
        icon: "FlaskConical",
        children: [_jsx(ListTitle, {
          children: "Part A — Tracking and experiments"
        }), _jsx(ListSubtitle, {
          children: "Topics 3, 4, 5, 6, 7, and 13"
        }), _jsx(LineItem, {
          children: _jsx(_components.p, {
            children: "Experiments, runs, parameters, metrics, artifacts, logging functions,\nautologging, concurrent runs, tracking servers, and the Python client."
          })
        }), _jsx(LineItem, {
          children: _jsxs(_components.p, {
            children: ["i.e. ", _jsx(_components.code, {
              children: "mlflow.log_param()"
            }), " and ", _jsx(_components.code, {
              children: "mlflow.log_params()"
            })]
          })
        })]
      }), _jsxs(ListItem, {
        icon: "Boxes",
        children: [_jsx(ListTitle, {
          children: "Part B — Models and evaluation"
        }), _jsx(ListSubtitle, {
          children: "Topics 8, 9, and 10"
        }), _jsx(LineItem, {
          children: _jsx(_components.p, {
            children: "Log and load models, custom Python models, preprocessing pipelines,\nmodel signatures, input examples, evaluation metrics, and model comparisons."
          })
        })]
      }), _jsxs(ListItem, {
        icon: "Package",
        children: [_jsx(ListTitle, {
          children: "Part C — Registry and deployment lifecycle"
        }), _jsx(ListSubtitle, {
          children: "Topic 11"
        }), _jsx(LineItem, {
          children: _jsx(_components.p, {
            children: "Register a trained model, create versions, add aliases, load the selected\nversion, and promote a model for production use."
          })
        })]
      }), _jsxs(ListItem, {
        icon: "Terminal",
        children: [_jsx(ListTitle, {
          children: "Part D — Reproducible projects and commands"
        }), _jsx(ListSubtitle, {
          children: "Topics 12 and 14"
        }), _jsx(LineItem, {
          children: _jsxs(_components.p, {
            children: ["Package training code with MLproject\n", _jsx(LineItem, {
              children: "Run named entry points, pass parameters, and use the MLflow CLI."
            })]
          })
        })]
      }), _jsxs(ListItem, {
        icon: "Cloud",
        children: [_jsx(ListTitle, {
          children: "Part E — AWS end-to-end project"
        }), _jsx(ListSubtitle, {
          children: "Topic 15"
        }), _jsx(LineItem, {
          children: _jsx(_components.p, {
            children: "Store artifacts in S3, use a remote tracking server backed by a database,\nconfigure IAM permissions, and connect training, registry, and deployment workflows."
          })
        })]
      })]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.strong, {
        children: "Source"
      }), " (", _jsx(_components.code, {
        children: "layout=\"2col\""
      }), ")"]
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n  \n    Experiments\n    \n      A container for related runs — group and compare training attempts for one objective.\n    \n  \n  \n    Runs\n    \n      One execution of a workflow: parameters, metrics, tags, and artifacts.\n    \n  \n  \n    Nested runs\n    \n      Child runs under a parent — useful for sweeps and model comparison.\n    \n  \n  \n    Tracking server\n    \n      Remote store for params, metrics, and artifacts across machines.\n    \n  \n\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ItemList"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " layout"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "2col"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " icon"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Boxes"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListTitle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Experiments"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "LineItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      A container for related runs — group and compare training attempts for one objective."
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " icon"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Package"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListTitle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Runs"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "LineItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      One execution of a workflow: parameters, metrics, tags, and artifacts."
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " icon"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Layers"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListTitle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Nested runs"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "LineItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      Child runs under a parent — useful for sweeps and model comparison."
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " icon"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Workflow"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ListTitle"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Tracking server"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "LineItem"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      Remote store for params, metrics, and artifacts across machines."
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(ItemList, {
      layout: "2col",
      children: [_jsxs(ListItem, {
        icon: "Boxes",
        children: [_jsx(ListTitle, {
          children: "Experiments"
        }), _jsx(LineItem, {
          children: _jsx(_components.p, {
            children: "A container for related runs — group and compare training attempts for one objective."
          })
        })]
      }), _jsxs(ListItem, {
        icon: "Package",
        children: [_jsx(ListTitle, {
          children: "Runs"
        }), _jsx(LineItem, {
          children: _jsx(_components.p, {
            children: "One execution of a workflow: parameters, metrics, tags, and artifacts."
          })
        })]
      }), _jsxs(ListItem, {
        icon: "Layers",
        children: [_jsx(ListTitle, {
          children: "Nested runs"
        }), _jsx(LineItem, {
          children: _jsx(_components.p, {
            children: "Child runs under a parent — useful for sweeps and model comparison."
          })
        })]
      }), _jsxs(ListItem, {
        icon: "Workflow",
        children: [_jsx(ListTitle, {
          children: "Tracking server"
        }), _jsx(LineItem, {
          children: _jsx(_components.p, {
            children: "Remote store for params, metrics, and artifacts across machines."
          })
        })]
      })]
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
      id: "commandblock",
      children: _jsx(_components.code, {
        children: "CommandBlock"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "CommandBlock"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  pnpm"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "pnpm add gsap @gsap/react"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  npm"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "npm install gsap @gsap/react"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  yarn"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "yarn add gsap @gsap/react"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "  bun"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "bun add gsap @gsap/react"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "/>"
            })
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsx(CommandBlock, {
      pnpm: "pnpm add gsap @gsap/react",
      npm: "npm install gsap @gsap/react",
      yarn: "yarn add gsap @gsap/react",
      bun: "bun add gsap @gsap/react"
    }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h3, {
      id: "installtabs--installtab--steps",
      children: [_jsx(_components.code, {
        children: "InstallTabs"
      }), " + ", _jsx(_components.code, {
        children: "InstallTab"
      }), " + ", _jsx(_components.code, {
        children: "Steps"
      })]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n  \n    \n  \n  \n    \n      Install the package\n      ```bash\n      pnpm add gsap @gsap/react\n      ```\n    \n  \n\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "InstallTabs"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "InstallTab"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " value"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "cli"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " label"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "CLI"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "CommandBlock"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " pnpm"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "pnpm add gsap"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " npm"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "npm install gsap"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " />"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "InstallTab"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " value"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "manual"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " label"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Manual"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Steps"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Step"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Install the package"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      ```bash"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      pnpm add gsap "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "@"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-light-text-decoration": "underline",
                "--shiki-dark": "#F1FA8C",
                "--shiki-dark-text-decoration": "inherit"
              },
              children: "gsap/react"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "      ```"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(InstallTabs, {
      children: [_jsx(InstallTab, {
        value: "cli",
        label: "CLI",
        children: _jsx(CommandBlock, {
          pnpm: "pnpm add gsap",
          npm: "npm install gsap"
        })
      }), _jsx(InstallTab, {
        value: "manual",
        label: "Manual",
        children: _jsxs(Steps, {
          children: [_jsx(Step, {
            children: "Install the package"
          }), _jsx(_components.figure, {
            "data-rehype-pretty-code-figure": "",
            children: _jsx(_components.pre, {
              tabIndex: "0",
              "data-language": "bash",
              "data-theme": "github-light dracula",
              __rawstring__: "pnpm add gsap @gsap/react\n",
              children: _jsx(_components.code, {
                "data-line-numbers": "",
                "data-language": "bash",
                "data-theme": "github-light dracula",
                style: {
                  display: "grid"
                },
                "data-line-numbers-max-digits": "1",
                children: _jsxs(_components.span, {
                  "data-line": "",
                  children: [_jsx(_components.span, {
                    style: {
                      "--shiki-light": "#6F42C1",
                      "--shiki-dark": "#50FA7B"
                    },
                    children: "pnpm"
                  }), _jsx(_components.span, {
                    style: {
                      "--shiki-light": "#032F62",
                      "--shiki-dark": "#F1FA8C"
                    },
                    children: " add"
                  }), _jsx(_components.span, {
                    style: {
                      "--shiki-light": "#032F62",
                      "--shiki-dark": "#F1FA8C"
                    },
                    children: " gsap"
                  }), _jsx(_components.span, {
                    style: {
                      "--shiki-light": "#032F62",
                      "--shiki-dark": "#F1FA8C"
                    },
                    children: " @gsap/react"
                  })]
                })
              })
            })
          })]
        })
      })]
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
      id: "docsfiletabs",
      children: _jsx(_components.code, {
        children: "DocsFileTabs"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n\n```tsx title=\"toast-enter.tsx\"\ngsap.from('.gsap-toast', { y: 24, autoAlpha: 0, duration: 0.35, ease: 'power2.out' });\n```\n\n```html title=\"toast-enter-markup.html\"\nChanges saved
\n```\n\n\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "DocsFileTabs"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "tsx"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " title=\"toast-enter.tsx\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "gsap."
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "from"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "("
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: ".gsap-toast"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ", { y"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#BD93F9"
              },
              children: " 24"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ", autoAlpha"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#BD93F9"
              },
              children: " 0"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ", duration"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#BD93F9"
              },
              children: " 0.35"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ", ease"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: " '"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "power2.out"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "'"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " });"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "html"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " title=\"toast-enter-markup.html\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#22863A",
                "--shiki-dark": "#FF79C6"
              },
              children: "div"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " class"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "gsap-toast rounded-lg border bg-card px-4 py-3"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Changes saved"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(DocsFileTabs, {
      children: [_jsxs(_components.figure, {
        "data-rehype-pretty-code-figure": "",
        children: [_jsx(_components.figcaption, {
          "data-rehype-pretty-code-title": "",
          "data-language": "tsx",
          "data-theme": "github-light dracula",
          children: "toast-enter.tsx"
        }), _jsx(_components.pre, {
          tabIndex: "0",
          "data-language": "tsx",
          "data-theme": "github-light dracula",
          __rawstring__: "gsap.from('.gsap-toast', { y: 24, autoAlpha: 0, duration: 0.35, ease: 'power2.out' });\n",
          children: _jsx(_components.code, {
            "data-line-numbers": "",
            "data-language": "tsx",
            "data-theme": "github-light dracula",
            style: {
              display: "grid"
            },
            "data-line-numbers-max-digits": "1",
            children: _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: "gsap."
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-dark": "#50FA7B"
                },
                children: "from"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: "("
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#032F62",
                  "--shiki-dark": "#E9F284"
                },
                children: "'"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#032F62",
                  "--shiki-dark": "#F1FA8C"
                },
                children: ".gsap-toast"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#032F62",
                  "--shiki-dark": "#E9F284"
                },
                children: "'"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: ", { y"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#FF79C6"
                },
                children: ":"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#005CC5",
                  "--shiki-dark": "#BD93F9"
                },
                children: " 24"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: ", autoAlpha"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#FF79C6"
                },
                children: ":"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#005CC5",
                  "--shiki-dark": "#BD93F9"
                },
                children: " 0"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: ", duration"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#FF79C6"
                },
                children: ":"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#005CC5",
                  "--shiki-dark": "#BD93F9"
                },
                children: " 0.35"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: ", ease"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#FF79C6"
                },
                children: ":"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#032F62",
                  "--shiki-dark": "#E9F284"
                },
                children: " '"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#032F62",
                  "--shiki-dark": "#F1FA8C"
                },
                children: "power2.out"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#032F62",
                  "--shiki-dark": "#E9F284"
                },
                children: "'"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: " });"
              })]
            })
          })
        })]
      }), _jsxs(_components.figure, {
        "data-rehype-pretty-code-figure": "",
        children: [_jsx(_components.figcaption, {
          "data-rehype-pretty-code-title": "",
          "data-language": "html",
          "data-theme": "github-light dracula",
          children: "toast-enter-markup.html"
        }), _jsx(_components.pre, {
          tabIndex: "0",
          "data-language": "html",
          "data-theme": "github-light dracula",
          __rawstring__: "Changes saved\n",
          children: _jsx(_components.code, {
            "data-line-numbers": "",
            "data-language": "html",
            "data-theme": "github-light dracula",
            style: {
              display: "grid"
            },
            "data-line-numbers-max-digits": "1",
            children: _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: "<"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#22863A",
                  "--shiki-dark": "#FF79C6"
                },
                children: "div"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#6F42C1",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#50FA7B",
                  "--shiki-dark-font-style": "italic"
                },
                children: " class"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#FF79C6"
                },
                children: "="
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#032F62",
                  "--shiki-dark": "#E9F284"
                },
                children: "\""
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#032F62",
                  "--shiki-dark": "#F1FA8C"
                },
                children: "gsap-toast rounded-lg border bg-card px-4 py-3"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#032F62",
                  "--shiki-dark": "#E9F284"
                },
                children: "\""
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: ">Changes saved"
              })]
            })
          })
        })]
      })]
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
      id: "componentpreview",
      children: _jsx(_components.code, {
        children: "ComponentPreview"
      })
    }), "\n", _jsx(_components.p, {
      children: "Tab chrome is detached from the body: Preview gets the card; Code uses the code block’s own container."
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n  \n\n```tsx title=\"save-button.tsx\"\n\n```\n\n\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ComponentPreview"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Button"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Save changes"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "tsx"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " title=\"save-button.tsx\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Button"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Save changes"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(ComponentPreview, {
      children: [_jsx(Button, {
        children: "Save changes"
      }), _jsxs(_components.figure, {
        "data-rehype-pretty-code-figure": "",
        children: [_jsx(_components.figcaption, {
          "data-rehype-pretty-code-title": "",
          "data-language": "tsx",
          "data-theme": "github-light dracula",
          children: "save-button.tsx"
        }), _jsx(_components.pre, {
          tabIndex: "0",
          "data-language": "tsx",
          "data-theme": "github-light dracula",
          __rawstring__: "\n",
          children: _jsx(_components.code, {
            "data-line-numbers": "",
            "data-language": "tsx",
            "data-theme": "github-light dracula",
            style: {
              display: "grid"
            },
            "data-line-numbers-max-digits": "1",
            children: _jsxs(_components.span, {
              "data-line": "",
              children: [_jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: "<"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#005CC5",
                  "--shiki-light-font-style": "inherit",
                  "--shiki-dark": "#8BE9FD",
                  "--shiki-dark-font-style": "italic"
                },
                children: "Button"
              }), _jsx(_components.span, {
                style: {
                  "--shiki-light": "#24292E",
                  "--shiki-dark": "#F8F8F2"
                },
                children: ">Save changes"
              })]
            })
          })
        })]
      })]
    }), "\n", _jsxs(_components.p, {
      children: ["One-shot motion (page load, stagger in) should set ", _jsx(_components.code, {
        children: "replay"
      }), " so readers can remount without a refresh. Interactive demos (click / drag) usually omit ", _jsx(_components.code, {
        children: "replay"
      }), ". Scroll/pin demos use ", _jsx(_components.code, {
        children: "flush"
      }), " and a tall ", _jsx(_components.code, {
        children: "previewClassName"
      }), "."]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.strong, {
        children: "GSAP lessons:"
      }), " always pair the TSX tab with an ", _jsx(_components.strong, {
        children: "HTML markup tab"
      }), " inside ", _jsx(_components.code, {
        children: "DocsFileTabs"
      }), ". ", _jsx(_components.code, {
        children: "ComponentPreview"
      }), " routes ", _jsx(_components.code, {
        children: "DocsFileTabs"
      }), " to the Code tab automatically. Custom preview components are registered in ", _jsx(_components.code, {
        children: "components/mdx/gsap-demos/mdx-registry.tsx"
      }), " — do not import them in the MDX file."]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.strong, {
        children: "Source"
      }), " (GSAP multi-file pattern)"]
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n  \n\n  \n\n```tsx title=\"toast-enter.tsx\"\nexport function GsapToastEnter() { /* … */ }\n```\n\n```html title=\"toast-enter-markup.html\"\nChanges saved
\n```\n\n  \n\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "ComponentPreview"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " replay"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "GsapToastEnter"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " />"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "DocsFileTabs"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "tsx"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " title=\"toast-enter.tsx\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "export"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: " function"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: " GsapToastEnter"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "() { "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6A737D",
                "--shiki-dark": "#6272A4"
              },
              children: "/* … */"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " }"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "html"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " title=\"toast-enter-markup.html\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#22863A",
                "--shiki-dark": "#FF79C6"
              },
              children: "div"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " class"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "gsap-toast"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">Changes saved"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h3, {
      id: "guide--guidestep",
      children: [_jsx(_components.code, {
        children: "Guide"
      }), " + ", _jsx(_components.code, {
        children: "GuideStep"
      })]
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "Guide"
        }), " optional props: ", _jsx(_components.code, {
          children: "title"
        }), ", ", _jsx(_components.code, {
          children: "numbered"
        }), " (default ", _jsx(_components.code, {
          children: "false"
        }), " — grey pills; ", _jsx(_components.code, {
          children: "true"
        }), " — numbered circles), ", _jsx(_components.code, {
          children: "headingLevel"
        }), " (", _jsx(_components.code, {
          children: "2"
        }), " | ", _jsx(_components.code, {
          children: "3"
        }), " | ", _jsx(_components.code, {
          children: "4"
        }), ", default ", _jsx(_components.code, {
          children: "3"
        }), "), ", _jsx(_components.code, {
          children: "stepHeadingLevel"
        }), " (defaults to ", _jsx(_components.code, {
          children: "headingLevel"
        }), ")."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "GuideStep"
        }), " requires ", _jsx(_components.code, {
          children: "title"
        }), "; optional ", _jsx(_components.code, {
          children: "headingLevel"
        }), " overrides the Guide's step level. Children can be prose and fenced blocks."]
      }), "\n", _jsxs(_components.li, {
        children: ["Guide headings appear in the page TOC (", _jsx(_components.code, {
          children: "TableOfContents"
        }), "). Prefer ", _jsx(_components.code, {
          children: "headingLevel={2}"
        }), " + ", _jsx(_components.code, {
          children: "stepHeadingLevel={3}"
        }), " when the Guide is a major section."]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n  \n\n```bash\nnpx create-next-app@latest my-project --typescript --eslint\ncd my-project\n```\n\n  \n\n  \n    Create `app/globals.css` and add:\n\n```css title=\"app/globals.css\"\n@import \"tailwindcss\";\n```\n\n  \n\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "Guide"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " title"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Install Tailwind CSS v4"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " numbered"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " headingLevel"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "{"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#BD93F9"
              },
              children: "2"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "} "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: "stepHeadingLevel"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "{"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#BD93F9"
              },
              children: "3"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "}>"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "GuideStep"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " title"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Create your project"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "bash"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "npx"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: " create-next-app@latest"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: " my-project"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#BD93F9"
              },
              children: " --typescript"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#BD93F9"
              },
              children: " --eslint"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#8BE9FD"
              },
              children: "cd"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: " my-project"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  "
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  <"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "GuideStep"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " title"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "Add the CSS import"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ">"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "    Create "
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-dark": "#50FA7B"
              },
              children: "app/globals.css"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " and add:"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "css"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " title=\"app/globals.css\""
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "@import"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: " \""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "tailwindcss"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#E9F284"
              },
              children: "\""
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ";"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: ""
            })]
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsxs(Guide, {
      title: "Install Tailwind CSS v4",
      numbered: true,
      headingLevel: 2,
      stepHeadingLevel: 3,
      children: [_jsx(GuideStep, {
        title: "Create your project",
        children: _jsx(_components.figure, {
          "data-rehype-pretty-code-figure": "",
          children: _jsx(_components.pre, {
            tabIndex: "0",
            "data-language": "bash",
            "data-theme": "github-light dracula",
            __rawstring__: "npx create-next-app@latest my-project --typescript --eslint\ncd my-project\n",
            children: _jsxs(_components.code, {
              "data-line-numbers": "",
              "data-language": "bash",
              "data-theme": "github-light dracula",
              style: {
                display: "grid"
              },
              "data-line-numbers-max-digits": "1",
              children: [_jsxs(_components.span, {
                "data-line": "",
                children: [_jsx(_components.span, {
                  style: {
                    "--shiki-light": "#6F42C1",
                    "--shiki-dark": "#50FA7B"
                  },
                  children: "npx"
                }), _jsx(_components.span, {
                  style: {
                    "--shiki-light": "#032F62",
                    "--shiki-dark": "#F1FA8C"
                  },
                  children: " create-next-app@latest"
                }), _jsx(_components.span, {
                  style: {
                    "--shiki-light": "#032F62",
                    "--shiki-dark": "#F1FA8C"
                  },
                  children: " my-project"
                }), _jsx(_components.span, {
                  style: {
                    "--shiki-light": "#005CC5",
                    "--shiki-dark": "#BD93F9"
                  },
                  children: " --typescript"
                }), _jsx(_components.span, {
                  style: {
                    "--shiki-light": "#005CC5",
                    "--shiki-dark": "#BD93F9"
                  },
                  children: " --eslint"
                })]
              }), "\n", _jsxs(_components.span, {
                "data-line": "",
                children: [_jsx(_components.span, {
                  style: {
                    "--shiki-light": "#005CC5",
                    "--shiki-dark": "#8BE9FD"
                  },
                  children: "cd"
                }), _jsx(_components.span, {
                  style: {
                    "--shiki-light": "#032F62",
                    "--shiki-dark": "#F1FA8C"
                  },
                  children: " my-project"
                })]
              })]
            })
          })
        })
      }), _jsxs(GuideStep, {
        title: "Add the CSS import",
        children: [_jsxs(_components.p, {
          children: ["Create ", _jsx(_components.code, {
            children: "app/globals.css"
          }), " and add:"]
        }), _jsxs(_components.figure, {
          "data-rehype-pretty-code-figure": "",
          children: [_jsx(_components.figcaption, {
            "data-rehype-pretty-code-title": "",
            "data-language": "css",
            "data-theme": "github-light dracula",
            children: "app/globals.css"
          }), _jsx(_components.pre, {
            tabIndex: "0",
            "data-language": "css",
            "data-theme": "github-light dracula",
            __rawstring__: "@import \"tailwindcss\";\n",
            children: _jsx(_components.code, {
              "data-line-numbers": "",
              "data-language": "css",
              "data-theme": "github-light dracula",
              style: {
                display: "grid"
              },
              "data-line-numbers-max-digits": "1",
              children: _jsxs(_components.span, {
                "data-line": "",
                children: [_jsx(_components.span, {
                  style: {
                    "--shiki-light": "#D73A49",
                    "--shiki-dark": "#FF79C6"
                  },
                  children: "@import"
                }), _jsx(_components.span, {
                  style: {
                    "--shiki-light": "#032F62",
                    "--shiki-dark": "#E9F284"
                  },
                  children: " \""
                }), _jsx(_components.span, {
                  style: {
                    "--shiki-light": "#032F62",
                    "--shiki-dark": "#F1FA8C"
                  },
                  children: "tailwindcss"
                }), _jsx(_components.span, {
                  style: {
                    "--shiki-light": "#032F62",
                    "--shiki-dark": "#E9F284"
                  },
                  children: "\""
                }), _jsx(_components.span, {
                  style: {
                    "--shiki-light": "#24292E",
                    "--shiki-dark": "#F8F8F2"
                  },
                  children: ";"
                })]
              })
            })
          })]
        })]
      })]
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
      id: "mermaid",
      children: "Mermaid"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Source"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "```mermaid\nflowchart LR\n  A[MDX] --> B[CodeBlock]\n  A --> C[ComponentPreview]\n  C --> D[Preview]\n  C --> E[Code / DocsFileTabs]\n```\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-dark": "#50FA7B"
              },
              children: "mermaid"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "flowchart LR"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  A[MDX] --> B[CodeBlock]"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  A --> C[ComponentPreview]"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  C --> D[Preview]"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  C --> E[Code / DocsFileTabs]"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "```"
            })
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mermaid",
        "data-theme": "github-light dracula",
        __rawstring__: "flowchart LR\n  A[MDX] --> B[CodeBlock]\n  A --> C[ComponentPreview]\n  C --> D[Preview]\n  C --> E[Code / DocsFileTabs]\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mermaid",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: [_jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "flowchart LR"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  A[MDX] --> B[CodeBlock]"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  A --> C[ComponentPreview]"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  C --> D[Preview]"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "  C --> E[Code / DocsFileTabs]"
            })
          })]
        })
      })
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
      id: "flowdiagram",
      children: _jsx(_components.code, {
        children: "FlowDiagram"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["On Learn pages, pass YAML/JSON via ", _jsx(_components.code, {
        children: "script={"
      }), "...", _jsx(_components.code, {
        children: "}"
      }), ". Inline template literals can arrive empty after MDX serialization on the blog — this page uses a registered wrapper for the live demo."]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.strong, {
        children: "Source"
      }), " (Learn markup)"]
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n",
        children: _jsxs(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "2",
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "FlowDiagram"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#6F42C1",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#50FA7B",
                "--shiki-dark-font-style": "italic"
              },
              children: " script"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#D73A49",
                "--shiki-dark": "#FF79C6"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "{"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "`nodes:"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "  - id: preview"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "    label: Preview"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "  - id: code"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "    label: Code tab"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "  - id: tabs"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "    label: DocsFileTabs"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "edges:"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "  - source: preview"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "    target: code"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "  - source: code"
            })
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#032F62",
                "--shiki-dark": "#F1FA8C"
              },
              children: "    target: tabs`"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "} />"
            })]
          })]
        })
      })
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.strong, {
        children: "Source"
      }), " (blog-safe wrapper)"]
    }), "\n", _jsx(_components.figure, {
      "data-rehype-pretty-code-figure": "",
      children: _jsx(_components.pre, {
        tabIndex: "0",
        "data-language": "mdx",
        "data-theme": "github-light dracula",
        __rawstring__: "\n",
        children: _jsx(_components.code, {
          "data-line-numbers": "",
          "data-language": "mdx",
          "data-theme": "github-light dracula",
          style: {
            display: "grid"
          },
          "data-line-numbers-max-digits": "1",
          children: _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#005CC5",
                "--shiki-light-font-style": "inherit",
                "--shiki-dark": "#8BE9FD",
                "--shiki-dark-font-style": "italic"
              },
              children: "AuthoringFlowDemo"
            }), _jsx(_components.span, {
              style: {
                "--shiki-light": "#24292E",
                "--shiki-dark": "#F8F8F2"
              },
              children: " />"
            })]
          })
        })
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Result"
      })
    }), "\n", _jsx(AuthoringFlowDemo, {}), "\n", _jsxs(_components.p, {
      children: ["Long files use normal fences with ", _jsx(_components.code, {
        children: "title=\"path/file.cs\""
      }), " — they auto-collapse with ", _jsx(_components.strong, {
        children: "Expand"
      }), ". The header filename is click-to-copy."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}
Content authoring guide

Advanced rehype-pretty-code & Shiki Examples

Content authoring (minimal)

Content authoring guide

Advanced rehype-pretty-code & Shiki Examples

Content authoring (minimal)
