diff --git a/talent-builder/src/components/TalentBuilder.tsx b/talent-builder/src/components/TalentBuilder.tsx
index c744089..2ec079d 100644
--- a/talent-builder/src/components/TalentBuilder.tsx
+++ b/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