@mumulinya167/ccm-pet-assets 2.0.0

package/assets/clawd/clawd-idle-living.svg

@@ -0,0 +1,196 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* 16-Second Master Sequence for Idle Actions */
+      .action-body {
+        transform-origin: 7.5px 13px; /* Pivot at the base of the torso */
+        animation: action-body 16s infinite ease-in-out;
+      }
+      
+      /* Continuous Subtle Breathing (Syncs exactly 5 times per 16s loop) */
+      .breathe-anim {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      /* Shadow shrinking and shifting matching actions */
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-action 16s infinite ease-in-out;
+      }
+
+      /* Left Arm (Scratching and Yawn Stretching) */
+      .arm-l {
+        transform-origin: 1px 10px;
+        animation: arm-l-idle 16s infinite ease-in-out;
+      }
+
+      /* Right Arm (Yawn Stretching) */
+      .arm-r {
+        transform-origin: 14px 10px;
+        animation: arm-r-idle 16s infinite ease-in-out;
+      }
+
+      /* Eye Tracking (Looking around) */
+      .eyes-look {
+        animation: eye-track 16s infinite ease-in-out;
+      }
+
+      /* Occasional Blinks and shutting during Yawn */
+      .eyes-blink {
+        transform-origin: 7.5px 9px;
+        animation: eye-blink 16s infinite linear;
+      }
+
+      /* Yawn Mouth Appearance */
+      .yawn-mouth {
+        transform-origin: 7.5px 11px;
+        animation: yawn-mouth-anim 16s infinite ease-in-out;
+        opacity: 0;
+      }
+
+      /* Tiny tear that appears during the big yawn */
+      .yawn-tear {
+        animation: tear-fall 16s infinite ease-in-out;
+        opacity: 0;
+      }
+
+      /* --- Keyframes --- */
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes action-body {
+        0%, 8%, 26%, 38%, 55%, 80%, 100% { transform: scale(1, 1) translate(0, 0); }
+        /* Look Right Tilt */
+        12%, 22% { transform: scale(1, 1) translate(1px, 0); }
+        /* Look Left Tilt */
+        42%, 50% { transform: scale(1, 1) translate(-1px, 0); }
+        /* Scratching Lean */
+        30%, 36% { transform: scale(1, 1) translate(0.5px, 0); } 
+        /* Deep Yawn Stretch */
+        60% { transform: scale(0.95, 1.05) translate(0px, -1px); } /* Stretch up */
+        65% { transform: scale(0.9, 1.1) translate(0px, -2px); }   /* Peak stretch */
+        72% { transform: scale(1.05, 0.95) translate(0px, 1px); }  /* Heavy sigh / squash down */
+        76% { transform: scale(1, 1) translate(0px, 0px); }        /* Recover */
+      }
+
+      @keyframes shadow-action {
+        0%, 8%, 26%, 38%, 55%, 80%, 100% { transform: scaleX(1) translate(0, 0); opacity: 0.5; }
+        12%, 22% { transform: scaleX(1) translate(1px, 0); opacity: 0.5; }
+        42%, 50% { transform: scaleX(1) translate(-1px, 0); opacity: 0.5; }
+        30%, 36% { transform: scaleX(1) translate(0.5px, 0); opacity: 0.5; }
+        60% { transform: scaleX(0.95) translate(0, 0); opacity: 0.45; }
+        65% { transform: scaleX(0.9) translate(0, 0); opacity: 0.4; }
+        72% { transform: scaleX(1.05) translate(0, 0); opacity: 0.55; }
+        76% { transform: scaleX(1) translate(0, 0); opacity: 0.5; }
+      }
+
+      @keyframes eye-track {
+        0%, 10%, 25%, 38%, 52%, 58%, 80%, 100% { transform: translate(0px, 0px); }
+        12%, 22% { transform: translate(3px, 0px); } /* Look Right */
+        42%, 50% { transform: translate(-3px, 0px); } /* Look Left */
+        60%, 75% { transform: translate(0px, -1px); } /* Look slightly up during yawn */
+      }
+
+      @keyframes eye-blink {
+        0%, 3%, 7%, 18%, 22%, 43%, 47%, 56%, 83%, 87%, 100% { transform: scaleY(1); }
+        5%, 20%, 45%, 85% { transform: scaleY(0.1); } /* Quick Blinks */
+        /* Yawn Closed Eyes */
+        60% { transform: scaleY(1); }
+        62%, 72% { transform: scaleY(0.1); } /* Eyes completely shut */
+        75% { transform: scaleY(1); }
+      }
+
+      @keyframes arm-l-idle {
+        0%, 28% { transform: translate(0, 0) rotate(0deg); }
+        
+        /* Occasional Scratching Sequence (Left Arm) */
+        30% { transform: translate(1px, -3px) rotate(15deg); }
+        31% { transform: translate(1.5px, -4px) rotate(35deg); } /* Up */
+        32% { transform: translate(0.5px, -2.5px) rotate(0deg); } /* Down */
+        33% { transform: translate(1.5px, -4px) rotate(35deg); }
+        34% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        35% { transform: translate(1.5px, -4px) rotate(35deg); }
+        36% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        
+        38%, 58% { transform: translate(0, 0) rotate(0deg); }
+        
+        /* Yawn Stretch */
+        62% { transform: translate(-1px, -2px) rotate(45deg); }
+        65% { transform: translate(-2px, -3px) rotate(80deg); } /* Full outward stretch */
+        72% { transform: translate(0px, 1px) rotate(-15deg); } /* Relax down */
+        76%, 100% { transform: translate(0, 0) rotate(0deg); }
+      }
+
+      @keyframes arm-r-idle {
+        0%, 58% { transform: translate(0, 0) rotate(0deg); }
+        /* Yawn Stretch */
+        62% { transform: translate(1px, -2px) rotate(-45deg); }
+        65% { transform: translate(2px, -3px) rotate(-80deg); } /* Full outward stretch */
+        72% { transform: translate(0px, 1px) rotate(15deg); } /* Relax down */
+        76%, 100% { transform: translate(0, 0) rotate(0deg); }
+      }
+
+      @keyframes yawn-mouth-anim {
+        0%, 58%, 76%, 100% { opacity: 0; transform: scale(0.1); }
+        60% { opacity: 1; transform: scale(0.5, 0.2); }
+        65% { opacity: 1; transform: scale(1.1, 1.4); } /* Wide Open */
+        72% { opacity: 1; transform: scale(0.6, 0.4); } /* Shrinking */
+        75% { opacity: 0; transform: scale(0.1); }
+      }
+
+      @keyframes tear-fall {
+        0%, 64%, 80%, 100% { opacity: 0; transform: translateY(0); }
+        66% { opacity: 1; transform: translateY(0); } /* Appears at corner of eye */
+        72% { opacity: 1; transform: translateY(2.5px); } /* Slides down cheek */
+        75% { opacity: 0; transform: translateY(3px); } /* Fades out */
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+  <!-- Static Character Legs (extended up to stay connected during yawn stretch) -->
+  <g id="legs" fill="#DE886D">
+    <rect id="outer-left-leg" x="3" y="12" width="1" height="3"/>
+    <rect id="inner-left-leg" x="5" y="12" width="1" height="3"/>
+    <rect id="inner-right-leg" x="9" y="12" width="1" height="3"/>
+    <rect id="outer-right-leg" x="11" y="12" width="1" height="3"/>
+  </g>
+
+  <!-- Animated Upper Body (Combines occasional actions + continuous breathing) -->
+  <g class="action-body">
+    <g class="breathe-anim">
+      
+      <!-- Torso -->
+      <rect id="torso" x="2" y="6" width="11" height="7" fill="#DE886D"/>
+      
+      <!-- Arms -->
+      <g class="arm-l">
+        <rect id="left-arm" x="0" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+      <g class="arm-r">
+        <rect id="right-arm" x="13" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+
+      <!-- Yawning Mouth (Hidden usually) -->
+      <rect class="yawn-mouth" x="6" y="10" width="3" height="2" fill="#000000"/>
+
+      <!-- Eyes Group -->
+      <g class="eyes-look" fill="#000000">
+        <g class="eyes-blink">
+          <rect id="left-eye" x="4" y="8" width="1" height="2"/>
+          <rect id="right-eye" x="10" y="8" width="1" height="2"/>
+        </g>
+      </g>
+
+      <!-- Yawn Tear Drop (A tiny detail for the big stretch) -->
+      <rect class="yawn-tear" x="3.5" y="10" width="1" height="1" fill="#40C4FF"/>
+      
+    </g>
+  </g>
+</svg>

package/assets/clawd/clawd-idle-look.svg

@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* 10-Second Idle Loop — Looking Around + Scratching (no yawn) */
+      .action-body {
+        transform-origin: 7.5px 13px;
+        animation: action-body 10s infinite ease-in-out;
+      }
+
+      .breathe-anim {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-action 10s infinite ease-in-out;
+      }
+
+      .arm-l {
+        transform-origin: 1px 10px;
+        animation: arm-l-idle 10s infinite ease-in-out;
+      }
+
+      .eyes-look {
+        animation: eye-track 10s infinite ease-in-out;
+      }
+
+      .eyes-blink {
+        transform-origin: 7.5px 9px;
+        animation: eye-blink 10s infinite linear;
+      }
+
+      /* --- Keyframes --- */
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes action-body {
+        0%, 8%, 25%, 30%, 40%, 45%, 60%, 100% { transform: scale(1,1) translate(0,0); }
+        /* Look Right */
+        12%, 22% { transform: scale(1,1) translate(1px, 0); }
+        /* Look Left */
+        48%, 57% { transform: scale(1,1) translate(-1px, 0); }
+        /* Scratch Lean */
+        33%, 38% { transform: scale(1,1) translate(0.5px, 0); }
+      }
+
+      @keyframes shadow-action {
+        0%, 8%, 25%, 30%, 40%, 45%, 60%, 100% { transform: scaleX(1) translate(0,0); opacity: 0.5; }
+        12%, 22% { transform: scaleX(1) translate(1px, 0); opacity: 0.5; }
+        48%, 57% { transform: scaleX(1) translate(-1px, 0); opacity: 0.5; }
+        33%, 38% { transform: scaleX(1) translate(0.5px, 0); opacity: 0.5; }
+      }
+
+      @keyframes eye-track {
+        0%, 10%, 25%, 43%, 60%, 100% { transform: translate(0, 0); }
+        12%, 22% { transform: translate(3px, 0); }  /* Look Right */
+        48%, 57% { transform: translate(-3px, 0); }  /* Look Left */
+      }
+
+      @keyframes eye-blink {
+        0%, 3%, 7%, 18%, 22%, 47%, 51%, 78%, 82%, 100% { transform: scaleY(1); }
+        5%, 20%, 49%, 80% { transform: scaleY(0.1); }
+      }
+
+      @keyframes arm-l-idle {
+        0%, 30% { transform: translate(0,0) rotate(0deg); }
+        /* Scratching Sequence */
+        33% { transform: translate(1px, -3px) rotate(15deg); }
+        34% { transform: translate(1.5px, -4px) rotate(35deg); }
+        35% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        36% { transform: translate(1.5px, -4px) rotate(35deg); }
+        37% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        38% { transform: translate(1.5px, -4px) rotate(35deg); }
+        39% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        42%, 100% { transform: translate(0,0) rotate(0deg); }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+  <!-- Static Legs -->
+  <g id="legs" fill="#DE886D">
+    <rect x="3" y="12" width="1" height="3"/>
+    <rect x="5" y="12" width="1" height="3"/>
+    <rect x="9" y="12" width="1" height="3"/>
+    <rect x="11" y="12" width="1" height="3"/>
+  </g>
+
+  <!-- Animated Upper Body -->
+  <g class="action-body">
+    <g class="breathe-anim">
+      <!-- Torso -->
+      <rect id="torso" x="2" y="6" width="11" height="7" fill="#DE886D"/>
+      <!-- Left Arm (scratches) -->
+      <g class="arm-l">
+        <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+      <!-- Right Arm (static) -->
+      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+      <!-- Eyes -->
+      <g class="eyes-look" fill="#000000">
+        <g class="eyes-blink">
+          <rect x="4" y="8" width="1" height="2"/>
+          <rect x="10" y="8" width="1" height="2"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/assets/clawd/clawd-idle-reading.svg

@@ -0,0 +1,252 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500" shape-rendering="crispEdges">
+  <defs>
+    <style>
+      /* ═══ 14s story: idle 挥手 → 抓书 + 戴眼镜 → 读 (眼镜下滑+推回) → 书+眼镜同步退场
+         在 clawd-idle-reading.svg 基础上加:
+         1. 圆框眼镜 (跟书同步 fade in/out + 读书慢下滑 + 推回过冲)
+         2. 双手 L 阴影 (clip 到 torso, 跟手 transform 同步, opacity 窗口对齐读书阶段)
+         3. z-order 重排: 手阴影 → 眼睛 → 眼镜 → 书 → 手
+         所有 wrapper 合并成单一 breathe 以方便理解 (原文件 3 个 breathe 效果等价) */
+
+      /* ── Independent loops ── */
+
+      .breathe {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      .blink {
+        transform-origin: 7.5px 9px;
+        animation: blink 5s infinite;
+      }
+      @keyframes blink {
+        0%, 6%, 100% { transform: scaleY(1); }
+        3% { transform: scaleY(0.1); }
+      }
+
+      .shadow {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-breathe 3.2s infinite ease-in-out;
+      }
+      @keyframes shadow-breathe {
+        0%, 100% { transform: scaleX(1); opacity: 0.5; }
+        50% { transform: scaleX(1.03); opacity: 0.47; }
+      }
+
+      /* ── Main 14s story ── */
+
+      .body-nod {
+        animation: body-nod 14s infinite ease-in-out;
+      }
+      @keyframes body-nod {
+        0%, 36%, 44%, 54%, 62%, 100% { transform: translateY(0); }
+        40% { transform: translateY(0.4px); }
+        58% { transform: translateY(0.4px); }
+      }
+
+      .arm-l {
+        transform-origin: 2px 10px;
+        animation: arm-l-anim 14s infinite ease-in-out;
+      }
+      @keyframes arm-l-anim {
+        0%        { transform: translate(0, 0) rotate(0deg); }
+        2.5%      { transform: translate(-0.5px, 0) rotate(25deg); }
+        5%        { transform: translate(0.3px, 0) rotate(-20deg); }
+        7.5%      { transform: translate(-0.5px, 0) rotate(22deg); }
+        10%       { transform: translate(0, 0) rotate(0deg); }
+        18%       { transform: translate(-1px, -1px) rotate(15deg); }
+        26%       { transform: translate(2px, 0) rotate(-5deg); }
+        76%       { transform: translate(2px, 0) rotate(-5deg); }
+        84%       { transform: translate(1px, 2px) rotate(0deg); }
+        92%       { transform: translate(0, 0) rotate(0deg); }
+        100%      { transform: translate(0, 0) rotate(0deg); }
+      }
+
+      .arm-r {
+        animation: arm-r-anim 14s infinite ease-in-out;
+      }
+      @keyframes arm-r-anim {
+        0%, 22%   { transform: translate(0, 0); }
+        28%, 76%  { transform: translate(-1px, 0); }
+        84%, 100% { transform: translate(0, 0); }
+      }
+
+      .book {
+        opacity: 0;
+        transform-origin: 7px 11.5px;
+        animation: book-anim 14s infinite ease-in-out;
+      }
+      @keyframes book-anim {
+        0%, 12%   { opacity: 0; transform: translate(-5px, -2px) scaleX(0.5); }
+        18%       { opacity: 1; transform: translate(-5px, -2px) scaleX(0.5); }
+        26%       { opacity: 1; transform: translate(0, 0) scaleX(1); }
+        76%       { opacity: 1; transform: translate(0, 0) scaleX(1); }
+        84%       { opacity: 0; transform: translate(0, 4px) scaleX(0.8); }
+        100%      { opacity: 0; transform: translate(0, 4px) scaleX(0.8); }
+      }
+
+      .eyes-read {
+        animation: eyes-read 14s infinite ease-in-out;
+      }
+      @keyframes eyes-read {
+        0%, 22%   { transform: translate(0, 0); }
+        30%       { transform: translate(0, 0.5px); }
+        46%       { transform: translate(-0.3px, 0.5px); }
+        60%       { transform: translate(0.3px, 0.5px); }
+        70%       { transform: translate(0, 0.5px); }
+        80%, 100% { transform: translate(0, 0); }
+      }
+
+      /* ── NEW: 圆框眼镜
+         - 0-12% 不可见 (idle 阶段, 还没戴)
+         - 12-18% fade in + 从额头位置 0.5px 上方滑到鼻梁 (跟书出场同步)
+         - 18-72% 戴好读书, 慢慢下滑 0.3px (读累了往鼻头下溜)
+         - 72-78% 推回 -0.1px 过冲 (顺手把眼镜推上去, 配合书要滑下的节点)
+         - 78-84% 稳住到 0
+         - 84-92% fade out + 滑回额头位置 (跟书退场同步) */
+      .glasses {
+        animation: glasses-anim 14s infinite ease-in-out;
+      }
+      @keyframes glasses-anim {
+        0%, 12%   { opacity: 0; transform: translateY(-0.5px); }
+        18%       { opacity: 1; transform: translateY(0); }
+        30%       { opacity: 1; transform: translateY(0); }
+        72%       { opacity: 1; transform: translateY(0.3px); }
+        78%       { opacity: 1; transform: translateY(-0.1px); }
+        84%       { opacity: 1; transform: translateY(0); }
+        92%       { opacity: 0; transform: translateY(-0.5px); }
+        100%      { opacity: 0; transform: translateY(-0.5px); }
+      }
+
+      /* ── NEW: 手阴影 opacity 窗口 (避免 idle 大挥时阴影闪烁)
+         - 左手 22% fade in (手快抓到书时), 84% fade out (随书下滑时)
+         - 右手 26% fade in (右手 nudge 进 torso 前), 84% fade out */
+      .shadow-l-fade {
+        animation: shadow-l-fade 14s infinite ease-in-out;
+      }
+      @keyframes shadow-l-fade {
+        0%, 20%   { opacity: 0; }
+        26%, 78%  { opacity: 1; }
+        84%, 100% { opacity: 0; }
+      }
+      .shadow-r-fade {
+        animation: shadow-r-fade 14s infinite ease-in-out;
+      }
+      @keyframes shadow-r-fade {
+        0%, 24%   { opacity: 0; }
+        30%, 78%  { opacity: 1; }
+        84%, 100% { opacity: 0; }
+      }
+
+      /* ── Thought particles ── */
+      .reading-fx {
+        animation: reading-fx-vis 14s infinite;
+      }
+      @keyframes reading-fx-vis {
+        0%, 27%   { opacity: 0; }
+        32%, 75%  { opacity: 1; }
+        78%, 100% { opacity: 0; }
+      }
+
+      .thought-bit {
+        opacity: 0;
+        animation: float-thought 2.5s infinite linear;
+      }
+      .t1 { animation-delay: 0s; }
+      .t2 { animation-delay: -0.7s; }
+      .t3 { animation-delay: -1.4s; }
+      .t4 { animation-delay: -2.1s; }
+
+      @keyframes float-thought {
+        0%   { transform: translateY(0); opacity: 0; }
+        10%  { opacity: 0.6; }
+        100% { transform: translateY(-12px); opacity: 0; }
+      }
+    </style>
+
+    <clipPath id="inside-torso">
+      <rect x="2" y="6" width="11" height="7"/>
+    </clipPath>
+  </defs>
+
+  <!-- Ground shadow -->
+  <rect class="shadow" x="3" y="15" width="9" height="1" fill="#000"/>
+
+  <!-- Thought particles -->
+  <g class="reading-fx">
+    <rect class="thought-bit t1" x="2"  y="4" width="2" height="2" fill="#40C4FF"/>
+    <rect class="thought-bit t2" x="8"  y="3" width="1.5" height="1.5" fill="#B388FF"/>
+    <rect class="thought-bit t3" x="12" y="5" width="2" height="2" fill="#40C4FF"/>
+    <rect class="thought-bit t4" x="5"  y="3" width="1.5" height="1.5" fill="#69F0AE"/>
+  </g>
+
+  <g class="body-nod">
+    <g class="breathe">
+
+      <!-- 腿 + torso -->
+      <g fill="#DE886D">
+        <rect x="3" y="11" width="1" height="4"/>
+        <rect x="5" y="11" width="1" height="4"/>
+        <rect x="9" y="11" width="1" height="4"/>
+        <rect x="11" y="11" width="1" height="4"/>
+      </g>
+      <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+
+      <!-- 手阴影 (clip 到 torso, opacity 窗口 + 跟手 transform 同步) -->
+      <g clip-path="url(#inside-torso)" fill="#A85A3A">
+        <g class="shadow-l-fade">
+          <g class="arm-l">
+            <rect x="0" y="9" width="2.4" height="2.4"/>
+          </g>
+        </g>
+        <g class="shadow-r-fade">
+          <g class="arm-r">
+            <rect x="12.6" y="9" width="2.4" height="2.4"/>
+          </g>
+        </g>
+      </g>
+
+      <!-- 眼睛 (跟 eyes-read 漂移 + blink 眨眼) -->
+      <g class="eyes-read">
+        <g class="blink" fill="#000">
+          <rect x="4" y="8" width="1" height="2"/>
+          <rect x="10" y="8" width="1" height="2"/>
+        </g>
+      </g>
+
+      <!-- 圆框眼镜 (不嵌 eyes-read/blink, 镜片固定眼球转) -->
+      <g class="glasses" shape-rendering="auto">
+        <g fill="none" stroke="#6B2522" stroke-width="0.56" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="4.415" cy="9" r="2.03"/>
+          <circle cx="10.585" cy="9" r="2.03"/>
+          <path d="M6.445 8.85 C7.036 8.35 7.964 8.35 8.555 8.85"/>
+          <path d="M2.426 8.45 C2.127 8.37 1.893 8.35 1.716 8.35"/>
+          <path d="M12.574 8.45 C12.873 8.37 13.107 8.35 13.284 8.35"/>
+        </g>
+      </g>
+
+      <!-- 书 (在脸之上, 手之下) -->
+      <g class="book">
+        <rect x="3" y="10" width="8" height="4" fill="#4A90D9"/>
+        <rect x="7" y="10" width="1" height="4" fill="#2E6AB0"/>
+        <rect x="3.9" y="9.7" width="6.5" height="0.3" fill="#FFFDE7"/>
+        <rect x="10.5" y="10.5" width="0.5" height="3" fill="#FFFDE7"/>
+        <rect x="4.5" y="10.5" width="5" height="1.5" fill="#E3F2FD" opacity="0.5"/>
+        <rect x="5" y="10.8" width="3" height="0.5" fill="#2E6AB0"/>
+        <rect x="5.5" y="11.5" width="2" height="0.3" fill="#2E6AB0" opacity="0.6"/>
+        <rect x="6" y="12.5" width="2" height="0.5" fill="#E3F2FD" opacity="0.4"/>
+      </g>
+
+      <!-- 双手 (最上层) -->
+      <g fill="#DE886D">
+        <g class="arm-l"><rect x="0" y="9" width="2" height="2"/></g>
+        <g class="arm-r"><rect x="13" y="9" width="2" height="2"/></g>
+      </g>
+
+    </g>
+  </g>
+</svg>