From 255b35240e747c914d99613281dc153767fa3baf Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Sat, 16 Dec 2023 11:48:40 +0100
Subject: [PATCH] sync

---
 index.html            |  10 +-
 package.json          |   1 +
 src/Documentation.ts  |  12 +-
 src/InterfaceLogic.ts |   2 +-
 src/style.css         | 876 ++++++++++++++++++++++++++++++++++++++----
 tailwind.config.js    |  66 ++--
 yarn.lock             |   5 +
 7 files changed, 843 insertions(+), 129 deletions(-)

diff --git a/index.html b/index.html
index 99d6739..43a4102 100644
--- a/index.html
+++ b/index.html
@@ -364,17 +364,17 @@
               <div class="flex flex-col space-y-2 pb-2">
                 <button id="download-universes" class="bg-blue font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
                   <svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
-                  <span class="text-selection_background">Download universes</span>
+                  <span class="text-selection_foreground">Download universes</span>
                 </button>
                 <button id="upload-universes" class="bg-blue font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
                   <svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
-                  <span class="text-selection_background">Upload universes</span>
+                  <span class="text-selection_foreground">Upload universes</span>
                 </button>
-                <button id="destroy-universes" class="bg-white font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
+                <button id="destroy-universes" class="bg-blue font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                   </svg>
-                  <span class="text-brightred">Destroy universes</span>
+                  <span class="text-selection_foreground">Destroy universes</span>
                 </button>
               </div>
             </div>
@@ -559,7 +559,7 @@
 
       <template id="ui-known-universe-item-template">
         <!-- A known universe button in "opening" interface -->
-        <li class="hover:fill-black hover:white py-2 hover:text-black flex justify-between px-4">
+        <li class="py-2 px-4 flex justify-between text-cyan">
           <button class="universe-name load-universe" title="Load this universe">Universe Name</button>
           <button class="delete-universe" title="Delete this universe">🗑</button>
         </li>
diff --git a/package.json b/package.json
index b823ead..520f9f0 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "autoprefixer": "^10.4.14",
     "codemirror": "^6.0.1",
     "fflate": "^0.8.0",
+    "highlight.js": "^11.9.0",
     "jisg": "^0.9.7",
     "lru-cache": "^10.0.1",
     "marked": "^7.0.3",
diff --git a/src/Documentation.ts b/src/Documentation.ts
index 8cf9a61..02c3373 100644
--- a/src/Documentation.ts
+++ b/src/Documentation.ts
@@ -36,12 +36,11 @@ import { ziffers_rhythm } from "./documentation/patterns/ziffers/ziffers_rhythm"
 import { ziffers_algorithmic } from "./documentation/patterns/ziffers/ziffers_algorithmic";
 import { ziffers_tonnetz } from "./documentation/patterns/ziffers/ziffers_tonnetz";
 import { ziffers_syncing } from "./documentation/patterns/ziffers/ziffers_syncing";
-
 import { synths } from "./documentation/learning/audio_engine/synths";
-
 // Setting up the Markdown converter with syntax highlighting
 import showdown from "showdown";
 import showdownHighlight from "showdown-highlight";
+import "highlight.js/styles/atom-one-dark-reasonable.min.css";
 import { createDocumentationStyle } from "./DomElements";
 import { filters } from "./documentation/learning/audio_engine/filters";
 showdown.setFlavor("github");
@@ -67,9 +66,7 @@ export const makeExampleFactory = (application: Editor): Function => {
     <button class="py-1 text-base px-4 hover:bg-neutral-600 bg-neutral-500 inline-block " onclick="app.api._stopDocExample()">&#x23f8;&#xFE0F; Pause</button>
     <button class="py-1 text-base px-4 hover:bg-neutral-900 bg-neutral-800 inline-block " onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
   </summary>
-  \`\`\`javascript
-  ${code}
-  \`\`\`
+  <pre><code class="hljs language-javascript">${code.trim()}</code></pre>
 </details>
 `;
   };
@@ -175,7 +172,10 @@ export const updateDocumentationContent = (app: Editor, bindings: any) => {
     emoji: true,
     moreStyling: true,
     backslashEscapesHTMLTags: true,
-    extensions: [showdownHighlight({ auto_detection: true }), ...bindings],
+    extensions: [showdownHighlight({
+      pre: true, 
+      auto_detection: false
+    }), ...bindings],
   });
   console.log(app.currentDocumentationPane);
 
