update

client/src/style.scss

@@ -35,7 +35,7 @@ body {
   padding: 0;
   background: var(--bg);
   color: var(--text);
-  font-family: "Manrope", "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-family: var(--font-sans);
   line-height: 1.5;
 }
 
@@ -100,7 +100,7 @@ select {
   display: inline-flex;
   align-items: center;
   gap: 10px;
-  font-family: "Sora", sans-serif;
+  font-family: var(--font-display);
   font-weight: 700;
   letter-spacing: 0.01em;
 }
@@ -108,11 +108,13 @@ select {
 .brand-mark {
   width: 32px;
   height: 32px;
-  border-radius: 10px;
-  background: var(--primary);
-  color: #fff;
-  display: grid;
-  place-items: center;
+  display: block;
+}
+
+.brand-mark img {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
 .nav {
@@ -173,7 +175,7 @@ h1,
 h2,
 h3 {
   margin: 0;
-  font-family: "Sora", sans-serif;
+  font-family: var(--font-display);
 }
 
 .search-row {
@@ -408,11 +410,9 @@ h3 {
   flex-direction: column;
   gap: 10px;
   min-height: 280px;
-  opacity: 0;
-  transform: translateY(8px);
+  opacity: 1;
+  transform: translateY(0);
   will-change: transform, opacity;
-  animation: card-enter 380ms var(--ease-standard) both;
-  animation-delay: var(--stagger, 0ms);
   transition:
     border-color var(--duration-normal) var(--ease-standard),
     background-color var(--duration-normal) var(--ease-standard),
@@ -486,6 +486,66 @@ h3 {
   min-height: 42px;
 }
 
+.card .desc.markdown-inline {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.markdown {
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+
+.markdown :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre) {
+  margin: 0 0 8px;
+}
+
+.markdown :where(h1, h2, h3, h4, h5, h6) {
+  color: var(--text);
+  font-size: 16px;
+}
+
+.markdown :where(p, li) {
+  line-height: 1.6;
+}
+
+.markdown :where(ul, ol) {
+  padding-left: 18px;
+}
+
+.markdown :where(p, ul, ol, blockquote, pre):last-child {
+  margin-bottom: 0;
+}
+
+.markdown a {
+  color: var(--primary-strong);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.markdown code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  background: rgba(15, 47, 61, 0.08);
+  padding: 1px 4px;
+  border-radius: 4px;
+}
+
+.markdown pre {
+  background: rgba(15, 47, 61, 0.08);
+  border: 1px solid rgba(18, 117, 150, 0.16);
+  border-radius: var(--radius-sm);
+  padding: 10px 12px;
+  overflow: auto;
+}
+
+.markdown pre code {
+  background: transparent;
+  padding: 0;
+}
+
 .tags {
   display: flex;
   flex-wrap: wrap;
@@ -650,6 +710,10 @@ h3 {
   color: var(--muted);
 }
 
+.markdown-detail {
+  margin: 10px 0 12px;
+}
+
 .modal-muted {
   color: var(--muted);
 }
@@ -679,18 +743,31 @@ h3 {
   gap: 6px;
 }
 
+.feature-list li {
+  color: var(--muted);
+}
+
 .icon-btn {
   width: 36px;
   height: 36px;
+  padding: 0;
   border-radius: 999px;
   border: 1px solid var(--line);
   background: rgba(255, 255, 255, 0.9);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
   cursor: pointer;
   transition:
     background-color var(--duration-fast) var(--ease-standard),
     transform var(--duration-fast) var(--ease-standard);
 }
 
+.icon-btn svg {
+  display: block;
+}
+
 .icon-btn:hover {
   background: rgba(240, 251, 255, 0.95);
   border-color: var(--line-strong);
@@ -778,6 +855,15 @@ select:focus-visible {
   }
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .card {
+    opacity: 0;
+    transform: translateY(8px);
+    animation: card-enter 380ms var(--ease-standard) both;
+    animation-delay: var(--stagger, 0ms);
+  }
+}
+
 .btn:active,
 .btn-small:active,
 .icon-btn:active,