diff --git a/src/lib/components/ActionListItem.svelte b/src/lib/components/ActionListItem.svelte
index 0aeb2a16..241cb86d 100644
--- a/src/lib/components/ActionListItem.svelte
+++ b/src/lib/components/ActionListItem.svelte
@@ -81,8 +81,4 @@
       font-size: 16px;
     }
   }
-
-  kbd {
-    height: 24px;
-  }
 </style>
diff --git a/src/routes/sandbox/+layout@.svelte b/src/routes/sandbox/+layout@.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/src/routes/sandbox/+page.svelte b/src/routes/sandbox/+page.svelte
new file mode 100644
index 00000000..4ef5ac43
--- /dev/null
+++ b/src/routes/sandbox/+page.svelte
@@ -0,0 +1,43 @@
+<script>
+  let ongoingRequest
+  let resolveRequest
+  let source
+  async function post(channel, args) {
+    while (ongoingRequest) {
+      await ongoingRequest
+    }
+    ongoingRequest = new Promise(resolve => {
+      resolveRequest = resolve
+      source.postMessage([channel, args], "*")
+    })
+    ongoingRequest.then(() => {
+      ongoingRequest = undefined
+    })
+    return ongoingRequest
+  }
+
+  window.addEventListener("message", event => {
+    if ("response" in event.data) {
+      resolveRequest(event.data.response)
+    } else {
+      source = event.source
+
+      var Action = event.data.actionCodes
+      Object.assign(
+        Action,
+        Object.fromEntries(
+          Object.values(event.data.actionCodes)
+            .filter(it => !!it.id)
+            .map(it => [it.id, it]),
+        ),
+      )
+
+      var Chara = {}
+      for (const fn of event.data.charaChannels) {
+        Chara[fn] = (...args) => post(fn, args)
+      }
+
+      eval(`(async function(){${event.data.script}})()`)
+    }
+  })
+</script>
diff --git a/static/sandbox/index.html b/static/sandbox/index.html
deleted file mode 100644
index 8e2e4121..00000000
--- a/static/sandbox/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>iFrame Sandbox</title>
-    <script>
-      let ongoingRequest
-      let resolveRequest
-      let source
-      async function post(channel, args) {
-        while (ongoingRequest) {
-          await ongoingRequest
-        }
-        ongoingRequest = new Promise(resolve => {
-          resolveRequest = resolve
-          source.postMessage([channel, args], "*")
-        })
-        ongoingRequest.then(() => {
-          ongoingRequest = undefined
-        })
-        return ongoingRequest
-      }
-
-      window.addEventListener("message", event => {
-        if ("response" in event.data) {
-          resolveRequest(event.data.response)
-        } else {
-          source = event.source
-
-          var Action = event.data.actionCodes
-          Object.assign(
-            Action,
-            Object.fromEntries(
-              Object.values(event.data.actionCodes)
-                .filter(it => !!it.id)
-                .map(it => [it.id, it]),
-            ),
-          )
-
-          var Chara = {}
-          for (const fn of event.data.charaChannels) {
-            Chara[fn] = (...args) => post(fn, args)
-          }
-
-          eval(`(async function(){${event.data.script}})()`)
-        }
-      })
-    </script>
-  </head>
-</html>
