4 files changed, 55 insertions, 17 deletions

diff --git a/frontend-vanilla/public/themes/codex.css b/frontend-vanilla/public/themes/codex.css
index 50942e6..fcf4e33 100644
--- a/frontend-vanilla/public/themes/codex.css
+++ b/frontend-vanilla/public/themes/codex.css
@@ -170,7 +170,7 @@ body {
   padding: 2.5rem 2rem;
 }
 
-.main-content > * {
+.main-content>* {
   max-width: 33em;
 }
 
@@ -182,10 +182,19 @@ body {
   border-radius: 0;
   padding-bottom: 2.5rem;
   border-bottom: none;
+  transition: opacity 0.4s ease;
+}
+
+.feed-item.read {
+  opacity: 0.5;
+}
+
+.feed-item.read .item-title {
+  color: var(--codex-muted);
 }
 
 /* Decorative separator between items -- a subtle fleuron */
-.feed-item + .feed-item::before {
+.feed-item+.feed-item::before {
   content: '\2766';
   display: block;
   text-align: center;
@@ -451,4 +460,4 @@ select:focus {
 
 .theme-dark .sidebar-backdrop {
   background: rgba(28, 26, 23, 0.6);
-}
+}
\ No newline at end of file
diff --git a/frontend-vanilla/public/themes/refined.css b/frontend-vanilla/public/themes/refined.css
index fab2b96..191a5a2 100644
--- a/frontend-vanilla/public/themes/refined.css
+++ b/frontend-vanilla/public/themes/refined.css
@@ -86,6 +86,16 @@ body {
 .feed-item {
   padding: var(--spacing-md) var(--spacing-sm);
   margin-top: var(--spacing-xl);
+  transition: opacity 0.3s ease;
+}
+
+.feed-item.read {
+  opacity: 0.45;
+}
+
+.feed-item.read .item-title {
+  font-weight: 500;
+  opacity: 0.8;
 }
 
 .item-title {
@@ -269,4 +279,4 @@ select:focus {
   padding: 2px 8px;
   border-radius: 4px;
   letter-spacing: 0.04em;
-}
+}
\ No newline at end of file
diff --git a/frontend-vanilla/public/themes/sakura.css b/frontend-vanilla/public/themes/sakura.css
index 48a1c0a..948e22e 100644
--- a/frontend-vanilla/public/themes/sakura.css
+++ b/frontend-vanilla/public/themes/sakura.css
@@ -184,7 +184,7 @@ body {
   padding: 2.5rem 2rem;
 }
 
-.main-content > * {
+.main-content>* {
   max-width: 34em;
 }
 
@@ -195,10 +195,20 @@ body {
   margin-top: 2.5rem;
   border-radius: 0;
   border-bottom: none;
+  transition: opacity 0.4s ease;
+}
+
+.feed-item.read {
+  opacity: 0.4;
+}
+
+.feed-item.read .item-title {
+  color: var(--sakura-stone);
+  font-weight: 400;
 }
 
 /* Subtle separator -- a single thin rule, Japanese-style restraint */
-.feed-item + .feed-item {
+.feed-item+.feed-item {
   border-top: 1px solid var(--sakura-shadow);
   padding-top: 2.5rem;
 }
@@ -462,6 +472,7 @@ select:focus {
 }
 
 /* ---- Loading/Empty ---- */
-.loading, .empty {
+.loading,
+.empty {
   color: var(--sakura-stone);
-}
+}
\ No newline at end of file
diff --git a/frontend-vanilla/public/themes/terminal.css b/frontend-vanilla/public/themes/terminal.css
index 48164c9..484d3ff 100644
--- a/frontend-vanilla/public/themes/terminal.css
+++ b/frontend-vanilla/public/themes/terminal.css
@@ -68,13 +68,11 @@ body {
     height: 100%;
     pointer-events: none;
     z-index: 9999;
-    background: repeating-linear-gradient(
-      to bottom,
-      transparent,
-      transparent 2px,
-      rgba(0, 0, 0, 0.03) 2px,
-      rgba(0, 0, 0, 0.03) 4px
-    );
+    background: repeating-linear-gradient(to bottom,
+        transparent,
+        transparent 2px,
+        rgba(0, 0, 0, 0.03) 2px,
+        rgba(0, 0, 0, 0.03) 4px);
     will-change: transform;
   }
 }
@@ -217,6 +215,15 @@ body {
   padding: 1.25rem 0.5rem;
   margin-top: 1.5rem;
   border-bottom: 1px solid var(--border-color);
+  transition: opacity 0.4s ease;
+}
+
+.feed-item.read {
+  opacity: 0.35;
+}
+
+.feed-item.read .item-title {
+  text-decoration: none;
 }
 
 .feed-item.selected {
@@ -482,8 +489,9 @@ select:focus {
 }
 
 /* ---- Loading/Empty States ---- */
-.loading, .empty {
+.loading,
+.empty {
   color: var(--text-color);
   opacity: 0.4;
   font-family: inherit;
-}
+}
\ No newline at end of file