From 57f5e27a833acafd909c5ab946a330adc590b863 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Wed, 2 Aug 2023 23:26:44 +0200
Subject: [PATCH] fixing file selection

---
 index.html     |  15 +-
 src/API.ts     |   4 +-
 src/main.ts    |  63 +++---
 src/output.css | 548 ++++++++++++++++++++++++-------------------------
 4 files changed, 317 insertions(+), 313 deletions(-)

diff --git a/index.html b/index.html
index 43136d5..dbca5fc 100644
--- a/index.html
+++ b/index.html
@@ -41,6 +41,19 @@
           <span id="universe-viewer" class="ml-4 text-2xl text-white">Topos</span>
         </a>
         <nav class="py-0 flex flex-wrap items-center text-base absolute right-0">
+        <!-- 
+          <div id="blinkers" class="flex flex-row space-x-2 pr-4 pb-1.5 justify-center items-center">
+            <p id="blinker-1" class="text-white text-5xl">•</p>
+            <p id="blinker-2" class="text-white text-5xl">•</p>
+            <p id="blinker-3" class="text-white text-5xl">•</p>
+            <p id="blinker-4" class="text-white text-5xl">•</p>
+            <p id="blinker-5" class="text-white text-5xl">•</p>
+            <p id="blinker-6" class="text-white text-5xl">•</p>
+            <p id="blinker-7" class="text-white text-5xl">•</p>
+            <p id="blinker-8" class="text-white text-5xl">•</p>
+            <p id="blinker-9" class="text-white text-5xl">•</p>
+          </div>
+          -->
           <span id="clockviewer" class="font-semibold mr-6 py-1 bg-white text-black rounded align-center text-normal px-2">Clock</span>
           <a id="play-button-1" class="mr-5">
             <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 14 16">
@@ -244,7 +257,7 @@
  
          </ul>
          <!-- Here comes the editor itself -->
-          <div id="editor" class="invisible relative flex flex-row flex-grow w-100 overflow-hidden overflow-y-hidden">
+          <div id="editor" class="invisible relative flex flex-row flex-grow overflow-hidden overflow-y-hidden">
         </div>
         </div>
       </div>
diff --git a/src/API.ts b/src/API.ts
index a6dc7a0..e45df86 100644
--- a/src/API.ts
+++ b/src/API.ts
@@ -10,8 +10,7 @@ import { ZZFX, zzfx } from "zzfx";
 
 
 const sound = (value: any) => ({
-    value,
-    context: {},
+    value, context: {},
     ensureObjectValue: () => { }
 });
 
@@ -42,6 +41,7 @@ export class UserAPI {
     }
     r = this.rate
 