diff --git a/src/InterfaceLogic.ts b/src/InterfaceLogic.ts
index c9ca980..2e0e3d3 100644
--- a/src/InterfaceLogic.ts
+++ b/src/InterfaceLogic.ts
@@ -326,7 +326,7 @@ export const installInterfaceLogic = (app: Editor) => {
 
     // @ts-ignore
     let selected_theme = colors[app.settings.theme as string];
-    let theme_preview = "<div class='pl-4'>";
+    let theme_preview = "<div class='ml-6'>";
     for (const [key, _] of Object.entries(selected_theme)) {
       theme_preview += `<p class="inline text-${key} bg-${key}">█</p>`;
     }
diff --git a/src/style.css b/src/style.css
index 8e37f7b..dfdf09d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -558,21 +558,6 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-.hljs-comment: #FEFEFE;
-
-.css .hljs-built_in {
-  color: #88C0D0;
-}
-
-.css .hljs-keyword {
-  color: #D08770;
-}
-
-.vim .hljs-built_in {
-  color: #88C0D0;
-  font-style: italic;
-}
-
 .sr-only {
   position: absolute;
   width: 1px;
@@ -781,10 +766,6 @@ video {
   margin-left: 1.5rem;
 }
 
-.ml-8 {
-  margin-left: 2rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -1141,46 +1122,541 @@ video {
   border-style: none;
 }
 
+.border-background {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--background) / var(--tw-border-opacity));
+}
+
+.border-background\/0 {
+  border-color: rgb(var(--background) / 0);
+}
+
+.border-background\/10 {
+  border-color: rgb(var(--background) / 0.1);
+}
+
+.border-background\/100 {
+  border-color: rgb(var(--background) / 1);
+}
+
+.border-background\/20 {
+  border-color: rgb(var(--background) / 0.2);
+}
+
+.border-background\/25 {
+  border-color: rgb(var(--background) / 0.25);
+}
+
+.border-background\/30 {
+  border-color: rgb(var(--background) / 0.3);
+}
+
+.border-background\/40 {
+  border-color: rgb(var(--background) / 0.4);
+}
+
+.border-background\/5 {
+  border-color: rgb(var(--background) / 0.05);
+}
+
+.border-background\/50 {
+  border-color: rgb(var(--background) / 0.5);
+}
+
+.border-background\/60 {
+  border-color: rgb(var(--background) / 0.6);
+}
+
+.border-background\/70 {
+  border-color: rgb(var(--background) / 0.7);
+}
+
+.border-background\/75 {
+  border-color: rgb(var(--background) / 0.75);
+}
+
+.border-background\/80 {
+  border-color: rgb(var(--background) / 0.8);
+}
+
+.border-background\/90 {
+  border-color: rgb(var(--background) / 0.9);
+}
+
+.border-background\/95 {
+  border-color: rgb(var(--background) / 0.95);
+}
+
+.border-cursor {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--cursor) / var(--tw-border-opacity));
+}
+
+.border-cursor\/0 {
+  border-color: rgb(var(--cursor) / 0);
+}
+
+.border-cursor\/10 {
+  border-color: rgb(var(--cursor) / 0.1);
+}
+
+.border-cursor\/100 {
+  border-color: rgb(var(--cursor) / 1);
+}
+
+.border-cursor\/20 {
+  border-color: rgb(var(--cursor) / 0.2);
+}
+
+.border-cursor\/25 {
+  border-color: rgb(var(--cursor) / 0.25);
+}
+
+.border-cursor\/30 {
+  border-color: rgb(var(--cursor) / 0.3);
+}
+
+.border-cursor\/40 {
+  border-color: rgb(var(--cursor) / 0.4);
+}
+
+.border-cursor\/5 {
+  border-color: rgb(var(--cursor) / 0.05);
+}
+
+.border-cursor\/50 {
+  border-color: rgb(var(--cursor) / 0.5);
+}
+
+.border-cursor\/60 {
+  border-color: rgb(var(--cursor) / 0.6);
+}
+
+.border-cursor\/70 {
+  border-color: rgb(var(--cursor) / 0.7);
+}
+
+.border-cursor\/75 {
+  border-color: rgb(var(--cursor) / 0.75);
+}
+
+.border-cursor\/80 {
+  border-color: rgb(var(--cursor) / 0.8);
+}
+
+.border-cursor\/90 {
+  border-color: rgb(var(--cursor) / 0.9);
+}
+
+.border-cursor\/95 {
+  border-color: rgb(var(--cursor) / 0.95);
+}
+
+.border-foreground {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--foreground) / var(--tw-border-opacity));
+}
+
+.border-foreground\/0 {
+  border-color: rgb(var(--foreground) / 0);
+}
+
+.border-foreground\/10 {
+  border-color: rgb(var(--foreground) / 0.1);
+}
+
+.border-foreground\/100 {
+  border-color: rgb(var(--foreground) / 1);
+}
+
+.border-foreground\/20 {
+  border-color: rgb(var(--foreground) / 0.2);
+}
+
+.border-foreground\/25 {
+  border-color: rgb(var(--foreground) / 0.25);
+}
+
+.border-foreground\/30 {
+  border-color: rgb(var(--foreground) / 0.3);
+}
+
+.border-foreground\/40 {
+  border-color: rgb(var(--foreground) / 0.4);
+}
+
+.border-foreground\/5 {
+  border-color: rgb(var(--foreground) / 0.05);
+}
+
+.border-foreground\/50 {
+  border-color: rgb(var(--foreground) / 0.5);
+}
+
+.border-foreground\/60 {
+  border-color: rgb(var(--foreground) / 0.6);
+}
+
+.border-foreground\/70 {
+  border-color: rgb(var(--foreground) / 0.7);
+}
+
+.border-foreground\/75 {
+  border-color: rgb(var(--foreground) / 0.75);
+}
+
+.border-foreground\/80 {
+  border-color: rgb(var(--foreground) / 0.8);
+}
+
+.border-foreground\/90 {
+  border-color: rgb(var(--foreground) / 0.9);
+}
+
+.border-foreground\/95 {
+  border-color: rgb(var(--foreground) / 0.95);
+}
+
+.border-selection_background {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--selection_background) / var(--tw-border-opacity));
+}
+
+.border-selection_background\/0 {
+  border-color: rgb(var(--selection_background) / 0);
+}
+
+.border-selection_background\/10 {
+  border-color: rgb(var(--selection_background) / 0.1);
+}
+
+.border-selection_background\/100 {
+  border-color: rgb(var(--selection_background) / 1);
+}
+
+.border-selection_background\/20 {
+  border-color: rgb(var(--selection_background) / 0.2);
+}
+
+.border-selection_background\/25 {
+  border-color: rgb(var(--selection_background) / 0.25);
+}
+
+.border-selection_background\/30 {
+  border-color: rgb(var(--selection_background) / 0.3);
+}
+
+.border-selection_background\/40 {
+  border-color: rgb(var(--selection_background) / 0.4);
+}
+
+.border-selection_background\/5 {
+  border-color: rgb(var(--selection_background) / 0.05);
+}
+
+.border-selection_background\/50 {
+  border-color: rgb(var(--selection_background) / 0.5);
+}
+
+.border-selection_background\/60 {
+  border-color: rgb(var(--selection_background) / 0.6);
+}
+
+.border-selection_background\/70 {
+  border-color: rgb(var(--selection_background) / 0.7);
+}
+
+.border-selection_background\/75 {
+  border-color: rgb(var(--selection_background) / 0.75);
+}
+
+.border-selection_background\/80 {
+  border-color: rgb(var(--selection_background) / 0.8);
+}
+
+.border-selection_background\/90 {
+  border-color: rgb(var(--selection_background) / 0.9);
+}
+
+.border-selection_background\/95 {
+  border-color: rgb(var(--selection_background) / 0.95);
+}
+
 .bg-background {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--background) / var(--tw-bg-opacity));
 }
 
