embed: drop body bg + use inline-flex so iframe content fits its width

Embedded talent builders (e.g. on classic.exil.es Sub's Bear) showed a
wide dark grey "border" inside the iframe — that was the page's
background (#1e1e1e) showing on either side of the trees, which are
fixed-width. In embed mode:

* Set body/html background to transparent so the host page background
  shines through where the trees don't extend.
* Switch the trees container from flex (which stretches) to inline-flex
  (which shrinks to fit), so the iframe can be sized loosely without
  introducing visible empty space.

talent-builder/src/components/TalentBuilder.tsx

@@ -53,6 +53,20 @@ export function TalentBuilder() {
     return params.get("embed") === "true";
   });
 
+  // In embed mode, drop the page chrome so the host page background shows
+  // through (no dark "border" around the trees inside the iframe).
+  useEffect(() => {
+    if (!embedMode) return;
+    const prevBg = document.body.style.background;
+    const prevHtmlBg = document.documentElement.style.background;
+    document.body.style.background = "transparent";
+    document.documentElement.style.background = "transparent";
+    return () => {
+      document.body.style.background = prevBg;
+      document.documentElement.style.background = prevHtmlBg;
+    };
+  }, [embedMode]);
+
   // Capture initial build param once (check iframe parent if needed)
   useEffect(() => {
     let buildParam = new URLSearchParams(window.location.search).get("build");
@@ -235,7 +249,7 @@ export function TalentBuilder() {
   // In embed mode, render only the talent trees (no controls)
   if (embedMode) {
     return (
-      <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
+      <div style={{ display: "inline-flex", gap: 24, flexWrap: "wrap" }}>
         {spec.trees.map((t, ti) => {
           const treePoints = getTreePoints(ti);
           // Hide trees with zero points