A lot of AI slop

frontend/app/assets/css/colors.scss

@@ -2,28 +2,30 @@
 
 $themes: (
     dark: (
-        background: #141414,
-        background-line: #202324,
-        background-fore: #10141f,
-        hover: #21262d,
-        selected: #4a4a4b,
-        border-color: #819796,
-        border: #202324,
-        text: #ebede9,
-        container-shadow: #151d28,
-        sticky-header-bg: #20202077
+        background: #0e0e0e,
+        background-line: #181818,
+        background-fore: #1a1a1a,
+        hover: #1f1f1f,
+        selected: #3a3a3a,
+        border-color: #5c5c5c,
+        border: #181818,
+        text: #d4d4d4,
+        container-shadow: #0a0a0a,
+        sticky-header-bg: #161616cc,
+        frame-glow: #44444455,
     ),
     light: (
         background: #ffffff,
         background-line: #f0f0f0,
-        background-fore: #ffffff,
+        background-fore: #f5f5f5,
         border-color: #e0e0e0,
         border: #f0f0f0,
         hover: #e9e9e9,
         selected: #d4d4d4,
         text: #1e1e1e,
         container-shadow: #5f6774,
-        sticky-header-bg: #fff
+        sticky-header-bg: #fff,
+        frame-glow: #00000022,
     )
 );
 

frontend/app/assets/css/main.scss

@@ -1,8 +1,10 @@
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 60px;
+}
+
 body {
-  background-size: 28px 28px;
-  background-image:
-    linear-gradient(to right, var(--color-background-line) 1px, transparent 1px),
-    linear-gradient(to bottom, var(--color-background-line) 1px, var(--color-background) 1px);
+  background-color: var(--color-background);
 
   margin: 0;
   padding: 0;
@@ -17,6 +19,7 @@ body {
 * {
   color: var(--color-text);
   font-family: 'Hurmit';
+  cursor: text;
 }
 
 .pixelated {
@@ -31,20 +34,103 @@ ul {
   list-style: none; /* Remove default bullets */
   margin: 8px 0;
 }
-ul > li {padding: 0px 25px} /* Stretching li elements a little so it looks prettier */
-li {
+
+/* TUI-style nested lists with box-drawing chars */
+ul > li {
+  padding: 4px 24px;
   position: relative;
+  line-height: 1.6;
 }
+
 li::before {
-    content: "";
-    width: 8px;
-    height: 8px;
-    background-color: var(--color-text);
+    width: auto;
+    height: auto;
+    background-color: transparent;
     position: absolute;
-    top: 6px;
-    left: 4px;
+    top: 0px;
+    left: 0px;
+    color: var(--color-border-color);
+    font-family: 'Hurmit', monospace;
+    font-size: 0.9em;
 }
 
 a {
   color: var(--color-link);
-}
+  cursor: pointer;
+}
+
+/* TUI-style blockquotes */
+blockquote {
+  margin: 12px 0;
+  padding: 8px 16px;
+  border-left: 3px solid var(--color-link);
+  background-color: var(--color-background-line);
+  font-style: italic;
+  position: relative;
+}
+
+blockquote::before {
+  content: "┃ ";
+  position: absolute;
+  left: -16px;
+  color: var(--color-border-color);
+}
+
+/* TUI-style code blocks */
+pre, code {
+  font-family: 'Hurmit', monospace;
+  background-color: var(--color-background-line);
+  border: 1px solid var(--color-border-color);
+}
+
+pre {
+  padding: 12px 16px;
+  overflow-x: auto;
+  margin: 12px 0;
+  position: relative;
+  
+  &::before {
+    content: "┌── CODE ─────────────────────────────────────┐";
+    position: absolute;
+    top: -10px;
+    left: 8px;
+    font-size: 0.6rem;
+    background-color: var(--color-background-fore);
+    padding: 0 4px;
+    color: var(--color-border-color);
+  }
+  
+  code {
+    background-color: transparent;
+    border: none;
+  }
+}
+
+/* TUI-style horizontal rules */
+hr {
+  border: none;
+  height: 1px;
+  background-color: var(--color-border-color);
+  margin: 20px 0;
+  position: relative;
+  
+  &::after {
+    content: "──────────";
+    position: absolute;
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--color-background);
+    padding: 0 8px;
+    color: var(--color-border-color);
+    font-family: 'Hurmit', monospace;
+    font-size: 0.7rem;
+    letter-spacing: 2px;
+  }
+}
+
+/* Selection styling */
+::selection {
+  background-color: var(--color-link);
+  color: var(--color-background-fore);
+}