add banner experiments, improve notion import

Dockerfile

@@ -52,6 +52,9 @@ RUN npm run build
 # Generate the PDF (light theme, full wait)
 RUN npm run export:pdf -- --theme=light --wait=full
 
+# Generate LaTeX export
+RUN npm run export:latex
+
 # Install nginx in the build stage (we'll use this image as final to keep Node.js)
 RUN apt-get update && apt-get install -y nginx && apt-get clean && rm -rf /var/lib/apt/lists/*
 

app/src/components/Footer.astro

@@ -7,6 +7,7 @@ interface Props {
 }
 const { citationText, bibtex, licence, doi } = Astro.props as Props;
 ---
+
 <footer class="footer">
   <div class="footer-inner">
     <section class="citation-block">
@@ -17,39 +18,68 @@ const { citationText, bibtex, licence, doi } = Astro.props as Props;
       <p>BibTeX citation</p>
       <pre class="citation long">{bibtex}</pre>
     </section>
-    {doi && (
-      <section class="doi-block">
-        <h3>DOI</h3>
-        <p><a href={`https://doi.org/${doi}`} target="_blank" rel="noopener noreferrer">{doi}</a></p>
-      </section>
-    )}
-    {licence && (
-      <section class="reuse-block">
-        <h3>Reuse</h3>
-        <p set:html={licence}></p>
-      </section>
-    )}
+    {
+      doi && (
+        <section class="doi-block">
+          <h3>DOI</h3>
+          <p>
+            <a
+              href={`https://doi.org/${doi}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {doi}
+            </a>
+          </p>
+        </section>
+      )
+    }
+    {
+      licence && (
+        <section class="reuse-block">
+          <h3>Reuse</h3>
+          <p set:html={licence} />
+        </section>
+      )
+    }
     <section class="references-block">
       <slot />
     </section>
+    <div class="template-credit">
+      <p>
+        made with love with <a
+          href="https://huggingface.co/spaces/tfrere/research-article-template"
+          target="_blank"
+          rel="noopener noreferrer">research article template</a
+        >
+      </p>
+    </div>
   </div>
 </footer>
 
-
 <script is:inline>
   (() => {
-    const getFooter = () => document.currentScript?.closest('footer') || document.querySelector('footer.footer');
+    const getFooter = () =>
+      document.currentScript?.closest("footer") ||
+      document.querySelector("footer.footer");
     const footer = getFooter();
     if (!footer) return;
-    const target = footer.querySelector('.references-block');
+    const target = footer.querySelector(".references-block");
     if (!target) return;
 
-    const contentRoot = document.querySelector('section.content-grid main') || document.querySelector('main') || document.body;
+    const contentRoot =
+      document.querySelector("section.content-grid main") ||
+      document.querySelector("main") ||
+      document.body;
 
     const ensureHeading = (text) => {
-      const exists = Array.from(target.children).some((c) => c.tagName === 'H3' && c.textContent.trim().toLowerCase() === text.toLowerCase());
+      const exists = Array.from(target.children).some(
+        (c) =>
+          c.tagName === "H3" &&
+          c.textContent.trim().toLowerCase() === text.toLowerCase(),
+      );
       if (!exists) {
-        const h = document.createElement('h3');
+        const h = document.createElement("h3");
         h.textContent = text;
         target.appendChild(h);
       }
@@ -58,11 +88,17 @@ const { citationText, bibtex, licence, doi } = Astro.props as Props;
     const moveIntoFooter = (element, headingText) => {
       if (!element) return false;
       // Remove an eventual heading already included inside the block (avoid duplicates)
-      const firstHeading = element.querySelector(':scope > h1, :scope > h2, :scope > h3');
+      const firstHeading = element.querySelector(
+        ":scope > h1, :scope > h2, :scope > h3",
+      );
       if (firstHeading) {
-        const txt = (firstHeading.textContent || '').trim().toLowerCase();
+        const txt = (firstHeading.textContent || "").trim().toLowerCase();
         const targetTxt = headingText.trim().toLowerCase();
-        if (txt === targetTxt || txt.includes('reference') || txt.includes('bibliograph')) {
+        if (
+          txt === targetTxt ||
+          txt.includes("reference") ||
+          txt.includes("bibliograph")
+        ) {
           firstHeading.remove();
         }
       }
@@ -79,11 +115,15 @@ const { citationText, bibtex, licence, doi } = Astro.props as Props;
         return null;
       };
 
-      const referencesEl = findFirstOutsideFooter(['#references', '.references', '.bibliography']);
-      const footnotesEl = findFirstOutsideFooter(['.footnotes']);
+      const referencesEl = findFirstOutsideFooter([
+        "#references",
+        ".references",
+        ".bibliography",
+      ]);
+      const footnotesEl = findFirstOutsideFooter([".footnotes"]);
 
-      const movedRefs = moveIntoFooter(referencesEl, 'References');
-      const movedNotes = moveIntoFooter(footnotesEl, 'Footnotes');
+      const movedRefs = moveIntoFooter(referencesEl, "References");
+      const movedNotes = moveIntoFooter(footnotesEl, "Footnotes");
       return movedRefs || movedNotes;
     };
 
@@ -91,8 +131,8 @@ const { citationText, bibtex, licence, doi } = Astro.props as Props;
     const done = run();
     if (!done) {
       const onReady = () => run();
-      if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', onReady, { once: true });
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", onReady, { once: true });
       } else {
         setTimeout(onReady, 0);
       }
@@ -103,7 +143,6 @@ const { citationText, bibtex, licence, doi } = Astro.props as Props;
   })();
 </script>
 
-
 <style is:global>
   .footer {
     contain: layout style;
@@ -151,7 +190,6 @@ const { citationText, bibtex, licence, doi } = Astro.props as Props;
     grid-column: 2;
   }
 
-
   .citation-block h3 {
     margin: 0 0 8px;
   }
@@ -174,12 +212,13 @@ const { citationText, bibtex, licence, doi } = Astro.props as Props;
 
   /* Distill-like appendix citation styling */
   .citation {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
     font-size: 11px;
     line-height: 15px;
     border-left: 1px solid rgba(0, 0, 0, 0.1);
     padding-left: 18px;
-    border: 1px solid rgba(0,0,0,0.1);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     background: rgba(0, 0, 0, 0.02);
     padding: 10px 18px;
     border-radius: 3px;
@@ -223,10 +262,18 @@ const { citationText, bibtex, licence, doi } = Astro.props as Props;
     color: var(--text-color);
   }
 
-  [data-theme="dark"] .footer { border-top-color: rgba(255,255,255,.15); color: rgba(200,200,200,.8); }
-  [data-theme="dark"] .citation { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,.15); color: rgba(200,200,200,1); }
-[data-theme="dark"] .citation a { color: rgba(255,255,255,0.75); }
-
+  [data-theme="dark"] .footer {
+    border-top-color: rgba(255, 255, 255, 0.15);
+    color: rgba(200, 200, 200, 0.8);
+  }
+  [data-theme="dark"] .citation {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.15);
+    color: rgba(200, 200, 200, 1);
+  }
+  [data-theme="dark"] .citation a {
+    color: rgba(255, 255, 255, 0.75);
+  }
 
   /* Footer links: use primary color consistently */
   .footer a {
@@ -241,4 +288,40 @@ const { citationText, bibtex, licence, doi } = Astro.props as Props;
   [data-theme="dark"] .footer a {
     color: var(--primary-color);
   }
+
+  /* Template credit - discrete at the bottom */
+  .template-credit {
+    display: contents;
+  }
+
+  .template-credit p {
+    grid-column: 2;
+    margin: 24px 0 0 0;
+    font-size: 0.85em;
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .template-credit a {
+    color: rgba(0, 0, 0, 0.6);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  }
+
+  .template-credit a:hover {
+    color: rgba(0, 0, 0, 0.8);
+    border-bottom-color: rgba(0, 0, 0, 0.3);
+  }
+
+  [data-theme="dark"] .template-credit p {
+    color: rgba(200, 200, 200, 0.6);
+  }
+
+  [data-theme="dark"] .template-credit a {
+    color: rgba(200, 200, 200, 0.7);
+    border-bottom-color: rgba(255, 255, 255, 0.2);
+  }
+
+  [data-theme="dark"] .template-credit a:hover {
+    color: rgba(200, 200, 200, 0.9);
+    border-bottom-color: rgba(255, 255, 255, 0.35);
+  }
 </style>

app/src/components/Hero.astro

@@ -37,6 +37,7 @@ function normalizeAuthors(
         url?: string;
         link?: string;
         affiliationIndices?: number[];
+        affiliations?: number[];
       }
   >,
 ): Author[] {
@@ -47,8 +48,11 @@ function normalizeAuthors(
       }
       const name = (a?.name ?? "").toString();
       const url = (a?.url ?? a?.link) as string | undefined;
+      // Support both 'affiliationIndices' and 'affiliations' as property names
       const affiliationIndices = Array.isArray((a as any)?.affiliationIndices)
         ? (a as any).affiliationIndices
+        : Array.isArray((a as any)?.affiliations)
+        ? (a as any).affiliations
         : undefined;
       return { name, url, affiliationIndices } as Author;
     })
@@ -69,9 +73,9 @@ for (const author of normalizedAuthors) {
     }
   }
 }
-const shouldShowAffiliationSupers = authorAffiliationIndexSet.size > 1;
 const hasMultipleAffiliations =
   Array.isArray(affiliations) && affiliations.length > 1;
