Render epic descriptions as markdown in web UI

Successfully implemented markdown rendering for epic descriptions
in the

1.
**[Omni/Jr/Web.hs](file:///home/ben/omni/Omni/Jr/Web.hs#L380-L391)**:
   - "Design" header instead of "Description" - Markdown rendering via
   `renderMarkdown` function - Full-width `.markdown-content` wrapper

2.
**[Omni/Jr/Web.hs](file:///home/ben/omni/Omni/Jr/Web.hs#L667-L779)**:
   - Headers (`#`, `##`, `###`) - Lists (`-` or `*`) - Code blocks (`
   ``` `) - Inline code (`` ` ``) - Bold text (`**`)

3.
**[Omni/Jr/Web/Style.hs](file:///home/ben/omni/Omni/Jr/Web/Style.hs#L
   - `.markdown-content` with good typography - Headers with
   appropriate sizing/spacing - Code blocks and inline code - Lists
   with proper indentation - Dark mode support

Task-Id: t-150.1

1 files changed, 51 insertions, 0 deletions

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 140d4bb..d544e25 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -29,6 +29,7 @@ stylesheet = do
   buttonStyles
   formStyles
   activityTimelineStyles
+  markdownStyles
   responsiveStyles
   darkModeStyles
 
@@ -563,6 +564,51 @@ activityTimelineStyles = do
     borderColor "#ef4444"
     color "#ef4444"
 
+markdownStyles :: Css
+markdownStyles = do
+  ".markdown-content" ? do
+    width (pct 100)
+    lineHeight (em 1.6)
+    fontSize (px 14)
+    color "#374151"
+  ".md-h1" ? do
+    fontSize (px 18)
+    fontWeight bold
+    margin (em 1) (px 0) (em 0.5) (px 0)
+    paddingBottom (em 0.3)
+    borderBottom (px 1) solid "#e5e7eb"
+  ".md-h2" ? do
+    fontSize (px 16)
+    fontWeight (weight 600)
+    margin (em 0.8) (px 0) (em 0.4) (px 0)
+  ".md-h3" ? do
+    fontSize (px 14)
+    fontWeight (weight 600)
+    margin (em 0.6) (px 0) (em 0.3) (px 0)
+  ".md-para" ? do
+    margin (em 0.5) (px 0) (em 0.5) (px 0)
+  ".md-code" ? do
+    fontFamily ["SF Mono", "Monaco", "Consolas", "monospace"] [monospace]
+    fontSize (px 12)
+    backgroundColor "#1e1e1e"
+    color "#d4d4d4"
+    padding (px 10) (px 12) (px 10) (px 12)
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+    overflow auto
+    whiteSpace preWrap
+    margin (em 0.5) (px 0) (em 0.5) (px 0)
+  ".md-list" ? do
+    margin (em 0.5) (px 0) (em 0.5) (px 0)
+    paddingLeft (px 24)
+  (".md-list" ** li) ? do
+    margin (px 4) (px 0) (px 4) (px 0)
+  ".md-inline-code" ? do
+    fontFamily ["SF Mono", "Monaco", "Consolas", "monospace"] [monospace]
+    fontSize (em 0.9)
+    backgroundColor "#f3f4f6"
+    padding (px 1) (px 4) (px 1) (px 4)
+    borderRadius (px 2) (px 2) (px 2) (px 2)
+
 responsiveStyles :: Css
 responsiveStyles = do
   query Media.screen [Media.maxWidth (px 600)] <| do
@@ -682,6 +728,11 @@ darkModeStyles =
     ".activity-message" ? color "#d1d5db"
     (".activity-metadata" |> "summary") ? color "#9ca3af"
     ".metadata-json" ? backgroundColor "#374151"
+    ".markdown-content" ? color "#d1d5db"
+    ".md-h1" ? borderBottomColor "#374151"
+    ".md-inline-code" ? do
+      backgroundColor "#374151"
+      color "#f3f4f6"
 
 prefersDark :: Stylesheet.Feature
 prefersDark =