+.bg-background\/0 {
+  background-color: rgb(var(--background) / 0);
+}
+
+.bg-background\/10 {
+  background-color: rgb(var(--background) / 0.1);
+}
+
+.bg-background\/100 {
+  background-color: rgb(var(--background) / 1);
+}
+
+.bg-background\/20 {
+  background-color: rgb(var(--background) / 0.2);
+}
+
+.bg-background\/25 {
+  background-color: rgb(var(--background) / 0.25);
+}
+
+.bg-background\/30 {
+  background-color: rgb(var(--background) / 0.3);
+}
+
+.bg-background\/40 {
+  background-color: rgb(var(--background) / 0.4);
+}
+
+.bg-background\/5 {
+  background-color: rgb(var(--background) / 0.05);
+}
+
+.bg-background\/50 {
+  background-color: rgb(var(--background) / 0.5);
+}
+
+.bg-background\/60 {
+  background-color: rgb(var(--background) / 0.6);
+}
+
+.bg-background\/70 {
+  background-color: rgb(var(--background) / 0.7);
+}
+
+.bg-background\/75 {
+  background-color: rgb(var(--background) / 0.75);
+}
+
+.bg-background\/80 {
+  background-color: rgb(var(--background) / 0.8);
+}
+
+.bg-background\/90 {
+  background-color: rgb(var(--background) / 0.9);
+}
+
+.bg-background\/95 {
+  background-color: rgb(var(--background) / 0.95);
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--black) / var(--tw-bg-opacity));
 }
 