+const shouldShowAffiliationSupers = hasMultipleAffiliations && authorAffiliationIndexSet.size > 0;
 
 function stripHtml(text: string): string {
   return String(text || "").replace(/<[^>]*>/g, "");
@@ -404,7 +408,8 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     display: flex;
     flex-direction: column;
     gap: 8px;
-    max-width: 250px;
+    flex: 1;
+    min-width: 0;
   }
   .meta-container-cell h3 {
     margin: 0;

app/src/content/article.mdx

@@ -1,18 +1,56 @@
 ---
-title: "Loading from Notion..."
-description: "This content will be replaced at container startup"
-published: "2025"
+title: "Bringing paper to life:\n A modern template for\n scientific writing"
+subtitle: "Publish‑ready workflow that lets you focus on ideas, not infrastructure"
+description: "Publish‑ready workflow that lets you focus on ideas, not infrastructure"
 authors:
-  - name: "Author"
+  - name: "Thibaud Frere"
+    url: "https://huggingface.co/tfrere"
+    affiliations: [1]
+affiliations:
+  - name: "Hugging Face"
+    url: "https://huggingface.co"
+published: "Sep. 01, 2025"
+doi: 10.1234/abcd.efgh
+licence: >
+  Diagrams and text are licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer">CC‑BY 4.0</a> with the source available on <a href="https://huggingface.co/spaces/tfrere/research-article-template" target="_blank" rel="noopener noreferrer">Hugging Face</a>, unless noted otherwise.
+  Figures reused from other sources are excluded and marked in their captions (“Figure from …”).
+tags:
+  - research
+  - template
 tableOfContentsAutoCollapse: true
+pdfProOnly: false
 ---
 
-## Loading
+import Introduction from "./chapters/demo/introduction.mdx";
+import BuiltWithThis from "./chapters/demo/built-with-this.mdx";
+import BestPractices from "./chapters/demo/best-pratices.mdx";
+import WritingYourContent from "./chapters/demo/writing-your-content.mdx";
+import AvailableBlocks from "./chapters/demo/markdown.mdx";  
+import GettingStarted from "./chapters/demo/getting-started.mdx";
+import Markdown from "./chapters/demo/markdown.mdx";
+import Components from "./chapters/demo/components.mdx";
+import Greetings from "./chapters/demo/greetings.mdx";
+import VibeCodingCharts from "./chapters/demo/vibe-coding-charts.mdx";
+import ImportContent from "./chapters/demo/import-content.mdx";
 
-This article is being imported from Notion. Please wait a moment...
+<Introduction />
+
+<BuiltWithThis />
+
+<GettingStarted />
+
+<WritingYourContent />
+
+<Markdown />
+
+<Components />
+
+<VibeCodingCharts />
+
+<ImportContent />
+
+<BestPractices />
+
+<Greetings />
 
-If you're seeing this, the Notion import is either:
-- Still in progress (first startup takes ~5-10 minutes)
-- Disabled (set ENABLE_NOTION_IMPORT=true)
-- Failed (check container logs)
 

app/src/content/bibliography.bib

@@ -0,0 +1,130 @@
+@inproceedings{vaswani2017attention,
+  title     = {Attention Is All You Need},
+  author    = {Vaswani, Ashish and Shazeer, Noam and Parmar, Niki and Uszkoreit, Jakob and Jones, Llion and Gomez, Aidan N and Kaiser, {
+               }Lukasz and Polosukhin, Illia},
+  booktitle = {Advances in Neural Information Processing Systems},
+  year      = {2017}
+}
+
+@book{mckinney2017python,
+  title     = {Python for Data Analysis},
+  author    = {McKinney, Wes},
+  publisher = {O'Reilly Media},
+  address   = {Sebastopol, CA},
+  year      = {2017},
+  edition   = {2},
+  isbn      = {978-1491957660}
+}
+
+@inproceedings{he2016resnet,
+  title     = {Deep Residual Learning for Image Recognition},
+  author    = {He, Kaiming and Zhang, Xiangyu and Ren, Shaoqing and Sun, Jian},
+  booktitle = {Proceedings of the IEEE Conference on Computer Vision and Pattern Recognition (CVPR)},
+  pages     = {770--778},
+  year      = {2016},
+  doi       = {10.1109/CVPR.2016.90},
+  url       = {https://doi.org/10.1109/CVPR.2016.90}
+}
+
+@article{silver2017mastering,
+  title   = {Mastering the game of Go without human knowledge},
+  author  = {Silver, David and Schrittwieser, Julian and Simonyan, Karen and Antonoglou, Ioannis and Huang, Aja and others},
+  journal = {Nature},
+  volume  = {550},
+  number  = {7676},
+  pages   = {354--359},
+  year    = {2017},
+  month   = {oct},
+  doi     = {10.1038/nature24270},
+  url     = {https://www.nature.com/articles/nature24270}
+}
+
+@techreport{openai2023gpt4,
+  title         = {GPT-4 Technical Report},
+  author        = {{OpenAI}},
+  institution   = {OpenAI},
+  year          = {2023},
+  number        = {arXiv:2303.08774},
+  archiveprefix = {arXiv},
+  eprint        = {2303.08774},
+  primaryclass  = {cs.CL},
+  url           = {https://arxiv.org/abs/2303.08774}
+}
+
+@phdthesis{doe2020thesis,
+  title   = {Learning Efficient Representations for Large-Scale Visual Recognition},
+  author  = {Doe, Jane},
+  school  = {Massachusetts Institute of Technology},
+  address = {Cambridge, MA},
+  year    = {2020},
+  doi     = {10.5555/mit-2020-xyz}
+}
+
+@incollection{cover2006entropy,
+  title     = {Entropy, Relative Entropy, and Mutual Information},
+  author    = {Cover, Thomas M. and Thomas, Joy A.},
+  booktitle = {Elements of Information Theory},
+  publisher = {Wiley},
+  address   = {Hoboken, NJ},
+  edition   = {2},
+  year      = {2006},
+  pages     = {13--55},
+  isbn      = {978-0471241959}
+}
+
+@misc{zenodo2021dataset,
+  title        = {ImageNet-21K Subset (Version 2.0)},
+  author       = {Smith, John and Lee, Alice and Kumar, Ravi},
+  year         = {2021},
+  howpublished = {Dataset on Zenodo},
+  doi          = {10.5281/zenodo.1234567},
+  url          = {https://doi.org/10.5281/zenodo.1234567},
+  note         = {Accessed 2025-09-01}
+}
+
+@misc{sklearn2024,
+  title        = {scikit-learn: Machine Learning in Python (Version 1.4)},
+  author       = {Pedregosa, Fabian and Varoquaux, Ga{"e}l and Gramfort, Alexandre and others},
+  year         = {2024},
+  howpublished = {Software},
+  doi          = {10.5281/zenodo.592264},
+  url          = {https://scikit-learn.org}
+}
+
+@inproceedings{smith2024privacy,
+  title     = {Privacy-Preserving Training with Low-Precision Secure Aggregation},
+  author    = {Smith, Emily and Zhang, Wei and Rossi, Marco and Patel, Neha},
+  booktitle = {Proceedings of the 41st International Conference on Machine Learning},
+  editor    = {Smith, A. and Johnson, B.},
+  series    = {Proceedings of Machine Learning Research},
+  volume    = {235},
+  pages     = {12345--12367},
+  address   = {Vienna, Austria},
+  publisher = {PMLR},
+  month     = {jul},
+  year      = {2024},
+  url       = {https://proceedings.mlr.press/v235/}
+}
+
+@article{kingma2015adam,
+  title         = {Adam: A Method for Stochastic Optimization},
+  author        = {Kingma, Diederik P. and Ba, Jimmy},
+  journal       = {International Conference on Learning Representations (ICLR)},
+  year          = {2015},
+  archiveprefix = {arXiv},
+  eprint        = {1412.6980},
+  primaryclass  = {cs.LG},
+  url           = {https://arxiv.org/abs/1412.6980}
+}
+
+@misc{raffel2020t5,
+  title         = {Exploring the Limits of Transfer Learning with a Unified Text-to-Text Transformer},
+  author        = {Raffel, Colin and Shazeer, Noam and Roberts, Adam and Lee, Katherine and Narang, Sharan and others},
+  year          = {2020},
+  howpublished  = {arXiv preprint},
+  archiveprefix = {arXiv},
+  eprint        = {1910.10683},
+  primaryclass  = {cs.LG},
+  doi           = {10.48550/arXiv.1910.10683},
+  url           = {https://arxiv.org/abs/1910.10683}
+}

app/src/content/chapters/demo/built-with-this.mdx

@@ -0,0 +1,53 @@
+import Image from "../../../components/Image.astro";
+import Stack from "../../../components/Stack.astro";
+import maintainUnmaintainable from "../../assets/image/maintain-the-unmaintainable.png";
+import finevision from "../../assets/image/finevision.png";
+import smolTrainingGuide from "../../assets/image/smoll-training-guide.png";
+
+export const title = "Built with this";
+
+### Built with this template
+
+You can see how the template is used in the following examples.
+
+<Stack direction="horizontal" gap="medium" layout="2-column" >
+  <a href="https://huggingface.co/spaces/transformers-community/Transformers-tenets" target="_blank" rel="noopener noreferrer" class="card no-padding" style="flex: 1; min-width: 0; overflow: hidden;">
+    <Image 
+      src={maintainUnmaintainable} 
+      alt="Maintain the unmaintainable: 1M python loc, 400+ models"
+    />
+    <div class="card-title-container">
+      <h3 class="card-title">Maintain the unmaintainable: 1M python loc, 400+ models</h3>
+      <p class="card-subtitle">A peek into software engineering for the transformers library</p>
+    </div>
+  </a>
+  
+  <a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank" rel="noopener noreferrer" class="card no-padding" style="flex: 1; min-width: 0; overflow: hidden;">
+    <Image 
+      src={finevision} 
+      alt="FineVision: Open Data Is All You Need"
+    />
+    <div class="card-title-container">
+      <h3 class="card-title">FineVision: Open Data Is All You Need</h3>
+      <p class="card-subtitle">A new open dataset for data-centric training of Vision Language Models</p>
+    </div>
+  </a>
+  
+  <a href="https://placeholder-url.com" target="_blank" rel="noopener noreferrer" class="card no-padding" style="flex: 1; min-width: 0; overflow: hidden;">
+    <Image 
+      src={smolTrainingGuide} 
+      alt="The Smol Training Guide: The Secrets to Building World-Class LLMs"
+    />
+    <div class="card-title-container">
+      <h3 class="card-title">The Smol Training Guide: The Secrets to Building World-Class LLMs</h3>
+      <p class="card-subtitle">A practical journey through the challenges, decisions, and messy reality behind training state-of-the-art language models</p>
+    </div>
+  </a>
+  
+  <div class="card card-cta">
+    <div class="card-cta-content">
+      <h3>Your article?</h3>
+      <p>Build your research paper with this template</p>
+    </div>
+  </div>
+</Stack>

app/src/content/chapters/demo/introduction.mdx

@@ -58,13 +58,13 @@ This is not a CMS or a multi‑page blog—it's a **focused**, **single‑page**
 
 This project stands in the direct continuity of [Distill](https://distill.pub/) (2016–2021). Our goal is to carry that spirit forward and push it even further: **accessible scientific writing**, **high‑quality interactive explanations**, and **reproducible**, production‑ready demos.
 
-To give you a sense of what inspired this template, here is a short, curated list of **well‑designed** and often **interactive** works from Distill:
+{/* To give you a sense of what inspired this template, here is a short, curated list of **well‑designed** and often **interactive** works from Distill:
 
 - [Growing Neural Cellular Automata](https://distill.pub/2020/growing-ca/)
 - [Activation Atlas](https://distill.pub/2019/activation-atlas/)
 - [Handwriting with a Neural Network](https://distill.pub/2016/handwriting/)
-- [The Building Blocks of Interpretability](https://distill.pub/2018/building-blocks/)
+- [The Building Blocks of Interpretability](https://distill.pub/2018/building-blocks/) */}
 
-<Sidenote>
+{/* <Sidenote>
   I'm always excited to discover more great examples—please share your favorites in the <a href="https://huggingface.co/spaces/tfrere/research-blog-template/discussions?status=open&type=discussion">Community tab</a>!
-</Sidenote>
+</Sidenote> */}

app/src/content/embeds/banner-molecules.html

@@ -0,0 +1,522 @@
+<div class="molecular-space"
+    style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;position:relative;overflow:hidden;"></div>
+<script>
+    (() => {
+        const ensureAnime = (cb) => {
+            if (window.anime && typeof window.anime === 'function') return cb();
+            let s = document.getElementById('anime-cdn-script');
+            if (!s) {
+                s = document.createElement('script');
+                s.id = 'anime-cdn-script';
+                s.src = 'https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js';
+                document.head.appendChild(s);
+            }
+            const onReady = () => { if (window.anime && typeof window.anime === 'function') cb(); };
+            s.addEventListener('load', onReady, { once: true });
+            if (window.anime) onReady();
+        };
+
+        const bootstrap = () => {
+            const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+            const container = (mount && mount.querySelector && mount.querySelector('.molecular-space')) || document.querySelector('.molecular-space');
+            if (!container) return;
+            if (container.dataset) {
+                if (container.dataset.mounted === 'true') return;
+                container.dataset.mounted = 'true';
+            }
+
+            const canvas = document.createElement('canvas');
+            canvas.style.display = 'block';
+            canvas.style.width = '100%';
+            canvas.style.height = '100%';
+            container.appendChild(canvas);
+            const ctx = canvas.getContext('2d');
+
+            const getColors = () => {
+                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+                return {
+                    atoms: {
+                        C: isDark ? 'rgba(144, 144, 144, 0.9)' : 'rgba(90, 90, 90, 0.85)',
+                        N: isDark ? 'rgba(78, 165, 183, 0.9)' : 'rgba(50, 130, 160, 0.85)',
+                        O: isDark ? 'rgba(232, 137, 171, 0.9)' : 'rgba(220, 80, 130, 0.85)',
+                        H: isDark ? 'rgba(255, 255, 255, 0.8)' : 'rgba(240, 240, 240, 0.75)',
+                        P: isDark ? 'rgba(206, 192, 250, 0.9)' : 'rgba(138, 100, 220, 0.85)',
+                        S: isDark ? 'rgba(255, 200, 50, 0.9)' : 'rgba(230, 180, 30, 0.85)',
+                    },
+                    bond: isDark ? 'rgba(206, 192, 250, 0.3)' : 'rgba(138, 100, 220, 0.35)',
+                    glow: isDark ? 'rgba(206, 192, 250, 0.3)' : 'rgba(138, 100, 220, 0.25)',
+                };
+            };
+
+            let colors = getColors();
+
+            const observer = new MutationObserver(() => {
+                colors = getColors();
+            });
+            observer.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['data-theme']
+            });
+
+            let atoms = [];
+            let bonds = [];
+            let molecules = [];
+            let width, height;
+
+            const atomSizes = { H: 6, C: 12, N: 11, O: 11, P: 13, S: 13 };
+
+            // Définitions de vraies molécules
+            const moleculeTemplates = {
+                water: {
+                    name: "H₂O",
+                    atoms: [
+                        { type: 'O', pos: [0, 0] },
+                        { type: 'H', pos: [-15, -12] },
+                        { type: 'H', pos: [15, -12] }
+                    ],
+                    bonds: [[0, 1, 1], [0, 2, 1]]
+                },
+
+                co2: {
+                    name: "CO₂",
+                    atoms: [
+                        { type: 'C', pos: [0, 0] },
+                        { type: 'O', pos: [-25, 0] },
+                        { type: 'O', pos: [25, 0] }
+                    ],
+                    bonds: [[0, 1, 2], [0, 2, 2]]
+                },
+
+                methane: {
+                    name: "CH₄",
+                    atoms: [
+                        { type: 'C', pos: [0, 0] },
+                        { type: 'H', pos: [0, -18] },
+                        { type: 'H', pos: [17, 9] },
+                        { type: 'H', pos: [-17, 9] },
+                        { type: 'H', pos: [0, 12] }
+                    ],
+                    bonds: [[0, 1, 1], [0, 2, 1], [0, 3, 1], [0, 4, 1]]
+                },
+
+                ammonia: {
+                    name: "NH₃",
+                    atoms: [
+                        { type: 'N', pos: [0, 0] },
+                        { type: 'H', pos: [0, -16] },
+                        { type: 'H', pos: [-14, 8] },
+                        { type: 'H', pos: [14, 8] }
+                    ],
+                    bonds: [[0, 1, 1], [0, 2, 1], [0, 3, 1]]
+                },
+
+                benzene: {
+                    name: "C₆H₆",
+                    atoms: [
+                        { type: 'C', pos: [20, 0] },
+                        { type: 'C', pos: [10, 17] },
+                        { type: 'C', pos: [-10, 17] },
+                        { type: 'C', pos: [-20, 0] },
+                        { type: 'C', pos: [-10, -17] },
+                        { type: 'C', pos: [10, -17] },
+                        { type: 'H', pos: [36, 0] },
+                        { type: 'H', pos: [18, 31] },
+                        { type: 'H', pos: [-18, 31] },
+                        { type: 'H', pos: [-36, 0] },
+                        { type: 'H', pos: [-18, -31] },
+                        { type: 'H', pos: [18, -31] }
+                    ],
+                    bonds: [
+                        [0, 1, 1], [1, 2, 2], [2, 3, 1],
+                        [3, 4, 2], [4, 5, 1], [5, 0, 2],
+                        [0, 6, 1], [1, 7, 1], [2, 8, 1],
+                        [3, 9, 1], [4, 10, 1], [5, 11, 1]
+                    ]
+                },
+
+                ethanol: {
+                    name: "C₂H₅OH",
+                    atoms: [
+                        { type: 'C', pos: [-15, 0] },
+                        { type: 'C', pos: [15, 0] },
+                        { type: 'O', pos: [30, 15] },
+                        { type: 'H', pos: [42, 20] },
+                        { type: 'H', pos: [-25, -12] },
+                        { type: 'H', pos: [-25, 12] },
+                        { type: 'H', pos: [-5, 12] },
+                        { type: 'H', pos: [25, -12] },
+                        { type: 'H', pos: [5, -12] }
+                    ],
+                    bonds: [
+                        [0, 1, 1], [1, 2, 1], [2, 3, 1],
+                        [0, 4, 1], [0, 5, 1], [0, 6, 1],
+                        [1, 7, 1], [1, 8, 1]
+                    ]
+                },
+
+                acetone: {
+                    name: "(CH₃)₂CO",
+                    atoms: [
+                        { type: 'C', pos: [0, 0] },
+                        { type: 'O', pos: [0, -25] },
+                        { type: 'C', pos: [-25, 10] },
+                        { type: 'C', pos: [25, 10] },
+                        { type: 'H', pos: [-35, 0] },
+                        { type: 'H', pos: [-30, 22] },
+                        { type: 'H', pos: [-15, 18] },
+                        { type: 'H', pos: [35, 0] },
+                        { type: 'H', pos: [30, 22] },
+                        { type: 'H', pos: [15, 18] }
+                    ],
+                    bonds: [
+                        [0, 1, 2], [0, 2, 1], [0, 3, 1],
+                        [2, 4, 1], [2, 5, 1], [2, 6, 1],
+                        [3, 7, 1], [3, 8, 1], [3, 9, 1]
+                    ]
+                },
+
+                glucose: {
+                    name: "C₆H₁₂O₆",
+                    atoms: [
+                        { type: 'C', pos: [0, -20] },
+                        { type: 'C', pos: [20, -10] },
+                        { type: 'C', pos: [20, 10] },
+                        { type: 'C', pos: [0, 20] },
+                        { type: 'C', pos: [-20, 10] },
+                        { type: 'O', pos: [-20, -10] },
+                        { type: 'O', pos: [0, -35] },
+                        { type: 'H', pos: [10, -35] },
+                        { type: 'O', pos: [35, -15] },
+                        { type: 'H', pos: [45, -10] },
+                        { type: 'O', pos: [35, 15] },
+                        { type: 'H', pos: [45, 10] }
+                    ],
+                    bonds: [
+                        [0, 1, 1], [1, 2, 1], [2, 3, 1],
+                        [3, 4, 1], [4, 5, 1], [5, 0, 1],
+                        [0, 6, 1], [6, 7, 1],
+                        [1, 8, 1], [8, 9, 1],
+                        [2, 10, 1], [10, 11, 1]
+                    ]
+                }
+            };
+
+            const resize = () => {
+                width = container.clientWidth || 800;
+                height = Math.max(260, Math.round(width / 3));
+                canvas.width = width;
+                canvas.height = height;
+                initMolecules();
+            };
+
+            const initMolecules = () => {
+                atoms = [];
+                bonds = [];
+                molecules = [];
+
+                // Sélectionner 3-4 molécules aléatoires
+                const templateNames = Object.keys(moleculeTemplates);
+                const numMolecules = 3 + Math.floor(Math.random() * 2);
+                const selectedTemplates = [];
+
+                for (let i = 0; i < numMolecules; i++) {
+                    const template = moleculeTemplates[templateNames[Math.floor(Math.random() * templateNames.length)]];
+                    selectedTemplates.push(template);
+                }
+
+                selectedTemplates.forEach((template, idx) => {
+                    createMoleculeFromTemplate(template, idx, numMolecules);
+                });
+
+                // Animations initiales
+                atoms.forEach((atom, i) => {
+                    anime({
+                        targets: atom,
+                        scale: 1,
+                        opacity: atom.targetOpacity,
+                        duration: 800,
+                        delay: i * 30,
+                        easing: 'easeOutElastic(1, .6)'
+                    });
+                });
+
+                bonds.forEach((bond, i) => {
+                    anime({
+                        targets: bond,
+                        opacity: bond.targetOpacity,
+                        duration: 600,
+                        delay: 400 + i * 20,
+                        easing: 'easeOutQuad'
+                    });
+                });
+
+                // Cycle: changer de molécules
+                setInterval(() => {
+                    changeMolecules();
+                }, 7000 + Math.random() * 3000);
+            };
+
+            const createMoleculeFromTemplate = (template, moleculeIdx, totalMolecules) => {
+                const marginX = width * 0.12;
+                const marginY = height * 0.25;
+                const centerX = marginX + (moleculeIdx / (totalMolecules - 1 || 1)) * (width - 2 * marginX);
+                const centerY = marginY + (Math.random() - 0.5) * (height - 2 * marginY) * 0.5 + height / 2;
+
+                const scale = 1 + Math.random() * 0.3;
+                const moleculeAtoms = [];
+
+                // Créer les atomes
+                template.atoms.forEach(atomDef => {
+                    const atom = {
+                        x: centerX + atomDef.pos[0] * scale,
+                        y: centerY + atomDef.pos[1] * scale,
+                        baseX: centerX + atomDef.pos[0] * scale,
+                        baseY: centerY + atomDef.pos[1] * scale,
+                        type: atomDef.type,
+                        size: atomSizes[atomDef.type],
+                        scale: 0,
+                        opacity: 0,
+                        targetOpacity: 0.85 + Math.random() * 0.15,
+                        vibrationPhase: Math.random() * Math.PI * 2,
+                        vibrationSpeed: 0.015 + Math.random() * 0.01,
+                        vibrationAmplitude: 0.8 + Math.random() * 1.2,
+                        moleculeIdx: moleculeIdx
+                    };
+                    atoms.push(atom);
+                    moleculeAtoms.push(atom);
+                });
+
+                molecules.push({
+                    atoms: moleculeAtoms,
+                    centerX: centerX,
+                    centerY: centerY,
+                    rotation: 0,
+                    rotationSpeed: (Math.random() - 0.5) * 0.004,
+                    name: template.name
+                });
+
+                // Créer les liaisons
+                template.bonds.forEach(bondDef => {
+                    bonds.push({
+                        from: moleculeAtoms[bondDef[0]],
+                        to: moleculeAtoms[bondDef[1]],
+                        strength: bondDef[2],
+                        opacity: 0,
+                        targetOpacity: 0.5 + Math.random() * 0.2,
+                        vibrationPhase: Math.random() * Math.PI * 2
+                    });
+                });
+            };
+
+            const changeMolecules = () => {
+                // Dissoudre une molécule aléatoire
+                if (molecules.length === 0) return;
+
+                const moleculeToRemove = molecules[Math.floor(Math.random() * molecules.length)];
+
+                // Fade out atomes
+                moleculeToRemove.atoms.forEach(atom => {
+                    anime({
+                        targets: atom,
+                        scale: 0,
+                        opacity: 0,
+                        duration: 600,
+                        easing: 'easeInQuad',
+                        complete: () => {
+                            const idx = atoms.indexOf(atom);
+                            if (idx > -1) atoms.splice(idx, 1);
+                        }
+                    });
+                });
+
+                // Fade out liaisons
+                const bondsToRemove = bonds.filter(b =>
+                    moleculeToRemove.atoms.includes(b.from) || moleculeToRemove.atoms.includes(b.to)
+                );
+                bondsToRemove.forEach(bond => {
+                    anime({
+                        targets: bond,
+                        opacity: 0,
+                        duration: 400,
+                        easing: 'easeInQuad',
+                        complete: () => {
+                            const idx = bonds.indexOf(bond);
+                            if (idx > -1) bonds.splice(idx, 1);
+                        }
+                    });
+                });
+
+                molecules.splice(molecules.indexOf(moleculeToRemove), 1);
+
+                // Créer nouvelle molécule
+                setTimeout(() => {
+                    const templateNames = Object.keys(moleculeTemplates);
+                    const template = moleculeTemplates[templateNames[Math.floor(Math.random() * templateNames.length)]];
+                    const newIdx = molecules.length;
+                    createMoleculeFromTemplate(template, newIdx, molecules.length + 1);
+
+                    // Animer la nouvelle molécule
+                    const newMolecule = molecules[molecules.length - 1];
+                    newMolecule.atoms.forEach((atom, i) => {
+                        anime({
+                            targets: atom,
+                            scale: 1,
+                            opacity: atom.targetOpacity,
+                            duration: 800,
+                            delay: i * 30,
+                            easing: 'easeOutElastic(1, .6)'
+                        });
+                    });
+
+                    const newBonds = bonds.filter(b => newMolecule.atoms.includes(b.from));
+                    newBonds.forEach((bond, i) => {
+                        anime({
+                            targets: bond,
+                            opacity: bond.targetOpacity,
+                            duration: 600,
+                            delay: i * 20,
+                            easing: 'easeOutQuad'
+                        });
+                    });
+                }, 700);
+            };
+
+            const update = () => {
+                atoms.forEach(atom => {
+                    atom.vibrationPhase += atom.vibrationSpeed;
+                    const vx = Math.cos(atom.vibrationPhase) * atom.vibrationAmplitude;
+                    const vy = Math.sin(atom.vibrationPhase * 1.3) * atom.vibrationAmplitude;
+                    atom.x = atom.baseX + vx;
+                    atom.y = atom.baseY + vy;
+                });
+
+                molecules.forEach(molecule => {
+                    molecule.rotation += molecule.rotationSpeed;
+                    molecule.atoms.forEach(atom => {
+                        const dx = atom.baseX - molecule.centerX;
+                        const dy = atom.baseY - molecule.centerY;
+                        const dist = Math.sqrt(dx * dx + dy * dy);
+                        const currentAngle = Math.atan2(dy, dx);
+                        const newAngle = currentAngle + molecule.rotationSpeed;
+                        atom.baseX = molecule.centerX + Math.cos(newAngle) * dist;
+                        atom.baseY = molecule.centerY + Math.sin(newAngle) * dist;
+                    });
+                });
+
+                bonds.forEach(bond => {
+                    bond.vibrationPhase += 0.015;
+                });
+            };
+
+            const draw = () => {
+                ctx.clearRect(0, 0, width, height);
+
+                // Draw bonds
+                bonds.forEach(bond => {
+                    if (bond.opacity < 0.01) return;
+                    const from = bond.from;
+                    const to = bond.to;
+                    const vibration = Math.sin(bond.vibrationPhase) * 0.2;
+                    const rgb = colors.bond.match(/[\d.]+/g);
+                    ctx.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${bond.opacity})`;
+                    ctx.lineWidth = 2 + vibration;
+
+                    if (bond.strength === 2) {
+                        const dx = to.x - from.x;
+                        const dy = to.y - from.y;
+                        const dist = Math.sqrt(dx * dx + dy * dy);
+                        const offsetX = -dy / dist * 2.5;
+                        const offsetY = dx / dist * 2.5;
+                        ctx.beginPath();
+                        ctx.moveTo(from.x + offsetX, from.y + offsetY);
+                        ctx.lineTo(to.x + offsetX, to.y + offsetY);
+                        ctx.stroke();
+                        ctx.beginPath();
+                        ctx.moveTo(from.x - offsetX, from.y - offsetY);
+                        ctx.lineTo(to.x - offsetX, to.y - offsetY);
+                        ctx.stroke();
+                    } else if (bond.strength === 3) {
+                        const dx = to.x - from.x;
+                        const dy = to.y - from.y;
+                        const dist = Math.sqrt(dx * dx + dy * dy);
+                        const offsetX = -dy / dist * 3;
+                        const offsetY = dx / dist * 3;
+                        ctx.beginPath();
+                        ctx.moveTo(from.x, from.y);
+                        ctx.lineTo(to.x, to.y);
+                        ctx.stroke();
+                        ctx.beginPath();
+                        ctx.moveTo(from.x + offsetX, from.y + offsetY);
+                        ctx.lineTo(to.x + offsetX, to.y + offsetY);
+                        ctx.stroke();
+                        ctx.beginPath();
+                        ctx.moveTo(from.x - offsetX, from.y - offsetY);
+                        ctx.lineTo(to.x - offsetX, to.y - offsetY);
+                        ctx.stroke();
+                    } else {
+                        ctx.beginPath();
+                        ctx.moveTo(from.x, from.y);
+                        ctx.lineTo(to.x, to.y);
+                        ctx.stroke();
+                    }
+                });
+
+                // Draw atoms
+                atoms.forEach(atom => {
+                    if (atom.opacity < 0.01) return;
+                    const finalSize = atom.size * atom.scale;
+
+                    if (atom.scale > 1.1) {
+                        const glowRadius = finalSize * 2;
+                        const gradient = ctx.createRadialGradient(atom.x, atom.y, 0, atom.x, atom.y, glowRadius);
+                        gradient.addColorStop(0, colors.glow.replace(/[\d.]+\)$/, `${atom.opacity * 0.4})`));
+                        gradient.addColorStop(1, colors.glow.replace(/[\d.]+\)$/, '0)'));
+                        ctx.fillStyle = gradient;
+                        ctx.beginPath();
+                        ctx.arc(atom.x, atom.y, glowRadius, 0, Math.PI * 2);
+                        ctx.fill();
+                    }
+
+                    ctx.fillStyle = colors.atoms[atom.type];
+                    ctx.beginPath();
+                    ctx.arc(atom.x, atom.y, finalSize, 0, Math.PI * 2);
+                    ctx.fill();
+
+                    ctx.strokeStyle = `rgba(255, 255, 255, ${atom.opacity * 0.3})`;
+                    ctx.lineWidth = 1.5;
+                    ctx.stroke();
+
+                    const highlightGradient = ctx.createRadialGradient(
+                        atom.x - finalSize * 0.3, atom.y - finalSize * 0.3, 0,
+                        atom.x, atom.y, finalSize
+                    );
+                    highlightGradient.addColorStop(0, `rgba(255, 255, 255, ${atom.opacity * 0.5})`);
+                    highlightGradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+                    ctx.fillStyle = highlightGradient;
+                    ctx.beginPath();
+                    ctx.arc(atom.x, atom.y, finalSize, 0, Math.PI * 2);
+                    ctx.fill();
+                });
+
+                update();
+                requestAnimationFrame(draw);
+            };
+
+            if (window.ResizeObserver) {
+                const ro = new ResizeObserver(resize);
+                ro.observe(container);
+            } else {
+                window.addEventListener('resize', resize);
+            }
+
+            resize();
+            draw();
+        };
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => ensureAnime(bootstrap), { once: true });
+        } else {
+            ensureAnime(bootstrap);
+        }
+    })();
+</script>

app/src/content/embeds/banner-neural-network-animejs.html

@@ -0,0 +1,464 @@
+<div class="neural-flow"
+    style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;position:relative;overflow:hidden;"></div>
+<script>
+    (() => {
+        const ensureAnime = (cb) => {
+            if (window.anime && typeof window.anime === 'function') return cb();
+            let s = document.getElementById('anime-cdn-script');
+            if (!s) {
+                s = document.createElement('script');
+                s.id = 'anime-cdn-script';
+                s.src = 'https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js';
+                document.head.appendChild(s);
+            }
+            const onReady = () => { if (window.anime && typeof window.anime === 'function') cb(); };
+            s.addEventListener('load', onReady, { once: true });
+            if (window.anime) onReady();
+        };
+
+        const bootstrap = () => {
+            const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+            const container = (mount && mount.querySelector && mount.querySelector('.neural-flow')) || document.querySelector('.neural-flow');
+            if (!container) return;
+            if (container.dataset) {
+                if (container.dataset.mounted === 'true') return;
+                container.dataset.mounted = 'true';
+            }
+
+            // Create canvas
+            const canvas = document.createElement('canvas');
+            canvas.style.display = 'block';
+            canvas.style.width = '100%';
+            canvas.style.height = '100%';
+            container.appendChild(canvas);
+            const ctx = canvas.getContext('2d');
+
+            // Theme colors
+            const getColors = () => {
+                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+                return {
+                    node: isDark ? 'rgba(206, 192, 250, 0.85)' : 'rgba(138, 100, 220, 0.8)',
+                    nodeActive: isDark ? 'rgba(232, 137, 171, 1)' : 'rgba(220, 80, 130, 1)',
+                    nodeGlow: isDark ? 'rgba(206, 192, 250, 0.4)' : 'rgba(138, 100, 220, 0.3)',
+                    connection: isDark ? 'rgba(78, 165, 183, 0.08)' : 'rgba(78, 165, 183, 0.15)',
+                    connectionActive: isDark ? 'rgba(232, 137, 171, 0.6)' : 'rgba(220, 80, 130, 0.5)',
+                    accent: isDark ? 'rgba(78, 165, 183, 0.9)' : 'rgba(50, 130, 160, 0.85)',
+                    particle: isDark ? 'rgba(232, 137, 171, 1)' : 'rgba(220, 80, 130, 1)',
+                };
+            };
+
+            let colors = getColors();
+
+            // Watch for theme changes
+            const observer = new MutationObserver(() => {
+                colors = getColors();
+            });
+            observer.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['data-theme']
+            });
+
+            // Neural network structure
+            const layers = [
+                { nodes: 6, name: 'input' },
+                { nodes: 10, name: 'hidden1' },
+                { nodes: 8, name: 'hidden2' },
+                { nodes: 4, name: 'output' }
+            ];
+
+            let nodes = [];
+            let connections = [];
+            let particles = [];
+            let width, height;
+
+            const resize = () => {
+                width = container.clientWidth || 800;
+                height = Math.max(260, Math.round(width / 3));
+                canvas.width = width;
+                canvas.height = height;
+                initNetwork();
+            };
+
+            const initNetwork = () => {
+                nodes = [];
+                connections = [];
+                particles = [];
+
+                const layerSpacing = width / (layers.length + 1);
+                const margin = height * 0.15;
+
+                // Create ALL nodes first
+                let nodeIndex = 0;
+                const layerStartIndices = [];
+
+                layers.forEach((layer, layerIdx) => {
+                    layerStartIndices.push(nodeIndex);
+                    const x = layerSpacing * (layerIdx + 1);
+                    const availableHeight = height - 2 * margin;
+                    const nodeSpacing = availableHeight / (layer.nodes + 1);
+
+                    for (let i = 0; i < layer.nodes; i++) {
+                        const y = margin + nodeSpacing * (i + 1);
+                        const node = {
+                            x,
+                            y,
+                            layer: layerIdx,
+                            index: i,
+                            radius: 0,
+                            targetRadius: 3.5 + Math.random() * 1.5,
+                            pulse: Math.random() * Math.PI * 2,
+                            activation: 0,
+                            baseActivity: Math.random() * 0.1
+                        };
+                        nodes.push(node);
+                        nodeIndex++;
+                    }
+                });
+
+                // Create FULLY CONNECTED network
+                layers.forEach((layer, layerIdx) => {
+                    if (layerIdx < layers.length - 1) {
+                        const currentLayerStart = layerStartIndices[layerIdx];
+                        const nextLayerStart = layerStartIndices[layerIdx + 1];
+                        const nextLayerNodes = layers[layerIdx + 1].nodes;
+
+                        for (let i = 0; i < layer.nodes; i++) {
+                            for (let j = 0; j < nextLayerNodes; j++) {
+                                connections.push({
+                                    from: currentLayerStart + i,
+                                    to: nextLayerStart + j,
+                                    weight: Math.random(),
+                                    opacity: 0,
+                                    activation: 0
+                                });
+                            }
+                        }
+                    }
+                });
+
+                // Initial animation - nodes appear (plus rapide)
+                nodes.forEach((node, i) => {
+                    anime({
+                        targets: node,
+                        radius: node.targetRadius,
+                        duration: 800,
+                        delay: i * 8,
+                        easing: 'easeOutElastic(1, .6)'
+                    });
+                });
+
+                // Connections fade in (plus rapide)
+                connections.forEach((conn, i) => {
+                    anime({
+                        targets: conn,
+                        opacity: 1,
+                        duration: 400,
+                        delay: 300 + i * 1,
+                        easing: 'easeOutQuad'
+                    });
+                });
+
+                // Start forward propagation cycles (plus rapide)
+                setTimeout(() => {
+                    startForwardPass();
+                    setInterval(startForwardPass, 2500 + Math.random() * 1000);
+                }, 1000);
+            };
+
+            // Différents patterns d'activation
+            const activationPatterns = [
+                // Pattern 1: Tous les inputs
+                (inputNodes) => inputNodes,
+
+                // Pattern 2: Un seul input (signal focal)
+                (inputNodes) => [inputNodes[Math.floor(Math.random() * inputNodes.length)]],
+
+                // Pattern 3: Moitié haute
+                (inputNodes) => inputNodes.slice(0, Math.ceil(inputNodes.length / 2)),
+
+                // Pattern 4: Moitié basse
+                (inputNodes) => inputNodes.slice(Math.floor(inputNodes.length / 2)),
+
+                // Pattern 5: Pattern alterné
+                (inputNodes) => inputNodes.filter((_, i) => i % 2 === 0),
+
+                // Pattern 6: 2-3 inputs aléatoires
+                (inputNodes) => {
+                    const num = 2 + Math.floor(Math.random() * 2);
+                    return [...inputNodes].sort(() => Math.random() - 0.5).slice(0, num);
+                },
+
+                // Pattern 7: Cascade (un par un avec délai)
+                (inputNodes) => inputNodes.slice(0, 3 + Math.floor(Math.random() * 3))
+            ];
+
+            const startForwardPass = () => {
+                const inputNodes = nodes.filter(n => n.layer === 0);
+
+                // Choisir un pattern aléatoire
+                const pattern = activationPatterns[Math.floor(Math.random() * activationPatterns.length)];
+                const activeInputs = pattern(inputNodes);
+
+                // Activer les inputs (plus rapide)
+                activeInputs.forEach((node, idx) => {
+                    anime({
+                        targets: node,
+                        activation: 0.8 + Math.random() * 0.2,
+                        duration: 200,
+                        delay: idx * 60,
+                        easing: 'easeOutQuad',
+                        complete: () => {
+                            anime({
+                                targets: node,
+                                activation: node.baseActivity,
+                                duration: 250,
+                                delay: 400,
+                                easing: 'easeInQuad'
+                            });
+                        }
+                    });
+                });
+
+                // Propager à travers TOUTES les couches (plus rapide)
+                for (let layerIdx = 0; layerIdx < layers.length - 1; layerIdx++) {
+                    setTimeout(() => {
+                        propagateLayer(layerIdx);
+                    }, 250 + layerIdx * 350);
+                }
+            };
+
+            const propagateLayer = (fromLayerIdx) => {
+                const fromNodes = nodes.filter(n => n.layer === fromLayerIdx);
+                const toNodes = nodes.filter(n => n.layer === fromLayerIdx + 1);
+
+                const layerConnections = connections.filter(c => {
+                    const fromNode = nodes[c.from];
+                    const toNode = nodes[c.to];
+                    return fromNode.layer === fromLayerIdx && toNode.layer === fromLayerIdx + 1;
+                });
+
+                // Activer connections et créer particules
+                layerConnections.forEach((conn, idx) => {
+                    const fromNode = nodes[conn.from];
+                    const activationStrength = fromNode.activation * conn.weight;
+
+                    if (activationStrength > 0.2) {
+                        anime({
+                            targets: conn,
+                            activation: activationStrength,
+                            duration: 300,
+                            delay: idx * 1,
+                            easing: 'easeOutQuad',
+                            complete: () => {
+                                anime({
+                                    targets: conn,
+                                    activation: 0,
+                                    duration: 250,
+                                    easing: 'easeInQuad'
+                                });
+                            }
+                        });
+
+                        // Créer particule qui voyage le long de la connexion
+                        if (Math.random() < 0.3) { // Pas sur toutes les connexions
+                            createParticle(conn, activationStrength);
+                        }
+                    }
+                });
+
+                // Activer les nœuds cibles (plus rapide)
+                setTimeout(() => {
+                    toNodes.forEach(toNode => {
+                        const toNodeIdx = nodes.indexOf(toNode);
+                        const incomingConns = layerConnections.filter(c => c.to === toNodeIdx);
+
+                        let sum = 0;
+                        incomingConns.forEach(conn => {
+                            const fromNode = nodes[conn.from];
+                            sum += fromNode.activation * conn.weight;
+                        });
+
+                        const activation = Math.min(1, sum / incomingConns.length * 1.5);
+
+                        if (activation > 0.25) {
+                            anime({
+                                targets: toNode,
+                                activation: activation,
+                                duration: 200,
+                                easing: 'easeOutQuad',
+                                complete: () => {
+                                    anime({
+                                        targets: toNode,
+                                        activation: toNode.baseActivity,
+                                        duration: 400,
+                                        delay: 300,
+                                        easing: 'easeInQuad'
+                                    });
+                                }
+                            });
+                        }
+                    });
+                }, 150);
+            };
+
+            const createParticle = (connection, strength) => {
+                const fromNode = nodes[connection.from];
+                const toNode = nodes[connection.to];
+                if (!fromNode || !toNode) return;
+
+                const particle = {
+                    fromX: fromNode.x,
+                    fromY: fromNode.y,
+                    toX: toNode.x,
+                    toY: toNode.y,
+                    progress: 0,
+                    strength: strength,
+                    size: 1.5 + strength * 1.5,
+                    trail: []
+                };
+
+                particles.push(particle);
+
+                anime({
+                    targets: particle,
+                    progress: 1,
+                    duration: 350,
+                    easing: 'easeInOutQuad',
+                    complete: () => {
+                        // Retirer la particule
+                        const idx = particles.indexOf(particle);
+                        if (idx > -1) particles.splice(idx, 1);
+                    }
+                });
+            };
+
+            const draw = () => {
+                // Pas de background - transparent
+                ctx.clearRect(0, 0, width, height);
+
+                // Draw connections
+                connections.forEach(conn => {
+                    if (conn.opacity < 0.01) return;
+
+                    const fromNode = nodes[conn.from];
+                    const toNode = nodes[conn.to];
+                    if (!fromNode || !toNode) return;
+
+                    const baseOpacity = conn.opacity * conn.weight * 0.5;
+                    const activeOpacity = conn.activation;
+                    const totalOpacity = Math.max(baseOpacity, activeOpacity);
+
+                    if (totalOpacity < 0.01) return;
+
+                    const isActive = conn.activation > 0.1;
+                    const connectionColor = isActive ? colors.connectionActive : colors.connection;
+
+                    ctx.beginPath();
+                    ctx.moveTo(fromNode.x, fromNode.y);
+                    ctx.lineTo(toNode.x, toNode.y);
+
+                    const rgb = connectionColor.match(/[\d.]+/g);
+                    ctx.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${totalOpacity})`;
+                    ctx.lineWidth = isActive ? 1.5 : 0.8;
+                    ctx.stroke();
+                });
+
+                // Draw particles
+                particles.forEach(particle => {
+                    const x = particle.fromX + (particle.toX - particle.fromX) * particle.progress;
+                    const y = particle.fromY + (particle.toY - particle.fromY) * particle.progress;
+
+                    // Trail
+                    particle.trail.push({ x, y });
+                    if (particle.trail.length > 5) particle.trail.shift();
+
+                    particle.trail.forEach((point, i) => {
+                        const alpha = (i / particle.trail.length) * particle.strength;
+                        const size = particle.size * alpha * 0.6;
+
+                        ctx.beginPath();
+                        ctx.arc(point.x, point.y, size, 0, Math.PI * 2);
+                        const rgb = colors.particle.match(/[\d.]+/g);
+                        ctx.fillStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha * 0.5})`;
+                        ctx.fill();
+                    });
+
+                    // Particle principale
+                    ctx.beginPath();
+                    ctx.arc(x, y, particle.size, 0, Math.PI * 2);
+                    ctx.fillStyle = colors.particle;
+                    ctx.shadowBlur = 8;
+                    ctx.shadowColor = colors.particle;
+                    ctx.fill();
+                    ctx.shadowBlur = 0;
+                });
+
+                // Draw nodes
+                nodes.forEach((node, i) => {
+                    if (node.radius < 0.1) return;
+
+                    node.pulse += 0.015;
+                    const pulseSize = 1 + Math.sin(node.pulse) * 0.08;
+                    const activationBoost = node.activation * 1.8;
+                    const finalRadius = node.radius * pulseSize + activationBoost;
+
+                    // Glow for active nodes
+                    if (node.activation > 0.15) {
+                        const glowRadius = finalRadius * 4;
+                        const gradient = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, glowRadius);
+                        const glowAlpha = node.activation * 0.5;
+                        gradient.addColorStop(0, colors.nodeGlow.replace(/[\d.]+\)$/, `${glowAlpha})`));
+                        gradient.addColorStop(1, colors.nodeGlow.replace(/[\d.]+\)$/, '0)'));
+                        ctx.beginPath();
+                        ctx.arc(node.x, node.y, glowRadius, 0, Math.PI * 2);
+                        ctx.fillStyle = gradient;
+                        ctx.fill();
+                    }
+
+                    // Node color based on activation
+                    const t = Math.min(1, node.activation / 0.8);
+
+                    const baseRgb = colors.node.match(/[\d.]+/g);
+                    const activeRgb = colors.nodeActive.match(/[\d.]+/g);
+                    const r = parseFloat(baseRgb[0]) + (parseFloat(activeRgb[0]) - parseFloat(baseRgb[0])) * t;
+                    const g = parseFloat(baseRgb[1]) + (parseFloat(activeRgb[1]) - parseFloat(baseRgb[1])) * t;
+                    const b = parseFloat(baseRgb[2]) + (parseFloat(activeRgb[2]) - parseFloat(baseRgb[2])) * t;
+                    const a = parseFloat(baseRgb[3]) + (parseFloat(activeRgb[3]) - parseFloat(baseRgb[3])) * t;
+
+                    // Node
+                    ctx.beginPath();
+                    ctx.arc(node.x, node.y, finalRadius, 0, Math.PI * 2);
+                    ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
+                    ctx.fill();
+
+                    // Inner core for active nodes
+                    if (node.activation > 0.4) {
+                        ctx.beginPath();
+                        ctx.arc(node.x, node.y, finalRadius * 0.4, 0, Math.PI * 2);
+                        ctx.fillStyle = colors.accent.replace(/[\d.]+\)$/, `${node.activation})`);
+                        ctx.fill();
+                    }
+                });
+
+                requestAnimationFrame(draw);
+            };
+
+            // Start
+            if (window.ResizeObserver) {
+                const ro = new ResizeObserver(resize);
+                ro.observe(container);
+            } else {
+                window.addEventListener('resize', resize);
+            }
+
+            resize();
+            draw();
+        };
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => ensureAnime(bootstrap), { once: true });
+        } else {
+            ensureAnime(bootstrap);
+        }
+    })();
+</script>

app/src/content/embeds/banner-threejs-galaxy.html

@@ -0,0 +1,504 @@
+<div class="threejs-galaxy" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;"></div>
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
+    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
+  }
+}
+</script>
+<style>
+    .threejs-galaxy {
+        overflow: visible;
+        background: transparent;
+    }
+
+    .threejs-galaxy canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+
+    .threejs-galaxy .tp-dfwv {
+        position: absolute !important;
+        top: 16px !important;
+        right: 16px !important;
+        z-index: 100 !important;
+    }
+</style>
+<script type="module">
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+    import { Pane } from 'https://cdn.jsdelivr.net/npm/tweakpane@4.0.3/dist/tweakpane.js';
+
+    const container = document.querySelector('.threejs-galaxy');
+    if (!container || container.dataset.mounted === 'true') {
+        if (container) console.log('Container already mounted');
+    } else {
+        container.dataset.mounted = 'true';
+
+        // === Scene Setup ===
+        const scene = new THREE.Scene();
+
+        const camera = new THREE.PerspectiveCamera(
+            35,
+            container.clientWidth / Math.max(260, Math.round(container.clientWidth / 3)),
+            0.1,
+            100
+        );
+        // Vue du dessus avec angle pour voir la profondeur - plus proche pour remplir l'espace
+        camera.position.set(-0.03, 1.75, 5.71);
+        camera.rotation.set(-0.43, -0.01, -0.01);
+
+        const renderer = new THREE.WebGLRenderer({
+            antialias: true,
+            alpha: true,
+            powerPreference: 'high-performance'
+        });
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+        renderer.setClearColor(0x000000, 0);
+        container.appendChild(renderer.domElement);
+
+        // === OrbitControls ===
+        const controls = new OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.05;
+        controls.autoRotate = true;
+        controls.autoRotateSpeed = 0.5;
+        controls.enableZoom = true;
+        controls.enablePan = true;
+        controls.panSpeed = 0.5;
+        controls.minDistance = 3;
+        controls.maxDistance = 12;
+        controls.target.set(0.04, -0.75, 0.26);
+
+        // Track pane visibility for logging
+        let paneVisible = false;
+
+        // Log camera position and rotation on change (only when pane is visible)
+        controls.addEventListener('change', () => {
+            if (paneVisible) {
+                console.log('Camera Position:', `camera.position.set(${camera.position.x.toFixed(2)}, ${camera.position.y.toFixed(2)}, ${camera.position.z.toFixed(2)});`);
+                console.log('Camera Rotation:', `camera.rotation.set(${camera.rotation.x.toFixed(2)}, ${camera.rotation.y.toFixed(2)}, ${camera.rotation.z.toFixed(2)});`);
+                console.log('Target (Center):', `controls.target.set(${controls.target.x.toFixed(2)}, ${controls.target.y.toFixed(2)}, ${controls.target.z.toFixed(2)});`);
+                console.log('---');
+            }
+        });
+
+        // === Galaxy Parameters ===
+        // Detect current theme
+        const isDarkMode = () => document.documentElement.getAttribute('data-theme') === 'dark';
+
+        const params = {
+            count: 12000,
+            size: 150,
+            whiteSize: 25,
+            sizeVariation: 0.8,
+            radius: 4,
+            branches: 2,
+            spin: 3.0,
+            randomness: 0.3,
+            randomnessPower: 3,
+            centerSizeBoost: 1.5,
+            insideColor: isDarkMode() ? '#ff6030' : '#ff8050',
+            outsideColor: isDarkMode() ? '#1b3984' : '#3d5fa8',
+            fov: 35
+        };
+
+        // === Tweakpane ===
+        const pane = new Pane({
+            container: container,
+            title: 'Galaxy Controls'
+        });
+
+        // Hide pane by default
+        pane.element.style.display = 'none';
+
+        let geometry = null;
+        let material = null;
+        let points = null;
+        let whiteGeometry = null;
+        let whiteMaterial = null;
+        let whitePoints = null;
+
+        // === Animation Clock ===
+        const clock = new THREE.Clock();
+
+        // === Generate Galaxy Function ===
+        const generateGalaxy = () => {
+            // Destroy old galaxy
+            if (points !== null) {
+                geometry.dispose();
+                material.dispose();
+                scene.remove(points);
+            }
+
+            // Destroy old white points
+            if (whitePoints !== null) {
+                whiteGeometry.dispose();
+                whiteMaterial.dispose();
+                scene.remove(whitePoints);
+            }
+
+            // New geometry
+            geometry = new THREE.BufferGeometry();
+
+            const positions = new Float32Array(params.count * 3);
+            const colors = new Float32Array(params.count * 3);
+            const scales = new Float32Array(params.count);
+
+            const colorInside = new THREE.Color(params.insideColor);
+            const colorOutside = new THREE.Color(params.outsideColor);
+
+            for (let i = 0; i < params.count; i++) {
+                const i3 = i * 3;
+
+                // Position sur le rayon
+                const radius = Math.random() * params.radius;
+                const radiusRatio = radius / params.radius;
+
+                // Angle de la branche
+                const branchAngle = (i % params.branches) / params.branches * Math.PI * 2;
+
+                // Angle de spin (twist)
+                const spinAngle = radius * params.spin;
+
+                // Randomness
+                const randomX = Math.pow(Math.random(), params.randomnessPower) * (Math.random() < 0.5 ? 1 : -1) * params.randomness * radius;
+                const randomY = Math.pow(Math.random(), params.randomnessPower) * (Math.random() < 0.5 ? 1 : -1) * params.randomness * radius * 0.3;
+                const randomZ = Math.pow(Math.random(), params.randomnessPower) * (Math.random() < 0.5 ? 1 : -1) * params.randomness * radius;
+
+                // Position finale en 3D
+                positions[i3] = Math.cos(branchAngle + spinAngle) * radius + randomX;
+                positions[i3 + 1] = randomY;
+                positions[i3 + 2] = Math.sin(branchAngle + spinAngle) * radius + randomZ;
+
+                // Couleur
+                const mixedColor = colorInside.clone();
+                mixedColor.lerp(colorOutside, radiusRatio);
+
+                colors[i3] = mixedColor.r;
+                colors[i3 + 1] = mixedColor.g;
+                colors[i3 + 2] = mixedColor.b;
+
+                // Échelle : plus gros au centre, linéairement décroissant vers l'extérieur
+                const centerScale = (1.0 + params.centerSizeBoost) - radiusRatio * params.centerSizeBoost;
+                // Variation aléatoire contrôlée par sizeVariation
+                const randomScale = Math.pow(Math.random(), 2.0) * params.sizeVariation;
+                scales[i] = randomScale + centerScale;
+            }
+
+            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            geometry.setAttribute('aScale', new THREE.BufferAttribute(scales, 1));
+
+            // === Shader Material ===
+            material = new THREE.ShaderMaterial({
+                depthWrite: false,
+                blending: THREE.AdditiveBlending,
+                vertexColors: true,
+                uniforms: {
+                    uTime: { value: 0 },
+                    uSize: { value: params.size * renderer.getPixelRatio() }
+                },
+                vertexShader: `
+                    uniform float uTime;
+                    uniform float uSize;
+                    
+                    attribute float aScale;
+                    
+                    varying vec3 vColor;
+                    
+                    void main() {
+                        vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+                        
+                        vec4 viewPosition = viewMatrix * modelPosition;
+                        vec4 projectedPosition = projectionMatrix * viewPosition;
+                        gl_Position = projectedPosition;
+                        
+                        // Taille des points
+                        gl_PointSize = uSize * aScale;
+                        gl_PointSize *= (1.0 / -viewPosition.z);
+                        
+                        vColor = color;
+                    }
+                `,
+                fragmentShader: `
+                    varying vec3 vColor;
+                    
+                    void main() {
+                        float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
+                        
+                        // Noyau brillant
+                        float core = 1.0 - smoothstep(0.0, 0.25, distanceToCenter);
+                        core = pow(core, 2.0);
+                        
+                        // Halo externe
+                        float halo = 1.0 - smoothstep(0.15, 0.5, distanceToCenter);
+                        halo = pow(halo, 3.0);
+                        
+                        // Combinaison
+                        float strength = max(core, halo * 0.3);
+                        
+                        // Couleur finale (adaptée au thème)
+                        float coreIntensity = ${isDarkMode() ? '0.8' : '0.7'};
+                        float haloIntensity = ${isDarkMode() ? '0.4' : '0.35'};
+                        vec3 coreColor = vColor * coreIntensity;
+                        vec3 haloColor = vColor * haloIntensity;
+                        vec3 finalColor = mix(haloColor, coreColor, core);
+                        
+                        // Alpha adapté au thème
+                        float alpha = strength * ${isDarkMode() ? '0.6' : '0.5'};
+                        
+                        gl_FragColor = vec4(finalColor, alpha);
+                    }
+                `
+            });
+
+            // === Points ===
+            points = new THREE.Points(geometry, material);
+            scene.add(points);
+
+            // === White Points (50% random subset) ===
+            const whiteCount = Math.floor(params.count * 0.5);
+            const whitePositions = new Float32Array(whiteCount * 3);
+            const whiteScales = new Float32Array(whiteCount);
+
+            // Sélectionner aléatoirement 50% des indices
+            const indices = Array.from({ length: params.count }, (_, i) => i);
+            // Mélanger les indices (Fisher-Yates shuffle)
+            for (let i = indices.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [indices[i], indices[j]] = [indices[j], indices[i]];
+            }
+            const selectedIndices = indices.slice(0, whiteCount);
+
+            // Copier les positions sélectionnées et créer des échelles plus petites
+            for (let i = 0; i < whiteCount; i++) {
+                const sourceIdx = selectedIndices[i];
+                whitePositions[i * 3] = positions[sourceIdx * 3];
+                whitePositions[i * 3 + 1] = positions[sourceIdx * 3 + 1];
+                whitePositions[i * 3 + 2] = positions[sourceIdx * 3 + 2];
+
+                // Échelles beaucoup plus petites pour les points blancs
+                whiteScales[i] = (Math.random() * 0.2 + 0.2) / 6;
+            }
+
+            whiteGeometry = new THREE.BufferGeometry();
+            whiteGeometry.setAttribute('position', new THREE.BufferAttribute(whitePositions, 3));
+            whiteGeometry.setAttribute('aScale', new THREE.BufferAttribute(whiteScales, 1));
+
+            // Matériau pour les points blancs
+            whiteMaterial = new THREE.ShaderMaterial({
+                depthWrite: false,
+                blending: THREE.AdditiveBlending,
+                uniforms: {
+                    uTime: { value: 0 },
+                    uSize: { value: params.whiteSize * renderer.getPixelRatio() }
+                },
+                vertexShader: `
+                    uniform float uTime;
+                    uniform float uSize;
+                    
+                    attribute float aScale;
+                    
+                    void main() {
+                        vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+                        
+                        vec4 viewPosition = viewMatrix * modelPosition;
+                        vec4 projectedPosition = projectionMatrix * viewPosition;
+                        gl_Position = projectedPosition;
+                        
+                        gl_PointSize = uSize * aScale;
+                        gl_PointSize *= (1.0 / -viewPosition.z);
+                    }
+                `,
+                fragmentShader: `
+                    void main() {
+                        float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
+                        
+                        // Créer une boule bien définie
+                        float strength = 1.0 - smoothstep(0.3, 0.5, distanceToCenter);
+                        strength = pow(strength, 2.0);
+                        
+                        // Couleur blanche (adaptée au thème)
+                        vec3 whiteColor = vec3(${isDarkMode() ? '1.0, 1.0, 1.0' : '0.95, 0.95, 0.98'});
+                        
+                        gl_FragColor = vec4(whiteColor, strength * ${isDarkMode() ? '0.8' : '0.9'});
+                    }
+                `
+            });
+
+            whitePoints = new THREE.Points(whiteGeometry, whiteMaterial);
+            scene.add(whitePoints);
+
+        };
+
+        // Generate initial galaxy
+        generateGalaxy();
+
+        // === Tweakpane Controls ===
+        pane.addBinding(params, 'count', {
+            label: 'Particles',
+            min: 1000,
+            max: 50000,
+            step: 1000
+        }).on('change', () => {
+            generateGalaxy();
+        });
+
+        pane.addBinding(params, 'spin', {
+            label: 'Twist',
+            min: 0,
+            max: 5,
+            step: 0.1
+        }).on('change', () => {
+            generateGalaxy();
+        });
+
+        pane.addBinding(params, 'size', {
+            label: 'Point Size',
+            min: 10,
+            max: 200,
+            step: 1
+        }).on('change', () => {
+            if (material) {
+                material.uniforms.uSize.value = params.size * renderer.getPixelRatio();
+            }
+        });
+
+        pane.addBinding(params, 'sizeVariation', {
+            label: 'Size Variation',
+            min: 0,
+            max: 2,
+            step: 0.05
+        }).on('change', () => {
+            generateGalaxy();
+        });
+
+        pane.addBinding(params, 'whiteSize', {
+            label: 'White Size',
+            min: 5,
+            max: 100,
+            step: 1
+        }).on('change', () => {
+            if (whiteMaterial) {
+                whiteMaterial.uniforms.uSize.value = params.whiteSize * renderer.getPixelRatio();
+            }
+        });
+
+        pane.addBinding(params, 'centerSizeBoost', {
+            label: 'Center Boost',
+            min: 0,
+            max: 3,
+            step: 0.1
+        }).on('change', () => {
+            generateGalaxy();
+        });
+
+        pane.addBinding(params, 'branches', {
+            label: 'Branches',
+            min: 2,
+            max: 6,
+            step: 1
+        }).on('change', () => {
+            generateGalaxy();
+        });
+
+        pane.addBinding(params, 'fov', {
+            label: 'FOV (Zoom)',
+            min: 20,
+            max: 75,
+            step: 1
+        }).on('change', () => {
+            camera.fov = params.fov;
+            camera.updateProjectionMatrix();
+        });
+
+        // === Animation ===
+        const animate = () => {
+            requestAnimationFrame(animate);
+
+            const elapsedTime = clock.getElapsedTime();
+
+            if (material) {
+                material.uniforms.uTime.value = elapsedTime;
+            }
+
+            // Mise à jour des contrôles OrbitControls (gère la rotation automatique)
+            controls.update();
+
+            renderer.render(scene, camera);
+        };
+
+        // === Resize ===
+        const onResize = () => {
+            const width = container.clientWidth;
+            const height = Math.max(260, Math.round(width / 3));
+
+            camera.aspect = width / height;
+            camera.updateProjectionMatrix();
+
+            renderer.setSize(width, height);
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+
+            if (material) {
+                material.uniforms.uSize.value = params.size * renderer.getPixelRatio();
+            }
+            if (whiteMaterial) {
+                whiteMaterial.uniforms.uSize.value = params.whiteSize * renderer.getPixelRatio();
+            }
+        };
+
+        onResize();
+
+        if (window.ResizeObserver) {
+            new ResizeObserver(onResize).observe(container);
+        } else {
+            window.addEventListener('resize', onResize);
+        }
+
+        // === Theme Support ===
+        const updateTheme = () => {
+            renderer.setClearColor(0x000000, 0);
+            // Update colors based on theme
+            params.insideColor = isDarkMode() ? '#ff6030' : '#ff8050';
+            params.outsideColor = isDarkMode() ? '#1b3984' : '#3d5fa8';
+            // Regenerate galaxy with new colors
+            generateGalaxy();
+        };
+
+        const observer = new MutationObserver(updateTheme);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-theme']
+        });
+
+        // === Keyboard Controls ===
+        window.addEventListener('keydown', (event) => {
+            if (event.key === 'd' || event.key === 'D') {
+                paneVisible = !paneVisible;
+                if (paneVisible) {
+                    pane.element.style.display = '';
+                } else {
+                    pane.element.style.display = 'none';
+                }
+            }
+        });
+
+        // === Start ===
+        animate();
+
+        // === Cleanup ===
+        container._cleanup = () => {
+            observer.disconnect();
+            if (geometry) geometry.dispose();
+            if (material) material.dispose();
+            if (whiteGeometry) whiteGeometry.dispose();
+            if (whiteMaterial) whiteMaterial.dispose();
+            controls.dispose();
+            renderer.dispose();
+            pane.dispose();
+        };
+    }
+</script>

app/src/content/embeds/banner-umap-lucioles.html

@@ -0,0 +1,489 @@
+<div class="d3-latent-space"></div>
+<style>
+    .d3-latent-space {
+        width: 100%;
+        margin: 10px 0;
+        aspect-ratio: 3/1;
+        min-height: 260px;
+        overflow: hidden;
+        background: transparent;
+        border-radius: 12px;
+        border: 1px solid var(--border-color);
+    }
+
+    .d3-latent-space canvas {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .d3-latent-space .tp-dfwv {
+        top: 16px;
+        right: 16px;
+        z-index: 10;
+    }
+
+    .d3-latent-space .d3-tooltip {
+        position: absolute;
+        background: color-mix(in srgb, var(--surface-bg) 95%, transparent);
+        backdrop-filter: blur(16px) saturate(1.2);
+        border: 1px solid var(--border-color);
+        border-radius: 12px;
+        padding: 14px 18px;
+        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.12);
+        pointer-events: none;
+        opacity: 0;
+        transform: translate(-50%, -120%);
+        transition: opacity 0.15s ease;
+        z-index: 10;
+        max-width: 400px;
+    }
+
+    .d3-latent-space .tooltip-category {
+        font-size: 10px;
+        font-weight: 800;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        margin-bottom: 8px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .d3-latent-space .tooltip-badge {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        box-shadow: 0 0 8px currentColor;
+    }
+
+    .d3-latent-space .tooltip-question {
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--text-color);
+        margin-bottom: 6px;
+        line-height: 1.4;
+    }
+
+    .d3-latent-space .tooltip-answer {
+        font-size: 11px;
+        color: var(--muted-color);
+        line-height: 1.4;
+        border-top: 1px solid var(--border-color);
+        padding-top: 8px;
+        margin-top: 6px;
+    }
+</style>
+<script>
+    (() => {
+        const ensureD3 = (cb) => {
+            if (window.d3 && typeof window.d3.csvParse === 'function') return cb();
+            let s = document.getElementById('d3-cdn-script');
+            if (!s) {
+                s = document.createElement('script');
+                s.id = 'd3-cdn-script';
+                s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+                document.head.appendChild(s);
+            }
+            const onReady = () => { if (window.d3 && typeof window.d3.csvParse === 'function') cb(); };
+            s.addEventListener('load', onReady, { once: true });
+            if (window.d3) onReady();
+        };
+
+        const ensureAnime = (cb) => {
+            if (window.anime) return cb();
+            let s = document.getElementById('anime-cdn-script');
+            if (!s) {
+                s = document.createElement('script');
+                s.id = 'anime-cdn-script';
+                s.src = 'https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js';
+                document.head.appendChild(s);
+            }
+            const onReady = () => { if (window.anime) cb(); };
+            s.addEventListener('load', onReady, { once: true });
+            if (window.anime) onReady();
+        };
+
+        const ensureTweakpane = (cb) => {
+            if (window.Tweakpane) return cb();
+            let s = document.getElementById('tweakpane-cdn-script');
+            if (!s) {
+                s = document.createElement('script');
+                s.id = 'tweakpane-cdn-script';
+                s.src = 'https://cdn.jsdelivr.net/npm/tweakpane@3.1.10/dist/tweakpane.min.js';
+                document.head.appendChild(s);
+            }
+            const onReady = () => { if (window.Tweakpane) cb(); };
+            s.addEventListener('load', onReady, { once: true });
+            if (window.Tweakpane) onReady();
+        };
+
+        const bootstrap = () => {
+            const scriptEl = document.currentScript;
+            let container = scriptEl ? scriptEl.previousElementSibling : null;
+            if (!(container && container.classList && container.classList.contains('d3-latent-space'))) {
+                const candidates = Array.from(document.querySelectorAll('.d3-latent-space'))
+                    .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+                container = candidates[candidates.length - 1] || null;
+            }
+            if (!container) return;
+            if (container.dataset) {
+                if (container.dataset.mounted === 'true') return;
+                container.dataset.mounted = 'true';
+            }
+
+            // Setup canvas
+            const canvas = document.createElement('canvas');
+            container.appendChild(canvas);
+            const ctx = canvas.getContext('2d');
+
+            // Tooltip
+            const tooltip = document.createElement('div');
+            tooltip.className = 'd3-tooltip';
+            container.appendChild(tooltip);
+
+            let width = container.clientWidth || 800;
+            let height = Math.max(260, Math.round(width / 3));
+            let points = [];
+            let categories = new Map();
+            let selectedCategory = null;
+            let animationFrame;
+            let time = 0;
+
+            // Tweakpane params
+            const params = {
+                baseSize: 2.5
+            };
+
+            const resizeCanvas = () => {
+                width = container.clientWidth || 800;
+                height = Math.max(260, Math.round(width / 3));
+                canvas.width = width * window.devicePixelRatio || 1;
+                canvas.height = height * window.devicePixelRatio || 1;
+                canvas.style.width = width + 'px';
+                canvas.style.height = height + 'px';
+                ctx.scale(window.devicePixelRatio || 1, window.devicePixelRatio || 1);
+            };
+
+            const getColors = () => {
+                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+                const colors = window.ColorPalettes
+                    ? window.ColorPalettes.getColors('categorical', 10)
+                    : ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#B983FF', '#FF85A2', '#5DADE2', '#52BE80'];
+                return { isDark, colors };
+            };
+
+            class Point {
+                constructor(data, color, index) {
+                    this.originalX = parseFloat(data.x);
+                    this.originalY = parseFloat(data.y);
+                    this.category = data.primary_category;
+                    this.title = data.title;
+                    this.authors = data.authors;
+                    this.year = data.year;
+                    this.abstract = data.abstract;
+                    this.color = color;
+                    this.index = index;
+
+                    // Animation properties
+                    this.x = this.originalX;
+                    this.y = this.originalY;
+                    this.displayX = 0;
+                    this.displayY = 0;
+                    this.opacity = 0;
+                    this.sizeVariation = 0.5 + Math.random() * 1;
+                    this.size = params.baseSize * this.sizeVariation;
+                    this.baseSize = this.size;
+                    this.glowIntensity = 0;
+                    this.phase = Math.random() * Math.PI * 2;
+                    this.speed = 0.3 + Math.random() * 0.4;
+                }
+
+                updateSize() {
+                    this.baseSize = params.baseSize * this.sizeVariation;
+                    if (!this.isHighlighted) {
+                        this.size = this.baseSize;
+                    }
+                }
+
+                update(time, selectedCat) {
+                    // Position statique - pas de mouvement
+                    this.x = this.originalX;
+                    this.y = this.originalY;
+
+                    // Highlight if selected or dim if other selected
+                    if (selectedCat === null) {
+                        this.glowIntensity = 0.8;
+                        this.isHighlighted = false;
+                        this.size = this.baseSize;
+                    } else if (this.category === selectedCat) {
+                        this.glowIntensity = 1;
+                        this.isHighlighted = true;
+                        this.size = this.baseSize * 1.4;
+                    } else {
+                        this.glowIntensity = 0.1;
+                        this.isHighlighted = true;
+                        this.size = this.baseSize * 0.6;
+                    }
+                }
+
+                draw(ctx, scaleX, scaleY, offsetX, offsetY) {
+                    this.displayX = this.x * scaleX + offsetX;
+                    this.displayY = this.y * scaleY + offsetY;
+
+                    const alpha = this.opacity * this.glowIntensity;
+
+                    // Outer glow
+                    if (this.glowIntensity > 0.3) {
+                        const gradient = ctx.createRadialGradient(
+                            this.displayX, this.displayY, 0,
+                            this.displayX, this.displayY, this.size * 4
+                        );
+                        gradient.addColorStop(0, this.color + Math.floor(alpha * 60).toString(16).padStart(2, '0'));
+                        gradient.addColorStop(0.5, this.color + Math.floor(alpha * 30).toString(16).padStart(2, '0'));
+                        gradient.addColorStop(1, this.color + '00');
+
+                        ctx.fillStyle = gradient;
+                        ctx.beginPath();
+                        ctx.arc(this.displayX, this.displayY, this.size * 4, 0, Math.PI * 2);
+                        ctx.fill();
+                    }
+
+                    // Core point
+                    ctx.fillStyle = this.color + Math.floor(alpha * 255).toString(16).padStart(2, '0');
+                    ctx.beginPath();
+                    ctx.arc(this.displayX, this.displayY, this.size, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+
+                isNear(mx, my, threshold = 20) {
+                    const dx = this.displayX - mx;
+                    const dy = this.displayY - my;
+                    return Math.sqrt(dx * dx + dy * dy) < threshold;
+                }
+            }
+
+            const loadData = async () => {
+                try {
+                    console.log('Loading research papers data...');
+                    const response = await fetch('/data/data.json', { cache: 'no-cache' });
+                    if (!response.ok) {
+                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                    }
+
+                    console.log('Parsing JSON...');
+                    const rawData = await response.json();
+                    console.log(`Loaded ${rawData.length} papers`);
+
+                    // Sample data for performance (max 3000 points)
+                    const sampledData = rawData.length > 3000
+                        ? rawData.filter((_, i) => i % Math.ceil(rawData.length / 3000) === 0)
+                        : rawData;
+
+                    // Group by primary category
+                    sampledData.forEach(paper => {
+                        const cat = paper.primary_category || 'Unknown';
+                        if (!categories.has(cat)) {
+                            categories.set(cat, []);
+                        }
+                        categories.get(cat).push(paper);
+                    });
+
+                    // Create points with colors
+                    const { colors } = getColors();
+                    const categoryList = Array.from(categories.keys());
+
+                    categoryList.forEach((cat, i) => {
+                        const color = colors[i % colors.length];
+                        categories.get(cat).forEach((data, j) => {
+                            points.push(new Point(data, color, i * 100 + j));
+                        });
+                    });
+
+                    // Animate points in
+                    points.forEach((point, i) => {
+                        anime({
+                            targets: point,
+                            opacity: [0, 1],
+                            duration: 1500,
+                            delay: i * 2,
+                            easing: 'easeOutQuad'
+                        });
+                    });
+
+                    // Setup Tweakpane
+                    let pane;
+                    try {
+                        if (window.Tweakpane && window.Tweakpane.Pane) {
+                            pane = new window.Tweakpane.Pane({
+                                container: container,
+                                title: 'Controls'
+                            });
+                        } else if (window.Tweakpane) {
+                            pane = new window.Tweakpane({
+                                container: container,
+                                title: 'Controls'
+                            });
+                        }
+
+                        if (pane) {
+                            const input = pane.addInput ? pane.addInput(params, 'baseSize', {
+                                label: 'Point Size',
+                                min: 0.5,
+                                max: 8,
+                                step: 0.1
+                            }) : pane.addBinding ? pane.addBinding(params, 'baseSize', {
+                                label: 'Point Size',
+                                min: 0.5,
+                                max: 8,
+                                step: 0.1
+                            }) : null;
+
+                            if (input) {
+                                input.on('change', () => {
+                                    points.forEach(p => p.updateSize());
+                                });
+                            }
+                        }
+                    } catch (err) {
+                        console.warn('Tweakpane initialization failed:', err);
+                        // Fallback to HTML slider
+                        const controls = document.createElement('div');
+                        controls.style.cssText = 'position:absolute;top:16px;right:16px;background:var(--surface-bg);border:1px solid var(--border-color);border-radius:8px;padding:12px;z-index:10;';
+                        controls.innerHTML = `
+              <label style="font-size:11px;font-weight:700;color:var(--text-color);display:block;margin-bottom:6px;">Point Size</label>
+              <input type="range" min="0.5" max="8" step="0.1" value="2.5" style="width:120px;">
+              <span style="font-size:11px;color:var(--muted-color);margin-left:8px;">2.5</span>
+            `;
+                        const slider = controls.querySelector('input');
+                        const label = controls.querySelector('span');
+                        slider.addEventListener('input', (e) => {
+                            params.baseSize = parseFloat(e.target.value);
+                            label.textContent = params.baseSize.toFixed(1);
+                            points.forEach(p => p.updateSize());
+                        });
+                        container.appendChild(controls);
+                    }
+
+                    console.log(`Created ${points.length} points from ${categoryList.length} categories`);
+                    render();
+
+                } catch (error) {
+                    console.error('Error loading data:', error);
+                    const errorMsg = error.message || error.toString();
+                    container.innerHTML = `<pre style="color:red;padding:20px;margin:0;font-size:12px;">Error: ${errorMsg}<br><br>Trying to load: /data/data.json<br>Check console for details.</pre>`;
+                }
+            };
+
+            const render = () => {
+                time += 16;
+                ctx.clearRect(0, 0, width, height);
+
+                if (points.length === 0) {
+                    animationFrame = requestAnimationFrame(render);
+                    return;
+                }
+
+                // Calculate bounds
+                const xValues = points.map(p => p.x);
+                const yValues = points.map(p => p.y);
+                const minX = Math.min(...xValues);
+                const maxX = Math.max(...xValues);
+                const minY = Math.min(...yValues);
+                const maxY = Math.max(...yValues);
+
+                const padding = 40;
+                const scaleX = (width - padding * 2) / (maxX - minX);
+                const scaleY = (height - padding * 2) / (maxY - minY);
+
+                const offsetX = padding - minX * scaleX;
+                const offsetY = padding - minY * scaleY;
+
+                // Update and draw points
+                points.forEach(point => {
+                    point.update(time, selectedCategory);
+                    point.draw(ctx, scaleX, scaleY, offsetX, offsetY);
+                });
+
+                animationFrame = requestAnimationFrame(render);
+            };
+
+            // Mouse interaction
+            let hoveredPoint = null;
+            canvas.addEventListener('mousemove', (e) => {
+                const rect = canvas.getBoundingClientRect();
+                const mx = e.clientX - rect.left;
+                const my = e.clientY - rect.top;
+
+                const closest = points.find(p => p.isNear(mx, my));
+
+                if (closest && closest !== hoveredPoint) {
+                    hoveredPoint = closest;
+                    const authorsStr = Array.isArray(closest.authors)
+                        ? (closest.authors.length > 3
+                            ? `${closest.authors.slice(0, 3).join(', ')} et al.`
+                            : closest.authors.join(', '))
+                        : closest.authors || 'Unknown';
+
+                    tooltip.innerHTML = `
+            <div class="tooltip-category">
+              <span class="tooltip-badge" style="background: ${closest.color}; color: ${closest.color}"></span>
+              ${closest.category} · ${closest.year}
+            </div>
+            <div class="tooltip-question">${closest.title.substring(0, 120)}${closest.title.length > 120 ? '...' : ''}</div>
+            <div class="tooltip-answer">${authorsStr}<br>${closest.abstract.substring(0, 180)}${closest.abstract.length > 180 ? '...' : ''}</div>
+          `;
+                    tooltip.style.left = mx + 'px';
+                    tooltip.style.top = my + 'px';
+                    tooltip.style.opacity = '1';
+                    canvas.style.cursor = 'pointer';
+                } else if (!closest) {
+                    hoveredPoint = null;
+                    tooltip.style.opacity = '0';
+                    canvas.style.cursor = 'crosshair';
+                }
+            });
+
+            canvas.addEventListener('mouseleave', () => {
+                hoveredPoint = null;
+                tooltip.style.opacity = '0';
+                canvas.style.cursor = 'crosshair';
+            });
+
+            // Resize handling
+            resizeCanvas();
+            if (window.ResizeObserver) {
+                const ro = new ResizeObserver(() => resizeCanvas());
+                ro.observe(container);
+            } else {
+                window.addEventListener('resize', resizeCanvas);
+            }
+
+            // Theme observer
+            const observer = new MutationObserver(() => {
+                const { colors } = getColors();
+                const categoryList = Array.from(categories.keys());
+                points.forEach(point => {
+                    const catIndex = categoryList.indexOf(point.category);
+                    if (catIndex >= 0) {
+                        point.color = colors[catIndex % colors.length];
+                    }
+                });
+            });
+            observer.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['data-theme']
+            });
+
+            loadData();
+        };
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => ensureD3(() => ensureAnime(() => ensureTweakpane(bootstrap))), { once: true });
+        } else {
+            ensureD3(() => ensureAnime(() => ensureTweakpane(bootstrap)));
+        }
+    })();
+</script>

app/src/pages/index.astro

@@ -148,8 +148,7 @@ const keyAuthor = (authorNames[0] || "article")
 const keyTitle = titleFlat
   .toLowerCase()
   .replace(/[^a-z0-9]+/g, "_")
-  .replace(/^_|_$/g, "")
-  .slice(0, 24);
+  .replace(/^_|_$/g, "");
 const bibKey = `${keyAuthor}${year ?? ""}_${keyTitle}`;
 const doi = (ArticleMod as any)?.frontmatter?.doi
   ? String((ArticleMod as any).frontmatter.doi)

app/src/styles/_variables.css

@@ -11,7 +11,7 @@
   --default-font-family: Source Sans Pro, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
   /* Brand (OKLCH base + derived states) */
-  --primary-base: oklch(0.75 0.12 337);
+  --primary-base: oklch(0.75 0.12 47);
   --primary-color: var(--primary-base);
   --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
   --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);

app/src/styles/components/_card.css

@@ -1,9 +1,127 @@
 .card {
     background: var(--surface-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    padding: var(--spacing-2);
+    border: 1px solid var(--border-color) !important;
+    border-radius: 12px;
+    padding: var(--spacing-3);
     z-index: calc(var(--z-elevated) + 1);
     position: relative;
-    margin-bottom: var(--block-spacing-y);
+    margin-bottom: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    transition: all 0.2s ease;
+    overflow: hidden;
+    text-decoration: none;
+    color: inherit;
+    display: block;
+}
+
+.card:hover {
+    text-decoration: none;
+    color: inherit;
+}
+
+.card.no-padding {
+    padding: 0;
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    border-color: var(--muted-color) !important;
+}
+
+
+.card figcaption {
+    color: var(--text-color) !important;
+    font-weight: 600 !important;
+    font-size: 1rem !important;
+    text-align: center !important;
+    padding: var(--spacing-3) !important;
+    margin: 0 !important;
+}
+
+.card .ri-root,
+.card .ri-root figure {
+    margin: 0 !important;
+}
+
+.card img {
+    border-radius: 8px 8px 0 0 !important;
+    width: 100%;
+    height: 120px;
+    object-fit: cover;
+    border-bottom: 1px solid var(--border-color) !important;
+    transition: all 0.2s ease;
+}
+
+.card:hover img {
+    border-color: var(--muted-color) !important;
+}
+
+
+.card h3,
+.card h4,
+.card h5 {
+    margin-top: 0 !important;
+    font-weight: 900 !important;
+    width: 100%;
+}
+
+.card::after {
+    display: none !important;
+}
+
+.card-title-container {
+    padding: var(--spacing-3) var(--spacing-4) var(--spacing-4) var(--spacing-4);
+}
+
+.card-title {
+    color: var(--text-color);
+    font-size: 0.9rem;
+    margin: 0 0 var(--spacing-1) 0 !important;
+    font-weight: 600;
+    line-height: 1.4;
+    white-space: normal;
+}
+
+.card-subtitle {
+    color: var(--muted-color);
+    font-size: 0.75rem;
+    margin: 0 !important;
+    line-height: 1.5;
+    white-space: normal;
+}
+
+.card-cta {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--surface-bg);
+    border: 2px dashed var(--border-color) !important;
+}
+
+.card-cta:hover {
+    transform: none;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    border: 2px dashed var(--border-color) !important;
+}
+
+.card-cta-content {
+    text-align: center;
+    padding: var(--spacing-4);
+}
+
+.card-cta h3,
+.card-cta h4,
+.card-cta h5 {
+    color: var(--text-color);
+    font-weight: 900 !important;
+    margin-bottom: var(--spacing-1) !important;
+}
+
+.card-cta p {
+    color: var(--muted-color);
+    font-size: 0.9rem;
+    margin: 0 !important;
 }