fixed markdown render

frontend/src/styles/global.css

@@ -325,16 +325,6 @@ code, pre, kbd, samp {
 }
 .prose > *:first-child { margin-top: 0; }
 
-.prose p:first-of-type::first-letter {
-  font-family: var(--font-display);
-  font-weight: 600;
-  font-size: 3.6em;
-  line-height: 0.85;
-  float: left;
-  margin: 0.08em 0.12em 0 -0.04em;
-  color: var(--mauve);
-}
-
 .prose h1 {
   font-family: var(--font-display);
   font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
@@ -351,14 +341,10 @@ code, pre, kbd, samp {
   font-weight: 500;
   color: var(--text);
   margin: 3rem 0 1rem;
+  padding-bottom: 0.35rem;
   line-height: 1.2;
   letter-spacing: -0.01em;
-}
-.prose h2::before {
-  content: "§ ";
-  color: var(--mauve);
-  font-style: italic;
-  opacity: 0.7;
+  border-bottom: 1px solid color-mix(in srgb, var(--mauve) 30%, transparent);
 }
 .prose h3 {
   font-family: var(--font-display);
@@ -461,12 +447,14 @@ code, pre, kbd, samp {
 .prose ul { list-style: none; }
 .prose ul > li { position: relative; padding-left: 0.2rem; }
 .prose ul > li::before {
-  content: "❦";
+  content: "";
   position: absolute;
-  left: -1.2rem;
-  color: var(--mauve);
-  font-size: 0.85em;
-  top: 0.05em;
+  left: -1.1rem;
+  top: 0.62em;
+  width: 0.42em;
+  height: 0.42em;
+  background: var(--mauve);
+  transform: rotate(45deg);
 }
 .prose ol { list-style: decimal-leading-zero; }
 .prose ol > li::marker { color: var(--mauve); font-family: var(--font-display); font-style: italic; }
@@ -475,14 +463,28 @@ code, pre, kbd, samp {
 .prose hr {
   margin: 3rem auto;
   border: 0;
-  text-align: center;
-  height: 1em;
+  height: 1px;
+  width: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--mauve) 55%, transparent) 18%,
+    color-mix(in srgb, var(--mauve) 55%, transparent) 82%,
+    transparent
+  );
+  position: relative;
+  overflow: visible;
 }
 .prose hr::before {
-  content: "✦ ✦ ✦";
-  color: var(--surface2);
-  letter-spacing: 0.8em;
-  font-size: 0.85em;
+  content: "✦";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--base);
+  padding: 0 0.7rem;
+  color: var(--mauve);
+  font-size: 0.85rem;
 }
 
 .prose strong { color: var(--mauve); font-weight: 700; }