Preferences in Settings and a home page the user chooses

Settings gets a Preferences section: theme, default Bible, the Bible new reading
plans start in, verse layout, commentary, text size, reading width, audio
narrator (the last three stay per device; text size and narrator are now
remembered). A Home page setting (My Studies, Bible Reader or Reading Plans)
decides where the app opens and where every Home button goes; already being
there means My Studies. Back arrows are labelled Home. Tests cover every page
leading back.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/study/PageShell.jsx

@@ -61,8 +61,8 @@ function AccountMenu() {
 }
 
 export default function PageShell({ title, onBack, actions, active = null, maxWidth = 'max-w-6xl', children }) {
-  const { readerTheme, goHome, openBibleReader, openReadingPlans } = useApp();
-  const go = { studies: goHome, reader: openBibleReader, plans: openReadingPlans };
+  const { readerTheme, goHome, goStudies, openBibleReader, openReadingPlans } = useApp();
+  const go = { studies: goStudies, reader: openBibleReader, plans: openReadingPlans };
   return (
     <div className="min-h-screen bg-[var(--r-bg)] font-sans text-[var(--r-text)]" style={themeVars(readerTheme)}>
       <header className="sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)]">

src/components/study/StudioShell.jsx

@@ -26,8 +26,8 @@ export default function StudioShell({ stage, loading = false, fixedHeight = fals
     <div className={`bg-[var(--r-bg)] font-sans text-[var(--r-text)] ${fixedHeight ? 'flex h-screen flex-col overflow-hidden' : 'min-h-screen'}`} style={themeVars(readerTheme)}>
       <div className="z-30 shrink-0 border-b border-[var(--r-line)] bg-[var(--r-bar)]">
         <div className="mx-auto flex h-12 max-w-[1600px] items-center gap-3 px-3">
-          <button type="button" onClick={goHome} aria-label="Back to studies"
-            className="flex h-9 w-9 items-center justify-center rounded-lg text-[var(--r-sub)] hover:bg-black/5"><ChevronLeft /></button>
+          <button type="button" onClick={goHome} aria-label="Back to home"
+            className="flex h-9 items-center gap-0.5 rounded-lg pl-1 pr-2 text-[var(--r-sub)] hover:bg-black/5"><ChevronLeft /><span className="hidden text-xs sm:inline">Home</span></button>
           <div className="min-w-0 max-w-[16rem] truncate text-sm font-medium">{project?.title ?? ''}</div>
           <nav aria-label="Study stages" className="mx-auto flex gap-0.5">
             {STAGES.map((s) => {