Smoother tab switch (no dark flash), full welcome sentence, chapter banner sticky and chip centered, floating math glyphs in headers, quiz reaction emojis

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

src/app/MainApp.tsx

@@ -74,15 +74,18 @@ function Screens({ onSignedOut }: Pick<Props, 'onSignedOut'>) {
 
   return (
     <>
-      <div className="relative flex-1 overflow-hidden">
+      <div className="relative flex-1 overflow-hidden bg-page">
         <AnimatePresence mode="popLayout" initial={false}>
           <motion.div
             key={JSON.stringify(route)}
-            className="absolute inset-0 flex flex-col"
-            initial={{ opacity: 0, x: -18 }}
+            className="absolute inset-0 flex flex-col bg-page"
+            initial={{ opacity: 0, x: -14 }}
             animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: 18 }}
-            transition={{ duration: 0.18 }}
+            // صفحه‌ی قبلی نمی‌پرد و محو نمی‌شود، زیرِ صفحه‌ی تازه می‌ماند تا کامل بیاید. با محوشدنِ هم‌زمانِ
+            // هر دو، پس‌زمینه‌ی تیره‌ی body از وسط دیده می‌شد و تعویضِ تب «گلیچ» می‌زد (از روی کد؛ با
+            // فیلمِ دستگاهِ واقعی سنجیده نشده).
+            exit={{ opacity: 1, x: 0, transition: { duration: 0.16 } }}
+            transition={{ duration: 0.16, ease: 'easeOut' }}
           >
             <Suspense fallback={<LoadingState />}>
               <RouteView route={route} onSignedOut={onSignedOut} />