+.bg-blue {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--blue) / var(--tw-bg-opacity));
+}
+
+.bg-cursor {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--cursor) / var(--tw-bg-opacity));
+}
+
+.bg-cursor\/0 {
+  background-color: rgb(var(--cursor) / 0);
+}
+
+.bg-cursor\/10 {
+  background-color: rgb(var(--cursor) / 0.1);
+}
+
+.bg-cursor\/100 {
+  background-color: rgb(var(--cursor) / 1);
+}
+
+.bg-cursor\/20 {
+  background-color: rgb(var(--cursor) / 0.2);
+}
+
+.bg-cursor\/25 {
+  background-color: rgb(var(--cursor) / 0.25);
+}
+
+.bg-cursor\/30 {
+  background-color: rgb(var(--cursor) / 0.3);
+}
+
+.bg-cursor\/40 {
+  background-color: rgb(var(--cursor) / 0.4);
+}
+
+.bg-cursor\/5 {
+  background-color: rgb(var(--cursor) / 0.05);
+}
+
+.bg-cursor\/50 {
+  background-color: rgb(var(--cursor) / 0.5);
+}
+
+.bg-cursor\/60 {
+  background-color: rgb(var(--cursor) / 0.6);
+}
+
+.bg-cursor\/70 {
+  background-color: rgb(var(--cursor) / 0.7);
+}
+
+.bg-cursor\/75 {
+  background-color: rgb(var(--cursor) / 0.75);
+}
+
+.bg-cursor\/80 {
+  background-color: rgb(var(--cursor) / 0.8);
+}
+
+.bg-cursor\/90 {
+  background-color: rgb(var(--cursor) / 0.9);
+}
+
+.bg-cursor\/95 {
+  background-color: rgb(var(--cursor) / 0.95);
+}
+
 .bg-foreground {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
 }
 
+.bg-foreground\/0 {
+  background-color: rgb(var(--foreground) / 0);
+}
+
+.bg-foreground\/10 {
+  background-color: rgb(var(--foreground) / 0.1);
+}
+
+.bg-foreground\/100 {
+  background-color: rgb(var(--foreground) / 1);
+}
+
+.bg-foreground\/20 {
+  background-color: rgb(var(--foreground) / 0.2);
+}
+
+.bg-foreground\/25 {
+  background-color: rgb(var(--foreground) / 0.25);
+}
+
+.bg-foreground\/30 {
+  background-color: rgb(var(--foreground) / 0.3);
+}
+
+.bg-foreground\/40 {
+  background-color: rgb(var(--foreground) / 0.4);
+}
+
+.bg-foreground\/5 {
+  background-color: rgb(var(--foreground) / 0.05);
+}
+
+.bg-foreground\/50 {
+  background-color: rgb(var(--foreground) / 0.5);
+}
+
+.bg-foreground\/60 {
+  background-color: rgb(var(--foreground) / 0.6);
+}
+
+.bg-foreground\/70 {
+  background-color: rgb(var(--foreground) / 0.7);
+}
+
+.bg-foreground\/75 {
+  background-color: rgb(var(--foreground) / 0.75);
+}
+
+.bg-foreground\/80 {
+  background-color: rgb(var(--foreground) / 0.8);
+}
+
+.bg-foreground\/90 {
+  background-color: rgb(var(--foreground) / 0.9);
+}
+
+.bg-foreground\/95 {
+  background-color: rgb(var(--foreground) / 0.95);
+}
+
 .bg-selection_background {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--selection_background) / var(--tw-bg-opacity));
 }
 
