@rohal12/spindle 0.59.8 → 0.59.10

package/dist/pkg/headless.js

@@ -9735,13 +9735,24 @@ function tokenizeMarkup(source, options = {}) {
 //#endregion
 //#region src/hooks/use-story-fields.ts
 /**
+* Tells the components below when to keep the state they last rendered with,
+* given the store's current state: an owner (a click body, see
+* useDetachedBody; a passage on its way out, see PassageDisplay) provides it
+* so that a branch skipped earlier cannot run against later state (#351,
+* #352). It runs inside the store's own notification, before the owner could
+* re-render, which is why it is a predicate and not a flag.
+*/
+var FrozenStateContext = createContext(null);
+/**
 * Story state fields `keys`, re-rendering when any of them changes (as one
 * useStoryStore() selector per field would). The result keeps its identity
 * while the fields don't change, as the store's snapshot must.
 */
 function useStoryFields(...keys) {
 	const prev = useRef();
+	const freeze = useContext(FrozenStateContext);
 	return useStoryStore((s) => {
+		if (prev.current && freeze?.(s)) return prev.current;
 		const next = {};
 		for (const key of keys) next[key] = s[key];
 		return shallow(prev.current, next) ? prev.current : prev.current = next;
@@ -9754,7 +9765,7 @@ function useStoryFields(...keys) {
 * All four dicts use unprefixed keys suitable for evaluate/execute.
 */
 function useMergedLocals() {
-	const { variables, temporary, transient } = useStoryFields("variables", "temporary", "transient");
+	const { variables, temporary, transient, renderCounts } = useStoryFields("variables", "temporary", "transient", "renderCounts");
 	const localsValues = useContext(LocalsValuesContext);
 	return useMemo(() => {
 		return [
@@ -9767,7 +9778,8 @@ function useMergedLocals() {
 		variables,
 		temporary,
 		localsValues,
-		transient
+		transient,
+		renderCounts
 	]);
 }
 //#endregion
@@ -10887,7 +10899,17 @@ function LocalsScope({ body, parentValues, ownKeys }) {
 }
 //#endregion
 //#region src/components/macros/WidgetInvocation.tsx
-function WidgetInvocation({ body, params, rawArgs, invocationChildren }) {
+function WidgetInvocation(props) {
+	const { className, id } = props;
+	const content = /* @__PURE__ */ jsx(WidgetContent, { ...props });
+	if (!className && !id) return content;
+	return /* @__PURE__ */ jsx("span", {
+		class: className,
+		id,
+		children: content
+	});
+}
+function WidgetContent({ body, params, rawArgs, invocationChildren, className, id }) {
 	const renderOptions = useRenderOptions();
 	const parentValues = renderOptions.locals;
 	const [mergedVars, mergedTemps, mergedLocals, mergedTrans] = useMergedLocals();
@@ -11143,7 +11165,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;
@@ -11643,18 +11665,21 @@ function nodeKey(node) {
 }
 function renderMacro(node, key) {
 	if (isSubMacro(node.name)) return null;
+	const invocation = {
+		rawArgs: node.rawArgs,
+		className: node.className,
+		id: node.id
+	};
 	const widget = getWidget(node.name);
 	if (widget) return /* @__PURE__ */ jsx(WidgetInvocation, {
+		...invocation,
 		body: widget.body,
 		params: widget.params,
-		rawArgs: node.rawArgs,
 		invocationChildren: node.children
 	}, key);
 	const Component = getMacro(node.name);
 	if (Component) return /* @__PURE__ */ jsx(Component, {
-		rawArgs: node.rawArgs,
-		className: node.className,
-		id: node.id,
+		...invocation,
 		children: node.children,
 		branches: node.branches
 	}, key);
@@ -12548,6 +12573,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 +12635,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 +12713,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 +12830,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 +12844,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;
 /**
@@ -13406,7 +13444,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);
@@ -13589,7 +13631,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);
@@ -14148,16 +14190,19 @@ 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);
+	saveSessionPlaythrough(ifid, id);
 	return id;
 }
 var PLAYTHROUGH_LABEL = /^Playthrough (\d+)$/;
@@ -14197,6 +14242,7 @@ async function adoptPlaythroughNow(ifid, id) {
 	await ensurePlaythrough(ifid, id, (/* @__PURE__ */ new Date()).toISOString());
 	const key = currentPlaythroughKey(ifid);
 	if (await backend.getMeta(key) !== id) await backend.setMeta(key, id);
+	saveSessionPlaythrough(ifid, id);
 }
 /**
 * Record the playthrough `id` of the story as "Imported", created at
@@ -14219,8 +14265,12 @@ async function ensurePlaythrough(ifid, id, createdAt) {
 */
 function establishPlaythrough(ifid) {
 	return inOrder(async () => {
+		const backend = await getBackend();
+		const own = loadSessionPlaythrough(ifid);
+		const id = own !== void 0 && (await backend.getPlaythroughsByIfid(ifid)).some((p) => p.id === own) ? own : await backend.getMeta(currentPlaythroughKey(ifid)) ?? await startNewPlaythroughNow(ifid);
+		saveSessionPlaythrough(ifid, id);
 		return {
-			id: await (await getBackend()).getMeta(currentPlaythroughKey(ifid)) ?? await startNewPlaythroughNow(ifid),
+			id,
 			knownSaves: await populateKnownSavesNow(ifid)
 		};
 	});
@@ -14409,12 +14459,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) {
@@ -14494,12 +14573,16 @@ readingSlot(livePayload);
 * (see adoptPlaythrough) in the same operation: operations issued after the
 * load take effect in the loaded playthrough. Resolves to the live payload
 * and its playthrough, or undefined if the slot is empty.
+*
+* `check` is run on the payload first: when it throws, the load rejects and
+* the game stays in its playthrough (#357).
 */
-function loadSlotSave(ifid, slot) {
+function loadSlotSave(ifid, slot, check) {
 	return inOrder(async () => {
 		const record = await slotRecord(ifid, slot);
 		if (!record) return void 0;
 		const payload = decodePayload(record.payload);
+		check?.(payload);
 		const { playthroughId } = record.meta;
 		if (playthroughId) await adoptPlaythroughNow(ifid, playthroughId);
 		return {
@@ -14589,6 +14672,26 @@ function clearSession(ifid) {
 		sessionStorage.removeItem(`${SESSION_KEY_PREFIX}${ifid}`);
 	} catch {}
 }
+/**
+* The playthrough this tab's game is in, kept with its session: the shared
+* current playthrough (a stored meta value) can be changed by another tab.
+* Written where this tab's storage operations set the current playthrough,
+* so it follows them in call order. Under the session prefix, so clearing
+* all data clears it.
+*/
+var SESSION_PLAYTHROUGH_PREFIX = `${SESSION_KEY_PREFIX}playthrough.`;
+function saveSessionPlaythrough(ifid, id) {
+	try {
+		sessionStorage.setItem(`${SESSION_PLAYTHROUGH_PREFIX}${ifid}`, id);
+	} catch {}
+}
+function loadSessionPlaythrough(ifid) {
+	try {
+		return sessionStorage.getItem(`${SESSION_PLAYTHROUGH_PREFIX}${ifid}`) || void 0;
+	} catch {
+		return;
+	}
+}
 /** The export of a stored save, if there is one. */
 function toExport(record) {
 	if (!record) return void 0;
@@ -14761,6 +14864,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();
@@ -15254,6 +15362,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);
 }
@@ -15609,7 +15738,8 @@ function persistSession(get) {
 		historyIndex,
 		visitCounts,
 		renderCounts,
-		prng: snapshotPRNG()
+		prng: snapshotPRNG(),
+		watchers: savedMacroWatchers()
 	});
 }
 /** What the page shows before a session write error (see RuntimeErrors). */
@@ -15994,6 +16124,20 @@ 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));
+}
+/** Throw if `payload` refers to a passage `storyData` does not have. */
+function assertPassagesExist(storyData, payload) {
+	const missing = missingPassage(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`);
+}
 var NAMESPACE_KEYS = [
 	"variables",
 	"temporary",
@@ -16336,7 +16480,7 @@ var useStoryStore = create()(storyStore((set, get) => ({
 			state.loadError = null;
 		});
 		const previous = resolvePlaythroughId();
-		const read = loadSlotSave(storyData.ifid, slot);
+		const read = loadSlotSave(storyData.ifid, slot, (payload) => assertPassagesExist(storyData, payload));
 		const switched = switchToLookedUpPlaythrough(Promise.all([previous, read.catch(() => void 0)]).then(([prev, loaded]) => loaded?.playthroughId || prev));
 		const replacement = ++stateReplacementsIssued;
 		return reported(read.then(async (loaded) => {
@@ -16421,7 +16565,8 @@ var useStoryStore = create()(storyStore((set, get) => ({
 			historyIndex,
 			visitCounts: { ...visitCounts },
 			renderCounts: { ...renderCounts },
-			prng: snapshotPRNG()
+			prng: snapshotPRNG(),
+			watchers: savedMacroWatchers()
 		};
 	},
 	beginSave: () => {
@@ -16433,12 +16578,14 @@ 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;
 		}
+		assertPassagesExist(get().storyData, payload);
 		latestStateApplied = replacement;
 		emit("beforeload", slot);
 		const ifid = get().storyData?.ifid;
@@ -16464,6 +16611,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);
@@ -16646,7 +16794,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, {
@@ -16661,6 +16809,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,
@@ -19086,7 +19235,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(",")}]`;
@@ -19201,15 +19350,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
@@ -19272,11 +19413,13 @@ defineMacro({
 });
 //#endregion
 //#region src/components/macros/detached-body.tsx
+var frozenAlways = () => true;
 /**
 * 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. Used by {button} and {link} on click. The body stays mounted
+* pipeline. Used by {button} and {link} on click. The body's state is frozen
+* once it has rendered, so it runs once per click. It 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.
@@ -19307,24 +19450,27 @@ function useDetachedBody() {
 	const run = (children) => {
 		const locals = liveLocalsView(updater.getValues);
 		const container = document.createElement("div");
-		render(/* @__PURE__ */ jsx(LocalsUpdateContext.Provider, {
-			value: updater,
-			children: /* @__PURE__ */ jsx(LocalsValuesContext.Provider, {
-				value: locals,
-				children: /* @__PURE__ */ jsx(NobrContext.Provider, {
-					value: nobr,
-					children: /* @__PURE__ */ jsx(InlineContext.Provider, {
-						value: inline,
-						children: /* @__PURE__ */ jsx(WidgetChildrenContext.Provider, {
-							value: widgetChildren,
-							children: /* @__PURE__ */ jsx(RepeatContext.Provider, {
-								value: repeat,
-								children: /* @__PURE__ */ jsx(DialogCloseContext.Provider, {
-									value: closeDialog,
-									children: renderNodes(children, {
-										nobr,
-										inline,
-										locals
+		render(/* @__PURE__ */ jsx(FrozenStateContext.Provider, {
+			value: frozenAlways,
+			children: /* @__PURE__ */ jsx(LocalsUpdateContext.Provider, {
+				value: updater,
+				children: /* @__PURE__ */ jsx(LocalsValuesContext.Provider, {
+					value: locals,
+					children: /* @__PURE__ */ jsx(NobrContext.Provider, {
+						value: nobr,
+						children: /* @__PURE__ */ jsx(InlineContext.Provider, {
+							value: inline,
+							children: /* @__PURE__ */ jsx(WidgetChildrenContext.Provider, {
+								value: widgetChildren,
+								children: /* @__PURE__ */ jsx(RepeatContext.Provider, {
+									value: repeat,
+									children: /* @__PURE__ */ jsx(DialogCloseContext.Provider, {
+										value: closeDialog,
+										children: renderNodes(children, {
+											nobr,
+											inline,
+											locals
+										})
 									})
 								})
 							})
@@ -19361,6 +19507,7 @@ defineMacro({
 			perform: handleClick
 		});
 		return /* @__PURE__ */ jsx("button", {
+			type: "button",
 			id: ctx.id,
 			class: ctx.cls,
 			onClick: handleClick,
@@ -19517,15 +19664,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);
@@ -19548,6 +19732,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" : "",
@@ -19557,13 +19757,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" })]
@@ -19611,6 +19811,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,
@@ -19720,6 +19921,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),
@@ -19766,9 +19968,12 @@ function SaveManagerContent() {
 	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(() => {
@@ -19815,7 +20020,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");
@@ -19931,10 +20136,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"
@@ -19942,9 +20149,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"
@@ -20012,25 +20225,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"
@@ -20038,6 +20256,7 @@ function SaveManagerContent() {
 									]
 								})]
 							}, save.meta.id)), mode === "save" && isCurrentPt && /* @__PURE__ */ jsx("button", {
+								type: "button",
 								class: "save-slot-new",
 								onClick: handleNewSave,
 								children: "+ New Save"
@@ -20049,6 +20268,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"
@@ -20277,13 +20497,19 @@ function defineInputMacro(name, type, toValue = (input) => input !== void 0 ? St
 				label: placeholder || ctx.varName,
 				perform: (v) => ctx.setValue(toValue(v))
 			});
+			const typed = ctx.hooks.useRef(null);
+			const shown = typed.current !== null && toValue(typed.current) === ctx.value && type === "number" ? typed.current : display(ctx.value);
 			return h(type ? "input" : "textarea", {
 				type,
 				id: ctx.id,
 				class: ctx.cls,
-				value: display(ctx.value),
+				value: shown,
 				placeholder,
-				onInput: (e) => ctx.setValue(toValue(e.target.value))
+				onInput: (e) => {
+					const text = e.target.value;
+					typed.current = text;
+					ctx.setValue(toValue(text));
+				}
 			});
 		}
 	});
@@ -20420,6 +20646,7 @@ defineMacro({
 			}
 		});
 		return /* @__PURE__ */ jsx("button", {
+			type: "button",
 			id: ctx.id,
 			class: ctx.cls,
 			onClick: handleClick,
@@ -20594,7 +20821,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
 */
@@ -20605,6 +20832,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];
@@ -20672,6 +20901,9 @@ defineMacro({
 		});
 		const resolvedTypeRef = useRef("fade");
 		const prevHistoryLenRef = useRef(0);
+		const displayedId = displayed.id;
+		const isOutgoing = useCallback((state) => state.navigationId !== displayedId, [displayedId]);
+		const lastElement = useRef(null);
 		const containerRef = useRef(null);
 		const timeoutsRef = useRef([]);
 		/** Cancel any in-progress transition. */
@@ -20740,6 +20972,16 @@ defineMacro({
 				cleanupSnapshots(containerEl);
 			}, config.duration)];
 		}, [navigationId]);
+		const shownId = displayedPassage && !renderDeferred ? displayed.id : null;
+		const lastShownId = useRef(shownId);
+		useLayoutEffect(() => {
+			if (shownId === null) return;
+			const previous = lastShownId.current;
+			lastShownId.current = shownId;
+			if (previous === null || previous === shownId) return;
+			const el = containerRef.current?.querySelector(".passage");
+			if (el && el.getBoundingClientRect().top < 0) el.scrollIntoView?.({ block: "start" });
+		}, [shownId]);
 		const effectivePassage = renderDeferred ? storyData?.passages.get("StoryLoading") ?? null : displayedPassage ? storyData?.passages.get(displayedPassage) : null;
 		if (!effectivePassage && displayedPassage && !renderDeferred) return /* @__PURE__ */ jsxs("div", {
 			class: "error",
@@ -20750,6 +20992,12 @@ defineMacro({
 			]
 		});
 		const readyPassage = storyData?.passages.get("PassageReady");
+		const passageElement = !renderDeferred && displayed.id !== navigationId && lastElement.current ? lastElement.current : effectivePassage && /* @__PURE__ */ jsx(Passage, {
+			passage: effectivePassage,
+			dataTransition: renderDeferred ? "none" : resolvedTypeRef.current,
+			navigationId: renderDeferred ? void 0 : displayed.id
+		}, renderDeferred ? "loading" : `nav-${displayed.id}`);
+		lastElement.current = passageElement || null;
 		return /* @__PURE__ */ jsxs("div", {
 			id: ctx.id ?? "story",
 			class: ctx.className ?? "story",
@@ -20759,11 +21007,10 @@ defineMacro({
 			}, `ready-${navigationId}`), /* @__PURE__ */ jsx("div", {
 				class: "passage-container",
 				ref: containerRef,
-				children: effectivePassage && /* @__PURE__ */ jsx(Passage, {
-					passage: effectivePassage,
-					dataTransition: renderDeferred ? "none" : resolvedTypeRef.current,
-					navigationId: renderDeferred ? void 0 : displayed.id
-				}, renderDeferred ? "loading" : `nav-${displayed.id}`)
+				children: passageElement && /* @__PURE__ */ jsx(FrozenStateContext.Provider, {
+					value: isOutgoing,
+					children: passageElement
+				})
 			})]
 		});
 	}
@@ -20843,7 +21090,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/* 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-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) {