Styles and About Page Fixes

src/lib/components/tui/TuiBody.svelte

@@ -137,7 +137,7 @@
 					class="symbol">$</span
 				>
 			</span>
-			<span class="cursor"></span>
+			<span class="cursor blink"></span>
 		</div>
 	{/if}
 </div>

src/lib/components/tui/TuiCard.svelte

@@ -6,7 +6,7 @@
 		getSegmentStyle,
 		parseDimension,
 	} from "./utils";
-	import type { CardLine } from "./types";
+	import type { CardLine, TerminalLine } from "./types";
 	import TuiLine from "./TuiLine.svelte";
 	import "$lib/assets/css/tui-card.css";
 
@@ -46,6 +46,43 @@
 			.filter(Boolean)
 			.join("; "),
 	);
+	const processedChildren = $derived.by(() => {
+		if (!line.children) return [];
+		const groups: Array<
+			| { kind: "single"; index: number; line: TerminalLine }
+			| {
+					kind: "inline";
+					items: Array<{ index: number; line: TerminalLine }>;
+			  }
+		> = [];
+		let i = 0;
+
+		while (i < line.children.length) {
+			const child = line.children[i];
+			const isInline = child.inline || child.display === "inline";
+
+			if (isInline) {
+				const inlineItems: Array<{
+					index: number;
+					line: TerminalLine;
+				}> = [];
+				while (i < line.children.length) {
+					const nextChild = line.children[i];
+					const nextIsInline =
+						nextChild.inline || nextChild.display === "inline";
+					if (!nextIsInline) break;
+
+					inlineItems.push({ index: i, line: nextChild });
+					i++;
+				}
+				groups.push({ kind: "inline", items: inlineItems });
+			} else {
+				groups.push({ kind: "single", index: i, line: child });
+				i++;
+			}
+		}
+		return groups;
+	});
 </script>
 
 <div class="tui-card" class:inline style={cardStyle}>
@@ -91,19 +128,38 @@
 				class:flex={line.display === "flex"}
 				class:grid={line.display === "grid"}
 			>
-				{#each line.children as child, i}
-					<TuiLine
-						line={child}
-						index={i}
-						segments={parseColorText(child.content)}
-						complete={true}
-						showImage={true}
-						selectedIndex={-1}
-						inline={false}
-						{onButtonClick}
-						{onHoverButton}
-						{onLinkClick}
-					/>
+				{#each processedChildren as group}
+					{#if group.kind === "inline"}
+						<div class="tui-inline-group">
+							{#each group.items as item}
+								<TuiLine
+									line={item.line}
+									index={item.index}
+									segments={parseColorText(item.line.content)}
+									complete={true}
+									showImage={true}
+									selectedIndex={-1}
+									inline={true}
+									{onButtonClick}
+									{onHoverButton}
+									{onLinkClick}
+								/>
+							{/each}
+						</div>
+					{:else}
+						<TuiLine
+							line={group.line}
+							index={group.index}
+							segments={parseColorText(group.line.content)}
+							complete={true}
+							showImage={true}
+							selectedIndex={-1}
+							inline={false}
+							{onButtonClick}
+							{onHoverButton}
+							{onLinkClick}
+						/>
+					{/if}
 				{/each}
 			</div>
 		{/if}

src/lib/components/tui/TuiGroup.svelte

@@ -120,10 +120,7 @@
 	}
 
 	@media (max-width: 768px) {
-		.tui-group.inline {
-			flex-direction: column;
-			align-items: stretch;
-		}
+		/* .tui-group.inline removed to allow inline flow on mobile */
 
 		.tui-group.grid {
 			grid-template-columns: 1fr;