+.bg-selection_background\/0 {
+  background-color: rgb(var(--selection_background) / 0);
+}
+
+.bg-selection_background\/10 {
+  background-color: rgb(var(--selection_background) / 0.1);
+}
+
+.bg-selection_background\/100 {
+  background-color: rgb(var(--selection_background) / 1);
+}
+
+.bg-selection_background\/20 {
+  background-color: rgb(var(--selection_background) / 0.2);
+}
+
+.bg-selection_background\/25 {
+  background-color: rgb(var(--selection_background) / 0.25);
+}
+
+.bg-selection_background\/30 {
+  background-color: rgb(var(--selection_background) / 0.3);
+}
+
+.bg-selection_background\/40 {
+  background-color: rgb(var(--selection_background) / 0.4);
+}
+
+.bg-selection_background\/5 {
+  background-color: rgb(var(--selection_background) / 0.05);
+}
+
+.bg-selection_background\/50 {
+  background-color: rgb(var(--selection_background) / 0.5);
+}
+
+.bg-selection_background\/60 {
+  background-color: rgb(var(--selection_background) / 0.6);
+}
+
+.bg-selection_background\/70 {
+  background-color: rgb(var(--selection_background) / 0.7);
+}
+
+.bg-selection_background\/75 {
+  background-color: rgb(var(--selection_background) / 0.75);
+}
+
+.bg-selection_background\/80 {
+  background-color: rgb(var(--selection_background) / 0.8);
+}
+
+.bg-selection_background\/90 {
+  background-color: rgb(var(--selection_background) / 0.9);
+}
+
+.bg-selection_background\/95 {
+  background-color: rgb(var(--selection_background) / 0.95);
+}
+
 .bg-selection_foreground {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
 }
 
-.bg-blue {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--blue) / var(--tw-bg-opacity));
-}
-
-.bg-red {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--red) / var(--tw-bg-opacity));
-}
-
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--white) / var(--tw-bg-opacity));
-}
-
 .p-1 {
   padding: 0.25rem;
 }
@@ -1222,6 +1698,11 @@ video {
   padding-right: 1.5rem;
 }
 
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1247,11 +1728,6 @@ video {
   padding-bottom: 1rem;
 }
 
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1401,6 +1877,71 @@ video {
   line-height: 1.5;
 }
 
+.text-background {
+  --tw-text-opacity: 1;
+  color: rgb(var(--background) / var(--tw-text-opacity));
+}
+
+.text-background\/0 {
+  color: rgb(var(--background) / 0);
+}
+
+.text-background\/10 {
+  color: rgb(var(--background) / 0.1);
+}
+
+.text-background\/100 {
+  color: rgb(var(--background) / 1);
+}
+
+.text-background\/20 {
+  color: rgb(var(--background) / 0.2);
+}
+
+.text-background\/25 {
+  color: rgb(var(--background) / 0.25);
+}
+
+.text-background\/30 {
+  color: rgb(var(--background) / 0.3);
+}
+
+.text-background\/40 {
+  color: rgb(var(--background) / 0.4);
+}
+
+.text-background\/5 {
+  color: rgb(var(--background) / 0.05);
+}
+
+.text-background\/50 {
+  color: rgb(var(--background) / 0.5);
+}
+
+.text-background\/60 {
+  color: rgb(var(--background) / 0.6);
+}
+
+.text-background\/70 {
+  color: rgb(var(--background) / 0.7);
+}
+
+.text-background\/75 {
+  color: rgb(var(--background) / 0.75);
+}
+
+.text-background\/80 {
+  color: rgb(var(--background) / 0.8);
+}
+
+.text-background\/90 {
+  color: rgb(var(--background) / 0.9);
+}
+
+.text-background\/95 {
+  color: rgb(var(--background) / 0.95);
+}
+
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(var(--black) / var(--tw-text-opacity));
@@ -1411,16 +1952,216 @@ video {
   color: rgb(var(--blue) / var(--tw-text-opacity));
 }
 
