feat: Kinetic Text Tags {bt} {sc} {fi} {rotat} move letters; closing tags close their own tag

Letters of these custom tags animate one after another (CSS). A closing tag now closes the style that
it opened (with anything left open inside) instead of popping whatever was on top, and an unknown tag
that has a closing tag later shows its text plainly and stays balanced.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

frontend/tests/ui.test.mjs

@@ -40,3 +40,16 @@ test("highlight wraps glossary terms case-insensitively and escapes regex charac
   assert.match(html, /<mark title="x">a\+b<\/mark>/);
   assert.equal(highlight("plain", []), "plain");
 });
+
+test("custom tags: letters of {bt} and {sc} move, a closing tag closes only its own tag, unknown pairs stay plain", async () => {
+  const { build } = await import("esbuild");
+  const { fileURLToPath } = await import("node:url");
+  const compiled = await build({ entryPoints: [fileURLToPath(new URL("../src/player/text.ts", import.meta.url))],
+    bundle: true, write: false, format: "esm", platform: "node", logLevel: "silent" });
+  const { parseText, plainText } = await import(`data:text/javascript;base64,${Buffer.from(compiled.outputFiles[0].text).toString("base64")}`);
+  const parsed = parseText("a{b}{bt=8}jump{/bt} still bold{/b} plain {chaos}odd{/chaos} end");
+  const styles = parsed.segments.filter((s) => s.kind === "text").map((s) => [s.text, !!s.style.b, s.style.fx ?? null]);
+  assert.deepEqual(styles, [["a", false, null], ["jump", true, "bt"], [" still bold", true, null], [" plain ", false, null],
+    ["odd", false, null], [" end", false, null]]);
+  assert.equal(plainText(parsed), "ajump still bold plain odd end");
+});