style(component): soften scrim contrast against background

src/App.vue

@@ -66,7 +66,7 @@ const STATUS = {
 
 <template>
   <div class="demo">
-    <SongScrim :pattern="activePattern" :opacity="0.5" />
+    <SongScrim :pattern="activePattern" />
 
     <header class="demo__brand">
       <span class="demo__brand-mark"><SongLogo :size="36" /></span>
@@ -329,7 +329,7 @@ const STATUS = {
 }
 .demo__grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
   gap: 20px;
   margin-bottom: 20px;
 }
@@ -418,4 +418,59 @@ const STATUS = {
   margin-top: 20px;
   letter-spacing: 0.2em;
 }
+
+/* 移动端响应式 §4.2 —— 小屏收敛留白与字号 */
+@media (max-width: 640px) {
+  .demo__brand {
+    padding: 20px var(--song-space-4) 0;
+  }
+  .demo__main {
+    padding: 0 var(--song-space-4);
+  }
+  .demo__hero {
+    padding: 40px 0 56px;
+  }
+  .demo__hero-title {
+    font-size: 28px;
+    line-height: 1.4;
+  }
+  .demo__hero-desc {
+    font-size: 13px;
+  }
+  .demo__hero-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .demo__hero-actions .song-btn {
+    width: 100%;
+  }
+  .demo__section {
+    margin-bottom: 48px;
+  }
+  .demo__grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  .demo__swatches {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+  }
+  .demo__swatch-block {
+    height: 52px;
+  }
+  .demo__card-head {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  .demo__pattern-preview {
+    height: 140px;
+  }
+  .demo__pattern-label {
+    font-size: 24px;
+  }
+  .demo__foot {
+    padding: 24px var(--song-space-4) 32px;
+  }
+}
 </style>

src/components/SongScrim.vue

@@ -5,7 +5,7 @@
  */
 defineProps({
   pattern: { type: String, default: 'ice' },
-  opacity: { type: Number, default: 0.55 },
+  opacity: { type: Number, default: 0.3 },
   box: { type: Boolean, default: false }
 })
 defineOptions({ name: 'SongScrim' })
@@ -88,12 +88,14 @@ const PATTERNS = {
   border-radius: var(--song-radius-l);
 }
 .song-scrim--box :deep(svg) {
-  filter: opacity(0.55);
+  filter: opacity(0.5);
 }
 .song-scrim__tile {
   width: 100%;
   height: 100%;
   mix-blend-mode: multiply;
+  /* 降低与底色对比度：浅色模式下提亮纹样（乘变浅），暗色模式下压暗（屏变弱） */
+  filter: brightness(1.6);
 }
 .song-scrim__tile :deep(svg) {
   width: 100%;
@@ -101,5 +103,12 @@ const PATTERNS = {
 }
 :global([data-theme='dark']) .song-scrim__tile {
   mix-blend-mode: screen;
+  filter: brightness(0.62);
+}
+.song-scrim--box :deep(svg) {
+  filter: opacity(0.5) brightness(1.4);
+}
+:global([data-theme='dark']) .song-scrim--box :deep(svg) {
+  filter: opacity(0.5) brightness(0.72);
 }
 </style>