update

app/src/content/embeds/demo/content-structure.html

@@ -1,8 +1,8 @@
 <div class="cs" role="img" aria-label="Content folder structure: MDX, assets, embeds">
   <div class="cs__header">
-    <svg class="cs__folder" viewBox="0 0 64 32" aria-hidden="true">
-      <path d="M6 10h14l4 4h30"/>
-      <rect x="4" y="14" width="56" height="12" rx="4" ry="4"/>
+    <svg class="cs__folder" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
+      <path d="M3 7h5l2 2h11"/>
+      <rect x="2" y="9" width="20" height="10" rx="2" ry="2"/>
     </svg>
     <span class="cs__path">/app/src/content</span>
   </div>
@@ -11,8 +11,11 @@
     <div class="cs__box">
       <div class="cs__box-head">
         <svg class="cs__icon" viewBox="0 0 24 24" aria-hidden="true">
-          <rect x="4" y="4" width="12" height="16" rx="2" ry="2"/>
-          <path d="M16 4l4 4h-4z"/>
+          <rect x="3" y="3" width="14" height="18" rx="2" ry="2"/>
+          <path d="M14 3l4 4h-4z"/>
+          <path d="M7 11l-2 2l2 2"/>
+          <path d="M13 11l2 2l-2 2"/>
+          <path d="M10 11v4"/>
         </svg>
         <span class="cs__label">MDX</span>
       </div>
@@ -25,8 +28,8 @@
     <div class="cs__box">
       <div class="cs__box-head">
         <svg class="cs__icon" viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M6 4h10a2 2 0 0 1 2 2v14c-2-1-4-2-6-2s-4 1-6 2V6a2 2 0 0 1 2-2z"/>
-          <path d="M6 8h10"/>
+          <path d="M6 5h10a2 2 0 0 1 2 2v12c-2-.9-4-1.6-6-1.6S8 18.1 6 19V7a2 2 0 0 1 2-2z"/>
+          <path d="M6 9h12"/>
         </svg>
         <span class="cs__label">Bib</span>
       </div>
@@ -37,8 +40,8 @@
     <div class="cs__box">
       <div class="cs__box-head">
         <svg class="cs__icon" viewBox="0 0 24 24" aria-hidden="true">
-          <rect x="4" y="6" width="16" height="12" rx="2" ry="2"/>
-          <circle cx="8" cy="10" r="1.2"/>
+          <rect x="3" y="5" width="18" height="14" rx="2" ry="2"/>
+          <circle cx="8" cy="10" r="1.4"/>
           <path d="M6 16l4-3 2 2 3-2-1 3H6z"/>
         </svg>
         <span class="cs__label">assets/</span>
@@ -53,8 +56,8 @@
     <div class="cs__box">
       <div class="cs__box-head">
         <svg class="cs__icon" viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M8 16l-4-4 4-4"/>
-          <path d="M16 16l4-4-4-4"/>
+          <path d="M9 16l-4-4l4-4"/>
+          <path d="M15 16l4-4l-4-4"/>
         </svg>
         <span class="cs__label">embeds/</span>
       </div>
@@ -75,6 +78,7 @@
     background: var(--surface-bg);
     color: var(--text-color);
     padding: 10px 12px 12px;
+    margin-bottom: var(--block-spacing-y);
   }
   .cs__header {
     display: flex;
@@ -82,7 +86,19 @@
     gap: 8px;
     margin: 2px 0 10px 0;
   }
-  .cs__folder { width: 28px; height: 20px; display: block; stroke: var(--text-color); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+  .cs__folder {
+    width: 20px;
+    height: auto;
+    display: block;
+    flex: 0 0 auto;
+    stroke: var(--text-color);
+    fill: none;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+    shape-rendering: geometricPrecision;
+  }
   .cs__path { font-weight: 600; font-size: 14px; }
 
   .cs__grid {
@@ -100,13 +116,46 @@
     flex-direction: column;
     min-height: 120px;
   }
-  .cs__box-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
-  .cs__icon { width: 18px; height: 18px; display: block; stroke: var(--text-color); fill: none; stroke-width: 1.6; }
-  .cs__label { font-weight: 700; font-size: 13px; }
-  .cs__items { display: grid; gap: 4px; }
-  .cs__item { font-size: 12px; color: var(--muted-color); }
+  .cs__box-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+  .cs__icon {
+    width: 18px;
+    height: 18px;
+    display: block;
+    stroke: var(--text-color);
+    fill: none;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+    shape-rendering: geometricPrecision;
+  }
+  .cs__label {
+    font-weight: 700;
+    font-size: 13px;
+  }
+  .cs__items {
+    display: grid;
+    gap: 4px;
+  }
+  .cs__item {
+    font-size: 12px;
+    color: var(--muted-color);
+  }
 
-  @media (max-width: 1180px) { .cs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-  @media (max-width: 620px) { .cs__grid { grid-template-columns: 1fr; } }
+  @media (max-width: 1180px) {
+    .cs__grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  @media (max-width: 620px) {
+    .cs__grid {
+      grid-template-columns: 1fr;
+    }
+  }
 </style>