fix(web): soften the home entry pill borders

frontend/DESIGN.md

@@ -521,15 +521,32 @@ page. Three parts now, in reading order:
   1040px against the session's 760px, so the input visibly narrowed the moment
   a conversation started.
 - **Entry pills** (`.starter-entry`): the two product entrances, rendered inside
-  `.composer-wrap` *below* the composer. 36px pills, hairline, accent icon, one
-  word each. Below them one line merges the daily trend with the rectification
-  hint, and an accuracy-boundary line appears when no natal minute is available.
+  `.composer-wrap` *below* the composer. The visual pill is 36px tall
+  (`min-height: 36px`). The transparent hit area is the `::after` box with
+  `inset: -4px`, so the touch target is 44px. One word each, accent icon 15px.
+  Below them one line merges the daily trend with the rectification hint, and
+  an accuracy-boundary line appears when no natal minute is available.
 
-- **States:** default, hover, pressed, focus-visible, disabled, and `data-opening`
-  while a Case is being opened. Hover only moves the hairline; the surface tint
-  belongs to the pressed state, because a hover that shades the surface reads as
-  "selected" and sticks on touch. Opening a Case changes the cursor to `progress`
-  and nothing else — no spinner (unified-loading ruling).
+- **States, measured:**
+  - Default border is `1px solid var(--starter-entry-border)`, and that token is
+    `color-mix(in srgb, var(--color-border) 62%, transparent)`. It is not
+    `--color-border-strong` and not `--color-action`. A `1px` shadow uses
+    `color-mix(in srgb, var(--color-ink) 4%, transparent)`.
+  - Hover (`@media (hover: hover)` only) darkens the border to
+    `color-mix(in srgb, var(--color-border-strong) 45%, var(--color-border))`.
+    It does not switch the border to `--color-action` and does not tint the fill.
+  - Pressed (`:active`) keeps the soft border, drops the shadow, and fills with
+    `color-mix(in srgb, var(--color-canvas-soft) 80%, var(--color-canvas))`.
+  - Focus-visible is a `3px` outline at
+    `color-mix(in srgb, var(--color-focus) 80%, transparent)` with
+    `outline-offset: 2px`. That ring is wider and more opaque than the 1px
+    default border.
+  - Disabled uses the shared `button:disabled` opacity. `data-opening="true"`
+    sets `cursor: progress` and adds no spinner and no “正在加载” copy.
+  - `prefers-reduced-motion: reduce` already collapses transition duration to
+    `.01ms` on `*`. Do not add a loop animation here.
+  - At `max-width: 375px` the row and each pill are `max-width: 100%` so the
+    label and 15px icon stay inside the row. The 44px hit area does not shrink.
 - **Copy:** chat history titles daily readings as “8月22日 · 今日节奏”, typed natal
   questions as “事业 · …”, and rectification as “8月21日 · 生时校正”. Clicking the
   daily pill starts a consultation session immediately; it does not place the