Add cartoon reader rendering with webtoon layout

src/app/story/[storylineId]/[plotIndex]/page.tsx

@@ -130,6 +130,7 @@ export default async function PlotDetailPage({ params }: { params: Params }) {
             storylineTitle={sl.title}
             chapters={deduplicateByPlotIndex(allPlots)}
             initialPlotIndex={pidx}
+            contentType={sl.content_type}
           />
         </div>
         <div className="text-muted mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs">
@@ -153,7 +154,7 @@ export default async function PlotDetailPage({ params }: { params: Params }) {
 
       {/* Plot content */}
       {p.content ? (
-        <StoryContent content={p.content} />
+        <StoryContent content={p.content} contentType={sl.content_type} />
       ) : (
         <p className="text-muted text-sm italic">
           Content unavailable (CID: {p.content_cid})

src/app/story/[storylineId]/page.tsx

@@ -202,12 +202,14 @@ export default async function StoryPage({ params }: { params: Params }) {
             <>
               <GenesisSection
                 plot={genesis}
+                contentType={sl.content_type}
                 readingMode={
                   <ReadingModeWrapper
                     storylineId={id}
                     storylineTitle={sl.title}
                     chapters={deduplicateByPlotIndex(plots)}
                     initialPlotIndex={0}
+                    contentType={sl.content_type}
                   />
                 }
               />
@@ -448,7 +450,7 @@ function StoryHeader({
   );
 }
 
-function GenesisSection({ plot, readingMode }: { plot: Plot; readingMode?: React.ReactNode }) {
+function GenesisSection({ plot, contentType, readingMode }: { plot: Plot; contentType?: string; readingMode?: React.ReactNode }) {
   return (
     <section id="genesis">
       <ViewTracker storylineId={plot.storyline_id} plotIndex={0} />
@@ -466,7 +468,7 @@ function GenesisSection({ plot, readingMode }: { plot: Plot; readingMode?: React
         {readingMode && <span className="ml-auto">{readingMode}</span>}
       </div>
       {plot.content ? (
-        <StoryContent content={plot.content} />
+        <StoryContent content={plot.content} contentType={contentType} />
       ) : (
         <p className="text-muted text-sm italic">
           Content unavailable (CID: {plot.content_cid})

src/components/ReadingMode.tsx

@@ -15,6 +15,7 @@ interface ReadingModeProps {
   storylineTitle: string;
   chapters: Chapter[];
   initialChapterIndex: number;
+  contentType?: string;
   onClose: () => void;
 }
 
@@ -54,6 +55,7 @@ export function ReadingMode({
   storylineTitle,
   chapters,
   initialChapterIndex,
+  contentType,
   onClose,
 }: ReadingModeProps) {
   const [currentIdx, setCurrentIdx] = useState(initialChapterIndex);
@@ -259,7 +261,7 @@ export function ReadingMode({
               <style>{readingCss}</style>
               <div style={readingStyle} className="reading-prose">
                 {chapter?.content ? (
-                  <StoryContent content={chapter.content} />
+                  <StoryContent content={chapter.content} contentType={contentType} />
                 ) : (
                   <p className="text-muted text-sm italic">Content unavailable</p>
                 )}
@@ -281,7 +283,7 @@ export function ReadingMode({
               <div className="mx-auto max-w-[720px] px-6 py-8 sm:px-8 sm:py-12">
                 <div style={readingStyle} className="reading-prose">
                   {outgoingChapter.content ? (
-                    <StoryContent content={outgoingChapter.content} />
+                    <StoryContent content={outgoingChapter.content} contentType={contentType} />
                   ) : (
                     <p className="text-muted text-sm italic">Content unavailable</p>
                   )}

src/components/ReadingModeWrapper.tsx

@@ -18,11 +18,13 @@ export function ReadingModeWrapper({
   storylineTitle,
   chapters,
   initialPlotIndex,
+  contentType,
 }: {
   storylineId: number;
   storylineTitle: string;
   chapters: Chapter[];
   initialPlotIndex: number;
+  contentType?: string;
 }) {
   const [active, setActive] = useState(false);
 
@@ -39,6 +41,7 @@ export function ReadingModeWrapper({
           storylineTitle={storylineTitle}
           chapters={chapters}
           initialChapterIndex={initialIdx >= 0 ? initialIdx : 0}
+          contentType={contentType}
           onClose={() => setActive(false)}
         />
       )}

src/components/StoryContent.tsx

@@ -35,7 +35,38 @@ const sanitizeSchema = {
   },
 };
 
-export function StoryContent({ content }: { content: string }) {
+export function StoryContent({ content, contentType }: { content: string; contentType?: string }) {
+  if (contentType === "cartoon") {
+    return (
+      <div className="cartoon-reader mx-auto max-w-2xl">
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm, remarkBreaks]}
+          rehypePlugins={[[rehypeSanitize, sanitizeSchema]]}
+          components={{
+            img: ({ src, alt }) => (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={src}
+                alt={alt || ""}
+                loading="lazy"
+                className="mx-auto w-full rounded"
+              />
+            ),
+            p: ({ children }) => (
+              <div className="my-1">{children}</div>
+            ),
+            hr: () => <div className="my-2" />,
+            strong: ({ children }) => (
+              <p className="text-foreground text-xs font-semibold text-center pt-3 pb-1">{children}</p>
+            ),
+          }}
+        >
+          {content}
+        </ReactMarkdown>
+      </div>
+    );
+  }
+
   return (
     <div className="story-markdown font-prose text-foreground leading-7">
       <ReactMarkdown