dsh-web-icon-indicator 0.1.0 → 0.2.1

package/README.md

@@ -6,29 +6,44 @@ Browser tab favicon reflects the current DSH session state — `idle` / `running
 
 ## States
 
-| State | Visual · Icon | Animation |
+| State | Color (default) | Effect (default) |
 | --- | --- | --- |
-| `idle` | Original DeepSeek whale (default favicon) | — |
-| `running` | Yellow whale | Static |
-| `asking` | Yellow ⇄ red | 400 ms blink |
-| `done` | Green whale | Static for 5 s, then back to idle |
+| `idle` | `#1a1a1a` (deep whale) | `static` |
+| `running` | `#FACC15` (yellow) | `static` |
+| `asking` | `#E5484D` + `#FACC15` | `blink` (400 ms) |
+| `done` | `#22A06B` (green) | `static` for `doneHoldMs`, then `idle` |
 
-The four SVG icons live in [`icons/`](./icons/) beside the package. Edit them to match your brand; the plugin re-reads them on every request, so any change is live as soon as the browser tab polls again.
+The plugin ships **one** base whale SVG ([`icons/base.svg`](./icons/base.svg)) and recolors / animates it in the browser — there are no per-color icon files anymore. Color and effect are fully configurable per state (see [Configure](#configure)).
+
+### Dynamic color & animation
+
+All states share the same whale path; only the fill color (and optionally an animation) differ. Because a favicon is a plain image, SVG CSS animations never run inside the tab — the injected browser script builds each frame as a `data:image/svg+xml,…` URI, replacing the `__COLOR__` placeholder with the configured color and, for animated effects, injecting a `<g transform>` for scale/translate on every `requestAnimationFrame` tick. The available effects are:
+
+| Effect | Behavior |
+| --- | --- |
+| `static` | A single colored frame, no motion — uses `colors[0]` |
+| `blink` | Toggles `colors[0]` ⇄ `colors[1]` (a darker second color is derived if missing) over `speed` |
+| `breath` | Pulsates between `colors[0]` and `colors[1]` (derived if missing) over `speed` |
+| `rainbow` | Uses `colors[0]` as the starting hue, then cycles the wheel over `speed` |
+| `heartbeat` | Scale pulses with a sharp lub-dub beat over `speed` — color is `colors[0]` |
+| `bounce` | The whale hops up and down over `speed` — color is `colors[0]` |
+
+A self-contained demo (no build, no deps) with these effects lives in [`demo/dynamic-color.html`](./demo/dynamic-color.html) — pick a state + effect and edit colors live, watching the browser-tab favicon update in real time.
 
 ## Install
 
 This is a standard DSH bundle plugin. Install it into the `web` profile (the GUI/TUI profiles pick it up automatically through the cordis patch layer).
 
-From the Git source (always works, no publish needed):
+From npm (**recommended** — published as `dsh-web-icon-indicator@0.1.0`):
 
 ```bash
-dsh plugin --profile web add github:waknow/dsh-web-icon-indicator
+dsh plugin --profile web add dsh-web-icon-indicator
 ```
 
-From npm (once published):
+From the Git source:
 
 ```bash
-dsh plugin --profile web add dsh-web-icon-indicator
+dsh plugin --profile web add github:waknow/dsh-web-icon-indicator
 ```
 
 Or from a local directory / tarball:
@@ -45,33 +60,80 @@ All keys are optional; defaults shown.
 
 | Key | Default | Meaning |
 | --- | --- | --- |
-| `iconsDir` | `<package>/icons/` | Directory of the four `*.svg` files |
+| `iconsDir` | `<package>/icons/` | Directory holding the single `base.svg` |
 | `statusPath` | `/dsh-web-icon-status.json` | JSON status endpoint |
-| `iconPathPrefix` | `/dsh-web-icon-indicator` | URL prefix the four SVGs are served under |
-| `askingHoldMs` | `3500` | Minimum visibility of the asking icon |
-| `askingBlinkMs` | `400` | Yellow/red blink interval |
-| `doneHoldMs` | `5000` | Time the done icon stays |
+| `iconPathPrefix` | `/dsh-web-icon-indicator` | URL prefix `base.svg` is served under |
+| `askingHoldMs` | `3500` | Minimum visibility of the asking state |
+| `doneHoldMs` | `5000` | Time the done state stays before falling back to idle |
+| `states` | see below | Per-state visual config |
 
-Override from your composition row:
+Each entry in `states` is one object per state: `{ effect, colors[], speed? }`:
+
+```yaml
+config:
+  states:
+    idle:    { effect: static,    colors: ['#1a1a1a'] }
+    running: { effect: static,    colors: ['#FACC15'] }
+    asking:  { effect: blink,     colors: ['#E5484D', '#FACC15'], speed: 400 }
+    done:    { effect: static,    colors: ['#22A06B'] }
+```
+
+- **`effect`** — one of `static | blink | breath | rainbow | heartbeat | bounce`.
+- **`colors`** — an **array** of hex colors. `colors[0]` is the primary. Multi-color effects read more entries: `blink` uses `colors[0]`⇄`colors[1]`, `breath` breathes `colors[0]`⇄`colors[1]` (each derives a darker second color if omitted), `rainbow` uses only `colors[0]` as the starting hue.
+- **`speed`** — optional per-state cycle length in ms (also the `blink` toggle interval). Default `1200`.
+
+Entries are shallow-merged over the defaults, so you can override only a few states. Example:
 
 ```yaml
 - id: dsh-web-icon-indicator
   name: 'dsh-web-icon-indicator'
   config:
-    askingBlinkMs: 320
-    doneHoldMs: 4000
+    states:
+      running: { effect: breath,    colors: ['#FF9900', '#FFD9A0'], speed: 900 }
+      asking:  { effect: rainbow,   colors: ['#FF0000'] }
+      done:    { effect: heartbeat, colors: ['#2ECC71'] }
 ```
 
+### Settings page & `settings.yaml` (DSH ≥ rc7)
+
+The plugin registers the whole config surface above with the DSH settings
+service under the `web-icon-indicator` namespace (a schemastery schema in
+`lib/index.js`):
+
+- **Web GUI:** open **设置 → 插件 → 插件配置** — a *Favicon indicator* card
+  edits the same keys (asking/done hold, and per-state effect / colors /
+  cycle), staged and saved through the settings transport. Each state is a
+  collapsible row showing a color dot and a one-line summary (`blink ·
+  #E5484D ⇄ #FACC15 · 400ms`); expanding a row reveals its three fields, and
+  the colors field previews parsed swatches live.
+- **Persistence:** values land in the profile's `settings.yaml` (default
+  `~/.dsh/settings.yaml`) as a `web-icon-indicator:` section. The composition
+  entry stays the `base` layer; resolution order is schema defaults →
+  composition entry → settings document user layer.
+- **No server restart, no tab reload** for settings-card saves: `askingHoldMs` /
+  `doneHoldMs` apply live host-side, and per-state visual config (effect /
+  colors / cycle) is synced into the running tab through the status poll within
+  ~1 s. Only code-level default changes in `lib/index.js` need a tab reload (or
+  a DSH web rebuild).
+- The browser half is a hand-written `lib/client.js` (ModuleLoader factory
+  format — no build step, no runtime deps beyond the shell's `react`). The DSH
+  client scanner picks a new `dsh.client` declaration up on the next profile
+  start.
+- Deployments without a settings service are unaffected: the plugin falls back
+  to reading the composition entry exactly as before.
+
 ## How it works
 
-- Host-only plugin: registers three routes on the existing `webServer` (status JSON, `/dsh-web-icon-indicator/*.svg`, and one `tapIndex` to inject a small browser script into every served `index.html`).
+- Host plugin with a small browser half: registers routes on the existing `webServer` — the status JSON endpoint, a static `/dsh-web-icon-indicator/base.svg` (the whale template), and one `tapIndex` that injects a small browser script into every served `index.html`. The config surface is registered with the DSH settings service (`web-icon-indicator` namespace) for validation, persistence, and the settings-page card (see above).
 - Status is aggregated across live `agents.list()` with priority `asking > running > done > idle`. The aggregation runs a `reconcile()` step on every request to detect running → idle transitions, because `agent/status`'s idle delivery is not guaranteed at turn end.
 - `ask_user_question` tool calls (via `tools/pre-execute` / `tools/result`) flip the session into `asking` with a configurable minimum-hold so the icon stays visible even when the user answers immediately.
-- The browser script polls `/dsh-web-icon-status.json` once a second and sets `<link rel="icon">`'s `href` to a `data:image/svg+xml,…` URI. Browsers don't play SVG favicon CSS animations, so the four icons are static SVGs and the `asking` blink is driven by the script swapping between yellow and red frames every `askingBlinkMs`.
+- Permission / **sandbox-interception** waits are also surfaced as `asking`: when the agent hits a sandbox denial and escalates (`sandbox_permissions` + `justification`), or any other tool asks for approval, the approval service appends an `approval/asked` session event and blocks the agent until you decide. The plugin watches `session/event` (with an authoritative fold over the live session log as a fallback) and pins the session into the `asking` state for that whole wait, clearing it on `approval/decided`.
+- The browser script polls `/dsh-web-icon-status.json` once a second, fetches `base.svg` once, and then on every `requestAnimationFrame` tick rebuilds the favicon as a `data:image/svg+xml,…` URI — replacing the `__COLOR__` placeholder with the state's configured color and applying the state's configured effect. The status response also echoes the current per-state visual config, so a settings save reaches the running tab on the next poll (~1 s) without a reload. Browsers don't play favicon SVG CSS animations, so all motion is JS-driven. Because browsers pause `requestAnimationFrame` in hidden tabs, the poll also repaints a wall-clock frame for animated states, so background tabs keep animating (coarsely) instead of freezing; full-speed animation resumes when the tab is visible again. The poll also survives host restarts: a transient fetch failure restores the original icon and retries on the next tick (the SPA reconnects in place, so the icon comes back without a manual refresh).
 
 ## Caveats
 
-- Favicon SVG CSS animations do not run inside the browser's tab UI — the four shipped icons are static for that reason. Open the SVG files directly in a viewer to see the full design.
+- Favicon SVG CSS animations do not run inside the browser's tab UI — all effects are produced in JavaScript by rebuilding the data-URI each frame. This is a deliberate, zero-dependency design.
+- The base template must keep its `__COLOR__` placeholder in the `#p { fill: … }` rule; the browser replaces that token to color each frame.
 - The plugin runs in the **host** plane; it must be mounted into a profile's composition, not a session-scoped agent preset.
 - File reads go through the `fs` service with the configured `iconsDir` as `cwd`. Make sure that path is readable under your deployment's sandbox policy.
 

package/README.zh.md

@@ -6,29 +6,44 @@
 
 ## 状态
 
-| 状态 | 图标 | 动画 |
+| 状态 | 颜色（默认） | 特效（默认） |
 | --- | --- | --- |
-| `idle` 待机 | 原始 DeepSeek 鲸鱼（默认 favicon） | — |
-| `running` 运行中 | 黄色鲸鱼 | 静态 |
-| `asking` 提问 | 黄色 ⇄ 红色 | 400ms 闪烁 |
-| `done` 完成 | 绿色鲸鱼 | 保持 5 秒后回到待机 |
+| `idle` 待机 | `#1a1a1a`（深色鲸鱼） | `static` |
+| `running` 运行中 | `#FACC15`（黄色） | `static` |
+| `asking` 提问 | `#E5484D` + `#FACC15` | `blink`（400ms） |
+| `done` 完成 | `#22A06B`（绿色） | `doneHoldMs` 内 `static`，随后回到 `idle` |
 
-四个状态图标位于包内 `icons/` 目录。你可以随时替换它们——插件每次请求都会重新读取，浏览器下次轮询就生效。
+插件只内置**一个**基础鲸鱼 SVG（[`icons/base.svg`](./icons/base.svg)），在浏览器中动态上色/加动画——不再有按颜色拆分的图标文件。每个状态的颜色和特效都可通过 [配置](#配置) 自由设置。
+
+### 动态颜色与动画
+
+所有状态共用同一条鲸鱼路径，只有填充色（以及可选的动画）不同。由于 favicon 是普通图片，SVG 内部的 CSS 动画不会在标签页执行——注入的浏览器脚本把每一帧构建成 `data:image/svg+xml,…` URI：在每个 `requestAnimationFrame` 周期替换 `__COLOR__` 占位符为配置颜色，动画类特效则在 `<g transform>` 中注入缩放/位移。可选特效：
+
+| 特效 | 效果 |
+| --- | --- |
+| `static` | 纯色单帧，无动画——使用 `colors[0]` |
+| `blink` | 在 `colors[0]` ⇄ `colors[1]` 之间按 `speed` 切换（缺省时自动推导更深的第二色） |
+| `breath` | 在 `colors[0]` 与 `colors[1]` 之间平滑呼吸过渡（缺省时推导） |
+| `rainbow` | 以 `colors[0]` 为起始色相，在 `speed` 内绕色轮循环 |
+| `heartbeat` | 在 `speed` 内做「lub-dub」式的尖锐缩放脉冲——颜色为 `colors[0]` |
+| `bounce` | 鲸鱼在 `speed` 内上下跳动——颜色为 `colors[0]` |
+
+完整自包含 demo（无构建、无依赖）在 [`demo/dynamic-color.html`](./demo/dynamic-color.html)：选择状态 + 特效并实时改色，即可看到标签页 favicon 即时变化。
 
 ## 安装
 
 这是一个标准 DSH bundle 插件。安装到 `web` profile（GUI/TUI profile 会自动通过 cordis patch 层加载）：
 
-从 Git 源码安装（始终可用，无需发布）：
+从 npm 安装（**推荐**——已发布为 `dsh-web-icon-indicator@0.1.0`）：
 
 ```bash
-dsh plugin --profile web add github:waknow/dsh-web-icon-indicator
+dsh plugin --profile web add dsh-web-icon-indicator
 ```
 
-从 npm 安装（发布后）：
+从 Git 源码安装：
 
 ```bash
-dsh plugin --profile web add dsh-web-icon-indicator
+dsh plugin --profile web add github:waknow/dsh-web-icon-indicator
 ```
 
 或从本地目录 / tarball 安装：
@@ -45,33 +60,74 @@ dsh plugin --profile web add <路径或tarball>
 
 | 键 | 默认值 | 含义 |
 | --- | --- | --- |
-| `iconsDir` | `<package>/icons/` | 四个 `*.svg` 文件所在目录 |
+| `iconsDir` | `<package>/icons/` | 单个 `base.svg` 所在目录 |
 | `statusPath` | `/dsh-web-icon-status.json` | JSON 状态端点 |
-| `iconPathPrefix` | `/dsh-web-icon-indicator` | 四个 SVG 的 URL 前缀 |
-| `askingHoldMs` | `3500` | 提问图标的最小保持时长 |
-| `askingBlinkMs` | `400` | 黄红闪烁间隔 |
-| `doneHoldMs` | `5000` | 完成图标保持时长 |
+| `iconPathPrefix` | `/dsh-web-icon-indicator` | `base.svg` 的 URL 前缀 |
+| `askingHoldMs` | `3500` | 提问状态的最小保持时长 |
+| `doneHoldMs` | `5000` | 完成状态保持时长，随后回到 idle |
+| `states` | 见下 | 每个状态的视觉配置 |
 
-在组合行中覆盖：
+`states` 中每个状态是一个对象：`{ effect, colors[], speed? }`：
+
+```yaml
+config:
+  states:
+    idle:    { effect: static,    colors: ['#1a1a1a'] }
+    running: { effect: static,    colors: ['#FACC15'] }
+    asking:  { effect: blink,     colors: ['#E5484D', '#FACC15'], speed: 400 }
+    done:    { effect: static,    colors: ['#22A06B'] }
+```
+
+- **`effect`** — 取 `static | blink | breath | rainbow | heartbeat | bounce` 之一。
+- **`colors`** — **数组**，多个 hex 颜色。`colors[0]` 为主色。多色特效读取更多项：`blink` 用 `colors[0]`⇄`colors[1]`，`breath` 在 `colors[0]`⇄`colors[1]` 间过渡（缺省时自动推导更深的第二色），`rainbow` 仅用 `colors[0]` 作起始色相。
+- **`speed`** — 可选，该状态的周期（ms），也是 `blink` 的切换间隔。默认 `1200`。
+
+每个状态条目会在默认值之上做浅合并，因此只需覆盖少量状态。示例：
 
 ```yaml
 - id: dsh-web-icon-indicator
   name: 'dsh-web-icon-indicator'
   config:
-    askingBlinkMs: 320
-    doneHoldMs: 4000
+    states:
+      running: { effect: breath,    colors: ['#FF9900', '#FFD9A0'], speed: 900 }
+      asking:  { effect: rainbow,   colors: ['#FF0000'] }
+      done:    { effect: heartbeat, colors: ['#2ECC71'] }
 ```
 
+### 设置页与 `settings.yaml`（DSH ≥ rc7）
+
+插件把上面整套配置注册进 DSH settings 服务，命名空间为 `web-icon-indicator`
+（schema 为 `lib/index.js` 中的 schemastery schema）：
+
+- **Web GUI：** 打开 **设置 → 插件 → 插件配置**，会出现 *标签页图标指示器*
+  卡片，可编辑同样的键（提问/完成驻留，以及每个状态的特效 / 颜色 / 周期），
+  通过 settings 传输层暂存并保存。每个状态是一行可折叠条目，带主色圆点和一行
+  摘要（如 `blink · #E5484D ⇄ #FACC15 · 400ms`）；展开该行才显示它的三个字段，
+  颜色输入框旁会实时预览解析出的色块。
+- **持久化：** 值写入 profile 的 `settings.yaml`（默认 `~/.dsh/settings.yaml`）
+  的 `web-icon-indicator:` 段。合成条目仍是 `base` 层；解析顺序为 schema 默认值
+  → 合成条目 → 设置文档用户层。
+- **无需重启服务器、无需刷新标签页**即可让设置卡片的修改生效：`askingHoldMs` /
+  `doneHoldMs` 在主机侧即时生效；各状态的视觉配置（特效 / 颜色 / 周期）会随状态
+  轮询同步进正在运行的标签页，约 1 秒内生效。只有改 `lib/index.js` 里的代码级
+  默认值才需要重载标签页（或重新构建 DSH Web）。
+- 浏览器半区是手写的 `lib/client.js`（ModuleLoader factory 格式——无构建步骤、
+  无额外运行期依赖，仅用 shell 自带的 `react`）。DSH 客户端扫描器会在下次启动
+  profile 时识别新的 `dsh.client` 声明。
+- 未组合 settings 服务的部署不受影响：插件回退到直接读取合成条目，行为与之前完全一致。
+
 ## 实现原理
 
-- Host-only 插件：在现有 `webServer` 上注册三个路由（状态 JSON、`/dsh-web-icon-indicator/*.svg`，以及一个 `tapIndex` 向每个 `index.html` 注入小段浏览器脚本）。
+- Host 插件 + 一个小型浏览器半区：在现有 `webServer` 上注册路由——状态 JSON 端点、静态 `/dsh-web-icon-indicator/base.svg`（鲸鱼模板），以及一个 `tapIndex` 向每个 `index.html` 注入小段浏览器脚本。整套配置已注册进 DSH settings 服务（`web-icon-indicator` 命名空间）用于校验、持久化与设置页卡片（见上）。
 - 状态按 `agents.list()` 聚合，优先级 `asking > running > done > idle`。每次请求都会执行一次 `reconcile()` 检测 running → idle 的转换，因为 `agent/status` 的 idle 事件在回合结束时并不保证送达。
 - `ask_user_question` 工具调用（通过 `tools/pre-execute` / `tools/result`）把会话置为 `asking`，带可配置的最小保持时长，即使你立刻回答，图标也会保持可见。
-- 浏览器脚本每秒轮询 `/dsh-web-icon-status.json`，把 `<link rel="icon">` 的 `href` 设为 `data:image/svg+xml,…` URI。浏览器不会播放 SVG favicon 的 CSS 动画，所以四个图标是静态 SVG，`asking` 的闪烁由脚本每 `askingBlinkMs` 交换黄红两帧实现。
+- 权限 / **沙箱拦截**等待同样会显示为 `asking`：当 agent 命中沙箱拒绝并请求提权（`sandbox_permissions` + `justification`），或其他工具需要征得同意时，审批服务会先写入一条 `approval/asked` 会话事件并阻塞 agent，直到你做出决定。插件监听 `session/event`（并以实时会话日志的权威折叠作为兜底）在整个等待期间将会话置为 `asking` 状态，收到 `approval/decided` 后清除。
+- 浏览器脚本每秒轮询 `/dsh-web-icon-status.json`，首次获取 `base.svg`，然后每个 `requestAnimationFrame` 周期把 favicon 重建为 `data:image/svg+xml,…` URI——把 `__COLOR__` 占位符替换为状态配置的颜色，并应用该状态配置的特效。状态响应还会携带当前的每状态视觉配置，因此设置保存后约 1 秒内（下一个轮询 tick）即同步到已打开的标签页，无需刷新。浏览器不会播放 SVG favicon 的 CSS 动画，所以一切动画都由 JS 驱动。由于浏览器在**隐藏（后台）标签页会暂停 `requestAnimationFrame`**，轮询还会为动画态补绘一帧按墙钟时间计算的画面——后台标签页保持粗粒度动画（约每 1 秒）而不会冻结，切回前台后恢复满速动画。轮询还能**扛住 host 重启**：瞬时请求失败时先还原原始图标，并在下一个 tick 重试（SPA 原地重连，无需手动刷新图标即可恢复）。
 
 ## 已知限制
 
-- favicon 的 SVG CSS 动画在浏览器标签页 UI 中不会运行——四个内置图标因此是静态的。直接用浏览器打开 SVG 文件可以看到完整设计。
+- favicon 的 SVG CSS 动画在浏览器标签页 UI 中不会运行——所有特效都由 JavaScript 每帧重建 data-URI 实现，这是零依赖设计的刻意取舍。
+- `base.svg` 模板必须保留 `#p { fill: … }` 规则中的 `__COLOR__` 占位符；浏览器会替换该标记为每帧上色。
 - 插件运行在 **host** 平面，必须挂载进 profile 的组合配置，不能作为会话级 agent preset。
 - 文件读取走 `fs` 服务，以配置的 `iconsDir` 为 `cwd`。请确保该路径在部署环境的沙箱策略下可读。
 

package/icons/base.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
+	<style>
+		#p { fill: __COLOR__; }
+	</style>
+	<path id="p" d="M48.8354 10.0479C48.3232 9.79199 48.1025 10.2798 47.8032 10.5278C47.7007 10.6079 47.6143 10.7119 47.5273 10.8076C46.7793 11.624 45.9048 12.1597 44.7622 12.0957C43.0923 12 41.666 12.5356 40.4058 13.8398C40.1377 12.2319 39.2476 11.272 37.8926 10.6558C37.1836 10.3359 36.4668 10.0156 35.9702 9.31982C35.6235 8.82373 35.5293 8.27197 35.356 7.72754C35.2456 7.3999 35.1353 7.06396 34.7651 7.00781C34.3633 6.94385 34.2056 7.2876 34.0479 7.57568C33.418 8.75195 33.1733 10.0479 33.1973 11.3599C33.2524 14.312 34.4736 16.6641 36.8999 18.3359C37.1758 18.5278 37.2466 18.7197 37.1597 19C36.9946 19.5757 36.7974 20.1357 36.624 20.7119C36.5137 21.0801 36.3486 21.1597 35.9624 21C34.6309 20.4321 33.481 19.5918 32.4644 18.5757C30.7393 16.8721 29.1792 14.9917 27.2334 13.52C26.7764 13.1758 26.3193 12.856 25.8467 12.5518C23.8618 10.584 26.1069 8.96777 26.627 8.77588C27.1704 8.57568 26.8159 7.8877 25.0591 7.896C23.3022 7.90381 21.6953 8.50391 19.647 9.30371C19.3477 9.42383 19.0322 9.51172 18.7095 9.58398C16.8501 9.22363 14.9199 9.14355 12.9033 9.37598C9.10596 9.80762 6.07275 11.6396 3.84326 14.7681C1.16455 18.5278 0.53418 22.7998 1.30664 27.2559C2.11768 31.9521 4.46582 35.8398 8.07373 38.8799C11.8159 42.0322 16.1255 43.5762 21.041 43.2803C24.0269 43.104 27.3516 42.6963 31.1016 39.4561C32.0469 39.936 33.0396 40.1279 34.686 40.272C35.9546 40.3921 37.1758 40.208 38.1211 40.0078C39.6021 39.688 39.4995 38.2881 38.9639 38.0322C34.623 35.9678 35.5762 36.8081 34.71 36.1279C36.9155 33.4639 40.2402 30.6958 41.54 21.728C41.6426 21.0161 41.5557 20.5679 41.54 19.9917C41.5322 19.6396 41.6108 19.5039 42.0049 19.4639C43.0923 19.3359 44.1479 19.0317 45.1167 18.4878C47.9292 16.9199 49.064 14.3438 49.3315 11.2559C49.3711 10.7837 49.3237 10.2959 48.8354 10.0479ZM24.3262 37.8398C20.1196 34.4639 18.0791 33.3521 17.2358 33.3999C16.4482 33.4482 16.5898 34.3682 16.7632 34.9678C16.9443 35.5601 17.1812 35.9683 17.5117 36.4878C17.7402 36.832 17.8979 37.3442 17.2832 37.728C15.9282 38.584 13.5728 37.4399 13.4624 37.3838C10.7207 35.7358 8.42822 33.5601 6.81348 30.584C5.25342 27.7197 4.34766 24.6479 4.19775 21.3677C4.1582 20.5757 4.38672 20.2959 5.15869 20.1519C6.17529 19.96 7.22314 19.9199 8.23926 20.0718C12.5327 20.7119 16.1885 22.6719 19.2529 25.7759C21.002 27.5439 22.3252 29.6558 23.6885 31.7202C25.1377 33.9121 26.6978 36 28.6831 37.7119C29.3843 38.312 29.9434 38.7681 30.479 39.104C28.8643 39.2881 26.1699 39.3281 24.3262 37.8398ZM26.3433 24.6001C26.3433 24.248 26.6191 23.9678 26.9658 23.9678C27.0444 23.9678 27.1152 23.9839 27.1782 24.0078C27.2651 24.04 27.3438 24.0879 27.4067 24.1602C27.5171 24.272 27.5801 24.4321 27.5801 24.6001C27.5801 24.9521 27.3042 25.2319 26.9575 25.2319C26.6108 25.2319 26.3433 24.9521 26.3433 24.6001ZM32.6064 27.8799C32.2046 28.0479 31.8027 28.1919 31.4165 28.208C30.8179 28.2397 30.1641 27.9922 29.8096 27.688C29.2583 27.2158 28.8643 26.9521 28.6987 26.1279C28.6279 25.7759 28.6675 25.2319 28.7305 24.9199C28.8721 24.248 28.7144 23.8159 28.2495 23.4238C27.8716 23.104 27.3911 23.0161 26.8633 23.0161C26.666 23.0161 26.4849 22.9277 26.3511 22.856C26.1304 22.7441 25.9492 22.4639 26.1226 22.1201C26.1777 22.0078 26.4458 21.7358 26.5088 21.688C27.2256 21.272 28.0527 21.4077 28.8169 21.7197C29.5259 22.0161 30.0615 22.5601 30.834 23.3281C31.6216 24.2559 31.7632 24.5117 32.2124 25.208C32.5669 25.752 32.8901 26.312 33.1104 26.9521C33.2446 27.3521 33.0713 27.6802 32.6064 27.8799Z"/>
+</svg>