Ah yeah, a classic tricky issue with embedding! The embed only runs cells that reference or are referenced by the displayed cells. So it won’t insert the <style>
tag into the document, so that CSS won’t have any effect in the embed. We call this an example of side effects; you can read more in our troubleshooting guide: https://observablehq.com/@observablehq/troubleshooting-embedding.
To fix that here, I’d insert the style directly into the SVG that’ll be embedded, like this (after naming the cell with the styles style
):
svg.append(() => style);
Which I’ve added to my suggestion: https://observablehq.com/compare/0dc83de85e454301@304...0559b22316a2e5c6@362