New source found from dndbeyond.com

ddb_main/routes/max-characters-message.tsx

@@ -1,33 +1,36 @@
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
+import clsx from "clsx";
+import { useLayoutEffect } from "react";
 
 import { MaxCharactersMessageText } from "~/components/MaxCharactersMessageText";
 
-import { DDB_MEDIA_URL } from "../constants";
+import styles from "./max-characters-message.module.css";
 
 export const MaxCharactersMessage = () => {
+  //This mimics the same body classes as CharacterBuilderContainer.tsx
+  useLayoutEffect(() => {
+    document
+      .getElementsByTagName("body")[0]
+      .classList.add(
+        "site",
+        "body-rpgcharacterbuilder",
+        "site-dndbeyond",
+        "body-rpgcharacter"
+      );
+    return () => {
+      document
+        .getElementsByTagName("body")[0]
+        .classList.remove(
+          "site",
+          "body-rpgcharacterbuilder",
+          "site-dndbeyond",
+          "body-rpgcharacter"
+        );
+    };
+  }, []);
   return (
-    <Box
-      sx={{
-        width: "100%",
-        height: "calc(100vh - 114px)",
-        background: `url("${DDB_MEDIA_URL}/attachments/1/614/builder1k.jpg") no-repeat center 0px, url("${DDB_MEDIA_URL}/attachments/0/84/background_texture.png") #f9f9f9 !important`,
-      }}
-      justifyContent="center"
-      display="flex"
-    >
-      <Stack
-        justifyContent="center"
-        sx={{
-          padding: "20px",
-          "& > :not(style)": { padding: "20px" },
-          maxWidth: "650px",
-          height: "auto",
-        }}
-      >
-        <MaxCharactersMessageText includeTitle={true} useLinks={true} />
-      </Stack>
-    </Box>
+    <div className={clsx([styles.page])}>
+      <MaxCharactersMessageText includeTitle={true} useLinks={true} />
+    </div>
   );
 };