;s;

app/read/page.tsx

@@ -13,7 +13,7 @@ export const metadata = {
 
 export default function ReadPage() {
   return (
-    <div className="relative min-h-screen">
+    <div className="relative min-h-screen bg-[var(--background)] text-[var(--foreground)]">
       <SiteHeader ctaLabel="Home" ctaHref="/" showBack />
       <ReadingProgress />
 
@@ -60,7 +60,7 @@ export default function ReadPage() {
             ))}
           </article>
 
-          <footer className="mt-16 rounded-2xl border border-[var(--border)] bg-[var(--surface)] px-6 py-10 text-center backdrop-blur-md sm:mt-20">
+          <footer className="glass-card mt-16 px-6 py-10 text-center sm:mt-20">
             <p className="font-display text-lg font-bold text-[var(--foreground)]">
               You&apos;ve finished the trailhead
             </p>