--- a/design_system/src/components/notifications.js	Tue Aug 04 16:49:11 2026 -0700
+++ b/design_system/src/components/notifications.js	Wed Aug 05 05:25:40 2026 -0700
@@ -13,6 +13,17 @@
     (allowEmpty || value.trim().length > 0);
 }
 
+function resolveCssLength(element, property, fallback) {
+  const probe = document.createElement("span");
+  probe.style.position = "absolute";
+  probe.style.inlineSize = `var(${property})`;
+  probe.style.visibility = "hidden";
+  element.append(probe);
+  const value = Number.parseFloat(getComputedStyle(probe).inlineSize);
+  probe.remove();
+  return Number.isFinite(value) ? value : fallback;
+}
+
 /**
  * Validates and normalizes a notification event record.
  *
@@ -85,7 +96,7 @@
 }
 
 /**
- * Renders a bounded, scoped, Sonner-like notification queue.
+ * Renders a bounded, scoped notification queue.
  *
  * @extends {HTMLElement}
  */
@@ -496,13 +507,11 @@
     const visible = [...this.#records.values()]
       .slice(-MAX_VISIBLE)
       .filter(record => record.view?.article.isConnected);
-    const styles = getComputedStyle(this.stack);
-    const configuredGap = Number.parseFloat(
-      styles.getPropertyValue("--zen-notification-gap"),
+    const gap = resolveCssLength(
+      this.stack,
+      "--zenbu-notification-gap",
+      12,
     );
-    const gap = Number.isFinite(configuredGap)
-      ? configuredGap
-      : 12;
     let expandedHeight = 0;
     let newestHeight = 0;
 
@@ -513,24 +522,24 @@
       const height = article.offsetHeight;
       if (depth === 0) newestHeight = height;
       article.style.setProperty(
-        "--zen-notification-depth",
+        "--zenbu-notification-depth",
         String(depth),
       );
       article.style.setProperty(
-        "--zen-notification-collapsed-offset",
+        "--zenbu-notification-collapsed-offset",
         `${-depth * 10}px`,
       );
       article.style.setProperty(
-        "--zen-notification-collapsed-opacity",
+        "--zenbu-notification-collapsed-opacity",
         String(Math.max(0.55, 1 - depth * 0.18)),
       );
       article.dataset.depth = String(depth);
       article.style.setProperty(
-        "--zen-notification-offset",
+        "--zenbu-notification-offset",
         `${-expandedHeight}px`,
       );
       article.style.setProperty(
-        "--zen-notification-scale",
+        "--zenbu-notification-scale",
         String(Math.max(0.88, 1 - depth * 0.055)),
       );
       article.style.zIndex = String(visible.length - depth);
@@ -539,11 +548,11 @@
 
     this.stack.dataset.count = String(visible.length);
     this.stack.style.setProperty(
-      "--zen-notification-collapsed-height",
+      "--zenbu-notification-collapsed-height",
       `${newestHeight + Math.max(0, visible.length - 1) * 10}px`,
     );
     this.stack.style.setProperty(
-      "--zen-notification-expanded-height",
+      "--zenbu-notification-expanded-height",
       `${Math.max(0, expandedHeight - gap)}px`,
     );
   }