@rohal12/spindle 0.59.7 → 0.59.9

package/dist/pkg/headless.js

@@ -10096,18 +10096,18 @@ function historyQueries(visitCounts, renderCounts) {
 	};
 }
 var cachedFns = null;
-var cachedVisitCounts = null;
-var cachedRenderCounts = null;
+/**
+* The functions compiled code calls. The history queries read the counters
+* when called, not when the functions were built: mutation code that
+* navigates (`Story.goto()`) goes on with the counters of the new state,
+* as the Story API does.
+*/
 function buildExpressionFns() {
-	const { visitCounts, renderCounts } = useStoryStore.getState();
-	if (cachedFns && cachedVisitCounts === visitCounts && cachedRenderCounts === renderCounts) return cachedFns;
-	cachedFns = {
-		...historyQueries(() => visitCounts, () => renderCounts),
+	cachedFns ??= {
+		...historyQueries(() => useStoryStore.getState().visitCounts, () => useStoryStore.getState().renderCounts),
 		random,
 		randomInt
 	};
-	cachedVisitCounts = visitCounts;
-	cachedRenderCounts = renderCounts;
 	return cachedFns;
 }
 /**
@@ -11143,7 +11143,7 @@ function useRunOnce(macro, rawArgs, effect) {
 			effect();
 		} catch (error) {
 			failure.current = { error };
-			logMacroError(`${macro} ${rawArgs}`, error, location);
+			logMacroError(`${macro} ${rawArgs}`.trim(), error, location);
 		}
 	}
 	if (!failure.current) return null;
@@ -12548,6 +12548,7 @@ var CLASS_PREFIX = "c:";
 var ERROR_PREFIX = "E:";
 var SYMBOL_TAG = "S";
 var KEYS_TAG = "K";
+var REGEXP_TAG = "R";
 var BUILTIN_ERRORS = new Map([
 	Error,
 	EvalError,
@@ -12609,6 +12610,11 @@ function reducers() {
 		const key = Symbol.keyFor(v);
 		return key !== void 0 && [key];
 	};
+	out[REGEXP_TAG] = (v) => v instanceof RegExp && v.lastIndex !== 0 && [
+		v.source,
+		v.flags,
+		v.lastIndex
+	];
 	out[KEYS_TAG] = (v) => {
 		if (!isObject(v) || Object.getPrototypeOf(v) !== Object.prototype) return false;
 		const keys = Object.keys(v);
@@ -12682,6 +12688,12 @@ function reviverFor(key) {
 		return Symbol.for(data[0]);
 	};
 	if (key === KEYS_TAG) return reviveKeyed;
+	if (key === REGEXP_TAG) return (data) => {
+		if (!Array.isArray(data) || typeof data[0] !== "string" || typeof data[1] !== "string" || !Number.isSafeInteger(data[2])) throw new TypeError("spindle: Malformed regular expression");
+		const re = new RegExp(data[0], data[1]);
+		re.lastIndex = data[2];
+		return re;
+	};
 	if (key.startsWith(CLASS_PREFIX)) return reviveClass(key.slice(2));
 	if (key.startsWith(ERROR_PREFIX)) return reviveError(key.slice(2));
 }
@@ -12793,6 +12805,7 @@ function isOptionalPRNGSnapshot(value) {
 	return isRecord$1(value) && typeof value.seed === "string" && typeof value.pull === "number" && Number.isInteger(value.pull) && value.pull >= 0;
 }
 var isMoment = (value) => isRecord$1(value) && typeof value.passage === "string" && isRecord$1(value.variables) && typeof value.timestamp === "number" && isOptionalPRNGSnapshot(value.prng);
+var isWatchers = (value) => value === void 0 || Array.isArray(value) && Array.from(value).every((w) => isRecord$1(w) && typeof w.condition === "string" && isRecord$1(w.options));
 var isCountsMap = (value) => value === void 0 || value instanceof Map && [...value.keys()].every((k) => typeof k === "string");
 /**
 * Whether a deserialized payload is well formed: every history moment is,
@@ -12806,7 +12819,7 @@ function isPayload(value) {
 	if (!Array.isArray(history) || history.length === 0) return false;
 	if (!Array.from(history).every(isMoment)) return false;
 	if (typeof historyIndex !== "number" || !Number.isInteger(historyIndex) || historyIndex < 0 || historyIndex >= history.length || history[historyIndex].passage !== value.passage) return false;
-	return isCountsMap(value.visitCounts) && isCountsMap(value.renderCounts) && isOptionalPRNGSnapshot(value.prng);
+	return isCountsMap(value.visitCounts) && isCountsMap(value.renderCounts) && isOptionalPRNGSnapshot(value.prng) && isWatchers(value.watchers);
 }
 var mapToCounts = (counts) => counts instanceof Map ? createCounts(Object.fromEntries(counts)) : void 0;
 /**
@@ -13176,24 +13189,28 @@ function createIDBBackend() {
 }
 var _backend = null;
 async function detectBackend() {
-	if (typeof indexedDB !== "undefined") try {
-		await new Promise((resolve, reject) => {
-			const req = indexedDB.open("__spindle_probe__", 1);
-			req.onsuccess = () => {
-				req.result.close();
-				indexedDB.deleteDatabase("__spindle_probe__");
-				resolve();
-			};
-			req.onerror = () => reject(req.error);
-		});
-		return createIDBBackend();
+	try {
+		if (typeof indexedDB !== "undefined") {
+			await new Promise((resolve, reject) => {
+				const req = indexedDB.open("__spindle_probe__", 1);
+				req.onsuccess = () => {
+					req.result.close();
+					indexedDB.deleteDatabase("__spindle_probe__");
+					resolve();
+				};
+				req.onerror = () => reject(req.error);
+			});
+			return createIDBBackend();
+		}
 	} catch {}
-	if (typeof localStorage !== "undefined") try {
-		const probeKey = "__spindle_probe__";
-		localStorage.setItem(probeKey, "1");
-		const val = localStorage.getItem(probeKey);
-		localStorage.removeItem(probeKey);
-		if (val === "1") return createLocalStorageBackend();
+	try {
+		if (typeof localStorage !== "undefined") {
+			const probeKey = "__spindle_probe__";
+			localStorage.setItem(probeKey, "1");
+			const val = localStorage.getItem(probeKey);
+			localStorage.removeItem(probeKey);
+			if (val === "1") return createLocalStorageBackend();
+		}
 	} catch {}
 	return createMemoryBackend();
 }
@@ -13402,7 +13419,11 @@ function deepClone(value, options = {}) {
 	}
 	function cloneBuiltin(val) {
 		if (val instanceof Date) return keep(val, new Date(val.getTime()));
-		if (val instanceof RegExp) return keep(val, new RegExp(val.source, val.flags));
+		if (val instanceof RegExp) {
+			const copy = new RegExp(val.source, val.flags);
+			copy.lastIndex = val.lastIndex;
+			return keep(val, copy);
+		}
 		if (val instanceof ArrayBuffer) return keep(val, val.slice(0));
 		if (ArrayBuffer.isView(val)) {
 			const buffer = clone(val.buffer);
@@ -13585,7 +13606,7 @@ function equalBytes(a, b) {
 /** Equality of the content of atomic built-ins (see isAtomic) but Map/Set. */
 function equalBuiltin(a, b, assumed) {
 	if (a instanceof Date) return Object.is(a.getTime(), b.getTime());
-	if (a instanceof RegExp) return String(a) === String(b);
+	if (a instanceof RegExp) return String(a) === String(b) && a.lastIndex === b.lastIndex;
 	if (ArrayBuffer.isView(a)) {
 		const v = b;
 		return a.byteOffset === v.byteOffset && a.byteLength === v.byteLength && equal(a.buffer, v.buffer, assumed);
@@ -14144,15 +14165,17 @@ var readingSlot = (read) => queued(async (ifid, slot) => read(await slotRecord(i
 var startNewPlaythrough = queued(startNewPlaythroughNow);
 async function startNewPlaythroughNow(ifid, id = randomUUID()) {
 	const backend = await getBackend();
-	const num = await nextPlaythroughNumber(ifid);
-	const record = {
-		id,
-		ifid,
-		createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-		label: `Playthrough ${num}`
-	};
-	await backend.putPlaythrough(record);
-	await backend.setMeta(playthroughCountKey(ifid), num);
+	await withTabLock(`spindle-playthrough-count:${ifid}`, async () => {
+		const num = await nextPlaythroughNumber(ifid);
+		const record = {
+			id,
+			ifid,
+			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+			label: `Playthrough ${num}`
+		};
+		await backend.putPlaythrough(record);
+		await backend.setMeta(playthroughCountKey(ifid), num);
+	});
 	await backend.setMeta(currentPlaythroughKey(ifid), id);
 	return id;
 }
@@ -14405,12 +14428,41 @@ function slotMetaKey(ifid, slot) {
 	return isNamedSlot(slot) ? `${SLOT_KEY_PREFIX}${slot}.${ifid}` : `${AUTOSAVE_KEY_PREFIX}${ifid}`;
 }
 var slotIndexKey = (ifid) => `${SLOT_INDEX_KEY_PREFIX}${ifid}`;
-/** Read-modify-write the per-story slot index. */
+/**
+* Run `op` holding the browser's lock `name`, so other tabs of the story
+* (the operation queue only orders this document's operations) wait for it.
+* Runs `op` without a lock where the browser offers none (or refuses it, as
+* in a sandboxed frame, which has no other tabs sharing its storage).
+*/
+async function withTabLock(name, op) {
+	let locks;
+	try {
+		locks = navigator.locks;
+	} catch {}
+	if (!locks) return op();
+	let started = false;
+	try {
+		return await locks.request(name, () => {
+			started = true;
+			return op();
+		});
+	} catch (err) {
+		if (started) throw err;
+		return op();
+	}
+}
+/**
+* Read-modify-write the per-story slot index. Under a lock shared by the
+* story's tabs: two tabs adding a slot at once would both read the old index
+* and the later write would drop the other's slot.
+*/
 async function updateSlotIndex(ifid, update) {
 	const backend = await getBackend();
-	const existing = await backend.getMeta(slotIndexKey(ifid)) ?? [];
-	const updated = update(existing);
-	if (updated !== existing) await backend.setMeta(slotIndexKey(ifid), updated);
+	await withTabLock(`spindle-slot-index:${ifid}`, async () => {
+		const existing = await backend.getMeta(slotIndexKey(ifid)) ?? [];
+		const updated = update(existing);
+		if (updated !== existing) await backend.setMeta(slotIndexKey(ifid), updated);
+	});
 }
 /** Every slot: the default one (undefined), then those in the slot index. */
 async function allSlots(ifid) {
@@ -14463,7 +14515,7 @@ function toSaveInfo(record, slot) {
 * (settled by operations issued before this call), so the save takes its
 * place in the order of operations when it is called.
 */
-function quickSave(ifid, playthroughId, payload, slot, custom) {
+function quickSave$1(ifid, playthroughId, payload, slot, custom) {
 	return inOrder(async () => {
 		const ptId = await playthroughId;
 		const existingId = await slotSaveId(ifid, slot);
@@ -14549,12 +14601,18 @@ var SESSION_KEY_PREFIX = "spindle.session.";
 * encodePayload). Throws, like a save, when the state holds a value a save
 * cannot (a function, an instance of an unregistered class, a unique
 * symbol); the session then keeps its previous copy.
+*
+* A storage that is unavailable or full is returned, not thrown: the session
+* keeps its previous copy then too, but the story can go on, so the caller
+* decides how to tell the player.
 */
 function saveSession(ifid, payload) {
 	const text = JSON.stringify(encodePayload(payload));
 	try {
 		sessionStorage.setItem(`${SESSION_KEY_PREFIX}${ifid}`, text);
-	} catch {}
+	} catch (error) {
+		return { error };
+	}
 }
 /**
 * The live payload of the stored session, if there is one that loads. A
@@ -14671,14 +14729,14 @@ var clearAllData = queued(clearAllDataNow);
 async function clearAllDataNow() {
 	await (await getBackend()).destroy();
 	resetBackend();
-	if (typeof sessionStorage !== "undefined") {
+	try {
 		const toRemove = [];
 		for (let i = 0; i < sessionStorage.length; i++) {
 			const key = sessionStorage.key(i);
 			if (key?.startsWith("spindle.session.")) toRemove.push(key);
 		}
 		for (const key of toRemove) sessionStorage.removeItem(key);
-	}
+	} catch {}
 }
 /**
 * Delete a playthrough with its saves, emptying the slots that held them.
@@ -14751,6 +14809,11 @@ function executeStoryInit() {
 */
 function initializeStory(session) {
 	executeStoryInit();
+	const missing = session ? missingPassage(useStoryStore.getState().storyData, session) : void 0;
+	if (missing !== void 0) {
+		console.warn(`spindle: discarding the saved session: the story no longer has the passage "${missing}"`);
+		session = void 0;
+	}
 	if (session) useStoryStore.getState().loadFromPayload(session);
 	emit("storyinit");
 	if (!session) recordStoryInitState();
@@ -15244,6 +15307,27 @@ function addMacroTrigger(condition, options) {
 	if (triggers.some((t) => t.macroKey === macroKey)) return;
 	registerTrigger(condition, options, macroKey);
 }
+/**
+* The {watch} macro watchers now registered, for a save or the session:
+* watchers outlive the passage that declared them, so a game restored
+* where it stopped needs the ones its earlier passages registered (and
+* not the ones {unwatch} or `once` removed).
+*/
+function savedMacroWatchers() {
+	return triggers.filter((t) => t.macroKey !== void 0 && t.options).map((t) => ({
+		condition: t.condition,
+		options: { ...t.options }
+	}));
+}
+/**
+* Make the {watch} macro watchers those of a loaded game: the ones of
+* `watchers` replace the registered ones (watchers added by Story.watch
+* code stay). The passage shown mounts its own {watch} macros again.
+*/
+function restoreMacroWatchers(watchers) {
+	triggers = triggers.filter((t) => t.macroKey === void 0);
+	for (const { condition, options } of watchers) addMacroTrigger(condition, options);
+}
 function removeTrigger(name) {
 	triggers = triggers.filter((t) => t.name !== name);
 }
@@ -15584,7 +15668,7 @@ var sessionMoments = [];
 */
 function persistSession(get) {
 	const { storyData, currentPassage, variables, history, historyIndex, visitCounts, renderCounts } = get();
-	if (!storyData) return;
+	if (!storyData) return void 0;
 	if (sessionMoments.length > history.length) sessionMoments.length = history.length;
 	if (sessionMoments.length < history.length) if (history.length - sessionMoments.length === 1) {
 		const i = history.length - 1;
@@ -15592,14 +15676,15 @@ function persistSession(get) {
 	} else forEachRecorded(history.length, (vars, i) => {
 		if (i >= sessionMoments.length) sessionMoments[i] = savedMoment(history[i], vars);
 	});
-	saveSession(storyData.ifid, {
+	return saveSession(storyData.ifid, {
 		passage: currentPassage,
 		variables,
 		history: sessionMoments,
 		historyIndex,
 		visitCounts,
 		renderCounts,
-		prng: snapshotPRNG()
+		prng: snapshotPRNG(),
+		watchers: savedMacroWatchers()
 	});
 }
 /** What the page shows before a session write error (see RuntimeErrors). */
@@ -15618,7 +15703,8 @@ var NAVIGATION_ERROR_CONTEXT = "The story could not go to another passage:";
 function persistSessionThen(get, after) {
 	let failure;
 	try {
-		persistSession(get);
+		const storageFailure = persistSession(get);
+		if (storageFailure) showRuntimeError(SESSION_ERROR_CONTEXT, storageFailure.error);
 	} catch (error) {
 		failure = { error };
 		showRuntimeError(SESSION_ERROR_CONTEXT, error);
@@ -15983,6 +16069,15 @@ function restorePRNGFrom(prng) {
 function restorePRNGFromMoment(moment) {
 	if (moment) restorePRNGFrom(moment.prng);
 }
+/**
+* The first passage of `payload` (its current passage, then its history)
+* that `storyData` does not have, as when the story was updated since the
+* save; undefined if the story has them all (or is not loaded).
+*/
+function missingPassage(storyData, payload) {
+	if (!storyData) return void 0;
+	return [payload.passage, ...payload.history.map((m) => m.passage)].find((name) => !storyData.passages.has(name));
+}
 var NAMESPACE_KEYS = [
 	"variables",
 	"temporary",
@@ -16312,7 +16407,7 @@ var useStoryStore = create()(storyStore((set, get) => ({
 			set((state) => {
 				state.saveError = null;
 			});
-			await quickSave(storyData.ifid, playthrough, payload, slot, custom);
+			await quickSave$1(storyData.ifid, playthrough, payload, slot, custom);
 			recordKnownSave(set, slot, true);
 		}), "spindle: failed to save", (err) => set((state) => {
 			state.saveError = errorMessage(err, "Failed to save");
@@ -16410,7 +16505,8 @@ var useStoryStore = create()(storyStore((set, get) => ({
 			historyIndex,
 			visitCounts: { ...visitCounts },
 			renderCounts: { ...renderCounts },
-			prng: snapshotPRNG()
+			prng: snapshotPRNG(),
+			watchers: savedMacroWatchers()
 		};
 	},
 	beginSave: () => {
@@ -16422,12 +16518,15 @@ var useStoryStore = create()(storyStore((set, get) => ({
 		};
 	},
 	loadFromPayload: (payload, slot, playthroughId) => {
-		const replacement = slotLoadApplying ?? ++stateReplacementsIssued;
+		const applying = slotLoadApplying;
 		slotLoadApplying = null;
+		const replacement = applying ?? ++stateReplacementsIssued;
 		if (payload.history.length === 0) {
 			console.warn("loadFromPayload: rejecting payload with empty history");
 			return;
 		}
+		const missing = missingPassage(get().storyData, payload);
+		if (missing !== void 0) throw new Error(`The save refers to the passage "${missing}", which this version of the story does not have`);
 		latestStateApplied = replacement;
 		emit("beforeload", slot);
 		const ifid = get().storyData?.ifid;
@@ -16453,6 +16552,7 @@ var useStoryStore = create()(storyStore((set, get) => ({
 			state.temporary = createNamespace();
 			state.transient = createNamespace(deepClone(get().transientDefaults));
 		});
+		if (payload.watchers) restoreMacroWatchers(payload.watchers);
 		reinitTriggerState();
 		lastNavigationVars = reconstructVarsAt(get().historyIndex);
 		restorePRNGFrom(entry?.prng !== void 0 ? entry.prng : payload.prng);
@@ -16525,8 +16625,19 @@ var FOCUSABLE = [
 	"[contenteditable=\"true\"]",
 	"[tabindex]:not([tabindex=\"-1\"])"
 ].join(",");
+/**
+* Whether CSS leaves `el` in the tab sequence: not `visibility: hidden`
+* (inherited, so the computed value covers ancestors) and not inside a
+* `display: none` element.
+*/
+function isRendered(el) {
+	const { visibility } = getComputedStyle(el);
+	if (visibility === "hidden" || visibility === "collapse") return false;
+	for (let e = el; e; e = e.parentElement) if (getComputedStyle(e).display === "none") return false;
+	return true;
+}
 function focusables(root) {
-	return Array.from(root.querySelectorAll(FOCUSABLE)).filter((el) => !el.hidden && !el.closest("[hidden], [inert]"));
+	return Array.from(root.querySelectorAll(FOCUSABLE)).filter((el) => !el.hidden && !el.closest("[hidden], [inert]") && isRendered(el));
 }
 /** Open modal dialogs, innermost last. Only the topmost handles keys. */
 var openModals = [];
@@ -16624,7 +16735,7 @@ function PassageDialog({ passageName, fallbackMarkup, panelClass, onClose, dismi
 	}, []);
 	const handleBackdrop = (e) => {
 		if (!dismissible) return;
-		if (e.target.classList.contains("dialog-overlay")) stableOnClose();
+		if (e.target === e.currentTarget) stableOnClose();
 	};
 	const cls = panelClass ? `dialog-panel ${panelClass}` : "dialog-panel";
 	return /* @__PURE__ */ jsx(DialogCloseContext.Provider, {
@@ -16639,6 +16750,7 @@ function PassageDialog({ passageName, fallbackMarkup, panelClass, onClose, dismi
 				"aria-modal": "true",
 				tabIndex: -1,
 				children: [showCloseButton && /* @__PURE__ */ jsx("button", {
+					type: "button",
 					class: "dialog-close",
 					"aria-label": "Close",
 					onClick: stableOnClose,
@@ -16742,18 +16854,39 @@ function RuntimeErrors() {
 	});
 }
 //#endregion
+//#region src/quick-actions.ts
+/**
+* QuickSave and QuickLoad as the built-in buttons and hotkeys perform them:
+* a failure is shown on the page (the Story API's save() and load() only
+* reject, for the code that awaits them).
+*/
+async function quickSave() {
+	try {
+		await useStoryStore.getState().save();
+	} catch (error) {
+		showRuntimeError("The game could not be saved:", error);
+	}
+}
+async function quickLoad() {
+	try {
+		await useStoryStore.getState().load();
+	} catch (error) {
+		showRuntimeError("The saved game could not be loaded:", error);
+	}
+}
+//#endregion
 //#region src/components/App.tsx
 function App() {
 	const { storyData, currentPassage, nobr } = useStoryFields("storyData", "currentPassage", "nobr");
 	useEffect(() => {
 		const onKeyDown = (e) => {
-			const { quickSaveKey, quickLoadKey, save, load } = useStoryStore.getState();
+			const { quickSaveKey, quickLoadKey } = useStoryStore.getState();
 			if (quickSaveKey !== null && e.key === quickSaveKey) {
 				e.preventDefault();
-				save();
+				quickSave();
 			} else if (quickLoadKey !== null && e.key === quickLoadKey) {
 				e.preventDefault();
-				load();
+				quickLoad();
 			}
 		};
 		document.addEventListener("keydown", onKeyDown);
@@ -16931,7 +17064,9 @@ function storageKey() {
 	return `spindle.${useStoryStore.getState().storyData?.ifid || "unknown"}.settings`;
 }
 function persist() {
-	localStorage.setItem(storageKey(), JSON.stringify(values));
+	try {
+		localStorage.setItem(storageKey(), JSON.stringify(values));
+	} catch {}
 }
 function loadFromStorage() {
 	if (storageLoaded) return;
@@ -18215,7 +18350,13 @@ function widgetDef({ name = "", parameters = "" }) {
 function parseWidgetDef(rawArgs) {
 	return widgetDef(parseMacroArgs(rawArgs, WIDGET_PARAMETERS));
 }
-var BLOCK_WIDGET = /\{widget\s+["']?(\w+)["']?[^}]*\}([\s\S]*?)\{\/widget\}/g;
+/**
+* A definition: its arguments (read like a {widget} macro's, see
+* parseWidgetDef) and its body. Macro names are not case-sensitive.
+*/
+var WIDGET_DEFINITION = /\{widget\s+([^}]*)\}([\s\S]*?)\{\/widget\}/gi;
+/** `{@children}`, also with selectors such as `{.highlight @children}`. */
+var CHILDREN_PLACEHOLDER = /\{[^{}]*@children\s*\}/;
 /**
 * The names of the block widgets (those whose body renders `{@children}`)
 * that StoryInit and the passages tagged `widget` define. They must be
@@ -18226,7 +18367,12 @@ function blockWidgetNames(passages) {
 	const names = [];
 	for (const passage of passages) {
 		if (passage.name !== "StoryInit" && !passage.tags?.includes("widget")) continue;
-		for (const match of passage.content.matchAll(BLOCK_WIDGET)) if (/\{@children\}/.test(match[2])) names.push(match[1]);
+		for (const match of passage.content.matchAll(WIDGET_DEFINITION)) {
+			if (!CHILDREN_PLACEHOLDER.test(match[2])) continue;
+			try {
+				names.push(parseWidgetDef(match[1]).name);
+			} catch {}
+		}
 	}
 	return names;
 }
@@ -19030,7 +19176,7 @@ function keyOf(val, ancestors) {
 	const depth = ancestors.indexOf(obj);
 	if (depth !== -1) return `<cycle ${ancestors.length - depth}>`;
 	if (val instanceof Date) return `Date(${val.getTime()})`;
-	if (val instanceof RegExp) return `RegExp(${String(val)})`;
+	if (val instanceof RegExp) return `RegExp(${String(val)}@${val.lastIndex})`;
 	ancestors.push(obj);
 	try {
 		if (Array.isArray(val)) return `[${Array.from(val, (v) => keyOf(v, ancestors)).join(",")}]`;
@@ -19145,15 +19291,7 @@ defineMacro({
 	block: true,
 	render({ children = [] }, ctx) {
 		const code = ctx.collectText(children);
-		ctx.hooks.useLayoutEffect(() => {
-			const location = ctx.sourceLocation();
-			try {
-				ctx.mutate(code);
-			} catch (err) {
-				logMacroError("do", err, location);
-			}
-		}, []);
-		return null;
+		return useRunOnce("do", "", () => ctx.mutate(code));
 	}
 });
 //#endregion
@@ -19220,7 +19358,10 @@ defineMacro({
 * Return a function that runs a macro body once, outside the passage tree:
 * it renders `children` into a detached node, so the body's macros ({set},
 * {if}, {goto}, ...) fire their side effects through the normal Preact
-* pipeline, then unmounts it. Used by {button} and {link} on click.
+* pipeline. Used by {button} and {link} on click. The body stays mounted
+* until the owning macro unmounts (its passage changes, say), so work it
+* starts in an effect, such as the timer of a {timed} or {repeat}, can
+* finish; the passage leaving cancels it.
 *
 * A detached render starts with no contexts, so the hook captures the ones
 * the owning macro sees and provides them again: the locals scope (read
@@ -19241,6 +19382,10 @@ function useDetachedBody() {
 	const widgetChildren = useContext(WidgetChildrenContext);
 	const repeat = useContext(RepeatContext);
 	const closeDialog = useContext(DialogCloseContext);
+	const mounted = useRef([]);
+	useEffect(() => () => {
+		for (const container of mounted.current.splice(0)) render(null, container);
+	}, []);
 	const run = (children) => {
 		const locals = liveLocalsView(updater.getValues);
 		const container = document.createElement("div");
@@ -19270,7 +19415,7 @@ function useDetachedBody() {
 				})
 			})
 		}), container);
-		render(null, container);
+		mounted.current.push(container);
 	};
 	return (children) => runWithCommittedMutations(() => run(children));
 }
@@ -19298,6 +19443,7 @@ defineMacro({
 			perform: handleClick
 		});
 		return /* @__PURE__ */ jsx("button", {
+			type: "button",
 			id: ctx.id,
 			class: ctx.cls,
 			onClick: handleClick,
@@ -19454,15 +19600,52 @@ defineMacro({
 });
 //#endregion
 //#region src/components/macros/Type.tsx
+/**
+* The clip-path that shows the first `count` characters of `root`'s text in
+* reading order: the boxes the browser laid out for them, each wrapped line
+* as far as its last revealed character, as one path in the coordinates of
+* `inner`'s box. Undefined where there is no layout to measure.
+*/
+function revealedPath(root, inner, count) {
+	const range = document.createRange();
+	if (!range.getClientRects) return void 0;
+	const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+	let left = count;
+	let end;
+	for (let n = walker.nextNode(); n && left > 0; n = walker.nextNode()) {
+		const length = n.nodeValue?.length ?? 0;
+		end = {
+			node: n,
+			offset: Math.min(left, length)
+		};
+		left -= length;
+	}
+	if (!end) return "inset(0 100% 0 0)";
+	range.setStart(root, 0);
+	range.setEnd(end.node, end.offset);
+	const rects = range.getClientRects();
+	if (rects.length === 0) return void 0;
+	const origin = inner.getBoundingClientRect();
+	let path = "";
+	for (const r of Array.from(rects)) {
+		if (r.width === 0 && r.height === 0) continue;
+		const x = (r.left - origin.left).toFixed(2);
+		const y = (r.top - origin.top).toFixed(2);
+		path += `M${x} ${y}h${r.width.toFixed(2)}v${r.height.toFixed(2)}h-${r.width.toFixed(2)}z`;
+	}
+	return path ? `path("${path}")` : void 0;
+}
 defineMacro({
 	name: "type",
 	block: true,
 	interpolate: true,
 	parameters: [DELAY_PARAMETER],
 	render({ children = [] }, ctx) {
-		const { useState, useEffect, useRef } = ctx.hooks;
+		const { useState, useEffect, useLayoutEffect, useRef } = ctx.hooks;
 		const speed = ctx.args.delay ?? 0;
 		const containerRef = useRef(null);
+		const innerRef = useRef(null);
+		const [clip, setClip] = useState();
 		const [totalChars, setTotalChars] = useState(0);
 		const [visibleChars, setVisibleChars] = useState(0);
 		const visibleCharsRef = useRef(0);
@@ -19485,6 +19668,22 @@ defineMacro({
 			return () => clearInterval(timer);
 		}, [totalChars, speed]);
 		const done = visibleChars >= totalChars && totalChars > 0;
+		useLayoutEffect(() => {
+			const root = containerRef.current;
+			const inner = innerRef.current;
+			if (!root || !inner || totalChars === 0 || done) {
+				setClip(void 0);
+				return;
+			}
+			const measure = () => setClip(revealedPath(root, inner, visibleChars));
+			measure();
+			window.addEventListener("resize", measure);
+			return () => window.removeEventListener("resize", measure);
+		}, [
+			visibleChars,
+			totalChars,
+			done
+		]);
 		const cls = [
 			"macro-type",
 			done ? "macro-type-done" : "",
@@ -19494,13 +19693,13 @@ defineMacro({
 			id: ctx.id,
 			class: cls,
 			ref: containerRef,
-			style: { clipPath: totalChars > 0 && !done ? void 0 : void 0 },
 			children: [/* @__PURE__ */ jsx("span", {
+				ref: innerRef,
 				class: "macro-type-inner",
 				style: {
 					display: "inline",
 					visibility: totalChars === 0 ? "hidden" : "visible",
-					clipPath: totalChars > 0 && !done ? `inset(0 ${(totalChars - visibleChars) / totalChars * 100}% 0 0)` : void 0
+					clipPath: clip
 				},
 				children: ctx.renderInlineNodes(children)
 			}), !done && totalChars > 0 && /* @__PURE__ */ jsx("span", { class: "macro-type-cursor" })]
@@ -19548,6 +19747,7 @@ function defineMenubarAction(config) {
 				perform: config.dialog ? () => setDialogOpen(true) : setup.perform
 			});
 			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
 				id: ctx.id,
 				class: cls,
 				onClick: perform,
@@ -19587,9 +19787,9 @@ defineMenubarAction({
 	label: "QuickSave",
 	actionType: "save",
 	setup: () => {
-		const { save, quickSaveKey } = useStoryFields("save", "quickSaveKey");
+		const { quickSaveKey } = useStoryFields("quickSaveKey");
 		return {
-			perform: save,
+			perform: quickSave,
 			title: hotkeyTitle("Quick Save", quickSaveKey)
 		};
 	}
@@ -19600,9 +19800,9 @@ defineMenubarAction({
 	actionType: "load",
 	confirm: "Load saved game? Current progress will be lost.",
 	setup: () => {
-		const { load, hasSave, quickLoadKey } = useStoryFields("load", "hasSave", "quickLoadKey", "knownSaves");
+		const { hasSave, quickLoadKey } = useStoryFields("hasSave", "quickLoadKey", "knownSaves");
 		return {
-			perform: () => load(),
+			perform: quickLoad,
 			disabled: !hasSave(),
 			title: hotkeyTitle("Quick Load", quickLoadKey)
 		};
@@ -19657,6 +19857,7 @@ defineMacro({
 		const label = ctx.resolve(ctx.args.label ?? "");
 		const passageName = ctx.collectText(children).trim().replace(/^["']|["']$/g, "");
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
 			id: ctx.id,
 			class: ctx.cls,
 			onClick: () => setOpen(true),
@@ -19696,15 +19897,19 @@ function SaveManagerContent() {
 	const [status, setStatus] = useState(null);
 	const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
 	const [renamingId, setRenamingId] = useState(null);
+	const renameCancelled = useRef(false);
 	const [renameValue, setRenameValue] = useState("");
 	const renameInputRef = useRef(null);
 	const fileInputRef = useRef(null);
 	const closeDialog = useContext(DialogCloseContext);
 	const { storyData, playthroughId, beginSave, loadFromPayload } = useStoryFields("storyData", "playthroughId", "beginSave", "loadFromPayload");
 	const ifid = storyData?.ifid ?? "";
+	const [temporary, setTemporary] = useState(false);
 	const refresh = useCallback(async () => {
 		if (!ifid) return;
-		setGroups(await getSavesGrouped(ifid));
+		const data = await getSavesGrouped(ifid);
+		setTemporary(getBackendType() === "memory");
+		setGroups(data);
 		setLoading(false);
 	}, [ifid]);
 	useEffect(() => {
@@ -19751,7 +19956,7 @@ function SaveManagerContent() {
 			await saveWithHooks(void 0, void 0, beginSave, async (payload) => {
 				return createSave(ifid, playthrough, payload);
 			});
-			showStatus("Save created");
+			showStatus(temporary ? "Save created (temporary)" : "Save created");
 			await refresh();
 		} catch {
 			showStatus("Failed to create save", "error");
@@ -19794,6 +19999,7 @@ function SaveManagerContent() {
 		}
 	};
 	const handleRenameStart = (save) => {
+		renameCancelled.current = false;
 		setRenamingId(save.meta.id);
 		setRenameValue(save.meta.title);
 	};
@@ -19810,7 +20016,15 @@ function SaveManagerContent() {
 	};
 	const handleRenameKeyDown = (e) => {
 		if (e.key === "Enter") handleRenameConfirm();
-		else if (e.key === "Escape") setRenamingId(null);
+		else if (e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			renameCancelled.current = true;
+			setRenamingId(null);
+		}
+	};
+	const handleRenameBlur = () => {
+		if (!renameCancelled.current) handleRenameConfirm();
 	};
 	const handleExport = async (saveId) => {
 		try {
@@ -19858,10 +20072,12 @@ function SaveManagerContent() {
 					children: /* @__PURE__ */ jsxs("div", {
 						class: "saves-mode-toggle",
 						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
 							class: mode === "save" ? "active" : "",
 							onClick: () => setMode("save"),
 							children: "Save"
 						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
 							class: mode === "load" ? "active" : "",
 							onClick: () => setMode("load"),
 							children: "Load"
@@ -19869,9 +20085,15 @@ function SaveManagerContent() {
 					})
 				})
 			}),
+			temporary && /* @__PURE__ */ jsx("div", {
+				class: "saves-notice",
+				role: "status",
+				children: "Saves can not be kept in this browser: they are lost when the page is reloaded or closed. Export a save to keep it."
+			}),
 			/* @__PURE__ */ jsxs("div", {
 				class: "saves-toolbar",
 				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
 					class: "saves-toolbar-button",
 					onClick: handleImport,
 					children: "Import"
@@ -19927,7 +20149,7 @@ function SaveManagerContent() {
 										value: renameValue,
 										onInput: (e) => setRenameValue(e.target.value),
 										onKeyDown: handleRenameKeyDown,
-										onBlur: handleRenameConfirm
+										onBlur: handleRenameBlur
 									}) : /* @__PURE__ */ jsx("div", {
 										class: "save-slot-title",
 										children: save.meta.title
@@ -19939,25 +20161,30 @@ function SaveManagerContent() {
 									class: "save-slot-actions",
 									children: [
 										mode === "save" ? /* @__PURE__ */ jsx("button", {
+											type: "button",
 											class: "save-slot-action primary",
 											onClick: () => handleOverwrite(save.meta.id),
 											children: "Save Here"
 										}) : /* @__PURE__ */ jsx("button", {
+											type: "button",
 											class: "save-slot-action primary",
 											onClick: () => handleLoad(save),
 											children: "Load"
 										}),
 										/* @__PURE__ */ jsx("button", {
+											type: "button",
 											class: "save-slot-action",
 											onClick: () => handleRenameStart(save),
 											children: "Rename"
 										}),
 										/* @__PURE__ */ jsx("button", {
+											type: "button",
 											class: "save-slot-action",
 											onClick: () => handleExport(save.meta.id),
 											children: "Export"
 										}),
 										/* @__PURE__ */ jsx("button", {
+											type: "button",
 											class: "save-slot-action danger",
 											onClick: () => handleDelete(save.meta.id),
 											children: "Delete"
@@ -19965,6 +20192,7 @@ function SaveManagerContent() {
 									]
 								})]
 							}, save.meta.id)), mode === "save" && isCurrentPt && /* @__PURE__ */ jsx("button", {
+								type: "button",
 								class: "save-slot-new",
 								onClick: handleNewSave,
 								children: "+ New Save"
@@ -19976,6 +20204,7 @@ function SaveManagerContent() {
 					children: /* @__PURE__ */ jsx("div", {
 						class: "playthrough-saves",
 						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
 							class: "save-slot-new",
 							onClick: handleNewSave,
 							children: "+ New Save"
@@ -20347,6 +20576,7 @@ defineMacro({
 			}
 		});
 		return /* @__PURE__ */ jsx("button", {
+			type: "button",
 			id: ctx.id,
 			class: ctx.cls,
 			onClick: handleClick,
@@ -20521,7 +20751,7 @@ function resolveTransition(targetTags, nextTransition, storeDefault) {
 /**
 * Create a snapshot clone of a .passage element for outgoing transitions.
 * - Strips `id` attributes from the clone tree
-* - Disables interaction (pointer-events, user-select)
+* - Disables interaction (pointer-events, user-select, inert, aria-hidden)
 * - Pauses/mutes any <audio>/<video>
 * - Adds `.passage-snapshot` class and `data-transition` attribute
 */
@@ -20532,6 +20762,8 @@ function createSnapshot(passageEl, transitionType) {
 	for (let i = 0; i < idEls.length; i++) idEls[i].removeAttribute("id");
 	clone.style.pointerEvents = "none";
 	clone.style.userSelect = "none";
+	clone.setAttribute("inert", "");
+	clone.setAttribute("aria-hidden", "true");
 	const mediaEls = clone.querySelectorAll("audio, video");
 	for (let i = 0; i < mediaEls.length; i++) {
 		const media = mediaEls[i];
@@ -20570,6 +20802,19 @@ function cleanupSnapshots(containerEl) {
 	const snapshots = containerEl.querySelectorAll(".passage-snapshot");
 	for (let i = 0; i < snapshots.length; i++) snapshots[i].remove();
 }
+/**
+* `config` for players who prefer reduced motion: the CSS shortens the
+* animations (see styles.css), so the waits that follow them shrink too,
+* leaving no empty passage area before the next passage.
+*/
+function reduceMotion(config) {
+	if (!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return config;
+	return {
+		...config,
+		duration: Math.min(config.duration, 10),
+		pause: 0
+	};
+}
 defineMacro({
 	name: "passage",
 	interpolate: true,
@@ -20617,7 +20862,7 @@ defineMacro({
 				setDisplayedPassage(currentPassage);
 				return;
 			}
-			const config = resolveTransition(targetPassage.tags, next, transitionConfig);
+			const config = reduceMotion(resolveTransition(targetPassage.tags, next, transitionConfig));
 			resolvedTypeRef.current = config.type;
 			const containerEl = containerRef.current;
 			if (config.type === "none") {
@@ -20757,7 +21002,7 @@ defineMacro({
 });
 //#endregion
 //#region src/styles.css?inline
-var styles_default = "*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 16px;\n  -webkit-text-size-adjust: 100%;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: Georgia, 'Times New Roman', serif;\n  line-height: 1.75;\n  color: #e0e0e0;\n  background-color: #1a1a2e;\n  min-height: 100vh;\n}\n\ntw-storydata {\n  display: none !important;\n}\n\n#story {\n  max-width: 42em;\n  margin: 0 auto;\n  padding: 2em 1.5em;\n}\n\n/* Passage transitions */\n\n.passage-container {\n  position: relative;\n}\n\n.passage-container--crossfading {\n  display: grid;\n}\n\n.passage-container--crossfading > * {\n  grid-area: 1 / 1;\n}\n\n.passage {\n  animation: passage-fade-in var(--passage-in-duration, 0.3s) ease;\n}\n\n.passage[data-transition='none'] {\n  animation: none;\n}\n\n.passage-snapshot {\n  animation: passage-fade-out var(--passage-out-duration, 0.3s) ease forwards;\n  pointer-events: none;\n  user-select: none;\n}\n\n@keyframes passage-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes passage-fade-out {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .passage,\n  .passage-snapshot {\n    animation-duration: 0.01s !important;\n  }\n}\n\n.macro-button {\n  background: rgba(100, 181, 246, 0.15);\n  color: #64b5f6;\n  border: 1px solid rgba(100, 181, 246, 0.4);\n  border-radius: 4px;\n  padding: 0.25em 0.75em;\n  font: inherit;\n  font-size: 0.95em;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    border-color 0.2s;\n}\n\n.macro-button:hover {\n  background: rgba(100, 181, 246, 0.25);\n  border-color: #90caf9;\n}\n\n.macro-button:active {\n  background: rgba(100, 181, 246, 0.35);\n}\n\n.error {\n  color: #ef5350;\n  font-family: monospace;\n  padding: 1em;\n  border: 1px solid #ef5350;\n  border-radius: 4px;\n  background: rgba(239, 83, 80, 0.1);\n}\n\n/* Runtime errors shown on the page (see src/components/RuntimeErrors.tsx) */\n.spindle-error-banners {\n  position: fixed;\n  top: 0.75em;\n  left: 50%;\n  z-index: 300;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5em;\n  width: min(42em, calc(100% - 1.5em));\n  transform: translateX(-50%);\n}\n\n.spindle-error-banner {\n  position: relative;\n  padding: 0.75em 2.75em 0.75em 1em;\n  border: 1px solid #ef5350;\n  border-radius: 4px;\n  background: #2b1a1e;\n  color: #ffcdd2;\n  font-size: 0.9em;\n  line-height: 1.5;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);\n}\n\n.spindle-error-banner-message {\n  font-family: monospace;\n  color: #ef9a9a;\n}\n\n.spindle-error-banner-dismiss {\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-size: 1em;\n  cursor: pointer;\n}\n\n.spindle-error-banner-dismiss:hover {\n  color: #fff;\n}\n\n.loading {\n  text-align: center;\n  padding: 2em;\n  opacity: 0.6;\n}\n\n/* Menu bar */\n\n.story-menubar {\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  gap: 0.5em;\n  padding: 0.5em 1.5em;\n  background: #16213e;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  font-family: system-ui, sans-serif;\n  font-size: 0.9em;\n}\n\n.story-title {\n  flex: 1;\n  font-weight: 600;\n  color: #e0e0e0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.menubar-button {\n  background: transparent;\n  color: #9e9e9e;\n  border: 1px solid transparent;\n  padding: 0.35em 0.7em;\n  border-radius: 4px;\n  cursor: pointer;\n  font: inherit;\n  transition:\n    color 0.2s,\n    background 0.2s;\n}\n\n.menubar-button:hover {\n  color: #e0e0e0;\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.menubar-button:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n\n.menubar-button:disabled:hover {\n  color: #9e9e9e;\n  background: transparent;\n}\n\n/* Generic dialog */\n\n.dialog-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 200;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.6);\n}\n\n.dialog-panel {\n  background: #16213e;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 8px;\n  width: 90%;\n  max-width: 500px;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  color: #e0e0e0;\n  font-family: system-ui, sans-serif;\n  position: relative;\n}\n\n/* Focused programmatically when the dialog has no focusable content */\n.dialog-panel:focus {\n  outline: none;\n}\n\n.dialog-saves {\n  max-width: 550px;\n}\n\n.dialog-settings {\n  max-width: 400px;\n}\n\n.dialog-close {\n  position: absolute;\n  top: 0.75em;\n  right: 0.75em;\n  z-index: 1;\n  background: transparent;\n  border: none;\n  color: #9e9e9e;\n  font-size: 1.1em;\n  cursor: pointer;\n  padding: 0.25em;\n  line-height: 1;\n}\n\n.dialog-close:hover {\n  color: #e0e0e0;\n}\n\n.dialog-body {\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n}\n\n/* Settings controls */\n\n.settings-controls {\n  padding: 1em 1.25em;\n  display: flex;\n  flex-direction: column;\n  gap: 1em;\n}\n\n.settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1em;\n}\n\n.settings-row select,\n.settings-row input[type='range'] {\n  accent-color: #64b5f6;\n}\n\n.settings-row select {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  padding: 0.3em 0.5em;\n  font: inherit;\n}\n\n.settings-row input[type='checkbox'] {\n  accent-color: #64b5f6;\n  width: 1.1em;\n  height: 1.1em;\n}\n\n/* Save manager */\n\n.save-manager {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n}\n\n.saves-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1em 1.25em;\n  padding-right: 3em;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  font-weight: 600;\n  flex-shrink: 0;\n}\n\n.saves-header-left {\n  display: flex;\n  align-items: center;\n  gap: 0.75em;\n}\n\n.saves-mode-toggle {\n  display: flex;\n  gap: 0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.saves-mode-toggle button {\n  background: transparent;\n  color: #9e9e9e;\n  border: none;\n  padding: 0.3em 0.8em;\n  font: inherit;\n  font-size: 0.85em;\n  font-weight: 600;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    color 0.2s;\n}\n\n.saves-mode-toggle button.active {\n  background: rgba(100, 181, 246, 0.2);\n  color: #64b5f6;\n}\n\n.saves-mode-toggle button:hover:not(.active) {\n  color: #e0e0e0;\n}\n\n.saves-body {\n  padding: 0.75em 1.25em;\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n}\n\n.saves-empty {\n  text-align: center;\n  padding: 2em 1em;\n  opacity: 0.5;\n  font-size: 0.9em;\n}\n\n.saves-toolbar {\n  display: flex;\n  gap: 0.5em;\n  padding: 0.5em 1.25em;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  flex-shrink: 0;\n}\n\n.saves-toolbar-button {\n  background: rgba(255, 255, 255, 0.05);\n  color: #9e9e9e;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 4px;\n  padding: 0.3em 0.7em;\n  font: inherit;\n  font-size: 0.8em;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    color 0.2s;\n}\n\n.saves-toolbar-button:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #e0e0e0;\n}\n\n.playthrough-group {\n  margin-bottom: 0.75em;\n}\n\n.playthrough-header {\n  display: flex;\n  align-items: center;\n  gap: 0.5em;\n  padding: 0.4em 0;\n  cursor: pointer;\n  user-select: none;\n  font-size: 0.85em;\n  color: #9e9e9e;\n  transition: color 0.2s;\n}\n\n.playthrough-header:hover {\n  color: #e0e0e0;\n}\n\n.playthrough-chevron {\n  display: inline-block;\n  font-size: 0.7em;\n  transition: transform 0.2s;\n}\n\n.playthrough-chevron.open {\n  transform: rotate(90deg);\n}\n\n.playthrough-label {\n  font-weight: 600;\n}\n\n.playthrough-date {\n  opacity: 0.6;\n  font-size: 0.9em;\n}\n\n.playthrough-saves {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4em;\n  padding-left: 0.25em;\n}\n\n.save-slot {\n  display: flex;\n  align-items: center;\n  gap: 0.75em;\n  padding: 0.5em 0.6em;\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(255, 255, 255, 0.06);\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n\n.save-slot:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n\n.save-slot-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.save-slot-title {\n  font-weight: 500;\n  font-size: 0.9em;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.save-slot-meta {\n  font-size: 0.75em;\n  color: #9e9e9e;\n  display: flex;\n  gap: 0.75em;\n}\n\n.save-slot-actions {\n  display: flex;\n  gap: 0.3em;\n  flex-shrink: 0;\n}\n\n.save-slot-action {\n  background: transparent;\n  color: #9e9e9e;\n  border: 1px solid transparent;\n  border-radius: 3px;\n  padding: 0.2em 0.5em;\n  font: inherit;\n  font-size: 0.75em;\n  cursor: pointer;\n  transition:\n    color 0.2s,\n    background 0.2s;\n  white-space: nowrap;\n}\n\n.save-slot-action:hover {\n  color: #e0e0e0;\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.save-slot-action.primary {\n  color: #64b5f6;\n  border-color: rgba(100, 181, 246, 0.3);\n}\n\n.save-slot-action.primary:hover {\n  background: rgba(100, 181, 246, 0.15);\n}\n\n.save-slot-action.danger:hover {\n  color: #ef5350;\n  background: rgba(239, 83, 80, 0.1);\n}\n\n.save-slot-new {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5em;\n  margin-top: 0.25em;\n  border: 1px dashed rgba(255, 255, 255, 0.12);\n  border-radius: 6px;\n  color: #9e9e9e;\n  font: inherit;\n  font-size: 0.8em;\n  background: transparent;\n  cursor: pointer;\n  width: 100%;\n  transition:\n    color 0.2s,\n    border-color 0.2s,\n    background 0.2s;\n}\n\n.save-slot-new:hover {\n  color: #64b5f6;\n  border-color: rgba(100, 181, 246, 0.3);\n  background: rgba(100, 181, 246, 0.05);\n}\n\n.saves-status {\n  padding: 0.5em 1.25em;\n  font-size: 0.8em;\n  color: #81c784;\n  border-top: 1px solid rgba(255, 255, 255, 0.08);\n  flex-shrink: 0;\n  text-align: center;\n}\n\n.saves-status.error {\n  color: #ef5350;\n  border: none;\n  border-radius: 0;\n  padding: 0.5em 1.25em;\n  font-family: inherit;\n  background: transparent;\n}\n\n.save-rename-input {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(100, 181, 246, 0.4);\n  border-radius: 3px;\n  padding: 0.15em 0.4em;\n  font: inherit;\n  font-size: 0.9em;\n  width: 100%;\n}\n\n.save-rename-input:focus {\n  outline: none;\n  border-color: #64b5f6;\n}\n\n/* Macro: link */\n\n.macro-link {\n  color: #64b5f6;\n  text-decoration: none;\n  border-bottom: 1px solid rgba(100, 181, 246, 0.3);\n  transition:\n    color 0.2s,\n    border-color 0.2s;\n  cursor: pointer;\n}\n\n.macro-link:hover {\n  color: #90caf9;\n  border-bottom-color: #90caf9;\n}\n\n.macro-link:active {\n  color: #42a5f5;\n}\n\n/* Macro: form inputs */\n\n.macro-textbox,\n.macro-numberbox,\n.macro-textarea {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  padding: 0.3em 0.5em;\n  font: inherit;\n}\n\n.macro-textbox:focus,\n.macro-numberbox:focus,\n.macro-textarea:focus {\n  outline: none;\n  border-color: #64b5f6;\n}\n\n.macro-textarea {\n  min-height: 3em;\n  resize: vertical;\n}\n\n.macro-checkbox,\n.macro-radiobutton {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3em;\n}\n\n.macro-checkbox input,\n.macro-radiobutton input {\n  accent-color: #64b5f6;\n}\n\n/* Macro: listbox */\n\n.macro-listbox {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  padding: 0.3em 0.5em;\n  font: inherit;\n}\n\n/* Macro: cycle */\n\n.macro-cycle {\n  background: rgba(100, 181, 246, 0.15);\n  color: #64b5f6;\n  border: 1px solid rgba(100, 181, 246, 0.4);\n  border-radius: 4px;\n  padding: 0.25em 0.75em;\n  font: inherit;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    border-color 0.2s;\n}\n\n.macro-cycle:hover {\n  background: rgba(100, 181, 246, 0.25);\n  border-color: #90caf9;\n}\n\n/* Macro: meter */\n\n.macro-meter {\n  position: relative;\n  width: 100%;\n  height: 1.4em;\n  background: #2a2a3e;\n  border-radius: 0.3em;\n  overflow: hidden;\n  border: 1px solid #444;\n}\n\n.macro-meter-fill {\n  height: 100%;\n  background: #64b5f6;\n  transition: width 0.3s ease;\n}\n\n.macro-meter-label {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.85em;\n  color: #e0e0e0;\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);\n  pointer-events: none;\n}\n\n/* Markdown wrapper — invisible to layout */\n\n.md {\n  display: contents;\n}\n\n/* Markdown block elements inside passages */\n\n.passage p {\n  margin: 0.6em 0;\n}\n\n.passage p:first-child {\n  margin-top: 0;\n}\n\n.passage p:last-child {\n  margin-bottom: 0;\n}\n\n.passage h1,\n.passage h2,\n.passage h3,\n.passage h4,\n.passage h5,\n.passage h6 {\n  margin: 1em 0 0.4em;\n  line-height: 1.3;\n  color: #f0f0f0;\n}\n\n.passage h1 {\n  font-size: 1.8em;\n}\n.passage h2 {\n  font-size: 1.5em;\n}\n.passage h3 {\n  font-size: 1.25em;\n}\n.passage h4 {\n  font-size: 1.1em;\n}\n.passage h5 {\n  font-size: 1em;\n}\n.passage h6 {\n  font-size: 0.9em;\n  opacity: 0.8;\n}\n\n.passage code {\n  font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;\n  font-size: 0.9em;\n  background: rgba(255, 255, 255, 0.08);\n  padding: 0.15em 0.35em;\n  border-radius: 3px;\n}\n\n.passage pre {\n  background: rgba(0, 0, 0, 0.3);\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-radius: 6px;\n  padding: 1em;\n  overflow-x: auto;\n  margin: 0.8em 0;\n}\n\n.passage pre code {\n  background: none;\n  padding: 0;\n  border-radius: 0;\n  font-size: 0.85em;\n}\n\n.passage blockquote {\n  border-left: 3px solid rgba(100, 181, 246, 0.5);\n  margin: 0.8em 0;\n  padding: 0.4em 1em;\n  color: #b0b0b0;\n}\n\n.passage blockquote p {\n  margin: 0.3em 0;\n}\n\n.passage ul,\n.passage ol {\n  margin: 0.6em 0;\n  padding-left: 1.8em;\n}\n\n.passage li {\n  margin: 0.2em 0;\n}\n\n.passage hr {\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.12);\n  margin: 1.2em 0;\n}\n\n.passage table {\n  border-collapse: collapse;\n  width: 100%;\n  margin: 0.8em 0;\n}\n\n.passage th,\n.passage td {\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  padding: 0.5em 0.75em;\n  text-align: left;\n}\n\n.passage th {\n  background: rgba(255, 255, 255, 0.06);\n  font-weight: 600;\n}\n\n.passage tr:nth-child(even) {\n  background: rgba(255, 255, 255, 0.02);\n}\n\n.passage del {\n  opacity: 0.5;\n}\n\n.passage strong {\n  color: #f0f0f0;\n}\n\n/* Macro: type (typewriter) */\n\n.macro-type-cursor::after {\n  content: '\\2588';\n  animation: type-blink 0.7s step-end infinite;\n  color: #64b5f6;\n}\n\n.macro-type-done .macro-type-cursor::after {\n  display: none;\n}\n\n@keyframes type-blink {\n  50% {\n    opacity: 0;\n  }\n}\n";
+var styles_default = "*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 16px;\n  -webkit-text-size-adjust: 100%;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: Georgia, 'Times New Roman', serif;\n  line-height: 1.75;\n  color: #e0e0e0;\n  background-color: #1a1a2e;\n  min-height: 100vh;\n}\n\ntw-storydata {\n  display: none !important;\n}\n\n#story {\n  max-width: 42em;\n  margin: 0 auto;\n  padding: 2em 1.5em;\n}\n\n/* Passage transitions */\n\n.passage-container {\n  position: relative;\n}\n\n.passage-container--crossfading {\n  display: grid;\n}\n\n.passage-container--crossfading > * {\n  grid-area: 1 / 1;\n}\n\n.passage {\n  animation: passage-fade-in var(--passage-in-duration, 0.3s) ease;\n}\n\n.passage[data-transition='none'] {\n  animation: none;\n}\n\n.passage-snapshot {\n  animation: passage-fade-out var(--passage-out-duration, 0.3s) ease forwards;\n  pointer-events: none;\n  user-select: none;\n}\n\n@keyframes passage-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes passage-fade-out {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .passage,\n  .passage-snapshot {\n    animation-duration: 0.01s !important;\n  }\n}\n\n.macro-button {\n  background: rgba(100, 181, 246, 0.15);\n  color: #64b5f6;\n  border: 1px solid rgba(100, 181, 246, 0.4);\n  border-radius: 4px;\n  padding: 0.25em 0.75em;\n  font: inherit;\n  font-size: 0.95em;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    border-color 0.2s;\n}\n\n.macro-button:hover {\n  background: rgba(100, 181, 246, 0.25);\n  border-color: #90caf9;\n}\n\n.macro-button:active {\n  background: rgba(100, 181, 246, 0.35);\n}\n\n.error {\n  color: #ef5350;\n  font-family: monospace;\n  padding: 1em;\n  border: 1px solid #ef5350;\n  border-radius: 4px;\n  background: rgba(239, 83, 80, 0.1);\n}\n\n/* Runtime errors shown on the page (see src/components/RuntimeErrors.tsx) */\n.spindle-error-banners {\n  position: fixed;\n  top: 0.75em;\n  left: 50%;\n  z-index: 300;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5em;\n  width: min(42em, calc(100% - 1.5em));\n  transform: translateX(-50%);\n}\n\n.spindle-error-banner {\n  position: relative;\n  padding: 0.75em 2.75em 0.75em 1em;\n  border: 1px solid #ef5350;\n  border-radius: 4px;\n  background: #2b1a1e;\n  color: #ffcdd2;\n  font-size: 0.9em;\n  line-height: 1.5;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);\n}\n\n.spindle-error-banner-message {\n  font-family: monospace;\n  color: #ef9a9a;\n}\n\n.spindle-error-banner-dismiss {\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-size: 1em;\n  cursor: pointer;\n}\n\n.spindle-error-banner-dismiss:hover {\n  color: #fff;\n}\n\n.loading {\n  text-align: center;\n  padding: 2em;\n  opacity: 0.6;\n}\n\n/* Menu bar */\n\n.story-menubar {\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  gap: 0.5em;\n  padding: 0.5em 1.5em;\n  background: #16213e;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  font-family: system-ui, sans-serif;\n  font-size: 0.9em;\n}\n\n.story-title {\n  flex: 1;\n  font-weight: 600;\n  color: #e0e0e0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.menubar-button {\n  background: transparent;\n  color: #9e9e9e;\n  border: 1px solid transparent;\n  padding: 0.35em 0.7em;\n  border-radius: 4px;\n  cursor: pointer;\n  font: inherit;\n  transition:\n    color 0.2s,\n    background 0.2s;\n}\n\n.menubar-button:hover {\n  color: #e0e0e0;\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.menubar-button:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n\n.menubar-button:disabled:hover {\n  color: #9e9e9e;\n  background: transparent;\n}\n\n/* Generic dialog */\n\n.dialog-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 200;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.6);\n}\n\n.dialog-panel {\n  background: #16213e;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 8px;\n  width: 90%;\n  max-width: 500px;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  color: #e0e0e0;\n  font-family: system-ui, sans-serif;\n  position: relative;\n}\n\n/* Focused programmatically when the dialog has no focusable content */\n.dialog-panel:focus {\n  outline: none;\n}\n\n.dialog-saves {\n  max-width: 550px;\n}\n\n.dialog-settings {\n  max-width: 400px;\n}\n\n/* Keep the first control clear of the close button above it */\n.dialog-settings .dialog-body {\n  padding-top: 2.25em;\n}\n\n.dialog-close {\n  position: absolute;\n  top: 0.75em;\n  right: 0.75em;\n  z-index: 1;\n  background: transparent;\n  border: none;\n  color: #9e9e9e;\n  font-size: 1.1em;\n  cursor: pointer;\n  padding: 0.25em;\n  line-height: 1;\n}\n\n.dialog-close:hover {\n  color: #e0e0e0;\n}\n\n.dialog-body {\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n}\n\n/* Settings controls */\n\n.settings-controls {\n  padding: 1em 1.25em;\n  display: flex;\n  flex-direction: column;\n  gap: 1em;\n}\n\n.settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1em;\n}\n\n.settings-row select,\n.settings-row input[type='range'] {\n  accent-color: #64b5f6;\n}\n\n.settings-row select {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  padding: 0.3em 0.5em;\n  font: inherit;\n}\n\n.settings-row input[type='checkbox'] {\n  accent-color: #64b5f6;\n  width: 1.1em;\n  height: 1.1em;\n}\n\n/* Save manager */\n\n.save-manager {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n}\n\n.saves-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1em 1.25em;\n  padding-right: 3em;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  font-weight: 600;\n  flex-shrink: 0;\n}\n\n.saves-header-left {\n  display: flex;\n  align-items: center;\n  gap: 0.75em;\n}\n\n.saves-mode-toggle {\n  display: flex;\n  gap: 0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.saves-mode-toggle button {\n  background: transparent;\n  color: #9e9e9e;\n  border: none;\n  padding: 0.3em 0.8em;\n  font: inherit;\n  font-size: 0.85em;\n  font-weight: 600;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    color 0.2s;\n}\n\n.saves-mode-toggle button.active {\n  background: rgba(100, 181, 246, 0.2);\n  color: #64b5f6;\n}\n\n.saves-mode-toggle button:hover:not(.active) {\n  color: #e0e0e0;\n}\n\n.saves-body {\n  padding: 0.75em 1.25em;\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n}\n\n.saves-empty {\n  text-align: center;\n  padding: 2em 1em;\n  opacity: 0.5;\n  font-size: 0.9em;\n}\n\n.saves-toolbar {\n  display: flex;\n  gap: 0.5em;\n  padding: 0.5em 1.25em;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  flex-shrink: 0;\n}\n\n.saves-toolbar-button {\n  background: rgba(255, 255, 255, 0.05);\n  color: #9e9e9e;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 4px;\n  padding: 0.3em 0.7em;\n  font: inherit;\n  font-size: 0.8em;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    color 0.2s;\n}\n\n.saves-toolbar-button:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #e0e0e0;\n}\n\n.playthrough-group {\n  margin-bottom: 0.75em;\n}\n\n.playthrough-header {\n  display: flex;\n  align-items: center;\n  gap: 0.5em;\n  padding: 0.4em 0;\n  cursor: pointer;\n  user-select: none;\n  font-size: 0.85em;\n  color: #9e9e9e;\n  transition: color 0.2s;\n}\n\n.playthrough-header:hover {\n  color: #e0e0e0;\n}\n\n.playthrough-chevron {\n  display: inline-block;\n  font-size: 0.7em;\n  transition: transform 0.2s;\n}\n\n.playthrough-chevron.open {\n  transform: rotate(90deg);\n}\n\n.playthrough-label {\n  font-weight: 600;\n}\n\n.playthrough-date {\n  opacity: 0.6;\n  font-size: 0.9em;\n}\n\n.playthrough-saves {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4em;\n  padding-left: 0.25em;\n}\n\n.save-slot {\n  display: flex;\n  align-items: center;\n  gap: 0.75em;\n  padding: 0.5em 0.6em;\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(255, 255, 255, 0.06);\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n\n.save-slot:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n\n.save-slot-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.save-slot-title {\n  font-weight: 500;\n  font-size: 0.9em;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.save-slot-meta {\n  font-size: 0.75em;\n  color: #9e9e9e;\n  display: flex;\n  gap: 0.75em;\n}\n\n.save-slot-actions {\n  display: flex;\n  gap: 0.3em;\n  flex-shrink: 0;\n}\n\n.save-slot-action {\n  background: transparent;\n  color: #9e9e9e;\n  border: 1px solid transparent;\n  border-radius: 3px;\n  padding: 0.2em 0.5em;\n  font: inherit;\n  font-size: 0.75em;\n  cursor: pointer;\n  transition:\n    color 0.2s,\n    background 0.2s;\n  white-space: nowrap;\n}\n\n.save-slot-action:hover {\n  color: #e0e0e0;\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.save-slot-action.primary {\n  color: #64b5f6;\n  border-color: rgba(100, 181, 246, 0.3);\n}\n\n.save-slot-action.primary:hover {\n  background: rgba(100, 181, 246, 0.15);\n}\n\n.save-slot-action.danger:hover {\n  color: #ef5350;\n  background: rgba(239, 83, 80, 0.1);\n}\n\n.save-slot-new {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5em;\n  margin-top: 0.25em;\n  border: 1px dashed rgba(255, 255, 255, 0.12);\n  border-radius: 6px;\n  color: #9e9e9e;\n  font: inherit;\n  font-size: 0.8em;\n  background: transparent;\n  cursor: pointer;\n  width: 100%;\n  transition:\n    color 0.2s,\n    border-color 0.2s,\n    background 0.2s;\n}\n\n.save-slot-new:hover {\n  color: #64b5f6;\n  border-color: rgba(100, 181, 246, 0.3);\n  background: rgba(100, 181, 246, 0.05);\n}\n\n.saves-notice {\n  padding: 0.5em 1.25em;\n  font-size: 0.8em;\n  color: #ffb74d;\n  border-bottom: 1px solid rgba(255, 183, 77, 0.3);\n  background: rgba(255, 183, 77, 0.08);\n  flex-shrink: 0;\n}\n\n.saves-status {\n  padding: 0.5em 1.25em;\n  font-size: 0.8em;\n  color: #81c784;\n  border-top: 1px solid rgba(255, 255, 255, 0.08);\n  flex-shrink: 0;\n  text-align: center;\n}\n\n.saves-status.error {\n  color: #ef5350;\n  border: none;\n  border-radius: 0;\n  padding: 0.5em 1.25em;\n  font-family: inherit;\n  background: transparent;\n}\n\n.save-rename-input {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(100, 181, 246, 0.4);\n  border-radius: 3px;\n  padding: 0.15em 0.4em;\n  font: inherit;\n  font-size: 0.9em;\n  width: 100%;\n}\n\n.save-rename-input:focus {\n  outline: none;\n  border-color: #64b5f6;\n}\n\n/* Macro: link */\n\n.macro-link {\n  color: #64b5f6;\n  text-decoration: none;\n  border-bottom: 1px solid rgba(100, 181, 246, 0.3);\n  transition:\n    color 0.2s,\n    border-color 0.2s;\n  cursor: pointer;\n}\n\n.macro-link:hover {\n  color: #90caf9;\n  border-bottom-color: #90caf9;\n}\n\n.macro-link:active {\n  color: #42a5f5;\n}\n\n/* Macro: form inputs */\n\n.macro-textbox,\n.macro-numberbox,\n.macro-textarea {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  padding: 0.3em 0.5em;\n  font: inherit;\n}\n\n.macro-textbox:focus,\n.macro-numberbox:focus,\n.macro-textarea:focus {\n  outline: none;\n  border-color: #64b5f6;\n}\n\n.macro-textarea {\n  min-height: 3em;\n  resize: vertical;\n}\n\n.macro-checkbox,\n.macro-radiobutton {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3em;\n}\n\n.macro-checkbox input,\n.macro-radiobutton input {\n  accent-color: #64b5f6;\n}\n\n/* Macro: listbox */\n\n.macro-listbox {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  padding: 0.3em 0.5em;\n  font: inherit;\n}\n\n/* Macro: cycle */\n\n.macro-cycle {\n  background: rgba(100, 181, 246, 0.15);\n  color: #64b5f6;\n  border: 1px solid rgba(100, 181, 246, 0.4);\n  border-radius: 4px;\n  padding: 0.25em 0.75em;\n  font: inherit;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    border-color 0.2s;\n}\n\n.macro-cycle:hover {\n  background: rgba(100, 181, 246, 0.25);\n  border-color: #90caf9;\n}\n\n/* Macro: meter */\n\n.macro-meter {\n  position: relative;\n  width: 100%;\n  height: 1.4em;\n  background: #2a2a3e;\n  border-radius: 0.3em;\n  overflow: hidden;\n  border: 1px solid #444;\n}\n\n.macro-meter-fill {\n  height: 100%;\n  background: #64b5f6;\n  transition: width 0.3s ease;\n}\n\n.macro-meter-label {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.85em;\n  color: #e0e0e0;\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);\n  pointer-events: none;\n}\n\n/* Markdown wrapper — invisible to layout */\n\n.md {\n  display: contents;\n}\n\n/* Markdown block elements inside passages */\n\n.passage p {\n  margin: 0.6em 0;\n}\n\n.passage p:first-child {\n  margin-top: 0;\n}\n\n.passage p:last-child {\n  margin-bottom: 0;\n}\n\n.passage h1,\n.passage h2,\n.passage h3,\n.passage h4,\n.passage h5,\n.passage h6 {\n  margin: 1em 0 0.4em;\n  line-height: 1.3;\n  color: #f0f0f0;\n}\n\n.passage h1 {\n  font-size: 1.8em;\n}\n.passage h2 {\n  font-size: 1.5em;\n}\n.passage h3 {\n  font-size: 1.25em;\n}\n.passage h4 {\n  font-size: 1.1em;\n}\n.passage h5 {\n  font-size: 1em;\n}\n.passage h6 {\n  font-size: 0.9em;\n  opacity: 0.8;\n}\n\n.passage code {\n  font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;\n  font-size: 0.9em;\n  background: rgba(255, 255, 255, 0.08);\n  padding: 0.15em 0.35em;\n  border-radius: 3px;\n}\n\n.passage pre {\n  background: rgba(0, 0, 0, 0.3);\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-radius: 6px;\n  padding: 1em;\n  overflow-x: auto;\n  margin: 0.8em 0;\n}\n\n.passage pre code {\n  background: none;\n  padding: 0;\n  border-radius: 0;\n  font-size: 0.85em;\n}\n\n.passage blockquote {\n  border-left: 3px solid rgba(100, 181, 246, 0.5);\n  margin: 0.8em 0;\n  padding: 0.4em 1em;\n  color: #b0b0b0;\n}\n\n.passage blockquote p {\n  margin: 0.3em 0;\n}\n\n.passage ul,\n.passage ol {\n  margin: 0.6em 0;\n  padding-left: 1.8em;\n}\n\n.passage li {\n  margin: 0.2em 0;\n}\n\n.passage hr {\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.12);\n  margin: 1.2em 0;\n}\n\n.passage table {\n  border-collapse: collapse;\n  width: 100%;\n  margin: 0.8em 0;\n}\n\n.passage th,\n.passage td {\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  padding: 0.5em 0.75em;\n  text-align: left;\n}\n\n.passage th {\n  background: rgba(255, 255, 255, 0.06);\n  font-weight: 600;\n}\n\n.passage tr:nth-child(even) {\n  background: rgba(255, 255, 255, 0.02);\n}\n\n.passage del {\n  opacity: 0.5;\n}\n\n.passage strong {\n  color: #f0f0f0;\n}\n\n/* Macro: type (typewriter) */\n\n.macro-type-cursor::after {\n  content: '\\2588';\n  animation: type-blink 0.7s step-end infinite;\n  color: #64b5f6;\n}\n\n.macro-type-done .macro-type-cursor::after {\n  display: none;\n}\n\n@keyframes type-blink {\n  50% {\n    opacity: 0;\n  }\n}\n";
 //#endregion
 //#region src/index.tsx
 function renderErrors(root, errors) {