Move the pre-paint scripts out of <head> so cold loads stop failing to hydrate

app/layout.tsx

@@ -67,11 +67,16 @@ export default function RootLayout({
       suppressHydrationWarning
       className={`${syne.variable} ${grotesk.variable} ${jetbrains.variable}`}
     >
-      <head>
+      <body>
+        {/* These run before the first paint. They sit at the top of <body>,
+            not in <head>: while React was still hydrating hand-written nodes in
+            <head>, the webpack runtime could remove the chunk <script> tags it
+            had finished loading from there, and on a cold load hydration then
+            failed now and then (React error #418) and the whole root was
+            rendered again on the client. Moving these two scripts out of
+            <head> removed that failure in AlgoAlgo, whose shell is the same. */}
         <script dangerouslySetInnerHTML={{ __html: themeScript }} />
         <script dangerouslySetInnerHTML={{ __html: langScript }} />
-      </head>
-      <body>
         <LangProvider>
           <ThemeProvider>
             <ShellProvider>

app/theme-provider.tsx

@@ -2,8 +2,9 @@
 
 // App-level client providers.
 //  - ThemeProvider: mirrors data-theme ("dark" | "light") onto <html> and
-//    persists it in localStorage. The inline script in <head> (themeScript)
-//    sets it before the first paint, so the wrong theme never flashes.
+//    persists it in localStorage. The inline script at the top of <body>
+//    (themeScript) sets it before the first paint, so the wrong theme never
+//    flashes.
 //    The providers read their settings back from localStorage, not from the
 //    <html> attributes: if React gives up hydrating the root, it renders it
 //    again on the client and drops the attributes the inline script wrote,