diff --git a/public/styles/fonts.css b/public/styles/fonts.css
index 24514cf4..fbe78ba4 100644
--- a/public/styles/fonts.css
+++ b/public/styles/fonts.css
@@ -14,9 +14,17 @@
 }
 
 body {
-  /* 使用本地字体，fallback 到系统字体 */
-  font-family: "Noto Serif CJK", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-weight: normal;
+  /* Bilingual Font Stack: English First, then Chinese */
+  /* Using Inter/System for English ensures crispness. PingFang SC is standard for Mac Chinese. */
+  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  
+  /* Fix "blurry" text on macOS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  
+  /* Fix "dense" layout - open up the lines */
+  line-height: 1.75;
+  font-weight: 400;
   text-autospace: normal;
 }
 
diff --git a/public/styles/global.css b/public/styles/global.css
index 61e4e699..4d8b05af 100644
--- a/public/styles/global.css
+++ b/public/styles/global.css
@@ -2,7 +2,7 @@
 /* 这里只保留 body 样式，字体通过 fonts.css 加载 */
 
 body {
-  font-family: "Noto Serif CJK", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-weight: normal;
 }
 
diff --git a/src/assets/home_2.png b/src/assets/home_2.png
new file mode 100644
index 00000000..6cf88f8f
Binary files /dev/null and b/src/assets/home_2.png differ
diff --git a/src/assets/home_3.png b/src/assets/home_3.png
new file mode 100644
index 00000000..d67b2626
Binary files /dev/null and b/src/assets/home_3.png differ
diff --git a/src/assets/styles/app.css b/src/assets/styles/app.css
index 6afca040..7e29b8b5 100644
--- a/src/assets/styles/app.css
+++ b/src/assets/styles/app.css
@@ -1,49 +1,76 @@
 /* Theme */
 :root {
-  --background: 50 25% 98%;
-  --foreground: 30 10% 8%;
+  /* Shopify-inspired "Polaris" Theme */
+  /* Clean, Trustworthy, Professional */
+  
+  --background: 0 0% 100%; /* Pure White Surface */
+  --foreground: 200 6% 10%; /* Ink Black (almost black, slight cool tone) */
+  
   --card: 0 0% 100%;
-  --card-foreground: 30 10% 8%;
+  --card-foreground: 200 6% 10%;
+  
   --popover: 0 0% 100%;
-  --popover-foreground: 30 10% 8%;
-  --primary: 28 85% 55%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 90 25% 92%;
-  --secondary-foreground: 30 10% 8%;
-  --muted: 50 15% 95%;
-  --muted-foreground: 30 8% 30%;
-  --accent: 100 45% 75%;
-  --accent-foreground: 30 10% 8%;
-  --destructive: 0 72.22% 50.59%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 45 20% 85%;
-  --input: 45 15% 90%;
-  --ring: 28 85% 55%;
+  --popover-foreground: 200 6% 10%;
+  
+  /* Shopify Green-ish Primary - Trust & Growth */
+  /* #008060 is approx HSL(165, 100%, 25%) but strictly meant for buttons */
+  /* Let's use a slightly more vibrant/modern web accessible green */
+  --primary: 165 67% 28%; /* #178260 - Deep Teal/Green */
+  --primary-foreground: 0 0% 100%;
+  
+  --secondary: 150 14% 97%; /* Very subtle green tint background */
+  --secondary-foreground: 165 67% 28%;
+  
+  --muted: 210 12% 96%; /* Slate 50/100 */
+  --muted-foreground: 210 9% 45%; /* Slate 500 */
+  
+  --accent: 150 20% 94%;
+  --accent-foreground: 165 67% 28%;
+  
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  
+  --border: 210 14% 89%; /* Slate 200 */
+  --input: 210 14% 89%;
+  --ring: 165 67% 28%;
+  
   --radius: 0.5rem;
   --callout-background: 0 0% 100%;
 }