+.text-brightwhite {
+  --tw-text-opacity: 1;
+  color: rgb(var(--brightwhite) / var(--tw-text-opacity));
+}
+
+.text-cursor {
+  --tw-text-opacity: 1;
+  color: rgb(var(--cursor) / var(--tw-text-opacity));
+}
+
+.text-cursor\/0 {
+  color: rgb(var(--cursor) / 0);
+}
+
+.text-cursor\/10 {
+  color: rgb(var(--cursor) / 0.1);
+}
+
+.text-cursor\/100 {
+  color: rgb(var(--cursor) / 1);
+}
+
+.text-cursor\/20 {
+  color: rgb(var(--cursor) / 0.2);
+}
+
+.text-cursor\/25 {
+  color: rgb(var(--cursor) / 0.25);
+}
+
+.text-cursor\/30 {
+  color: rgb(var(--cursor) / 0.3);
+}
+
+.text-cursor\/40 {
+  color: rgb(var(--cursor) / 0.4);
+}
+
+.text-cursor\/5 {
+  color: rgb(var(--cursor) / 0.05);
+}
+
+.text-cursor\/50 {
+  color: rgb(var(--cursor) / 0.5);
+}
+
+.text-cursor\/60 {
+  color: rgb(var(--cursor) / 0.6);
+}
+
+.text-cursor\/70 {
+  color: rgb(var(--cursor) / 0.7);
+}
+
+.text-cursor\/75 {
+  color: rgb(var(--cursor) / 0.75);
+}
+
+.text-cursor\/80 {
+  color: rgb(var(--cursor) / 0.8);
+}
+
+.text-cursor\/90 {
+  color: rgb(var(--cursor) / 0.9);
+}
+
+.text-cursor\/95 {
+  color: rgb(var(--cursor) / 0.95);
+}
+
+.text-cyan {
+  --tw-text-opacity: 1;
+  color: rgb(var(--cyan) / var(--tw-text-opacity));
+}
+
 .text-foreground {
   --tw-text-opacity: 1;
   color: rgb(var(--foreground) / var(--tw-text-opacity));
 }
 
+.text-foreground\/0 {
+  color: rgb(var(--foreground) / 0);
+}
+
+.text-foreground\/10 {
+  color: rgb(var(--foreground) / 0.1);
+}
+
+.text-foreground\/100 {
+  color: rgb(var(--foreground) / 1);
+}
+
+.text-foreground\/20 {
+  color: rgb(var(--foreground) / 0.2);
+}
+
+.text-foreground\/25 {
+  color: rgb(var(--foreground) / 0.25);
+}
+
+.text-foreground\/30 {
+  color: rgb(var(--foreground) / 0.3);
+}
+
+.text-foreground\/40 {
+  color: rgb(var(--foreground) / 0.4);
+}
+
+.text-foreground\/5 {
+  color: rgb(var(--foreground) / 0.05);
+}
+
+.text-foreground\/50 {
+  color: rgb(var(--foreground) / 0.5);
+}
+
+.text-foreground\/60 {
+  color: rgb(var(--foreground) / 0.6);
+}
+
+.text-foreground\/70 {
+  color: rgb(var(--foreground) / 0.7);
+}
+
+.text-foreground\/75 {
+  color: rgb(var(--foreground) / 0.75);
+}
+
+.text-foreground\/80 {
+  color: rgb(var(--foreground) / 0.8);
+}
+
+.text-foreground\/90 {
+  color: rgb(var(--foreground) / 0.9);
+}
+
+.text-foreground\/95 {
+  color: rgb(var(--foreground) / 0.95);
+}
+
 .text-red {
   --tw-text-opacity: 1;
   color: rgb(var(--red) / var(--tw-text-opacity));
 }
 
