Jotai Devtools spits out a mismatched server/client props warning when used in Nextjs 14

> Warning: Prop `style` did not match. Server: "--ai-radius:50%;--ai-bg:var(--mantine-color-dark-filled);--ai-hover:var(--mantine-color-dark-filled-hover);--ai-color:var(--mantine-color-white);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;border-width:0;z-index:99999;width:calc(4rem * var(--mantine-scale));height:calc(4rem * var(--mantine-scale));position:fixed;top:unset;left:0.2rem;bottom:0.2rem;right:unset" Client: "--ai-radius:50%;--ai-bg:var(--mantine-color-gray-3);--ai-hover:var(--mantine-color-gray-4);--ai-color:var(--mantine-color-white);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;border-width:0;z-index:99999;width:calc(4rem * var(--mantine-scale));height:calc(4rem * var(--mantine-scale));position:fixed;top:unset;left:0.2rem;bottom:0.2rem;right:unset"

`store/index.ts`
```ts
import { createStore } from 'jotai';

const store = createStore()

export default store;
```

`ClientProviders.tsx`
```ts
"use client";

import store from "@/store";
import { Provider } from "jotai";
import { DevTools } from "jotai-devtools";
import { ReactNode } from "react";

import "jotai-devtools/styles.css";

export default function ClientProviders({ children }: { children: ReactNode }) {
return (


{children}

);
}
```

`layout.tsx`
```ts
import ClientProviders from "@/providers/ClientProviders";
import "./globals.css";

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (


{children}


);
}
```

Reproduce the warning with the shown store/index.ts, ClientProviders.tsx, and layout.tsx setup in Next.js 14. Start by tracing DevTools styling during server rendering and client hydration, then verify the fix by confirming the server and client style props match without the hydration warning.

Written by the indexing model from the issue text.