@mumulinya167/ccm-pet-assets 2.0.0 → 2.0.2

package/assets/cloudling/cloudling-mini-crabwalk.svg

@@ -1,335 +1,335 @@
-<svg id="cloudling" xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 36 36" preserveAspectRatio="xMidYMid meet">
-<style><![CDATA[
-.runtime {
-  position: relative;
-  overflow: hidden;
-  border-radius: 14px;
-  background: #0f0f14;
-  box-shadow: 0 18px 60px rgba(0,0,0,.4);
-}
-.runtime svg { display: block; }
-.runtime {
-  height: 640px;
-}
-.edge-line {
-  position: absolute;
-  top: 0;
-  right: 26px;
-  width: 1px;
-  height: 100%;
-  background: linear-gradient(to bottom, transparent, rgba(122,157,255,.50), transparent);
-}
-.runtime-shell {
-  position: absolute;
-  left: 10px;
-  top: 135px;
-  width: 170px;
-  height: 170px;
-  animation: runtime-walk var(--runtime-duration, 4.6s) linear infinite;
-}
-.runtime-shell svg {
-  width: 170px;
-  height: 170px;
-}
-@keyframes runtime-walk {
-  0% { transform: translateX(-6px); }
-  100% { transform: translateX(120px); }
-}
-.runtime.paused .runtime-shell { animation-play-state: paused; }
-.edge-rim-tight { stroke-opacity: .9; }
-.edge-rim-soft { stroke-opacity: .75; }
-.edge-contact { stroke-opacity: .9; }
-@media (prefers-color-scheme: light) {
-.runtime {
-  background: #fff;
-  box-shadow: 0 18px 60px -20px rgba(57,65,255,.18), 0 4px 12px rgba(0,0,0,.04);
-}
-.edge-rim-tight { stroke-opacity: .95; }
-.edge-rim-soft { stroke-opacity: .85; }
-.edge-contact { stroke-opacity: .95; }
-.cloud-drop-shadow { flood-opacity: .13; }
-#puff-a *, #puff-b *, #puff-c *, #rt-puff-a *, #rt-puff-b *, #rt-puff-c * {
-  stroke: #6f8dff;
-  stroke-width: .14px;
-  stroke-opacity: .44;
-  vector-effect: non-scaling-stroke;
-}
-#puff-a ellipse, #puff-b ellipse, #puff-c ellipse, #rt-puff-a ellipse, #rt-puff-b ellipse, #rt-puff-c ellipse {
-  fill: #e8eeff;
-}
-#puff-a circle, #puff-b circle, #puff-c circle, #rt-puff-a circle, #rt-puff-b circle, #rt-puff-c circle {
-  fill: #f6f8ff;
-}
-#puff-a, #puff-b, #puff-c, #rt-puff-a, #rt-puff-b, #rt-puff-c {
-  filter: drop-shadow(0 0 .22px rgba(57,65,255,.46));
-}
-.food-cloud-shadow { flood-opacity: .28; flood-color: #5060FF; }
-.food-cloud > path {
-  stroke: #5870E8 !important;
-  stroke-width: 1.2 !important;
-  stroke-opacity: .9 !important;
-  vector-effect: non-scaling-stroke !important;
-}
-}
-]]></style>
-      <defs>
-        <linearGradient id="body-grad" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
-          <stop offset="0" stop-color="#93c5fd"/>
-          <stop offset="0.5" stop-color="#60a5fa"/>
-          <stop offset="1" stop-color="#3b82f6"/>
-        </linearGradient>
-        <linearGradient id="eye-grad" x1="12" y1="3" x2="12" y2="21" gradientUnits="userSpaceOnUse">
-          <stop offset="0" stop-color="#B1A7FF"/>
-          <stop offset="0.5" stop-color="#7A9DFF"/>
-          <stop offset="1" stop-color="#3941FF"/>
-        </linearGradient>
-        <radialGradient id="hi-grad" cx="0.45" cy="0.25" r="0.55">
-          <stop offset="0" stop-color="#93c5fd" stop-opacity="0.9"/>
-          <stop offset="1" stop-color="#93c5fd" stop-opacity="0"/>
-        </radialGradient>
-        <filter id="drop" x="-40%" y="-40%" width="180%" height="180%">
-          <feDropShadow class="cloud-drop-shadow" dx="0" dy="0.6" stdDeviation="0.8" flood-color="#3941FF" flood-opacity="0.35"/>
-        </filter>
-        <filter id="edge-blur" x="-40%" y="-40%" width="180%" height="180%">
-          <feGaussianBlur stdDeviation="0.16"/>
-        </filter>
-        <filter id="shadow-blur" x="-80%" y="-120%" width="260%" height="320%">
-          <feGaussianBlur stdDeviation="0.55"/>
-        </filter>
-        <filter id="puff-blur" x="-80%" y="-100%" width="260%" height="280%">
-          <feGaussianBlur stdDeviation="0.08"/>
-        </filter>
-        <clipPath id="cloud-clip">
-          <path id="clip-shape"/>
-        </clipPath>
-      </defs>
-
-      <g id="asset-layer">
-        <ellipse id="ground-shadow" cx="12" cy="20.45" rx="7.6" ry="1.05" fill="#3941FF" opacity=".085" filter="url(#shadow-blur)"/>
-        <g id="puff-layer" filter="url(#puff-blur)">
-          <g id="puff-a" opacity="0">
-            <ellipse cx="5.55" cy="18.84" rx="1.22" ry=".56" fill="url(#body-grad)" opacity=".92"/>
-            <circle cx="4.68" cy="18.60" r=".46" fill="#ffffff" opacity=".86"/>
-            <circle cx="6.30" cy="18.54" r=".52" fill="#eef2ff" opacity=".84"/>
-            <ellipse cx="5.48" cy="18.28" rx=".62" ry=".35" fill="#ffffff" opacity=".88"/>
-          </g>
-          <g id="puff-b" opacity="0">
-            <ellipse cx="3.85" cy="19.28" rx=".86" ry=".39" fill="url(#body-grad)" opacity=".78"/>
-            <circle cx="3.22" cy="19.08" r=".31" fill="#ffffff" opacity=".74"/>
-            <circle cx="4.43" cy="19.06" r=".34" fill="#eef2ff" opacity=".72"/>
-          </g>
-          <g id="puff-c" opacity="0">
-            <ellipse cx="2.45" cy="19.58" rx=".58" ry=".26" fill="url(#body-grad)" opacity=".62"/>
-            <circle cx="2.05" cy="19.44" r=".20" fill="#ffffff" opacity=".62"/>
-            <circle cx="2.83" cy="19.42" r=".22" fill="#eef2ff" opacity=".58"/>
-          </g>
-        </g>
-
-        <g id="body-layer">
-          <g id="edge-system">
-            <path id="edge-contact" class="edge-contact" fill="none" stroke="#7d8aa7" stroke-width="1.4" stroke-linejoin="round" filter="url(#edge-blur)"/>
-            <path id="edge-soft" class="edge-rim-soft" fill="none" stroke="#7A9DFF" stroke-width="1.2" stroke-linejoin="round" filter="url(#edge-blur)"/>
-            <path id="edge-tight" class="edge-rim-tight" fill="none" stroke="#aab3c6" stroke-width="0.8" stroke-linejoin="round"/>
-          </g>
-          <g filter="url(#drop)">
-            <path id="cloud-shape" fill="url(#body-grad)"/>
-            <rect x="1" y="2" width="22" height="11" fill="url(#hi-grad)" clip-path="url(#cloud-clip)"/>
-          </g>
-        </g>
-
-        <g id="eye-layer">
-          <rect id="eye-l" x="7.7" y="9.5" width="2.6" height="5" rx="1.3" ry="1.3" fill="url(#eye-grad)" stroke="#ffffff" stroke-width="0.08" stroke-opacity="0.7"/>
-          <rect id="eye-r" x="13.7" y="9.5" width="2.6" height="5" rx="1.3" ry="1.3" fill="url(#eye-grad)" stroke="#ffffff" stroke-width="0.08" stroke-opacity="0.7"/>
-        </g>
-      </g>
-
-<script type="application/ecmascript"><![CDATA[
-const CLOUD_D = "M9.064 3.344a4.578 4.578 0 012.285-.312c1 .115 1.891.54 2.673 1.275.01.01.024.017.037.021a.09.09 0 00.043 0 4.55 4.55 0 013.046.275l.047.022.116.057a4.581 4.581 0 012.188 2.399c.209.51.313 1.041.315 1.595a4.24 4.24 0 01-.134 1.223.123.123 0 00.03.115c.594.607.988 1.33 1.183 2.17.289 1.425-.007 2.71-.887 3.854l-.136.166a4.548 4.548 0 01-2.201 1.388.123.123 0 00-.081.076c-.191.551-.383 1.023-.74 1.494-.9 1.187-2.222 1.846-3.711 1.838-1.187-.006-2.239-.44-3.157-1.302a.107.107 0 00-.105-.024c-.388.125-.78.143-1.204.138a4.441 4.441 0 01-1.945-.466 4.544 4.544 0 01-1.61-1.335c-.152-.202-.303-.392-.414-.617a5.81 5.81 0 01-.37-.961 4.582 4.582 0 01-.014-2.298.124.124 0 00.006-.056.085.085 0 00-.027-.048 4.467 4.467 0 01-1.034-1.651 3.896 3.896 0 01-.251-1.192 5.189 5.189 0 01.141-1.6c.337-1.112.982-1.985 1.933-2.618.212-.141.413-.251.601-.33.215-.089.43-.164.646-.227a.098.098 0 00.065-.066 4.51 4.51 0 01.829-1.615 4.535 4.535 0 011.837-1.388z";
-const CENTER = { x: 12, y: 12 };
-const EYE_BASE = {
-  l: { x: 7.7, y: 9.5, w: 2.6, h: 5, rx: 1.3 },
-  r: { x: 13.7, y: 9.5, w: 2.6, h: 5, rx: 1.3 }
-};
-const P = {
-  period: 1.16,
-  scoot: 2.1,
-  hop: 0.85,
-  squash: 0.105,
-  roll: 17,
-  round: 0.28,
-  breath: 0.018,
-  eyeStable: 0.86,
-  gaze: 0.58,
-  eyeWiden: 0.19,
-  puffStrength: 0.90,
-  puffs: true
-};
-
-const els = {
-  cloud: document.getElementById('cloud-shape'),
-  clip: document.getElementById('clip-shape'),
-  edgeContact: document.getElementById('edge-contact'),
-  edgeSoft: document.getElementById('edge-soft'),
-  edgeTight: document.getElementById('edge-tight'),
-  body: document.getElementById('body-layer'),
-  eyes: document.getElementById('eye-layer'),
-  eyeL: document.getElementById('eye-l'),
-  eyeR: document.getElementById('eye-r'),
-  shadow: document.getElementById('ground-shadow'),
-  puffA: document.getElementById('puff-a'),
-  puffB: document.getElementById('puff-b'),
-  puffC: document.getElementById('puff-c')
-};
-
-function samplePath(d, n) {
-  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-  path.setAttribute('d', d);
-  const len = path.getTotalLength();
-  return Array.from({ length: n }, (_, i) => {
-    const p = path.getPointAtLength(i / n * len);
-    return { x: p.x, y: p.y };
-  });
-}
-
-function pointsToSmoothPath(pts) {
-  const n = pts.length;
-  let d = `M ${pts[0].x.toFixed(3)} ${pts[0].y.toFixed(3)}`;
-  for (let i = 0; i < n; i++) {
-    const p0 = pts[(i - 1 + n) % n];
-    const p1 = pts[i];
-    const p2 = pts[(i + 1) % n];
-    const p3 = pts[(i + 2) % n];
-    const c1x = p1.x + (p2.x - p0.x) / 6;
-    const c1y = p1.y + (p2.y - p0.y) / 6;
-    const c2x = p2.x - (p3.x - p1.x) / 6;
-    const c2y = p2.y - (p3.y - p1.y) / 6;
-    d += ` C ${c1x.toFixed(3)} ${c1y.toFixed(3)}, ${c2x.toFixed(3)} ${c2y.toFixed(3)}, ${p2.x.toFixed(3)} ${p2.y.toFixed(3)}`;
-  }
-  return d + ' Z';
-}
-
-function morphCloud(t) {
-  const r = 7.1;
-  const pts = basePoints.map(p => {
-    const dx = p.x - CENTER.x;
-    const dy = p.y - CENTER.y;
-    const a = Math.atan2(dy, dx);
-    const tx = CENTER.x + Math.cos(a) * r;
-    const ty = CENTER.y + Math.sin(a) * r;
-    return { x: p.x + (tx - p.x) * t, y: p.y + (ty - p.y) * t };
-  });
-  return pointsToSmoothPath(pts);
-}
-
-function clamp01(v) { return Math.max(0, Math.min(1, v)); }
-function smoothstep(a, b, x) {
-  const t = clamp01((x - a) / (b - a));
-  return t * t * (3 - 2 * t);
-}
-function pulse(q, center, width) {
-  const d = Math.abs((((q - center + 0.5) % 1) + 1) % 1 - 0.5);
-  return Math.max(0, 1 - d / width) ** 2;
-}
-
-const basePoints = samplePath(CLOUD_D, 72);
-const startT = performance.now();
-
-function frameFor(now) {
-  const t = (now - startT) / 1000;
-  const q = (t / P.period) % 1;
-  const wave = Math.sin(Math.PI * 2 * q);
-  const wave2 = Math.sin(Math.PI * 2 * (q - .17));
-  const contact = Math.max(pulse(q, .12, .18), pulse(q, .72, .16));
-  const launch = smoothstep(.14, .34, q) * (1 - smoothstep(.54, .78, q));
-  const breath = Math.sin(Math.PI * 2 * t / 4.4) * P.breath;
-  const tx = P.scoot * wave2;
-  const ty = -P.hop * Math.max(0, Math.sin(Math.PI * q)) + contact * .46;
-  const sx = 1 + contact * P.squash - launch * .025 + breath;
-  const sy = 1 - contact * P.squash * 1.12 + launch * .035 - breath * .55;
-  const roll = (wave * .72 + pulse(q, .31, .22) * .35 - pulse(q, .70, .18) * .25) * P.roll;
-  const round = P.round * (launch * .75 + contact * .25);
-  const eyeRot = roll * (1 - P.eyeStable);
-  const gaze = P.gaze + launch * .16 - contact * .10;
-  const blink = Math.max(pulse(q, .47, .055), pulse(q, .93, .035) * .25);
-  const shadowScale = 1 + contact * .20 - launch * .16;
-  const eyeWide = 1 + P.eyeWiden * clamp01(contact * .86 + launch * .20);
-  const puffSeed = P.puffs ? P.puffStrength : 0;
-  const puffA = puffSeed * pulse(q, .15, .20);
-  const puffB = puffSeed * pulse(q, .28, .22);
-  const puffC = puffSeed * pulse(q, .43, .24);
-  return { q, tx, ty, sx, sy, roll, round, eyeRot, gaze, blink, shadowScale, puffA, puffB, puffC, eyeWide };
-}
-
-function applyFrame(target, f) {
-  const d = morphCloud(f.round);
-  target.cloud.setAttribute('d', d);
-  target.clip.setAttribute('d', d);
-  target.edgeContact.setAttribute('d', d);
-  target.edgeSoft.setAttribute('d', d);
-  target.edgeTight.setAttribute('d', d);
-  target.edgeContact.setAttribute('transform', 'translate(0 0.18)');
-
-  target.body.setAttribute(
-    'transform',
-    `translate(${(12 + f.tx).toFixed(3)} ${(12 + f.ty).toFixed(3)}) rotate(${f.roll.toFixed(3)}) scale(${f.sx.toFixed(4)} ${f.sy.toFixed(4)}) translate(-12 -12)`
-  );
-
-  const eyeSx = 1 + (f.sx - 1) * .24;
-  const eyeSy = 1 + (f.sy - 1) * .20;
-  target.eyes.setAttribute(
-    'transform',
-    `translate(${(12 + f.tx).toFixed(3)} ${(12 + f.ty).toFixed(3)}) rotate(${f.eyeRot.toFixed(3)}) scale(${eyeSx.toFixed(4)} ${eyeSy.toFixed(4)}) translate(-12 -12) translate(${f.gaze.toFixed(3)} 0)`
-  );
-
-  applyBlink(target.eyeL, EYE_BASE.l, f.blink, f.eyeWide);
-  applyBlink(target.eyeR, EYE_BASE.r, f.blink, f.eyeWide);
-
-  target.shadow.setAttribute('transform', `translate(${(f.tx * .28).toFixed(3)} 0) scale(${f.shadowScale.toFixed(3)} 1)`);
-  target.shadow.setAttribute('opacity', (.07 + f.puffA * .045).toFixed(3));
-
-  setTrailPuff(target.puffA, f.puffA, -0.95, -0.16, 1.00);
-  setTrailPuff(target.puffB, f.puffB, -1.55, 0.06, 0.82);
-  setTrailPuff(target.puffC, f.puffC, -2.05, 0.16, 0.66);
-}
-
-function applyBlink(rect, base, amount, widen = 1) {
-  const scale = 1 - amount * .88;
-  const cx = base.x + base.w / 2;
-  const w = base.w * widen * (1 + amount * .06);
-  const h = Math.max(base.h * scale, .24);
-  const y = base.y + (base.h - h) / 2;
-  const rx = Math.min(w / 2, h / 2, 1.35);
-  rect.setAttribute('width', w.toFixed(3));
-  rect.setAttribute('x', (cx - w / 2).toFixed(3));
-  rect.setAttribute('height', h.toFixed(3));
-  rect.setAttribute('y', y.toFixed(3));
-  rect.setAttribute('rx', rx.toFixed(3));
-  rect.setAttribute('ry', rx.toFixed(3));
-}
-
-function setPuff(el, opacity, dx, dy, scale) {
-  el.setAttribute('opacity', opacity.toFixed(3));
-  el.setAttribute('transform', `translate(${dx.toFixed(3)} ${dy.toFixed(3)}) scale(${scale.toFixed(3)})`);
-}
-
-function setTrailPuff(el, amount, driftX, driftY, baseScale) {
-  const a = clamp01(amount);
-  const isLight = window.matchMedia('(prefers-color-scheme: light)').matches;
-  const fade = isLight ? a : Math.sin(a * Math.PI);
-  const dx = driftX * a;
-  const dy = driftY * a;
-  const scale = baseScale * (0.82 + a * 0.32);
-  const opacityBase = isLight ? 0.86 : 0.62;
-  el.setAttribute('opacity', Math.min(fade * opacityBase, 0.90).toFixed(3));
-  el.setAttribute('transform', `translate(${dx.toFixed(3)} ${dy.toFixed(3)}) scale(${scale.toFixed(3)})`);
-}
-
-function tick(now) {
-  const f = frameFor(now);
-  applyFrame(els, f);
-  requestAnimationFrame(tick);
-}
-
-requestAnimationFrame(tick);
-]]></script>
-</svg>
+<svg id="cloudling" xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 36 36" preserveAspectRatio="xMidYMid meet">
+<style><![CDATA[
+.runtime {
+  position: relative;
+  overflow: hidden;
+  border-radius: 14px;
+  background: #0f0f14;
+  box-shadow: 0 18px 60px rgba(0,0,0,.4);
+}
+.runtime svg { display: block; }
+.runtime {
+  height: 640px;
+}
+.edge-line {
+  position: absolute;
+  top: 0;
+  right: 26px;
+  width: 1px;
+  height: 100%;
+  background: linear-gradient(to bottom, transparent, rgba(122,157,255,.50), transparent);
+}
+.runtime-shell {
+  position: absolute;
+  left: 10px;
+  top: 135px;
+  width: 170px;
+  height: 170px;
+  animation: runtime-walk var(--runtime-duration, 4.6s) linear infinite;
+}
+.runtime-shell svg {
+  width: 170px;
+  height: 170px;
+}
+@keyframes runtime-walk {
+  0% { transform: translateX(-6px); }
+  100% { transform: translateX(120px); }
+}
+.runtime.paused .runtime-shell { animation-play-state: paused; }
+.edge-rim-tight { stroke-opacity: .9; }
+.edge-rim-soft { stroke-opacity: .75; }
+.edge-contact { stroke-opacity: .9; }
+@media (prefers-color-scheme: light) {
+.runtime {
+  background: #fff;
+  box-shadow: 0 18px 60px -20px rgba(57,65,255,.18), 0 4px 12px rgba(0,0,0,.04);
+}
+.edge-rim-tight { stroke-opacity: .95; }
+.edge-rim-soft { stroke-opacity: .85; }
+.edge-contact { stroke-opacity: .95; }
+.cloud-drop-shadow { flood-opacity: .13; }
+#puff-a *, #puff-b *, #puff-c *, #rt-puff-a *, #rt-puff-b *, #rt-puff-c * {
+  stroke: #6f8dff;
+  stroke-width: .14px;
+  stroke-opacity: .44;
+  vector-effect: non-scaling-stroke;
+}
+#puff-a ellipse, #puff-b ellipse, #puff-c ellipse, #rt-puff-a ellipse, #rt-puff-b ellipse, #rt-puff-c ellipse {
+  fill: #e8eeff;
+}
+#puff-a circle, #puff-b circle, #puff-c circle, #rt-puff-a circle, #rt-puff-b circle, #rt-puff-c circle {
+  fill: #f6f8ff;
+}
+#puff-a, #puff-b, #puff-c, #rt-puff-a, #rt-puff-b, #rt-puff-c {
+  filter: drop-shadow(0 0 .22px rgba(57,65,255,.46));
+}
+.food-cloud-shadow { flood-opacity: .28; flood-color: #5060FF; }
+.food-cloud > path {
+  stroke: #5870E8 !important;
+  stroke-width: 1.2 !important;
+  stroke-opacity: .9 !important;
+  vector-effect: non-scaling-stroke !important;
+}
+}
+]]></style>
+      <defs>
+        <linearGradient id="body-grad" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stop-color="#93c5fd"/>
+          <stop offset="0.5" stop-color="#60a5fa"/>
+          <stop offset="1" stop-color="#3b82f6"/>
+        </linearGradient>
+        <linearGradient id="eye-grad" x1="12" y1="3" x2="12" y2="21" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stop-color="#B1A7FF"/>
+          <stop offset="0.5" stop-color="#7A9DFF"/>
+          <stop offset="1" stop-color="#3941FF"/>
+        </linearGradient>
+        <radialGradient id="hi-grad" cx="0.45" cy="0.25" r="0.55">
+          <stop offset="0" stop-color="#93c5fd" stop-opacity="0.9"/>
+          <stop offset="1" stop-color="#93c5fd" stop-opacity="0"/>
+        </radialGradient>
+        <filter id="drop" x="-40%" y="-40%" width="180%" height="180%">
+          <feDropShadow class="cloud-drop-shadow" dx="0" dy="0.6" stdDeviation="0.8" flood-color="#3941FF" flood-opacity="0.35"/>
+        </filter>
+        <filter id="edge-blur" x="-40%" y="-40%" width="180%" height="180%">
+          <feGaussianBlur stdDeviation="0.16"/>
+        </filter>
+        <filter id="shadow-blur" x="-80%" y="-120%" width="260%" height="320%">
+          <feGaussianBlur stdDeviation="0.55"/>
+        </filter>
+        <filter id="puff-blur" x="-80%" y="-100%" width="260%" height="280%">
+          <feGaussianBlur stdDeviation="0.08"/>
+        </filter>
+        <clipPath id="cloud-clip">
+          <path id="clip-shape"/>
+        </clipPath>
+      </defs>
+
+      <g id="asset-layer">
+        <ellipse id="ground-shadow" cx="12" cy="20.45" rx="7.6" ry="1.05" fill="#3941FF" opacity=".085" filter="url(#shadow-blur)"/>
+        <g id="puff-layer" filter="url(#puff-blur)">
+          <g id="puff-a" opacity="0">
+            <ellipse cx="5.55" cy="18.84" rx="1.22" ry=".56" fill="url(#body-grad)" opacity=".92"/>
+            <circle cx="4.68" cy="18.60" r=".46" fill="#ffffff" opacity=".86"/>
+            <circle cx="6.30" cy="18.54" r=".52" fill="#eef2ff" opacity=".84"/>
+            <ellipse cx="5.48" cy="18.28" rx=".62" ry=".35" fill="#ffffff" opacity=".88"/>
+          </g>
+          <g id="puff-b" opacity="0">
+            <ellipse cx="3.85" cy="19.28" rx=".86" ry=".39" fill="url(#body-grad)" opacity=".78"/>
+            <circle cx="3.22" cy="19.08" r=".31" fill="#ffffff" opacity=".74"/>
+            <circle cx="4.43" cy="19.06" r=".34" fill="#eef2ff" opacity=".72"/>
+          </g>
+          <g id="puff-c" opacity="0">
+            <ellipse cx="2.45" cy="19.58" rx=".58" ry=".26" fill="url(#body-grad)" opacity=".62"/>
+            <circle cx="2.05" cy="19.44" r=".20" fill="#ffffff" opacity=".62"/>
+            <circle cx="2.83" cy="19.42" r=".22" fill="#eef2ff" opacity=".58"/>
+          </g>
+        </g>
+
+        <g id="body-layer">
+          <g id="edge-system">
+            <path id="edge-contact" class="edge-contact" fill="none" stroke="#7d8aa7" stroke-width="1.4" stroke-linejoin="round" filter="url(#edge-blur)"/>
+            <path id="edge-soft" class="edge-rim-soft" fill="none" stroke="#7A9DFF" stroke-width="1.2" stroke-linejoin="round" filter="url(#edge-blur)"/>
+            <path id="edge-tight" class="edge-rim-tight" fill="none" stroke="#aab3c6" stroke-width="0.8" stroke-linejoin="round"/>
+          </g>
+          <g filter="url(#drop)">
+            <path id="cloud-shape" fill="url(#body-grad)"/>
+            <rect x="1" y="2" width="22" height="11" fill="url(#hi-grad)" clip-path="url(#cloud-clip)"/>
+          </g>
+        </g>
+
+        <g id="eye-layer">
+          <rect id="eye-l" x="7.7" y="9.5" width="2.6" height="5" rx="1.3" ry="1.3" fill="url(#eye-grad)" stroke="#ffffff" stroke-width="0.08" stroke-opacity="0.7"/>
+          <rect id="eye-r" x="13.7" y="9.5" width="2.6" height="5" rx="1.3" ry="1.3" fill="url(#eye-grad)" stroke="#ffffff" stroke-width="0.08" stroke-opacity="0.7"/>
+        </g>
+      </g>
+
+<script type="application/ecmascript"><![CDATA[
+const CLOUD_D = "M9.064 3.344a4.578 4.578 0 012.285-.312c1 .115 1.891.54 2.673 1.275.01.01.024.017.037.021a.09.09 0 00.043 0 4.55 4.55 0 013.046.275l.047.022.116.057a4.581 4.581 0 012.188 2.399c.209.51.313 1.041.315 1.595a4.24 4.24 0 01-.134 1.223.123.123 0 00.03.115c.594.607.988 1.33 1.183 2.17.289 1.425-.007 2.71-.887 3.854l-.136.166a4.548 4.548 0 01-2.201 1.388.123.123 0 00-.081.076c-.191.551-.383 1.023-.74 1.494-.9 1.187-2.222 1.846-3.711 1.838-1.187-.006-2.239-.44-3.157-1.302a.107.107 0 00-.105-.024c-.388.125-.78.143-1.204.138a4.441 4.441 0 01-1.945-.466 4.544 4.544 0 01-1.61-1.335c-.152-.202-.303-.392-.414-.617a5.81 5.81 0 01-.37-.961 4.582 4.582 0 01-.014-2.298.124.124 0 00.006-.056.085.085 0 00-.027-.048 4.467 4.467 0 01-1.034-1.651 3.896 3.896 0 01-.251-1.192 5.189 5.189 0 01.141-1.6c.337-1.112.982-1.985 1.933-2.618.212-.141.413-.251.601-.33.215-.089.43-.164.646-.227a.098.098 0 00.065-.066 4.51 4.51 0 01.829-1.615 4.535 4.535 0 011.837-1.388z";
+const CENTER = { x: 12, y: 12 };
+const EYE_BASE = {
+  l: { x: 7.7, y: 9.5, w: 2.6, h: 5, rx: 1.3 },
+  r: { x: 13.7, y: 9.5, w: 2.6, h: 5, rx: 1.3 }
+};
+const P = {
+  period: 1.16,
+  scoot: 2.1,
+  hop: 0.85,
+  squash: 0.105,
+  roll: 17,
+  round: 0.28,
+  breath: 0.018,
+  eyeStable: 0.86,
+  gaze: 0.58,
+  eyeWiden: 0.19,
+  puffStrength: 0.90,
+  puffs: true
+};
+
+const els = {
+  cloud: document.getElementById('cloud-shape'),
+  clip: document.getElementById('clip-shape'),
+  edgeContact: document.getElementById('edge-contact'),
+  edgeSoft: document.getElementById('edge-soft'),
+  edgeTight: document.getElementById('edge-tight'),
+  body: document.getElementById('body-layer'),
+  eyes: document.getElementById('eye-layer'),
+  eyeL: document.getElementById('eye-l'),
+  eyeR: document.getElementById('eye-r'),
+  shadow: document.getElementById('ground-shadow'),
+  puffA: document.getElementById('puff-a'),
+  puffB: document.getElementById('puff-b'),
+  puffC: document.getElementById('puff-c')
+};
+
+function samplePath(d, n) {
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  path.setAttribute('d', d);
+  const len = path.getTotalLength();
+  return Array.from({ length: n }, (_, i) => {
+    const p = path.getPointAtLength(i / n * len);
+    return { x: p.x, y: p.y };
+  });
+}
+
+function pointsToSmoothPath(pts) {
+  const n = pts.length;
+  let d = `M ${pts[0].x.toFixed(3)} ${pts[0].y.toFixed(3)}`;
+  for (let i = 0; i < n; i++) {
+    const p0 = pts[(i - 1 + n) % n];
+    const p1 = pts[i];
+    const p2 = pts[(i + 1) % n];
+    const p3 = pts[(i + 2) % n];
+    const c1x = p1.x + (p2.x - p0.x) / 6;
+    const c1y = p1.y + (p2.y - p0.y) / 6;
+    const c2x = p2.x - (p3.x - p1.x) / 6;
+    const c2y = p2.y - (p3.y - p1.y) / 6;
+    d += ` C ${c1x.toFixed(3)} ${c1y.toFixed(3)}, ${c2x.toFixed(3)} ${c2y.toFixed(3)}, ${p2.x.toFixed(3)} ${p2.y.toFixed(3)}`;
+  }
+  return d + ' Z';
+}
+
+function morphCloud(t) {
+  const r = 7.1;
+  const pts = basePoints.map(p => {
+    const dx = p.x - CENTER.x;
+    const dy = p.y - CENTER.y;
+    const a = Math.atan2(dy, dx);
+    const tx = CENTER.x + Math.cos(a) * r;
+    const ty = CENTER.y + Math.sin(a) * r;
+    return { x: p.x + (tx - p.x) * t, y: p.y + (ty - p.y) * t };
+  });
+  return pointsToSmoothPath(pts);
+}
+
+function clamp01(v) { return Math.max(0, Math.min(1, v)); }
+function smoothstep(a, b, x) {
+  const t = clamp01((x - a) / (b - a));
+  return t * t * (3 - 2 * t);
+}
+function pulse(q, center, width) {
+  const d = Math.abs((((q - center + 0.5) % 1) + 1) % 1 - 0.5);
+  return Math.max(0, 1 - d / width) ** 2;
+}
+
+const basePoints = samplePath(CLOUD_D, 72);
+const startT = performance.now();
+
+function frameFor(now) {
+  const t = (now - startT) / 1000;
+  const q = (t / P.period) % 1;
+  const wave = Math.sin(Math.PI * 2 * q);
+  const wave2 = Math.sin(Math.PI * 2 * (q - .17));
+  const contact = Math.max(pulse(q, .12, .18), pulse(q, .72, .16));
+  const launch = smoothstep(.14, .34, q) * (1 - smoothstep(.54, .78, q));
+  const breath = Math.sin(Math.PI * 2 * t / 4.4) * P.breath;
+  const tx = P.scoot * wave2;
+  const ty = -P.hop * Math.max(0, Math.sin(Math.PI * q)) + contact * .46;
+  const sx = 1 + contact * P.squash - launch * .025 + breath;
+  const sy = 1 - contact * P.squash * 1.12 + launch * .035 - breath * .55;
+  const roll = (wave * .72 + pulse(q, .31, .22) * .35 - pulse(q, .70, .18) * .25) * P.roll;
+  const round = P.round * (launch * .75 + contact * .25);
+  const eyeRot = roll * (1 - P.eyeStable);
+  const gaze = P.gaze + launch * .16 - contact * .10;
+  const blink = Math.max(pulse(q, .47, .055), pulse(q, .93, .035) * .25);
+  const shadowScale = 1 + contact * .20 - launch * .16;
+  const eyeWide = 1 + P.eyeWiden * clamp01(contact * .86 + launch * .20);
+  const puffSeed = P.puffs ? P.puffStrength : 0;
+  const puffA = puffSeed * pulse(q, .15, .20);
+  const puffB = puffSeed * pulse(q, .28, .22);
+  const puffC = puffSeed * pulse(q, .43, .24);
+  return { q, tx, ty, sx, sy, roll, round, eyeRot, gaze, blink, shadowScale, puffA, puffB, puffC, eyeWide };
+}
+
+function applyFrame(target, f) {
+  const d = morphCloud(f.round);
+  target.cloud.setAttribute('d', d);
+  target.clip.setAttribute('d', d);
+  target.edgeContact.setAttribute('d', d);
+  target.edgeSoft.setAttribute('d', d);
+  target.edgeTight.setAttribute('d', d);
+  target.edgeContact.setAttribute('transform', 'translate(0 0.18)');
+
+  target.body.setAttribute(
+    'transform',
+    `translate(${(12 + f.tx).toFixed(3)} ${(12 + f.ty).toFixed(3)}) rotate(${f.roll.toFixed(3)}) scale(${f.sx.toFixed(4)} ${f.sy.toFixed(4)}) translate(-12 -12)`
+  );
+
+  const eyeSx = 1 + (f.sx - 1) * .24;
+  const eyeSy = 1 + (f.sy - 1) * .20;
+  target.eyes.setAttribute(
+    'transform',
+    `translate(${(12 + f.tx).toFixed(3)} ${(12 + f.ty).toFixed(3)}) rotate(${f.eyeRot.toFixed(3)}) scale(${eyeSx.toFixed(4)} ${eyeSy.toFixed(4)}) translate(-12 -12) translate(${f.gaze.toFixed(3)} 0)`
+  );
+
+  applyBlink(target.eyeL, EYE_BASE.l, f.blink, f.eyeWide);
+  applyBlink(target.eyeR, EYE_BASE.r, f.blink, f.eyeWide);
+
+  target.shadow.setAttribute('transform', `translate(${(f.tx * .28).toFixed(3)} 0) scale(${f.shadowScale.toFixed(3)} 1)`);
+  target.shadow.setAttribute('opacity', (.07 + f.puffA * .045).toFixed(3));
+
+  setTrailPuff(target.puffA, f.puffA, -0.95, -0.16, 1.00);
+  setTrailPuff(target.puffB, f.puffB, -1.55, 0.06, 0.82);
+  setTrailPuff(target.puffC, f.puffC, -2.05, 0.16, 0.66);
+}
+
+function applyBlink(rect, base, amount, widen = 1) {
+  const scale = 1 - amount * .88;
+  const cx = base.x + base.w / 2;
+  const w = base.w * widen * (1 + amount * .06);
+  const h = Math.max(base.h * scale, .24);
+  const y = base.y + (base.h - h) / 2;
+  const rx = Math.min(w / 2, h / 2, 1.35);
+  rect.setAttribute('width', w.toFixed(3));
+  rect.setAttribute('x', (cx - w / 2).toFixed(3));
+  rect.setAttribute('height', h.toFixed(3));
+  rect.setAttribute('y', y.toFixed(3));
+  rect.setAttribute('rx', rx.toFixed(3));
+  rect.setAttribute('ry', rx.toFixed(3));
+}
+
+function setPuff(el, opacity, dx, dy, scale) {
+  el.setAttribute('opacity', opacity.toFixed(3));
+  el.setAttribute('transform', `translate(${dx.toFixed(3)} ${dy.toFixed(3)}) scale(${scale.toFixed(3)})`);
+}
+
+function setTrailPuff(el, amount, driftX, driftY, baseScale) {
+  const a = clamp01(amount);
+  const isLight = window.matchMedia('(prefers-color-scheme: light)').matches;
+  const fade = isLight ? a : Math.sin(a * Math.PI);
+  const dx = driftX * a;
+  const dy = driftY * a;
+  const scale = baseScale * (0.82 + a * 0.32);
+  const opacityBase = isLight ? 0.86 : 0.62;
+  el.setAttribute('opacity', Math.min(fade * opacityBase, 0.90).toFixed(3));
+  el.setAttribute('transform', `translate(${dx.toFixed(3)} ${dy.toFixed(3)}) scale(${scale.toFixed(3)})`);
+}
+
+function tick(now) {
+  const f = frameFor(now);
+  applyFrame(els, f);
+  requestAnimationFrame(tick);
+}
+
+requestAnimationFrame(tick);
+]]></script>
+</svg>