+.text-selection_background {
+  --tw-text-opacity: 1;
+  color: rgb(var(--selection_background) / var(--tw-text-opacity));
+}
+
+.text-selection_background\/0 {
+  color: rgb(var(--selection_background) / 0);
+}
+
+.text-selection_background\/10 {
+  color: rgb(var(--selection_background) / 0.1);
+}
+
+.text-selection_background\/100 {
+  color: rgb(var(--selection_background) / 1);
+}
+
+.text-selection_background\/20 {
+  color: rgb(var(--selection_background) / 0.2);
+}
+
+.text-selection_background\/25 {
+  color: rgb(var(--selection_background) / 0.25);
+}
+
+.text-selection_background\/30 {
+  color: rgb(var(--selection_background) / 0.3);
+}
+
+.text-selection_background\/40 {
+  color: rgb(var(--selection_background) / 0.4);
+}
+
+.text-selection_background\/5 {
+  color: rgb(var(--selection_background) / 0.05);
+}
+
+.text-selection_background\/50 {
+  color: rgb(var(--selection_background) / 0.5);
+}
+
+.text-selection_background\/60 {
+  color: rgb(var(--selection_background) / 0.6);
+}
+
+.text-selection_background\/70 {
+  color: rgb(var(--selection_background) / 0.7);
+}
+
+.text-selection_background\/75 {
+  color: rgb(var(--selection_background) / 0.75);
+}
+
+.text-selection_background\/80 {
+  color: rgb(var(--selection_background) / 0.8);
+}
+
+.text-selection_background\/90 {
+  color: rgb(var(--selection_background) / 0.9);
+}
+
+.text-selection_background\/95 {
+  color: rgb(var(--selection_background) / 0.95);
+}
+
 .text-selection_foreground {
   --tw-text-opacity: 1;
   color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
@@ -1431,21 +2172,6 @@ video {
   color: rgb(var(--white) / var(--tw-text-opacity));
 }
 
-.text-selection_background {
-  --tw-text-opacity: 1;
-  color: rgb(var(--selection_background) / var(--tw-text-opacity));
-}
-
-.text-brightred {
-  --tw-text-opacity: 1;
-  color: rgb(var(--brightred) / var(--tw-text-opacity));
-}
-
-.text-brightwhite {
-  --tw-text-opacity: 1;
-  color: rgb(var(--brightwhite) / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -1458,6 +2184,16 @@ video {
   text-underline-offset: 4px;
 }
 
+.placeholder-blue::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(var(--blue) / var(--tw-placeholder-opacity));
+}
+
+.placeholder-blue::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(var(--blue) / var(--tw-placeholder-opacity));
+}
+
 .opacity-50 {
   opacity: 0.5;
 }
@@ -1492,38 +2228,24 @@ video {
   background-color: rgb(var(--background) / var(--tw-bg-opacity));
 }
 
+.hover\:bg-brightblack:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--brightblack) / var(--tw-bg-opacity));
+}
+
 .hover\:bg-foreground:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
 }
 
