<script lang="ts">
	import Header from '$lib/components/Header.svelte';
	import Playground from '$lib/components/Playground.svelte';
</script>

<div class="bg-background text-foreground flex min-h-screen flex-col">
	<Header />
	<div class="flex flex-1 overflow-hidden">
		<Playground />
	</div>
</div>

<style>
	:global(body) {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		background: white;
	}

	:global(*) {
		box-sizing: border-box;
	}

	:global(textarea:focus) {
		outline: none;
	}

	:global(pre) {
		margin: 0;
		font-family:
			'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
	}
</style>
