feat(voiceover): add reading guidance panel to the teleprompter

src/components/frontend/voiceover/TeleprompterReader.tsx

@@ -367,6 +367,25 @@ export function TeleprompterReader({ script }: { readonly script: string }) {
           <GaugeIcon className="size-3.5" />
           <span>Constant scroll speed · {scrollSpeed} px/s</span>
         </div>
+        <div className="flex flex-col gap-1 rounded-md border border-border bg-background/50 p-3 text-xs text-muted-foreground">
+          <p>
+            <span className="font-medium text-foreground">How to read:</span> read every word shown
+            in large text — underlined and plain alike.
+          </p>
+          <p>
+            The small colored labels above the text (
+            <span className="italic text-sky-300/80">like this</span>) are directions for how to
+            speak — never read them aloud. Each underlined stretch is the wording its label above
+            applies to.
+          </p>
+          <p>
+            Rows marked with an icon (
+            <AudioLinesIcon className="mx-0.5 inline size-3 align-baseline" aria-hidden /> sound
+            cues,{" "}
+            <SlidersHorizontalIcon className="mx-0.5 inline size-3 align-baseline" aria-hidden />{" "}
+            technical notes) are not spoken either.
+          </p>
+        </div>
       </CardContent>
     </Card>
   );