fix: one font app-wide

src/app/layout.tsx

@@ -11,10 +11,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${GeistSans.variable} ${GeistMono.variable} antialiased overflow-hidden bg-background`}
-      >
+    <html
+      lang="en"
+      className={`${GeistSans.variable} ${GeistMono.variable}`}
+      suppressHydrationWarning
+    >
+      <body className="antialiased overflow-hidden bg-background">
         <ClientProviders>{children}</ClientProviders>
       </body>
     </html>

src/app/page.tsx

@@ -2946,7 +2946,7 @@ export default function Home() {
       enabled={currentPage === "profiles"}
       onAssign={handleDropProfilesToGroup}
     >
-      <div className="flex h-dvh flex-col bg-background font-(family-name:--font-geist-sans)">
+      <div className="flex h-dvh flex-col bg-background">
         <CloseConfirmDialog />
         <HomeHeader
           onCreateProfileDialogOpen={(open) =>

src/components/donut-lab.tsx

@@ -106,10 +106,7 @@ function resolvePalette(host: HTMLElement): Palette {
   return { foreground, sprinkles, ink };
 }
 
-/**
- * The mono font stack. The `font-mono` class does not reach it: the theme
- * reads --font-geist-mono at :root, and next/font sets it on body.
- */
+/** The mono font stack: a canvas takes a font string, not a CSS class. */
 function monoFamily(host: HTMLElement) {
   return (
     getComputedStyle(host).getPropertyValue("--font-geist-mono").trim() ||

src/styles/globals.css

@@ -4,7 +4,6 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  /* The Geist variables live on body, so at :root these use the fallbacks. */
   --font-sans: var(--font-geist-sans, ui-sans-serif, system-ui, sans-serif);
   --font-mono: var(
     --font-geist-mono,