+
 .dark {
-  --background: 30 15% 8%;
-  --foreground: 0 0% 95%;
-  --card: 30 12% 10%;
-  --card-foreground: 0 0% 95%;
-  --popover: 30 12% 10%;
-  --popover-foreground: 0 0% 95%;
-  --primary: 32 90% 65%;
-  --primary-foreground: 30 15% 8%;
-  --secondary: 95 35% 20%;
-  --secondary-foreground: 0 0% 95%;
-  --muted: 30 10% 15%;
-  --muted-foreground: 45 10% 65%;
-  --accent: 100 50% 50%;
-  --accent-foreground: 30 15% 8%;
-  --destructive: 0 62.8% 50%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 30 15% 25%;
-  --input: 30 12% 18%;
-  --ring: 32 90% 65%;
-  --callout-background: 30 12% 10%;
+  /* Dark Mode - Deep Slate/Green */
+  --background: 200 10% 10%; /* Dark Ink */
+  --foreground: 0 0% 98%;
+  
+  --card: 200 10% 10%;
+  --card-foreground: 0 0% 98%;
+  
+  --popover: 200 10% 10%;
+  --popover-foreground: 0 0% 98%;
+  
+  --primary: 160 50% 45%; /* Brighter Green for Dark Mode */
+  --primary-foreground: 0 0% 100%;
+  
+  --secondary: 200 10% 16%;
+  --secondary-foreground: 0 0% 98%;
+  
+  --muted: 200 10% 16%;
+  --muted-foreground: 210 10% 65%;
+  
+  --accent: 200 10% 16%;
+  --accent-foreground: 0 0% 98%;
+  
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  
+  --border: 200 10% 20%;
+  --input: 200 10% 20%;
+  --ring: 160 50% 45%;
+  
+  --callout-background: 200 10% 16%;
 }
+
 :root {
   --un-default-border-color: hsl(var(--border) / 1);
 }
@@ -53,9 +80,11 @@ html.dark {
 
 /* Global */
 a {
+  text-decoration: none;
   transition: color 0.2s ease;
   &:hover {
     color: hsl(var(--primary) / var(--un-text-opacity, 1));
+    text-decoration: none; /* Explicitly remove underline */
   }
 }
 
@@ -82,20 +111,20 @@ starlight-tabs {
   margin-top: .5em;
 }
 
-/* Inline code styles */
+/* Inline code styles - Clean & Minimal */
 .prose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *)) {
-  font-size: 0.9em !important;
+  font-size: 0.875em !important;
   font-weight: 500 !important;
   border-radius: 0.25rem !important;
-  padding: 0.15rem 0.175rem !important;
-  margin: 0.125rem 0 !important;
-  background-color: hsl(var(--secondary)) !important;
+  padding: 0.15rem 0.3rem !important;
+  margin: 0 !important;
+  background-color: hsl(var(--muted)) !important; 
   border: 1px solid hsl(var(--border)) !important;
-  color: hsl(var(--foreground)) !important;
+  color: hsl(var(--foreground)) !important; /* Keep it readable/neutral */
   display: inline-block !important;
   box-decoration-break: clone !important;
   -webkit-box-decoration-break: clone !important;
-  line-height: 1.6 !important;
+  line-height: 1.4 !important;
   vertical-align: baseline !important;
   &::before, &::after {
     content: '' !important;
@@ -108,23 +137,32 @@ html.dark .prose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *))
   color: hsl(var(--foreground)) !important;
 }
 
-/* Blockquote styles */
+/* Blockquote styles - Simple & Elegant */
+/* Overrides UnoCSS/Tailwind Prose defaults */
 .prose blockquote {
-  background-color: hsl(140 20% 94%) !important;
-  background-image: radial-gradient(circle, hsl(140 18% 88%) 1px, transparent 1px) !important;
-  background-size: 12px 12px !important;
-  border: none !important;
-  padding-top: .15em !important;
-  padding-bottom: .15em !important;
+  font-style: normal !important;
+  font-weight: 400 !important;
+  padding: 0.5rem 0 0.5rem 1.25rem !important;
+  border-left: 3px solid hsl(var(--primary)) !important;
+  background: transparent !important;
+  background-image: none !important;
+  border-radius: 0 !important;
+  color: hsl(var(--muted-foreground)) !important;
+  margin-top: 1.5em !important;
+  margin-bottom: 1.5em !important;
+}
+
+/* Remove quotes */
+.prose blockquote::before,
+.prose blockquote::after {
+  content: none !important;
 }
 
 html.dark .prose blockquote {
-  background-color: hsl(140 15% 16%) !important;
-  background-image: radial-gradient(circle, hsl(140 12% 22%) 1px, transparent 1px) !important;
-  background-size: 12px 12px !important;
-  border: none !important;
-  padding-top: 1.25em !important;
-  padding-bottom: 1.25em !important;
+  background: transparent !important;
+  background-image: none !important;
+  border-left-color: hsl(var(--primary)) !important;
+  color: hsl(var(--muted-foreground)) !important;
 }
 
 /* Reading progress bar using modern CSS scroll-driven animations */
