Fix TTS module initialization and dependency issues. Update module IDs for consistency, improve circular dependency detection, and fix UI Controller event handling.

public/css/style.css

@@ -393,6 +393,10 @@ ol.choice {
 
 #story {
     overflow-x:  visible;
+    text-align: justify;
+    text-justify: inter-word;
+    margin-bottom: 1.2em;
+    line-height: 1.5;
 }
 
 /* #story p span {
@@ -442,6 +446,12 @@ ol.choice {
     -ms-animation: fadeIn ease 1s;
 }
 
+/* Style for individual words that need to fade in */
+.word.fade-in {
+    animation-fill-mode: forwards;
+    opacity: 0; /* Start invisible */
+}
+
 @keyframes fadeIn {
     0% {opacity:0;}
     100% {opacity:1;}
@@ -655,3 +665,59 @@ ol.choice {
 .fade-in-input {
     animation: fadeInInput 0.5s ease forwards;
 }
+
+/* Text animation and typography styles */
+
+/* Fade-in animation for text elements */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.fade-in {
+  opacity: 0;
+  animation: fadeIn 0.5s ease-in forwards;
+}
+
+/* Hyphenation settings */
+.story-paragraph {
+  hyphens: auto;
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+}
+
+/* Justified text styles */
+#story p {
+  text-align: justify;
+  text-justify: inter-word;
+  margin-bottom: 1.2em;
+  line-height: 1.5;
+}
+
+/* Typography for word elements in rendered paragraphs */
+.word {
+  display: inline-block;
+  position: absolute;
+}
+
+/* Typography for hyphen at line breaks */
+.hyphen-marker {
+  display: inline-block;
+}
+
+/* Highlight the latest paragraph being rendered */
+.latest-paragraph {
+  color: #000;
+}
+
+/* Completed paragraphs style */
+.completed-paragraph {
+  color: #222;
+}
+
+/* Animation speed controls */
+#speed {
+  width: 80px;
+  vertical-align: middle;
+  margin: 0 5px;
+}