feat(client): redesign frontend with TailwindCSS v4

Replace inline styles with TailwindCSS, implementing a cohesive Japanese-inspired
design system with custom colors (cream, teal primary), typography (Fraunces,
DM Sans), and animations. Update all pages and components with consistent styling,
improve accessibility by adding aria-hidden to decorative SVGs, and configure
Biome for Tailwind CSS syntax support.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

1 files changed, 2 insertions, 1 deletions

diff --git a/src/client/components/OfflineBanner.test.tsx b/src/client/components/OfflineBanner.test.tsx
index 41679d9..53ba815 100644
--- a/src/client/components/OfflineBanner.test.tsx
+++ b/src/client/components/OfflineBanner.test.tsx
@@ -79,7 +79,8 @@ describe("OfflineBanner", () => {
 		render(<OfflineBanner />);
 
 		const banner = screen.getByTestId("offline-banner");
-		expect(banner.getAttribute("role")).toBe("status");
+		// <output> element has implicit role="status", so we check it's an output element
+		expect(banner.tagName.toLowerCase()).toBe("output");
 		expect(banner.getAttribute("aria-live")).toBe("polite");
 	});
 });