diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6a612e3a..7e93473d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -11,10 +11,12 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
-
+
+
+
diff --git a/src/components/donut-lab.tsx b/src/components/donut-lab.tsx
index e6b07c09..4cff0112 100644
--- a/src/components/donut-lab.tsx
+++ b/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() ||
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0a1b211e..1d1b2486 100644
--- a/src/styles/globals.css
+++ b/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,