fix x overflow on page transition

src/app.css

@@ -121,3 +121,8 @@ body.extra-dark-theme {
 	background-color: #000;
 	filter: brightness(0.1);
 }
+
+body.sandcat-mode {
+	--background-color: transparent;
+	--background-color-alt: #0006;
+}

src/routes/(main)/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import '../../app.css'
 	import { fly } from 'svelte/transition'
-	import type { LayoutData } from '../$types'
+	import type { LayoutData } from './$types'
 	import { browser } from '$app/environment'
 	import { writable } from 'svelte/store'
 	import { onMount } from 'svelte'
@@ -130,10 +130,12 @@
 		flex-direction: column;
 		justify-content: space-between;
 		align-items: stretch;
-		overflow-x: hidden;
 		overflow-wrap: break-word;
 		position: relative;
 	}
+	:global(body) {
+		overflow-x: hidden;
+	}
 
 	main {
 		padding: 1em;

src/routes/(main)/+page.svelte

@@ -105,6 +105,8 @@
 		sandcatContainerEl.style.lineHeight = '0'
 		document.body.appendChild(sandcatContainerEl)
 
+		document.body.classList.add('sandcat-mode')
+
 		let mustWait = true
 
 		;(async () => {