@@ -134,7 +172,7 @@ html.dark .prose blockquote {
     position: fixed;
     bottom: 0;
     left: 0;
-    height: 2px;
+    height: 3px;
     background: hsl(var(--primary));
     width: 0%;
     z-index: 9999;
diff --git a/src/components/home/HomeHeroImage.astro b/src/components/home/HomeHeroImage.astro
new file mode 100644
index 00000000..7f42a3b7
--- /dev/null
+++ b/src/components/home/HomeHeroImage.astro
@@ -0,0 +1,29 @@
+---
+import { Image } from 'astro:assets'
+import homeImage from '@/assets/home_2.png'
+---
+
+<div class="home-hero-image-container mb-4 group transition-colors px-3 md:px-5">
+  <Image 
+    src={homeImage} 
+    alt="Sleeping cat with plants" 
+    class="w-full h-full object-cover rounded-md" 
+    loading="eager"
+  />
+</div>
+
+<style>
+  .home-hero-image-container {
+    height: 200px; /* Adjusted height slightly smaller */
+    display: flex;
+    align-items: flex-start; /* Align to top */
+    justify-content: center;
+    overflow: hidden;
+    padding: 0;
+  }
+  .home-hero-image-container img {
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/components/home/PixelCatRunner.astro b/src/components/home/PixelCatRunner.astro
new file mode 100644
index 00000000..fcfdc004
--- /dev/null
+++ b/src/components/home/PixelCatRunner.astro
@@ -0,0 +1,275 @@
+---
+interface Props {
+  posts: Array<{
+    title: string;
+    date: Date;
+    slug: string;
+  }>;
+}
+
+const { posts } = Astro.props;
+
+// Sort posts by date ascending
+const sortedPosts = posts.sort((a, b) => a.date.getTime() - b.date.getTime());
+const startDate = new Date('2025-01-01').getTime();
+const endDate = new Date().getTime();
+
+const gameData = {
+  posts: sortedPosts.map(p => ({ date: p.date.getTime() })),
+  startDate,
+  endDate
+};
+---
+
+<div class="pixel-runner-container mb-8 select-none">
+  <!-- Minimal Header -->
+  <div class="flex justify-between items-center mb-2 px-1 font-mono text-xs text-muted-foreground">
+    <div class="tracking-widest">OFFLINE_CAT.EXE</div>
+    <div id="runner-score" class="font-bold">00000</div>
+  </div>
+  
+  <div class="canvas-wrapper relative w-full h-[150px] bg-background border-b-2 border-foreground/10 overflow-hidden">
+    <canvas id="runner-canvas" class="w-full h-full block rendering-pixelated"></canvas>
+    
+    <!-- Start Overlay (Chrome Dino Style) -->
+    <div id="runner-overlay" class="absolute inset-0 flex flex-col items-center justify-center bg-background/80 z-20 cursor-pointer">
+      <div class="text-foreground font-mono text-lg font-bold tracking-wider animate-pulse">PRESS TO START</div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .rendering-pixelated {
+    image-rendering: pixelated;
+    image-rendering: crisp-edges;
+  }
+</style>
+
+<script define:vars={{ gameData }}>
+  const canvas = document.getElementById('runner-canvas');
+  const ctx = canvas.getContext('2d');
+  const scoreEl = document.getElementById('runner-score');
+  const overlay = document.getElementById('runner-overlay');
+  
+  let animationId;
+  let isRunning = false;
+  let isFinished = false;
+  
+  // Constants
+  const PIXEL_SCALE = 3; 
+  const GROUND_Y = 120;   
+  const CAT_X = 40;      
+  const DAY_WIDTH = 15;   
+  
+  // State
+  let startTime = gameData.startDate;
+  let currentTime = startTime;
+  let endTime = gameData.endDate;
+  let speed = 0.3; 
+  
+  // Physics
+  let catY = GROUND_Y;
+  let velocityY = 0;
+  let isJumping = false;
+  let frame = 0;
+  
+  // Colors (Theme Aware)
+  const getThemeColors = () => {
+      const style = getComputedStyle(document.documentElement);
+      return {
+          bg: style.getPropertyValue('--background').trim(),
+          fg: style.getPropertyValue('--foreground').trim(),
+          muted: style.getPropertyValue('--muted-foreground').trim()
+      };
+  };
+
+  // --- Sprites (1 bit) ---
+  // 1 = FG
+  
+  // Cat Stand (15x16)
+  const catStand = [
+      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      [0,0,0,0,0,0,1,0,0,0,0,0,1,0,0], // Ears
+      [0,0,0,0,0,1,1,1,1,1,1,1,1,1,0],
+      [0,0,0,0,0,1,1,1,1,1,1,1,1,1,0],
+      [0,0,0,0,0,1,1,1,1,1,1,1,1,0,0], // Head
+      [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0],
+      [0,0,1,1,1,1,1,1,1,1,1,1,1,0,0], // Body
+      [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
+      [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
+      [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
+      [0,1,0,1,0,0,1,0,1,0,0,1,0,1,0], // Legs
+      [0,1,0,1,0,0,1,0,1,0,0,1,0,1,0]
+  ];
+
+  const catRun1 = [...catStand];
+  catRun1[13] = [0,0,0,1,0,0,1,0,1,0,0,0,0,1,0]; // Legs move
+  catRun1[14] = [0,0,0,1,0,0,1,0,1,0,0,0,0,1,0];
+
+  const catRun2 = [...catStand];
+  catRun2[13] = [0,1,0,0,0,0,1,0,1,0,0,1,0,1,0];
+  catRun2[14] = [0,1,0,0,0,0,1,0,1,0,0,1,0,1,0];
+  
+  // Obstacle: Cactus/Post (Simple Block)
+  const obstacleSprite = [
+      [0,0,1,1,0,0],
+      [0,1,1,1,1,0],
+      [1,1,1,1,1,1],
+      [1,1,1,1,1,1],
+      [0,1,1,1,1,0],
+      [0,1,1,1,1,0],
+      [0,1,1,1,1,0],
+      [0,1,1,1,1,0],
+      [0,1,1,1,1,0],
+      [0,1,1,1,1,0]
+  ];
+  
+  // Cloud (Simple Line Art)
+  const cloudSprite = [
+      [0,0,0,0,0,1,1,1,1,0,0,0],
+      [0,0,1,1,1,0,0,0,0,1,1,0],
+      [0,1,0,0,0,0,0,0,0,0,0,1],
+      [1,0,0,0,0,0,0,0,0,0,0,1],
+      [1,0,0,0,0,0,0,0,0,0,0,1],
+      [0,1,1,1,1,1,1,1,1,1,1,0]
+  ];
+
+  // --- Rendering ---
+  
+  function drawSprite(ctx, sprite, x, y, color) {
+      ctx.fillStyle = color;
+      sprite.forEach((row, r) => {
+          row.forEach((pixel, c) => {
+              if (pixel === 1) {
+                ctx.fillRect(Math.floor(x + c * PIXEL_SCALE), Math.floor(y + r * PIXEL_SCALE), PIXEL_SCALE, PIXEL_SCALE);
+              }
+          });
+      });
+  }
+
+  // Generate Cloud Positions
+  const clouds = [];
+  for(let i=0; i<20; i++) {
+      clouds.push({
+          x: Math.random() * 2000,
+          y: Math.random() * 60 + 20
+      });
+  }
+
+  function resize() {
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    ctx.scale(dpr, dpr);
+    ctx.imageSmoothingEnabled = false;
+  }
+  window.addEventListener('resize', resize);
+
+  function update() {
+    if (!isRunning) return;
+    
+    const colors = getThemeColors();
+    const oneDay = 1000 * 60 * 60 * 24;
+    currentTime += oneDay * speed; 
+    
+    // Update Score (Days)
+    const daysPassed = Math.floor((currentTime - startTime) / oneDay);
+    scoreEl.textContent = String(daysPassed).padStart(5, '0');
+
+    if (currentTime >= endTime) {
+        currentTime = endTime;
+        isRunning = false;
+        overlay.innerHTML = '<div class="text-foreground font-mono">GAME OVER</div>';
+        overlay.style.opacity = '1';
+        overlay.style.pointerEvents = 'auto';
+    }
+
+    // Logic
+    const nextPost = gameData.posts.find(p => {
+          const diff = (p.date - currentTime) / oneDay;
+          return diff > 0 && diff < 8; 
+    });
+
+    if (nextPost && !isJumping && catY === GROUND_Y) {
+          velocityY = -5.5; 
+          isJumping = true;
+    }
+
+    catY += velocityY;
+    velocityY += 0.25; 
+    if (catY > GROUND_Y) {
+          catY = GROUND_Y;
+          velocityY = 0;
+          isJumping = false;
+    }
+
+    // Draw
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
+    // Clouds (Parallax)
+    // Cloud X = BaseX - (CurrentTime / TotalTime) * Factor
+    const progress = (currentTime - startTime) / (endTime - startTime);
+    clouds.forEach(c => {
+        let cx = c.x - (progress * 1000); 
+        // Wrap
+        const canvasW = canvas.width / window.devicePixelRatio;
+        while(cx < -50) cx += canvasW + 100;
+        if(cx < canvasW) {
+            drawSprite(ctx, cloudSprite, cx, c.y, colors.muted); // Muted color for background
+        }
+    });
+
+    // Ground Line
+    ctx.fillStyle = colors.fg;
+    ctx.fillRect(0, GROUND_Y + 15 * PIXEL_SCALE, canvas.width, 1 * PIXEL_SCALE); // 1px line
+    
+    // Obstacles
+    const canvasW = canvas.width / window.devicePixelRatio;
+    gameData.posts.forEach(p => {
+          const daysDiff = (p.date - currentTime) / oneDay;
+          const obsX = CAT_X + daysDiff * DAY_WIDTH;
+          if (obsX > -50 && obsX < canvasW + 50) {
+              drawSprite(ctx, obstacleSprite, obsX, GROUND_Y + 5 * PIXEL_SCALE, colors.fg); // Offset to sit on line
+          }
+    });
+
+    // Cat
+    let pose = catStand;
+    if (isJumping) pose = catStand; // Simple jump
+    else if (Math.floor(frame / 6) % 2 === 0) pose = catRun1;
+    else pose = catRun2;
+    
+    // Draw Cat
+    // Cat is 15x16. Feet at bottom.
+    // Ground Line is at GROUND_Y + 15*SCALE.
+    // We want feet to touch line.
+    drawSprite(ctx, pose, CAT_X, catY, colors.fg);
+
+    frame++;
+    animationId = requestAnimationFrame(update);
+  }
+
+  function start() {
+      if (isRunning) return;
+      currentTime = startTime; // Reset always on start for demo
+      isRunning = true;
+      overlay.style.opacity = '0';
+      overlay.style.pointerEvents = 'none';
+      resize();
+      update();
+  }
+
+  // Init
+  resize();
+  const colors = getThemeColors();
+  drawSprite(ctx, catStand, CAT_X, GROUND_Y, colors.fg);
+  ctx.fillStyle = colors.fg;
+  ctx.fillRect(0, GROUND_Y + 15 * PIXEL_SCALE, canvas.width, 1 * PIXEL_SCALE);
+
+  overlay.addEventListener('click', start);
+  
+</script>
diff --git a/src/components/home/ThreeDShape.astro b/src/components/home/ThreeDShape.astro
new file mode 100644
index 00000000..61349858
--- /dev/null
+++ b/src/components/home/ThreeDShape.astro
@@ -0,0 +1,118 @@
+---
+---
+<div class="plant-container group relative w-full h-[240px] md:h-[300px] overflow-hidden rounded-xl border border-border/30 bg-secondary/10 flex items-center justify-center select-none">
+  
+  <!-- Subtle Background Circle -->
+  <div class="absolute w-40 h-40 bg-primary/5 rounded-full blur-3xl transform translate-y-10 group-hover:bg-primary/10 transition-colors duration-700"></div>
+
+  <!-- The CSS Plant -->
+  <div class="art-canvas relative w-40 h-52 flex flex-col items-center justify-end animate-breathe">
+    
+    <!-- Leaves Wrapper -->
+    <div class="leaves-container absolute bottom-[70px] w-full h-full flex justify-center">
+      
+      <!-- Leaf 1 (Left) -->
+      <div class="leaf leaf-1 absolute bottom-0 left-2 w-16 h-20 bg-primary rounded-tl-[80%] rounded-br-[80%] rounded-tr-[10%] rounded-bl-[10%] transform -rotate-45 origin-bottom-right opacity-90 animate-sway-1 group-hover:animate-shake-1">
+        <div class="leaf-line absolute w-[2px] h-full bg-black/10 left-1/2 transform -translate-x-1/2"></div>
+      </div>
+      
+      <!-- Leaf 2 (Right) -->
+      <div class="leaf leaf-2 absolute bottom-4 right-2 w-14 h-18 bg-primary/80 rounded-tr-[80%] rounded-bl-[80%] rounded-tl-[10%] rounded-br-[10%] transform rotate-[30deg] origin-bottom-left opacity-90 animate-sway-2 group-hover:animate-shake-2">
+         <div class="leaf-line absolute w-[2px] h-full bg-black/10 left-1/2 transform -translate-x-1/2"></div>
+      </div>
+      
+      <!-- Leaf 3 (Top Center) -->
+      <div class="leaf leaf-3 absolute bottom-10 w-12 h-16 bg-primary/90 rounded-full rounded-b-none transform -rotate-10 origin-bottom animate-sway-3 group-hover:animate-shake-3">
+         <div class="leaf-line absolute w-[2px] h-full bg-black/10 left-1/2 transform -translate-x-1/2"></div>
+      </div>
+      
+      <!-- Stems -->
+      <div class="stem absolute bottom-[-10px] w-1 h-20 bg-primary/60 transform -rotate-12 left-[45%] -z-10"></div>
+      <div class="stem absolute bottom-[-5px] w-1 h-16 bg-primary/60 transform rotate-12 right-[45%] -z-10"></div>
+      <div class="stem absolute bottom-0 w-1.5 h-12 bg-primary/60 -z-10"></div>
+
+    </div>
+
+    <!-- Flower Pot -->
+    <div class="pot relative z-10 flex flex-col items-center">
+      <!-- Rim -->
+      <div class="pot-rim w-24 h-4 bg-white border border-border rounded-full shadow-sm relative z-20"></div>
+      <!-- Body -->
+      <div class="pot-body w-20 h-24 bg-gradient-to-b from-white to-gray-50 border-l border-r border-b border-border rounded-b-3xl relative z-10 -mt-2 shadow-md flex items-center justify-center overflow-hidden">
+        <!-- Shine/Reflection -->
+        <div class="absolute top-2 right-2 w-2 h-16 bg-white/60 rotate-12 rounded-full blur-[1px]"></div>
+        <!-- Face (Kawaii style - optional, minimal here) -->
+        <div class="face opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex gap-2">
+          <div class="eye w-1.5 h-1.5 bg-foreground/60 rounded-full animate-blink"></div>
+          <div class="eye w-1.5 h-1.5 bg-foreground/60 rounded-full animate-blink animation-delay-200"></div>
+        </div>
+      </div>
+      <!-- Shadow -->
+      <div class="shadow w-20 h-2 bg-black/10 rounded-full mt-[-2px] blur-[2px]"></div>
+    </div>
+    
+  </div>
+</div>
+
+<style>
+  /* Gentle Swaying Animations */
+  @keyframes sway-1 {
+    0%, 100% { transform: rotate(-45deg); }
+    50% { transform: rotate(-40deg); }
+  }
+  @keyframes sway-2 {
+    0%, 100% { transform: rotate(30deg); }
+    50% { transform: rotate(35deg); }
+  }
+  @keyframes sway-3 {
+    0%, 100% { transform: rotate(-10deg); }
+    50% { transform: rotate(-5deg); }
+  }
+
+  /* Faster Shake on Hover */
+  @keyframes shake-1 {
+    0%, 100% { transform: rotate(-45deg); }
+    25% { transform: rotate(-48deg); }
+    75% { transform: rotate(-42deg); }
+  }
+
+  @keyframes blink {
+    0%, 90%, 100% { transform: scaleY(1); }
+    95% { transform: scaleY(0.1); }
+  }
+
+  /* Breathing effect for the whole plant */
+  @keyframes breathe {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.02); }
+  }
+
+  .animate-sway-1 { animation: sway-1 4s ease-in-out infinite; }
+  .animate-sway-2 { animation: sway-2 5s ease-in-out infinite; }
+  .animate-sway-3 { animation: sway-3 6s ease-in-out infinite; }
+  
+  .animate-shake-1 { animation: shake-1 0.5s ease-in-out infinite; }
+  
+  .animate-blink { animation: blink 4s infinite; }
+  .animation-delay-200 { animation-delay: 0.2s; }
+  .animate-breathe { animation: breathe 8s ease-in-out infinite; }
+  
+  .leaf {
+    /* Use theme primary color dynamically */
+    background-color: hsl(var(--primary));
+  }
+  .leaf.leaf-2 { background-color: hsl(var(--primary) / 0.8); }
+  .leaf.leaf-3 { background-color: hsl(var(--primary) / 0.9); }
+  
+  .stem { background-color: hsl(var(--primary) / 0.6); }
+
+  /* Ensure colors adapt to dark mode */
+  :global(.dark) .pot-rim, 
+  :global(.dark) .pot-body {
+    background: #2a2a2a;
+    border-color: #444;
+  }
+  :global(.dark) .pot-body {
+    background: linear-gradient(to bottom, #2a2a2a, #222);
+  }
+</style>
\ No newline at end of file
diff --git a/src/content/blog/coding/mirrord-debug.mdx b/src/content/blog/coding/mirrord-debug.mdx
index 80bdb514..4a59658f 100644
--- a/src/content/blog/coding/mirrord-debug.mdx
+++ b/src/content/blog/coding/mirrord-debug.mdx
@@ -1,6 +1,6 @@
 ---
 title: 'mirrord：云原生开发的本地调试利器'
-description: '探索 mirrord 如何实现无需构建镜像即可在本地调试 Kubernetes 集群中的微服务'
+description: '探索 mirrord 如何实现在本地调试 k8s 集群中的微服务'
 publishDate: 2025-12-20
 slug: xgrg
 tags: ['kubernetes', 'debug', 'devtools', 'mirrord']
diff --git a/src/layouts/ContentLayout.astro b/src/layouts/ContentLayout.astro
index 304168e7..9de102a2 100644
--- a/src/layouts/ContentLayout.astro
+++ b/src/layouts/ContentLayout.astro
@@ -25,7 +25,7 @@ const { meta, highlightColor, back = '/', hasToc = false, ...props } = Astro.pro
     style='back'
     class='fixed bottom-4 left-4 z-50 md:bottom-8 md:left-8'
   />
-  <main class='mt-6 items-start gap-x-10 md:flex'>
+  <main class='mt-6 items-start gap-x-6 md:flex'>
     {/* 新增 handletoc slot，支持手风琴贴边布局 */}
     <slot name='handletoc' />
 
@@ -63,7 +63,7 @@ const { meta, highlightColor, back = '/', hasToc = false, ...props } = Astro.pro
     </article>
   </main>
 
-  <div class='bottom mt-6 items-start gap-x-10 md:flex'>
+  <div class='bottom mt-6 items-start gap-x-6 md:flex'>
     {/* Bottom */}
     <div class='mt-8 flex-1 text-muted-foreground md:min-w-[50ch]'>
       <slot name='bottom' />
@@ -123,13 +123,13 @@ const { meta, highlightColor, back = '/', hasToc = false, ...props } = Astro.pro
     
     /* 调整整体布局 */
     main {
-      gap: 0 2rem !important;
+      gap: 0 1.5rem !important; /* Reduced gap */
     }
     
     /* 调整 sidebar 的位置和宽度 */
     #sidebar {
-      width: 20rem !important;
-      min-width: 20rem !important;
+      width: 17rem !important; /* Reduced width */
+      min-width: 17rem !important;
       flex-shrink: 0 !important;
       margin-left: auto !important;
     }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 307617e2..09eea6f5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,7 +5,8 @@ import { Icon } from '@/custom/components/user'
 import { getBlogCollection } from 'astro-pure/server'
 import PageLayout from '@/layouts/BaseLayout.astro'
 import { calculateSiteAge, getHighlightColor } from '@/components/home/utils'
-import { getCurrentReading, getLatestPosts, getTotalWords } from '@/components/shelf/utils'
+import { getLatestPosts, getTotalWords } from '@/components/shelf/utils'
+import HomeHeroImage from '@/components/home/HomeHeroImage.astro'
 import avatarImage from '@/assets/home.png'
 import config from '@/site-config'
 
@@ -15,7 +16,6 @@ const allPostsByDate = await getLatestPosts(MAX_POSTS)
 
 const totalPosts = allPosts.length
 const totalWords = await getTotalWords()
-const currentReading = getCurrentReading()
 
 // Calculate site age (from 2025-01-27)
 const siteAgeText = calculateSiteAge('2025-01-27')
@@ -172,42 +172,9 @@ const highlightColor = getHighlightColor()
 
         {/* 右栏 - 侧边栏 */}
         <aside class='flex flex-col gap-3 md:gap-8 md:order-2' style='overflow: visible;'>
-          {/* 最近在读 - 小票样式 */}
-          {
-            currentReading && (
-              <a
-                href='/shelf'
-                class='receipt-style block no-underline group transition-colors hover:bg-muted/50 cursor-pointer border-l border-r border-dashed border-border px-3 md:px-5'
-              >
-                <div class='text-xs text-muted-foreground uppercase tracking-wider flex items-center gap-2 pt-3 pb-2 mb-2 md:pt-4 md:mb-3 border-b-2 border-dashed border-border'>
-                  <Icon name='shelf' size='1.25em' />
-                  <span>最近在读</span>
-                </div>
-                <div class='text-sm'>
-                  <div class='text-foreground font-semibold text-sm md:text-base mb-1 group-hover:text-primary transition-colors'>
-                    {currentReading.title}
-                  </div>
-                  {(currentReading.summary || currentReading.description) && (
-                    <div class='text-muted-foreground text-xs leading-relaxed mb-2 md:mb-3'>
-                      {currentReading.summary || currentReading.description}
-                    </div>
-                  )}
-                  <div class='flex justify-between items-center py-1 border-t border-dashed border-border mt-2 pt-2'>
-                    {currentReading.rating && (
-                      <span class='text-muted-foreground text-xs'>
-                        ⭐️ {currentReading.rating.toFixed(1)}
-                      </span>
-                    )}
-                    {currentReading.progress !== undefined && (
-                      <span class='text-muted-foreground text-xs tabular-nums'>
-                        {currentReading.progress}%
-                      </span>
-                    )}
-                  </div>
-                </div>
-              </a>
-            )
-          }
+          
+          {/* Home Hero Image */}
+          <HomeHeroImage />
 
           {/* 统计信息 - 小票样式 - 移动端隐藏 */}
           <div class='receipt-style hidden md:block'>
diff --git a/uno.config.ts b/uno.config.ts
index 995a80c4..ab416294 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -8,7 +8,11 @@ const typographyConfig = {
   cssExtend: {
     // Code styles
     'code, kbd, samp, pre': {
-      'font-family': '"Noto Serif CJK", "Input Mono", "Fira Code", "Consolas", "Monaco", monospace'
+      'font-family': '"Input Mono", "Fira Code", "Consolas", "Monaco", monospace' // Removed Serif font from code blocks
+    },
+    'p': {
+      'line-height': '1.8', // Ensure relaxed line height for readability
+      'margin-bottom': '1.25em'
     },
     'pre code': {
       'font-size': '1.015em',
@@ -45,26 +49,13 @@ const typographyConfig = {
     },
     // Blockquote
     blockquote: {
-      position: 'relative',
-      overflow: 'visible',
-      'border-radius': 'var(--radius)',
-      'padding-inline': '1.6rem',
-      'font-style': 'normal',
-      'font-weight': '500'
-    },
-    'blockquote::before': {
-      color: fgMuted,
-      position: 'absolute',
-      content: '"\\201C"',
-      top: '0',
-      left: '0.5rem',
-      'font-size': '4rem',
-      'font-family': 'serif',
-      'line-height': '1',
-      opacity: '0.3',
-      'pointer-events': 'none',
-      'z-index': '0'
+      'border-left': '4px solid hsl(var(--primary))',
+      'padding-left': '1rem',
+      'margin-left': '0',
+      'font-style': 'italic',
+      color: fgMuted
     },
+    // Removed blockquote::before
     'blockquote p': {
       position: 'relative',
       'z-index': '1'
@@ -125,7 +116,7 @@ const typographyConfig = {
     },
     strong: {
       'font-weight': '600',
-      color: '#a34c4c'
+      color: 'hsl(225, 70%, 35%)' // Deep Indigo Blue for distinct but professional emphasis
     },
     a: {
       'font-weight': '500',