-.hover\:fill-black:hover {
-  fill: rgb(var(--black) / 1);
-}
-
-.hover\:text-xl:hover {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-.hover\:text-black:hover {
+.hover\:text-background:hover {
   --tw-text-opacity: 1;
-  color: rgb(var(--black) / var(--tw-text-opacity));
+  color: rgb(var(--background) / var(--tw-text-opacity));
 }
 
-.hover\:text-foreground:hover {
+.hover\:text-brightwhite:hover {
   --tw-text-opacity: 1;
-  color: rgb(var(--foreground) / var(--tw-text-opacity));
-}
-
-.hover\:text-selection_foreground:hover {
-  --tw-text-opacity: 1;
-  color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
-}
-
-.hover\:text-red:hover {
-  --tw-text-opacity: 1;
-  color: rgb(var(--red) / var(--tw-text-opacity));
+  color: rgb(var(--brightwhite) / var(--tw-text-opacity));
 }
 
 .focus\:outline-none:focus {
diff --git a/tailwind.config.js b/tailwind.config.js
index 812e1a2..9b7342d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,47 +1,33 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.html", "./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  safelist: [
-    {
-      pattern: /hljs+/,
-    },
-  ],
   theme: {
       colors: {
-        black: "rgb(var(--black) / <alpha-value>)",
-        red: "rgb(var(--red) / <alpha-value>)",
-        green: "rgb(var(--green) / <alpha-value>)",
-        yellow: "rgb(var(--yellow) / <alpha-value>)",
-        blue: "rgb(var(--blue) / <alpha-value>)",
-        magenta: "rgb(var(--magenta) / <alpha-value>)",
-        cyan: "rgb(var(--cyan) / <alpha-value>)",
-        white: "rgb(var(--white) / <alpha-value>)",
-        brightblack: "rgb(var(--brightblack) / <alpha-value>)",
-        brightred: "rgb(var(--brightred) / <alpha-value>)",
-        brightgreen: "rgb(var(--brightgreen) / <alpha-value>)",
-        brightyellow: "rgb(var(--brightyellow) / <alpha-value>)",
-        brightblue: "rgb(var(--brightblue) / <alpha-value>)",
-        brightmagenta: "rgb(var(--brightmagenta) / <alpha-value>)",
-        brightcyan: "rgb(var(--brightcyan) / <alpha-value>)",
-        brightwhite: "rgb(var(--brightwhite) / <alpha-value>)",
-        background: "rgb(var(--background) / <alpha-value>)",
-        selection_foreground: "rgb(var(--selection_foreground) / <alpha-value>)",
-        cursor: "rgb(var(--cursor) / <alpha-value>)",
-        foreground: "rgb(var(--foreground) / <alpha-value>)",
-        selection_background: "rgb(var(--selection_background) / <alpha-value>)",
-    },
-    extend: {},
-    hljs: {
-      theme: "nord",
-      custom: {
-        general: {
-          comment: "#FEFEFE",
-        },
-      },
-    },
-  },
-  plugins: [require("tailwind-highlightjs")],
-  safelist: {
+          black: "rgb(var(--black) / <alpha-value>)",
+          red: "rgb(var(--red) / <alpha-value>)",
+          green: "rgb(var(--green) / <alpha-value>)",
+          yellow: "rgb(var(--yellow) / <alpha-value>)",
+          blue: "rgb(var(--blue) / <alpha-value>)",
+          magenta: "rgb(var(--magenta) / <alpha-value>)",
+          cyan: "rgb(var(--cyan) / <alpha-value>)",
+          white: "rgb(var(--white) / <alpha-value>)",
+          brightblack: "rgb(var(--brightblack) / <alpha-value>)",
+          brightred: "rgb(var(--brightred) / <alpha-value>)",
+          brightgreen: "rgb(var(--brightgreen) / <alpha-value>)",
+          brightyellow: "rgb(var(--brightyellow) / <alpha-value>)",
+          brightblue: "rgb(var(--brightblue) / <alpha-value>)",
+          brightmagenta: "rgb(var(--brightmagenta) / <alpha-value>)",
+          brightcyan: "rgb(var(--brightcyan) / <alpha-value>)",
+          brightwhite: "rgb(var(--brightwhite) / <alpha-value>)",
+          background: "rgb(var(--background) / <alpha-value>)",
+          selection_foreground: "rgb(var(--selection_foreground) / <alpha-value>)",
+          cursor: "rgb(var(--cursor) / <alpha-value>)",
+          foreground: "rgb(var(--foreground) / <alpha-value>)",
+          selection_background: "rgb(var(--selection_background) / <alpha-value>)",
+      }
+   },
+  extend: {},
+  safelist: [{
     pattern: /(bg|text|border)-(transparent|color0|color1|color2|color3|color4|color5|color6|color7|color8|color9|color10|color11|color12|color13|color14|color15|background|selection_background|cursor|foreground|selection_background)/,
-  }
+  }],
 };
diff --git a/yarn.lock b/yarn.lock
index cdcd727..d32d3cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2476,6 +2476,11 @@ highlight.js@^11.5.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
   integrity sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==
 
+highlight.js@^11.9.0:
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
+  integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
+
 html-encoder-decoder@^1.3.9:
   version "1.3.9"
   resolved "https://registry.yarnpkg.com/html-encoder-decoder/-/html-encoder-decoder-1.3.9.tgz#d5ec7d249cd525709f7640ae9340f482cc86e94a"