problem: markdown styles not working

src/app.css

@@ -1,78 +1,97 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
- 
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
- 
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
- 
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
- 
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
- 
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
- 
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
- 
-    --ring: 20 14.3% 4.1%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
- 
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
- 
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
- 
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
- 
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
- 
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
- 
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
- 
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
- 
-    --ring: 24 5.7% 82.9%;
-  }
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 20 14.3% 4.1%;
+
+		--muted: 60 4.8% 95.9%;
+		--muted-foreground: 25 5.3% 44.7%;
+
+		--popover: 0 0% 100%;
+		--popover-foreground: 20 14.3% 4.1%;
+
+		--card: 0 0% 100%;
+		--card-foreground: 20 14.3% 4.1%;
+
+		--border: 20 5.9% 90%;
+		--input: 20 5.9% 90%;
+
+		--primary: 24 9.8% 10%;
+		--primary-foreground: 60 9.1% 97.8%;
+
+		--secondary: 60 4.8% 95.9%;
+		--secondary-foreground: 24 9.8% 10%;
+
+		--accent: 60 4.8% 95.9%;
+		--accent-foreground: 24 9.8% 10%;
+
+		--destructive: 0 72.2% 50.6%;
+		--destructive-foreground: 60 9.1% 97.8%;
+
+		--ring: 20 14.3% 4.1%;
+
+		--radius: 0.5rem;
+	}
+
+	.dark {
+		--background: 20 14.3% 4.1%;
+		--foreground: 60 9.1% 97.8%;
+
+		--muted: 12 6.5% 15.1%;
+		--muted-foreground: 24 5.4% 63.9%;
+
+		--popover: 20 14.3% 4.1%;
+		--popover-foreground: 60 9.1% 97.8%;
+
+		--card: 20 14.3% 4.1%;
+		--card-foreground: 60 9.1% 97.8%;
+
+		--border: 12 6.5% 15.1%;
+		--input: 12 6.5% 15.1%;
+
+		--primary: 60 9.1% 97.8%;
+		--primary-foreground: 24 9.8% 10%;
+
+		--secondary: 12 6.5% 15.1%;
+		--secondary-foreground: 60 9.1% 97.8%;
+
+		--accent: 12 6.5% 15.1%;
+		--accent-foreground: 60 9.1% 97.8%;
+
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 60 9.1% 97.8%;
+
+		--ring: 24 5.7% 82.9%;
+	}
 }
- 
+
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+.markdown p {
+	padding-bottom: 8px;
+}
+h1 {
+	padding-bottom: 12px;
+	font-size: x-large;
+	text-decoration: underline;
+}
+h2 {
+	padding-bottom: 10px;
+	font-size: larger;
+}
+code {
+	display: block;
+	margin: 12px;
+	background-blend-mode: lighten;
+	background-color: gray;
+}

src/components/ProblemView.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { mode } from 'mode-watcher';
 	import * as Card from '@/components/ui/card';
 	import type { Problem } from '@/event_helpers/problems';
 	import { ArrowBigLeft } from 'lucide-svelte';
@@ -14,7 +15,7 @@
 			{problem.para}
 		</p>
 		{#key problem.event.id}
-			<div class="text-left">
+			<div class="markdown text-left">
 				<Carta.CartaViewer carta={new Carta.Carta()} value={problem.page} />
 			</div>
 		{/key}
@@ -27,3 +28,6 @@
 		></Card.Root
 	>
 {/if}
+
+<style>
+</style>

src/layouts/MailLayout.svelte

@@ -9,7 +9,7 @@
 	import { PlusSolid } from 'svelte-awesome-icons';
 </script>
 
-<Resizable.PaneGroup direction="horizontal" class="h-full items-stretch">
+<Resizable.PaneGroup direction="horizontal" class="h-full items-stretch overflow-hidden">
 	<Resizable.Pane defaultSize={40} minSize={10} maxSize={50}>
 		<div
 			class="bg-background/95 p-2 pt-1 backdrop-blur supports-[backdrop-filter]:bg-background/60"
@@ -30,8 +30,7 @@
 
 	<Resizable.Handle withHandle />
 	<Resizable.Pane minSize={40} maxSize={85}
-		><ScrollArea class="h-full overflow-hidden pl-2 pr-2"><slot name="problem" /></ScrollArea
-		></Resizable.Pane
+		><ScrollArea class="h-full pl-2 pr-2"><slot name="problem" /></ScrollArea></Resizable.Pane
 	>
 	<Resizable.Handle withHandle />
 	<Resizable.Pane minSize={10} defaultSize={10} maxSize={30}