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, 5 insertions, 3 deletions

diff --git a/src/client/App.test.tsx b/src/client/App.test.tsx
index 8359e67..fe870b7 100644
--- a/src/client/App.test.tsx
+++ b/src/client/App.test.tsx
@@ -114,14 +114,16 @@ describe("App routing", () => {
 
 	it("renders login page at /login", () => {
 		renderWithRouter("/login");
-		expect(screen.getByRole("heading", { name: "Login" })).toBeDefined();
+		expect(screen.getByRole("heading", { name: "Kioku" })).toBeDefined();
+		expect(screen.getByRole("heading", { name: "Welcome back" })).toBeDefined();
 	});
 
 	it("renders 404 page for unknown routes", () => {
 		renderWithRouter("/unknown-route");
+		expect(screen.getByRole("heading", { name: "404" })).toBeDefined();
 		expect(
-			screen.getByRole("heading", { name: "404 - Not Found" }),
+			screen.getByRole("heading", { name: "Page Not Found" }),
 		).toBeDefined();
-		expect(screen.getByRole("link", { name: "Go to Home" })).toBeDefined();
+		expect(screen.getByRole("link", { name: /Go Home/i })).toBeDefined();
 	});
 });