feat(phrases): progress bar while generating + bigger kanji/related text + brutalist TTS

- Replace empty-state headline with animated progress bar during generation
- Swap Sparkles icon for BookOpen on the Related words section
- Increase on/kunyomi readings and related word text to read more like a lesson
- Restyle TTSButton with neo-brutalist border/shadow (yellow idle, red speaking)

app/(app)/phrases/PhraseResult/EmptyState.tsx

@@ -1,14 +1,35 @@
 import { PenLine } from "lucide-react";
 
-export function EmptyState() {
+export function EmptyState({ isPending = false }: { isPending?: boolean }) {
   return (
     <div className="rounded-2xl bg-white p-8 text-center sm:p-12 border-3 border-black shadow-[8px_8px_0px_rgba(0,0,0,1)] relative overflow-hidden">
       <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-2xl bg-[#FFD21E] border-3 border-black text-black shadow-[4px_4px_0px_rgba(0,0,0,1)] rotate-3">
         <PenLine size={32} strokeWidth={3} className="-rotate-3" />
       </div>
-      <h2 className="mt-8 text-2xl sm:text-3xl font-black text-black tracking-tight uppercase leading-none">
-        Enter a phrase to build a mini lesson
-      </h2>
+      {isPending ? (
+        <div className="mt-8 space-y-4">
+          <div className="text-xl sm:text-2xl font-black text-black tracking-tight uppercase leading-none">
+            Building your mini lesson...
+          </div>
+          <div className="mx-auto h-6 w-full max-w-md overflow-hidden rounded-full border-3 border-black bg-white shadow-[4px_4px_0px_rgba(0,0,0,1)]">
+            <div className="phrases-progress-bar h-full bg-[#0EA5A4]" />
+          </div>
+        </div>
+      ) : (
+        <h2 className="mt-8 text-2xl sm:text-3xl font-black text-black tracking-tight uppercase leading-none">
+          Enter a phrase to build a mini lesson
+        </h2>
+      )}
+      <style>{`
+        @keyframes phrases-progress-slide {
+          0% { transform: translateX(-100%); }
+          100% { transform: translateX(300%); }
+        }
+        .phrases-progress-bar {
+          width: 33%;
+          animation: phrases-progress-slide 1.4s ease-in-out infinite;
+        }
+      `}</style>
     </div>
   );
 }

app/(app)/phrases/PhraseResult/KanjiCard.tsx

@@ -8,22 +8,22 @@ export function KanjiCard({ kanji }: { kanji: KanjiInfo }) {
         <div className="text-4xl font-black leading-none text-black">{kanji.kanji}</div>
         <div className="text-sm font-bold text-gray-700">{kanji.meaning}</div>
       </div>
-      <dl className="mt-4 space-y-2.5 text-xs">
+      <dl className="mt-4 space-y-3 text-base">
         <div className="flex items-center gap-2.5">
-          <dt className="w-10 shrink-0 text-[10px] font-black uppercase tracking-wider text-black bg-[#FFD21E] border border-black rounded py-0.5 text-center shadow-[1px_1px_0px_rgba(0,0,0,1)]">On</dt>
-          <dd className="text-black font-bold">
+          <dt className="w-12 shrink-0 text-xs font-black uppercase tracking-wider text-black bg-[#FFD21E] border-2 border-black rounded py-1 text-center shadow-[2px_2px_0px_rgba(0,0,0,1)]">On</dt>
+          <dd className="text-black font-black text-lg">
             {kanji.onyomi.length ? kanji.onyomi.join("、") : <span className="text-gray-300">—</span>}
           </dd>
         </div>
         <div className="flex items-center gap-2.5">
-          <dt className="w-10 shrink-0 text-[10px] font-black uppercase tracking-wider text-white bg-[#0EA5A4] border border-black rounded py-0.5 text-center shadow-[1px_1px_0px_rgba(0,0,0,1)]">Kun</dt>
-          <dd className="text-black font-bold">
+          <dt className="w-12 shrink-0 text-xs font-black uppercase tracking-wider text-white bg-[#0EA5A4] border-2 border-black rounded py-1 text-center shadow-[2px_2px_0px_rgba(0,0,0,1)]">Kun</dt>
+          <dd className="text-black font-black text-lg">
             {kanji.kunyomi.length ? kanji.kunyomi.join("、") : <span className="text-gray-300">—</span>}
           </dd>
         </div>
       </dl>
       {kanji.exampleWord ? (
-        <div className="mt-4 inline-flex rounded-lg bg-[#E6FBFA] border-2 border-black px-3 py-1.5 text-xs font-black text-black shadow-[2px_2px_0px_rgba(0,0,0,1)] has-furi">
+        <div className="mt-4 inline-flex rounded-lg bg-[#E6FBFA] border-2 border-black px-4 py-2 text-base font-black text-black shadow-[3px_3px_0px_rgba(0,0,0,1)] has-furi">
           <Furi
             text={kanji.exampleWord}
             segments={

app/(app)/phrases/PhraseResult/RelatedWordCard.tsx

@@ -6,7 +6,7 @@ export function RelatedWordCard({ word, lang }: { word: RelatedWord; lang: strin
   return (
     <div className="rounded-xl bg-white p-5 border-3 border-black shadow-[4px_4px_0px_rgba(0,0,0,1)] transition-all hover:translate-x-[-1px] hover:translate-y-[-1px] hover:shadow-[5px_5px_0px_rgba(0,0,0,1)]">
       <div className="flex items-center justify-between gap-2">
-        <div className={`text-base font-black text-black ${word.wordSegments ? "has-furi" : ""}`}>
+        <div className={`text-xl font-black text-black ${word.wordSegments ? "has-furi" : ""}`}>
           <Furi text={word.word} segments={word.wordSegments} />
         </div>
         <div className="flex items-center gap-2">
@@ -18,8 +18,8 @@ export function RelatedWordCard({ word, lang }: { word: RelatedWord; lang: strin
           <TTSButton text={word.word} lang={lang} />
         </div>
       </div>
-      <div className="mt-2 text-sm font-bold text-gray-700">{word.translation}</div>
-      {word.note ? <p className="mt-2 text-xs font-black text-gray-500">{word.note}</p> : null}
+      <div className="mt-3 text-base font-bold text-gray-700">{word.translation}</div>
+      {word.note ? <p className="mt-2 text-sm font-black text-gray-500">{word.note}</p> : null}
     </div>
   );
 }

app/(app)/phrases/PhraseResult/index.tsx

@@ -1,4 +1,4 @@
-import { Languages, Lightbulb, ListChecks, MessageSquareText, Sparkles } from "lucide-react";
+import { BookOpen, Languages, Lightbulb, ListChecks, MessageSquareText } from "lucide-react";
 import type { PhraseAnalysis } from "@/lib/hf/phrases";
 import { Section } from "./Section";
 import { HeaderCard } from "./HeaderCard";
@@ -36,7 +36,7 @@ export function PhraseResult({ result, lang }: { result: PhraseAnalysis; lang: s
       ) : null}
 
       {result.relatedWords.length > 0 ? (
-        <Section title="Related words" icon={<Sparkles size={22} />}>
+        <Section title="Related words" icon={<BookOpen size={22} strokeWidth={2.5} />}>
           <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
             {result.relatedWords.map((word, index) => (
               <RelatedWordCard key={`${word.word}-${index}`} word={word} lang={lang} />

app/(app)/phrases/PhrasesClient.tsx

@@ -94,7 +94,7 @@ export function PhrasesClient({ defaultLevel, lang }: { defaultLevel: Level; lan
           ) : null}
         </div>
 
-      {result ? <PhraseResult result={result} lang={lang} /> : <EmptyState />}
+      {isPending ? <EmptyState isPending /> : result ? <PhraseResult result={result} lang={lang} /> : <EmptyState />}
     </div>
   );
 }

components/TTSButton.tsx

@@ -76,13 +76,15 @@ export function TTSButton({
       aria-label={speaking ? "Stop speaking" : "Listen"}
       className={
         className ??
-        "rounded-full p-1.5 text-gray-400 transition-colors hover:bg-blue-50 hover:text-blue-600"
+        `rounded-lg border-2 border-black p-1.5 text-black shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] hover:shadow-[3px_3px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] active:shadow-[1px_1px_0px_rgba(0,0,0,1)] transition-all ${
+          speaking ? "bg-[#FF8080]" : "bg-[#FFD21E]"
+        }`
       }
     >
       {speaking ? (
-        <Square size={15} className="fill-current" />
+        <Square size={16} strokeWidth={3} className="fill-current" />
       ) : (
-        <Volume2 size={15} />
+        <Volume2 size={16} strokeWidth={3} />
       )}
     </button>
   );