Update demo style to match theme

docs/index.md

@@ -7,17 +7,6 @@ Try it out! Enter some Python code in the text area below and click the
 <code>Run</code> button to execute it. You can also use <kbd>Shift</kbd> +
 <kbd>Enter</kbd> to run the code.
 
-<style>
-  io-repl:not(:defined) {
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
-  }
-  io-repl {
-    --button-border-radius: 2px;
-    --button-font-family: monospace;
-    --input-border-radius: 2px;
-  }
-</style>
 <script type='module' src='https://www.unpkg.com/io-repl/io-repl.js'></script>
 <io-repl></io-repl>
 

docs/style.css

@@ -0,0 +1,34 @@
+io-repl:not(:defined) {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+io-repl::part(button) {
+  background-color: var(--color-text);
+  color: var(--color-background);
+  border-radius: 2px;
+  font-size: var(--font-size-small);
+  font-family: var(--font-family-monospace);
+  font-weight: normal;
+}
+
+io-repl::part(input) {
+  background-color: var(--color-code-background);
+  color: var(--color-code-text);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  border-color: var(--color-border);
+  border-radius: 2px;
+
+  &:disabled {
+    color: var(--color-background);
+    -webkit-text-fill-color: var(--color-background);
+    opacity: 1;
+  }
+}
+
+io-repl::part(output) {
+  color: var(--color-text);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+}

mkdocs.yml

@@ -8,3 +8,5 @@ nav:
 theme:
   name: walt
   site_emoji: 🌑
+extra_css:
+  - style.css