diff --git a/package.json b/package.json
index 56548dc..74c730a 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,12 @@
   },
   "devDependencies": {
     "@codemirror/lang-python": "^6.2.1",
-    "@codemirror/view": "^6.43.1",
+    "@codemirror/theme-one-dark": "^6.1.3",
     "@eslint/js": "^10.0.1",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.49.1",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^24",
     "codemirror": "^6.0.2",
     "eslint": "^10.4.1",
@@ -30,6 +31,7 @@
     "pyodide": "^314.0.0",
     "svelte": "^5.56.3",
     "svelte-check": "^4.3.4",
+    "tailwindcss": "^4.3.3",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.60.1",
     "vite": "^7.2.6",
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..f1d8c73
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/src/lib/playground/Editor.svelte b/src/lib/playground/Editor.svelte
new file mode 100644
index 0000000..9bbb5c6
--- /dev/null
+++ b/src/lib/playground/Editor.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { EditorView } from "codemirror";
+  import { onMount } from "svelte";
+
+  type Props = {
+    value: string;
+    onupdate: (value: string) => void;
+    onload: () => void;
+  };
+
+  let { value, onupdate, onload }: Props = $props();
+
+  let element: HTMLDivElement;
+  let view: EditorView | undefined;
+
+  let loading = $state(true);
+
+  const setup = async () => {
+    const [{ basicSetup, EditorView }, { python }, { oneDark }] =
+      await Promise.all([
+        import("codemirror"),
+        import("@codemirror/lang-python"),
+        import("@codemirror/theme-one-dark"),
+      ]);
+
+    loading = false;
+
+    view = new EditorView({
+      doc: value,
+      extensions: [
+        basicSetup,
+        oneDark,
+        EditorView.theme({
+          "&": {
+            height: "100%",
+            fontSize: "14px",
+          },
+        }),
+        python(),
+      ],
+      parent: element,
+
+      dispatchTransactions: (txs, view) => {
+        view.update(txs);
+        onupdate(view.state.doc.toString());
+      },
+    });
+
+    onload();
+  };
+
+  onMount(() => {
+    setup();
+    return () => {
+      view?.destroy();
+    };
+  });
+</script>
+
+<div class="h-full w-full" id="editor" bind:this={element}>
+  {#if loading}
+    Loading...
+  {/if}
+</div>
diff --git a/src/lib/playground/StatusBar.svelte b/src/lib/playground/StatusBar.svelte
new file mode 100644
index 0000000..624f01c
--- /dev/null
+++ b/src/lib/playground/StatusBar.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Status } from "$lib/playground/lib/state";
+  import StatusItem from "$lib/playground/components/StatusItem.svelte";
+
+  type Props = { status: Status };
+
+  let { status }: Props = $props();
+</script>
+
+<div
+  class="min-h-6 max-h-6 px-2 flex justify-between items-center bg-gray-950 text-blue-50 text-xs font-medium"
+>
+  <div>
+    <p>
+      {#if status.has_unsaved_changes}
+        Unsaved changes
+      {:else}
+        Up to date
+      {/if}
+    </p>
+  </div>
+
+  <div class="flex gap-2">
+    <StatusItem
+      type="Evaluate"
+      success={status.eval_success}
+      time={status.eval_time}
+    />
+    <StatusItem
+      type="Check"
+      success={status.check_success}
+      time={status.check_time}
+    />
+  </div>
+</div>
diff --git a/src/lib/playground/Terminal.svelte b/src/lib/playground/Terminal.svelte
new file mode 100644
index 0000000..194b825
--- /dev/null
+++ b/src/lib/playground/Terminal.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { type Stdout } from "$lib/playground/lib/stdout.svelte";
+  type Props = { terminalHeight: number | undefined; stdout: Stdout };
+  let { terminalHeight, stdout }: Props = $props();
+
+  const MIN_HEIGHT = 128;
+
+  let height = $derived(terminalHeight ?? MIN_HEIGHT);
+</script>
+
+<div
+  class="min-h-32 font-mono p-2 overflow-y-scroll overflow-x-clip"
+  style="height: {height}px; min-height: {MIN_HEIGHT}px; max-height: {height}px;"
+>
+  {#each $state.eager(stdout.lines) as line, index (index)}
+    <p class="whitespace-pre m-0 {line.is_err ? 'text-red-500' : 'text-white'}">
+      {line.content}
+    </p>
+  {/each}
+</div>
diff --git a/src/lib/playground/TerminalDragger.svelte b/src/lib/playground/TerminalDragger.svelte
new file mode 100644
index 0000000..5ba0931
--- /dev/null
+++ b/src/lib/playground/TerminalDragger.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  type Props = { setHeight: (height: number) => void };
+  let { setHeight }: Props = $props();
+
+  let availableHeight: number | undefined = $state();
+
+  // when the dragger is clicked, we register an event listener for mouse movement,
+  // in order to extract the y position of the mouse. when the click is released
+  // (i.e. user has stopped click-and-dragging), we deregister the event listener.
+  //
+  // TODO: check mobile. there is a touchdown or similar event. pointer down might
+  // be more approrpriate and cover both.
+  //
+  const onmousedown = () => {
+    const onmousemove = ({ clientY }: MouseEvent) => {
+      if (availableHeight === undefined) {
+        return;
+      }
+
+      // the height of the window, offset by the mouse y position,
+      // minus the height of this dragger element itself, minus
+      // the statusbar height
+      const proposedHeight = availableHeight - clientY - 24;
+
+      // these aren't strictly necessary, but it will make it easier
+      // to not break anything here
+      const minHeight = 128;
+      const maxHeight = (availableHeight / 3) * 2;
+
+      const boundedHeight = Math.max(
+        minHeight,
+        Math.min(maxHeight, proposedHeight),
+      );
+
+      setHeight(boundedHeight);
+    };
+
+    const onmouseup = () => {
+      window.removeEventListener("mouseup", onmouseup);
+      window.removeEventListener("mousemove", onmousemove);
+    };
+
+    window.addEventListener("mouseup", onmouseup);
+    window.addEventListener("mousemove", onmousemove);
+  };
+</script>
+
+<svelte:window bind:innerHeight={availableHeight} />
+
+<button
+  {onmousedown}
+  aria-label="Resize terminal"
+  class="h-px bg-gray-700 hover:bg-gray-600 active:bg-blue-900 flex justify-center items-center cursor-ns-resize group"
+>
+  <div class=" z-10 w-full flex justify-center">
+    <div
+      class="size-5 text-blue-200 bg-gray-700/50 group-hover:bg-gray-500/50 group-active:bg-blue-900/50 rounded-full flex justify-center items-center"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        fill="currentColor"
+        class="size-4"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M5.22 10.22a.75.75 0 0 1 1.06 0L8 11.94l1.72-1.72a.75.75 0 1 1 1.06 1.06l-2.25 2.25a.75.75 0 0 1-1.06 0l-2.25-2.25a.75.75 0 0 1 0-1.06ZM10.78 5.78a.75.75 0 0 1-1.06 0L8 4.06 6.28 5.78a.75.75 0 0 1-1.06-1.06l2.25-2.25a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1 0 1.06Z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </div>
+  </div>
+</button>
diff --git a/src/lib/playground/Toolbar.svelte b/src/lib/playground/Toolbar.svelte
new file mode 100644
index 0000000..4b5a9b7
--- /dev/null
+++ b/src/lib/playground/Toolbar.svelte
@@ -0,0 +1,33 @@
+<script>
+  import Kbd from "./components/Kbd.svelte";
+  import ToolbarButton from "./components/ToolbarButton.svelte";
+  import ToolbarLink from "./components/ToolbarLink.svelte";
+
+  let { check, run, is_busy } = $props();
+</script>
+
+<div class="flex h-10">
+  <ToolbarLink href="/">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      class="size-4"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M12.5 9.75A2.75 2.75 0 0 0 9.75 7H4.56l2.22 2.22a.75.75 0 1 1-1.06 1.06l-3.5-3.5a.75.75 0 0 1 0-1.06l3.5-3.5a.75.75 0 0 1 1.06 1.06L4.56 5.5h5.19a4.25 4.25 0 0 1 0 8.5h-1a.75.75 0 0 1 0-1.5h1a2.75 2.75 0 0 0 2.75-2.75Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+
+    <p>PurePy</p></ToolbarLink
+  >
+
+  <span class="ml-auto"></span>
+  <ToolbarButton onclick={check} busy={is_busy}>Check</ToolbarButton>
+  <ToolbarButton onclick={run} busy={is_busy}>
+    Run
+    <Kbd>⌘S</Kbd>
+  </ToolbarButton>
+</div>
diff --git a/src/lib/playground/components/Kbd.svelte b/src/lib/playground/components/Kbd.svelte
new file mode 100644
index 0000000..69915ca
--- /dev/null
+++ b/src/lib/playground/components/Kbd.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div
+  class=" border-gray-500 border px-1 rounded-sm text-xs font-light font-sans"
+>
+  {@render children()}
+</div>
diff --git a/src/lib/playground/components/StatusItem.svelte b/src/lib/playground/components/StatusItem.svelte
new file mode 100644
index 0000000..448d677
--- /dev/null
+++ b/src/lib/playground/components/StatusItem.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  type Props = {
+    type: "Check" | "Evaluate";
+    success: boolean | null;
+    time: number;
+  };
+
+  let { type, success, time }: Props = $props();
+</script>
+
+<div class="flex items-center gap-1">
+  <div class="shrink-0">
+    {#if success === true}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        fill="currentColor"
+        class="size-4 text-green-500"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    {:else if success === false}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        fill="currentColor"
+        class="size-4 text-red-500"
+      >
+        <path
+          d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
+        />
+      </svg>
+    {/if}
+  </div>
+
+  {#if success !== null}
+    <p>
+      <span>{type}</span>
+      <span class="text-gray-400 font-light ml-0.5">{time}ms</span>
+    </p>
+  {/if}
+</div>
diff --git a/src/lib/playground/components/ToolbarButton.svelte b/src/lib/playground/components/ToolbarButton.svelte
new file mode 100644
index 0000000..567b332
--- /dev/null
+++ b/src/lib/playground/components/ToolbarButton.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import ToolbarItem from "./ToolbarItem.svelte";
+
+  let { children, onclick, busy = false } = $props();
+</script>
+
+<button
+  {onclick}
+  disabled={busy}
+  class="h-full {busy ? 'cursor-wait' : 'cursor-pointer'}"
+  type="button"
+>
+  <ToolbarItem>
+    {@render children()}
+  </ToolbarItem>
+</button>
diff --git a/src/lib/playground/components/ToolbarItem.svelte b/src/lib/playground/components/ToolbarItem.svelte
new file mode 100644
index 0000000..285c656
--- /dev/null
+++ b/src/lib/playground/components/ToolbarItem.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div
+  class="h-full inline-flex items-center gap-x-1.5 px-2.5 py-1 text-sm font-semibold text-white shadow-xs hover:bg-zinc-700"
+>
+  {@render children()}
+</div>
diff --git a/src/lib/playground/components/ToolbarLink.svelte b/src/lib/playground/components/ToolbarLink.svelte
new file mode 100644
index 0000000..2e8da00
--- /dev/null
+++ b/src/lib/playground/components/ToolbarLink.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import ToolbarItem from "./ToolbarItem.svelte";
+
+  let { children, href, external = false } = $props();
+</script>
+
+<a class="h-full" target={external ? "_blank" : "_self"} {href}>
+  <ToolbarItem>
+    {@render children()}
+
+    {#if external}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        fill="currentColor"
+        class="h-4 w-4"
+      >
+        <path
+          d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69L6.22 8.72Z"
+        />
+        <path
+          d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5Z"
+        />
+      </svg>
+    {/if}
+  </ToolbarItem>
+</a>
diff --git a/src/routes/playground/purepy.ts b/src/lib/playground/lib/purepy.ts
similarity index 75%
rename from src/routes/playground/purepy.ts
rename to src/lib/playground/lib/purepy.ts
index 0359fd2..7cd2514 100644
--- a/src/routes/playground/purepy.ts
+++ b/src/lib/playground/lib/purepy.ts
@@ -8,7 +8,7 @@ import reasons_py from "$lib/assets/reasons.py?raw";
 import { type PyodideAPI } from "pyodide";
 import type { Stdout } from "./stdout.svelte";
 
-const ParseError = z.object({
+const PurePyError = z.object({
   msg: z.string(),
   line: z.optional(z.number()),
   col: z.optional(z.number()),
@@ -22,7 +22,7 @@ const capture_err = (fn: () => unknown) => {
     return { success: true } as const;
   }
 
-  const error = ParseError.parse(result);
+  const error = PurePyError.parse(result);
 
   return { success: false, error } as const;
 };
@@ -55,15 +55,32 @@ export class PurePy {
   };
 
   run = (src: string) => {
-    const result: unknown = this.pyodide.runPython(src);
-    return result;
+    try {
+      const result: unknown = this.pyodide.runPython(src);
+      return result;
+    } catch (error) {
+      // something went wrong in Python/Pyodide
+      console.error(error);
+      return {
+        msg: "Unhandled exception (see console)",
+      };
+    }
   };
 
   parse = (path: string) =>
     capture_err(() =>
       this.run(`
         import parse
-        parse.check_file("${path}")
+        def fn():
+          try:
+            parse.check_file("${path}")
+          except SyntaxError as err:
+            return {
+              "msg": "Syntax error",
+              "line": err.lineno,
+              "col": err.offset
+            }
+        fn()
       `),
     );
 
@@ -76,7 +93,7 @@ export class PurePy {
       `),
     );
 
-  evaluate = (src: string) => {
+  parse_and_check = (src: string) => {
     const path = this.write_file("whatever.purepy", src);
 
     const parse_result = this.parse(path);
@@ -89,6 +106,10 @@ export class PurePy {
       return check_result;
     }
 
+    return { success: true, error: null } as const;
+  };
+
+  evaluate = (src: string) => {
     const result = this.run(src);
     return { success: true, output: result } as const;
   };
diff --git a/src/lib/playground/lib/state.ts b/src/lib/playground/lib/state.ts
new file mode 100644
index 0000000..55bf43d
--- /dev/null
+++ b/src/lib/playground/lib/state.ts
@@ -0,0 +1,12 @@
+// TODO: something more sensible
+export type Status = {
+  has_unsaved_changes: boolean;
+  check_success: boolean | null;
+  eval_success: boolean | null;
+  is_running_check: boolean;
+  is_running_evaluate: boolean;
+  is_pyodide_ready: boolean;
+  is_codemirror_ready: boolean;
+  check_time: number;
+  eval_time: number;
+};
diff --git a/src/routes/playground/stdout.svelte.ts b/src/lib/playground/lib/stdout.svelte.ts
similarity index 100%
rename from src/routes/playground/stdout.svelte.ts
rename to src/lib/playground/lib/stdout.svelte.ts
diff --git a/src/routes/(home)/+layout.svelte b/src/routes/(home)/+layout.svelte
new file mode 100644
index 0000000..000451c
--- /dev/null
+++ b/src/routes/(home)/+layout.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import "$lib/styles.css";
+  import { headerLinks } from "$lib/config/nav";
+  import logo from "$lib/assets/image/logo.png";
+
+  let { children } = $props();
+</script>
+
+<header class="site-header">
+  <a class="brand" href="#top"
+    ><img class="brand-logo" src={logo} alt="PurePy" /></a
+  >
+  <nav class="site-nav">
+    {#each headerLinks as { url, title } (url)}
+      <a href={url}>{title}</a>
+    {/each}
+  </nav>
+</header>
+
+<main>
+  {@render children()}
+</main>
+
+<footer class="site-footer">
+  <div class="footer-inner">
+    <p>© PurePy contributors</p>
+    <nav>
+      <a href="https://github.com/pure-py/pure-py-spec">GitHub</a>
+      <a href="https://github.com/pure-py/pure-py-spec/releases/latest"
+        >Specification (PDF)</a
+      >
+    </nav>
+  </div>
+</footer>
diff --git a/src/routes/+page.svelte b/src/routes/(home)/+page.svelte
similarity index 100%
rename from src/routes/+page.svelte
rename to src/routes/(home)/+page.svelte
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 000451c..3fa208a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,34 +1,6 @@
 <script lang="ts">
-  import "$lib/styles.css";
-  import { headerLinks } from "$lib/config/nav";
-  import logo from "$lib/assets/image/logo.png";
-
+  import "../app.css";
   let { children } = $props();
 </script>
 
-<header class="site-header">
-  <a class="brand" href="#top"
-    ><img class="brand-logo" src={logo} alt="PurePy" /></a
-  >
-  <nav class="site-nav">
-    {#each headerLinks as { url, title } (url)}
-      <a href={url}>{title}</a>
-    {/each}
-  </nav>
-</header>
-
-<main>
-  {@render children()}
-</main>
-
-<footer class="site-footer">
-  <div class="footer-inner">
-    <p>© PurePy contributors</p>
-    <nav>
-      <a href="https://github.com/pure-py/pure-py-spec">GitHub</a>
-      <a href="https://github.com/pure-py/pure-py-spec/releases/latest"
-        >Specification (PDF)</a
-      >
-    </nav>
-  </div>
-</footer>
+{@render children()}
diff --git a/src/routes/playground/+page.svelte b/src/routes/playground/+page.svelte
index 0bd4508..43cae4f 100644
--- a/src/routes/playground/+page.svelte
+++ b/src/routes/playground/+page.svelte
@@ -1,45 +1,141 @@
 <script lang="ts">
   import example_py from "$lib/assets/examples/example.py?raw";
-  import CodeMirror from "./Editor.svelte";
-  import { PurePy } from "./purepy";
-  import { Stdout } from "./stdout.svelte";
+  import CodeMirror from "$lib/playground/Editor.svelte";
+  import { PurePy } from "$lib/playground/lib/purepy";
+  import { Stdout } from "$lib/playground/lib/stdout.svelte";
+  import StatusBar from "$lib/playground/StatusBar.svelte";
+  import Terminal from "$lib/playground/Terminal.svelte";
+  import TerminalDragger from "$lib/playground/TerminalDragger.svelte";
+  import Toolbar from "$lib/playground/Toolbar.svelte";
   import { onMount } from "svelte";
 
+  let terminalHeight: number | undefined = $state(undefined);
+
   let stdout = new Stdout();
   let purepy: PurePy | undefined = undefined;
 
-  let src_saved = $state<string | null>(null);
-  let src_unsaved = $state<string>(example_py);
-  // let has_unsaved_changes = $derived<boolean>(src_saved !== src_unsaved);
-  let is_running = $state<boolean>(false);
-  let is_ready = $state<boolean>(false);
+  // TODO: once we are happy we have all the state we need,
+  // we should simplify this!!
+
+  let src_saved = $state(example_py);
+  let src_unsaved = $state(example_py);
+  let has_unsaved_changes = $derived(src_saved !== src_unsaved);
+
+  let is_running_check = $state(false);
+  let is_running_evaluate = $state(false);
+  let is_running = $derived(is_running_check || is_running_evaluate);
+
+  let is_pyodide_ready = $state(false);
+  let is_codemirror_ready = $state(false);
+  let is_busy = $derived(
+    !is_pyodide_ready || !is_codemirror_ready || is_running,
+  );
+
+  let check_success: boolean | null = $state(null);
+  let eval_success: boolean | null = $state(null);
+
+  let check_time = $state(0);
+  let eval_time = $state(0);
+
+  const status = $derived({
+    has_unsaved_changes,
+    check_success,
+    eval_success,
+    is_running_check,
+    is_running_evaluate,
+    is_pyodide_ready,
+    is_codemirror_ready,
+    check_time,
+    eval_time,
+  });
 
-  const save_and_run = async () => {
-    if (is_running || !is_ready || purepy === undefined) {
+  const save = () => {
+    if (!has_unsaved_changes) {
+      // nothing to do...
       return;
     }
-    is_running = true;
     src_saved = src_unsaved;
+    check_success = null;
+    eval_success = null;
+  };
 
+  // all of our actions are very fast, so it is okay to defer
+  // 'saving' if an action is running, but we may want to change this
+  // later.
+  const statefully = (fn: (purepy: PurePy) => void) => {
+    if (is_busy || purepy === undefined) {
+      console.error("I'm in a bad state...");
+      return;
+    }
+    is_running = true;
     try {
-      const result = purepy.evaluate(src_saved);
-
-      if (!result.success) {
-        stdout.write_err(result.error.msg);
-        return;
-      }
-
-      stdout.write(`Result: ${result.output}`);
+      fn(purepy);
+    } catch (error) {
+      // TODO: see what errors might come out of Pyodide and if/how we should handle
+      // them, in the meantime, don't crash the page
+      console.error(error);
     } finally {
       is_running = false;
     }
   };
 
+  // don't use this unless you are inside a `statefully` already
+  const _check_saved = (purepy: PurePy) => {
+    const start_t = Date.now();
+    const { success, error } = purepy.parse_and_check(src_saved);
+    check_time = Date.now() - start_t;
+    check_success = success;
+    if (!success) {
+      stdout.write_err(error.msg);
+    }
+    return success;
+  };
+
+  const check = () =>
+    statefully((purepy) => {
+      save();
+      const success = _check_saved(purepy);
+      stdout.write(success ? `Check ok!` : `Check failed!`);
+    });
+
+  const run = () =>
+    statefully((purepy) => {
+      save();
+      const check_ok = _check_saved(purepy);
+      if (!check_ok) {
+        // what should we do here? should we even check here?
+        // should we refuse to run?
+        stdout.write("Check failed, running anyway:");
+      }
+
+      stdout.write("--- stdout ---");
+
+      // TODO: this is always successful, but surely not,
+      // we should catch runtime errors!
+      const start_t = Date.now();
+      const { success, output } = purepy.evaluate(src_saved);
+      eval_time = Date.now() - start_t;
+      eval_success = success;
+
+      stdout.write("--- result ---");
+
+      // if the program ends in a value expression, we get that
+      // value here (otherwise undefined)
+      const result = output === undefined ? "<no result>" : output;
+      // TODO: figure out the possible, sensible output types and handle them properly,
+      // in the meantime at least avoid [object Object]
+      stdout.write(
+        typeof result === "object" ? JSON.stringify(result) : `${result}`,
+      );
+
+      stdout.write("---");
+    });
+
   onMount(async () => {
     stdout.write("Loading PurePy...");
     purepy = await PurePy.load();
     purepy.attach_stdout(stdout);
-    is_ready = true;
+    is_pyodide_ready = true;
     stdout.write("Ready");
     stdout.write("Press Cmd/Ctrl + S or use the button below to run");
   });
@@ -47,7 +143,7 @@
   const onkeydown = (event: KeyboardEvent) => {
     if ((event.ctrlKey || event.metaKey) && event.key === "s") {
       event.preventDefault();
-      save_and_run();
+      run();
     }
   };
 
@@ -58,25 +154,22 @@
 
 <svelte:window {onkeydown} />
 
-<div style="height: 100%; width: 100%; display: flex">
-  <div style="width: 100%">
-    <CodeMirror value={example_py} {onupdate} />
+<div class="w-full h-dvh max-h-screen flex flex-col bg-zinc-900 overflow-clip">
+  <div class="shrink-0 grow-0">
+    <Toolbar {check} {run} {is_busy} />
   </div>
-  <div style="width: 100%">
-    <div style="height:100%; width:100%; font-family: monospace; padding: 8px;">
-      {#each $state.eager(stdout.lines) as line, index (index)}
-        <p
-          style="white-space: pre; margin: 0; color: {line.is_err
-            ? 'red'
-            : 'black'}"
-        >
-          {line.content}
-        </p>
-      {/each}
-    </div>
-    {#if is_ready && !is_running}
-      <button onclick={save_and_run} disabled={is_running}>Run</button>
-    {/if}
-    <button onclick={stdout.clear}>Clear</button>
+
+  <div class="h-auto grow shrink">
+    <CodeMirror
+      onload={() => (is_codemirror_ready = true)}
+      value={example_py}
+      {onupdate}
+    />
+  </div>
+
+  <div class="shrink-0 grow-0 flex flex-col">
+    <TerminalDragger setHeight={(height) => (terminalHeight = height)} />
+    <StatusBar {status} />
+    <Terminal {terminalHeight} {stdout} />
   </div>
 </div>
diff --git a/src/routes/playground/Editor.svelte b/src/routes/playground/Editor.svelte
deleted file mode 100644
index f1bfac2..0000000
--- a/src/routes/playground/Editor.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-
-  type Props = { value: string; onupdate: (value: string) => void };
-
-  let { value, onupdate }: Props = $props();
-
-  let element: HTMLDivElement;
-  let loading = $state(true);
-
-  onMount(async () => {
-    const [{ basicSetup }, { EditorView }, { python }] = await Promise.all([
-      import("codemirror"),
-      import("@codemirror/view"),
-      import("@codemirror/lang-python"),
-    ]);
-
-    loading = false;
-
-    const theme = EditorView.baseTheme({
-      "&": { height: "100%", "max-height": "100%", width: "100%" },
-    });
-
-    const view = new EditorView({
-      doc: value,
-      extensions: [basicSetup, theme, python()],
-      parent: element,
-
-      dispatchTransactions: (txs, view) => {
-        view.update(txs);
-        onupdate(view.state.doc.toString());
-      },
-    });
-
-    return () => view?.destroy();
-  });
-</script>
-
-<div id="editor" bind:this={element}>
-  {#if loading}
-    Loading...
-  {/if}
-</div>
diff --git a/vite.config.ts b/vite.config.ts
index 4d2bed6..c309c9d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,5 @@
 import { sveltekit } from "@sveltejs/kit/vite";
+import tailwindcss from "@tailwindcss/vite";
 import { dirname, join } from "path";
 import { fileURLToPath } from "url";
 import { defineConfig } from "vite";
@@ -28,5 +29,5 @@ export function viteStaticCopyPyodide() {
 
 export default defineConfig({
   optimizeDeps: { exclude: ["pyodide"] },
-  plugins: [sveltekit(), viteStaticCopyPyodide()],
+  plugins: [tailwindcss(), sveltekit(), viteStaticCopyPyodide()],
 });
diff --git a/yarn.lock b/yarn.lock
index c982be4..9974e3b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -43,8 +43,8 @@ __metadata:
   linkType: hard
 
 "@codemirror/language@npm:^6.0.0, @codemirror/language@npm:^6.8.0":
-  version: 6.12.3
-  resolution: "@codemirror/language@npm:6.12.3"
+  version: 6.12.4
+  resolution: "@codemirror/language@npm:6.12.4"
   dependencies:
     "@codemirror/state": "npm:^6.0.0"
     "@codemirror/view": "npm:^6.23.0"
@@ -52,7 +52,7 @@ __metadata:
     "@lezer/highlight": "npm:^1.0.0"
     "@lezer/lr": "npm:^1.0.0"
     style-mod: "npm:^4.0.0"
-  checksum: 10c0/682d476f35f187a8d2f59f9b2e561045353c87736e5774b5b8dd22ade7deb3c85b9d3cdde988b00aafb345732144c134adf45dadab067430aaee159abcc456a4
+  checksum: 10c0/1b704a66f618d96eddf5937a41996e1ab42a70b5333a90b768e5539c25b7ab822e91a93e66b14d47a886cd73b3e3e22ddf77b8f11fb2f496ebd7ba010f3c4deb
   languageName: node
   linkType: hard
 
@@ -78,24 +78,64 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.6.0":
-  version: 6.6.0
-  resolution: "@codemirror/state@npm:6.6.0"
+"@codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.6.0, @codemirror/state@npm:^6.7.0":
+  version: 6.7.1
+  resolution: "@codemirror/state@npm:6.7.1"
   dependencies:
     "@marijn/find-cluster-break": "npm:^1.0.0"
-  checksum: 10c0/4e5d6ddd28fc642e8d749fe80a7dd278afd547e4d93c562eaab6f23bdf25bb12a94226db3efab6321d458c531eb6d357184809f3704aee419fe3230d53f16e24
+  checksum: 10c0/2490b87759d1f4f27f4573a084414bf30bf9ed5dccaa75485334a2d132c039f2255e3bca564fb07c6760a16bf86cc29532475d9fb75cfdb0771b330fe71be4e7
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0, @codemirror/view@npm:^6.37.0, @codemirror/view@npm:^6.42.0, @codemirror/view@npm:^6.43.1":
-  version: 6.43.1
-  resolution: "@codemirror/view@npm:6.43.1"
+"@codemirror/theme-one-dark@npm:^6.1.3":
+  version: 6.1.3
+  resolution: "@codemirror/theme-one-dark@npm:6.1.3"
   dependencies:
-    "@codemirror/state": "npm:^6.6.0"
+    "@codemirror/language": "npm:^6.0.0"
+    "@codemirror/state": "npm:^6.0.0"
+    "@codemirror/view": "npm:^6.0.0"
+    "@lezer/highlight": "npm:^1.0.0"
+  checksum: 10c0/de8483c69911bcd61a19679384de663ced9c8bed3c776f08581a8b724e9f456a17053b1cf6e9d1f2a475fa6bc42e905ec8ba1ee0a8b55213d18087d9d9150317
+  languageName: node
+  linkType: hard
+
+"@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0, @codemirror/view@npm:^6.37.0, @codemirror/view@npm:^6.42.0":
+  version: 6.43.8
+  resolution: "@codemirror/view@npm:6.43.8"
+  dependencies:
+    "@codemirror/state": "npm:^6.7.0"
     crelt: "npm:^1.0.6"
     style-mod: "npm:^4.1.0"
     w3c-keyname: "npm:^2.2.4"
-  checksum: 10c0/1ef96bfc756703f6675957793a3ea0f9aef8b2014172c15fc4063b58cefd6974688148eb25c1f2277d6b59d7ca9cb7f66d05e7b6e8c15d68bf050795c902fc18
+  checksum: 10c0/6cbd2254ee31024fa204519602fe916776d8a4952100cc2bcc7a683e69641ef7eaab0a3af754b2204efe9cd4c7f7f4f6e3feeccd703ad483e7aa0138371021da
+  languageName: node
+  linkType: hard
+
+"@emnapi/core@npm:^1.11.1":
+  version: 1.11.3
+  resolution: "@emnapi/core@npm:1.11.3"
+  dependencies:
+    "@emnapi/wasi-threads": "npm:1.2.3"
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/4ca08d349a82d5d2887ccc9e12df630877b0412ddcd59b9faee61e3c3947ccead27a18257a18bfe17abdf2b0709857808ad75d423ac49edd50c32fb140a7ed6e
+  languageName: node
+  linkType: hard
+
+"@emnapi/runtime@npm:^1.11.1":
+  version: 1.11.3
+  resolution: "@emnapi/runtime@npm:1.11.3"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/a00f1020fefb9d4145c367f93a9fddb383a00da8ffd7871e20b19659890379b83aeecb9f84d7d0eda5456343f4a09eb05b0acb5153b0d3d889539dedb1ed87c3
+  languageName: node
+  linkType: hard
+
+"@emnapi/wasi-threads@npm:1.2.3, @emnapi/wasi-threads@npm:^1.2.2":
+  version: 1.2.3
+  resolution: "@emnapi/wasi-threads@npm:1.2.3"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/5aed84bc5dbe867973b20406ca1ed95661a4892ecaef80378fdf2d37424b3f7b9c428df8a3e1d82b783a3345a530032bf049e699e1f113ea52203c3e9b4e6ce5
   languageName: node
   linkType: hard
 
@@ -417,7 +457,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/remapping@npm:^2.3.4":
+"@jridgewell/remapping@npm:^2.3.4, @jridgewell/remapping@npm:^2.3.5":
   version: 2.3.5
   resolution: "@jridgewell/remapping@npm:2.3.5"
   dependencies:
@@ -494,6 +534,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@napi-rs/wasm-runtime@npm:^1.1.4":
+  version: 1.2.2
+  resolution: "@napi-rs/wasm-runtime@npm:1.2.2"
+  dependencies:
+    "@tybys/wasm-util": "npm:^0.10.3"
+  peerDependencies:
+    "@emnapi/core": ^1.7.1 || ^2.0.0-alpha.3
+    "@emnapi/runtime": ^1.7.1 || ^2.0.0-alpha.3
+  checksum: 10c0/670ff8359761660f58d95a29fe22ac959d2c295675144fe9bc35118b0e723d1e0ac192df9896ba428eb13930cf0893b632606b70ccaea259fd6eca1836c2eb09
+  languageName: node
+  linkType: hard
+
 "@polka/url@npm:^1.0.0-next.24":
   version: 1.0.0-next.29
   resolution: "@polka/url@npm:1.0.0-next.29"
@@ -770,6 +822,179 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tailwindcss/node@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/node@npm:4.3.3"
+  dependencies:
+    "@jridgewell/remapping": "npm:^2.3.5"
+    enhanced-resolve: "npm:^5.24.1"
+    jiti: "npm:^2.7.0"
+    lightningcss: "npm:1.32.0"
+    magic-string: "npm:^0.30.21"
+    source-map-js: "npm:^1.2.1"
+    tailwindcss: "npm:4.3.3"
+  checksum: 10c0/0123669be5b3e78d42b0e10cb34d547fb8574c8e7dc7a97a141c8a4ab4215852b5b1b99b97763e898e1da1493ee8424cb72e28225cc4876828c95156f94d7f0e
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-android-arm64@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-android-arm64@npm:4.3.3"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-arm64@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.3.3"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-x64@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.3.3"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-freebsd-x64@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.3.3"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.3.3"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-gnu@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.3.3"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-musl@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.3.3"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-gnu@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.3.3"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-musl@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.3.3"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-wasm32-wasi@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-wasm32-wasi@npm:4.3.3"
+  dependencies:
+    "@emnapi/core": "npm:^1.11.1"
+    "@emnapi/runtime": "npm:^1.11.1"
+    "@emnapi/wasi-threads": "npm:^1.2.2"
+    "@napi-rs/wasm-runtime": "npm:^1.1.4"
+    "@tybys/wasm-util": "npm:^0.10.2"
+    tslib: "npm:^2.8.1"
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-arm64-msvc@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.3.3"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-x64-msvc@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.3.3"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide@npm:4.3.3"
+  dependencies:
+    "@tailwindcss/oxide-android-arm64": "npm:4.3.3"
+    "@tailwindcss/oxide-darwin-arm64": "npm:4.3.3"
+    "@tailwindcss/oxide-darwin-x64": "npm:4.3.3"
+    "@tailwindcss/oxide-freebsd-x64": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-arm-gnueabihf": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-arm64-gnu": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-arm64-musl": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-x64-gnu": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-x64-musl": "npm:4.3.3"
+    "@tailwindcss/oxide-wasm32-wasi": "npm:4.3.3"
+    "@tailwindcss/oxide-win32-arm64-msvc": "npm:4.3.3"
+    "@tailwindcss/oxide-win32-x64-msvc": "npm:4.3.3"
+  dependenciesMeta:
+    "@tailwindcss/oxide-android-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-x64":
+      optional: true
+    "@tailwindcss/oxide-freebsd-x64":
+      optional: true
+    "@tailwindcss/oxide-linux-arm-gnueabihf":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-musl":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-musl":
+      optional: true
+    "@tailwindcss/oxide-wasm32-wasi":
+      optional: true
+    "@tailwindcss/oxide-win32-arm64-msvc":
+      optional: true
+    "@tailwindcss/oxide-win32-x64-msvc":
+      optional: true
+  checksum: 10c0/6c38b25226dad252347451ed8953a998432b51f1e068b25e021215b886ccf8bcf3af58faf5f4ab50368091e657ca2fa341df1deca6101651eddb567122f2acb5
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/vite@npm:^4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/vite@npm:4.3.3"
+  dependencies:
+    "@tailwindcss/node": "npm:4.3.3"
+    "@tailwindcss/oxide": "npm:4.3.3"
+    tailwindcss: "npm:4.3.3"
+  peerDependencies:
+    vite: ^5.2.0 || ^6 || ^7 || ^8
+  checksum: 10c0/bb1fe12f7a0bb8f6d6142f6bb2e96060ee853902314ef838e8d7f50cf30cc4b07adb7c2c86be2164e0d62eb581b8cc4df2d9aa13b4449f597a67f73c5772d549
+  languageName: node
+  linkType: hard
+
+"@tybys/wasm-util@npm:^0.10.2, @tybys/wasm-util@npm:^0.10.3":
+  version: 0.10.3
+  resolution: "@tybys/wasm-util@npm:0.10.3"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/fd2bd2a79c6cd8c79ed1cf7a0fa375c64589264c88a27acaf9756d556b453ea222b62a4f68dd2fbb8b3a78b6bab3b1f4fb2431b6afc6aeda8344b53a521a1cd3
+  languageName: node
+  linkType: hard
+
 "@types/cookie@npm:^0.6.0":
   version: 0.6.0
   resolution: "@types/cookie@npm:0.6.0"
@@ -1166,6 +1391,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-libc@npm:^2.0.3":
+  version: 2.1.2
+  resolution: "detect-libc@npm:2.1.2"
+  checksum: 10c0/acc675c29a5649fa1fb6e255f993b8ee829e510b6b56b0910666949c80c364738833417d0edb5f90e4e46be17228b0f2b66a010513984e18b15deeeac49369c4
+  languageName: node
+  linkType: hard
+
 "devalue@npm:^5.8.1":
   version: 5.8.1
   resolution: "devalue@npm:5.8.1"
@@ -1173,6 +1405,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"enhanced-resolve@npm:^5.24.1":
+  version: 5.24.5
+  resolution: "enhanced-resolve@npm:5.24.5"
+  dependencies:
+    graceful-fs: "npm:^4.2.4"
+    tapable: "npm:^2.3.3"
+  checksum: 10c0/76c32ce5485ecea0ef808c9289bc6f7c49ce85142943598d89a23a846f2909556d3dc6db97a007442a48c185baad5514c1c76d20a2656497f9511d13ccfab73b
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -1610,7 +1852,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.2.6":
+"graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2
@@ -1693,6 +1935,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jiti@npm:^2.7.0":
+  version: 2.7.0
+  resolution: "jiti@npm:2.7.0"
+  bin:
+    jiti: lib/jiti-cli.mjs
+  checksum: 10c0/1b1e2310a490dce1aeea3da5f5dfe18273516c20ce48be2e98eb8ea452d5f3dcc8fd0cfd6d28b4052a24c5dbab6e3089b2d7e79f0bce7915b10d750929563c42
+  languageName: node
+  linkType: hard
+
 "json-buffer@npm:3.0.1":
   version: 3.0.1
   resolution: "json-buffer@npm:3.0.1"
@@ -1747,6 +1998,126 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-android-arm64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-android-arm64@npm:1.32.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-arm64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-darwin-arm64@npm:1.32.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-x64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-darwin-x64@npm:1.32.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-freebsd-x64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-freebsd-x64@npm:1.32.0"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm-gnueabihf@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.32.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-gnu@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.32.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-musl@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-arm64-musl@npm:1.32.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-gnu@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-x64-gnu@npm:1.32.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-musl@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-x64-musl@npm:1.32.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-arm64-msvc@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-win32-arm64-msvc@npm:1.32.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-x64-msvc@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-win32-x64-msvc@npm:1.32.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss@npm:1.32.0"
+  dependencies:
+    detect-libc: "npm:^2.0.3"
+    lightningcss-android-arm64: "npm:1.32.0"
+    lightningcss-darwin-arm64: "npm:1.32.0"
+    lightningcss-darwin-x64: "npm:1.32.0"
+    lightningcss-freebsd-x64: "npm:1.32.0"
+    lightningcss-linux-arm-gnueabihf: "npm:1.32.0"
+    lightningcss-linux-arm64-gnu: "npm:1.32.0"
+    lightningcss-linux-arm64-musl: "npm:1.32.0"
+    lightningcss-linux-x64-gnu: "npm:1.32.0"
+    lightningcss-linux-x64-musl: "npm:1.32.0"
+    lightningcss-win32-arm64-msvc: "npm:1.32.0"
+    lightningcss-win32-x64-msvc: "npm:1.32.0"
+  dependenciesMeta:
+    lightningcss-android-arm64:
+      optional: true
+    lightningcss-darwin-arm64:
+      optional: true
+    lightningcss-darwin-x64:
+      optional: true
+    lightningcss-freebsd-x64:
+      optional: true
+    lightningcss-linux-arm-gnueabihf:
+      optional: true
+    lightningcss-linux-arm64-gnu:
+      optional: true
+    lightningcss-linux-arm64-musl:
+      optional: true
+    lightningcss-linux-x64-gnu:
+      optional: true
+    lightningcss-linux-x64-musl:
+      optional: true
+    lightningcss-win32-arm64-msvc:
+      optional: true
+    lightningcss-win32-x64-msvc:
+      optional: true
+  checksum: 10c0/70945bd55097af46fc9fab7f5ed09cd5869d85940a2acab7ee06d0117004a1d68155708a2d462531cea2fc3c67aefc9333a7068c80b0b78dd404c16838809e03
+  languageName: node
+  linkType: hard
+
 "lilconfig@npm:^2.0.5":
   version: 2.1.0
   resolution: "lilconfig@npm:2.1.0"
@@ -2062,11 +2433,12 @@ __metadata:
   resolution: "purepy-website@workspace:."
   dependencies:
     "@codemirror/lang-python": "npm:^6.2.1"
-    "@codemirror/view": "npm:^6.43.1"
+    "@codemirror/theme-one-dark": "npm:^6.1.3"
     "@eslint/js": "npm:^10.0.1"
     "@sveltejs/adapter-static": "npm:^3.0.10"
     "@sveltejs/kit": "npm:^2.49.1"
     "@sveltejs/vite-plugin-svelte": "npm:^6.2.1"
+    "@tailwindcss/vite": "npm:^4.3.3"
     "@types/node": "npm:^24"
     codemirror: "npm:^6.0.2"
     eslint: "npm:^10.4.1"
@@ -2078,6 +2450,7 @@ __metadata:
     pyodide: "npm:^314.0.0"
     svelte: "npm:^5.56.3"
     svelte-check: "npm:^4.3.4"
+    tailwindcss: "npm:^4.3.3"
     typescript: "npm:^5.9.3"
     typescript-eslint: "npm:^8.60.1"
     vite: "npm:^7.2.6"
@@ -2331,6 +2704,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwindcss@npm:4.3.3, tailwindcss@npm:^4.3.3":
+  version: 4.3.3
+  resolution: "tailwindcss@npm:4.3.3"
+  checksum: 10c0/7e9cd7553cd890ffa5350efb0ca8971ba5435257d0f98bf0714994ac8f1fee5c7cdf9a9da47fe83e8ac995d728410837ac49d3ef5ea66b5afe1db312086ffae2
+  languageName: node
+  linkType: hard
+
+"tapable@npm:^2.3.3":
+  version: 2.3.3
+  resolution: "tapable@npm:2.3.3"
+  checksum: 10c0/47992e861053f861154e92fb4a98ac4ab47b6463717e60792dd1e8c755da0c4964cd8bb68c308a9066d6da89000b6310457b4d5d985c30de4ccc29066068cc17
+  languageName: node
+  linkType: hard
+
 "tar@npm:^7.5.4":
   version: 7.5.16
   resolution: "tar@npm:7.5.16"
@@ -2379,6 +2766,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.4.0, tslib@npm:^2.8.1":
+  version: 2.8.1
+  resolution: "tslib@npm:2.8.1"
+  checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62
+  languageName: node
+  linkType: hard
+
 "type-check@npm:^0.4.0, type-check@npm:~0.4.0":
   version: 0.4.0
   resolution: "type-check@npm:0.4.0"