feat: add Pi agent blog post, AI tooling, and SVG support

Add new blog post documenting a week using the Pi CLI agent for 100% agentic development. Include AI agent configuration with custom prompts and skills to streamline content creation workflow.

- Publish "Week with my-pi-agent" article with Pi logo and screenshot assets
- Add .pi/ configuration with new-blog-post prompt and review-article skill
- Create AGENTS.md with comprehensive project documentation for AI assistants
- Fix SVG rendering to skip unsupported dimension extraction in markdown filter
- Update picture generator to handle SVG files with simple img tag
- Update syntect dependency to 5.3.0 with default-fancy features
- Swap featured segment from older post to new Pi agent article

styles/output.css

@@ -29,6 +29,7 @@
     --color-slate-600: oklch(44.6% 0.043 257.281);
     --color-slate-800: oklch(27.9% 0.041 260.031);
     --color-slate-950: oklch(12.9% 0.042 264.695);
+    --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
     --text-sm: 0.875rem;
@@ -290,6 +291,9 @@
   .m-10 {
     margin: calc(var(--spacing) * 10);
   }
+  .mx-0 {
+    margin-inline: calc(var(--spacing) * 0);
+  }
   .mx-0\.5 {
     margin-inline: calc(var(--spacing) * 0.5);
   }
@@ -389,6 +393,9 @@
   .h-\[240px\] {
     height: 240px;
   }
+  .h-\[280px\] {
+    height: 280px;
+  }
   .h-\[320px\] {
     height: 320px;
   }
@@ -425,6 +432,9 @@
   .max-w-\[32rem\] {
     max-width: 32rem;
   }
+  .max-w-\[280px\] {
+    max-width: 280px;
+  }
   .max-w-\[392px\] {
     max-width: 392px;
   }
@@ -437,12 +447,25 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\.5 {
     --tw-translate-y: calc(var(--spacing) * -1.5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -450,6 +473,9 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .resize {
+    resize: both;
+  }
   .break-inside-avoid {
     break-inside: avoid;
   }
@@ -543,6 +569,9 @@
   .border-slate-300 {
     border-color: var(--color-slate-300);
   }
+  .bg-black {
+    background-color: var(--color-black);
+  }
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
@@ -564,6 +593,9 @@
   .object-cover {
     object-fit: cover;
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-0\.5 {
     padding: calc(var(--spacing) * 0.5);
   }
@@ -693,6 +725,13 @@
   .no-underline {
     text-decoration-line: none;
   }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1649,6 +1688,11 @@ article a {
   syntax: "*";
   inherits: false;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1791,6 +1835,7 @@ article a {
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;