working on making nojs workable

src/app.css

@@ -230,6 +230,35 @@ body {
   transition: background-color 500ms ease-in-out;
 }
 
+[data-typewriter="animated"] [data-char-index] {
+  opacity: 0;
+}
+
+[data-typewriter-ready="true"] [data-char-index] {
+  transition: opacity 0.05s ease-in;
+}
+
+.bg-base.relative.h-screen {
+  width: 100vw;
+  margin-left: 0;
+}
+
+@media (min-width: 768px) {
+  .bg-base.relative.h-screen {
+    width: calc(100vw - 600px);
+    margin-left: 300px;
+  }
+}
+
+@media (max-width: 767px) {
+  nav.fixed.z-50[class*="border-r-2"] {
+    /* Left sidebar starts off-screen on mobile */
+    transform: translateX(-100%);
+  }
+}
+
+/* Note: JS will add inline styles and reactive classList that override these defaults */
+
 .cursor-typing {
   display: inline-block;
   width: 2px;
@@ -1204,3 +1233,62 @@ svg.mermaid text {
 .reference-item > span.ml-2 {
   font-style: italic;
 }
+
+/* Conditional Block Styling in Editor */
+.ProseMirror .conditional-block {
+  border: 2px dashed rgba(69, 112, 122, 0.5);
+  border-radius: 4px;
+  padding: 12px;
+  margin: 8px 0;
+  position: relative;
+  background: rgba(69, 112, 122, 0.05);
+}
+
+.ProseMirror .conditional-block::before {
+  content: "🔒 " attr(data-condition-type) ": " attr(data-condition-value);
+  position: absolute;
+  top: -12px;
+  left: 8px;
+  background: var(--color-blue);
+  color: var(--color-base);
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  z-index: 1;
+}
+
+.ProseMirror .conditional-block[data-show-when="false"]::before {
+  content: "🔒 NOT " attr(data-condition-type) ": " attr(data-condition-value);
+}
+
+.ProseMirror .conditional-content {
+  position: relative;
+}
+
+/* Inline conditional styling */
+.ProseMirror .conditional-inline {
+  display: inline;
+  background: rgba(69, 112, 122, 0.15);
+  border-bottom: 2px dotted rgba(69, 112, 122, 0.6);
+  padding: 2px 4px;
+  border-radius: 3px;
+  position: relative;
+  cursor: pointer;
+}
+
+.ProseMirror .conditional-inline::after {
+  content: "🔒";
+  font-size: 10px;
+  margin-left: 2px;
+  opacity: 0.7;
+}
+
+.ProseMirror .conditional-inline[data-show-when="false"] {
+  background: rgba(193, 74, 74, 0.15);
+  border-bottom-color: rgba(193, 74, 74, 0.6);
+}
+
+.ProseMirror .conditional-inline[data-show-when="false"]::after {
+  content: "🔒❌";
+}