+
     script(...args: number[]): void {
         args.forEach(arg => {
             tryEvaluate(this.app, this.app.universes[
diff --git a/src/main.ts b/src/main.ts
index c9b25e7..85ca87b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -207,9 +207,8 @@ export class Editor {
       if ((event.key === "Enter" || event.key === "Return") && event.ctrlKey) {
         event.preventDefault();
         // const code = this.getCodeBlock();
-        this.currentFile.candidate = this.view.state.doc.toString();
+        this.currentFile().candidate = this.view.state.doc.toString();
         this.flashBackground('#2d313d', 200)
-        // tryEvaluate(this, this.currentFile);
       }
 
       // Shift + Enter or Ctrl + E: evaluate the line
@@ -218,7 +217,7 @@ export class Editor {
         (event.key === "e" && event.ctrlKey)
       ) {
         event.preventDefault(); // Prevents the addition of a new line
-        this.currentFile.candidate = this.view.state.doc.toString();
+        this.currentFile().candidate = this.view.state.doc.toString();
         this.flashBackground('#2d313d', 200)
         // const code = this.getSelectedLines();
       }
@@ -237,15 +236,18 @@ export class Editor {
       if (event.ctrlKey && event.key === "l") {
         event.preventDefault();
         this.changeModeFromInterface("local");
+        this.view.focus();
       }
       if (event.ctrlKey && event.key === "g") {
         event.preventDefault();
         this.changeModeFromInterface("global");
+        this.view.focus();
       }
       if (event.ctrlKey && event.key === "i") {
         event.preventDefault();
         this.changeModeFromInterface("init");
         this.changeToLocalBuffer(0);
+        this.view.focus();
       }
       [112, 113, 114, 115, 116, 117, 118, 119, 120].forEach(
         (keycode, index) => {
@@ -278,7 +280,7 @@ export class Editor {
         for (let j = 0; j < tabs.length; j++) {
           if (j != i) tabs[j].classList.remove("bg-orange-300");
         }
-        this.currentFile.candidate = this.view.state.doc.toString();
+        this.currentFile().candidate = this.view.state.doc.toString();
 
         let tab = event.target as HTMLElement;
         let tab_id = tab.id.split("-")[1];
@@ -365,7 +367,7 @@ export class Editor {
     })
 
     this.buffer_search.addEventListener("keydown", (event) => {
-      this.changeModeFromInterface("local");
+      // this.changeModeFromInterface("local");
       if (event.key === "Enter") {
         let query = this.buffer_search.value;
         if (query.length > 2 && query.length < 20) {
@@ -373,12 +375,10 @@ export class Editor {
           this.settings.selected_universe = query;
           this.buffer_search.value = "";
           this.closeBuffersModal();
-          // Focus on the editor
           this.view.focus();
         }
       }
     });
-
     tryEvaluate(this, this.universes[this.selected_universe.toString()].init)
   }
 
@@ -390,6 +390,10 @@ export class Editor {
     return this.universes[this.selected_universe.toString()].init;
   }
 
+  get local_buffer() {
+    return this.universes[this.selected_universe.toString()].locals[this.local_index];
+  }
+
   changeToLocalBuffer(i: number) {
     // Updating the CSS accordingly
     const tabs = document.querySelectorAll('[id^="tab-"]');
@@ -399,7 +403,6 @@ export class Editor {
       if (j != i) tabs[j].classList.remove("bg-orange-300");
     }
     this.currentFile.candidate = this.view.state.doc.toString();
-
     let tab_id = tab.id.split("-")[1];
     this.local_index = parseInt(tab_id);
     this.updateEditorView();
@@ -407,7 +410,11 @@ export class Editor {
 
   changeModeFromInterface(mode: "global" | "local" | "init") {
 
-    const interface_buttons: HTMLElement[] = [ this.local_button, this.global_button, this.init_button ];
+    const interface_buttons: HTMLElement[] = [
+      this.local_button, 
+      this.global_button, 
+      this.init_button
+    ];
 
     let changeColor = (button: HTMLElement) => {
       interface_buttons.forEach((button) => {
@@ -423,12 +430,15 @@ export class Editor {
     };
 
     switch (mode) {
+
       case "local":
         if (this.local_script_tabs.classList.contains("hidden")) {
           this.local_script_tabs.classList.remove("hidden");
         }
         this.currentFile.candidate = this.view.state.doc.toString();
-        this.editor_mode = "local";
+        this.editor_mode = 'local'; 
+        this.local_index = 0;
+        this.changeToLocalBuffer(this.local_index);
         changeColor(this.local_button);
         break;
       case "global":
@@ -436,17 +446,14 @@ export class Editor {
           this.local_script_tabs.classList.add("hidden");
         }
         this.currentFile.candidate = this.view.state.doc.toString();
-        this.editor_mode = "global";
-        changeColor(this.global_button);
+        this.editor_mode = "global"; changeColor(this.global_button);
         break;
       case "init":
         if (!this.local_script_tabs.classList.contains("hidden")) {
           this.local_script_tabs.classList.add("hidden");
         }
         this.currentFile.candidate = this.view.state.doc.toString();
-        this.editor_mode = "init";
-        changeColor(this.init_button);
-        this.changeToLocalBuffer(0);
+        this.editor_mode = "init"; changeColor(this.init_button);
         break;
     }
     this.updateEditorView();
@@ -498,32 +505,36 @@ export class Editor {
 
   updateEditorView(): void {
     // Remove everything from the editor
-    this.view.dispatch({
-      changes: { from: 0, to: this.view.state.doc.toString().length, insert: '', },
+    this.view.dispatch({ 
+      changes: { 
+        from: 0,
+        to: this.view.state.doc.toString().length,
+        insert: '', 
+      },
     });
 
     // Insert something
     this.view.dispatch({
       changes: {
-        from: 0,
-        insert: this.currentFile.candidate,
+        from: 0, 
+        insert: this.currentFile().candidate,
       },
     });
   }
 
-  get currentFile(): File {
+  currentFile(): File {
     switch (this.editor_mode) {
-      case "global":
+      case "global": 
         return this.global_buffer;
       case "local":
-        return this.universes[this.selected_universe].locals[this.local_index];
+        return this.local_buffer;
       case "init":
         return this.init_buffer;
     }
   }
 
   loadUniverse(universeName: string) {
-    this.currentFile.candidate = this.view.state.doc.toString();
+    this.currentFile().candidate = this.view.state.doc.toString();
 
     let selectedUniverse = universeName.trim();
     if (this.universes[selectedUniverse] === undefined) {
@@ -540,7 +551,7 @@ export class Editor {
       },
     });
     this.view.dispatch({
-      changes: { from: 0, insert: this.currentFile.candidate },
+      changes: { from: 0, insert: this.currentFile().candidate },
     });
     tryEvaluate(this, this.universes[this.selected_universe.toString()].init)
   }
@@ -695,8 +706,8 @@ document.getElementById("start-button")!.addEventListener("click", startClock);
 window.addEventListener("beforeunload", () => {
   event.preventDefault();
   // Iterate over all local files and set the candidate to the committed
-  app.currentFile.candidate = app.view.state.doc.toString();
-  app.currentFile.committed = app.view.state.doc.toString();
+  app.currentFile().candidate = app.view.state.doc.toString();
+  app.currentFile().committed = app.view.state.doc.toString();
   app.settings.saveApplicationToLocalStorage(app.universes, app.settings);
   app.clock.stop()
   return null;
diff --git a/src/output.css b/src/output.css
index 714c984..f43befd 100644
--- a/src/output.css
+++ b/src/output.css
@@ -554,10 +554,6 @@ video {
   visibility: hidden;
 }
 
-.fixed {
-  position: fixed;
-}
-
 .absolute {
   position: absolute;
 }
@@ -603,12 +599,19 @@ video {
   top: 0px;
 }
 
-.z-50 {
-  z-index: 50;
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }
 
-.m-auto {
-  margin: auto;
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.mx-48 {
+  margin-left: 12rem;
+  margin-right: 12rem;
 }
 
 .mx-auto {
@@ -616,6 +619,11 @@ video {
   margin-right: auto;
 }
 
+.my-48 {
+  margin-top: 12rem;
+  margin-bottom: 12rem;
+}
+
 .mb-0 {
   margin-bottom: 0px;
 }
@@ -628,6 +636,10 @@ video {
   margin-bottom: 1rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -640,32 +652,20 @@ video {
   margin-right: 1.25rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
-.mr-8 {
-  margin-right: 2rem;
-}
-
-.mr-20 {
-  margin-right: 5rem;
-}
-
 .mr-6 {
   margin-right: 1.5rem;
 }
 
-.mr-4 {
-  margin-right: 1rem;
+.mt-12 {
+  margin-top: 3rem;
 }
 
-.ml-auto {
-  margin-left: auto;
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.ml-8 {
+  margin-left: 2rem;
 }
 
 .block {
@@ -680,10 +680,6 @@ video {
   display: flex;
 }
 
-.inline-flex {
-  display: inline-flex;
-}
-
 .hidden {
   display: none;
 }
@@ -692,6 +688,10 @@ video {
   height: 2.5rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -700,24 +700,12 @@ video {
   height: 1.5rem;
 }
 
-.h-screen {
-  height: 100vh;
-}
-
-.h-3 {
-  height: 0.75rem;
-}
-
 .h-8 {
   height: 2rem;
 }
 
-.h-\[calc\(100\%-1rem\)\] {
-  height: calc(100% - 1rem);
-}
-
-.max-h-full {
-  max-height: 100%;
+.h-screen {
+  height: 100vh;
 }
 
 .min-h-screen {
@@ -732,6 +720,14 @@ video {
   width: 3.5rem;
 }
 
+.w-2\/5 {
+  width: 40%;
+}
+
+.w-3\/5 {
+  width: 60%;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -740,24 +736,20 @@ video {
   width: 1.5rem;
 }
 
-.w-full {
-  width: 100%;
-}
-
-.w-2 {
-  width: 0.5rem;
-}
-
-.w-3 {
-  width: 0.75rem;
-}
-
 .w-8 {
   width: 2rem;
 }
 
-.max-w-2xl {
-  max-width: 42rem;
+.w-auto {
+  width: auto;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.max-w-sm {
+  max-width: 24rem;
 }
 
 .flex-grow {
@@ -768,8 +760,19 @@ video {
   flex-grow: 1;
 }
 
-.cursor-not-allowed {
-  cursor: not-allowed;
+.border-spacing-y-4 {
+  --tw-border-spacing-y: 1rem;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
 }
 
 .flex-row {
@@ -784,10 +787,6 @@ video {
   flex-wrap: wrap;
 }
 
-.items-start {
-  align-items: flex-start;
-}
-
 .items-center {
   align-items: center;
 }
@@ -796,26 +795,10 @@ video {
   justify-content: center;
 }
 
-.justify-between {
-  justify-content: space-between;
-}
-
-.space-y-6 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
-}
-
-.space-x-8 > :not([hidden]) ~ :not([hidden]) {
+.space-x-0 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(2rem * var(--tw-space-x-reverse));
-  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1rem * var(--tw-space-x-reverse));
-  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  margin-right: calc(0px * var(--tw-space-x-reverse));
+  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
@@ -824,6 +807,36 @@ video {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -832,10 +845,6 @@ video {
   overflow-y: auto;
 }
 
-.overflow-x-hidden {
-  overflow-x: hidden;
-}
-
 .overflow-y-hidden {
   overflow-y: hidden;
 }
@@ -861,30 +870,20 @@ video {
   border-bottom-left-radius: 0.25rem;
 }
 
-.rounded-t {
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
-}
-
 .border {
   border-width: 1px;
 }
 
-.border-r {
-  border-right-width: 1px;
-}
-
 .border-b {
   border-bottom-width: 1px;
 }
 
-.border-t {
-  border-top-width: 1px;
+.border-r {
+  border-right-width: 1px;
 }
 
-.border-gray-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+.border-t {
+  border-top-width: 1px;
 }
 
 .border-gray-200 {
@@ -892,14 +891,19 @@ video {
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.bg-blue-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+.border-gray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+}
+
+.border-gray-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(31 41 55 / var(--tw-border-opacity));
 }
 
 .bg-gray-100 {
@@ -907,19 +911,9 @@ video {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.bg-white {
+.bg-gray-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.bg-blue-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-}
-
-.bg-blue-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
 .bg-gray-800 {
@@ -927,13 +921,9 @@ video {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.bg-blue-500 {
+.bg-neutral-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
-.bg-transparent {
-  background-color: transparent;
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
 }
 
 .bg-orange-300 {
@@ -941,19 +931,9 @@ video {
   background-color: rgb(253 186 116 / var(--tw-bg-opacity));
 }
 
-.bg-green-300 {
+.bg-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
-}
-
-.bg-red-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
-}
-
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .bg-opacity-50 {
@@ -999,9 +979,14 @@ video {
   padding-right: 1rem;
 }
 
-.px-7 {
-  padding-left: 1.75rem;
-  padding-right: 1.75rem;
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
 }
 
 .py-0 {
@@ -1024,9 +1009,9 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
 }
 
 .py-4 {
@@ -1034,16 +1019,6 @@ video {
   padding-bottom: 1rem;
 }
 
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
-.py-2\.5 {
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
-}
-
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -1056,34 +1031,55 @@ video {
   padding-left: 0.5rem;
 }
 
-.pl-2\.5 {
-  padding-left: 0.625rem;
-}
-
 .pl-3 {
   padding-left: 0.75rem;
 }
 
-.pr-8 {
-  padding-right: 2rem;
-}
-
 .pl-4 {
   padding-left: 1rem;
 }
 
-.pl-6 {
-  padding-left: 1.5rem;
-}
-
 .pl-5 {
   padding-left: 1.25rem;
 }
 
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pb-1\.5 {
+  padding-bottom: 0.375rem;
+}
+
+.pl-12 {
+  padding-left: 3rem;
+}
+
+.pl-24 {
+  padding-left: 6rem;
+}
+
+.pr-4 {
+  padding-right: 1rem;
+}
+
 .text-center {
   text-align: center;
 }
 
+.align-middle {
+  vertical-align: middle;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1104,6 +1100,11 @@ video {
   line-height: 1rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1112,6 +1113,10 @@ video {
   font-weight: 500;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .font-semibold {
   font-weight: 600;
 }
@@ -1120,8 +1125,8 @@ video {
   font-style: italic;
 }
 
-.leading-relaxed {
-  line-height: 1.625;
+.tracking-tight {
+  letter-spacing: -0.025em;
 }
 
 .text-black {
@@ -1129,6 +1134,11 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -1149,49 +1159,24 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.text-gray-400 {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
-.text-blue-200 {
-  --tw-text-opacity: 1;
-  color: rgb(191 219 254 / var(--tw-text-opacity));
-}
-
-.text-blue-800 {
-  --tw-text-opacity: 1;
-  color: rgb(30 64 175 / var(--tw-text-opacity));
-}
-
-.text-rose-800 {
-  --tw-text-opacity: 1;
-  color: rgb(159 18 57 / var(--tw-text-opacity));
-}
-
-.text-sky-700 {
-  --tw-text-opacity: 1;
-  color: rgb(3 105 161 / var(--tw-text-opacity));
-}
-
-.text-sky-300 {
-  --tw-text-opacity: 1;
-  color: rgb(125 211 252 / var(--tw-text-opacity));
-}
-
 .text-orange-300 {
   --tw-text-opacity: 1;
   color: rgb(253 186 116 / var(--tw-text-opacity));
 }
 
-.text-orange-500 {
+.text-white {
   --tw-text-opacity: 1;
-  color: rgb(249 115 22 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
+.text-red-900 {
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity));
 }
 
 .underline {
@@ -1230,29 +1215,14 @@ video {
   transition-duration: 200ms;
 }
 
-.hover\:bg-blue-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-white:hover {
+.hover\:bg-gray-700:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-gray-800:hover {
@@ -1260,9 +1230,9 @@ video {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-200:hover {
+.hover\:bg-white:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .hover\:text-gray-900:hover {
@@ -1270,24 +1240,26 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.focus\:z-10:focus {
-  z-index: 10;
-}
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus\:ring-4:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-blue-300:focus {
+.focus\:ring-blue-500:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
 
 :is([dir="rtl"] .rtl\:border-l) {
@@ -1298,30 +1270,32 @@ video {
   border-right-width: 0px;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes pulse {
+    50% {
+      opacity: .5;
+    }
+  }
+
+  .motion-safe\:animate-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
-  .dark\:border-gray-700 {
-    --tw-border-opacity: 1;
-    border-color: rgb(55 65 81 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-gray-500 {
-    --tw-border-opacity: 1;
-    border-color: rgb(107 114 128 / var(--tw-border-opacity));
-  }
-
   .dark\:border-gray-600 {
     --tw-border-opacity: 1;
     border-color: rgb(75 85 99 / var(--tw-border-opacity));
   }
 
-  .dark\:bg-black {
-    --tw-bg-opacity: 1;
-    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  .dark\:border-gray-700 {
+    --tw-border-opacity: 1;
+    border-color: rgb(55 65 81 / var(--tw-border-opacity));
   }
 
-  .dark\:bg-blue-600 {
+  .dark\:bg-gray-700 {
     --tw-bg-opacity: 1;
-    background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
   }
 
   .dark\:bg-gray-800 {
@@ -1329,9 +1303,9 @@ video {
     background-color: rgb(31 41 55 / var(--tw-bg-opacity));
   }
 
-  .dark\:bg-gray-700 {
+  .dark\:bg-neutral-900 {
     --tw-bg-opacity: 1;
-    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+    background-color: rgb(23 23 23 / var(--tw-bg-opacity));
   }
 
   .dark\:text-gray-200 {
@@ -1349,19 +1323,8 @@ video {
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 
-  .dark\:text-gray-500 {
-    --tw-text-opacity: 1;
-    color: rgb(107 114 128 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-300 {
-    --tw-text-opacity: 1;
-    color: rgb(209 213 219 / var(--tw-text-opacity));
-  }
-
-  .dark\:hover\:bg-blue-700:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+  .dark\:ring-offset-gray-800 {
+    --tw-ring-offset-color: #1f2937;
   }
 
   .dark\:hover\:bg-gray-800:hover {
@@ -1369,37 +1332,54 @@ video {
     background-color: rgb(31 41 55 / var(--tw-bg-opacity));
   }
 
-  .dark\:hover\:bg-gray-600:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:text-white:hover {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-
-  .dark\:focus\:ring-blue-800:focus {
+  .dark\:focus\:ring-blue-600:focus {
     --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-gray-600:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
-  }
-}
-
-@media (min-width: 768px) {
-  .md\:inset-0 {
-    inset: 0px;
+    --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
   }
 }
 
 @media (min-width: 1024px) {
+  .lg\:w-1\/5 {
+    width: 20%;
+  }
+
+  .lg\:w-4\/5 {
+    width: 80%;
+  }
+
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
   .lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(2rem * var(--tw-space-x-reverse));
     margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
   }
+
+  .lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+
+  .lg\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .lg\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:block {
+    display: block;
+  }
+
+  .xl\:hidden {
+    display: none;
+  }
 }