mesurer-solid 0.2.3-beta.10 → 0.2.3-beta.11

package/dist/index.js

@@ -4847,11 +4847,10 @@ function Ol(e) {
 			return ic(() => !!(f() && e.model.state.colorPickerActive))() ? !e.model.state.colorPickerSample : f() && e.model.state.colorPickerActive;
 		},
 		get children() {
-			return X("div", {
+			var t = X("div", {
 				"data-mesurer-color-picker-target": "true",
 				"data-mesurer-inspector-ui": "true",
 				"aria-hidden": "true",
-				class: "msr:pointer-events-auto msr:fixed msr:inset-0 msr:z-[60] msr:cursor-crosshair",
 				onPointerDown: (t) => {
 					t.button === 0 && (t.preventDefault(), t.stopPropagation(), t.stopImmediatePropagation(), e.onHostPick?.({
 						x: t.clientX,
@@ -4860,74 +4859,77 @@ function Ol(e) {
 				},
 				onContextMenu: (e) => e.preventDefault()
 			});
+			return J(() => `msr:pointer-events-auto msr:fixed msr:inset-0 msr:cursor-crosshair ${e.responsiveOpen ? "msr:z-[85]" : "msr:z-[60]"}`, (e, n) => {
+				$(t, "class", e, n);
+			}), t;
 		}
 	}), Y(q, {
 		get when() {
 			return ic(() => !!e.model.state.colorPickerActive)() ? e.model.state.colorPickerSample : e.model.state.colorPickerActive;
 		},
-		children: (e) => (() => {
-			var t = X("div", {
-				class: "mesurer-color-picker msr:pointer-events-auto msr:fixed msr:z-[80] msr:min-w-36 msr:rounded-lg msr:border msr:border-black/10 msr:bg-white msr:px-2 msr:py-2 msr:font-mono msr:text-[10px] msr:leading-4 msr:shadow-lg",
+		children: (t) => (() => {
+			var n = X("div", {
 				role: "dialog",
 				"aria-label": "Selected color values",
 				"data-mesurer-inspector-ui": "true"
 			});
 			return lc(() => (e) => {
 				i = e;
-			}, t), Q(t, Y(q, {
+			}, n), Q(n, Y(q, {
 				get when() {
 					return u();
 				},
 				get fallback() {
-					var t = X("div", { class: "msr:flex msr:items-center" }), n = X("span", {
+					var e = X("div", { class: "msr:flex msr:items-center" }), n = X("span", {
 						class: "msr:size-3 msr:shrink-0 msr:rounded-full msr:border msr:border-black/15",
 						"aria-hidden": "true"
 					});
-					return Z(t, n), J(() => ({ "background-color": Rc(e()) }), (e, t) => {
+					return Z(e, n), J(() => ({ "background-color": Rc(t()) }), (e, t) => {
 						$(n, "style", e, t);
-					}), t;
+					}), e;
 				},
-				children: (t) => (() => {
+				children: (e) => (() => {
 					var n = X("div"), r = X("span", {
 						class: "msr:size-3 msr:shrink-0 msr:rounded-full msr:border msr:border-black/15",
 						"aria-hidden": "true"
 					});
 					return Z(n, r), Q(n, Y(p, {
 						get id() {
-							return t();
+							return e();
 						},
 						get value() {
-							return Uc(e(), t());
+							return Uc(t(), e());
 						},
 						class: "msr:font-medium msr:tabular-nums msr:text-black msr:hover:underline"
 					}), null), J(() => ({
 						e: d().length > 0 ? "msr:mb-1 msr:flex msr:items-center msr:gap-1.5 msr:border-b msr:border-black/8 msr:pb-1" : "msr:flex msr:items-center msr:gap-1.5",
-						t: { "background-color": Rc(e()) }
+						t: { "background-color": Rc(t()) }
 					}), ({ e, t }, i) => {
 						e !== i?.e && $(n, "class", e, i?.e), t !== i?.t && $(r, "style", t, i?.t);
 					}), n;
 				})()
-			}), null), Q(t, Y(xo, {
+			}), null), Q(n, Y(xo, {
 				get each() {
 					return d();
 				},
-				children: (t) => (() => {
+				children: (e) => (() => {
 					var n = X("div", { class: "msr:flex msr:items-center msr:gap-2" }), r = X("span", { class: "msr:w-9 msr:text-black/45" });
-					return Z(n, r), Q(r, t), Q(n, Y(p, {
-						id: t,
+					return Z(n, r), Q(r, e), Q(n, Y(p, {
+						id: e,
 						get value() {
-							return Uc(e(), t);
+							return Uc(t(), e);
 						},
 						class: "msr:tabular-nums msr:text-black msr:hover:underline"
 					}), null), n;
 				})()
 			}), null), J(() => ({
-				e: f() ? "Sampled from the current application window." : "Sampled from the native browser EyeDropper.",
-				t: f() ? "host" : "native",
-				a: r.onTooltipContainerLeave
-			}), ({ e, t: n, a: r }, i) => {
-				e !== i?.e && $(t, "aria-description", e, i?.e), n !== i?.t && $(t, "data-mesurer-color-picker-mode", n, i?.t), r !== i?.a && $(t, "onMouseLeave", r, i?.a);
-			}), t;
+				e: `mesurer-color-picker msr:pointer-events-auto msr:fixed ${e.responsiveOpen ? "msr:z-[86]" : "msr:z-[80]"} msr:min-w-36 msr:rounded-lg msr:border msr:border-black/10 msr:bg-white msr:px-2 msr:py-2 msr:font-mono msr:text-[10px] msr:leading-4 msr:shadow-lg`,
+				t: f() ? "Sampled from the current application window." : "Sampled from the native browser EyeDropper.",
+				a: f() ? "host" : "native",
+				o: r.onTooltipContainerLeave
+			}), ({ e, t, a: r, o: i }, a) => {
+				e !== a?.e && $(n, "class", e, a?.e), t !== a?.t && $(n, "aria-description", t, a?.t), r !== a?.a && $(n, "data-mesurer-color-picker-mode", r, a?.a), i !== a?.o && $(n, "onMouseLeave", i, a?.o);
+			}), n;
 		})()
 	})];
 }
@@ -6313,26 +6315,22 @@ function Jd(e) {
 		for (let e of d) l.add(new Option(e.name, `${e.width}x${e.height}`));
 		l.addEventListener("change", () => {
 			let [e, t] = (l.value || "0x0").split("x").map(Number), n = Wd(e), r = l.selectedOptions[0]?.textContent?.includes("breakpoint") ?? !1 ? a[0]?.height ?? 852 : t;
-			if (!n || !r) return;
-			let i = a.find((e) => e.width === n && e.height === r);
-			if (i) h.scrollTo({
-				left: v.get(i.id)?.offsetLeft ?? 0,
-				behavior: "instant"
-			});
-			else {
-				let e = Fd.find((e) => e.width === n && e.height === r), t = {
-					id: Bd++,
-					name: e?.name ?? `${n}px breakpoint`,
-					width: n,
-					height: r,
-					guides: []
-				};
-				a = a.length >= Id ? [...a.slice(0, 5), t] : [...a, t], P(), B(), h.scrollTo({
-					left: h.scrollWidth,
-					behavior: "instant"
-				});
+			if (!(!n || !r)) {
+				if (a.length < Id) {
+					let e = Fd.find((e) => e.width === n && e.height === r), t = {
+						id: Bd++,
+						name: e?.name ?? `${n}px breakpoint`,
+						width: n,
+						height: r,
+						guides: []
+					};
+					a = [...a, t], P(), B(), h.scrollTo({
+						left: h.scrollWidth,
+						behavior: "instant"
+					});
+				}
+				l.value = "";
 			}
-			l.value = "";
 		}), c.append(l);
 		let f = () => {
 			let e = t.createElement("span");
@@ -6414,7 +6412,7 @@ function Jd(e) {
 				let p = n.querySelector("[aria-label=\"Remove preview\"]");
 				p && (p.disabled = a.length <= 1);
 			}
-			n.dispatchEvent(new CustomEvent("mesurer:responsive-stage-change"));
+			l.disabled = a.length >= Id, n.dispatchEvent(new CustomEvent("mesurer:responsive-stage-change"));
 		}, I = (t) => {
 			if (a.length <= 1) return;
 			let r = _.get(t);
@@ -6461,19 +6459,25 @@ function Jd(e) {
 			let c = t.createElement("span");
 			c.textContent = r.name, Gd(c, {
 				flex: "1",
+				minWidth: "0",
 				overflow: "hidden",
 				whiteSpace: "nowrap",
 				textOverflow: "ellipsis",
 				paddingLeft: "4px"
 			});
 			let l = t.createElement("span");
-			l.dataset.responsiveDimensions = "", l.textContent = `${r.width} × ${r.height}`;
+			l.dataset.responsiveDimensions = "", Gd(l, {
+				flexShrink: "0",
+				whiteSpace: "nowrap",
+				fontSize: "9px",
+				color: "var(--msr-color-ink-500, #737373)"
+			}), l.textContent = `${r.width} × ${r.height}`;
 			let u = t.createElement("input");
 			u.type = "number", u.min = String(Ld), u.max = String(Rd), u.value = String(r.width), u.setAttribute("aria-label", "Width"), u.dataset.responsiveWidth = "";
 			let d = t.createElement("input");
 			d.type = "number", d.min = String(Ld), d.max = String(Rd), d.value = String(r.height), d.setAttribute("aria-label", "Height"), d.dataset.responsiveHeight = "";
 			for (let e of [u, d]) Gd(e, {
-				width: "52px",
+				width: "34px",
 				height: "24px",
 				boxSizing: "border-box",
 				border: "1px solid var(--msr-color-ink-200, #ddd)",
@@ -6481,19 +6485,45 @@ function Jd(e) {
 				background: "var(--msr-surface-raised, #fff)",
 				color: "inherit",
 				font: "inherit",
-				padding: "2px 3px"
+				padding: "2px 2px"
 			});
-			let f = () => {
-				r.width = Wd(Number(u.value)), r.height = Wd(Number(d.value)), r.name = Fd.find((e) => e.width === r.width && e.height === r.height)?.name ?? "Custom", u.value = String(r.width), d.value = String(r.height), c.textContent = r.name, i.setAttribute("aria-label", `${r.name}, ${r.width} × ${r.height}`), P(), F();
+			let f = t.createElement("select");
+			f.setAttribute("aria-label", "Size"), Gd(f, {
+				width: "60px",
+				minWidth: "56px",
+				height: "24px",
+				border: "0",
+				borderRadius: "4px",
+				color: "inherit",
+				background: "transparent",
+				font: "inherit"
+			}), f.add(new Option("Custom", ""));
+			for (let e of [...Fd, ...Kd(t).map((e) => ({
+				name: `${Wd(e)}px breakpoint`,
+				width: Wd(e),
+				height: r.height
+			}))]) f.add(new Option(e.name, `${e.width}x${e.height}`));
+			let p = () => {
+				let e = Fd.find((e) => e.width === r.width && e.height === r.height), t = [...f.options].find((e) => e.textContent?.includes("breakpoint") && Number(e.value.split("x")[0]) === r.width);
+				f.value = e ? `${e.width}x${e.height}` : t?.value ?? "";
+			};
+			p(), f.addEventListener("change", () => {
+				let e = f.selectedOptions[0];
+				if (!e?.value) return;
+				let [t, n] = e.value.split("x").map(Number), a = e.textContent?.includes("breakpoint") ?? !1;
+				r.width = Wd(t), a || (r.height = Wd(n)), r.name = a ? `${r.width}px breakpoint` : Fd.find((e) => e.width === r.width && e.height === r.height)?.name ?? "Custom", c.textContent = r.name, i.setAttribute("aria-label", `${r.name}, ${r.width} × ${r.height}`), P(), F();
+			});
+			let m = () => {
+				r.width = Wd(Number(u.value)), r.height = Wd(Number(d.value)), r.name = Fd.find((e) => e.width === r.width && e.height === r.height)?.name ?? "Custom", u.value = String(r.width), d.value = String(r.height), c.textContent = r.name, i.setAttribute("aria-label", `${r.name}, ${r.width} × ${r.height}`), p(), P(), F();
 			};
-			u.addEventListener("change", f), d.addEventListener("change", f);
-			let p = qd(t, "Drag preview to reorder", "⠿", () => void 0);
-			Gd(p, {
+			u.addEventListener("change", m), d.addEventListener("change", m);
+			let h = qd(t, "Drag preview to reorder", "⠿", () => void 0);
+			Gd(h, {
 				cursor: "grab",
 				touchAction: "none"
-			}), p.addEventListener("pointerdown", (e) => {
+			}), h.addEventListener("pointerdown", (e) => {
 				if (e.button !== 0) return;
-				e.preventDefault(), e.stopPropagation(), p.setPointerCapture(e.pointerId);
+				e.preventDefault(), e.stopPropagation(), h.setPointerCapture(e.pointerId);
 				let t = (e) => {
 					let t = [...v.entries()].filter(([e]) => e !== r.id).filter(([, t]) => {
 						let n = t.getBoundingClientRect();
@@ -6501,40 +6531,40 @@ function Jd(e) {
 					}).length;
 					z(r.id, t);
 				}, n = () => {
-					p.removeEventListener("pointermove", t), p.removeEventListener("pointerup", n), p.removeEventListener("pointercancel", n);
+					h.removeEventListener("pointermove", t), h.removeEventListener("pointerup", n), h.removeEventListener("pointercancel", n);
 				};
-				p.addEventListener("pointermove", t), p.addEventListener("pointerup", n), p.addEventListener("pointercancel", n);
+				h.addEventListener("pointermove", t), h.addEventListener("pointerup", n), h.addEventListener("pointercancel", n);
 			});
-			let m = qd(t, "Move preview left", "←", () => R(r.id, -1)), h = qd(t, "Move preview right", "→", () => R(r.id, 1));
-			m.addEventListener("keydown", (e) => {
+			let g = qd(t, "Move preview left", "←", () => R(r.id, -1)), k = qd(t, "Move preview right", "→", () => R(r.id, 1));
+			g.addEventListener("keydown", (e) => {
 				e.key === "ArrowLeft" && R(r.id, -1);
-			}), h.addEventListener("keydown", (e) => {
+			}), k.addEventListener("keydown", (e) => {
 				e.key === "ArrowRight" && R(r.id, 1);
 			});
-			let g = qd(t, "Remove preview", "×", () => I(r.id));
-			g.disabled = a.length <= 1;
-			let k = t.createElement("div");
-			k.dataset.mesurerResponsiveShell = "", k.dataset.mesurerResponsiveCard = "true", Gd(k, {
+			let A = qd(t, "Remove preview", "×", () => I(r.id));
+			A.disabled = a.length <= 1;
+			let j = t.createElement("div");
+			j.dataset.mesurerResponsiveShell = "", j.dataset.mesurerResponsiveCard = "true", Gd(j, {
 				position: "relative",
 				borderRadius: "8px",
 				overflow: "hidden",
 				boxShadow: "var(--msr-shadow-floating)",
 				background: "white"
 			});
-			let A = t.createElement("div");
-			A.dataset.mesurerResponsiveFrameWrap = "", Gd(A, {
+			let M = t.createElement("div");
+			M.dataset.mesurerResponsiveFrameWrap = "", Gd(M, {
 				position: "relative",
 				overflow: "hidden"
 			});
-			let j = t.createElement("iframe");
-			j.dataset.mesurerResponsiveFrame = "true", j.dataset.mesurerResponsivePreviewId = String(r.id), j.title = `${r.name} preview`, j.setAttribute("sandbox", kl), j.src = n.location.href, Gd(j, {
+			let L = t.createElement("iframe");
+			L.dataset.mesurerResponsiveFrame = "true", L.dataset.mesurerResponsivePreviewId = String(r.id), L.title = `${r.name} preview`, L.setAttribute("sandbox", kl), L.src = n.location.href, Gd(L, {
 				display: "block",
 				border: "0",
 				transformOrigin: "top left",
 				background: "white"
 			});
-			let M = t.createElement("div");
-			M.setAttribute("role", "status"), M.textContent = "Loading preview…", Gd(M, {
+			let B = t.createElement("div");
+			B.setAttribute("role", "status"), B.textContent = "Loading preview…", Gd(B, {
 				position: "absolute",
 				inset: "0",
 				zIndex: "2",
@@ -6547,31 +6577,36 @@ function Jd(e) {
 				textAlign: "center",
 				pointerEvents: "none"
 			});
-			let L = () => {
+			let V = () => {
 				try {
-					let e = j.contentDocument, t = b.get(r.id), n = w.get(r.id), i = S.get(r.id), a = C.get(r.id);
+					let e = L.contentDocument, t = b.get(r.id), n = w.get(r.id), i = S.get(r.id), a = C.get(r.id);
 					e && t && e.removeEventListener("keydown", t, !0), e && n && e.removeEventListener("keyup", n, !0), e && i && e.removeEventListener("wheel", i), e && a && e.removeEventListener("pointerdown", a, !0);
 				} catch {}
 				T.get(r.id)?.dispose(), T.delete(r.id), D.get(r.id)?.disconnect(), D.delete(r.id), E.get(r.id)?.remove(), E.delete(r.id);
 				try {
-					let i = j.contentWindow, a = j.contentDocument;
+					let i = L.contentWindow, a = L.contentDocument;
 					if (!i || !a?.documentElement || i.location.origin !== n.location.origin || i.location.href === "about:blank") throw Error("unavailable");
 					y.get(r.id)?.(), y.set(r.id, Al(i));
-					let s = (t) => {
-						if (t.key === "Alt") {
+					let s = (a) => {
+						if (a.key === "Alt") {
 							n.dispatchEvent(new CustomEvent("mesurer:responsive-guide-alt", { detail: !0 }));
 							return;
 						}
-						if (!(t.metaKey || t.ctrlKey || t.altKey)) {
-							if (t.key === "Escape") {
-								t.preventDefault(), t.stopImmediatePropagation(), e.onClose();
+						if (!(a.metaKey || a.ctrlKey || a.altKey)) {
+							if (a.key === "Escape") {
+								if (zl(a, i)) return;
+								a.preventDefault(), a.stopImmediatePropagation(), t.dispatchEvent(new KeyboardEvent("keydown", {
+									key: "Escape",
+									bubbles: !0,
+									cancelable: !0
+								}));
 								return;
 							}
-							if ((t.key === "Delete" || t.key === "Backspace") && e.guidesActive() && !zl(t, i)) {
-								n.dispatchEvent(new CustomEvent("mesurer:responsive-delete-selected-guides", { detail: r.id })), t.preventDefault(), t.stopImmediatePropagation();
+							if ((a.key === "Delete" || a.key === "Backspace") && e.guidesActive() && !zl(a, i)) {
+								n.dispatchEvent(new CustomEvent("mesurer:responsive-delete-selected-guides", { detail: r.id })), a.preventDefault(), a.stopImmediatePropagation();
 								return;
 							}
-							t.key.toLowerCase() !== "b" || !e.shortcutsEnabled || zl(t, i) || (t.preventDefault(), t.stopImmediatePropagation(), t.repeat || e.onClose());
+							a.key.toLowerCase() !== "b" || !e.shortcutsEnabled || zl(a, i) || (a.preventDefault(), a.stopImmediatePropagation(), a.repeat || e.onClose());
 						}
 					};
 					b.set(r.id, s), a.addEventListener("keydown", s, !0);
@@ -6579,15 +6614,15 @@ function Jd(e) {
 						e.key === "Alt" && n.dispatchEvent(new CustomEvent("mesurer:responsive-guide-alt", { detail: !1 }));
 					};
 					w.set(r.id, c), a.addEventListener("keyup", c, !0);
-					let l = (e) => ee(e, j), u = () => {
+					let l = (e) => ee(e, L), u = () => {
 						O = r.id, n.dispatchEvent(new CustomEvent("mesurer:responsive-frame-pointerdown"));
 					};
-					S.set(r.id, l), C.set(r.id, u), a.addEventListener("wheel", l, { passive: !1 }), a.addEventListener("pointerdown", u, !0), M.style.display = "none";
+					S.set(r.id, l), C.set(r.id, u), a.addEventListener("wheel", l, { passive: !1 }), a.addEventListener("pointerdown", u, !0), B.style.display = "none";
 					let d = Pd({
 						document: t,
-						frame: j,
+						frame: L,
 						previewId: r.id,
-						parent: A,
+						parent: M,
 						size: () => ({
 							width: r.width,
 							height: r.height
@@ -6620,7 +6655,7 @@ function Jd(e) {
 							transform: `scale(${o ?? N})`,
 							transformOrigin: "top left",
 							zIndex: "3"
-						}), A.append(n), E.set(r.id, n);
+						}), M.append(n), E.set(r.id, n);
 					};
 					f();
 					let p = e.host.querySelector("[data-mesurer-layout-guides-root]"), m = new MutationObserver(f);
@@ -6631,14 +6666,14 @@ function Jd(e) {
 						subtree: !0
 					}), D.set(r.id, m), n.dispatchEvent(new CustomEvent("mesurer:responsive-preview-ready"));
 				} catch {
-					M.textContent = "This page cannot be previewed in a same-origin frame.", M.dataset.mesurerResponsiveRefused = "true", M.style.display = "grid";
+					B.textContent = "This page cannot be previewed in a same-origin frame.", B.dataset.mesurerResponsiveRefused = "true", B.style.display = "grid";
 				}
 				n.dispatchEvent(new CustomEvent("mesurer:responsive-stage-change"));
 			};
-			x.set(r.id, L), j.addEventListener("load", L), j.addEventListener("pointerdown", () => n.dispatchEvent(new CustomEvent("mesurer:responsive-frame-pointerdown"))), A.append(j, M), k.append(A), s.append(p, m, h, c, l, u, t.createTextNode("×"), d, g), i.append(s, k), i.addEventListener("pointerdown", (e) => e.stopPropagation()), i.addEventListener("click", (e) => {
+			x.set(r.id, V), L.addEventListener("load", V), L.addEventListener("pointerdown", () => n.dispatchEvent(new CustomEvent("mesurer:responsive-frame-pointerdown"))), M.append(L, B), j.append(M), s.append(h, g, k, c, f, l, u, t.createTextNode("×"), d, A), i.append(s, j), i.addEventListener("pointerdown", (e) => e.stopPropagation()), i.addEventListener("click", (e) => {
 				e.stopPropagation(), n.dispatchEvent(new CustomEvent("mesurer:responsive-frame-pointerdown"));
 			});
-			let B = (e, n) => {
+			let H = (e, n) => {
 				let a = t.createElement("div");
 				a.setAttribute("role", "separator"), a.setAttribute("aria-label", n), a.tabIndex = 0, Gd(a, {
 					position: "absolute",
@@ -6667,11 +6702,11 @@ function Jd(e) {
 					let n = t.clientX, s = t.clientY, l = r.width, u = r.height, d = o ?? N;
 					a.setPointerCapture(t.pointerId);
 					let f = (t) => {
-						e !== "height" && (r.width = Wd(l + (t.clientX - n) / d)), e !== "width" && (r.height = Wd(u + (t.clientY - s) / d)), r.name = Fd.find((e) => e.width === r.width && e.height === r.height)?.name ?? "Custom", c.textContent = r.name, i.setAttribute("aria-label", `${r.name}, ${r.width} × ${r.height}`), P(), F();
-					}, p = () => {
-						a.removeEventListener("pointermove", f), a.removeEventListener("pointerup", p), a.removeEventListener("pointercancel", p);
+						e !== "height" && (r.width = Wd(l + (t.clientX - n) / d)), e !== "width" && (r.height = Wd(u + (t.clientY - s) / d)), r.name = Fd.find((e) => e.width === r.width && e.height === r.height)?.name ?? "Custom", c.textContent = r.name, i.setAttribute("aria-label", `${r.name}, ${r.width} × ${r.height}`), p(), P(), F();
+					}, m = () => {
+						a.removeEventListener("pointermove", f), a.removeEventListener("pointerup", m), a.removeEventListener("pointercancel", m);
 					};
-					a.addEventListener("pointermove", f), a.addEventListener("pointerup", p), a.addEventListener("pointercancel", p);
+					a.addEventListener("pointermove", f), a.addEventListener("pointerup", m), a.addEventListener("pointercancel", m);
 				}), a.addEventListener("keydown", (t) => {
 					if (![
 						"ArrowLeft",
@@ -6681,10 +6716,10 @@ function Jd(e) {
 					].includes(t.key)) return;
 					t.preventDefault();
 					let n = t.shiftKey ? 10 : 1;
-					e !== "height" && (t.key === "ArrowLeft" || t.key === "ArrowRight") && (r.width = Wd(r.width + (t.key === "ArrowRight" ? n : -n))), e !== "width" && (t.key === "ArrowUp" || t.key === "ArrowDown") && (r.height = Wd(r.height + (t.key === "ArrowDown" ? n : -n))), r.name = Fd.find((e) => e.width === r.width && e.height === r.height)?.name ?? "Custom", c.textContent = r.name, i.setAttribute("aria-label", `${r.name}, ${r.width} × ${r.height}`), P(), F();
+					e !== "height" && (t.key === "ArrowLeft" || t.key === "ArrowRight") && (r.width = Wd(r.width + (t.key === "ArrowRight" ? n : -n))), e !== "width" && (t.key === "ArrowUp" || t.key === "ArrowDown") && (r.height = Wd(r.height + (t.key === "ArrowDown" ? n : -n))), r.name = Fd.find((e) => e.width === r.width && e.height === r.height)?.name ?? "Custom", c.textContent = r.name, i.setAttribute("aria-label", `${r.name}, ${r.width} × ${r.height}`), p(), P(), F();
 				}), i.append(a);
 			};
-			return B("width", "Resize width edge"), B("height", "Resize height edge"), B("both", "Resize width and height"), _.set(r.id, j), v.set(r.id, i), i;
+			return H("width", "Resize width edge"), H("height", "Resize height edge"), H("both", "Resize width and height"), _.set(r.id, L), v.set(r.id, i), i;
 		}, R = (e, t) => {
 			let n = a.findIndex((t) => t.id === e), r = Math.max(0, Math.min(a.length - 1, n + t));
 			r !== n && z(e, r);
@@ -6825,7 +6860,7 @@ function df(e, t) {
 	let i = n.createElement("style");
 	i.id = cf, i.textContent = e, uf(r) ? r.head.append(i) : r.append(i);
 }
-var ff = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --msr-font-sans: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\",\n      \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\",\n      \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --msr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --msr-color-red-50: oklch(97.1% 0.013 17.38);\n    --msr-color-red-200: oklch(88.5% 0.062 18.334);\n    --msr-color-red-600: oklch(57.7% 0.245 27.325);\n    --msr-color-black: #000;\n    --msr-color-white: #fff;\n    --msr-spacing: 0.25rem;\n    --msr-font-weight-normal: 400;\n    --msr-font-weight-medium: 500;\n    --msr-font-weight-semibold: 600;\n    --msr-radius-md: 0.375rem;\n    --msr-radius-lg: 0.5rem;\n    --msr-default-transition-duration: 150ms;\n    --msr-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --msr-default-font-family: var(--msr-font-sans);\n    --msr-default-mono-font-family: var(--msr-font-mono);\n    --msr-color-ink-50: #f8fafc;\n    --msr-color-ink-200: #e2e8f0;\n    --msr-color-ink-500: #64748b;\n    --msr-color-ink-700: #334155;\n    --msr-color-ink-900: #0f172a;\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--msr-default-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--msr-default-font-feature-settings, normal);\n    font-variation-settings: var(--msr-default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--msr-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--msr-default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--msr-default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring:where(:not(iframe)) {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .msr\\:pointer-events-auto {\n    pointer-events: auto;\n  }\n  .msr\\:pointer-events-none {\n    pointer-events: none;\n  }\n  .msr\\:absolute {\n    position: absolute;\n  }\n  .msr\\:fixed {\n    position: fixed;\n  }\n  .msr\\:relative {\n    position: relative;\n  }\n  .msr\\:inset-0 {\n    inset: 0px;\n  }\n  .msr\\:inset-x-0 {\n    inset-inline: 0px;\n  }\n  .msr\\:top-0 {\n    top: 0px;\n  }\n  .msr\\:top-1\\/2 {\n    top: calc(1 / 2 * 100%);\n  }\n  .msr\\:top-3 {\n    top: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:top-\\[18px\\] {\n    top: 18px;\n  }\n  .msr\\:top-full {\n    top: 100%;\n  }\n  .msr\\:right-0 {\n    right: 0px;\n  }\n  .msr\\:right-1\\.5 {\n    right: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:right-2 {\n    right: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:right-3 {\n    right: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:right-\\[8px\\] {\n    right: 8px;\n  }\n  .msr\\:bottom-0 {\n    bottom: 0px;\n  }\n  .msr\\:bottom-1\\.5 {\n    bottom: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:bottom-full {\n    bottom: 100%;\n  }\n  .msr\\:left-0 {\n    left: 0px;\n  }\n  .msr\\:left-1\\/2 {\n    left: calc(1 / 2 * 100%);\n  }\n  .msr\\:left-\\[8px\\] {\n    left: 8px;\n  }\n  .msr\\:left-\\[18px\\] {\n    left: 18px;\n  }\n  .msr\\:z-10 {\n    z-index: 10;\n  }\n  .msr\\:z-\\[2\\] {\n    z-index: 2;\n  }\n  .msr\\:z-\\[3\\] {\n    z-index: 3;\n  }\n  .msr\\:z-\\[60\\] {\n    z-index: 60;\n  }\n  .msr\\:z-\\[70\\] {\n    z-index: 70;\n  }\n  .msr\\:z-\\[80\\] {\n    z-index: 80;\n  }\n  .msr\\:z-\\[90\\] {\n    z-index: 90;\n  }\n  .msr\\:z-\\[94\\] {\n    z-index: 94;\n  }\n  .msr\\:z-\\[95\\] {\n    z-index: 95;\n  }\n  .msr\\:z-\\[110\\] {\n    z-index: 110;\n  }\n  .msr\\:z-\\[120\\] {\n    z-index: 120;\n  }\n  .msr\\:col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .msr\\:col-start-1 {\n    grid-column-start: 1;\n  }\n  .msr\\:col-start-3 {\n    grid-column-start: 3;\n  }\n  .msr\\:col-end-3 {\n    grid-column-end: 3;\n  }\n  .msr\\:m-0 {\n    margin: 0px;\n  }\n  .msr\\:mx-1 {\n    margin-inline: var(--msr-spacing);\n  }\n  .msr\\:mt-1 {\n    margin-top: var(--msr-spacing);\n  }\n  .msr\\:mt-1\\.5 {\n    margin-top: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:mt-2 {\n    margin-top: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:mb-1 {\n    margin-bottom: var(--msr-spacing);\n  }\n  .msr\\:mb-2 {\n    margin-bottom: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:-ml-1 {\n    margin-left: calc(var(--msr-spacing) * -1);\n  }\n  .msr\\:ml-1 {\n    margin-left: var(--msr-spacing);\n  }\n  .msr\\:ml-2 {\n    margin-left: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:ml-6 {\n    margin-left: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:ml-auto {\n    margin-left: auto;\n  }\n  .msr\\:box-border {\n    box-sizing: border-box;\n  }\n  .msr\\:block {\n    display: block;\n  }\n  .msr\\:flex {\n    display: flex;\n  }\n  .msr\\:grid {\n    display: grid;\n  }\n  .msr\\:inline-flex {\n    display: inline-flex;\n  }\n  .msr\\:size-1\\.5 {\n    width: calc(var(--msr-spacing) * 1.5);\n    height: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:size-3 {\n    width: calc(var(--msr-spacing) * 3);\n    height: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:size-4 {\n    width: calc(var(--msr-spacing) * 4);\n    height: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:size-5 {\n    width: calc(var(--msr-spacing) * 5);\n    height: calc(var(--msr-spacing) * 5);\n  }\n  .msr\\:size-6 {\n    width: calc(var(--msr-spacing) * 6);\n    height: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:size-7 {\n    width: calc(var(--msr-spacing) * 7);\n    height: calc(var(--msr-spacing) * 7);\n  }\n  .msr\\:size-8 {\n    width: calc(var(--msr-spacing) * 8);\n    height: calc(var(--msr-spacing) * 8);\n  }\n  .msr\\:size-\\[10px\\] {\n    width: 10px;\n    height: 10px;\n  }\n  .msr\\:size-\\[18px\\] {\n    width: 18px;\n    height: 18px;\n  }\n  .msr\\:size-full {\n    width: 100%;\n    height: 100%;\n  }\n  .msr\\:h-2 {\n    height: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:h-5 {\n    height: calc(var(--msr-spacing) * 5);\n  }\n  .msr\\:h-6 {\n    height: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:h-7 {\n    height: calc(var(--msr-spacing) * 7);\n  }\n  .msr\\:h-8 {\n    height: calc(var(--msr-spacing) * 8);\n  }\n  .msr\\:h-36 {\n    height: calc(var(--msr-spacing) * 36);\n  }\n  .msr\\:h-\\[3px\\] {\n    height: 3px;\n  }\n  .msr\\:h-\\[14px\\] {\n    height: 14px;\n  }\n  .msr\\:h-\\[18px\\] {\n    height: 18px;\n  }\n  .msr\\:h-\\[19px\\] {\n    height: 19px;\n  }\n  .msr\\:h-full {\n    height: 100%;\n  }\n  .msr\\:h-px {\n    height: 1px;\n  }\n  .msr\\:max-h-32 {\n    max-height: calc(var(--msr-spacing) * 32);\n  }\n  .msr\\:max-h-36 {\n    max-height: calc(var(--msr-spacing) * 36);\n  }\n  .msr\\:max-h-\\[50vh\\] {\n    max-height: 50vh;\n  }\n  .msr\\:max-h-\\[220px\\] {\n    max-height: 220px;\n  }\n  .msr\\:max-h-\\[calc\\(100vh-16px\\)\\] {\n    max-height: calc(100vh - 16px);\n  }\n  .msr\\:max-h-\\[min\\(70vh\\,34rem\\)\\] {\n    max-height: min(70vh, 34rem);\n  }\n  .msr\\:max-h-\\[min\\(320px\\,calc\\(100vh-16px\\)\\)\\] {\n    max-height: min(320px, calc(100vh - 16px));\n  }\n  .msr\\:min-h-0 {\n    min-height: 0px;\n  }\n  .msr\\:min-h-\\[34px\\] {\n    min-height: 34px;\n  }\n  .msr\\:w-0 {\n    width: 0px;\n  }\n  .msr\\:w-0\\.5 {\n    width: calc(var(--msr-spacing) * 0.5);\n  }\n  .msr\\:w-3 {\n    width: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:w-4 {\n    width: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:w-5 {\n    width: calc(var(--msr-spacing) * 5);\n  }\n  .msr\\:w-6 {\n    width: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:w-8 {\n    width: calc(var(--msr-spacing) * 8);\n  }\n  .msr\\:w-9 {\n    width: calc(var(--msr-spacing) * 9);\n  }\n  .msr\\:w-12 {\n    width: calc(var(--msr-spacing) * 12);\n  }\n  .msr\\:w-44 {\n    width: calc(var(--msr-spacing) * 44);\n  }\n  .msr\\:w-60 {\n    width: calc(var(--msr-spacing) * 60);\n  }\n  .msr\\:w-64 {\n    width: calc(var(--msr-spacing) * 64);\n  }\n  .msr\\:w-\\[18px\\] {\n    width: 18px;\n  }\n  .msr\\:w-\\[26px\\] {\n    width: 26px;\n  }\n  .msr\\:w-\\[208px\\] {\n    width: 208px;\n  }\n  .msr\\:w-\\[272px\\] {\n    width: 272px;\n  }\n  .msr\\:w-full {\n    width: 100%;\n  }\n  .msr\\:w-px {\n    width: 1px;\n  }\n  .msr\\:max-w-0 {\n    max-width: 0px;\n  }\n  .msr\\:max-w-20 {\n    max-width: calc(var(--msr-spacing) * 20);\n  }\n  .msr\\:max-w-\\[calc\\(100vw-16px\\)\\] {\n    max-width: calc(100vw - 16px);\n  }\n  .msr\\:min-w-0 {\n    min-width: 0px;\n  }\n  .msr\\:min-w-36 {\n    min-width: calc(var(--msr-spacing) * 36);\n  }\n  .msr\\:flex-1 {\n    flex: 1;\n  }\n  .msr\\:flex-none {\n    flex: none;\n  }\n  .msr\\:shrink-0 {\n    flex-shrink: 0;\n  }\n  .msr\\:-translate-x-1 {\n    --tw-translate-x: calc(var(--msr-spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:translate-x-0 {\n    --tw-translate-x: 0px;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:-rotate-90 {\n    rotate: calc(90deg * -1);\n  }\n  .msr\\:rotate-45 {\n    rotate: 45deg;\n  }\n  .msr\\:rotate-90 {\n    rotate: 90deg;\n  }\n  .msr\\:rotate-180 {\n    rotate: 180deg;\n  }\n  .msr\\:rotate-\\[45deg\\] {\n    rotate: 45deg;\n  }\n  .msr\\:rotate-\\[135deg\\] {\n    rotate: 135deg;\n  }\n  .msr\\:cursor-crosshair {\n    cursor: crosshair;\n  }\n  .msr\\:cursor-default {\n    cursor: default;\n  }\n  .msr\\:cursor-pointer {\n    cursor: pointer;\n  }\n  .msr\\:touch-none {\n    touch-action: none;\n  }\n  .msr\\:resize-none {\n    resize: none;\n  }\n  .msr\\:list-none {\n    list-style-type: none;\n  }\n  .msr\\:appearance-none {\n    appearance: none;\n  }\n  .msr\\:grid-cols-\\[3\\.5rem_minmax\\(0\\,1fr\\)\\] {\n    grid-template-columns: 3.5rem minmax(0,1fr);\n  }\n  .msr\\:grid-cols-\\[5\\.5rem_minmax\\(0\\,1fr\\)\\] {\n    grid-template-columns: 5.5rem minmax(0,1fr);\n  }\n  .msr\\:grid-cols-\\[78px_150px\\] {\n    grid-template-columns: 78px 150px;\n  }\n  .msr\\:grid-cols-\\[78px_156px\\] {\n    grid-template-columns: 78px 156px;\n  }\n  .msr\\:grid-cols-\\[78px_minmax\\(0\\,1fr\\)\\] {\n    grid-template-columns: 78px minmax(0,1fr);\n  }\n  .msr\\:grid-cols-\\[auto_minmax\\(0\\,1fr\\)\\] {\n    grid-template-columns: auto minmax(0,1fr);\n  }\n  .msr\\:grid-cols-\\[minmax\\(0\\,1fr\\)\\] {\n    grid-template-columns: minmax(0,1fr);\n  }\n  .msr\\:grid-cols-\\[minmax\\(0\\,1fr\\)_28px_34px\\] {\n    grid-template-columns: minmax(0,1fr) 28px 34px;\n  }\n  .msr\\:flex-col {\n    flex-direction: column;\n  }\n  .msr\\:items-baseline {\n    align-items: baseline;\n  }\n  .msr\\:items-center {\n    align-items: center;\n  }\n  .msr\\:items-start {\n    align-items: flex-start;\n  }\n  .msr\\:items-stretch {\n    align-items: stretch;\n  }\n  .msr\\:justify-between {\n    justify-content: space-between;\n  }\n  .msr\\:justify-center {\n    justify-content: center;\n  }\n  .msr\\:justify-end {\n    justify-content: flex-end;\n  }\n  .msr\\:gap-0 {\n    gap: 0px;\n  }\n  .msr\\:gap-0\\.5 {\n    gap: calc(var(--msr-spacing) * 0.5);\n  }\n  .msr\\:gap-1 {\n    gap: var(--msr-spacing);\n  }\n  .msr\\:gap-1\\.5 {\n    gap: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:gap-2 {\n    gap: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:gap-3 {\n    gap: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:gap-\\[2px\\] {\n    gap: 2px;\n  }\n  .msr\\:gap-px {\n    gap: 1px;\n  }\n  .msr\\:gap-x-3 {\n    column-gap: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:gap-y-1 {\n    row-gap: var(--msr-spacing);\n  }\n  .msr\\:self-center {\n    align-self: center;\n  }\n  .msr\\:self-stretch {\n    align-self: stretch;\n  }\n  .msr\\:justify-self-end {\n    justify-self: flex-end;\n  }\n  .msr\\:truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .msr\\:overflow-auto {\n    overflow: auto;\n  }\n  .msr\\:overflow-hidden {\n    overflow: hidden;\n  }\n  .msr\\:overflow-visible {\n    overflow: visible;\n  }\n  .msr\\:overflow-x-hidden {\n    overflow-x: hidden;\n  }\n  .msr\\:overflow-y-auto {\n    overflow-y: auto;\n  }\n  .msr\\:rounded {\n    border-radius: 0.25rem;\n  }\n  .msr\\:rounded-\\[3px\\] {\n    border-radius: 3px;\n  }\n  .msr\\:rounded-\\[5px\\] {\n    border-radius: 5px;\n  }\n  .msr\\:rounded-\\[6px\\] {\n    border-radius: 6px;\n  }\n  .msr\\:rounded-\\[7px\\] {\n    border-radius: 7px;\n  }\n  .msr\\:rounded-\\[8px\\] {\n    border-radius: 8px;\n  }\n  .msr\\:rounded-\\[9px\\] {\n    border-radius: 9px;\n  }\n  .msr\\:rounded-\\[10px\\] {\n    border-radius: 10px;\n  }\n  .msr\\:rounded-\\[12px\\] {\n    border-radius: 12px;\n  }\n  .msr\\:rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .msr\\:rounded-lg {\n    border-radius: var(--msr-radius-lg);\n  }\n  .msr\\:rounded-md {\n    border-radius: var(--msr-radius-md);\n  }\n  .msr\\:rounded-none {\n    border-radius: 0;\n  }\n  .msr\\:border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .msr\\:border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .msr\\:border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .msr\\:border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .msr\\:border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n  .msr\\:border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .msr\\:border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .msr\\:border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n  .msr\\:border-dotted {\n    --tw-border-style: dotted;\n    border-style: dotted;\n  }\n  .msr\\:border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .msr\\:border-\\[\\#0d99ff\\] {\n    border-color: #0d99ff;\n  }\n  .msr\\:border-\\[\\#2563eb\\]\\/70 {\n    border-color: color-mix(in oklab, #2563eb 70%, transparent);\n  }\n  .msr\\:border-black\\/8 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 8%, transparent);\n    }\n  }\n  .msr\\:border-black\\/10 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n    }\n  }\n  .msr\\:border-black\\/15 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 15%, transparent);\n    }\n  }\n  .msr\\:border-ink-200 {\n    border-color: var(--msr-color-ink-200);\n  }\n  .msr\\:border-ink-500 {\n    border-color: var(--msr-color-ink-500);\n  }\n  .msr\\:border-ink-700 {\n    border-color: var(--msr-color-ink-700);\n  }\n  .msr\\:border-red-200 {\n    border-color: var(--msr-color-red-200);\n  }\n  .msr\\:border-transparent {\n    border-color: transparent;\n  }\n  .msr\\:bg-\\[\\#0d99ff\\] {\n    background-color: #0d99ff;\n  }\n  .msr\\:bg-\\[\\#0d99ff\\]\\/10 {\n    background-color: color-mix(in oklab, #0d99ff 10%, transparent);\n  }\n  .msr\\:bg-\\[\\#2563eb\\] {\n    background-color: #2563eb;\n  }\n  .msr\\:bg-\\[\\#fff\\] {\n    background-color: #fff;\n  }\n  .msr\\:bg-black {\n    background-color: var(--msr-color-black);\n  }\n  .msr\\:bg-black\\/10 {\n    background-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n    }\n  }\n  .msr\\:bg-ink-50 {\n    background-color: var(--msr-color-ink-50);\n  }\n  .msr\\:bg-ink-50\\/40 {\n    background-color: var(--msr-color-ink-50);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-ink-50) 40%, transparent);\n    }\n  }\n  .msr\\:bg-ink-200 {\n    background-color: var(--msr-color-ink-200);\n  }\n  .msr\\:bg-ink-900 {\n    background-color: var(--msr-color-ink-900);\n  }\n  .msr\\:bg-ink-900\\/90 {\n    background-color: var(--msr-color-ink-900);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-ink-900) 90%, transparent);\n    }\n  }\n  .msr\\:bg-transparent {\n    background-color: transparent;\n  }\n  .msr\\:bg-white {\n    background-color: var(--msr-color-white);\n  }\n  .msr\\:bg-white\\/60 {\n    background-color: var(--msr-color-white);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-white) 60%, transparent);\n    }\n  }\n  .msr\\:bg-white\\/85 {\n    background-color: var(--msr-color-white);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-white) 85%, transparent);\n    }\n  }\n  .msr\\:p-0 {\n    padding: 0px;\n  }\n  .msr\\:p-1 {\n    padding: var(--msr-spacing);\n  }\n  .msr\\:p-1\\.5 {\n    padding: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:p-2 {\n    padding: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:p-3 {\n    padding: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:p-\\[2px\\] {\n    padding: 2px;\n  }\n  .msr\\:p-px {\n    padding: 1px;\n  }\n  .msr\\:px-0 {\n    padding-inline: 0px;\n  }\n  .msr\\:px-0\\.5 {\n    padding-inline: calc(var(--msr-spacing) * 0.5);\n  }\n  .msr\\:px-1 {\n    padding-inline: var(--msr-spacing);\n  }\n  .msr\\:px-1\\.5 {\n    padding-inline: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:px-2 {\n    padding-inline: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:py-0 {\n    padding-block: 0px;\n  }\n  .msr\\:py-0\\.5 {\n    padding-block: calc(var(--msr-spacing) * 0.5);\n  }\n  .msr\\:py-1 {\n    padding-block: var(--msr-spacing);\n  }\n  .msr\\:py-1\\.5 {\n    padding-block: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:py-2 {\n    padding-block: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:pt-0\\.5 {\n    padding-top: calc(var(--msr-spacing) * 0.5);\n  }\n  .msr\\:pt-2 {\n    padding-top: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:pr-0 {\n    padding-right: 0px;\n  }\n  .msr\\:pr-2 {\n    padding-right: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:pr-6 {\n    padding-right: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:pb-1 {\n    padding-bottom: var(--msr-spacing);\n  }\n  .msr\\:pb-1\\.5 {\n    padding-bottom: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:pb-2 {\n    padding-bottom: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:text-center {\n    text-align: center;\n  }\n  .msr\\:text-left {\n    text-align: left;\n  }\n  .msr\\:text-right {\n    text-align: right;\n  }\n  .msr\\:font-mono {\n    font-family: var(--msr-font-mono);\n  }\n  .msr\\:text-\\[9px\\] {\n    font-size: 9px;\n  }\n  .msr\\:text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .msr\\:text-\\[11px\\] {\n    font-size: 11px;\n  }\n  .msr\\:text-\\[12px\\] {\n    font-size: 12px;\n  }\n  .msr\\:text-\\[14px\\] {\n    font-size: 14px;\n  }\n  .msr\\:leading-4 {\n    --tw-leading: calc(var(--msr-spacing) * 4);\n    line-height: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:leading-5 {\n    --tw-leading: calc(var(--msr-spacing) * 5);\n    line-height: calc(var(--msr-spacing) * 5);\n  }\n  .msr\\:leading-\\[1\\.45\\] {\n    --tw-leading: 1.45;\n    line-height: 1.45;\n  }\n  .msr\\:leading-\\[18px\\] {\n    --tw-leading: 18px;\n    line-height: 18px;\n  }\n  .msr\\:leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .msr\\:font-medium {\n    --tw-font-weight: var(--msr-font-weight-medium);\n    font-weight: var(--msr-font-weight-medium);\n  }\n  .msr\\:font-normal {\n    --tw-font-weight: var(--msr-font-weight-normal);\n    font-weight: var(--msr-font-weight-normal);\n  }\n  .msr\\:font-semibold {\n    --tw-font-weight: var(--msr-font-weight-semibold);\n    font-weight: var(--msr-font-weight-semibold);\n  }\n  .msr\\:break-words {\n    overflow-wrap: break-word;\n  }\n  .msr\\:text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .msr\\:whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .msr\\:whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .msr\\:text-\\[\\#64748b\\] {\n    color: #64748b;\n  }\n  .msr\\:text-black {\n    color: var(--msr-color-black);\n  }\n  .msr\\:text-black\\/30 {\n    color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-black) 30%, transparent);\n    }\n  }\n  .msr\\:text-black\\/45 {\n    color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-black) 45%, transparent);\n    }\n  }\n  .msr\\:text-ink-50 {\n    color: var(--msr-color-ink-50);\n  }\n  .msr\\:text-ink-500 {\n    color: var(--msr-color-ink-500);\n  }\n  .msr\\:text-ink-700 {\n    color: var(--msr-color-ink-700);\n  }\n  .msr\\:text-ink-900 {\n    color: var(--msr-color-ink-900);\n  }\n  .msr\\:text-red-600 {\n    color: var(--msr-color-red-600);\n  }\n  .msr\\:text-white {\n    color: var(--msr-color-white);\n  }\n  .msr\\:text-white\\/60 {\n    color: var(--msr-color-white);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-white) 60%, transparent);\n    }\n  }\n  .msr\\:tabular-nums {\n    --tw-numeric-spacing: tabular-nums;\n    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n  }\n  .msr\\:underline {\n    text-decoration-line: underline;\n  }\n  .msr\\:underline-offset-2 {\n    text-underline-offset: 2px;\n  }\n  .msr\\:opacity-0 {\n    opacity: 0%;\n  }\n  .msr\\:opacity-60 {\n    opacity: 60%;\n  }\n  .msr\\:opacity-80 {\n    opacity: 80%;\n  }\n  .msr\\:opacity-100 {\n    opacity: 100%;\n  }\n  .msr\\:shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .msr\\:outline-transparent {\n    outline-color: transparent;\n  }\n  .msr\\:transition-\\[max-width\\,opacity\\,transform\\,padding\\] {\n    transition-property: max-width,opacity,transform,padding;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-\\[width\\,opacity\\] {\n    transition-property: width,opacity;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-none {\n    transition-property: none;\n  }\n  .msr\\:duration-150 {\n    --tw-duration: 150ms;\n    transition-duration: 150ms;\n  }\n  .msr\\:ease-\\[ease\\] {\n    --tw-ease: ease;\n    transition-timing-function: ease;\n  }\n  .msr\\:outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .msr\\:select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  @media (hover: hover) {\n    .msr\\:group-hover\\:border-ink-200:is(:where(.msr\\:group):hover *) {\n      border-color: var(--msr-color-ink-200);\n    }\n  }\n  .msr\\:focus-within\\:rounded-l-\\[5px\\]:focus-within {\n    border-top-left-radius: 5px;\n    border-bottom-left-radius: 5px;\n  }\n  .msr\\:focus-within\\:rounded-r-\\[5px\\]:focus-within {\n    border-top-right-radius: 5px;\n    border-bottom-right-radius: 5px;\n  }\n  .msr\\:focus-within\\:outline:focus-within {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .msr\\:focus-within\\:outline-1:focus-within {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .msr\\:focus-within\\:outline-offset-\\[-1px\\]:focus-within {\n    outline-offset: -1px;\n  }\n  .msr\\:focus-within\\:outline-\\[\\#0d99ff\\]:focus-within {\n    outline-color: #0d99ff;\n  }\n  .msr\\:focus-within\\:outline-\\[var\\(--msr-accent\\)\\]:focus-within {\n    outline-color: var(--msr-accent);\n  }\n  @media (hover: hover) {\n    .msr\\:hover\\:border-ink-200:hover {\n      border-color: var(--msr-color-ink-200);\n    }\n    .msr\\:hover\\:bg-\\[\\#0d99ff\\]:hover {\n      background-color: #0d99ff;\n    }\n    .msr\\:hover\\:bg-black\\/4:hover {\n      background-color: var(--msr-color-black);\n    }\n    @supports (color: color-mix(in lab, red, red)) {\n      .msr\\:hover\\:bg-black\\/4:hover {\n        background-color: color-mix(in oklab, var(--msr-color-black) 4%, transparent);\n      }\n    }\n    .msr\\:hover\\:bg-black\\/10:hover {\n      background-color: var(--msr-color-black);\n    }\n    @supports (color: color-mix(in lab, red, red)) {\n      .msr\\:hover\\:bg-black\\/10:hover {\n        background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n      }\n    }\n    .msr\\:hover\\:bg-ink-50:hover {\n      background-color: var(--msr-color-ink-50);\n    }\n    .msr\\:hover\\:bg-red-50:hover {\n      background-color: var(--msr-color-red-50);\n    }\n    .msr\\:hover\\:bg-white:hover {\n      background-color: var(--msr-color-white);\n    }\n    .msr\\:hover\\:text-ink-700:hover {\n      color: var(--msr-color-ink-700);\n    }\n    .msr\\:hover\\:text-ink-900:hover {\n      color: var(--msr-color-ink-900);\n    }\n    .msr\\:hover\\:text-white:hover {\n      color: var(--msr-color-white);\n    }\n    .msr\\:hover\\:underline:hover {\n      text-decoration-line: underline;\n    }\n  }\n  .msr\\:focus\\:border-\\[\\#0d99ff\\]:focus {\n    border-color: #0d99ff;\n  }\n  .msr\\:focus\\:shadow-\\[inset_0_0_0_1px_\\#0d99ff\\]:focus {\n    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #0d99ff);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:focus\\:shadow-\\[inset_0_0_0_1px_var\\(--msr-accent\\)\\]:focus {\n    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--msr-accent));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:focus\\:outline-none:focus {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .msr\\:focus-visible\\:border-\\[\\#0d99ff\\]:focus-visible {\n    border-color: #0d99ff;\n  }\n  .msr\\:focus-visible\\:bg-\\[\\#0d99ff\\]:focus-visible {\n    background-color: #0d99ff;\n  }\n  .msr\\:focus-visible\\:bg-black\\/4:focus-visible {\n    background-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-black) 4%, transparent);\n    }\n  }\n  .msr\\:focus-visible\\:text-white:focus-visible {\n    color: var(--msr-color-white);\n  }\n  .msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_\\#0d99ff\\]:focus-visible {\n    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #0d99ff);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_\\#ef4444\\]:focus-visible {\n    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #ef4444);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:focus-visible\\:ring-1:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:focus-visible\\:ring-\\[\\#0d99ff\\]\\/25:focus-visible {\n    --tw-ring-color: color-mix(in oklab, #0d99ff 25%, transparent);\n  }\n  .msr\\:focus-visible\\:ring-\\[var\\(--msr-accent\\)\\]\\/25:focus-visible {\n    --tw-ring-color: var(--msr-accent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-ring-color: color-mix(in oklab, var(--msr-accent) 25%, transparent);\n    }\n  }\n  .msr\\:focus-visible\\:outline-none:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .msr\\:disabled\\:cursor-default:disabled {\n    cursor: default;\n  }\n  .msr\\:disabled\\:opacity-40:disabled {\n    opacity: 40%;\n  }\n  .msr\\:disabled\\:opacity-45:disabled {\n    opacity: 45%;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .msr\\:motion-reduce\\:transition-none {\n      transition-property: none;\n    }\n  }\n}\n:root, :host {\n  --color-ink-50: #f8fafc;\n  --color-ink-200: #e2e8f0;\n  --color-ink-500: #64748b;\n  --color-ink-700: #334155;\n  --color-ink-900: #0f172a;\n}\n:host {\n  all: initial;\n  display: block;\n  color-scheme: light;\n  color: #0f172a;\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 1.5;\n  letter-spacing: normal;\n  direction: ltr;\n  --msr-spacing: 4px;\n}\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n@layer base {\n  *, ::before, ::after, ::backdrop {\n    --tw-border-style: solid;\n    --tw-outline-style: solid;\n    --tw-shadow: 0 0 #0000;\n    --tw-inset-shadow: 0 0 #0000;\n    --tw-ring-shadow: 0 0 #0000;\n    --tw-inset-ring-shadow: 0 0 #0000;\n    --tw-ring-offset-shadow: 0 0 #0000;\n    --tw-translate-x: 0;\n    --tw-translate-y: 0;\n    --tw-translate-z: 0;\n  }\n  button, input, select, textarea {\n    appearance: none;\n    background-color: transparent;\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    letter-spacing: inherit;\n  }\n}\n.mesurer-toolbar-surface {\n  box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n.mesurer-menu-surface {\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\n}\n.mesurer-color-picker {\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n.mesurer-settings-tabs {\n  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);\n}\n.mesurer-settings-tab[aria-selected=\"true\"] {\n  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);\n}\n.mesurer-switch-track {\n  box-sizing: border-box;\n  border: 1px solid #e2e8f0;\n}\n.mesurer-switch-track[data-checked=\"true\"] {\n  border-color: #0d99ff;\n}\n.mesurer-control-shell {\n  border: 1px solid transparent;\n}\n.mesurer-control-shell:hover {\n  border-color: #e2e8f0;\n}\n.mesurer-control-focus:focus-within {\n  outline: 1px solid #0d99ff;\n  outline-offset: -1px;\n}\n.mesurer-root {\n  --msr-spacing: 4px;\n}\n[data-mesurer-context-root=\"true\"] :where(*) {\n  all: revert-layer;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-trigger=\"true\"] {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  display: flex !important;\n  width: 24px !important;\n  height: 24px !important;\n  min-width: 24px !important;\n  min-height: 24px !important;\n  max-width: 24px !important;\n  max-height: 24px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  align-items: center !important;\n  justify-content: center !important;\n  border: 1px solid var(--msr-color-ink-200, #e2e8f0) !important;\n  border-radius: 7px !important;\n  background: var(--msr-surface, #fff) !important;\n  color: var(--msr-content, #0f172a) !important;\n  opacity: 1 !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-trigger=\"true\"]:hover {\n  background: var(--msr-content, #0f172a) !important;\n  @supports (color: color-mix(in lab, red, red)) {\n    background: color-mix(in srgb, var(--msr-content, #0f172a) 6%, var(--msr-surface, #fff)) !important;\n  }\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-trigger=\"true\"]:focus-visible {\n  border-color: #0d99ff !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-marker=\"true\"] {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  display: flex !important;\n  width: 24px !important;\n  height: 24px !important;\n  min-width: 24px !important;\n  min-height: 24px !important;\n  max-width: 24px !important;\n  max-height: 24px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  align-items: center !important;\n  justify-content: center !important;\n  border: 0 !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n}\n[data-mesurer-context-root=\"true\"] :is( [data-mesurer-annotation-composer=\"true\"], [data-mesurer-annotation-panel=\"true\"] ) {\n  box-shadow: var(--msr-shadow-floating, 0 10px 30px rgba(0, 0, 0, 0.08));\n}\n[data-mesurer-context-root=\"true\"] :is( [data-mesurer-annotation-trigger=\"true\"], [data-mesurer-annotation-composer=\"true\"], [data-mesurer-annotation-panel=\"true\"] ) svg {\n  display: block !important;\n  width: 14px !important;\n  height: 14px !important;\n  min-width: 14px !important;\n  min-height: 14px !important;\n  visibility: visible !important;\n  opacity: 1 !important;\n  fill: currentColor !important;\n  color: inherit !important;\n  flex-shrink: 0 !important;\n}\n[data-mesurer-context-root=\"true\"] :is( [data-mesurer-annotation-trigger=\"true\"], [data-mesurer-annotation-composer=\"true\"], [data-mesurer-annotation-panel=\"true\"] ) svg path {\n  fill: currentColor !important;\n  stroke: none !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-send=\"true\"] {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  display: flex !important;\n  width: 24px !important;\n  height: 24px !important;\n  min-width: 24px !important;\n  min-height: 24px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  align-items: center !important;\n  justify-content: center !important;\n  border: 0 !important;\n  border-radius: 9999px !important;\n  background: #0d99ff !important;\n  color: #fff !important;\n  opacity: 1 !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-send=\"true\"]:disabled {\n  opacity: 0.4 !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-composer=\"true\"] .mesurer-send-icon {\n  width: 16px !important;\n  height: 16px !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-composer=\"true\"] .mesurer-send-icon path {\n  fill: none !important;\n  stroke: currentColor !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-composer=\"true\"] textarea {\n  box-sizing: border-box !important;\n  min-height: 34px !important;\n  max-height: 128px !important;\n  resize: none !important;\n}\nbody [data-mesurer-native-scroll-anchor=\"box\"][data-mesurer-nested-scroll-compensation=\"true\"] {\n  position: absolute !important;\n  left: calc(anchor(left) + var(--mesurer-nested-scroll-x, 0px)) !important;\n  top: calc(anchor(top) + var(--mesurer-nested-scroll-y, 0px)) !important;\n}\nbody [data-mesurer-native-scroll-anchor=\"label\"][data-mesurer-nested-scroll-compensation=\"true\"] {\n  position: absolute !important;\n  left: calc(anchor(center) + var(--mesurer-nested-scroll-x, 0px)) !important;\n  top: calc(anchor(bottom) + 2px + var(--mesurer-nested-scroll-y, 0px)) !important;\n}\nbody [data-mesurer-native-scroll-anchor=\"offset\"][data-mesurer-nested-scroll-compensation=\"true\"] {\n  position: absolute !important;\n  left: calc(anchor(left) + var(--mesurer-native-anchor-x, 0px) + var(--mesurer-nested-scroll-x, 0px)) !important;\n  top: calc(anchor(top) + var(--mesurer-native-anchor-y, 0px) + var(--mesurer-nested-scroll-y, 0px)) !important;\n}\n[data-mesurer-text-edit-ring=\"true\"], [data-mesurer-text-selection-highlight=\"true\"], [data-mesurer-text-caret=\"true\"] {\n  z-index: 2147482900 !important;\n}\n[data-mesurer-text-inspector-placement-shell=\"true\"], .mesurer-ti-card {\n  z-index: 2147483647 !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-scroll-mode=\"document\"] {\n  position: absolute !important;\n}\n[data-mesurer-annotation-scroll-mode=\"native-anchor\"] {\n  position: fixed !important;\n}\n[data-mesurer-native-scroll-anchor=\"offset\"][data-mesurer-nested-scroll-compensation=\"true\"][data-mesurer-annotation-scroll-mode=\"native-anchor\"] {\n  position: fixed !important;\n}\n[data-mesurer-annotation-badge=\"true\"] {\n  width: 20px !important;\n  height: 20px !important;\n  transform: none !important;\n  transition: width 150ms ease, height 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease !important;\n}\n[data-mesurer-annotation-marker=\"true\"][data-mesurer-annotation-highlighted=\"true\"] > [data-mesurer-annotation-badge=\"true\"] {\n  width: 24px !important;\n  height: 24px !important;\n}\n[data-mesurer-root=\"true\"][data-mesurer-direct-text-edit-active=\"true\"] [data-mesurer-annotation-trigger=\"true\"], [data-mesurer-context-root=\"true\"][data-mesurer-direct-text-edit-active=\"true\"] [data-mesurer-annotation-trigger=\"true\"] {\n  display: none !important;\n}\n[data-mesurer-plugin-settings] [role=\"switch\"] {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n[data-mesurer-plugin-settings] [role=\"switch\"] > span:first-child {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n[data-mesurer-plugin-settings-disclosure=\"plugins\"] {\n  width: calc(100% + 16px);\n  margin-inline: -8px;\n}\n.mesurer-solid-root {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483000;\n  pointer-events: none;\n  --msr-spacing: 4px;\n}\n.mesurer-solid-root [role=\"slider\"] {\n  border: 0;\n}\n[data-mesurer-distance-kind=\"selection-spacing\"][data-mesurer-distance-active=\"true\"] [data-mesurer-distance-hover-target=\"true\"] {\n  opacity: 1 !important;\n}\n[data-mesurer-distance-kind=\"selection-spacing\"][data-mesurer-distance-active=\"true\"]:has([data-mesurer-distance-label-axis=\"x\"]:hover) [data-mesurer-distance-line^=\"vertical\"], [data-mesurer-distance-kind=\"selection-spacing\"][data-mesurer-distance-active=\"true\"]:has([data-mesurer-distance-label-axis=\"y\"]:hover) [data-mesurer-distance-line^=\"horizontal\"], [data-mesurer-distance-kind=\"selection-spacing\"][data-mesurer-distance-active=\"true\"]:has([data-mesurer-distance-label-axis]:hover) [data-mesurer-distance-connector=\"true\"], [data-mesurer-spacing-paint=\"true\"][data-mesurer-distance-active=\"true\"][data-mesurer-spacing-hover-axis] [data-mesurer-distance-connector=\"true\"] {\n  opacity: 0.16 !important;\n}\n[data-mesurer-spacing-paint=\"true\"][data-mesurer-distance-active=\"true\"][data-mesurer-spacing-hover-axis=\"x\"] [data-mesurer-distance-line^=\"vertical\"], [data-mesurer-spacing-paint=\"true\"][data-mesurer-distance-active=\"true\"][data-mesurer-spacing-hover-axis=\"y\"] [data-mesurer-distance-line^=\"horizontal\"] {\n  opacity: 0.16 !important;\n}\nbody.mesurer-solid-xray * {\n  outline: solid 1px blue !important;\n}\nbody.mesurer-solid-xray [data-mesurer-root], body.mesurer-solid-xray [data-mesurer-root] *, body.mesurer-solid-xray [data-mesurer-inspector-ui], body.mesurer-solid-xray [data-mesurer-inspector-ui] *, body.mesurer-solid-xray .mesurer-toolbar-surface, body.mesurer-solid-xray .mesurer-toolbar-surface *, body.mesurer-solid-xray .mesurer-ti-box, body.mesurer-solid-xray .mesurer-ti-card, body.mesurer-solid-xray .mesurer-ti-card *, body.mesurer-solid-xray .mesurer-ti-close {\n  outline: none !important;\n}\n[data-mesurer-toolbar=\"true\"] div:has(> [data-mesurer-toolbar-compact-item]) {\n  transition: padding-inline 150ms ease;\n}\n[data-mesurer-toolbar=\"true\"][data-mesurer-toolbar-compact=\"true\"] div:has(> [data-mesurer-toolbar-compact-item]):not(:has(> [data-mesurer-toolbar-compact-item][data-visible=\"true\"])) {\n  padding-inline: 0;\n}\n[data-mesurer-selected-measurement=\"true\"]:has(> [data-mesurer-native-scroll-anchor=\"box\"]) {\n  display: contents !important;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-mesurer-toolbar=\"true\"] div:has(> [data-mesurer-toolbar-compact-item]) {\n    transition: none;\n  }\n  [data-mesurer-annotation-badge=\"true\"] {\n    transition: none !important;\n  }\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) {\n  --msr-accent: #0d99ff;\n  --msr-surface: #fff;\n  --msr-surface-raised: #fff;\n  --msr-surface-muted: #f8fafc;\n  --msr-content: #18181b;\n  --msr-color-white: #fff;\n  --msr-color-black: #000;\n  --msr-color-ink-50: #f8fafc;\n  --msr-color-ink-100: #f1f5f9;\n  --msr-color-ink-200: #e2e8f0;\n  --msr-color-ink-300: #cbd5e1;\n  --msr-color-ink-500: #64748b;\n  --msr-color-ink-700: #334155;\n  --msr-color-ink-900: #18181b;\n  --color-ink-50: var(--msr-color-ink-50);\n  --color-ink-100: var(--msr-color-ink-100);\n  --color-ink-200: var(--msr-color-ink-200);\n  --color-ink-300: var(--msr-color-ink-300);\n  --color-ink-500: var(--msr-color-ink-500);\n  --color-ink-700: var(--msr-color-ink-700);\n  --color-ink-900: var(--msr-color-ink-900);\n  --msr-danger-bg: #fef2f2;\n  --msr-danger-border: #fecaca;\n  --msr-danger-text: #dc2626;\n  --msr-danger-solid-bg: #dc2626;\n  --msr-danger-solid-hover: #b91c1c;\n  --msr-danger-solid-text: #fff;\n  --color-red-50: var(--msr-danger-bg);\n  --color-red-200: var(--msr-danger-border);\n  --color-red-600: var(--msr-danger-text);\n  --color-red-700: #b91c1c;\n  --msr-control-thumb: #fff;\n  --msr-slider-track: rgba(15, 23, 42, 0.16);\n  --msr-shadow-toolbar: 0 0 0.4px rgba(0, 0, 0, 0.22),\n    0 6px 18px rgba(0, 0, 0, 0.03),\n    0 3px 9px rgba(0, 0, 0, 0.06),\n    0 1px 1px rgba(0, 0, 0, 0.06);\n  --msr-shadow-floating: 0 0 0.4px rgba(0, 0, 0, 0.22),\n    0 6px 18px rgba(0, 0, 0, 0.03),\n    0 3px 9px rgba(0, 0, 0, 0.06),\n    0 1px 1px rgba(0, 0, 0, 0.06);\n  --msr-shadow-select-menu: var(--msr-shadow-floating);\n  color: var(--msr-content);\n  color-scheme: light;\n}\n:where( [data-mesurer-root=\"true\"][data-theme=\"dark\"], [data-mesurer-inspector-ui=\"true\"][data-theme=\"dark\"] ) {\n  --msr-accent: #0c8ce9;\n  --msr-surface: #323232;\n  --msr-surface-raised: #3a3a3a;\n  --msr-surface-muted: #3a3a3a;\n  --msr-content: #f5f5f5;\n  --msr-color-white: #f5f5f5;\n  --msr-color-black: #171717;\n  --msr-color-ink-50: #3a3a3a;\n  --msr-color-ink-100: #414141;\n  --msr-color-ink-200: #4a4a4a;\n  --msr-color-ink-300: #5a5a5a;\n  --msr-color-ink-500: #a0a0a0;\n  --msr-color-ink-700: #dedede;\n  --msr-color-ink-900: #f5f5f5;\n  --msr-danger-bg: #3f2020;\n  --msr-danger-border: #7f3f46;\n  --msr-danger-text: #f87171;\n  --msr-danger-solid-bg: #c95058;\n  --msr-danger-solid-hover: #b7424b;\n  --msr-danger-solid-text: #f5f5f5;\n  --color-red-700: #fca5a5;\n  --msr-control-thumb: #f4f4f5;\n  --msr-slider-track: rgba(245, 245, 245, 0.24);\n  --msr-shadow-toolbar: 0 0 0.4px lch(100% 0 0 / 0.10),\n    0 3px 8px lch(0% 0 0 / 0.125),\n    0 2px 5px lch(0% 0 0 / 0.125),\n    0 1px 1px lch(0% 0 0 / 0.125);\n  --msr-shadow-floating: 0 0 0.4px lch(100% 0 0 / 0.10),\n    0 3px 8px lch(0% 0 0 / 0.125),\n    0 2px 5px lch(0% 0 0 / 0.125),\n    0 1px 1px lch(0% 0 0 / 0.125);\n  --msr-shadow-select-menu: 0 0 0 0.4px lch(100% 0 0 / 0.14),\n    0 4px 12px lch(0% 0 0 / 0.22),\n    0 1px 3px lch(0% 0 0 / 0.18);\n  color-scheme: dark;\n}\n@media (prefers-color-scheme: dark) {\n  :where( [data-mesurer-root=\"true\"][data-theme=\"system\"], [data-mesurer-inspector-ui=\"true\"][data-theme=\"system\"] ) {\n    --msr-accent: #0c8ce9;\n    --msr-surface: #323232;\n    --msr-surface-raised: #3a3a3a;\n    --msr-surface-muted: #3a3a3a;\n    --msr-content: #f5f5f5;\n    --msr-color-white: #f5f5f5;\n    --msr-color-black: #171717;\n    --msr-color-ink-50: #3a3a3a;\n    --msr-color-ink-100: #414141;\n    --msr-color-ink-200: #4a4a4a;\n    --msr-color-ink-300: #5a5a5a;\n    --msr-color-ink-500: #a0a0a0;\n    --msr-color-ink-700: #dedede;\n    --msr-color-ink-900: #f5f5f5;\n    --msr-danger-bg: #3f2020;\n    --msr-danger-border: #7f3f46;\n    --msr-danger-text: #f87171;\n    --msr-danger-solid-bg: #c95058;\n    --msr-danger-solid-hover: #b7424b;\n    --msr-danger-solid-text: #f5f5f5;\n    --color-red-700: #fca5a5;\n    --msr-control-thumb: #f4f4f5;\n    --msr-slider-track: rgba(245, 245, 245, 0.24);\n    --msr-shadow-toolbar: 0 0 0.4px lch(100% 0 0 / 0.10),\n      0 3px 8px lch(0% 0 0 / 0.125),\n      0 2px 5px lch(0% 0 0 / 0.125),\n      0 1px 1px lch(0% 0 0 / 0.125);\n    --msr-shadow-floating: 0 0 0.4px lch(100% 0 0 / 0.10),\n      0 3px 8px lch(0% 0 0 / 0.125),\n      0 2px 5px lch(0% 0 0 / 0.125),\n      0 1px 1px lch(0% 0 0 / 0.125);\n    --msr-shadow-select-menu: 0 0 0 0.4px lch(100% 0 0 / 0.14),\n      0 4px 12px lch(0% 0 0 / 0.22),\n      0 1px 3px lch(0% 0 0 / 0.18);\n    color-scheme: dark;\n  }\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:bg-white\"], :where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:bg-[#fff]\"] {\n  background-color: var(--msr-surface) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:text-black\"] {\n  color: var(--msr-content) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:hover:bg-black/4\"]:hover, :where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:hover:bg-black/5\"]:hover {\n  background-color: var(--msr-content) !important;\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in srgb, var(--msr-content) 6%, transparent) !important;\n  }\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) :is(.mesurer-menu-surface, .mesurer-color-picker) {\n  border-radius: 9px;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) .mesurer-toolbar-surface {\n  background-color: var(--msr-surface) !important;\n  box-shadow: var(--msr-shadow-toolbar) !important;\n  color: var(--msr-content);\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) :is( .mesurer-menu-surface, .mesurer-color-picker, .mesurer-ti-card, [data-mesurer-text-inspector-info=\"true\"], [data-mesurer-annotation-panel=\"true\"], [data-mesurer-annotation-composer=\"true\"] ) {\n  background-color: var(--msr-surface-raised) !important;\n  color: var(--msr-content) !important;\n  box-shadow: var(--msr-shadow-floating) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) .mesurer-switch-track[data-checked=\"false\"], :where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) .mesurer-control-shell {\n  background-color: var(--msr-surface-muted) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) .mesurer-switch-track > span {\n  background-color: var(--msr-control-thumb) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) :is(.mesurer-settings-select, .mesurer-settings-select-menu) {\n  background-color: var(--msr-surface-raised) !important;\n  border-color: var(--msr-color-ink-200) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [data-mesurer-rulers=\"true\"] {\n  color: var(--msr-color-ink-500) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [data-slider-container=\"true\"] > div:first-child {\n  background-color: var(--msr-slider-track) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:bg-[#0d99ff]\"] {\n  background-color: var(--msr-accent) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:border-[#0d99ff]\"] {\n  border-color: var(--msr-accent) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:hover:bg-[#0d99ff]\"]:hover, :where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:focus-visible:bg-[#0d99ff]\"]:focus-visible {\n  background-color: var(--msr-accent) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:text-white\"] {\n  color: var(--msr-color-white) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [data-slider-thumb=\"true\"]:focus-visible {\n  box-shadow: 0 0 0 1px var(--msr-accent) !important;\n  @supports (color: color-mix(in lab, red, red)) {\n    box-shadow: 0 0 0 1px color-mix(in srgb, var(--msr-accent) 25%, transparent) !important;\n  }\n}\n:where([data-mesurer-root=\"true\"], [data-mesurer-inspector-ui=\"true\"]) {\n  --msr-radius-control: 5px;\n}\n@layer utilities {\n  .msr\\:rounded-control {\n    border-radius: var(--msr-radius-control);\n  }\n}\n.mesurer-thin-scrollbar {\n  scrollbar-width: thin;\n  scrollbar-color: var(--msr-color-ink-200) transparent;\n}\n.mesurer-thin-scrollbar::-webkit-scrollbar {\n  width: 4px;\n  height: 4px;\n}\n.mesurer-thin-scrollbar::-webkit-scrollbar-track {\n  background: transparent;\n}\n.mesurer-thin-scrollbar::-webkit-scrollbar-thumb {\n  background: var(--msr-color-ink-200);\n  border-radius: var(--msr-radius-control);\n}\n.mesurer-thin-scrollbar:hover {\n  scrollbar-color: var(--msr-color-ink-300) transparent;\n}\n.mesurer-thin-scrollbar:hover::-webkit-scrollbar-thumb {\n  background: var(--msr-color-ink-300);\n}\n.mesurer-thin-scrollbar::-webkit-scrollbar-corner {\n  background: transparent;\n}\n.mesurer-toolbar-mode-switch[data-compact=\"true\"][data-value=\"select\"] [data-mesurer-toolbar-edit-control=\"true\"], .mesurer-toolbar-mode-switch[data-compact=\"true\"][data-value=\"edit\"] [data-mesurer-toolbar-mode-select-control=\"true\"], .mesurer-toolbar-mode-switch[data-compact=\"true\"] [data-mesurer-tool-menu-trigger] {\n  display: none;\n}\n.mesurer-toolbar-mode-switch[data-compact=\"true\"][data-value=\"edit\"] .mesurer-toolbar-mode-switch-pill {\n  transform: translateX(0);\n}\n.mesurer-toolbar-mode-switch {\n  position: relative;\n  z-index: 1;\n  isolation: isolate;\n  border-radius: 5px;\n  background: transparent;\n}\n.mesurer-toolbar-mode-switch-pill {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  z-index: 0;\n  width: 28px;\n  height: 28px;\n  border-radius: 3px;\n  background: var(--msr-color-ink-200, #e2e8f0);\n  transform: translateX(0);\n}\n.mesurer-toolbar-mode-switch[data-value=\"edit\"] .mesurer-toolbar-mode-switch-pill {\n  transform: translateX(30px);\n}\n.mesurer-toolbar-mode-switch > :not(.mesurer-toolbar-mode-switch-pill) {\n  position: relative;\n  z-index: 1;\n}\n.mesurer-toolbar-mode-button {\n  display: flex;\n  width: 28px;\n  height: 28px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n  color: var(--msr-color-ink-700, #334155);\n  outline: none;\n}\n.mesurer-toolbar-mode-button[aria-pressed=\"true\"] {\n  color: var(--msr-color-ink-900, #18181b);\n}\n.mesurer-toolbar-mode-button[aria-pressed=\"false\"]:not(:disabled):hover {\n  background: var(--msr-color-ink-200, #e2e8f0);\n  @supports (color: color-mix(in lab, red, red)) {\n    background: color-mix(in srgb, var(--msr-color-ink-200, #e2e8f0) 50%, transparent);\n  }\n}\n.mesurer-toolbar-mode-button:focus-visible {\n  outline: 1px solid var(--msr-color-ink-500, #64748b);\n  outline-offset: 1px;\n}\n.mesurer-toolbar-mode-button:disabled {\n  cursor: default;\n  opacity: 0.35;\n}\n.mesurer-toolbar-mode-stage {\n  --msr-select-mode-w: 0px;\n  --msr-edit-mode-w: 0px;\n  position: relative;\n  flex: none;\n  width: var(--msr-select-mode-w);\n  overflow: visible;\n}\n.mesurer-toolbar-mode-stage[data-mode=\"edit\"] {\n  width: var(--msr-edit-mode-w);\n}\n.mesurer-toolbar-mode-track {\n  display: flex;\n  width: max-content;\n  align-items: stretch;\n  transform: translateX(0);\n}\n.mesurer-toolbar-mode-stage[data-mode=\"edit\"] .mesurer-toolbar-mode-track {\n  transform: translateX(calc(-1 * var(--msr-select-mode-w)));\n}\n.mesurer-toolbar-mode-slot {\n  flex: none;\n  width: var(--msr-select-mode-w);\n}\n.mesurer-toolbar-mode-slot[data-mode=\"edit\"] {\n  width: var(--msr-edit-mode-w);\n}\n.mesurer-toolbar-mode-panel {\n  display: flex;\n  width: max-content;\n  align-items: stretch;\n}\n.mesurer-toolbar-mode-slot[data-open=\"false\"] {\n  visibility: hidden;\n  pointer-events: none;\n}\n.mesurer-toolbar-mode-stage[data-mode-motion=\"true\"] {\n  overflow: hidden;\n}\n.mesurer-toolbar-mode-stage[data-mode-motion=\"true\"] .mesurer-toolbar-mode-slot[data-open=\"false\"] {\n  visibility: visible;\n}\n.mesurer-toolbar-mode-stage:has( .mesurer-toolbar-mode-slot[data-open=\"true\"] [role=\"menu\"], .mesurer-toolbar-mode-slot[data-open=\"true\"] [role=\"dialog\"] ) {\n  overflow: visible;\n}\n.mesurer-toolbar-mode-stage[data-ready=\"true\"], .mesurer-toolbar-mode-stage[data-ready=\"true\"] .mesurer-toolbar-mode-track {\n  transition-duration: 150ms;\n  transition-timing-function: ease;\n}\n.mesurer-toolbar-mode-stage[data-ready=\"true\"] {\n  transition-property: width;\n}\n.mesurer-toolbar-mode-stage[data-compact-motion=\"true\"] {\n  transition-property: none;\n}\n.mesurer-toolbar-mode-stage[data-ready=\"true\"] .mesurer-toolbar-mode-track {\n  transition-property: transform;\n}\n.mesurer-toolbar-mode-switch {\n  --msr-toolbar-mode-motion: 150ms ease;\n}\n.mesurer-toolbar-mode-switch-pill {\n  transition: transform var(--msr-toolbar-mode-motion);\n}\n@media (prefers-reduced-motion: reduce) {\n  .mesurer-toolbar-mode-stage, .mesurer-toolbar-mode-track, .mesurer-toolbar-mode-switch-pill {\n    transition: none !important;\n  }\n}\n[data-mesurer-root=\"true\"][data-mesurer-recording-active] [data-mesurer-motion-surface=\"true\"] {\n  display: none !important;\n}\n.mesurer-toolbar-zone {\n  position: fixed;\n  pointer-events: none;\n  border-radius: 9px;\n  box-sizing: border-box;\n  border: 1px dashed rgb(15 15 20 / 6%);\n  outline: 1px dashed rgb(255 255 255 / 7%);\n  outline-offset: -2px;\n  background: rgb(15 15 20 / 1%);\n  animation: mesurer-toolbar-zone-in 180ms ease-out both;\n}\n.mesurer-toolbar-zone[data-active=\"true\"] {\n  border-color: rgb(15 15 20 / 14%);\n  background: rgb(15 15 20 / 3.5%);\n}\n@keyframes mesurer-toolbar-zone-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] {\n  flex-direction: column;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] > div:not([role=\"dialog\"]), [data-mesurer-toolbar][data-orientation=\"vertical\"] [role=\"group\"], [data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-panel, [data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-track, [data-mesurer-toolbar][data-orientation=\"vertical\"] [data-mesurer-toolbar-compact-item] {\n  flex-direction: column;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] [role=\"group\"] {\n  padding: 2px 4px;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] [data-mesurer-toolbar-compact-item] {\n  max-width: none;\n  padding: 2px 0;\n  transition-property: max-height, opacity, transform, padding;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] [data-mesurer-toolbar-compact-item][data-visible=\"false\"] {\n  max-height: 0;\n  padding: 0;\n  transform: translateY(-4px);\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] [data-mesurer-toolbar-compact-item][data-visible=\"true\"] {\n  max-height: 80px;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] [data-mesurer-toolbar-divider] {\n  width: auto;\n  height: 1px;\n  transition-property: height, opacity;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] [data-mesurer-toolbar-divider].msr\\:opacity-0 {\n  height: 0;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-stage, [data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-slot {\n  width: auto;\n  height: var(--msr-select-mode-h, auto);\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-stage[data-mode=\"edit\"], [data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-slot[data-mode=\"edit\"] {\n  height: var(--msr-edit-mode-h, auto);\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-stage {\n  transition-property: height;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-track {\n  width: auto;\n  height: max-content;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-panel {\n  width: auto;\n  height: max-content;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-stage[data-mode=\"edit\"] .mesurer-toolbar-mode-track {\n  transform: translateY(calc(-1 * var(--msr-select-mode-h)));\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-switch[data-value=\"edit\"] .mesurer-toolbar-mode-switch-pill {\n  transform: translateY(30px);\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-switch[data-compact=\"true\"] .mesurer-toolbar-mode-switch-pill {\n  transform: none;\n}\n[data-mesurer-toolbar][data-dock-edge] {\n  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n[data-mesurer-toolbar][data-tucked=\"true\"]:is(:not(:hover), [data-tuck-locked=\"true\"])[data-dock-edge=\"top\"] {\n  transform: translateX(var(--msr-tuck-safe-offset, 0px)) translateY(calc(-100% - 10px));\n}\n[data-mesurer-toolbar][data-tucked=\"true\"]:is(:not(:hover), [data-tuck-locked=\"true\"])[data-dock-edge=\"bottom\"] {\n  transform: translateY(calc(100% + 10px));\n}\n[data-mesurer-toolbar][data-tucked=\"true\"]:is(:not(:hover), [data-tuck-locked=\"true\"])[data-dock-edge=\"left\"] {\n  transform: translateX(calc(-100% - 10px));\n}\n[data-mesurer-toolbar][data-tucked=\"true\"]:is(:not(:hover), [data-tuck-locked=\"true\"])[data-dock-edge=\"right\"] {\n  transform: translateX(calc(100% + 10px));\n}\n[data-mesurer-toolbar] [role=\"tooltip\"][data-tooltip-side=\"left\"], [data-mesurer-toolbar] [role=\"tooltip\"][data-tooltip-side=\"right\"] {\n  top: 50%;\n  bottom: auto;\n  margin: 0;\n  translate: none;\n  transform: translateY(-50%);\n}\n[data-mesurer-toolbar] [role=\"tooltip\"][data-tooltip-side=\"left\"] {\n  left: auto;\n  right: calc(100% + 14px);\n}\n[data-mesurer-toolbar] [role=\"tooltip\"][data-tooltip-side=\"right\"] {\n  left: calc(100% + 14px);\n  right: auto;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-mesurer-toolbar][data-dock-edge] {\n    transition: none !important;\n  }\n  .mesurer-toolbar-zone {\n    animation: none;\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ordinal {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-slashed-zero {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-numeric-figure {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-numeric-spacing {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-numeric-fraction {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-ordinal: initial;\n      --tw-slashed-zero: initial;\n      --tw-numeric-figure: initial;\n      --tw-numeric-spacing: initial;\n      --tw-numeric-fraction: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-duration: initial;\n      --tw-ease: initial;\n    }\n  }\n}\n", pf = {
+var ff = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --msr-font-sans: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\",\n      \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\",\n      \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --msr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --msr-color-red-50: oklch(97.1% 0.013 17.38);\n    --msr-color-red-200: oklch(88.5% 0.062 18.334);\n    --msr-color-red-600: oklch(57.7% 0.245 27.325);\n    --msr-color-black: #000;\n    --msr-color-white: #fff;\n    --msr-spacing: 0.25rem;\n    --msr-font-weight-normal: 400;\n    --msr-font-weight-medium: 500;\n    --msr-font-weight-semibold: 600;\n    --msr-radius-md: 0.375rem;\n    --msr-radius-lg: 0.5rem;\n    --msr-default-transition-duration: 150ms;\n    --msr-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --msr-default-font-family: var(--msr-font-sans);\n    --msr-default-mono-font-family: var(--msr-font-mono);\n    --msr-color-ink-50: #f8fafc;\n    --msr-color-ink-200: #e2e8f0;\n    --msr-color-ink-500: #64748b;\n    --msr-color-ink-700: #334155;\n    --msr-color-ink-900: #0f172a;\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--msr-default-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--msr-default-font-feature-settings, normal);\n    font-variation-settings: var(--msr-default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--msr-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--msr-default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--msr-default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring:where(:not(iframe)) {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .msr\\:pointer-events-auto {\n    pointer-events: auto;\n  }\n  .msr\\:pointer-events-none {\n    pointer-events: none;\n  }\n  .msr\\:absolute {\n    position: absolute;\n  }\n  .msr\\:fixed {\n    position: fixed;\n  }\n  .msr\\:relative {\n    position: relative;\n  }\n  .msr\\:inset-0 {\n    inset: 0px;\n  }\n  .msr\\:inset-x-0 {\n    inset-inline: 0px;\n  }\n  .msr\\:top-0 {\n    top: 0px;\n  }\n  .msr\\:top-1\\/2 {\n    top: calc(1 / 2 * 100%);\n  }\n  .msr\\:top-3 {\n    top: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:top-\\[18px\\] {\n    top: 18px;\n  }\n  .msr\\:top-full {\n    top: 100%;\n  }\n  .msr\\:right-0 {\n    right: 0px;\n  }\n  .msr\\:right-1\\.5 {\n    right: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:right-2 {\n    right: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:right-3 {\n    right: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:right-\\[8px\\] {\n    right: 8px;\n  }\n  .msr\\:bottom-0 {\n    bottom: 0px;\n  }\n  .msr\\:bottom-1\\.5 {\n    bottom: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:bottom-full {\n    bottom: 100%;\n  }\n  .msr\\:left-0 {\n    left: 0px;\n  }\n  .msr\\:left-1\\/2 {\n    left: calc(1 / 2 * 100%);\n  }\n  .msr\\:left-\\[8px\\] {\n    left: 8px;\n  }\n  .msr\\:left-\\[18px\\] {\n    left: 18px;\n  }\n  .msr\\:z-10 {\n    z-index: 10;\n  }\n  .msr\\:z-\\[2\\] {\n    z-index: 2;\n  }\n  .msr\\:z-\\[3\\] {\n    z-index: 3;\n  }\n  .msr\\:z-\\[60\\] {\n    z-index: 60;\n  }\n  .msr\\:z-\\[70\\] {\n    z-index: 70;\n  }\n  .msr\\:z-\\[80\\] {\n    z-index: 80;\n  }\n  .msr\\:z-\\[85\\] {\n    z-index: 85;\n  }\n  .msr\\:z-\\[86\\] {\n    z-index: 86;\n  }\n  .msr\\:z-\\[90\\] {\n    z-index: 90;\n  }\n  .msr\\:z-\\[94\\] {\n    z-index: 94;\n  }\n  .msr\\:z-\\[95\\] {\n    z-index: 95;\n  }\n  .msr\\:z-\\[110\\] {\n    z-index: 110;\n  }\n  .msr\\:z-\\[120\\] {\n    z-index: 120;\n  }\n  .msr\\:col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .msr\\:col-start-1 {\n    grid-column-start: 1;\n  }\n  .msr\\:col-start-3 {\n    grid-column-start: 3;\n  }\n  .msr\\:col-end-3 {\n    grid-column-end: 3;\n  }\n  .msr\\:m-0 {\n    margin: 0px;\n  }\n  .msr\\:mx-1 {\n    margin-inline: var(--msr-spacing);\n  }\n  .msr\\:mt-1 {\n    margin-top: var(--msr-spacing);\n  }\n  .msr\\:mt-1\\.5 {\n    margin-top: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:mt-2 {\n    margin-top: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:mb-1 {\n    margin-bottom: var(--msr-spacing);\n  }\n  .msr\\:mb-2 {\n    margin-bottom: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:-ml-1 {\n    margin-left: calc(var(--msr-spacing) * -1);\n  }\n  .msr\\:ml-1 {\n    margin-left: var(--msr-spacing);\n  }\n  .msr\\:ml-2 {\n    margin-left: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:ml-6 {\n    margin-left: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:ml-auto {\n    margin-left: auto;\n  }\n  .msr\\:box-border {\n    box-sizing: border-box;\n  }\n  .msr\\:block {\n    display: block;\n  }\n  .msr\\:flex {\n    display: flex;\n  }\n  .msr\\:grid {\n    display: grid;\n  }\n  .msr\\:inline-flex {\n    display: inline-flex;\n  }\n  .msr\\:size-1\\.5 {\n    width: calc(var(--msr-spacing) * 1.5);\n    height: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:size-3 {\n    width: calc(var(--msr-spacing) * 3);\n    height: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:size-4 {\n    width: calc(var(--msr-spacing) * 4);\n    height: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:size-5 {\n    width: calc(var(--msr-spacing) * 5);\n    height: calc(var(--msr-spacing) * 5);\n  }\n  .msr\\:size-6 {\n    width: calc(var(--msr-spacing) * 6);\n    height: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:size-7 {\n    width: calc(var(--msr-spacing) * 7);\n    height: calc(var(--msr-spacing) * 7);\n  }\n  .msr\\:size-8 {\n    width: calc(var(--msr-spacing) * 8);\n    height: calc(var(--msr-spacing) * 8);\n  }\n  .msr\\:size-\\[10px\\] {\n    width: 10px;\n    height: 10px;\n  }\n  .msr\\:size-\\[18px\\] {\n    width: 18px;\n    height: 18px;\n  }\n  .msr\\:size-full {\n    width: 100%;\n    height: 100%;\n  }\n  .msr\\:h-2 {\n    height: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:h-5 {\n    height: calc(var(--msr-spacing) * 5);\n  }\n  .msr\\:h-6 {\n    height: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:h-7 {\n    height: calc(var(--msr-spacing) * 7);\n  }\n  .msr\\:h-8 {\n    height: calc(var(--msr-spacing) * 8);\n  }\n  .msr\\:h-36 {\n    height: calc(var(--msr-spacing) * 36);\n  }\n  .msr\\:h-\\[3px\\] {\n    height: 3px;\n  }\n  .msr\\:h-\\[14px\\] {\n    height: 14px;\n  }\n  .msr\\:h-\\[18px\\] {\n    height: 18px;\n  }\n  .msr\\:h-\\[19px\\] {\n    height: 19px;\n  }\n  .msr\\:h-full {\n    height: 100%;\n  }\n  .msr\\:h-px {\n    height: 1px;\n  }\n  .msr\\:max-h-32 {\n    max-height: calc(var(--msr-spacing) * 32);\n  }\n  .msr\\:max-h-36 {\n    max-height: calc(var(--msr-spacing) * 36);\n  }\n  .msr\\:max-h-\\[50vh\\] {\n    max-height: 50vh;\n  }\n  .msr\\:max-h-\\[220px\\] {\n    max-height: 220px;\n  }\n  .msr\\:max-h-\\[calc\\(100vh-16px\\)\\] {\n    max-height: calc(100vh - 16px);\n  }\n  .msr\\:max-h-\\[min\\(70vh\\,34rem\\)\\] {\n    max-height: min(70vh, 34rem);\n  }\n  .msr\\:max-h-\\[min\\(320px\\,calc\\(100vh-16px\\)\\)\\] {\n    max-height: min(320px, calc(100vh - 16px));\n  }\n  .msr\\:min-h-0 {\n    min-height: 0px;\n  }\n  .msr\\:min-h-\\[34px\\] {\n    min-height: 34px;\n  }\n  .msr\\:w-0 {\n    width: 0px;\n  }\n  .msr\\:w-0\\.5 {\n    width: calc(var(--msr-spacing) * 0.5);\n  }\n  .msr\\:w-3 {\n    width: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:w-4 {\n    width: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:w-5 {\n    width: calc(var(--msr-spacing) * 5);\n  }\n  .msr\\:w-6 {\n    width: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:w-8 {\n    width: calc(var(--msr-spacing) * 8);\n  }\n  .msr\\:w-9 {\n    width: calc(var(--msr-spacing) * 9);\n  }\n  .msr\\:w-12 {\n    width: calc(var(--msr-spacing) * 12);\n  }\n  .msr\\:w-44 {\n    width: calc(var(--msr-spacing) * 44);\n  }\n  .msr\\:w-60 {\n    width: calc(var(--msr-spacing) * 60);\n  }\n  .msr\\:w-64 {\n    width: calc(var(--msr-spacing) * 64);\n  }\n  .msr\\:w-\\[18px\\] {\n    width: 18px;\n  }\n  .msr\\:w-\\[26px\\] {\n    width: 26px;\n  }\n  .msr\\:w-\\[208px\\] {\n    width: 208px;\n  }\n  .msr\\:w-\\[272px\\] {\n    width: 272px;\n  }\n  .msr\\:w-full {\n    width: 100%;\n  }\n  .msr\\:w-px {\n    width: 1px;\n  }\n  .msr\\:max-w-0 {\n    max-width: 0px;\n  }\n  .msr\\:max-w-20 {\n    max-width: calc(var(--msr-spacing) * 20);\n  }\n  .msr\\:max-w-\\[calc\\(100vw-16px\\)\\] {\n    max-width: calc(100vw - 16px);\n  }\n  .msr\\:min-w-0 {\n    min-width: 0px;\n  }\n  .msr\\:min-w-36 {\n    min-width: calc(var(--msr-spacing) * 36);\n  }\n  .msr\\:flex-1 {\n    flex: 1;\n  }\n  .msr\\:flex-none {\n    flex: none;\n  }\n  .msr\\:shrink-0 {\n    flex-shrink: 0;\n  }\n  .msr\\:-translate-x-1 {\n    --tw-translate-x: calc(var(--msr-spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:translate-x-0 {\n    --tw-translate-x: 0px;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:-rotate-90 {\n    rotate: calc(90deg * -1);\n  }\n  .msr\\:rotate-45 {\n    rotate: 45deg;\n  }\n  .msr\\:rotate-90 {\n    rotate: 90deg;\n  }\n  .msr\\:rotate-180 {\n    rotate: 180deg;\n  }\n  .msr\\:rotate-\\[45deg\\] {\n    rotate: 45deg;\n  }\n  .msr\\:rotate-\\[135deg\\] {\n    rotate: 135deg;\n  }\n  .msr\\:cursor-crosshair {\n    cursor: crosshair;\n  }\n  .msr\\:cursor-default {\n    cursor: default;\n  }\n  .msr\\:cursor-pointer {\n    cursor: pointer;\n  }\n  .msr\\:touch-none {\n    touch-action: none;\n  }\n  .msr\\:resize-none {\n    resize: none;\n  }\n  .msr\\:list-none {\n    list-style-type: none;\n  }\n  .msr\\:appearance-none {\n    appearance: none;\n  }\n  .msr\\:grid-cols-\\[3\\.5rem_minmax\\(0\\,1fr\\)\\] {\n    grid-template-columns: 3.5rem minmax(0,1fr);\n  }\n  .msr\\:grid-cols-\\[5\\.5rem_minmax\\(0\\,1fr\\)\\] {\n    grid-template-columns: 5.5rem minmax(0,1fr);\n  }\n  .msr\\:grid-cols-\\[78px_150px\\] {\n    grid-template-columns: 78px 150px;\n  }\n  .msr\\:grid-cols-\\[78px_156px\\] {\n    grid-template-columns: 78px 156px;\n  }\n  .msr\\:grid-cols-\\[78px_minmax\\(0\\,1fr\\)\\] {\n    grid-template-columns: 78px minmax(0,1fr);\n  }\n  .msr\\:grid-cols-\\[auto_minmax\\(0\\,1fr\\)\\] {\n    grid-template-columns: auto minmax(0,1fr);\n  }\n  .msr\\:grid-cols-\\[minmax\\(0\\,1fr\\)\\] {\n    grid-template-columns: minmax(0,1fr);\n  }\n  .msr\\:grid-cols-\\[minmax\\(0\\,1fr\\)_28px_34px\\] {\n    grid-template-columns: minmax(0,1fr) 28px 34px;\n  }\n  .msr\\:flex-col {\n    flex-direction: column;\n  }\n  .msr\\:items-baseline {\n    align-items: baseline;\n  }\n  .msr\\:items-center {\n    align-items: center;\n  }\n  .msr\\:items-start {\n    align-items: flex-start;\n  }\n  .msr\\:items-stretch {\n    align-items: stretch;\n  }\n  .msr\\:justify-between {\n    justify-content: space-between;\n  }\n  .msr\\:justify-center {\n    justify-content: center;\n  }\n  .msr\\:justify-end {\n    justify-content: flex-end;\n  }\n  .msr\\:gap-0 {\n    gap: 0px;\n  }\n  .msr\\:gap-0\\.5 {\n    gap: calc(var(--msr-spacing) * 0.5);\n  }\n  .msr\\:gap-1 {\n    gap: var(--msr-spacing);\n  }\n  .msr\\:gap-1\\.5 {\n    gap: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:gap-2 {\n    gap: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:gap-3 {\n    gap: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:gap-\\[2px\\] {\n    gap: 2px;\n  }\n  .msr\\:gap-px {\n    gap: 1px;\n  }\n  .msr\\:gap-x-3 {\n    column-gap: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:gap-y-1 {\n    row-gap: var(--msr-spacing);\n  }\n  .msr\\:self-center {\n    align-self: center;\n  }\n  .msr\\:self-stretch {\n    align-self: stretch;\n  }\n  .msr\\:justify-self-end {\n    justify-self: flex-end;\n  }\n  .msr\\:truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .msr\\:overflow-auto {\n    overflow: auto;\n  }\n  .msr\\:overflow-hidden {\n    overflow: hidden;\n  }\n  .msr\\:overflow-visible {\n    overflow: visible;\n  }\n  .msr\\:overflow-x-hidden {\n    overflow-x: hidden;\n  }\n  .msr\\:overflow-y-auto {\n    overflow-y: auto;\n  }\n  .msr\\:rounded {\n    border-radius: 0.25rem;\n  }\n  .msr\\:rounded-\\[3px\\] {\n    border-radius: 3px;\n  }\n  .msr\\:rounded-\\[5px\\] {\n    border-radius: 5px;\n  }\n  .msr\\:rounded-\\[6px\\] {\n    border-radius: 6px;\n  }\n  .msr\\:rounded-\\[7px\\] {\n    border-radius: 7px;\n  }\n  .msr\\:rounded-\\[8px\\] {\n    border-radius: 8px;\n  }\n  .msr\\:rounded-\\[9px\\] {\n    border-radius: 9px;\n  }\n  .msr\\:rounded-\\[10px\\] {\n    border-radius: 10px;\n  }\n  .msr\\:rounded-\\[12px\\] {\n    border-radius: 12px;\n  }\n  .msr\\:rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .msr\\:rounded-lg {\n    border-radius: var(--msr-radius-lg);\n  }\n  .msr\\:rounded-md {\n    border-radius: var(--msr-radius-md);\n  }\n  .msr\\:rounded-none {\n    border-radius: 0;\n  }\n  .msr\\:border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .msr\\:border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .msr\\:border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .msr\\:border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .msr\\:border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n  .msr\\:border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .msr\\:border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .msr\\:border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n  .msr\\:border-dotted {\n    --tw-border-style: dotted;\n    border-style: dotted;\n  }\n  .msr\\:border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .msr\\:border-\\[\\#0d99ff\\] {\n    border-color: #0d99ff;\n  }\n  .msr\\:border-\\[\\#2563eb\\]\\/70 {\n    border-color: color-mix(in oklab, #2563eb 70%, transparent);\n  }\n  .msr\\:border-black\\/8 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 8%, transparent);\n    }\n  }\n  .msr\\:border-black\\/10 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n    }\n  }\n  .msr\\:border-black\\/15 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 15%, transparent);\n    }\n  }\n  .msr\\:border-ink-200 {\n    border-color: var(--msr-color-ink-200);\n  }\n  .msr\\:border-ink-500 {\n    border-color: var(--msr-color-ink-500);\n  }\n  .msr\\:border-ink-700 {\n    border-color: var(--msr-color-ink-700);\n  }\n  .msr\\:border-red-200 {\n    border-color: var(--msr-color-red-200);\n  }\n  .msr\\:border-transparent {\n    border-color: transparent;\n  }\n  .msr\\:bg-\\[\\#0d99ff\\] {\n    background-color: #0d99ff;\n  }\n  .msr\\:bg-\\[\\#0d99ff\\]\\/10 {\n    background-color: color-mix(in oklab, #0d99ff 10%, transparent);\n  }\n  .msr\\:bg-\\[\\#2563eb\\] {\n    background-color: #2563eb;\n  }\n  .msr\\:bg-\\[\\#fff\\] {\n    background-color: #fff;\n  }\n  .msr\\:bg-black {\n    background-color: var(--msr-color-black);\n  }\n  .msr\\:bg-black\\/10 {\n    background-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n    }\n  }\n  .msr\\:bg-ink-50 {\n    background-color: var(--msr-color-ink-50);\n  }\n  .msr\\:bg-ink-50\\/40 {\n    background-color: var(--msr-color-ink-50);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-ink-50) 40%, transparent);\n    }\n  }\n  .msr\\:bg-ink-200 {\n    background-color: var(--msr-color-ink-200);\n  }\n  .msr\\:bg-ink-900 {\n    background-color: var(--msr-color-ink-900);\n  }\n  .msr\\:bg-ink-900\\/90 {\n    background-color: var(--msr-color-ink-900);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-ink-900) 90%, transparent);\n    }\n  }\n  .msr\\:bg-transparent {\n    background-color: transparent;\n  }\n  .msr\\:bg-white {\n    background-color: var(--msr-color-white);\n  }\n  .msr\\:bg-white\\/60 {\n    background-color: var(--msr-color-white);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-white) 60%, transparent);\n    }\n  }\n  .msr\\:bg-white\\/85 {\n    background-color: var(--msr-color-white);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-white) 85%, transparent);\n    }\n  }\n  .msr\\:p-0 {\n    padding: 0px;\n  }\n  .msr\\:p-1 {\n    padding: var(--msr-spacing);\n  }\n  .msr\\:p-1\\.5 {\n    padding: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:p-2 {\n    padding: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:p-3 {\n    padding: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:p-\\[2px\\] {\n    padding: 2px;\n  }\n  .msr\\:p-px {\n    padding: 1px;\n  }\n  .msr\\:px-0 {\n    padding-inline: 0px;\n  }\n  .msr\\:px-0\\.5 {\n    padding-inline: calc(var(--msr-spacing) * 0.5);\n  }\n  .msr\\:px-1 {\n    padding-inline: var(--msr-spacing);\n  }\n  .msr\\:px-1\\.5 {\n    padding-inline: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:px-2 {\n    padding-inline: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:py-0 {\n    padding-block: 0px;\n  }\n  .msr\\:py-0\\.5 {\n    padding-block: calc(var(--msr-spacing) * 0.5);\n  }\n  .msr\\:py-1 {\n    padding-block: var(--msr-spacing);\n  }\n  .msr\\:py-1\\.5 {\n    padding-block: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:py-2 {\n    padding-block: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:pt-0\\.5 {\n    padding-top: calc(var(--msr-spacing) * 0.5);\n  }\n  .msr\\:pt-2 {\n    padding-top: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:pr-0 {\n    padding-right: 0px;\n  }\n  .msr\\:pr-2 {\n    padding-right: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:pr-6 {\n    padding-right: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:pb-1 {\n    padding-bottom: var(--msr-spacing);\n  }\n  .msr\\:pb-1\\.5 {\n    padding-bottom: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:pb-2 {\n    padding-bottom: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:text-center {\n    text-align: center;\n  }\n  .msr\\:text-left {\n    text-align: left;\n  }\n  .msr\\:text-right {\n    text-align: right;\n  }\n  .msr\\:font-mono {\n    font-family: var(--msr-font-mono);\n  }\n  .msr\\:text-\\[9px\\] {\n    font-size: 9px;\n  }\n  .msr\\:text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .msr\\:text-\\[11px\\] {\n    font-size: 11px;\n  }\n  .msr\\:text-\\[12px\\] {\n    font-size: 12px;\n  }\n  .msr\\:text-\\[14px\\] {\n    font-size: 14px;\n  }\n  .msr\\:leading-4 {\n    --tw-leading: calc(var(--msr-spacing) * 4);\n    line-height: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:leading-5 {\n    --tw-leading: calc(var(--msr-spacing) * 5);\n    line-height: calc(var(--msr-spacing) * 5);\n  }\n  .msr\\:leading-\\[1\\.45\\] {\n    --tw-leading: 1.45;\n    line-height: 1.45;\n  }\n  .msr\\:leading-\\[18px\\] {\n    --tw-leading: 18px;\n    line-height: 18px;\n  }\n  .msr\\:leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .msr\\:font-medium {\n    --tw-font-weight: var(--msr-font-weight-medium);\n    font-weight: var(--msr-font-weight-medium);\n  }\n  .msr\\:font-normal {\n    --tw-font-weight: var(--msr-font-weight-normal);\n    font-weight: var(--msr-font-weight-normal);\n  }\n  .msr\\:font-semibold {\n    --tw-font-weight: var(--msr-font-weight-semibold);\n    font-weight: var(--msr-font-weight-semibold);\n  }\n  .msr\\:break-words {\n    overflow-wrap: break-word;\n  }\n  .msr\\:text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .msr\\:whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .msr\\:whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .msr\\:text-\\[\\#64748b\\] {\n    color: #64748b;\n  }\n  .msr\\:text-black {\n    color: var(--msr-color-black);\n  }\n  .msr\\:text-black\\/30 {\n    color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-black) 30%, transparent);\n    }\n  }\n  .msr\\:text-black\\/45 {\n    color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-black) 45%, transparent);\n    }\n  }\n  .msr\\:text-ink-50 {\n    color: var(--msr-color-ink-50);\n  }\n  .msr\\:text-ink-500 {\n    color: var(--msr-color-ink-500);\n  }\n  .msr\\:text-ink-700 {\n    color: var(--msr-color-ink-700);\n  }\n  .msr\\:text-ink-900 {\n    color: var(--msr-color-ink-900);\n  }\n  .msr\\:text-red-600 {\n    color: var(--msr-color-red-600);\n  }\n  .msr\\:text-white {\n    color: var(--msr-color-white);\n  }\n  .msr\\:text-white\\/60 {\n    color: var(--msr-color-white);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-white) 60%, transparent);\n    }\n  }\n  .msr\\:tabular-nums {\n    --tw-numeric-spacing: tabular-nums;\n    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n  }\n  .msr\\:underline {\n    text-decoration-line: underline;\n  }\n  .msr\\:underline-offset-2 {\n    text-underline-offset: 2px;\n  }\n  .msr\\:opacity-0 {\n    opacity: 0%;\n  }\n  .msr\\:opacity-60 {\n    opacity: 60%;\n  }\n  .msr\\:opacity-80 {\n    opacity: 80%;\n  }\n  .msr\\:opacity-100 {\n    opacity: 100%;\n  }\n  .msr\\:shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .msr\\:outline-transparent {\n    outline-color: transparent;\n  }\n  .msr\\:transition-\\[max-width\\,opacity\\,transform\\,padding\\] {\n    transition-property: max-width,opacity,transform,padding;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-\\[width\\,opacity\\] {\n    transition-property: width,opacity;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-none {\n    transition-property: none;\n  }\n  .msr\\:duration-150 {\n    --tw-duration: 150ms;\n    transition-duration: 150ms;\n  }\n  .msr\\:ease-\\[ease\\] {\n    --tw-ease: ease;\n    transition-timing-function: ease;\n  }\n  .msr\\:outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .msr\\:select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  @media (hover: hover) {\n    .msr\\:group-hover\\:border-ink-200:is(:where(.msr\\:group):hover *) {\n      border-color: var(--msr-color-ink-200);\n    }\n  }\n  .msr\\:focus-within\\:rounded-l-\\[5px\\]:focus-within {\n    border-top-left-radius: 5px;\n    border-bottom-left-radius: 5px;\n  }\n  .msr\\:focus-within\\:rounded-r-\\[5px\\]:focus-within {\n    border-top-right-radius: 5px;\n    border-bottom-right-radius: 5px;\n  }\n  .msr\\:focus-within\\:outline:focus-within {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .msr\\:focus-within\\:outline-1:focus-within {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .msr\\:focus-within\\:outline-offset-\\[-1px\\]:focus-within {\n    outline-offset: -1px;\n  }\n  .msr\\:focus-within\\:outline-\\[\\#0d99ff\\]:focus-within {\n    outline-color: #0d99ff;\n  }\n  .msr\\:focus-within\\:outline-\\[var\\(--msr-accent\\)\\]:focus-within {\n    outline-color: var(--msr-accent);\n  }\n  @media (hover: hover) {\n    .msr\\:hover\\:border-ink-200:hover {\n      border-color: var(--msr-color-ink-200);\n    }\n    .msr\\:hover\\:bg-\\[\\#0d99ff\\]:hover {\n      background-color: #0d99ff;\n    }\n    .msr\\:hover\\:bg-black\\/4:hover {\n      background-color: var(--msr-color-black);\n    }\n    @supports (color: color-mix(in lab, red, red)) {\n      .msr\\:hover\\:bg-black\\/4:hover {\n        background-color: color-mix(in oklab, var(--msr-color-black) 4%, transparent);\n      }\n    }\n    .msr\\:hover\\:bg-black\\/10:hover {\n      background-color: var(--msr-color-black);\n    }\n    @supports (color: color-mix(in lab, red, red)) {\n      .msr\\:hover\\:bg-black\\/10:hover {\n        background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n      }\n    }\n    .msr\\:hover\\:bg-ink-50:hover {\n      background-color: var(--msr-color-ink-50);\n    }\n    .msr\\:hover\\:bg-red-50:hover {\n      background-color: var(--msr-color-red-50);\n    }\n    .msr\\:hover\\:bg-white:hover {\n      background-color: var(--msr-color-white);\n    }\n    .msr\\:hover\\:text-ink-700:hover {\n      color: var(--msr-color-ink-700);\n    }\n    .msr\\:hover\\:text-ink-900:hover {\n      color: var(--msr-color-ink-900);\n    }\n    .msr\\:hover\\:text-white:hover {\n      color: var(--msr-color-white);\n    }\n    .msr\\:hover\\:underline:hover {\n      text-decoration-line: underline;\n    }\n  }\n  .msr\\:focus\\:border-\\[\\#0d99ff\\]:focus {\n    border-color: #0d99ff;\n  }\n  .msr\\:focus\\:shadow-\\[inset_0_0_0_1px_\\#0d99ff\\]:focus {\n    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #0d99ff);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:focus\\:shadow-\\[inset_0_0_0_1px_var\\(--msr-accent\\)\\]:focus {\n    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--msr-accent));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:focus\\:outline-none:focus {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .msr\\:focus-visible\\:border-\\[\\#0d99ff\\]:focus-visible {\n    border-color: #0d99ff;\n  }\n  .msr\\:focus-visible\\:bg-\\[\\#0d99ff\\]:focus-visible {\n    background-color: #0d99ff;\n  }\n  .msr\\:focus-visible\\:bg-black\\/4:focus-visible {\n    background-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-black) 4%, transparent);\n    }\n  }\n  .msr\\:focus-visible\\:text-white:focus-visible {\n    color: var(--msr-color-white);\n  }\n  .msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_\\#0d99ff\\]:focus-visible {\n    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #0d99ff);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_\\#ef4444\\]:focus-visible {\n    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #ef4444);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:focus-visible\\:ring-1:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:focus-visible\\:ring-\\[\\#0d99ff\\]\\/25:focus-visible {\n    --tw-ring-color: color-mix(in oklab, #0d99ff 25%, transparent);\n  }\n  .msr\\:focus-visible\\:ring-\\[var\\(--msr-accent\\)\\]\\/25:focus-visible {\n    --tw-ring-color: var(--msr-accent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-ring-color: color-mix(in oklab, var(--msr-accent) 25%, transparent);\n    }\n  }\n  .msr\\:focus-visible\\:outline-none:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .msr\\:disabled\\:cursor-default:disabled {\n    cursor: default;\n  }\n  .msr\\:disabled\\:opacity-40:disabled {\n    opacity: 40%;\n  }\n  .msr\\:disabled\\:opacity-45:disabled {\n    opacity: 45%;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .msr\\:motion-reduce\\:transition-none {\n      transition-property: none;\n    }\n  }\n}\n:root, :host {\n  --color-ink-50: #f8fafc;\n  --color-ink-200: #e2e8f0;\n  --color-ink-500: #64748b;\n  --color-ink-700: #334155;\n  --color-ink-900: #0f172a;\n}\n:host {\n  all: initial;\n  display: block;\n  color-scheme: light;\n  color: #0f172a;\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 1.5;\n  letter-spacing: normal;\n  direction: ltr;\n  --msr-spacing: 4px;\n}\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n@layer base {\n  *, ::before, ::after, ::backdrop {\n    --tw-border-style: solid;\n    --tw-outline-style: solid;\n    --tw-shadow: 0 0 #0000;\n    --tw-inset-shadow: 0 0 #0000;\n    --tw-ring-shadow: 0 0 #0000;\n    --tw-inset-ring-shadow: 0 0 #0000;\n    --tw-ring-offset-shadow: 0 0 #0000;\n    --tw-translate-x: 0;\n    --tw-translate-y: 0;\n    --tw-translate-z: 0;\n  }\n  button, input, select, textarea {\n    appearance: none;\n    background-color: transparent;\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    letter-spacing: inherit;\n  }\n}\n.mesurer-toolbar-surface {\n  box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n.mesurer-menu-surface {\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\n}\n.mesurer-color-picker {\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n.mesurer-settings-tabs {\n  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);\n}\n.mesurer-settings-tab[aria-selected=\"true\"] {\n  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);\n}\n.mesurer-switch-track {\n  box-sizing: border-box;\n  border: 1px solid #e2e8f0;\n}\n.mesurer-switch-track[data-checked=\"true\"] {\n  border-color: #0d99ff;\n}\n.mesurer-control-shell {\n  border: 1px solid transparent;\n}\n.mesurer-control-shell:hover {\n  border-color: #e2e8f0;\n}\n.mesurer-control-focus:focus-within {\n  outline: 1px solid #0d99ff;\n  outline-offset: -1px;\n}\n.mesurer-root {\n  --msr-spacing: 4px;\n}\n[data-mesurer-context-root=\"true\"] :where(*) {\n  all: revert-layer;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-trigger=\"true\"] {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  display: flex !important;\n  width: 24px !important;\n  height: 24px !important;\n  min-width: 24px !important;\n  min-height: 24px !important;\n  max-width: 24px !important;\n  max-height: 24px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  align-items: center !important;\n  justify-content: center !important;\n  border: 1px solid var(--msr-color-ink-200, #e2e8f0) !important;\n  border-radius: 7px !important;\n  background: var(--msr-surface, #fff) !important;\n  color: var(--msr-content, #0f172a) !important;\n  opacity: 1 !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-trigger=\"true\"]:hover {\n  background: var(--msr-content, #0f172a) !important;\n  @supports (color: color-mix(in lab, red, red)) {\n    background: color-mix(in srgb, var(--msr-content, #0f172a) 6%, var(--msr-surface, #fff)) !important;\n  }\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-trigger=\"true\"]:focus-visible {\n  border-color: #0d99ff !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-marker=\"true\"] {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  display: flex !important;\n  width: 24px !important;\n  height: 24px !important;\n  min-width: 24px !important;\n  min-height: 24px !important;\n  max-width: 24px !important;\n  max-height: 24px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  align-items: center !important;\n  justify-content: center !important;\n  border: 0 !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n}\n[data-mesurer-context-root=\"true\"] :is( [data-mesurer-annotation-composer=\"true\"], [data-mesurer-annotation-panel=\"true\"] ) {\n  box-shadow: var(--msr-shadow-floating, 0 10px 30px rgba(0, 0, 0, 0.08));\n}\n[data-mesurer-context-root=\"true\"] :is( [data-mesurer-annotation-trigger=\"true\"], [data-mesurer-annotation-composer=\"true\"], [data-mesurer-annotation-panel=\"true\"] ) svg {\n  display: block !important;\n  width: 14px !important;\n  height: 14px !important;\n  min-width: 14px !important;\n  min-height: 14px !important;\n  visibility: visible !important;\n  opacity: 1 !important;\n  fill: currentColor !important;\n  color: inherit !important;\n  flex-shrink: 0 !important;\n}\n[data-mesurer-context-root=\"true\"] :is( [data-mesurer-annotation-trigger=\"true\"], [data-mesurer-annotation-composer=\"true\"], [data-mesurer-annotation-panel=\"true\"] ) svg path {\n  fill: currentColor !important;\n  stroke: none !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-send=\"true\"] {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  display: flex !important;\n  width: 24px !important;\n  height: 24px !important;\n  min-width: 24px !important;\n  min-height: 24px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  align-items: center !important;\n  justify-content: center !important;\n  border: 0 !important;\n  border-radius: 9999px !important;\n  background: #0d99ff !important;\n  color: #fff !important;\n  opacity: 1 !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-send=\"true\"]:disabled {\n  opacity: 0.4 !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-composer=\"true\"] .mesurer-send-icon {\n  width: 16px !important;\n  height: 16px !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-composer=\"true\"] .mesurer-send-icon path {\n  fill: none !important;\n  stroke: currentColor !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-composer=\"true\"] textarea {\n  box-sizing: border-box !important;\n  min-height: 34px !important;\n  max-height: 128px !important;\n  resize: none !important;\n}\nbody [data-mesurer-native-scroll-anchor=\"box\"][data-mesurer-nested-scroll-compensation=\"true\"] {\n  position: absolute !important;\n  left: calc(anchor(left) + var(--mesurer-nested-scroll-x, 0px)) !important;\n  top: calc(anchor(top) + var(--mesurer-nested-scroll-y, 0px)) !important;\n}\nbody [data-mesurer-native-scroll-anchor=\"label\"][data-mesurer-nested-scroll-compensation=\"true\"] {\n  position: absolute !important;\n  left: calc(anchor(center) + var(--mesurer-nested-scroll-x, 0px)) !important;\n  top: calc(anchor(bottom) + 2px + var(--mesurer-nested-scroll-y, 0px)) !important;\n}\nbody [data-mesurer-native-scroll-anchor=\"offset\"][data-mesurer-nested-scroll-compensation=\"true\"] {\n  position: absolute !important;\n  left: calc(anchor(left) + var(--mesurer-native-anchor-x, 0px) + var(--mesurer-nested-scroll-x, 0px)) !important;\n  top: calc(anchor(top) + var(--mesurer-native-anchor-y, 0px) + var(--mesurer-nested-scroll-y, 0px)) !important;\n}\n[data-mesurer-text-edit-ring=\"true\"], [data-mesurer-text-selection-highlight=\"true\"], [data-mesurer-text-caret=\"true\"] {\n  z-index: 2147482900 !important;\n}\n[data-mesurer-text-inspector-placement-shell=\"true\"], .mesurer-ti-card {\n  z-index: 2147483647 !important;\n}\n[data-mesurer-context-root=\"true\"] [data-mesurer-annotation-scroll-mode=\"document\"] {\n  position: absolute !important;\n}\n[data-mesurer-annotation-scroll-mode=\"native-anchor\"] {\n  position: fixed !important;\n}\n[data-mesurer-native-scroll-anchor=\"offset\"][data-mesurer-nested-scroll-compensation=\"true\"][data-mesurer-annotation-scroll-mode=\"native-anchor\"] {\n  position: fixed !important;\n}\n[data-mesurer-annotation-badge=\"true\"] {\n  width: 20px !important;\n  height: 20px !important;\n  transform: none !important;\n  transition: width 150ms ease, height 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease !important;\n}\n[data-mesurer-annotation-marker=\"true\"][data-mesurer-annotation-highlighted=\"true\"] > [data-mesurer-annotation-badge=\"true\"] {\n  width: 24px !important;\n  height: 24px !important;\n}\n[data-mesurer-root=\"true\"][data-mesurer-direct-text-edit-active=\"true\"] [data-mesurer-annotation-trigger=\"true\"], [data-mesurer-context-root=\"true\"][data-mesurer-direct-text-edit-active=\"true\"] [data-mesurer-annotation-trigger=\"true\"] {\n  display: none !important;\n}\n[data-mesurer-plugin-settings] [role=\"switch\"] {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n[data-mesurer-plugin-settings] [role=\"switch\"] > span:first-child {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n[data-mesurer-plugin-settings-disclosure=\"plugins\"] {\n  width: calc(100% + 16px);\n  margin-inline: -8px;\n}\n.mesurer-solid-root {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483000;\n  pointer-events: none;\n  --msr-spacing: 4px;\n}\n.mesurer-solid-root [role=\"slider\"] {\n  border: 0;\n}\n[data-mesurer-distance-kind=\"selection-spacing\"][data-mesurer-distance-active=\"true\"] [data-mesurer-distance-hover-target=\"true\"] {\n  opacity: 1 !important;\n}\n[data-mesurer-distance-kind=\"selection-spacing\"][data-mesurer-distance-active=\"true\"]:has([data-mesurer-distance-label-axis=\"x\"]:hover) [data-mesurer-distance-line^=\"vertical\"], [data-mesurer-distance-kind=\"selection-spacing\"][data-mesurer-distance-active=\"true\"]:has([data-mesurer-distance-label-axis=\"y\"]:hover) [data-mesurer-distance-line^=\"horizontal\"], [data-mesurer-distance-kind=\"selection-spacing\"][data-mesurer-distance-active=\"true\"]:has([data-mesurer-distance-label-axis]:hover) [data-mesurer-distance-connector=\"true\"], [data-mesurer-spacing-paint=\"true\"][data-mesurer-distance-active=\"true\"][data-mesurer-spacing-hover-axis] [data-mesurer-distance-connector=\"true\"] {\n  opacity: 0.16 !important;\n}\n[data-mesurer-spacing-paint=\"true\"][data-mesurer-distance-active=\"true\"][data-mesurer-spacing-hover-axis=\"x\"] [data-mesurer-distance-line^=\"vertical\"], [data-mesurer-spacing-paint=\"true\"][data-mesurer-distance-active=\"true\"][data-mesurer-spacing-hover-axis=\"y\"] [data-mesurer-distance-line^=\"horizontal\"] {\n  opacity: 0.16 !important;\n}\nbody.mesurer-solid-xray * {\n  outline: solid 1px blue !important;\n}\nbody.mesurer-solid-xray [data-mesurer-root], body.mesurer-solid-xray [data-mesurer-root] *, body.mesurer-solid-xray [data-mesurer-inspector-ui], body.mesurer-solid-xray [data-mesurer-inspector-ui] *, body.mesurer-solid-xray .mesurer-toolbar-surface, body.mesurer-solid-xray .mesurer-toolbar-surface *, body.mesurer-solid-xray .mesurer-ti-box, body.mesurer-solid-xray .mesurer-ti-card, body.mesurer-solid-xray .mesurer-ti-card *, body.mesurer-solid-xray .mesurer-ti-close {\n  outline: none !important;\n}\n[data-mesurer-toolbar=\"true\"] div:has(> [data-mesurer-toolbar-compact-item]) {\n  transition: padding-inline 150ms ease;\n}\n[data-mesurer-toolbar=\"true\"][data-mesurer-toolbar-compact=\"true\"] div:has(> [data-mesurer-toolbar-compact-item]):not(:has(> [data-mesurer-toolbar-compact-item][data-visible=\"true\"])) {\n  padding-inline: 0;\n}\n[data-mesurer-selected-measurement=\"true\"]:has(> [data-mesurer-native-scroll-anchor=\"box\"]) {\n  display: contents !important;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-mesurer-toolbar=\"true\"] div:has(> [data-mesurer-toolbar-compact-item]) {\n    transition: none;\n  }\n  [data-mesurer-annotation-badge=\"true\"] {\n    transition: none !important;\n  }\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) {\n  --msr-accent: #0d99ff;\n  --msr-surface: #fff;\n  --msr-surface-raised: #fff;\n  --msr-surface-muted: #f8fafc;\n  --msr-content: #18181b;\n  --msr-color-white: #fff;\n  --msr-color-black: #000;\n  --msr-color-ink-50: #f8fafc;\n  --msr-color-ink-100: #f1f5f9;\n  --msr-color-ink-200: #e2e8f0;\n  --msr-color-ink-300: #cbd5e1;\n  --msr-color-ink-500: #64748b;\n  --msr-color-ink-700: #334155;\n  --msr-color-ink-900: #18181b;\n  --color-ink-50: var(--msr-color-ink-50);\n  --color-ink-100: var(--msr-color-ink-100);\n  --color-ink-200: var(--msr-color-ink-200);\n  --color-ink-300: var(--msr-color-ink-300);\n  --color-ink-500: var(--msr-color-ink-500);\n  --color-ink-700: var(--msr-color-ink-700);\n  --color-ink-900: var(--msr-color-ink-900);\n  --msr-danger-bg: #fef2f2;\n  --msr-danger-border: #fecaca;\n  --msr-danger-text: #dc2626;\n  --msr-danger-solid-bg: #dc2626;\n  --msr-danger-solid-hover: #b91c1c;\n  --msr-danger-solid-text: #fff;\n  --color-red-50: var(--msr-danger-bg);\n  --color-red-200: var(--msr-danger-border);\n  --color-red-600: var(--msr-danger-text);\n  --color-red-700: #b91c1c;\n  --msr-control-thumb: #fff;\n  --msr-slider-track: rgba(15, 23, 42, 0.16);\n  --msr-shadow-toolbar: 0 0 0.4px rgba(0, 0, 0, 0.22),\n    0 6px 18px rgba(0, 0, 0, 0.03),\n    0 3px 9px rgba(0, 0, 0, 0.06),\n    0 1px 1px rgba(0, 0, 0, 0.06);\n  --msr-shadow-floating: 0 0 0.4px rgba(0, 0, 0, 0.22),\n    0 6px 18px rgba(0, 0, 0, 0.03),\n    0 3px 9px rgba(0, 0, 0, 0.06),\n    0 1px 1px rgba(0, 0, 0, 0.06);\n  --msr-shadow-select-menu: var(--msr-shadow-floating);\n  color: var(--msr-content);\n  color-scheme: light;\n}\n:where( [data-mesurer-root=\"true\"][data-theme=\"dark\"], [data-mesurer-inspector-ui=\"true\"][data-theme=\"dark\"] ) {\n  --msr-accent: #0c8ce9;\n  --msr-surface: #323232;\n  --msr-surface-raised: #3a3a3a;\n  --msr-surface-muted: #3a3a3a;\n  --msr-content: #f5f5f5;\n  --msr-color-white: #f5f5f5;\n  --msr-color-black: #171717;\n  --msr-color-ink-50: #3a3a3a;\n  --msr-color-ink-100: #414141;\n  --msr-color-ink-200: #4a4a4a;\n  --msr-color-ink-300: #5a5a5a;\n  --msr-color-ink-500: #a0a0a0;\n  --msr-color-ink-700: #dedede;\n  --msr-color-ink-900: #f5f5f5;\n  --msr-danger-bg: #3f2020;\n  --msr-danger-border: #7f3f46;\n  --msr-danger-text: #f87171;\n  --msr-danger-solid-bg: #c95058;\n  --msr-danger-solid-hover: #b7424b;\n  --msr-danger-solid-text: #f5f5f5;\n  --color-red-700: #fca5a5;\n  --msr-control-thumb: #f4f4f5;\n  --msr-slider-track: rgba(245, 245, 245, 0.24);\n  --msr-shadow-toolbar: 0 0 0.4px lch(100% 0 0 / 0.10),\n    0 3px 8px lch(0% 0 0 / 0.125),\n    0 2px 5px lch(0% 0 0 / 0.125),\n    0 1px 1px lch(0% 0 0 / 0.125);\n  --msr-shadow-floating: 0 0 0.4px lch(100% 0 0 / 0.10),\n    0 3px 8px lch(0% 0 0 / 0.125),\n    0 2px 5px lch(0% 0 0 / 0.125),\n    0 1px 1px lch(0% 0 0 / 0.125);\n  --msr-shadow-select-menu: 0 0 0 0.4px lch(100% 0 0 / 0.14),\n    0 4px 12px lch(0% 0 0 / 0.22),\n    0 1px 3px lch(0% 0 0 / 0.18);\n  color-scheme: dark;\n}\n@media (prefers-color-scheme: dark) {\n  :where( [data-mesurer-root=\"true\"][data-theme=\"system\"], [data-mesurer-inspector-ui=\"true\"][data-theme=\"system\"] ) {\n    --msr-accent: #0c8ce9;\n    --msr-surface: #323232;\n    --msr-surface-raised: #3a3a3a;\n    --msr-surface-muted: #3a3a3a;\n    --msr-content: #f5f5f5;\n    --msr-color-white: #f5f5f5;\n    --msr-color-black: #171717;\n    --msr-color-ink-50: #3a3a3a;\n    --msr-color-ink-100: #414141;\n    --msr-color-ink-200: #4a4a4a;\n    --msr-color-ink-300: #5a5a5a;\n    --msr-color-ink-500: #a0a0a0;\n    --msr-color-ink-700: #dedede;\n    --msr-color-ink-900: #f5f5f5;\n    --msr-danger-bg: #3f2020;\n    --msr-danger-border: #7f3f46;\n    --msr-danger-text: #f87171;\n    --msr-danger-solid-bg: #c95058;\n    --msr-danger-solid-hover: #b7424b;\n    --msr-danger-solid-text: #f5f5f5;\n    --color-red-700: #fca5a5;\n    --msr-control-thumb: #f4f4f5;\n    --msr-slider-track: rgba(245, 245, 245, 0.24);\n    --msr-shadow-toolbar: 0 0 0.4px lch(100% 0 0 / 0.10),\n      0 3px 8px lch(0% 0 0 / 0.125),\n      0 2px 5px lch(0% 0 0 / 0.125),\n      0 1px 1px lch(0% 0 0 / 0.125);\n    --msr-shadow-floating: 0 0 0.4px lch(100% 0 0 / 0.10),\n      0 3px 8px lch(0% 0 0 / 0.125),\n      0 2px 5px lch(0% 0 0 / 0.125),\n      0 1px 1px lch(0% 0 0 / 0.125);\n    --msr-shadow-select-menu: 0 0 0 0.4px lch(100% 0 0 / 0.14),\n      0 4px 12px lch(0% 0 0 / 0.22),\n      0 1px 3px lch(0% 0 0 / 0.18);\n    color-scheme: dark;\n  }\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:bg-white\"], :where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:bg-[#fff]\"] {\n  background-color: var(--msr-surface) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:text-black\"] {\n  color: var(--msr-content) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:hover:bg-black/4\"]:hover, :where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:hover:bg-black/5\"]:hover {\n  background-color: var(--msr-content) !important;\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in srgb, var(--msr-content) 6%, transparent) !important;\n  }\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) :is(.mesurer-menu-surface, .mesurer-color-picker) {\n  border-radius: 9px;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) .mesurer-toolbar-surface {\n  background-color: var(--msr-surface) !important;\n  box-shadow: var(--msr-shadow-toolbar) !important;\n  color: var(--msr-content);\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) :is( .mesurer-menu-surface, .mesurer-color-picker, .mesurer-ti-card, [data-mesurer-text-inspector-info=\"true\"], [data-mesurer-annotation-panel=\"true\"], [data-mesurer-annotation-composer=\"true\"] ) {\n  background-color: var(--msr-surface-raised) !important;\n  color: var(--msr-content) !important;\n  box-shadow: var(--msr-shadow-floating) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) .mesurer-switch-track[data-checked=\"false\"], :where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) .mesurer-control-shell {\n  background-color: var(--msr-surface-muted) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) .mesurer-switch-track > span {\n  background-color: var(--msr-control-thumb) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) :is(.mesurer-settings-select, .mesurer-settings-select-menu) {\n  background-color: var(--msr-surface-raised) !important;\n  border-color: var(--msr-color-ink-200) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [data-mesurer-rulers=\"true\"] {\n  color: var(--msr-color-ink-500) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [data-slider-container=\"true\"] > div:first-child {\n  background-color: var(--msr-slider-track) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:bg-[#0d99ff]\"] {\n  background-color: var(--msr-accent) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:border-[#0d99ff]\"] {\n  border-color: var(--msr-accent) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:hover:bg-[#0d99ff]\"]:hover, :where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:focus-visible:bg-[#0d99ff]\"]:focus-visible {\n  background-color: var(--msr-accent) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [class~=\"msr:text-white\"] {\n  color: var(--msr-color-white) !important;\n}\n:where( [data-mesurer-root=\"true\"][data-theme], [data-mesurer-inspector-ui=\"true\"][data-theme] ) [data-slider-thumb=\"true\"]:focus-visible {\n  box-shadow: 0 0 0 1px var(--msr-accent) !important;\n  @supports (color: color-mix(in lab, red, red)) {\n    box-shadow: 0 0 0 1px color-mix(in srgb, var(--msr-accent) 25%, transparent) !important;\n  }\n}\n:where([data-mesurer-root=\"true\"], [data-mesurer-inspector-ui=\"true\"]) {\n  --msr-radius-control: 5px;\n}\n@layer utilities {\n  .msr\\:rounded-control {\n    border-radius: var(--msr-radius-control);\n  }\n}\n.mesurer-thin-scrollbar {\n  scrollbar-width: thin;\n  scrollbar-color: var(--msr-color-ink-200) transparent;\n}\n.mesurer-thin-scrollbar::-webkit-scrollbar {\n  width: 4px;\n  height: 4px;\n}\n.mesurer-thin-scrollbar::-webkit-scrollbar-track {\n  background: transparent;\n}\n.mesurer-thin-scrollbar::-webkit-scrollbar-thumb {\n  background: var(--msr-color-ink-200);\n  border-radius: var(--msr-radius-control);\n}\n.mesurer-thin-scrollbar:hover {\n  scrollbar-color: var(--msr-color-ink-300) transparent;\n}\n.mesurer-thin-scrollbar:hover::-webkit-scrollbar-thumb {\n  background: var(--msr-color-ink-300);\n}\n.mesurer-thin-scrollbar::-webkit-scrollbar-corner {\n  background: transparent;\n}\n.mesurer-toolbar-mode-switch[data-compact=\"true\"][data-value=\"select\"] [data-mesurer-toolbar-edit-control=\"true\"], .mesurer-toolbar-mode-switch[data-compact=\"true\"][data-value=\"edit\"] [data-mesurer-toolbar-mode-select-control=\"true\"], .mesurer-toolbar-mode-switch[data-compact=\"true\"] [data-mesurer-tool-menu-trigger] {\n  display: none;\n}\n.mesurer-toolbar-mode-switch[data-compact=\"true\"][data-value=\"edit\"] .mesurer-toolbar-mode-switch-pill {\n  transform: translateX(0);\n}\n.mesurer-toolbar-mode-switch {\n  position: relative;\n  z-index: 1;\n  isolation: isolate;\n  border-radius: 5px;\n  background: transparent;\n}\n.mesurer-toolbar-mode-switch-pill {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  z-index: 0;\n  width: 28px;\n  height: 28px;\n  border-radius: 3px;\n  background: var(--msr-color-ink-200, #e2e8f0);\n  transform: translateX(0);\n}\n.mesurer-toolbar-mode-switch[data-value=\"edit\"] .mesurer-toolbar-mode-switch-pill {\n  transform: translateX(30px);\n}\n.mesurer-toolbar-mode-switch > :not(.mesurer-toolbar-mode-switch-pill) {\n  position: relative;\n  z-index: 1;\n}\n.mesurer-toolbar-mode-button {\n  display: flex;\n  width: 28px;\n  height: 28px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n  color: var(--msr-color-ink-700, #334155);\n  outline: none;\n}\n.mesurer-toolbar-mode-button[aria-pressed=\"true\"] {\n  color: var(--msr-color-ink-900, #18181b);\n}\n.mesurer-toolbar-mode-button[aria-pressed=\"false\"]:not(:disabled):hover {\n  background: var(--msr-color-ink-200, #e2e8f0);\n  @supports (color: color-mix(in lab, red, red)) {\n    background: color-mix(in srgb, var(--msr-color-ink-200, #e2e8f0) 50%, transparent);\n  }\n}\n.mesurer-toolbar-mode-button:focus-visible {\n  outline: 1px solid var(--msr-color-ink-500, #64748b);\n  outline-offset: 1px;\n}\n.mesurer-toolbar-mode-button:disabled {\n  cursor: default;\n  opacity: 0.35;\n}\n.mesurer-toolbar-mode-stage {\n  --msr-select-mode-w: 0px;\n  --msr-edit-mode-w: 0px;\n  position: relative;\n  flex: none;\n  width: var(--msr-select-mode-w);\n  overflow: visible;\n}\n.mesurer-toolbar-mode-stage[data-mode=\"edit\"] {\n  width: var(--msr-edit-mode-w);\n}\n.mesurer-toolbar-mode-track {\n  display: flex;\n  width: max-content;\n  align-items: stretch;\n  transform: translateX(0);\n}\n.mesurer-toolbar-mode-stage[data-mode=\"edit\"] .mesurer-toolbar-mode-track {\n  transform: translateX(calc(-1 * var(--msr-select-mode-w)));\n}\n.mesurer-toolbar-mode-slot {\n  flex: none;\n  width: var(--msr-select-mode-w);\n}\n.mesurer-toolbar-mode-slot[data-mode=\"edit\"] {\n  width: var(--msr-edit-mode-w);\n}\n.mesurer-toolbar-mode-panel {\n  display: flex;\n  width: max-content;\n  align-items: stretch;\n}\n.mesurer-toolbar-mode-slot[data-open=\"false\"] {\n  visibility: hidden;\n  pointer-events: none;\n}\n.mesurer-toolbar-mode-stage[data-mode-motion=\"true\"] {\n  overflow: hidden;\n}\n.mesurer-toolbar-mode-stage[data-mode-motion=\"true\"] .mesurer-toolbar-mode-slot[data-open=\"false\"] {\n  visibility: visible;\n}\n.mesurer-toolbar-mode-stage:has( .mesurer-toolbar-mode-slot[data-open=\"true\"] [role=\"menu\"], .mesurer-toolbar-mode-slot[data-open=\"true\"] [role=\"dialog\"] ) {\n  overflow: visible;\n}\n.mesurer-toolbar-mode-stage[data-ready=\"true\"], .mesurer-toolbar-mode-stage[data-ready=\"true\"] .mesurer-toolbar-mode-track {\n  transition-duration: 150ms;\n  transition-timing-function: ease;\n}\n.mesurer-toolbar-mode-stage[data-ready=\"true\"] {\n  transition-property: width;\n}\n.mesurer-toolbar-mode-stage[data-compact-motion=\"true\"] {\n  transition-property: none;\n}\n.mesurer-toolbar-mode-stage[data-ready=\"true\"] .mesurer-toolbar-mode-track {\n  transition-property: transform;\n}\n.mesurer-toolbar-mode-switch {\n  --msr-toolbar-mode-motion: 150ms ease;\n}\n.mesurer-toolbar-mode-switch-pill {\n  transition: transform var(--msr-toolbar-mode-motion);\n}\n@media (prefers-reduced-motion: reduce) {\n  .mesurer-toolbar-mode-stage, .mesurer-toolbar-mode-track, .mesurer-toolbar-mode-switch-pill {\n    transition: none !important;\n  }\n}\n[data-mesurer-root=\"true\"][data-mesurer-recording-active] [data-mesurer-motion-surface=\"true\"] {\n  display: none !important;\n}\n.mesurer-toolbar-zone {\n  position: fixed;\n  pointer-events: none;\n  border-radius: 9px;\n  box-sizing: border-box;\n  border: 1px dashed rgb(15 15 20 / 6%);\n  outline: 1px dashed rgb(255 255 255 / 7%);\n  outline-offset: -2px;\n  background: rgb(15 15 20 / 1%);\n  animation: mesurer-toolbar-zone-in 180ms ease-out both;\n}\n.mesurer-toolbar-zone[data-active=\"true\"] {\n  border-color: rgb(15 15 20 / 14%);\n  background: rgb(15 15 20 / 3.5%);\n}\n@keyframes mesurer-toolbar-zone-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] {\n  flex-direction: column;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] > div:not([role=\"dialog\"]), [data-mesurer-toolbar][data-orientation=\"vertical\"] [role=\"group\"], [data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-panel, [data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-track, [data-mesurer-toolbar][data-orientation=\"vertical\"] [data-mesurer-toolbar-compact-item] {\n  flex-direction: column;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] [role=\"group\"] {\n  padding: 2px 4px;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] [data-mesurer-toolbar-compact-item] {\n  max-width: none;\n  padding: 2px 0;\n  transition-property: max-height, opacity, transform, padding;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] [data-mesurer-toolbar-compact-item][data-visible=\"false\"] {\n  max-height: 0;\n  padding: 0;\n  transform: translateY(-4px);\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] [data-mesurer-toolbar-compact-item][data-visible=\"true\"] {\n  max-height: 80px;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] [data-mesurer-toolbar-divider] {\n  width: auto;\n  height: 1px;\n  transition-property: height, opacity;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] [data-mesurer-toolbar-divider].msr\\:opacity-0 {\n  height: 0;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-stage, [data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-slot {\n  width: auto;\n  height: var(--msr-select-mode-h, auto);\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-stage[data-mode=\"edit\"], [data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-slot[data-mode=\"edit\"] {\n  height: var(--msr-edit-mode-h, auto);\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-stage {\n  transition-property: height;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-track {\n  width: auto;\n  height: max-content;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-panel {\n  width: auto;\n  height: max-content;\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-stage[data-mode=\"edit\"] .mesurer-toolbar-mode-track {\n  transform: translateY(calc(-1 * var(--msr-select-mode-h)));\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-switch[data-value=\"edit\"] .mesurer-toolbar-mode-switch-pill {\n  transform: translateY(30px);\n}\n[data-mesurer-toolbar][data-orientation=\"vertical\"] .mesurer-toolbar-mode-switch[data-compact=\"true\"] .mesurer-toolbar-mode-switch-pill {\n  transform: none;\n}\n[data-mesurer-toolbar][data-dock-edge] {\n  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n[data-mesurer-toolbar][data-tucked=\"true\"]:is(:not(:hover), [data-tuck-locked=\"true\"])[data-dock-edge=\"top\"] {\n  transform: translateX(var(--msr-tuck-safe-offset, 0px)) translateY(calc(-100% - 10px));\n}\n[data-mesurer-toolbar][data-tucked=\"true\"]:is(:not(:hover), [data-tuck-locked=\"true\"])[data-dock-edge=\"bottom\"] {\n  transform: translateY(calc(100% + 10px));\n}\n[data-mesurer-toolbar][data-tucked=\"true\"]:is(:not(:hover), [data-tuck-locked=\"true\"])[data-dock-edge=\"left\"] {\n  transform: translateX(calc(-100% - 10px));\n}\n[data-mesurer-toolbar][data-tucked=\"true\"]:is(:not(:hover), [data-tuck-locked=\"true\"])[data-dock-edge=\"right\"] {\n  transform: translateX(calc(100% + 10px));\n}\n[data-mesurer-toolbar] [role=\"tooltip\"][data-tooltip-side=\"left\"], [data-mesurer-toolbar] [role=\"tooltip\"][data-tooltip-side=\"right\"] {\n  top: 50%;\n  bottom: auto;\n  margin: 0;\n  translate: none;\n  transform: translateY(-50%);\n}\n[data-mesurer-toolbar] [role=\"tooltip\"][data-tooltip-side=\"left\"] {\n  left: auto;\n  right: calc(100% + 14px);\n}\n[data-mesurer-toolbar] [role=\"tooltip\"][data-tooltip-side=\"right\"] {\n  left: calc(100% + 14px);\n  right: auto;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-mesurer-toolbar][data-dock-edge] {\n    transition: none !important;\n  }\n  .mesurer-toolbar-zone {\n    animation: none;\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ordinal {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-slashed-zero {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-numeric-figure {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-numeric-spacing {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-numeric-fraction {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-ordinal: initial;\n      --tw-slashed-zero: initial;\n      --tw-numeric-figure: initial;\n      --tw-numeric-spacing: initial;\n      --tw-numeric-fraction: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-duration: initial;\n      --tw-ease: initial;\n    }\n  }\n}\n", pf = {
 	opacity: 1,
 	width: 1,
 	pattern: "solid",
@@ -12557,31 +12592,31 @@ function y_(e) {
 		se = e.setTimeout(() => {
 			se = 0, t === ue && we(dm(de()), t);
 		}, 100);
-	}, Ee = () => e.model.state.toolMode === "select", De = () => e.model.state.xrayVisible, Oe = () => e.model.state.colorPickerActive, ke = () => e.model.state.rulersVisible, Ae = () => e.model.state.toolMode === "text-inspector" || (e.typographyContextActive ?? !1), je = () => e.model.state.toolMode === "guides", Me = () => e.model.state.settingsOpen, Ne = () => (e.pluginTools ?? []).find((e) => e.modeSwitch === !0 && e.toolbarMode === "edit"), Pe = () => Ne()?.active?.() ? "edit" : "select", Fe = () => (e.pluginTools ?? []).filter((e) => e.toolbarMode === "select" && !e.modeSwitch), Ie = () => (e.pluginTools ?? []).filter((e) => e.toolbarMode === "edit" && !e.modeSwitch), Le = () => (e.pluginTools ?? []).filter((e) => e.toolbarMode === "always" || e.toolbarMode === void 0), Re = (e) => e.active?.() ?? !1, ze = () => Le().some(Re), Be = () => Fe().some(Re), Ve = () => Ie().some(Re), He = () => Pe() === "select" ? De() || Oe() || Ae() || Be() || e.responsiveOpen === !0 : Ve(), We = () => ke() || je(), Ge = (e) => !N() || e, Ke = () => Le().length > 0 && (!N() || He() || We() || ze()), qe = () => !N() || He() || We() || ze() || Me(), Je = () => !T() && !D() && !e.model.state.settingsOpen, Ye = () => T() || D() !== null || e.model.state.settingsOpen, Xe = Um({
+	}, Ee = () => e.model.state.toolMode === "select", De = () => e.model.state.xrayVisible, Oe = () => e.model.state.colorPickerActive, ke = () => e.model.state.rulersVisible, Ae = () => e.model.state.toolMode === "text-inspector" || (e.typographyContextActive ?? !1), je = () => e.model.state.toolMode === "guides", Me = () => e.model.state.settingsOpen, Ne = () => (e.pluginTools ?? []).find((e) => e.modeSwitch === !0 && e.toolbarMode === "edit"), Pe = () => Ne()?.active?.() ? "edit" : "select", Fe = () => (e.pluginTools ?? []).filter((e) => e.toolbarMode === "select" && !e.modeSwitch), Ie = () => (e.pluginTools ?? []).filter((e) => e.toolbarMode === "edit" && !e.modeSwitch), Le = () => (e.pluginTools ?? []).filter((e) => e.toolbarMode === "always" || e.toolbarMode === void 0), Re = (e) => e.active?.() ?? !1, ze = () => Le().some(Re), Be = () => Fe().some(Re), Ve = () => Ie().some(Re), He = () => Ee() || De() || Oe() || Ae() || e.responsiveOpen === !0, We = () => Pe() === "select" ? He() || Be() : Ve(), Ge = () => ke() || je(), Ke = (e) => !N() || e, qe = () => Le().length > 0 && (!N() || We() || Ge() || ze()), Je = () => !N() || We() || Ge() || ze() || Me(), Ye = () => !T() && !D() && !e.model.state.settingsOpen, Xe = () => T() || D() !== null || e.model.state.settingsOpen, Ze = Um({
 		ownerWindow: e.ownerWindow,
 		element: () => R,
 		enabled: () => u() && e.model.state.settings.toolbarAutoHide,
 		edge: r,
-		busy: () => y() || Ye() || !!Se() || xe() || x() || Oe() || (e.pluginTools ?? []).some(Re) || Ae()
-	}), Ze = (t) => e.isBuiltinActionDisabled?.(t) ?? !1, Qe = () => e.ownerWindow.innerHeight || 0, $e = () => t().y < 56, et = () => Qe() > 0 && t().y > Qe() - 56, tt = () => a() ? t().x < e.ownerWindow.innerWidth / 2 ? "right" : "left" : $e() && !et() ? "bottom" : "top", nt = () => {
+		busy: () => y() || Xe() || !!Se() || xe() || x() || Oe() || (e.pluginTools ?? []).some(Re) || Ae()
+	}), Qe = (t) => e.isBuiltinActionDisabled?.(t) ?? !1, $e = () => e.ownerWindow.innerHeight || 0, et = () => t().y < 56, tt = () => $e() > 0 && t().y > $e() - 56, nt = () => a() ? t().x < e.ownerWindow.innerWidth / 2 ? "right" : "left" : et() && !tt() ? "bottom" : "top", rt = () => {
 		t();
 		let e = H?.getBoundingClientRect();
-		if (!e) return et() ? "top" : "bottom";
-		let n = Math.max(0, Qe() - e.bottom - f_), r = Math.max(0, e.top - f_);
+		if (!e) return tt() ? "top" : "bottom";
+		let n = Math.max(0, $e() - e.bottom - f_), r = Math.max(0, e.top - f_);
 		return n >= p_ || n >= r ? "bottom" : "top";
-	}, rt = () => {
+	}, it = () => {
 		t();
 		let e = R?.getBoundingClientRect();
-		if (!e) return et() ? "top" : "bottom";
-		let n = Math.max(0, Qe() - e.bottom - f_), r = Math.max(0, e.top - f_);
+		if (!e) return tt() ? "top" : "bottom";
+		let n = Math.max(0, $e() - e.bottom - f_), r = Math.max(0, e.top - f_);
 		return n >= m_ || n >= r ? "bottom" : "top";
-	}, it = () => {
+	}, at = () => {
 		t(), N(), Me(), F();
 		let n = (N() ? R : ee)?.getBoundingClientRect();
 		if (!n) return 0;
 		let r = e.ownerWindow.innerWidth || 288, i = Math.min(d_, Math.max(0, r - 16)), a = n.right + 4 - i, o = Math.max(f_, r - f_ - i);
 		return Math.min(o, Math.max(f_, a)) - n.left;
-	}, at = () => {
+	}, ot = () => {
 		let n = t();
 		N(), F();
 		let r = R?.getBoundingClientRect(), i = r && {
@@ -12621,8 +12656,8 @@ function y_(e) {
 			width: c,
 			maxHeight: f
 		};
-	}, ot = () => {
-		let t = at(), n = _();
+	}, st = () => {
+		let t = ot(), n = _();
 		if (!n) return t;
 		let r = Math.max(f_, e.ownerWindow.innerWidth - t.width - f_), i = Math.max(f_, e.ownerWindow.innerHeight - __ - f_);
 		return {
@@ -12632,7 +12667,7 @@ function y_(e) {
 			bottom: null,
 			maxHeight: Math.max(0, e.ownerWindow.innerHeight - 16)
 		};
-	}, st = (t, n) => {
+	}, ct = (t, n) => {
 		if (t.button !== 0) return;
 		let r = t.target;
 		if (!(r instanceof e.ownerWindow.Element) || r.closest("button, input, select, textarea, [role='slider']") && !r.closest("button[aria-label=\"Motion preview\"]")) return;
@@ -12644,19 +12679,19 @@ function y_(e) {
 			if (t.pointerId !== s) return;
 			let r = t.clientX - a, c = t.clientY - o;
 			if (!d && Math.hypot(r, c) < v_) return;
-			d || (d = !0, b(!0), n.style.willChange = "transform");
+			d || (d = !0, n.setPointerCapture(s), b(!0), n.style.willChange = "transform");
 			let l = Math.max(f_, e.ownerWindow.innerWidth - i.width - f_), h = Math.max(f_, e.ownerWindow.innerHeight - i.height - f_);
 			f = Math.min(l, Math.max(f_, i.left + r)), p = Math.min(h, Math.max(f_, i.top + c)), u ||= e.ownerWindow.requestAnimationFrame(m);
 		}, g = (t) => {
 			u && e.ownerWindow.cancelAnimationFrame(u), u = 0, d && t && v({
 				x: f,
 				y: p
-			}), n.style.transform = c, n.style.willChange = l, b(!1), e.ownerWindow.removeEventListener("pointermove", h), e.ownerWindow.removeEventListener("pointerup", _), e.ownerWindow.removeEventListener("pointercancel", _), B = null;
+			}), n.style.transform = c, n.style.willChange = l, n.hasPointerCapture(s) && n.releasePointerCapture(s), b(!1), e.ownerWindow.removeEventListener("pointermove", h, !0), e.ownerWindow.removeEventListener("pointerup", _, !0), e.ownerWindow.removeEventListener("pointercancel", _, !0), B = null;
 		}, _ = (e) => {
 			e.pointerId === s && (V = d, g(e.type === "pointerup"));
 		};
-		B = () => g(!1), e.ownerWindow.addEventListener("pointermove", h), e.ownerWindow.addEventListener("pointerup", _), e.ownerWindow.addEventListener("pointercancel", _);
-	}, ct = () => {
+		B = () => g(!1), e.ownerWindow.addEventListener("pointermove", h, !0), e.ownerWindow.addEventListener("pointerup", _, !0), e.ownerWindow.addEventListener("pointercancel", _, !0);
+	}, lt = () => {
 		let t = H?.getBoundingClientRect();
 		if (!t) return;
 		let n = t.right - r_, r = t.left + r_;
@@ -12669,17 +12704,17 @@ function y_(e) {
 			return;
 		}
 		M("right");
-	}, lt = (t) => {
+	}, ut = (t) => {
 		let n = (t.menu?.items ?? []).reduce((t, n) => {
 			let r = e.model.state.settings.shortcutsEnabled && n.shortcut ? n.shortcut.length + 2 : 0;
 			return Math.max(t, n.label.length + r);
 		}, 0);
 		return Math.min(a_, Math.max(i_, Math.ceil(n * o_ + s_)));
-	}, ut = (n) => {
+	}, dt = (n) => {
 		t(), F();
-		let r = ne?.getBoundingClientRect(), i = e.ownerWindow.innerWidth || 240, a = Qe(), o = Math.min(lt(n), Math.max(0, i - 16));
+		let r = ne?.getBoundingClientRect(), i = e.ownerWindow.innerWidth || 240, a = $e(), o = Math.min(ut(n), Math.max(0, i - 16));
 		if (!r) return {
-			side: et() ? "top" : "bottom",
+			side: tt() ? "top" : "bottom",
 			left: 0,
 			width: o,
 			maxHeight: Math.max(0, a - 16)
@@ -12691,13 +12726,13 @@ function y_(e) {
 			width: o,
 			maxHeight: d
 		};
-	}, dt = (e, t) => {
+	}, ft = (e, t) => {
 		if (D() === e) {
 			O(null), ne = void 0;
 			return;
 		}
 		ne = t, O(e);
-	}, ft = (o) => {
+	}, pt = (o) => {
 		if (o.button !== 0) return;
 		let s = e.ownerWindow.Element, d = o.target;
 		if (d instanceof s && d.closest(n_)) return;
@@ -12726,7 +12761,7 @@ function y_(e) {
 			let n = t.clientX - m, o = t.clientY - h;
 			if (!k) {
 				if (k = Math.abs(n) > t_ || Math.abs(o) > t_, !k) return;
-				E(!1), O(null), ne = void 0, y.style.willChange = "transform", T && (T.style.willChange = "transform"), b(!0), e.model.current.settingsOpen && e.model.setTransient({ settingsOpen: !1 });
+				y.setPointerCapture(N), E(!1), O(null), ne = void 0, y.style.willChange = "transform", T && (T.style.willChange = "transform"), b(!0), e.model.current.settingsOpen && e.model.setTransient({ settingsOpen: !1 });
 			}
 			if (A = !0, L = {
 				x: t.clientX,
@@ -12774,7 +12809,7 @@ function y_(e) {
 			});
 			j ||= e.ownerWindow.requestAnimationFrame(R);
 		}, V = (t) => {
-			if (j && e.ownerWindow.cancelAnimationFrame(j), j = 0, w(null), y.style.transform = S, y.style.willChange = C, T && (T.style.transform = D, T.style.willChange = ""), A && t) {
+			if (j && e.ownerWindow.cancelAnimationFrame(j), j = 0, w(null), y.style.transform = S, y.style.willChange = C, y.hasPointerCapture(N) && y.releasePointerCapture(N), T && (T.style.transform = D, T.style.willChange = ""), A && t) {
 				if (u()) {
 					let e = Math.min(fe().width, fe().height), t = r() ? {
 						side: r(),
@@ -12787,36 +12822,36 @@ function y_(e) {
 				}
 				n(M), ye(), he(M);
 			}
-			b(!1), ie !== null && (p.style.userSelect = ie, ie = null), e.ownerWindow.removeEventListener("pointermove", B), e.ownerWindow.removeEventListener("pointerup", ee), e.ownerWindow.removeEventListener("pointercancel", ee), G = null;
+			b(!1), ie !== null && (p.style.userSelect = ie, ie = null), e.ownerWindow.removeEventListener("pointermove", B, !0), e.ownerWindow.removeEventListener("pointerup", ee, !0), e.ownerWindow.removeEventListener("pointercancel", ee, !0), G = null;
 		}, ee = (e) => {
 			e.pointerId === N && (re = A, V(e.type === "pointerup"));
 		};
-		G = () => V(!1), e.ownerWindow.addEventListener("pointermove", B), e.ownerWindow.addEventListener("pointerup", ee), e.ownerWindow.addEventListener("pointercancel", ee);
-	}, pt = (t) => {
+		G = () => V(!1), e.ownerWindow.addEventListener("pointermove", B, !0), e.ownerWindow.addEventListener("pointerup", ee, !0), e.ownerWindow.addEventListener("pointercancel", ee, !0);
+	}, mt = (t) => {
 		e.model.setEnabled(!0), e.model.current.toolMode !== "guides" && e.model.toggleToolMode("guides"), e.model.setGuideOrientation(t, !0), E(!1);
-	}, mt = () => {
+	}, ht = () => {
 		let t = !N();
 		t && (E(!1), O(null), e.model.current.settingsOpen && e.model.setTransient({ settingsOpen: !1 })), ce && e.ownerWindow.clearTimeout(ce), U && (U.dataset.compactMotion = "true"), P(t), ce = e.ownerWindow.setTimeout(() => {
 			ce = 0, U && delete U.dataset.compactMotion, I((e) => e + 1);
 		}, 170);
-	}, ht = () => {
+	}, gt = () => {
 		le && e.ownerWindow.clearTimeout(le), U && (U.dataset.modeMotion = "true"), le = e.ownerWindow.setTimeout(() => {
 			le = 0, U && delete U.dataset.modeMotion;
 		}, 170);
-	}, gt = () => {
-		let t = Ne();
-		t?.active?.() && (O(null), ht(), e.onPluginTool?.(t));
 	}, _t = () => {
 		let t = Ne();
-		!t || t.disabled?.() || (E(!1), O(null), ht(), e.onPluginTool?.(t));
-	}, vt = (t) => ({
+		t?.active?.() && (O(null), gt(), e.onPluginTool?.(t));
+	}, vt = () => {
+		let t = Ne();
+		!t || t.disabled?.() || (E(!1), O(null), gt(), e.onPluginTool?.(t));
+	}, yt = (t) => ({
 		shortcutsEnabled: e.model.state.settings.shortcutsEnabled,
-		tooltipVisible: Je() && L.visibleTooltipId() === t,
+		tooltipVisible: Ye() && L.visibleTooltipId() === t,
 		tooltipInstant: L.tooltipInstant(),
-		tooltipSide: tt(),
+		tooltipSide: nt(),
 		onTooltipEnter: L.onTooltipEnter,
 		onTooltipLeave: L.onTooltipLeave
-	}), yt = (t) => Y(q, {
+	}), bt = (t) => Y(q, {
 		get when() {
 			return D() === t.id;
 		},
@@ -12863,22 +12898,22 @@ function y_(e) {
 				})()
 			})), J(() => ({
 				e: t.id,
-				t: ut(t).side,
-				a: `mesurer-menu-surface msr:absolute msr:z-[70] msr:rounded-lg msr:border msr:border-ink-200 msr:bg-white msr:p-1 msr:outline-none msr:flex msr:flex-col msr:gap-px msr:overflow-x-hidden msr:overflow-y-auto ${ut(t).side === "top" ? "msr:bottom-full msr:mb-2" : "msr:top-full msr:mt-2"}`,
+				t: dt(t).side,
+				a: `mesurer-menu-surface msr:absolute msr:z-[70] msr:rounded-lg msr:border msr:border-ink-200 msr:bg-white msr:p-1 msr:outline-none msr:flex msr:flex-col msr:gap-px msr:overflow-x-hidden msr:overflow-y-auto ${dt(t).side === "top" ? "msr:bottom-full msr:mb-2" : "msr:top-full msr:mt-2"}`,
 				o: {
-					left: `${ut(t).left}px`,
+					left: `${dt(t).left}px`,
 					right: "auto",
-					width: `${ut(t).width}px`,
-					"max-height": `${ut(t).maxHeight}px`
+					width: `${dt(t).width}px`,
+					"max-height": `${dt(t).maxHeight}px`
 				},
 				i: t.menu?.label ?? `${t.label} options`
 			}), ({ e, t, a: r, o: i, i: a }, o) => {
 				e !== o?.e && $(n, "data-mesurer-tool-menu", e, o?.e), t !== o?.t && $(n, "data-mesurer-menu-side", t, o?.t), r !== o?.a && $(n, "class", r, o?.a), i !== o?.o && $(n, "style", i, o?.o), a !== o?.i && $(n, "aria-label", a, o?.i);
 			}), n;
 		}
-	}), bt = (t) => Y(Zg, {
+	}), xt = (t) => Y(Zg, {
 		get visible() {
-			return Ge(Re(t));
+			return Ke(Re(t));
 		},
 		get children() {
 			return Y(q, {
@@ -12906,7 +12941,7 @@ function y_(e) {
 							return t.shortcut;
 						},
 						onClick: () => e.onPluginTool?.(t)
-					}, () => vt(`plugin:${t.id}`), { get children() {
+					}, () => yt(`plugin:${t.id}`), { get children() {
 						return Y(e_, { tool: t });
 					} }));
 				},
@@ -12917,7 +12952,7 @@ function y_(e) {
 					}), r = X("button", {
 						type: "button",
 						onMouseEnter: () => L.onTooltipEnter(`plugin-menu:${t.id}`),
-						onClick: (e) => dt(t.id, e.currentTarget.parentElement ?? e.currentTarget)
+						onClick: (e) => ft(t.id, e.currentTarget.parentElement ?? e.currentTarget)
 					});
 					return Z(n, r), Q(n, Y(Xg, sc({
 						get id() {
@@ -12939,22 +12974,22 @@ function y_(e) {
 							return t.shortcut;
 						},
 						onClick: () => e.onPluginTool?.(t)
-					}, () => vt(`plugin:${t.id}`), { get children() {
+					}, () => yt(`plugin:${t.id}`), { get children() {
 						return Y(e_, { tool: t });
 					} })), r), Q(r, Y(_g, { size: 8 }), null), Q(r, Y(El, {
 						get label() {
 							return `${t.label} options`;
 						},
 						get visible() {
-							return ic(() => !!Je())() ? L.visibleTooltipId() === `plugin-menu:${t.id}` : Je();
+							return ic(() => !!Ye())() ? L.visibleTooltipId() === `plugin-menu:${t.id}` : Ye();
 						},
 						get instant() {
 							return L.tooltipInstant();
 						},
 						get side() {
-							return tt();
+							return nt();
 						}
-					}), null), Q(n, () => yt(t), null), J(() => ({
+					}), null), Q(n, () => bt(t), null), J(() => ({
 						e: t.id,
 						t: t.id,
 						a: `${t.label} options`,
@@ -12984,7 +13019,7 @@ function y_(e) {
 		}, a = () => {
 			E(!1), O(null), e.model.current.settingsOpen && e.model.setTransient({ settingsOpen: !1 });
 		}, o = () => {
-			T() && ct(), I((e) => e + 1);
+			T() && lt(), I((e) => e + 1);
 		}, s = e.ownerWindow.document;
 		return e.ownerWindow.addEventListener("pointerdown", n), e.ownerWindow.addEventListener("focus", t), e.ownerWindow.addEventListener("pageshow", t), e.ownerWindow.document.addEventListener("visibilitychange", t), s.addEventListener("keydown", i, !0), e.ownerWindow.addEventListener("resize", o), e.ownerWindow.addEventListener("mesurer:responsive-frame-pointerdown", a), R?.addEventListener("click", r, !0), () => {
 			ue += 1, se &&= (de().clearTimeout(se), 0), ce &&= (e.ownerWindow.clearTimeout(ce), 0), le &&= (e.ownerWindow.clearTimeout(le), 0), e.ownerWindow.removeEventListener("pointerdown", n), e.ownerWindow.removeEventListener("focus", t), e.ownerWindow.removeEventListener("pageshow", t), e.ownerWindow.document.removeEventListener("visibilitychange", t), s.removeEventListener("keydown", i, !0), e.ownerWindow.removeEventListener("resize", o), e.ownerWindow.removeEventListener("mesurer:responsive-frame-pointerdown", a), R?.removeEventListener("click", r, !0), G?.(), B?.(), ie !== null && (e.ownerWindow.document.documentElement.style.userSelect = ie);
@@ -13009,13 +13044,13 @@ function y_(e) {
 			e.ownerWindow.cancelAnimationFrame(c), o && e.ownerWindow.cancelAnimationFrame(o), s?.disconnect();
 		};
 	});
-	let xt = un(u);
+	let St = un(u);
 	return vo(u, (e) => {
-		e !== xt && (xt = e, un(() => {
+		e !== St && (St = e, un(() => {
 			e ? be() : (i(null), ve(!1), n(me(t())), ye(), he(t()));
 		}));
 	}), vo(() => [
-		Xe.tucked(),
+		Ze.tucked(),
 		m(),
 		a()
 	], () => {
@@ -13139,14 +13174,14 @@ function y_(e) {
 		ic((() => {
 			let t = Se();
 			if (!t) return null;
-			let n = ot, r = t;
+			let n = st, r = t;
 			var i = X("div", {
 				"data-mesurer-motion-surface": "true",
 				"data-mesurer-inspector-ui": "true",
 				class: "msr:pointer-events-auto msr:absolute msr:z-[80] msr:overflow-visible"
 			});
 			return lc(() => (e) => {
-				z = e, e.addEventListener("pointerdown", (t) => st(t, e), !0), e.addEventListener("click", (e) => {
+				z = e, e.addEventListener("pointerdown", (t) => ct(t, e), !0), e.addEventListener("click", (e) => {
 					V && (V = !1, e.preventDefault(), e.stopImmediatePropagation());
 				}, !0);
 			}, i), Q(i, Y(og, {
@@ -13188,7 +13223,7 @@ function y_(e) {
 				"data-mesurer-toolbar": "true",
 				"data-mesurer-inspector-ui": "true",
 				onPointerDown: (t) => {
-					t.stopPropagation(), e.model.setTransient({ toolbarActive: !0 }), ft(t);
+					t.stopPropagation(), e.model.setTransient({ toolbarActive: !0 }), pt(t);
 				},
 				onClick: (e) => e.stopPropagation(),
 				onMouseEnter: Te
@@ -13210,7 +13245,7 @@ function y_(e) {
 				type: "button",
 				"data-mesurer-toolbar-compact-toggle": "true",
 				class: "msr:flex msr:size-7 msr:select-none msr:items-center msr:justify-center msr:rounded-[7px] msr:text-black msr:outline-none msr:hover:bg-black/4",
-				onClick: mt
+				onClick: ht
 			});
 			return Z(n, i), Z(n, g), Z(n, _), Z(n, v), lc(() => (e) => {
 				R = e;
@@ -13234,19 +13269,19 @@ function y_(e) {
 					return D() === Ne()?.id;
 				},
 				get editOptions() {
-					return ic(() => !!Ne())() ? yt(Ne()) : null;
+					return ic(() => !!Ne())() ? bt(Ne()) : null;
 				},
 				get shortcutsEnabled() {
 					return e.model.state.settings.shortcutsEnabled;
 				},
 				get tooltipVisibleId() {
-					return ic(() => !!Je())() ? L.visibleTooltipId() : null;
+					return ic(() => !!Ye())() ? L.visibleTooltipId() : null;
 				},
 				get tooltipInstant() {
 					return L.tooltipInstant();
 				},
 				get tooltipSide() {
-					return tt();
+					return nt();
 				},
 				get onTooltipEnter() {
 					return L.onTooltipEnter;
@@ -13254,15 +13289,15 @@ function y_(e) {
 				get onTooltipLeave() {
 					return L.onTooltipLeave;
 				},
-				onSelect: gt,
-				onEdit: _t,
+				onSelect: _t,
+				onEdit: vt,
 				onEditOptions: (e) => {
 					let t = Ne();
-					!t || t.disabled?.() || dt(t.id, e);
+					!t || t.disabled?.() || ft(t.id, e);
 				}
 			}), i), Q(n, Y(Qg, {
 				get visible() {
-					return qe();
+					return Je();
 				},
 				marker: "mode"
 			}), i), Z(i, o), lc(() => (e) => {
@@ -13271,7 +13306,7 @@ function y_(e) {
 				W = e;
 			}, l), Q(f, Y(Zg, {
 				get visible() {
-					return !N();
+					return Ke(Ee());
 				},
 				get children() {
 					return Y(Xg, sc({
@@ -13283,13 +13318,13 @@ function y_(e) {
 						label: "Select",
 						shortcut: "S",
 						onClick: () => e.onBuiltinAction("select")
-					}, () => vt("select"), { get children() {
+					}, () => yt("select"), { get children() {
 						return Y(dg, { size: 20 });
 					} }));
 				}
 			}), null), Q(f, Y(Zg, {
 				get visible() {
-					return Ge(De());
+					return Ke(De());
 				},
 				get children() {
 					return Y(Xg, sc({
@@ -13301,7 +13336,7 @@ function y_(e) {
 						label: "X-ray",
 						shortcut: "X",
 						onClick: () => e.onBuiltinAction("xray")
-					}, () => vt("xray"), { get children() {
+					}, () => yt("xray"), { get children() {
 						return Y(hg, { size: 20 });
 					} }));
 				}
@@ -13312,7 +13347,7 @@ function y_(e) {
 				get children() {
 					return Y(Zg, {
 						get visible() {
-							return Ge(Oe());
+							return Ke(Oe());
 						},
 						get children() {
 							return Y(Xg, sc({
@@ -13322,12 +13357,12 @@ function y_(e) {
 									return Oe();
 								},
 								get disabled() {
-									return Ze("color-picker");
+									return Qe("color-picker");
 								},
 								label: "Color picker",
 								shortcut: "P",
 								onClick: () => e.onBuiltinAction("color-picker")
-							}, () => vt("color-picker"), { get children() {
+							}, () => yt("color-picker"), { get children() {
 								return Y(Sg, { size: 20 });
 							} }));
 						}
@@ -13335,7 +13370,7 @@ function y_(e) {
 				}
 			}), null), Q(f, Y(Zg, {
 				get visible() {
-					return Ge(Ae());
+					return Ke(Ae());
 				},
 				get children() {
 					return Y(Xg, sc({
@@ -13345,18 +13380,18 @@ function y_(e) {
 							return Ae();
 						},
 						get disabled() {
-							return Ze("text-inspector");
+							return Qe("text-inspector");
 						},
 						label: "Typography",
 						shortcut: "A",
 						onClick: () => e.onBuiltinAction("text-inspector")
-					}, () => vt("text-inspector"), { get children() {
+					}, () => yt("text-inspector"), { get children() {
 						return Y(bg, { size: 20 });
 					} }));
 				}
 			}), null), Q(f, Y(Zg, {
 				get visible() {
-					return Ge(e.responsiveOpen === !0);
+					return Ke(e.responsiveOpen === !0);
 				},
 				get children() {
 					return Y(Xg, sc({
@@ -13368,7 +13403,7 @@ function y_(e) {
 						label: "Responsive",
 						shortcut: "B",
 						onClick: () => e.onBuiltinAction("responsive")
-					}, () => vt("responsive"), { get children() {
+					}, () => yt("responsive"), { get children() {
 						return Y(xg, { size: 20 });
 					} }));
 				}
@@ -13379,7 +13414,7 @@ function y_(e) {
 				get children() {
 					return [Y(Qg, {
 						get visible() {
-							return !N() || Be() && (De() || Oe() || Ae());
+							return !N() || Be() && He();
 						},
 						marker: "select-plugins"
 					}), (() => {
@@ -13392,7 +13427,7 @@ function y_(e) {
 							get each() {
 								return Fe();
 							},
-							children: (e) => bt(e)
+							children: (e) => xt(e)
 						})), e;
 					})()];
 				}
@@ -13412,12 +13447,12 @@ function y_(e) {
 						get each() {
 							return Ie();
 						},
-						children: (e) => bt(e)
+						children: (e) => xt(e)
 					})), e;
 				}
 			})), Q(g, Y(Zg, {
 				get visible() {
-					return Ge(ke());
+					return Ke(ke());
 				},
 				get children() {
 					return Y(Xg, sc({
@@ -13429,13 +13464,13 @@ function y_(e) {
 						label: "Rulers",
 						shortcut: "R",
 						onClick: () => e.onBuiltinAction("rulers")
-					}, () => vt("rulers"), { get children() {
+					}, () => yt("rulers"), { get children() {
 						return Y(gg, { size: 20 });
 					} }));
 				}
 			}), null), Q(g, Y(Zg, {
 				get visible() {
-					return Ge(je());
+					return Ke(je());
 				},
 				get children() {
 					return [Y(Xg, sc({
@@ -13445,12 +13480,12 @@ function y_(e) {
 							return je();
 						},
 						get disabled() {
-							return Ze("guides");
+							return Qe("guides");
 						},
 						label: "Guides",
 						shortcut: "G",
 						onClick: () => e.onBuiltinAction("guides")
-					}, () => vt("guides"), { get children() {
+					}, () => yt("guides"), { get children() {
 						return Y(mg, {
 							size: 20,
 							get class() {
@@ -13467,7 +13502,7 @@ function y_(e) {
 							"aria-label": "Guide orientation menu",
 							"aria-haspopup": "menu",
 							onClick: () => {
-								E((t) => (t || (A(e.model.state.guideOrientation === "horizontal" ? 0 : 1), ct()), !t));
+								E((t) => (t || (A(e.model.state.guideOrientation === "horizontal" ? 0 : 1), lt()), !t));
 							}
 						});
 						return Z(t, n), lc(() => (e) => {
@@ -13475,13 +13510,13 @@ function y_(e) {
 						}, t), Q(n, Y(_g, { size: 8 })), Q(t, Y(El, {
 							label: "Orientation Guide",
 							get visible() {
-								return ic(() => !!Je())() ? L.visibleTooltipId() === "guide-menu" : Je();
+								return ic(() => !!Ye())() ? L.visibleTooltipId() === "guide-menu" : Ye();
 							},
 							get instant() {
 								return L.tooltipInstant();
 							},
 							get side() {
-								return tt();
+								return nt();
 							}
 						}), null), Q(t, Y(q, {
 							get when() {
@@ -13493,14 +13528,14 @@ function y_(e) {
 									tabindex: 0,
 									onKeyDown: (e) => {
 										let t = e.key.toLowerCase();
-										e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), A((e) => (e + 1) % 2)) : e.key === "Enter" ? (e.preventDefault(), pt(k() === 0 ? "horizontal" : "vertical")) : t === "h" || t === "v" ? (e.preventDefault(), pt(t === "h" ? "horizontal" : "vertical")) : e.key === "Escape" && (e.preventDefault(), E(!1));
+										e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), A((e) => (e + 1) % 2)) : e.key === "Enter" ? (e.preventDefault(), mt(k() === 0 ? "horizontal" : "vertical")) : t === "h" || t === "v" ? (e.preventDefault(), mt(t === "h" ? "horizontal" : "vertical")) : e.key === "Escape" && (e.preventDefault(), E(!1));
 									}
 								}), n = X("button", {
 									type: "button",
-									onClick: () => pt("horizontal")
+									onClick: () => mt("horizontal")
 								}), r = X("span", { class: "msr:flex-1" }), i = X("span"), a = X("button", {
 									type: "button",
-									onClick: () => pt("vertical")
+									onClick: () => mt("vertical")
 								}), o = X("span", { class: "msr:flex-1" }), s = X("span");
 								return Z(t, n), Z(t, a), Z(n, r), Z(n, i), Q(n, Y(vg, {
 									size: 12,
@@ -13516,7 +13551,7 @@ function y_(e) {
 									size: 12,
 									class: "msr:rotate-90"
 								}), o), Z(o, ac("Vertical")), Z(s, ac("V")), J(() => ({
-									e: `mesurer-menu-surface msr:absolute msr:z-[70] msr:w-44 msr:rounded-lg msr:border msr:border-ink-200 msr:bg-white msr:p-1 msr:outline-none msr:focus:outline-none msr:flex msr:flex-col msr:gap-px ${nt() === "bottom" ? "msr:top-full msr:mt-2" : "msr:bottom-full msr:mb-2"} ${j() === "left" ? "msr:left-0" : "msr:right-0"}`,
+									e: `mesurer-menu-surface msr:absolute msr:z-[70] msr:w-44 msr:rounded-lg msr:border msr:border-ink-200 msr:bg-white msr:p-1 msr:outline-none msr:focus:outline-none msr:flex msr:flex-col msr:gap-px ${rt() === "bottom" ? "msr:top-full msr:mt-2" : "msr:bottom-full msr:mb-2"} ${j() === "left" ? "msr:left-0" : "msr:right-0"}`,
 									t: `msr:group msr:flex msr:w-full msr:items-center msr:gap-2 msr:rounded-md msr:px-2 msr:py-1.5 msr:text-left msr:text-[12px] ${k() === 0 || e.model.state.guideOrientation === "horizontal" ? "msr:bg-[#0d99ff] msr:text-white" : "msr:text-ink-700 msr:hover:bg-[#0d99ff] msr:hover:text-white"}`,
 									a: `msr:group msr:flex msr:w-full msr:items-center msr:gap-2 msr:rounded-md msr:px-2 msr:py-1.5 msr:text-left msr:text-[12px] ${k() === 1 || e.model.state.guideOrientation === "vertical" ? "msr:bg-[#0d99ff] msr:text-white" : "msr:text-ink-700 msr:hover:bg-[#0d99ff] msr:hover:text-white"}`
 								}), ({ e, t: r, a: i }, o) => {
@@ -13526,8 +13561,8 @@ function y_(e) {
 						}), null), J(() => ({
 							e: L.onTooltipLeave,
 							t: T() ? "true" : "false",
-							a: Ze("guides"),
-							o: `msr:flex msr:h-8 msr:w-4 msr:items-center msr:justify-center msr:rounded-[6px] msr:outline-none ${Ze("guides") ? "msr:cursor-default msr:text-black/30" : "msr:hover:bg-black/10"} ${T() ? "msr:bg-black/10 msr:text-black" : "msr:text-black"}`
+							a: Qe("guides"),
+							o: `msr:flex msr:h-8 msr:w-4 msr:items-center msr:justify-center msr:rounded-[6px] msr:outline-none ${Qe("guides") ? "msr:cursor-default msr:text-black/30" : "msr:hover:bg-black/10"} ${T() ? "msr:bg-black/10 msr:text-black" : "msr:text-black"}`
 						}), ({ e, t: r, a: i, o: a }, o) => {
 							e !== o?.e && $(t, "onMouseLeave", e, o?.e), r !== o?.t && $(n, "aria-expanded", r, o?.t), i !== o?.a && $(n, "disabled", i, o?.a), a !== o?.o && $(n, "class", a, o?.o);
 						}), t;
@@ -13540,7 +13575,7 @@ function y_(e) {
 				get children() {
 					return [Y(Qg, {
 						get visible() {
-							return Ke();
+							return qe();
 						},
 						marker: "plugins"
 					}), (() => {
@@ -13553,13 +13588,13 @@ function y_(e) {
 							get each() {
 								return Le();
 							},
-							children: (e) => bt(e)
+							children: (e) => xt(e)
 						})), e;
 					})()];
 				}
 			}), _), Q(_, Y(Zg, {
 				get visible() {
-					return Ge(Me());
+					return Ke(Me());
 				},
 				get children() {
 					var t = X("div", {
@@ -13577,7 +13612,7 @@ function y_(e) {
 						label: "Settings",
 						shortcut: "⌘/Ctrl+,",
 						onClick: () => e.onBuiltinAction("settings")
-					}, () => vt("settings"), { get children() {
+					}, () => yt("settings"), { get children() {
 						return Y(jg, { size: 20 });
 					} })), null), Q(t, Y(q, {
 						get when() {
@@ -13612,9 +13647,9 @@ function y_(e) {
 									return e.onSelectionSpacingStyleChange;
 								}
 							})), J(() => ({
-								e: `mesurer-menu-surface msr:absolute msr:z-[70] msr:box-border msr:w-[272px] msr:max-w-[calc(100vw-16px)] msr:max-h-[calc(100vh-16px)] msr:overflow-y-auto msr:rounded-lg msr:border msr:border-ink-200 msr:bg-white msr:p-3 ${rt() === "bottom" ? "msr:top-full msr:mt-2" : "msr:bottom-full msr:mb-2"}`,
+								e: `mesurer-menu-surface msr:absolute msr:z-[70] msr:box-border msr:w-[272px] msr:max-w-[calc(100vw-16px)] msr:max-h-[calc(100vh-16px)] msr:overflow-y-auto msr:rounded-lg msr:border msr:border-ink-200 msr:bg-white msr:p-3 ${it() === "bottom" ? "msr:top-full msr:mt-2" : "msr:bottom-full msr:mb-2"}`,
 								t: {
-									left: `${it()}px`,
+									left: `${at()}px`,
 									right: "auto"
 								}
 							}), ({ e, t: n }, r) => {
@@ -13625,7 +13660,7 @@ function y_(e) {
 				}
 			})), Q(n, Y(Qg, {
 				get visible() {
-					return qe();
+					return Je();
 				},
 				marker: "compact"
 			}), v), Q(n, Y(q, {
@@ -13662,9 +13697,9 @@ function y_(e) {
 							return e.onSelectionSpacingStyleChange;
 						}
 					})), J(() => ({
-						e: `mesurer-menu-surface msr:pointer-events-auto msr:absolute msr:z-[110] msr:box-border msr:w-[272px] msr:max-w-[calc(100vw-16px)] msr:max-h-[calc(100vh-16px)] msr:overflow-y-auto msr:rounded-lg msr:border msr:border-ink-200 msr:bg-white msr:p-3 ${rt() === "bottom" ? "msr:top-full msr:mt-2" : "msr:bottom-full msr:mb-2"}`,
+						e: `mesurer-menu-surface msr:pointer-events-auto msr:absolute msr:z-[110] msr:box-border msr:w-[272px] msr:max-w-[calc(100vw-16px)] msr:max-h-[calc(100vh-16px)] msr:overflow-y-auto msr:rounded-lg msr:border msr:border-ink-200 msr:bg-white msr:p-3 ${it() === "bottom" ? "msr:top-full msr:mt-2" : "msr:bottom-full msr:mb-2"}`,
 						t: {
-							left: `${it()}px`,
+							left: `${at()}px`,
 							right: "auto"
 						}
 					}), ({ e, t: n }, r) => {
@@ -13682,9 +13717,9 @@ function y_(e) {
 				a: a() ? "vertical" : "horizontal",
 				o: u() ? r() ?? void 0 : void 0,
 				i: u() ? s() : void 0,
-				n: Xe.tucked() ? "true" : void 0,
-				s: Xe.pressedOff() ? "true" : void 0,
-				h: `mesurer-toolbar-surface msr:pointer-events-auto msr:absolute msr:flex msr:items-stretch msr:rounded-[12px] msr:bg-[#fff] msr:outline msr:outline-transparent ${Ye() ? "msr:z-[110]" : "msr:z-[90]"}`,
+				n: Ze.tucked() ? "true" : void 0,
+				s: Ze.pressedOff() ? "true" : void 0,
+				h: `mesurer-toolbar-surface msr:pointer-events-auto msr:absolute msr:flex msr:items-stretch msr:rounded-[12px] msr:bg-[#fff] msr:outline msr:outline-transparent ${Xe() ? "msr:z-[110]" : "msr:z-[90]"}`,
 				r: {
 					left: `${t().x}px`,
 					top: `${t().y}px`,
@@ -14121,19 +14156,19 @@ var uv = 200, dv = (e) => {
 	let n = t.Event;
 	t.dispatchEvent(new n("focus"));
 }, _v = (e, t) => {
-	let n = /* @__PURE__ */ new Map(), r = (e) => {
+	let n = /* @__PURE__ */ new Map(), r = !!t?.querySelector("[data-mesurer-responsive-stage]"), i = (e) => {
 		!e || n.has(e) || (n.set(e, {
 			value: e.style.getPropertyValue("display"),
 			priority: e.style.getPropertyPriority("display")
 		}), e.style.setProperty("display", "none", "important"));
 	};
-	r(t);
+	i(r ? t?.querySelector("[data-mesurer-toolbar='true']") ?? null : t);
 	for (let t of e.querySelectorAll([
 		"[data-mesurer-layer]",
 		"[data-mesurer-extension-toolbar='true']",
 		"[data-mesurer-inspector-ui='true']",
 		".mesurer-color-picker"
-	].join(","))) r(t);
+	].join(","))) i(t);
 	return () => {
 		for (let [e, t] of n) t.value || t.priority ? e.style.setProperty("display", t.value, t.priority) : e.style.removeProperty("display");
 		n.clear();
@@ -15817,6 +15852,9 @@ function fy(e) {
 				ownerWindow: s,
 				onHostPick: (e) => {
 					A.pickColorAt(e);
+				},
+				get responsiveOpen() {
+					return r.responsiveOpen === !0;
 				}
 			}), null), Q(n, Y(y_, {
 				model: t,
@@ -20956,9 +20994,7 @@ function YC(e) {
 		D() && [
 			"arrange",
 			"edit",
-			"rulers",
-			"screenshot",
-			"recording"
+			"rulers"
 		].includes(e) && O(!1);
 	}, ee = async () => {
 		if (A("responsive")) {
@@ -20968,54 +21004,54 @@ function YC(e) {
 			}
 			j() && await z("responsive-open"), y?.current.toolMode !== "select" && y?.current.toolMode !== "text-inspector" && await b?.run("select"), b?.clearSelection(), O(!0);
 		}
-	}, H = () => O(!1), U = (e, t) => {
+	}, H = (e, t) => {
 		V(e.id), B(e, t);
-	}, W = U, te = (t, n) => {
+	}, U = H, W = (t, n) => {
 		n.disabled?.() || (V(t.id), Promise.resolve(n.run()).catch((r) => {
 			e.onPluginError?.(r, `${t.id}.${n.id}`);
 		}));
-	}, ne = async (t, n, r) => {
+	}, te = async (t, n, r) => {
 		try {
 			await n.set(r);
 		} catch (r) {
 			e.onPluginError?.(r, `${t}.${n.id}`);
 		}
-	}, re = (e, t, n) => {
-		ne(e, t, n);
-	}, ie = async (e) => {
+	}, ne = (e, t, n) => {
+		te(e, t, n);
+	}, re = async (e) => {
 		for (let t of n.settings()) {
 			if (e && !e.has(t.id)) continue;
 			let n = v.get(t.id);
 			if (n) for (let e of t.controls ?? []) {
 				let r = n.get(e.id);
-				r !== void 0 && await ne(t.id, e, r);
+				r !== void 0 && await te(t.id, e, r);
 			}
 		}
 	};
 	return Hn(() => {
-		let t = !0, o = 0, s = !1, c = Promise.resolve(), f = /* @__PURE__ */ new Set(), C = n, P = e, F = P.portalTarget ?? document.body, B = F.ownerDocument ?? document, V = B.defaultView ?? window, te = P.pageTarget ?? B.body, ne = () => {
+		let t = !0, o = 0, s = !1, c = Promise.resolve(), f = /* @__PURE__ */ new Set(), C = n, P = e, F = P.portalTarget ?? document.body, B = F.ownerDocument ?? document, V = B.defaultView ?? window, W = P.pageTarget ?? B.body, te = () => {
 			if (!y) throw Error("Mesurer renderer model is unavailable for runtime bridge setup.");
 			return y;
-		}, re = () => {
-			let e = ne().rendererRoot;
+		}, ne = () => {
+			let e = te().rendererRoot;
 			if (!e?.isConnected) throw Error("Mesurer renderer root is unavailable for runtime bridge setup.");
 			return e;
-		}, G = () => {
+		}, ie = () => {
 			if (!b) throw Error("Mesurer built-in controller is unavailable for runtime bridge setup.");
 			return b;
-		}, ae = () => ne().current.settings.theme, oe = (e) => {
-			let t = ae();
-			return e(t), ne().subscribe(() => {
-				let n = ae();
+		}, G = () => te().current.settings.theme, ae = (e) => {
+			let t = G();
+			return e(t), te().subscribe(() => {
+				let n = G();
 				n !== t && (t = n, e(n));
 			});
-		}, se = () => {
+		}, oe = () => {
 			let e = B.createElement("div");
 			e.dataset.mesurerInspectorUi = "true";
-			let t = oe((t) => {
+			let t = ae((t) => {
 				e.dataset.theme = t;
 			});
-			re().append(e);
+			ne().append(e);
 			let n = !1;
 			return {
 				element: e,
@@ -21023,32 +21059,32 @@ function YC(e) {
 					n || (n = !0, t(), e.remove());
 				}
 			};
-		}, ce = (e) => BC({
-			model: ne(),
+		}, se = (e) => BC({
+			model: te(),
 			ownerDocument: B,
 			ownerWindow: V,
 			uiRoot: F,
-			pageTarget: te,
+			pageTarget: W,
 			persistenceKey: e ? `${P.persistKey ?? "mesurer-plugin-settings"}:${e}:${V.location.origin}` : void 0
-		}), le = B.createElement("style");
-		le.dataset.mesurerPluginVisibility = "true", le.dataset.mesurerInspectorUi = "true", le.textContent = I(), F.append(le);
-		let ue = P.persistKey ? `${P.persistKey}:plugins` : HC, de = `${ue}:availability`, fe = /* @__PURE__ */ new Map();
+		}), ce = B.createElement("style");
+		ce.dataset.mesurerPluginVisibility = "true", ce.dataset.mesurerInspectorUi = "true", ce.textContent = I(), F.append(ce);
+		let le = P.persistKey ? `${P.persistKey}:plugins` : HC, ue = `${le}:availability`, de = /* @__PURE__ */ new Map();
 		try {
-			let e = V.localStorage.getItem(de);
+			let e = V.localStorage.getItem(ue);
 			if (e) {
 				let t = JSON.parse(e);
 				if (t?.version === 1 || t?.version === 2 || t?.version === 3) {
-					for (let [e, n] of Object.entries(t.enabled ?? {})) (t.version !== 2 || e !== "mesurer.codex") && fe.set(e, n);
+					for (let [e, n] of Object.entries(t.enabled ?? {})) (t.version !== 2 || e !== "mesurer.codex") && de.set(e, n);
 					for (let [e, n] of Object.entries(t.state ?? {})) g.set(e, n);
 				}
 			}
 		} catch (e) {
 			P.onPluginError?.(e, "plugin-registry-persistence");
 		}
-		let pe = () => {
+		let fe = () => {
 			let e = Object.fromEntries([...u.keys()].map((e) => [e, C.has(e)])), t = Object.fromEntries(g);
 			try {
-				V.localStorage.setItem(de, JSON.stringify({
+				V.localStorage.setItem(ue, JSON.stringify({
 					version: 3,
 					enabled: e,
 					state: t
@@ -21056,31 +21092,27 @@ function YC(e) {
 			} catch (e) {
 				P.onPluginError?.(e, "plugin-registry-persistence");
 			}
-		}, me = () => {
+		}, pe = () => {
 			o = 0;
 			try {
-				V.localStorage.setItem(ue, JSON.stringify(C.state.serialize("persist")));
+				V.localStorage.setItem(le, JSON.stringify(C.state.serialize("persist")));
 			} catch (e) {
 				P.onPluginError?.(e, "plugin-persistence");
 			}
+		}, me = () => {
+			V.clearTimeout(o), o = V.setTimeout(pe, 50);
 		}, he = () => {
-			V.clearTimeout(o), o = V.setTimeout(me, 50);
-		}, ge = () => {
-			o && (V.clearTimeout(o), me());
-		}, _e = () => ge();
-		V.addEventListener("pagehide", _e);
-		let ve = C.subscribe((e) => {
-			if (w((e) => e + 1), le.textContent = I(), D() && (j() || n.tools().some((e) => [
-				"screenshot",
-				"recording",
-				"rulers"
-			].includes(e.id) && (e.active?.() ?? !1))) && O(!1), (e.reason === "state" || e.reason === "history" || e.reason === "remove" || e.reason === "replace") && he(), T() && !s && (e.reason === "load" || e.reason === "remove" || e.reason === "replace") && pe(), e.reason === "remove" && e.pluginId?.startsWith("mesurer.")) {
+			o && (V.clearTimeout(o), pe());
+		}, ge = () => he();
+		V.addEventListener("pagehide", ge);
+		let _e = C.subscribe((e) => {
+			if (w((e) => e + 1), ce.textContent = I(), D() && (j() || n.tools().some((e) => e.id === "rulers" && (e.active?.() ?? !1))) && O(!1), (e.reason === "state" || e.reason === "history" || e.reason === "remove" || e.reason === "replace") && me(), T() && !s && (e.reason === "load" || e.reason === "remove" || e.reason === "replace") && fe(), e.reason === "remove" && e.pluginId?.startsWith("mesurer.")) {
 				let t = e.pluginId.slice(8);
 				GC(t) && t !== "responsive" && b?.deactivate(t), t === "responsive" && O(!1);
 			}
 		});
 		P.onPluginHost?.(C);
-		let ye = async (e, n = e.id) => {
+		let ve = async (e, n = e.id) => {
 			if (!t) return !1;
 			f.add(e);
 			try {
@@ -21091,77 +21123,77 @@ function YC(e) {
 				f.delete(e);
 			}
 			return t ? !0 : (C.plugin(e.id) === e && C.remove(e.id), !1);
-		}, be = (e) => ye(e), xe = (e) => {
+		}, ye = (e) => ve(e), be = (e) => {
 			for (let t of C.settings()) !e.has(t.id) || v.has(t.id) || v.set(t.id, new Map((t.controls ?? []).map((e) => [e.id, e.value()])));
-		}, Se = async (e) => {
+		}, xe = async (e) => {
 			if (!t || C.has(e.id)) return C.has(e.id);
 			let n = new Set(C.settings().map((e) => e.id)), r = new Set(C.describe().state.map((e) => e.id));
 			try {
 				let i = a(await e.create());
 				if (!t) return !1;
 				if (i.id !== e.id) throw Error(`Plugin registration ${e.id} created mismatched plugin ${i.id}.`);
-				if (!await ye(i, e.id)) return !1;
+				if (!await ve(i, e.id)) return !1;
 				let o = new Set(m.get(e.id) ?? e.settingsIds ?? []);
 				for (let e of C.settings()) n.has(e.id) || o.add(e.id);
 				m.set(e.id, o);
 				let s = new Set(h.get(e.id) ?? []);
 				for (let e of C.describe().state) r.has(e.id) || s.add(e.id);
-				h.set(e.id, s), xe(o);
+				h.set(e.id, s), be(o);
 				let c = g.get(e.id);
 				return c && (C.state.restore(c, "persist"), g.delete(e.id)), !0;
 			} catch (n) {
 				return t && P.onPluginError?.(n, e.id), !1;
 			}
-		}, Ce = (e) => {
+		}, Se = (e) => {
 			let t = h.get(e);
 			if (!t?.size) return;
 			let n = C.state.serialize("persist"), r = {};
 			for (let e of t) Object.prototype.hasOwnProperty.call(n, e) && (r[e] = n[e]);
 			Object.keys(r).length && g.set(e, r);
-		}, we = async (e, t = !0) => C.has(e) ? (await C.hook.emit(Oc, e), t ? Ce(e) : g.delete(e), C.remove(e)) : !1, Te = async (e, t, n = !0) => {
+		}, Ce = async (e, t = !0) => C.has(e) ? (await C.hook.emit(Oc, e), t ? Se(e) : g.delete(e), C.remove(e)) : !1, we = async (e, t, n = !0) => {
 			let r = u.get(e);
 			if (!(!r || _.has(e) || C.has(e) === t)) {
 				_.add(e), d.delete(e), w((e) => e + 1);
 				try {
-					t ? await Se(r) : await we(e, n), s || pe();
+					t ? await xe(r) : await Ce(e, n), s || fe();
 				} finally {
 					_.delete(e), w((e) => e + 1);
 				}
 			}
-		}, Ee = (e) => {
+		}, Te = (e) => {
 			let t = c.then(e, e);
 			return c = t.catch(() => void 0), t;
 		};
 		x = (e, t) => {
-			Ee(async () => {
-				await Te(e, t);
+			Te(async () => {
+				await we(e, t);
 			}).catch((t) => {
 				d.set(e, t instanceof Error ? t.message : String(t)), w((e) => e + 1), P.onPluginError?.(t, e);
 			});
-		}, S = () => Ee(async () => {
+		}, S = () => Te(async () => {
 			s = !0;
 			try {
-				await ie();
+				await re();
 				let e = [...u.values()].sort((e, t) => (e.order ?? 0) - (t.order ?? 0));
 				for (let t of e) {
 					let e = p.has(t.id);
-					!C.has(t.id) && (g.delete(t.id), !e || !await Se(t)) || (await ie(m.get(t.id)), e ? g.delete(t.id) : await we(t.id));
+					!C.has(t.id) && (g.delete(t.id), !e || !await xe(t)) || (await re(m.get(t.id)), e ? g.delete(t.id) : await Ce(t.id));
 				}
 			} finally {
 				s = !1;
 			}
-			o && V.clearTimeout(o), me(), pe();
+			o && V.clearTimeout(o), pe(), fe();
 		});
-		let De = (e) => {
+		let Ee = (e) => {
 			let t = y?.current;
 			return t ? e === "select" ? t.toolMode === "select" : e === "xray" ? t.xrayVisible : e === "color-picker" ? t.colorPickerActive : e === "rulers" ? t.rulersVisible : e === "text-inspector" ? t.toolMode === "text-inspector" : e === "guides" ? t.toolMode === "guides" : e === "settings" ? t.settingsOpen : e === "responsive" && D() : !1;
-		}, Oe = async (e) => {
+		}, De = async (e) => {
 			if (M(e)) return;
 			if (e === "responsive") {
 				ee();
 				return;
 			}
-			if (D() && ["rulers", "color-picker"].includes(e) && O(!1), e !== "settings" && e !== "rulers" && e !== "guides" && j() && (await z("select-mode-builtin"), e === "select" || De(e))) return;
+			if (D() && e === "rulers" && O(!1), e !== "settings" && e !== "rulers" && e !== "guides" && j() && (await z("select-mode-builtin"), e === "select" || Ee(e))) return;
 			let t = k(e);
 			if (t) {
 				await R(t, {
@@ -21171,16 +21203,16 @@ function YC(e) {
 				return;
 			}
 			if (!A(e)) return;
-			let n = G();
-			if (e === "guides" && j() && De("guides")) {
+			let n = ie();
+			if (e === "guides" && j() && Ee("guides")) {
 				await n.run("select");
 				return;
 			}
 			await n.run(e);
 		};
 		(async () => {
-			for (let e of l) await be(e);
-			if (t && (await be({
+			for (let e of l) await ye(e);
+			if (t && (await ye({
 				id: "mesurer.runtime-bridge",
 				version: i,
 				provides: ["runtime:solid"],
@@ -21189,32 +21221,31 @@ function YC(e) {
 						ownerDocument: B,
 						ownerWindow: V,
 						portalTarget: F,
-						pageTarget: te,
-						rendererRoot: re(),
-						currentToolMode: () => ne().current.toolMode,
+						pageTarget: W,
+						rendererRoot: ne(),
+						currentToolMode: () => te().current.toolMode,
 						currentToolbarMode: () => j() ? "edit" : "select",
-						closeResponsiveStage: H,
-						theme: ae,
-						subscribeTheme: oe,
-						createWorkspaceRuntime: ce,
-						createInspectorMount: se
+						theme: G,
+						subscribeTheme: ae,
+						createWorkspaceRuntime: se,
+						createInspectorMount: oe
 					};
 					e.service.provide("runtime:solid", t), yy(e), jb(e, t), jC(e, t);
-					for (let t of VC) e.command.register(KC(t), () => Oe(t));
+					for (let t of VC) e.command.register(KC(t), () => De(t));
 				}
 			}), t)) {
 				for (let e of [...u.values()].sort((e, t) => (e.order ?? 0) - (t.order ?? 0))) {
-					let n = fe.has(e.id) ? fe.get(e.id) === !0 : e.enabled !== !1;
+					let n = de.has(e.id) ? de.get(e.id) === !0 : e.enabled !== !1;
 					if (C.has(e.id)) {
-						n || await we(e.id);
+						n || await Ce(e.id);
 						continue;
 					}
-					if (n && await Se(e), !t) return;
+					if (n && await xe(e), !t) return;
 				}
 				v.clear();
 				for (let e of C.settings()) v.set(e.id, new Map((e.controls ?? []).map((e) => [e.id, e.value()])));
 				try {
-					let e = V.localStorage.getItem(ue);
+					let e = V.localStorage.getItem(le);
 					if (e) {
 						let t = JSON.parse(e);
 						C.state.restore(t, "persist");
@@ -21222,37 +21253,37 @@ function YC(e) {
 				} catch (e) {
 					P.onPluginError?.(e, "plugin-persistence");
 				}
-				t && (E(!0), le.textContent = I(), P.onPluginsReady?.(C));
+				t && (E(!0), ce.textContent = I(), P.onPluginsReady?.(C));
 			}
 		})();
-		let ke = (e) => {
+		let Oe = (e) => {
 			let t = e.key.toLowerCase(), n = e.metaKey || e.ctrlKey;
 			return n && !e.shiftKey && !e.altKey && t === "," ? "settings" : n || e.shiftKey || e.altKey ? null : t === "s" ? "select" : t === "a" ? "text-inspector" : t === "g" ? "guides" : t === "p" ? "color-picker" : t === "x" ? "xray" : t === "r" ? "rulers" : t === "b" ? "responsive" : null;
-		}, Ae = (e) => {
+		}, ke = (e) => {
 			if (zl(e, V) || y?.current.settings.shortcutsEnabled === !1) return;
 			let t = e.key.toLowerCase(), n = e.metaKey || e.ctrlKey;
 			if (!n && !e.shiftKey && !e.altKey && (t === "1" || t === "2")) {
 				let n = L();
 				if (t === "1" && n?.active?.()) {
-					e.preventDefault(), e.stopImmediatePropagation(), W(n, "toolbar-mode-shortcut");
+					e.preventDefault(), e.stopImmediatePropagation(), U(n, "toolbar-mode-shortcut");
 					return;
 				}
 				if (t === "2" && n && !n.disabled?.() && !n.active?.()) {
-					e.preventDefault(), e.stopImmediatePropagation(), W(n, "toolbar-mode-shortcut");
+					e.preventDefault(), e.stopImmediatePropagation(), U(n, "toolbar-mode-shortcut");
 					return;
 				}
 			}
-			let r = ke(e);
+			let r = Oe(e);
 			if (r === "responsive") {
 				if (!A("responsive")) {
 					e.preventDefault(), e.stopImmediatePropagation();
 					return;
 				}
-				e.preventDefault(), e.stopImmediatePropagation(), e.repeat || Oe("responsive").catch(() => void 0);
+				e.preventDefault(), e.stopImmediatePropagation(), e.repeat || De("responsive").catch(() => void 0);
 				return;
 			}
 			if (r && r !== "settings" && j()) {
-				e.preventDefault(), e.stopImmediatePropagation(), Oe(r).catch(() => void 0);
+				e.preventDefault(), e.stopImmediatePropagation(), De(r).catch(() => void 0);
 				return;
 			}
 			if (r && M(r)) {
@@ -21261,7 +21292,7 @@ function YC(e) {
 			}
 			let i = r ? k(r) : void 0;
 			if (r && i) {
-				e.preventDefault(), e.stopImmediatePropagation(), W(i, {
+				e.preventDefault(), e.stopImmediatePropagation(), U(i, {
 					source: "builtin-shortcut",
 					builtin: r
 				});
@@ -21277,7 +21308,7 @@ function YC(e) {
 			}
 			let a = N().find((t) => t.shortcut && !t.disabled?.() && qC(e, t.shortcut));
 			if (a) {
-				e.preventDefault(), e.stopImmediatePropagation(), U(a);
+				e.preventDefault(), e.stopImmediatePropagation(), H(a);
 				return;
 			}
 			if (n && t === "z" && (e.shiftKey ? C.redo() : C.undo())) {
@@ -21286,10 +21317,10 @@ function YC(e) {
 			}
 			(n && t === "," && !A("settings") || t === "s" && !A("select") || t === "a" && !A("text-inspector") || t === "g" && !A("guides") || (t === "h" || t === "v") && !A("guides") || t === "p" && !A("color-picker") || t === "x" && !A("xray") || t === "r" && !A("rulers") || e.key === "Alt" && !A("distance")) && (e.preventDefault(), e.stopImmediatePropagation());
 		};
-		return V.addEventListener("keydown", Ae, !0), () => {
+		return V.addEventListener("keydown", ke, !0), () => {
 			t = !1;
 			for (let e of f) C.cancelLoad(e);
-			f.clear(), ge(), V.removeEventListener("pagehide", _e), V.removeEventListener("keydown", Ae, !0), ve(), le.remove(), y = null, b = null, x = () => void 0, S = async () => void 0, r && C.dispose();
+			f.clear(), he(), V.removeEventListener("pagehide", ge), V.removeEventListener("keydown", ke, !0), _e(), ce.remove(), y = null, b = null, x = () => void 0, S = async () => void 0, r && C.dispose();
 		};
 	}), Y(cg, {
 		runtime: {
@@ -21297,7 +21328,7 @@ function YC(e) {
 			generalSections: F,
 			version: () => i,
 			setEnabled: (e, t) => x(e, t),
-			update: re,
+			update: ne,
 			reset: async () => {
 				await S();
 			}
@@ -21313,9 +21344,9 @@ function YC(e) {
 							return N();
 						},
 						onPluginTool: (e) => {
-							U(e);
+							H(e);
 						},
-						onPluginToolMenuItem: te,
+						onPluginToolMenuItem: W,
 						isBuiltinActionDisabled: M,
 						onBuiltinController: (e) => {
 							b = e;
@@ -24702,7 +24733,7 @@ var Rw = "mesurer.layout-guides", zw = "layout-guides:v1", Bw = "mesurer.layout-
 				error: null
 			}));
 		}, U = async (e) => {
-			if (n.closeResponsiveStage?.(), h.status === "recording") {
+			if (h.status === "recording") {
 				await B();
 				return;
 			}
@@ -25373,7 +25404,7 @@ var Rw = "mesurer.layout-guides", zw = "layout-guides:v1", Bw = "mesurer.layout-
 				d.style.visibility = "", u(), a.finishCapture(), x = !1;
 			}
 		}, R = async () => {
-			if (n.closeResponsiveStage?.(), T().toolEnabled) {
+			if (T().toolEnabled) {
 				if (w()) {
 					I();
 					return;
@@ -25895,7 +25926,7 @@ function UD(e) {
 }
 //#endregion
 //#region src/version.ts
-var WD = "0.2.3-beta.10", GD = by, KD = xy, qD = () => ({
+var WD = "0.2.3-beta.11", GD = by, KD = xy, qD = () => ({
 	...gb(),
 	version: WD
 }), JD = KD, YD = (e, t) => e.left <= t.left + t.width && e.left + e.width >= t.left && e.top <= t.top + t.height && e.top + e.height >= t.top, XD = (e) => {