style: unify keyword color to magenta and tighten code line-height

src/components/InlineEditor.astro

@@ -1,12 +1,24 @@
 ---
 import { Code } from "astro:components";
+import lightPlus from "@shikijs/themes/light-plus";
 const { code } = Astro.props;
 
 import flixGrammar from "../grammars/flix.tmLanguage.json";
+
+// Light+ colors `keyword`/`storage` blue but `keyword.control` magenta;
+// unify them so all Flix keywords share the magenta.
+const theme = {
+  ...lightPlus,
+  name: "light-plus-flix",
+  tokenColors: [
+    ...(lightPlus.tokenColors ?? []),
+    { scope: ["keyword", "storage"], settings: { foreground: "#AF00DB" } },
+  ],
+};
 ---
 
 <div class="inline-editor-frame">
   <div class="inline-editor-code">
-    <Code code={code} theme="light-plus" lang={flixGrammar} />
+    <Code code={code} theme={theme} lang={flixGrammar} />
   </div>
 </div>

src/styles/global.css

@@ -58,7 +58,7 @@ p:last-child {
     font-family:
         Monaco, Menlo, "Ubuntu Mono", Consolas, "Source Code Pro",
         source-code-pro, monospace;
-    line-height: 16px;
+    line-height: 14px;
 }
 
 .inline-editor-code pre {