apptify 0.8.0 → 0.8.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/apptify.css +1 -1
  2. package/dist/apptify.js +1503 -1721
  3. package/dist/components/button.d.ts +1 -1
  4. package/dist/components/foundation.d.ts +2 -4
  5. package/dist/components/link.d.ts +1 -1
  6. package/dist/core/image-gallery-motion.d.ts +1 -1
  7. package/dist/core/layers.d.ts +0 -1
  8. package/dist/index.d.ts +2 -46
  9. package/docs/COMPONENTS.md +7 -4
  10. package/package.json +1 -1
  11. package/templates/playground/README.md +1 -1
  12. package/templates/playground/package.json +1 -1
  13. package/templates/playground/source-snapshot.json +80 -40
  14. package/templates/playground/src/ComponentDemo.vue +2 -5
  15. package/templates/playground/src/catalog.ts +0 -1
  16. package/templates/playground/src/components/ErrorPagePreviews.vue +86 -0
  17. package/templates/playground/src/components/bad-request-paper-scene.vue +280 -0
  18. package/templates/playground/src/components/bad-request-paper-story.ts +169 -0
  19. package/templates/playground/src/components/gateway-paper-scene.vue +336 -0
  20. package/templates/playground/src/components/gateway-paper-story.ts +197 -0
  21. package/templates/playground/src/components/hamster-429-scene.vue +1045 -0
  22. package/templates/playground/src/components/server-fire-paper-scene.vue +249 -0
  23. package/templates/playground/src/components/server-fire-paper-story.ts +272 -0
  24. package/templates/playground/src/components/unavailable-paper-scene.vue +488 -0
  25. package/templates/playground/src/editor/component-metadata.ts +0 -1
  26. package/templates/playground/src/editor/handbooks/apple-dialog.ts +1 -1
  27. package/templates/playground/src/editor/playground-examples.ts +0 -1
  28. package/templates/playground/src/error-pages.ts +9 -0
  29. package/templates/playground/src/style.css +0 -2
  30. package/templates/playground/src/views/400.vue +74 -0
  31. package/templates/playground/src/views/403.vue +5 -2
  32. package/templates/playground/src/views/429.vue +74 -0
  33. package/templates/playground/src/views/500.vue +67 -0
  34. package/templates/playground/src/views/502.vue +68 -0
  35. package/templates/playground/src/views/503.vue +79 -0
  36. package/templates/playground/src/views/[...all].vue +5 -2
  37. package/templates/playground/src/views/components.vue +8 -8
  38. package/tooling/prepare-playground.mjs +2 -2
  39. package/dist/components/scrollbar.d.ts +0 -88
  40. package/dist/core/scrollbar.d.ts +0 -14
  41. package/templates/playground/src/editor/handbooks/apple-scroll-bar.ts +0 -15
@@ -0,0 +1,1045 @@
1
+ <template>
2
+ <figure class="hp429-scene" :data-theme="theme" data-hamster-scene ref="root">
3
+ <div class="hp429-window"><svg class="hp429-art" viewBox="0 0 1200 720" role="img" aria-labelledby="hp429-title hp429-desc" xmlns="http://www.w3.org/2000/svg">
4
+ <title id="hp429-title">仓鼠与搬不完的包裹山</title>
5
+ <desc id="hp429-desc">镜头先近距离看一只使尽力气推箱子的仓鼠:它拼命蹬腿,身体发抖,额头冒汗,但每一步都把箱子向前推进。镜头逐渐拉远,露出远高于仓鼠的巨大包裹山。仓鼠把箱子推出左右两侧的画面,后续工人从山脚后接着搬运。包裹从画面上方不断落下,看不到投递者。</desc>
6
+ <defs>
7
+ <linearGradient id="hp429-sky" x2=".3" y2="1"><stop stop-color="var(--hp-sky-top)"/><stop offset="1" stop-color="var(--hp-sky)"/></linearGradient>
8
+ <linearGradient id="hp429-wood" x2=".9" y2=".2"><stop stop-color="#d6b17e"/><stop offset="1" stop-color="#b98e64"/></linearGradient>
9
+ <filter id="hp429-paper" x="-25%" y="-30%" width="160%" height="180%"><feDropShadow dx="1" dy="5" stdDeviation="2.7" flood-color="#39291e" flood-opacity=".14"/></filter>
10
+ <filter id="hp429-soft" x="-35%" y="-35%" width="180%" height="190%"><feDropShadow dx=".7" dy="2.8" stdDeviation="1.5" flood-color="#39291e" flood-opacity=".13"/></filter>
11
+ <clipPath id="hp429-frame"><path d="M35 83Q33 43 78 39L1097 24Q1153 24 1158 77L1180 602Q1182 652 1133 659L91 688Q37 688 34 636Z"/></clipPath>
12
+ <pattern id="hp429-grain" width="41" height="37" patternUnits="userSpaceOnUse"><path d="M4 6h1m15 11h1m13-9h.7M9 29h1m26 3h.8" stroke="#5e472e" stroke-opacity=".11" stroke-width="1"/><path d="M8 11l3-1m13 16 3-1m-4-23 2-1" stroke="#fff8e5" stroke-opacity=".22" stroke-width=".7"/></pattern>
13
+ <g id="hp429-pine"><path d="M0-130-37-66-25-68-50-22-29-28-62 27H58L29-26 49-20 22-68 35-63Z" fill="currentColor"/><path d="M0-130V27H58L29-26 49-20 22-68 35-63Z" fill="#fff8e0" opacity=".09"/><path d="M-3 20h7v29h-7Z" fill="currentColor"/></g>
14
+ <g id="hp429-leaf"><path d="M0 0C-35-5-47-29-31-48-5-45 8-21 0 0Z" fill="currentColor"/><path d="M0 0-28-40" stroke="#f8e7ba" stroke-width="1.1" opacity=".5"/></g>
15
+ <g id="hp429-parcel"><path d="M-29-45 14-51 32-39-12-32Z" fill="var(--parcel-top,#e7c38b)"/><path d="M-29-45-12-32-12 9-29-5Z" fill="var(--parcel-side,#b58b5e)"/><path d="M-12-32 32-39 32 2-12 9Z" fill="var(--parcel-front,#cea36e)"/><path d="m-10-48 8-1 17 12-8 1Z" fill="#f7dfad"/><path d="M7-36 15-37V4L7 5Z" fill="var(--parcel-tape,#eed29f)"/><path d="m-8-29 12-2m14-2 10-2M-9 5 16 1" fill="none" stroke="#f1d09a" stroke-width="1" opacity=".65"/><path d="M-3-23 19-26 19-13-3-10Z" fill="#f3e4bf"/><path d="m0-20 8 4 8-7" fill="none" stroke="#b39c75" stroke-width="1.3" stroke-linejoin="round"/><path d="m23-7 4-.6m-4 3 4-.6" stroke="#a97e52" stroke-width="1"/></g>
16
+ </defs>
17
+
18
+ <path d="M46 97Q42 57 89 53L1108 38Q1165 37 1169 91L1188 616Q1190 665 1142 672L99 701Q46 701 44 649Z" fill="var(--hp-paper-shadow)"/>
19
+ <g clip-path="url(#hp429-frame)">
20
+ <path d="M-200-400H1650V1200H-200Z" fill="url(#hp429-sky)"/>
21
+ <g data-part="camera">
22
+ <circle cx="218" cy="158" r="44" fill="var(--hp-sun)"/>
23
+ <path d="M-300 344 39 222 232 282 380 234 555 309 725 249 974 326 1160 252 1500 331V1000H-300Z" fill="var(--hp-mountain-far)"/>
24
+ <path d="m39 222 193 60-84-12-73-20-100 60Z" fill="var(--hp-mountain-fold)"/>
25
+ <path d="M-300 411 139 335 295 377 471 311 674 368 904 342 1198 391 1500 332V1000H-300Z" fill="var(--hp-mountain-near)"/>
26
+ <g color="var(--hp-pine)" opacity=".6"><use href="#hp429-pine" transform="translate(1127 448) scale(.65)"/><use href="#hp429-pine" transform="translate(1206 439) scale(.92)"/><use href="#hp429-pine" transform="translate(48 463) scale(.48)"/></g>
27
+ <path d="M-300 514Q112 418 364 470T933 463Q1190 436 1600 481V1100H-300Z" fill="var(--hp-ground-back)"/>
28
+ <path d="M-300 579Q84 475 335 514T954 505Q1266 481 1600 539V1100H-300Z" fill="var(--hp-ground)"/>
29
+ <path d="M-300 645Q143 551 434 567T1120 551L1600 617V765H-300Z" fill="var(--hp-path-edge)"/>
30
+ <path d="M-300 624Q143 538 434 553T1120 538L1600 602V742H-300Z" fill="var(--hp-path)"/>
31
+ <path d="M-70 640Q103 603 292 603m-67 35 75-4m790 15 120 5m-196-24 71 4m-632 51 145-3" stroke="var(--hp-path-light)" stroke-width="2" fill="none" opacity=".6"/>
32
+ <!-- Small fence and a complete tree, both behind the running lane. -->
33
+ <g fill="#b09c73"><path d="m98 412 9-10 10 10 1 73-17 4Zm79-11 8-9 10 10 1 72-17 3Zm83-3 9-9 10 10-1 68-17 2Z"/><path d="m89 425 202-16v11L89 439Zm3 32 199-16v10L92 470Z"/></g>
34
+ <g filter="url(#hp429-paper)">
35
+ <path d="m154 241 40-4 6 99 38-37 15 8-51 58-4 111-48 4 18-39 4-79-34-36-32-12 4-16 43 17 17 18Z" fill="#aa8059"/>
36
+ <path d="m175 247 19-10 6 99 38-37 15 8-51 58-4 111-22 2 11-47-3-94Z" fill="#896c4d"/>
37
+ <path d="m172 366 3 55m-8 25-7 23m31-128 27-26" stroke="#dfbd86" stroke-width="1.5" fill="none" opacity=".6"/>
38
+ <path d="m63 211 43-66 91-15 74 48 16 77-55 53-120-12-53-40Z" fill="var(--hp-leaf-dark)"/>
39
+ <path d="m63 211 43-66 91-15-27 88-58 78-53-40Z" fill="var(--hp-leaf-mid)"/>
40
+ <path d="m197 130 74 48 16 77-117-37Z" fill="var(--hp-leaf-light)"/>
41
+ <path d="m94 243 54-56 77 19 53 50-21 61-91 13-72-31Z" fill="var(--hp-leaf-mid)"/>
42
+ <path d="m148 187 18 72 91 58 21-61-53-50Z" fill="var(--hp-leaf-light)"/>
43
+ <path d="m94 243 72 16 91 58-91 13-72-31Z" fill="var(--hp-leaf-fold)"/>
44
+ <path d="m106 145 64 73m-22-31 18 72 91 58" fill="none" stroke="#f7e5ae" stroke-width="1.3" opacity=".38"/>
45
+ </g>
46
+
47
+ <!-- Falling deliveries start above the frame; the pile hides their far-side landing. -->
48
+ <g data-part="sky-parcels"></g>
49
+ <g data-part="pile-back"><g data-part="pile-shadow" fill="#6b6550">
50
+ <ellipse cx="674" cy="623" rx="384" ry="30" opacity=".10"/>
51
+ <ellipse cx="674" cy="619" rx="333" ry="20" opacity=".07"/>
52
+ </g>
53
+ <g data-part="pile-back-boxes">
54
+ <g data-pile-rock="0" data-surface-x="688.835" data-surface-y="107.744"><use data-pile-box="98" href="#hp429-parcel" transform="translate(691 162) rotate(-4) scale(1.30)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/></g>
55
+ <use data-pile-box="99" href="#hp429-parcel" transform="translate(737 173) rotate(6) scale(1.15)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
56
+ <use data-pile-box="95" href="#hp429-parcel" transform="translate(704 182) rotate(7) scale(1.05)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
57
+ <use data-pile-box="97" href="#hp429-parcel" transform="translate(785 193) rotate(8) scale(1.08)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
58
+ <use data-pile-box="94" href="#hp429-parcel" transform="translate(655 195) rotate(-6) scale(1.12)" style="--parcel-top:#bac5a4;--parcel-side:#7f9279;--parcel-front:#a2b28f;--parcel-tape:#d4d9bb"/>
59
+ <use data-pile-box="96" href="#hp429-parcel" transform="translate(751 198) rotate(-4) scale(1.21)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
60
+ <use data-pile-box="90" href="#hp429-parcel" transform="translate(669 221) rotate(-5) scale(1.04)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
61
+ <use data-pile-box="92" href="#hp429-parcel" transform="translate(767 225) rotate(-8) scale(1.10)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
62
+ <use data-pile-box="89" href="#hp429-parcel" transform="translate(621 236) rotate(6) scale(1.12)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
63
+ <use data-pile-box="93" href="#hp429-parcel" transform="translate(798 238) rotate(4) scale(1.12)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
64
+ <use data-pile-box="91" href="#hp429-parcel" transform="translate(718 241) rotate(7) scale(1.30)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
65
+ <use data-pile-box="84" href="#hp429-parcel" transform="translate(636 264) rotate(5) scale(1.02)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
66
+ <use data-pile-box="86" href="#hp429-parcel" transform="translate(739 268) rotate(8) scale(1.15)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
67
+ <g data-pile-rock="2" data-surface-x="849.133" data-surface-y="234.654"><use data-pile-box="88" href="#hp429-parcel" transform="translate(819 272) rotate(9) scale(1.04)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/></g>
68
+ <g data-pile-rock="1" data-surface-x="578.614" data-surface-y="229.586"><use data-pile-box="83" href="#hp429-parcel" transform="translate(583 277) rotate(-7) scale(1.14)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/></g>
69
+ <use data-pile-box="87" href="#hp429-parcel" transform="translate(791 280) rotate(-6) scale(1.27)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
70
+ <use data-pile-box="85" href="#hp429-parcel" transform="translate(687 281) rotate(-4) scale(1.31)" style="--parcel-top:#b9c4c3;--parcel-side:#80918f;--parcel-front:#a0b1ad;--parcel-tape:#d7dace"/>
71
+ <use data-pile-box="77" href="#hp429-parcel" transform="translate(601 305) rotate(-5) scale(1.03)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
72
+ <use data-pile-box="81" href="#hp429-parcel" transform="translate(805 308) rotate(7) scale(1.05)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
73
+ <use data-pile-box="79" href="#hp429-parcel" transform="translate(703 310) rotate(-8) scale(1.13)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
74
+ <use data-pile-box="76" href="#hp429-parcel" transform="translate(550 320) rotate(7) scale(1.15)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
75
+ <use data-pile-box="82" href="#hp429-parcel" transform="translate(842 323) rotate(-6) scale(1.13)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
76
+ <use data-pile-box="78" href="#hp429-parcel" transform="translate(652 326) rotate(6) scale(1.32)" style="--parcel-top:#bac5a4;--parcel-side:#7f9279;--parcel-front:#a2b28f;--parcel-tape:#d4d9bb"/>
77
+ <use data-pile-box="80" href="#hp429-parcel" transform="translate(754 328) rotate(4) scale(1.30)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
78
+ <use data-pile-box="69" href="#hp429-parcel" transform="translate(568 345) rotate(7) scale(1.02)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
79
+ <use data-pile-box="73" href="#hp429-parcel" transform="translate(778 347) rotate(5) scale(1.06)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
80
+ <use data-pile-box="71" href="#hp429-parcel" transform="translate(673 351) rotate(9) scale(1.14)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
81
+ <use data-pile-box="75" href="#hp429-parcel" transform="translate(863 357) rotate(6) scale(1.07)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
82
+ <use data-pile-box="68" href="#hp429-parcel" transform="translate(516 360) rotate(-6) scale(1.16)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
83
+ <use data-pile-box="74" href="#hp429-parcel" transform="translate(830 362) rotate(-8) scale(1.24)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
84
+ <use data-pile-box="70" href="#hp429-parcel" transform="translate(620 364) rotate(-4) scale(1.32)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
85
+ <use data-pile-box="72" href="#hp429-parcel" transform="translate(727 365) rotate(-7) scale(1.30)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
86
+ <use data-pile-box="64" href="#hp429-parcel" transform="translate(747 390) rotate(7) scale(1.06)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
87
+ <use data-pile-box="60" href="#hp429-parcel" transform="translate(537 391) rotate(-5) scale(1.04)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
88
+ <use data-pile-box="62" href="#hp429-parcel" transform="translate(644 395) rotate(-8) scale(1.12)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
89
+ <use data-pile-box="66" href="#hp429-parcel" transform="translate(848 398) rotate(5) scale(1.11)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
90
+ <g data-pile-rock="3" data-surface-x="466.976" data-surface-y="354.405"><use data-pile-box="59" href="#hp429-parcel" transform="translate(480 404) rotate(8) scale(1.10)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/></g>
91
+ <use data-pile-box="63" href="#hp429-parcel" transform="translate(697 407) rotate(4) scale(1.29)" style="--parcel-top:#bac5a4;--parcel-side:#7f9279;--parcel-front:#a2b28f;--parcel-tape:#d4d9bb"/>
92
+ <use data-pile-box="67" href="#hp429-parcel" transform="translate(886 407) rotate(-9) scale(1.09)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
93
+ <use data-pile-box="61" href="#hp429-parcel" transform="translate(589 410) rotate(6) scale(1.30)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
94
+ <use data-pile-box="65" href="#hp429-parcel" transform="translate(797 411) rotate(-6) scale(1.34)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
95
+ <use data-pile-box="50" href="#hp429-parcel" transform="translate(504 432) rotate(6) scale(1.03)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
96
+ <use data-pile-box="54" href="#hp429-parcel" transform="translate(715 434) rotate(7) scale(1.08)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
97
+ <use data-pile-box="56" href="#hp429-parcel" transform="translate(817 437) rotate(5) scale(1.11)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
98
+ <use data-pile-box="52" href="#hp429-parcel" transform="translate(609 438) rotate(8) scale(1.15)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
99
+ <g data-pile-rock="4" data-surface-x="944.292" data-surface-y="404.218"><use data-pile-box="58" href="#hp429-parcel" transform="translate(913 443) rotate(9) scale(1.08)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/></g>
100
+ <use data-pile-box="49" href="#hp429-parcel" transform="translate(454 446) rotate(-7) scale(1.14)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
101
+ <use data-pile-box="55" href="#hp429-parcel" transform="translate(767 448) rotate(-8) scale(1.27)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
102
+ <use data-pile-box="51" href="#hp429-parcel" transform="translate(558 450) rotate(-4) scale(1.31)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
103
+ <use data-pile-box="57" href="#hp429-parcel" transform="translate(865 451) rotate(-6) scale(1.24)" style="--parcel-top:#b9c4c3;--parcel-side:#80918f;--parcel-front:#a0b1ad;--parcel-tape:#d7dace"/>
104
+ <use data-pile-box="53" href="#hp429-parcel" transform="translate(663 452) rotate(-5) scale(1.32)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
105
+ <use data-pile-box="39" href="#hp429-parcel" transform="translate(471 474) rotate(-5) scale(1.05)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
106
+ <use data-pile-box="47" href="#hp429-parcel" transform="translate(887 475) rotate(5) scale(1.06)" style="--parcel-top:#bac5a4;--parcel-side:#7f9279;--parcel-front:#a2b28f;--parcel-tape:#d4d9bb"/>
107
+ <use data-pile-box="43" href="#hp429-parcel" transform="translate(680 477) rotate(9) scale(1.09)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
108
+ <use data-pile-box="41" href="#hp429-parcel" transform="translate(576 479) rotate(-8) scale(1.16)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
109
+ <use data-pile-box="45" href="#hp429-parcel" transform="translate(786 480) rotate(7) scale(1.15)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
110
+ <use data-pile-box="38" href="#hp429-parcel" transform="translate(422 487) rotate(7) scale(1.18)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
111
+ <use data-pile-box="46" href="#hp429-parcel" transform="translate(837 489) rotate(-6) scale(1.23)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
112
+ <use data-pile-box="48" href="#hp429-parcel" transform="translate(937 490) rotate(-8) scale(1.10)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
113
+ <use data-pile-box="40" href="#hp429-parcel" transform="translate(522 491) rotate(4) scale(1.32)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
114
+ <use data-pile-box="44" href="#hp429-parcel" transform="translate(733 493) rotate(-5) scale(1.34)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
115
+ <use data-pile-box="42" href="#hp429-parcel" transform="translate(627 495) rotate(6) scale(1.29)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
116
+ <use data-pile-box="27" href="#hp429-parcel" transform="translate(441 514) rotate(7) scale(1.04)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
117
+ <use data-pile-box="36" href="#hp429-parcel" transform="translate(882 516) rotate(-9) scale(1.08)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
118
+ <use data-pile-box="33" href="#hp429-parcel" transform="translate(734 518) rotate(8) scale(1.06)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
119
+ <use data-pile-box="31" href="#hp429-parcel" transform="translate(637 519) rotate(-7) scale(1.10)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
120
+ <use data-pile-box="29" href="#hp429-parcel" transform="translate(538 521) rotate(4) scale(1.17)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
121
+ <use data-pile-box="35" href="#hp429-parcel" transform="translate(832 525) rotate(7) scale(1.21)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
122
+ <use data-pile-box="26" href="#hp429-parcel" transform="translate(392 528) rotate(-5) scale(1.14)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
123
+ <use data-pile-box="37" href="#hp429-parcel" transform="translate(933 530) rotate(5) scale(1.17)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
124
+ <use data-pile-box="28" href="#hp429-parcel" transform="translate(490 531) rotate(-8) scale(1.29)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
125
+ <use data-pile-box="32" href="#hp429-parcel" transform="translate(685 532) rotate(5) scale(1.28)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
126
+ <use data-pile-box="30" href="#hp429-parcel" transform="translate(587 534) rotate(6) scale(1.31)" style="--parcel-top:#bac5a4;--parcel-side:#7f9279;--parcel-front:#a2b28f;--parcel-tape:#d4d9bb"/>
127
+ <use data-pile-box="34" href="#hp429-parcel" transform="translate(783 536) rotate(-4) scale(1.34)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
128
+ <use data-pile-box="14" href="#hp429-parcel" transform="translate(418 557) rotate(-6) scale(1.04)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
129
+ <use data-pile-box="18" href="#hp429-parcel" transform="translate(626 558) rotate(9) scale(1.08)" style="--parcel-top:#bac5a4;--parcel-side:#7f9279;--parcel-front:#a2b28f;--parcel-tape:#d4d9bb"/>
130
+ <use data-pile-box="22" href="#hp429-parcel" transform="translate(832 560) rotate(6) scale(1.10)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
131
+ <use data-pile-box="20" href="#hp429-parcel" transform="translate(730 563) rotate(7) scale(1.15)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
132
+ <use data-pile-box="16" href="#hp429-parcel" transform="translate(522 564) rotate(-8) scale(1.16)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
133
+ <use data-pile-box="24" href="#hp429-parcel" transform="translate(935 566) rotate(4) scale(1.12)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
134
+ <use data-pile-box="13" href="#hp429-parcel" transform="translate(366 568) rotate(7) scale(1.12)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
135
+ <use data-pile-box="25" href="#hp429-parcel" transform="translate(988 570) rotate(-8) scale(1.08)" style="--parcel-top:#b9c4c3;--parcel-side:#80918f;--parcel-front:#a0b1ad;--parcel-tape:#d7dace"/>
136
+ <use data-pile-box="17" href="#hp429-parcel" transform="translate(574 571) rotate(4) scale(1.27)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
137
+ <use data-pile-box="21" href="#hp429-parcel" transform="translate(782 572) rotate(-4) scale(1.30)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
138
+ <use data-pile-box="15" href="#hp429-parcel" transform="translate(471 574) rotate(5) scale(1.31)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
139
+ <use data-pile-box="23" href="#hp429-parcel" transform="translate(884 575) rotate(-7) scale(1.32)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
140
+ <use data-pile-box="19" href="#hp429-parcel" transform="translate(679 576) rotate(-5) scale(1.34)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
141
+ <use data-pile-box="4" href="#hp429-parcel" transform="translate(559 606) rotate(-8) scale(1.30)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
142
+ <use data-pile-box="10" href="#hp429-parcel" transform="translate(894 607) rotate(-7) scale(1.32)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
143
+ <use data-pile-box="5" href="#hp429-parcel" transform="translate(616 609) rotate(5) scale(1.25)" style="--parcel-top:#bac5a4;--parcel-side:#7f9279;--parcel-front:#a2b28f;--parcel-tape:#d4d9bb"/>
144
+ <use data-pile-box="11" href="#hp429-parcel" transform="translate(949 609) rotate(6) scale(1.12)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
145
+ <use data-pile-box="0" href="#hp429-parcel" transform="translate(337 610) rotate(-4) scale(1.10)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
146
+ <use data-pile-box="6" href="#hp429-parcel" transform="translate(672 610) rotate(-3) scale(1.34)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
147
+ <use data-pile-box="12" href="#hp429-parcel" transform="translate(1005 612) rotate(-3) scale(1.04)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
148
+ </g></g>
149
+ <!-- The front row hides incoming workers until they emerge from the hill. -->
150
+ <ellipse data-part="hero-shadow" cx="1060" cy="633" rx="49" ry="8" fill="#796344" opacity=".16"/>
151
+ <g data-part="hero-box" transform="translate(1060 620) scale(1.32)"><use href="#hp429-parcel"/></g>
152
+ <ellipse data-part="left-shadow" cx="220" cy="634" rx="43" ry="7" fill="#796344" opacity=".15"/>
153
+ <g data-part="left-box" transform="translate(220 623) scale(1.1)"><use href="#hp429-parcel"/></g>
154
+ <g data-part="skid-dust" fill="#f2dfb6"></g>
155
+ <g data-part="push-workers"></g>
156
+ <g data-part="sweat" fill="#81aab1"></g>
157
+ <g data-part="pile-front"><g data-part="pile-front-boxes">
158
+ <use data-pile-box="1" href="#hp429-parcel" transform="translate(410 638) rotate(-2) scale(2.10)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
159
+ <use data-pile-box="3" href="#hp429-parcel" transform="translate(516 638) rotate(-1) scale(2.08)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
160
+ <use data-pile-box="7" href="#hp429-parcel" transform="translate(773 638) rotate(1) scale(2.10)" style="--parcel-top:#dfb17a;--parcel-side:#a77d58;--parcel-front:#c18f5e;--parcel-tape:#e8c999"/>
161
+ <use data-pile-box="9" href="#hp429-parcel" transform="translate(865 638) rotate(1) scale(2.10)" style="--parcel-top:#e6be82;--parcel-side:#ae8055;--parcel-front:#c89b62;--parcel-tape:#edd3a5"/>
162
+ <use data-pile-box="2" href="#hp429-parcel" transform="translate(464 639) rotate(2) scale(2.12)" style="--parcel-top:#edcf99;--parcel-side:#b99466;--parcel-front:#d9b77c;--parcel-tape:#f3deb1"/>
163
+ <use data-pile-box="8" href="#hp429-parcel" transform="translate(820 639) rotate(-2) scale(2.12)" style="--parcel-top:#e7c38b;--parcel-side:#b58b5e;--parcel-front:#cea36e;--parcel-tape:#eed29f"/>
164
+ </g></g>
165
+ <g data-part="impact-dust" fill="#f2d8a6"></g>
166
+ <g data-part="actors"><g data-actor="0" style="--ham-fur:#c89a60;--ham-light:#e3bb82;--ham-shade:#aa784c" transform="translate(-300 540)">
167
+ <ellipse class="ham-shadow" cx="0" cy="7" rx="54" ry="7" fill="#68583e" opacity=".16"/>
168
+ <g class="hamster-shape">
169
+ <g class="ham-foot-back">
170
+ <path d="M-45-9Q-34-13-25-6L-20-1-12 1Q-8 4-14 7L-42 7Q-50 5-49 1Z" fill="var(--ham-shade,#aa784c)"/>
171
+ <path d="M-43-4-27-5-21 0-14 2-19 4-41 3Z" fill="#dcb58a"/>
172
+ <path d="m-23 2 1 3m-7-3 1 3" fill="none" stroke="#9c7355" stroke-width="1" stroke-linecap="round" opacity=".6"/>
173
+ </g>
174
+ <g class="ham-foot-front">
175
+ <path d="M14-8Q23-13 31-6L33-1 45 1Q51 4 45 7H18Q10 5 11 1Z" fill="var(--ham-fur,#c89a60)"/>
176
+ <path d="M16-4Q23-7 29-2L31 1 42 3 38 5H19L14 3Z" fill="#ebc99a"/>
177
+ <path d="m33 3 1 3m-7-3 1 3" fill="none" stroke="#ab805b" stroke-width="1" stroke-linecap="round" opacity=".6"/>
178
+ </g>
179
+ <g class="ham-bob">
180
+ <path d="M-39-79Q-58-66-61-43L-58-20Q-52-5-32-2L-6 1Q18 1 34-12L44-36Q44-58 28-75L0-88Z" fill="var(--ham-fur,#c89a60)"/>
181
+ <path d="M-39-79-50-56-51-32-41-12-21-3-32-2Q-52-5-58-20L-61-43Q-58-66-39-79Z" fill="var(--ham-shade,#aa784c)"/>
182
+ <path d="M-39-79Q-20-91 0-88L22-77-1-72-27-61-50-56Z" fill="var(--ham-light,#e3bb82)"/>
183
+ <path d="M-2-68Q22-72 34-51L38-30Q33-11 16-6L-3-5Q-19-12-23-28L-20-50Z" fill="#f4ddb0"/>
184
+ <path d="M-20-50-15-27-3-13 16-6-3-5Q-19-12-23-28Z" fill="#e7c792"/>
185
+ <path d="m-45-36 3 9m5-16 2 6m16-28 7-3" fill="none" stroke="#f1d19e" stroke-width="1.2" stroke-linecap="round" opacity=".52"/>
186
+ <path d="M26-65Q34-65 39-57L49-52 48-46Q37-44 31-49L23-56Z" fill="var(--ham-shade,#aa784c)"/>
187
+ <g class="ham-head">
188
+ <path d="M29-106Q27-119 38-122 48-125 53-116L52-103 43-97Z" fill="var(--ham-shade,#aa784c)"/>
189
+ <path d="M35-108Q33-116 40-118 47-119 49-113L47-104Z" fill="#d7a68c"/>
190
+ <path d="M-28-99Q-40-108-32-120-27-128-16-125-3-123-1-111L-7-99Z" fill="var(--ham-fur,#c89a60)"/>
191
+ <path d="M-31-112Q-30-121-22-121-12-122-7-112L-11-104-23-104Z" fill="var(--ham-light,#e3bb82)"/>
192
+ <path d="M-27-111Q-27-117-21-117-14-117-11-111L-13-105-23-106Z" fill="#d5a18a"/>
193
+ <path d="M-21-104Q-4-118 17-112L37-105Q54-97 57-82L60-65Q57-48 41-43L12-41Q-9-41-25-52-39-60-38-76L-33-94Z" fill="var(--ham-fur,#c89a60)"/>
194
+ <path d="M-21-104Q-4-118 17-112L37-105 45-96 21-99 2-103-16-96-33-78-33-94Z" fill="var(--ham-light,#e3bb82)"/>
195
+ <path d="M-33-94-27-78-30-64-20-53-3-47 12-41Q-9-41-25-52-39-60-38-76Z" fill="var(--ham-shade,#aa784c)"/>
196
+ <path d="M35-78Q45-86 53-80L58-70Q66-65 62-55L53-47 39-47 30-57Z" fill="#f0d4a4"/>
197
+ <path d="M1-78Q14-85 25-76L36-67 44-62Q42-45 27-41L5-40Q-13-40-22-51-28-59-21-69L-12-74Z" fill="#f6e1b7"/>
198
+ <path d="M-21-69-17-56-6-48 12-44 27-41 5-40Q-13-40-22-51-28-59-21-69Z" fill="#eacb99"/>
199
+ <path d="M23-77Q31-82 39-77L48-72 46-66 34-62 24-66Z" fill="#f8e5c0"/>
200
+ <path d="M42-76Q47-80 52-76L50-71Q47-68 44-72Z" fill="#9a6b5d"/>
201
+ <path d="m44-76 5 0" fill="none" stroke="#c18d78" stroke-width="1.2" stroke-linecap="round"/>
202
+ <path d="M47-69 46-65Q43-62 39-64" fill="none" stroke="#ac8562" stroke-width="1.2" stroke-linecap="round"/>
203
+ <g class="ham-eye">
204
+ <ellipse cx="10" cy="-88" rx="3.5" ry="4.3" fill="#49382f"/>
205
+ <circle cx="11" cy="-89.3" r="1.1" fill="#fff4d8"/>
206
+ </g>
207
+ <g class="ham-eye">
208
+ <ellipse cx="40.5" cy="-88" rx="2.7" ry="3.6" fill="#49382f"/>
209
+ <circle cx="41.2" cy="-89" r=".8" fill="#fff4d8"/>
210
+ </g>
211
+ <path d="m5-97 7-1m25 1 5 1" fill="none" stroke="#a4774e" stroke-width="1.2" stroke-linecap="round" opacity=".65"/>
212
+ <path d="m-6-64 5 1m-3-6 3 1m54 9 4-1" fill="none" stroke="#c1a179" stroke-width="1" stroke-linecap="round" opacity=".6"/>
213
+ <path d="m-13-94 6-4m16-7 7 1" fill="none" stroke="#f6d6a2" stroke-width="1.15" stroke-linecap="round" opacity=".75"/>
214
+ </g>
215
+ <g class="ham-cargo"><use href="#hp429-parcel" transform="translate(53 -31) scale(.92)"/></g>
216
+ <g class="ham-paw">
217
+ <path d="M17-57Q24-64 31-58L39-51 46-56Q51-60 55-56L58-50Q56-44 49-43L38-40Q29-40 24-45Z" fill="var(--ham-fur,#c89a60)"/>
218
+ <path d="M19-57Q25-61 30-56L38-48 32-44 25-48Z" fill="var(--ham-light,#e3bb82)"/>
219
+ <path d="M39-51 46-56Q51-60 55-56L58-50Q56-45 50-45L41-43 37-46Z" fill="#e8c18e"/>
220
+ <path d="m46-52 2 4m3-5 2 3" fill="none" stroke="#b58b60" stroke-width="1" stroke-linecap="round" opacity=".75"/>
221
+ </g>
222
+ </g>
223
+ </g>
224
+ </g>
225
+ <g data-actor="1" style="--ham-fur:#aaa998;--ham-light:#cfceb8;--ham-shade:#868b7d" transform="translate(-300 540)">
226
+ <ellipse class="ham-shadow" cx="0" cy="7" rx="54" ry="7" fill="#68583e" opacity=".16"/>
227
+ <g class="hamster-shape">
228
+ <g class="ham-foot-back">
229
+ <path d="M-45-9Q-34-13-25-6L-20-1-12 1Q-8 4-14 7L-42 7Q-50 5-49 1Z" fill="var(--ham-shade,#aa784c)"/>
230
+ <path d="M-43-4-27-5-21 0-14 2-19 4-41 3Z" fill="#dcb58a"/>
231
+ <path d="m-23 2 1 3m-7-3 1 3" fill="none" stroke="#9c7355" stroke-width="1" stroke-linecap="round" opacity=".6"/>
232
+ </g>
233
+ <g class="ham-foot-front">
234
+ <path d="M14-8Q23-13 31-6L33-1 45 1Q51 4 45 7H18Q10 5 11 1Z" fill="var(--ham-fur,#c89a60)"/>
235
+ <path d="M16-4Q23-7 29-2L31 1 42 3 38 5H19L14 3Z" fill="#ebc99a"/>
236
+ <path d="m33 3 1 3m-7-3 1 3" fill="none" stroke="#ab805b" stroke-width="1" stroke-linecap="round" opacity=".6"/>
237
+ </g>
238
+ <g class="ham-bob">
239
+ <path d="M-39-79Q-58-66-61-43L-58-20Q-52-5-32-2L-6 1Q18 1 34-12L44-36Q44-58 28-75L0-88Z" fill="var(--ham-fur,#c89a60)"/>
240
+ <path d="M-39-79-50-56-51-32-41-12-21-3-32-2Q-52-5-58-20L-61-43Q-58-66-39-79Z" fill="var(--ham-shade,#aa784c)"/>
241
+ <path d="M-39-79Q-20-91 0-88L22-77-1-72-27-61-50-56Z" fill="var(--ham-light,#e3bb82)"/>
242
+ <path d="M-2-68Q22-72 34-51L38-30Q33-11 16-6L-3-5Q-19-12-23-28L-20-50Z" fill="#f4ddb0"/>
243
+ <path d="M-20-50-15-27-3-13 16-6-3-5Q-19-12-23-28Z" fill="#e7c792"/>
244
+ <path d="m-45-36 3 9m5-16 2 6m16-28 7-3" fill="none" stroke="#f1d19e" stroke-width="1.2" stroke-linecap="round" opacity=".52"/>
245
+ <path d="M26-65Q34-65 39-57L49-52 48-46Q37-44 31-49L23-56Z" fill="var(--ham-shade,#aa784c)"/>
246
+ <g class="ham-head">
247
+ <path d="M29-106Q27-119 38-122 48-125 53-116L52-103 43-97Z" fill="var(--ham-shade,#aa784c)"/>
248
+ <path d="M35-108Q33-116 40-118 47-119 49-113L47-104Z" fill="#d7a68c"/>
249
+ <path d="M-28-99Q-40-108-32-120-27-128-16-125-3-123-1-111L-7-99Z" fill="var(--ham-fur,#c89a60)"/>
250
+ <path d="M-31-112Q-30-121-22-121-12-122-7-112L-11-104-23-104Z" fill="var(--ham-light,#e3bb82)"/>
251
+ <path d="M-27-111Q-27-117-21-117-14-117-11-111L-13-105-23-106Z" fill="#d5a18a"/>
252
+ <path d="M-21-104Q-4-118 17-112L37-105Q54-97 57-82L60-65Q57-48 41-43L12-41Q-9-41-25-52-39-60-38-76L-33-94Z" fill="var(--ham-fur,#c89a60)"/>
253
+ <path d="M-21-104Q-4-118 17-112L37-105 45-96 21-99 2-103-16-96-33-78-33-94Z" fill="var(--ham-light,#e3bb82)"/>
254
+ <path d="M-33-94-27-78-30-64-20-53-3-47 12-41Q-9-41-25-52-39-60-38-76Z" fill="var(--ham-shade,#aa784c)"/>
255
+ <path d="M35-78Q45-86 53-80L58-70Q66-65 62-55L53-47 39-47 30-57Z" fill="#f0d4a4"/>
256
+ <path d="M1-78Q14-85 25-76L36-67 44-62Q42-45 27-41L5-40Q-13-40-22-51-28-59-21-69L-12-74Z" fill="#f6e1b7"/>
257
+ <path d="M-21-69-17-56-6-48 12-44 27-41 5-40Q-13-40-22-51-28-59-21-69Z" fill="#eacb99"/>
258
+ <path d="M23-77Q31-82 39-77L48-72 46-66 34-62 24-66Z" fill="#f8e5c0"/>
259
+ <path d="M42-76Q47-80 52-76L50-71Q47-68 44-72Z" fill="#9a6b5d"/>
260
+ <path d="m44-76 5 0" fill="none" stroke="#c18d78" stroke-width="1.2" stroke-linecap="round"/>
261
+ <path d="M47-69 46-65Q43-62 39-64" fill="none" stroke="#ac8562" stroke-width="1.2" stroke-linecap="round"/>
262
+ <g class="ham-eye">
263
+ <ellipse cx="10" cy="-88" rx="3.5" ry="4.3" fill="#49382f"/>
264
+ <circle cx="11" cy="-89.3" r="1.1" fill="#fff4d8"/>
265
+ </g>
266
+ <g class="ham-eye">
267
+ <ellipse cx="40.5" cy="-88" rx="2.7" ry="3.6" fill="#49382f"/>
268
+ <circle cx="41.2" cy="-89" r=".8" fill="#fff4d8"/>
269
+ </g>
270
+ <path d="m5-97 7-1m25 1 5 1" fill="none" stroke="#a4774e" stroke-width="1.2" stroke-linecap="round" opacity=".65"/>
271
+ <path d="m-6-64 5 1m-3-6 3 1m54 9 4-1" fill="none" stroke="#c1a179" stroke-width="1" stroke-linecap="round" opacity=".6"/>
272
+ <path d="m-13-94 6-4m16-7 7 1" fill="none" stroke="#f6d6a2" stroke-width="1.15" stroke-linecap="round" opacity=".75"/>
273
+ </g>
274
+ <g class="ham-cargo"><use href="#hp429-parcel" transform="translate(53 -31) scale(.92)"/></g>
275
+ <g class="ham-paw">
276
+ <path d="M17-57Q24-64 31-58L39-51 46-56Q51-60 55-56L58-50Q56-44 49-43L38-40Q29-40 24-45Z" fill="var(--ham-fur,#c89a60)"/>
277
+ <path d="M19-57Q25-61 30-56L38-48 32-44 25-48Z" fill="var(--ham-light,#e3bb82)"/>
278
+ <path d="M39-51 46-56Q51-60 55-56L58-50Q56-45 50-45L41-43 37-46Z" fill="#e8c18e"/>
279
+ <path d="m46-52 2 4m3-5 2 3" fill="none" stroke="#b58b60" stroke-width="1" stroke-linecap="round" opacity=".75"/>
280
+ </g>
281
+ </g>
282
+ </g>
283
+ </g>
284
+ <g data-actor="2" style="--ham-fur:#ddc799;--ham-light:#f0dfb8;--ham-shade:#b9a37b" transform="translate(-300 540)">
285
+ <ellipse class="ham-shadow" cx="0" cy="7" rx="54" ry="7" fill="#68583e" opacity=".16"/>
286
+ <g class="hamster-shape">
287
+ <g class="ham-foot-back">
288
+ <path d="M-45-9Q-34-13-25-6L-20-1-12 1Q-8 4-14 7L-42 7Q-50 5-49 1Z" fill="var(--ham-shade,#aa784c)"/>
289
+ <path d="M-43-4-27-5-21 0-14 2-19 4-41 3Z" fill="#dcb58a"/>
290
+ <path d="m-23 2 1 3m-7-3 1 3" fill="none" stroke="#9c7355" stroke-width="1" stroke-linecap="round" opacity=".6"/>
291
+ </g>
292
+ <g class="ham-foot-front">
293
+ <path d="M14-8Q23-13 31-6L33-1 45 1Q51 4 45 7H18Q10 5 11 1Z" fill="var(--ham-fur,#c89a60)"/>
294
+ <path d="M16-4Q23-7 29-2L31 1 42 3 38 5H19L14 3Z" fill="#ebc99a"/>
295
+ <path d="m33 3 1 3m-7-3 1 3" fill="none" stroke="#ab805b" stroke-width="1" stroke-linecap="round" opacity=".6"/>
296
+ </g>
297
+ <g class="ham-bob">
298
+ <path d="M-39-79Q-58-66-61-43L-58-20Q-52-5-32-2L-6 1Q18 1 34-12L44-36Q44-58 28-75L0-88Z" fill="var(--ham-fur,#c89a60)"/>
299
+ <path d="M-39-79-50-56-51-32-41-12-21-3-32-2Q-52-5-58-20L-61-43Q-58-66-39-79Z" fill="var(--ham-shade,#aa784c)"/>
300
+ <path d="M-39-79Q-20-91 0-88L22-77-1-72-27-61-50-56Z" fill="var(--ham-light,#e3bb82)"/>
301
+ <path d="M-2-68Q22-72 34-51L38-30Q33-11 16-6L-3-5Q-19-12-23-28L-20-50Z" fill="#f4ddb0"/>
302
+ <path d="M-20-50-15-27-3-13 16-6-3-5Q-19-12-23-28Z" fill="#e7c792"/>
303
+ <path d="m-45-36 3 9m5-16 2 6m16-28 7-3" fill="none" stroke="#f1d19e" stroke-width="1.2" stroke-linecap="round" opacity=".52"/>
304
+ <path d="M26-65Q34-65 39-57L49-52 48-46Q37-44 31-49L23-56Z" fill="var(--ham-shade,#aa784c)"/>
305
+ <g class="ham-head">
306
+ <path d="M29-106Q27-119 38-122 48-125 53-116L52-103 43-97Z" fill="var(--ham-shade,#aa784c)"/>
307
+ <path d="M35-108Q33-116 40-118 47-119 49-113L47-104Z" fill="#d7a68c"/>
308
+ <path d="M-28-99Q-40-108-32-120-27-128-16-125-3-123-1-111L-7-99Z" fill="var(--ham-fur,#c89a60)"/>
309
+ <path d="M-31-112Q-30-121-22-121-12-122-7-112L-11-104-23-104Z" fill="var(--ham-light,#e3bb82)"/>
310
+ <path d="M-27-111Q-27-117-21-117-14-117-11-111L-13-105-23-106Z" fill="#d5a18a"/>
311
+ <path d="M-21-104Q-4-118 17-112L37-105Q54-97 57-82L60-65Q57-48 41-43L12-41Q-9-41-25-52-39-60-38-76L-33-94Z" fill="var(--ham-fur,#c89a60)"/>
312
+ <path d="M-21-104Q-4-118 17-112L37-105 45-96 21-99 2-103-16-96-33-78-33-94Z" fill="var(--ham-light,#e3bb82)"/>
313
+ <path d="M-33-94-27-78-30-64-20-53-3-47 12-41Q-9-41-25-52-39-60-38-76Z" fill="var(--ham-shade,#aa784c)"/>
314
+ <path d="M35-78Q45-86 53-80L58-70Q66-65 62-55L53-47 39-47 30-57Z" fill="#f0d4a4"/>
315
+ <path d="M1-78Q14-85 25-76L36-67 44-62Q42-45 27-41L5-40Q-13-40-22-51-28-59-21-69L-12-74Z" fill="#f6e1b7"/>
316
+ <path d="M-21-69-17-56-6-48 12-44 27-41 5-40Q-13-40-22-51-28-59-21-69Z" fill="#eacb99"/>
317
+ <path d="M23-77Q31-82 39-77L48-72 46-66 34-62 24-66Z" fill="#f8e5c0"/>
318
+ <path d="M42-76Q47-80 52-76L50-71Q47-68 44-72Z" fill="#9a6b5d"/>
319
+ <path d="m44-76 5 0" fill="none" stroke="#c18d78" stroke-width="1.2" stroke-linecap="round"/>
320
+ <path d="M47-69 46-65Q43-62 39-64" fill="none" stroke="#ac8562" stroke-width="1.2" stroke-linecap="round"/>
321
+ <g class="ham-eye">
322
+ <ellipse cx="10" cy="-88" rx="3.5" ry="4.3" fill="#49382f"/>
323
+ <circle cx="11" cy="-89.3" r="1.1" fill="#fff4d8"/>
324
+ </g>
325
+ <g class="ham-eye">
326
+ <ellipse cx="40.5" cy="-88" rx="2.7" ry="3.6" fill="#49382f"/>
327
+ <circle cx="41.2" cy="-89" r=".8" fill="#fff4d8"/>
328
+ </g>
329
+ <path d="m5-97 7-1m25 1 5 1" fill="none" stroke="#a4774e" stroke-width="1.2" stroke-linecap="round" opacity=".65"/>
330
+ <path d="m-6-64 5 1m-3-6 3 1m54 9 4-1" fill="none" stroke="#c1a179" stroke-width="1" stroke-linecap="round" opacity=".6"/>
331
+ <path d="m-13-94 6-4m16-7 7 1" fill="none" stroke="#f6d6a2" stroke-width="1.15" stroke-linecap="round" opacity=".75"/>
332
+ </g>
333
+ <g class="ham-cargo"><use href="#hp429-parcel" transform="translate(53 -31) scale(.92)"/></g>
334
+ <g class="ham-paw">
335
+ <path d="M17-57Q24-64 31-58L39-51 46-56Q51-60 55-56L58-50Q56-44 49-43L38-40Q29-40 24-45Z" fill="var(--ham-fur,#c89a60)"/>
336
+ <path d="M19-57Q25-61 30-56L38-48 32-44 25-48Z" fill="var(--ham-light,#e3bb82)"/>
337
+ <path d="M39-51 46-56Q51-60 55-56L58-50Q56-45 50-45L41-43 37-46Z" fill="#e8c18e"/>
338
+ <path d="m46-52 2 4m3-5 2 3" fill="none" stroke="#b58b60" stroke-width="1" stroke-linecap="round" opacity=".75"/>
339
+ </g>
340
+ </g>
341
+ </g>
342
+ </g>
343
+ <g data-actor="3" style="--ham-fur:#c89a60;--ham-light:#e3bb82;--ham-shade:#aa784c" transform="translate(-300 540)">
344
+ <ellipse class="ham-shadow" cx="0" cy="7" rx="54" ry="7" fill="#68583e" opacity=".16"/>
345
+ <g class="hamster-shape">
346
+ <g class="ham-foot-back">
347
+ <path d="M-45-9Q-34-13-25-6L-20-1-12 1Q-8 4-14 7L-42 7Q-50 5-49 1Z" fill="var(--ham-shade,#aa784c)"/>
348
+ <path d="M-43-4-27-5-21 0-14 2-19 4-41 3Z" fill="#dcb58a"/>
349
+ <path d="m-23 2 1 3m-7-3 1 3" fill="none" stroke="#9c7355" stroke-width="1" stroke-linecap="round" opacity=".6"/>
350
+ </g>
351
+ <g class="ham-foot-front">
352
+ <path d="M14-8Q23-13 31-6L33-1 45 1Q51 4 45 7H18Q10 5 11 1Z" fill="var(--ham-fur,#c89a60)"/>
353
+ <path d="M16-4Q23-7 29-2L31 1 42 3 38 5H19L14 3Z" fill="#ebc99a"/>
354
+ <path d="m33 3 1 3m-7-3 1 3" fill="none" stroke="#ab805b" stroke-width="1" stroke-linecap="round" opacity=".6"/>
355
+ </g>
356
+ <g class="ham-bob">
357
+ <path d="M-39-79Q-58-66-61-43L-58-20Q-52-5-32-2L-6 1Q18 1 34-12L44-36Q44-58 28-75L0-88Z" fill="var(--ham-fur,#c89a60)"/>
358
+ <path d="M-39-79-50-56-51-32-41-12-21-3-32-2Q-52-5-58-20L-61-43Q-58-66-39-79Z" fill="var(--ham-shade,#aa784c)"/>
359
+ <path d="M-39-79Q-20-91 0-88L22-77-1-72-27-61-50-56Z" fill="var(--ham-light,#e3bb82)"/>
360
+ <path d="M-2-68Q22-72 34-51L38-30Q33-11 16-6L-3-5Q-19-12-23-28L-20-50Z" fill="#f4ddb0"/>
361
+ <path d="M-20-50-15-27-3-13 16-6-3-5Q-19-12-23-28Z" fill="#e7c792"/>
362
+ <path d="m-45-36 3 9m5-16 2 6m16-28 7-3" fill="none" stroke="#f1d19e" stroke-width="1.2" stroke-linecap="round" opacity=".52"/>
363
+ <path d="M26-65Q34-65 39-57L49-52 48-46Q37-44 31-49L23-56Z" fill="var(--ham-shade,#aa784c)"/>
364
+ <g class="ham-head">
365
+ <path d="M29-106Q27-119 38-122 48-125 53-116L52-103 43-97Z" fill="var(--ham-shade,#aa784c)"/>
366
+ <path d="M35-108Q33-116 40-118 47-119 49-113L47-104Z" fill="#d7a68c"/>
367
+ <path d="M-28-99Q-40-108-32-120-27-128-16-125-3-123-1-111L-7-99Z" fill="var(--ham-fur,#c89a60)"/>
368
+ <path d="M-31-112Q-30-121-22-121-12-122-7-112L-11-104-23-104Z" fill="var(--ham-light,#e3bb82)"/>
369
+ <path d="M-27-111Q-27-117-21-117-14-117-11-111L-13-105-23-106Z" fill="#d5a18a"/>
370
+ <path d="M-21-104Q-4-118 17-112L37-105Q54-97 57-82L60-65Q57-48 41-43L12-41Q-9-41-25-52-39-60-38-76L-33-94Z" fill="var(--ham-fur,#c89a60)"/>
371
+ <path d="M-21-104Q-4-118 17-112L37-105 45-96 21-99 2-103-16-96-33-78-33-94Z" fill="var(--ham-light,#e3bb82)"/>
372
+ <path d="M-33-94-27-78-30-64-20-53-3-47 12-41Q-9-41-25-52-39-60-38-76Z" fill="var(--ham-shade,#aa784c)"/>
373
+ <path d="M35-78Q45-86 53-80L58-70Q66-65 62-55L53-47 39-47 30-57Z" fill="#f0d4a4"/>
374
+ <path d="M1-78Q14-85 25-76L36-67 44-62Q42-45 27-41L5-40Q-13-40-22-51-28-59-21-69L-12-74Z" fill="#f6e1b7"/>
375
+ <path d="M-21-69-17-56-6-48 12-44 27-41 5-40Q-13-40-22-51-28-59-21-69Z" fill="#eacb99"/>
376
+ <path d="M23-77Q31-82 39-77L48-72 46-66 34-62 24-66Z" fill="#f8e5c0"/>
377
+ <path d="M42-76Q47-80 52-76L50-71Q47-68 44-72Z" fill="#9a6b5d"/>
378
+ <path d="m44-76 5 0" fill="none" stroke="#c18d78" stroke-width="1.2" stroke-linecap="round"/>
379
+ <path d="M47-69 46-65Q43-62 39-64" fill="none" stroke="#ac8562" stroke-width="1.2" stroke-linecap="round"/>
380
+ <g class="ham-eye">
381
+ <ellipse cx="10" cy="-88" rx="3.5" ry="4.3" fill="#49382f"/>
382
+ <circle cx="11" cy="-89.3" r="1.1" fill="#fff4d8"/>
383
+ </g>
384
+ <g class="ham-eye">
385
+ <ellipse cx="40.5" cy="-88" rx="2.7" ry="3.6" fill="#49382f"/>
386
+ <circle cx="41.2" cy="-89" r=".8" fill="#fff4d8"/>
387
+ </g>
388
+ <path d="m5-97 7-1m25 1 5 1" fill="none" stroke="#a4774e" stroke-width="1.2" stroke-linecap="round" opacity=".65"/>
389
+ <path d="m-6-64 5 1m-3-6 3 1m54 9 4-1" fill="none" stroke="#c1a179" stroke-width="1" stroke-linecap="round" opacity=".6"/>
390
+ <path d="m-13-94 6-4m16-7 7 1" fill="none" stroke="#f6d6a2" stroke-width="1.15" stroke-linecap="round" opacity=".75"/>
391
+ </g>
392
+ <g class="ham-cargo"><use href="#hp429-parcel" transform="translate(53 -31) scale(.92)"/></g>
393
+ <g class="ham-paw">
394
+ <path d="M17-57Q24-64 31-58L39-51 46-56Q51-60 55-56L58-50Q56-44 49-43L38-40Q29-40 24-45Z" fill="var(--ham-fur,#c89a60)"/>
395
+ <path d="M19-57Q25-61 30-56L38-48 32-44 25-48Z" fill="var(--ham-light,#e3bb82)"/>
396
+ <path d="M39-51 46-56Q51-60 55-56L58-50Q56-45 50-45L41-43 37-46Z" fill="#e8c18e"/>
397
+ <path d="m46-52 2 4m3-5 2 3" fill="none" stroke="#b58b60" stroke-width="1" stroke-linecap="round" opacity=".75"/>
398
+ </g>
399
+ </g>
400
+ </g>
401
+ </g>
402
+ <g data-actor="4" style="--ham-fur:#aaa998;--ham-light:#cfceb8;--ham-shade:#868b7d" transform="translate(-300 540)">
403
+ <ellipse class="ham-shadow" cx="0" cy="7" rx="54" ry="7" fill="#68583e" opacity=".16"/>
404
+ <g class="hamster-shape">
405
+ <g class="ham-foot-back">
406
+ <path d="M-45-9Q-34-13-25-6L-20-1-12 1Q-8 4-14 7L-42 7Q-50 5-49 1Z" fill="var(--ham-shade,#aa784c)"/>
407
+ <path d="M-43-4-27-5-21 0-14 2-19 4-41 3Z" fill="#dcb58a"/>
408
+ <path d="m-23 2 1 3m-7-3 1 3" fill="none" stroke="#9c7355" stroke-width="1" stroke-linecap="round" opacity=".6"/>
409
+ </g>
410
+ <g class="ham-foot-front">
411
+ <path d="M14-8Q23-13 31-6L33-1 45 1Q51 4 45 7H18Q10 5 11 1Z" fill="var(--ham-fur,#c89a60)"/>
412
+ <path d="M16-4Q23-7 29-2L31 1 42 3 38 5H19L14 3Z" fill="#ebc99a"/>
413
+ <path d="m33 3 1 3m-7-3 1 3" fill="none" stroke="#ab805b" stroke-width="1" stroke-linecap="round" opacity=".6"/>
414
+ </g>
415
+ <g class="ham-bob">
416
+ <path d="M-39-79Q-58-66-61-43L-58-20Q-52-5-32-2L-6 1Q18 1 34-12L44-36Q44-58 28-75L0-88Z" fill="var(--ham-fur,#c89a60)"/>
417
+ <path d="M-39-79-50-56-51-32-41-12-21-3-32-2Q-52-5-58-20L-61-43Q-58-66-39-79Z" fill="var(--ham-shade,#aa784c)"/>
418
+ <path d="M-39-79Q-20-91 0-88L22-77-1-72-27-61-50-56Z" fill="var(--ham-light,#e3bb82)"/>
419
+ <path d="M-2-68Q22-72 34-51L38-30Q33-11 16-6L-3-5Q-19-12-23-28L-20-50Z" fill="#f4ddb0"/>
420
+ <path d="M-20-50-15-27-3-13 16-6-3-5Q-19-12-23-28Z" fill="#e7c792"/>
421
+ <path d="m-45-36 3 9m5-16 2 6m16-28 7-3" fill="none" stroke="#f1d19e" stroke-width="1.2" stroke-linecap="round" opacity=".52"/>
422
+ <path d="M26-65Q34-65 39-57L49-52 48-46Q37-44 31-49L23-56Z" fill="var(--ham-shade,#aa784c)"/>
423
+ <g class="ham-head">
424
+ <path d="M29-106Q27-119 38-122 48-125 53-116L52-103 43-97Z" fill="var(--ham-shade,#aa784c)"/>
425
+ <path d="M35-108Q33-116 40-118 47-119 49-113L47-104Z" fill="#d7a68c"/>
426
+ <path d="M-28-99Q-40-108-32-120-27-128-16-125-3-123-1-111L-7-99Z" fill="var(--ham-fur,#c89a60)"/>
427
+ <path d="M-31-112Q-30-121-22-121-12-122-7-112L-11-104-23-104Z" fill="var(--ham-light,#e3bb82)"/>
428
+ <path d="M-27-111Q-27-117-21-117-14-117-11-111L-13-105-23-106Z" fill="#d5a18a"/>
429
+ <path d="M-21-104Q-4-118 17-112L37-105Q54-97 57-82L60-65Q57-48 41-43L12-41Q-9-41-25-52-39-60-38-76L-33-94Z" fill="var(--ham-fur,#c89a60)"/>
430
+ <path d="M-21-104Q-4-118 17-112L37-105 45-96 21-99 2-103-16-96-33-78-33-94Z" fill="var(--ham-light,#e3bb82)"/>
431
+ <path d="M-33-94-27-78-30-64-20-53-3-47 12-41Q-9-41-25-52-39-60-38-76Z" fill="var(--ham-shade,#aa784c)"/>
432
+ <path d="M35-78Q45-86 53-80L58-70Q66-65 62-55L53-47 39-47 30-57Z" fill="#f0d4a4"/>
433
+ <path d="M1-78Q14-85 25-76L36-67 44-62Q42-45 27-41L5-40Q-13-40-22-51-28-59-21-69L-12-74Z" fill="#f6e1b7"/>
434
+ <path d="M-21-69-17-56-6-48 12-44 27-41 5-40Q-13-40-22-51-28-59-21-69Z" fill="#eacb99"/>
435
+ <path d="M23-77Q31-82 39-77L48-72 46-66 34-62 24-66Z" fill="#f8e5c0"/>
436
+ <path d="M42-76Q47-80 52-76L50-71Q47-68 44-72Z" fill="#9a6b5d"/>
437
+ <path d="m44-76 5 0" fill="none" stroke="#c18d78" stroke-width="1.2" stroke-linecap="round"/>
438
+ <path d="M47-69 46-65Q43-62 39-64" fill="none" stroke="#ac8562" stroke-width="1.2" stroke-linecap="round"/>
439
+ <g class="ham-eye">
440
+ <ellipse cx="10" cy="-88" rx="3.5" ry="4.3" fill="#49382f"/>
441
+ <circle cx="11" cy="-89.3" r="1.1" fill="#fff4d8"/>
442
+ </g>
443
+ <g class="ham-eye">
444
+ <ellipse cx="40.5" cy="-88" rx="2.7" ry="3.6" fill="#49382f"/>
445
+ <circle cx="41.2" cy="-89" r=".8" fill="#fff4d8"/>
446
+ </g>
447
+ <path d="m5-97 7-1m25 1 5 1" fill="none" stroke="#a4774e" stroke-width="1.2" stroke-linecap="round" opacity=".65"/>
448
+ <path d="m-6-64 5 1m-3-6 3 1m54 9 4-1" fill="none" stroke="#c1a179" stroke-width="1" stroke-linecap="round" opacity=".6"/>
449
+ <path d="m-13-94 6-4m16-7 7 1" fill="none" stroke="#f6d6a2" stroke-width="1.15" stroke-linecap="round" opacity=".75"/>
450
+ </g>
451
+ <g class="ham-cargo"><use href="#hp429-parcel" transform="translate(53 -31) scale(.92)"/></g>
452
+ <g class="ham-paw">
453
+ <path d="M17-57Q24-64 31-58L39-51 46-56Q51-60 55-56L58-50Q56-44 49-43L38-40Q29-40 24-45Z" fill="var(--ham-fur,#c89a60)"/>
454
+ <path d="M19-57Q25-61 30-56L38-48 32-44 25-48Z" fill="var(--ham-light,#e3bb82)"/>
455
+ <path d="M39-51 46-56Q51-60 55-56L58-50Q56-45 50-45L41-43 37-46Z" fill="#e8c18e"/>
456
+ <path d="m46-52 2 4m3-5 2 3" fill="none" stroke="#b58b60" stroke-width="1" stroke-linecap="round" opacity=".75"/>
457
+ </g>
458
+ </g>
459
+ </g>
460
+ </g>
461
+ <g data-actor="5" style="--ham-fur:#ddc799;--ham-light:#f0dfb8;--ham-shade:#b9a37b" transform="translate(-300 540)">
462
+ <ellipse class="ham-shadow" cx="0" cy="7" rx="54" ry="7" fill="#68583e" opacity=".16"/>
463
+ <g class="hamster-shape">
464
+ <g class="ham-foot-back">
465
+ <path d="M-45-9Q-34-13-25-6L-20-1-12 1Q-8 4-14 7L-42 7Q-50 5-49 1Z" fill="var(--ham-shade,#aa784c)"/>
466
+ <path d="M-43-4-27-5-21 0-14 2-19 4-41 3Z" fill="#dcb58a"/>
467
+ <path d="m-23 2 1 3m-7-3 1 3" fill="none" stroke="#9c7355" stroke-width="1" stroke-linecap="round" opacity=".6"/>
468
+ </g>
469
+ <g class="ham-foot-front">
470
+ <path d="M14-8Q23-13 31-6L33-1 45 1Q51 4 45 7H18Q10 5 11 1Z" fill="var(--ham-fur,#c89a60)"/>
471
+ <path d="M16-4Q23-7 29-2L31 1 42 3 38 5H19L14 3Z" fill="#ebc99a"/>
472
+ <path d="m33 3 1 3m-7-3 1 3" fill="none" stroke="#ab805b" stroke-width="1" stroke-linecap="round" opacity=".6"/>
473
+ </g>
474
+ <g class="ham-bob">
475
+ <path d="M-39-79Q-58-66-61-43L-58-20Q-52-5-32-2L-6 1Q18 1 34-12L44-36Q44-58 28-75L0-88Z" fill="var(--ham-fur,#c89a60)"/>
476
+ <path d="M-39-79-50-56-51-32-41-12-21-3-32-2Q-52-5-58-20L-61-43Q-58-66-39-79Z" fill="var(--ham-shade,#aa784c)"/>
477
+ <path d="M-39-79Q-20-91 0-88L22-77-1-72-27-61-50-56Z" fill="var(--ham-light,#e3bb82)"/>
478
+ <path d="M-2-68Q22-72 34-51L38-30Q33-11 16-6L-3-5Q-19-12-23-28L-20-50Z" fill="#f4ddb0"/>
479
+ <path d="M-20-50-15-27-3-13 16-6-3-5Q-19-12-23-28Z" fill="#e7c792"/>
480
+ <path d="m-45-36 3 9m5-16 2 6m16-28 7-3" fill="none" stroke="#f1d19e" stroke-width="1.2" stroke-linecap="round" opacity=".52"/>
481
+ <path d="M26-65Q34-65 39-57L49-52 48-46Q37-44 31-49L23-56Z" fill="var(--ham-shade,#aa784c)"/>
482
+ <g class="ham-head">
483
+ <path d="M29-106Q27-119 38-122 48-125 53-116L52-103 43-97Z" fill="var(--ham-shade,#aa784c)"/>
484
+ <path d="M35-108Q33-116 40-118 47-119 49-113L47-104Z" fill="#d7a68c"/>
485
+ <path d="M-28-99Q-40-108-32-120-27-128-16-125-3-123-1-111L-7-99Z" fill="var(--ham-fur,#c89a60)"/>
486
+ <path d="M-31-112Q-30-121-22-121-12-122-7-112L-11-104-23-104Z" fill="var(--ham-light,#e3bb82)"/>
487
+ <path d="M-27-111Q-27-117-21-117-14-117-11-111L-13-105-23-106Z" fill="#d5a18a"/>
488
+ <path d="M-21-104Q-4-118 17-112L37-105Q54-97 57-82L60-65Q57-48 41-43L12-41Q-9-41-25-52-39-60-38-76L-33-94Z" fill="var(--ham-fur,#c89a60)"/>
489
+ <path d="M-21-104Q-4-118 17-112L37-105 45-96 21-99 2-103-16-96-33-78-33-94Z" fill="var(--ham-light,#e3bb82)"/>
490
+ <path d="M-33-94-27-78-30-64-20-53-3-47 12-41Q-9-41-25-52-39-60-38-76Z" fill="var(--ham-shade,#aa784c)"/>
491
+ <path d="M35-78Q45-86 53-80L58-70Q66-65 62-55L53-47 39-47 30-57Z" fill="#f0d4a4"/>
492
+ <path d="M1-78Q14-85 25-76L36-67 44-62Q42-45 27-41L5-40Q-13-40-22-51-28-59-21-69L-12-74Z" fill="#f6e1b7"/>
493
+ <path d="M-21-69-17-56-6-48 12-44 27-41 5-40Q-13-40-22-51-28-59-21-69Z" fill="#eacb99"/>
494
+ <path d="M23-77Q31-82 39-77L48-72 46-66 34-62 24-66Z" fill="#f8e5c0"/>
495
+ <path d="M42-76Q47-80 52-76L50-71Q47-68 44-72Z" fill="#9a6b5d"/>
496
+ <path d="m44-76 5 0" fill="none" stroke="#c18d78" stroke-width="1.2" stroke-linecap="round"/>
497
+ <path d="M47-69 46-65Q43-62 39-64" fill="none" stroke="#ac8562" stroke-width="1.2" stroke-linecap="round"/>
498
+ <g class="ham-eye">
499
+ <ellipse cx="10" cy="-88" rx="3.5" ry="4.3" fill="#49382f"/>
500
+ <circle cx="11" cy="-89.3" r="1.1" fill="#fff4d8"/>
501
+ </g>
502
+ <g class="ham-eye">
503
+ <ellipse cx="40.5" cy="-88" rx="2.7" ry="3.6" fill="#49382f"/>
504
+ <circle cx="41.2" cy="-89" r=".8" fill="#fff4d8"/>
505
+ </g>
506
+ <path d="m5-97 7-1m25 1 5 1" fill="none" stroke="#a4774e" stroke-width="1.2" stroke-linecap="round" opacity=".65"/>
507
+ <path d="m-6-64 5 1m-3-6 3 1m54 9 4-1" fill="none" stroke="#c1a179" stroke-width="1" stroke-linecap="round" opacity=".6"/>
508
+ <path d="m-13-94 6-4m16-7 7 1" fill="none" stroke="#f6d6a2" stroke-width="1.15" stroke-linecap="round" opacity=".75"/>
509
+ </g>
510
+ <g class="ham-cargo"><use href="#hp429-parcel" transform="translate(53 -31) scale(.92)"/></g>
511
+ <g class="ham-paw">
512
+ <path d="M17-57Q24-64 31-58L39-51 46-56Q51-60 55-56L58-50Q56-44 49-43L38-40Q29-40 24-45Z" fill="var(--ham-fur,#c89a60)"/>
513
+ <path d="M19-57Q25-61 30-56L38-48 32-44 25-48Z" fill="var(--ham-light,#e3bb82)"/>
514
+ <path d="M39-51 46-56Q51-60 55-56L58-50Q56-45 50-45L41-43 37-46Z" fill="#e8c18e"/>
515
+ <path d="m46-52 2 4m3-5 2 3" fill="none" stroke="#b58b60" stroke-width="1" stroke-linecap="round" opacity=".75"/>
516
+ </g>
517
+ </g>
518
+ </g>
519
+ </g>
520
+ <g data-actor="6" style="--ham-fur:#c89a60;--ham-light:#e3bb82;--ham-shade:#aa784c" transform="translate(-300 540)">
521
+ <ellipse class="ham-shadow" cx="0" cy="7" rx="54" ry="7" fill="#68583e" opacity=".16"/>
522
+ <g class="hamster-shape">
523
+ <g class="ham-foot-back">
524
+ <path d="M-45-9Q-34-13-25-6L-20-1-12 1Q-8 4-14 7L-42 7Q-50 5-49 1Z" fill="var(--ham-shade,#aa784c)"/>
525
+ <path d="M-43-4-27-5-21 0-14 2-19 4-41 3Z" fill="#dcb58a"/>
526
+ <path d="m-23 2 1 3m-7-3 1 3" fill="none" stroke="#9c7355" stroke-width="1" stroke-linecap="round" opacity=".6"/>
527
+ </g>
528
+ <g class="ham-foot-front">
529
+ <path d="M14-8Q23-13 31-6L33-1 45 1Q51 4 45 7H18Q10 5 11 1Z" fill="var(--ham-fur,#c89a60)"/>
530
+ <path d="M16-4Q23-7 29-2L31 1 42 3 38 5H19L14 3Z" fill="#ebc99a"/>
531
+ <path d="m33 3 1 3m-7-3 1 3" fill="none" stroke="#ab805b" stroke-width="1" stroke-linecap="round" opacity=".6"/>
532
+ </g>
533
+ <g class="ham-bob">
534
+ <path d="M-39-79Q-58-66-61-43L-58-20Q-52-5-32-2L-6 1Q18 1 34-12L44-36Q44-58 28-75L0-88Z" fill="var(--ham-fur,#c89a60)"/>
535
+ <path d="M-39-79-50-56-51-32-41-12-21-3-32-2Q-52-5-58-20L-61-43Q-58-66-39-79Z" fill="var(--ham-shade,#aa784c)"/>
536
+ <path d="M-39-79Q-20-91 0-88L22-77-1-72-27-61-50-56Z" fill="var(--ham-light,#e3bb82)"/>
537
+ <path d="M-2-68Q22-72 34-51L38-30Q33-11 16-6L-3-5Q-19-12-23-28L-20-50Z" fill="#f4ddb0"/>
538
+ <path d="M-20-50-15-27-3-13 16-6-3-5Q-19-12-23-28Z" fill="#e7c792"/>
539
+ <path d="m-45-36 3 9m5-16 2 6m16-28 7-3" fill="none" stroke="#f1d19e" stroke-width="1.2" stroke-linecap="round" opacity=".52"/>
540
+ <path d="M26-65Q34-65 39-57L49-52 48-46Q37-44 31-49L23-56Z" fill="var(--ham-shade,#aa784c)"/>
541
+ <g class="ham-head">
542
+ <path d="M29-106Q27-119 38-122 48-125 53-116L52-103 43-97Z" fill="var(--ham-shade,#aa784c)"/>
543
+ <path d="M35-108Q33-116 40-118 47-119 49-113L47-104Z" fill="#d7a68c"/>
544
+ <path d="M-28-99Q-40-108-32-120-27-128-16-125-3-123-1-111L-7-99Z" fill="var(--ham-fur,#c89a60)"/>
545
+ <path d="M-31-112Q-30-121-22-121-12-122-7-112L-11-104-23-104Z" fill="var(--ham-light,#e3bb82)"/>
546
+ <path d="M-27-111Q-27-117-21-117-14-117-11-111L-13-105-23-106Z" fill="#d5a18a"/>
547
+ <path d="M-21-104Q-4-118 17-112L37-105Q54-97 57-82L60-65Q57-48 41-43L12-41Q-9-41-25-52-39-60-38-76L-33-94Z" fill="var(--ham-fur,#c89a60)"/>
548
+ <path d="M-21-104Q-4-118 17-112L37-105 45-96 21-99 2-103-16-96-33-78-33-94Z" fill="var(--ham-light,#e3bb82)"/>
549
+ <path d="M-33-94-27-78-30-64-20-53-3-47 12-41Q-9-41-25-52-39-60-38-76Z" fill="var(--ham-shade,#aa784c)"/>
550
+ <path d="M35-78Q45-86 53-80L58-70Q66-65 62-55L53-47 39-47 30-57Z" fill="#f0d4a4"/>
551
+ <path d="M1-78Q14-85 25-76L36-67 44-62Q42-45 27-41L5-40Q-13-40-22-51-28-59-21-69L-12-74Z" fill="#f6e1b7"/>
552
+ <path d="M-21-69-17-56-6-48 12-44 27-41 5-40Q-13-40-22-51-28-59-21-69Z" fill="#eacb99"/>
553
+ <path d="M23-77Q31-82 39-77L48-72 46-66 34-62 24-66Z" fill="#f8e5c0"/>
554
+ <path d="M42-76Q47-80 52-76L50-71Q47-68 44-72Z" fill="#9a6b5d"/>
555
+ <path d="m44-76 5 0" fill="none" stroke="#c18d78" stroke-width="1.2" stroke-linecap="round"/>
556
+ <path d="M47-69 46-65Q43-62 39-64" fill="none" stroke="#ac8562" stroke-width="1.2" stroke-linecap="round"/>
557
+ <g class="ham-eye">
558
+ <ellipse cx="10" cy="-88" rx="3.5" ry="4.3" fill="#49382f"/>
559
+ <circle cx="11" cy="-89.3" r="1.1" fill="#fff4d8"/>
560
+ </g>
561
+ <g class="ham-eye">
562
+ <ellipse cx="40.5" cy="-88" rx="2.7" ry="3.6" fill="#49382f"/>
563
+ <circle cx="41.2" cy="-89" r=".8" fill="#fff4d8"/>
564
+ </g>
565
+ <path d="m5-97 7-1m25 1 5 1" fill="none" stroke="#a4774e" stroke-width="1.2" stroke-linecap="round" opacity=".65"/>
566
+ <path d="m-6-64 5 1m-3-6 3 1m54 9 4-1" fill="none" stroke="#c1a179" stroke-width="1" stroke-linecap="round" opacity=".6"/>
567
+ <path d="m-13-94 6-4m16-7 7 1" fill="none" stroke="#f6d6a2" stroke-width="1.15" stroke-linecap="round" opacity=".75"/>
568
+ </g>
569
+ <g class="ham-cargo"><use href="#hp429-parcel" transform="translate(53 -31) scale(.92)"/></g>
570
+ <g class="ham-paw">
571
+ <path d="M17-57Q24-64 31-58L39-51 46-56Q51-60 55-56L58-50Q56-44 49-43L38-40Q29-40 24-45Z" fill="var(--ham-fur,#c89a60)"/>
572
+ <path d="M19-57Q25-61 30-56L38-48 32-44 25-48Z" fill="var(--ham-light,#e3bb82)"/>
573
+ <path d="M39-51 46-56Q51-60 55-56L58-50Q56-45 50-45L41-43 37-46Z" fill="#e8c18e"/>
574
+ <path d="m46-52 2 4m3-5 2 3" fill="none" stroke="#b58b60" stroke-width="1" stroke-linecap="round" opacity=".75"/>
575
+ </g>
576
+ </g>
577
+ </g>
578
+ </g>
579
+ <g data-actor="7" style="--ham-fur:#aaa998;--ham-light:#cfceb8;--ham-shade:#868b7d" transform="translate(-300 540)">
580
+ <ellipse class="ham-shadow" cx="0" cy="7" rx="54" ry="7" fill="#68583e" opacity=".16"/>
581
+ <g class="hamster-shape">
582
+ <g class="ham-foot-back">
583
+ <path d="M-45-9Q-34-13-25-6L-20-1-12 1Q-8 4-14 7L-42 7Q-50 5-49 1Z" fill="var(--ham-shade,#aa784c)"/>
584
+ <path d="M-43-4-27-5-21 0-14 2-19 4-41 3Z" fill="#dcb58a"/>
585
+ <path d="m-23 2 1 3m-7-3 1 3" fill="none" stroke="#9c7355" stroke-width="1" stroke-linecap="round" opacity=".6"/>
586
+ </g>
587
+ <g class="ham-foot-front">
588
+ <path d="M14-8Q23-13 31-6L33-1 45 1Q51 4 45 7H18Q10 5 11 1Z" fill="var(--ham-fur,#c89a60)"/>
589
+ <path d="M16-4Q23-7 29-2L31 1 42 3 38 5H19L14 3Z" fill="#ebc99a"/>
590
+ <path d="m33 3 1 3m-7-3 1 3" fill="none" stroke="#ab805b" stroke-width="1" stroke-linecap="round" opacity=".6"/>
591
+ </g>
592
+ <g class="ham-bob">
593
+ <path d="M-39-79Q-58-66-61-43L-58-20Q-52-5-32-2L-6 1Q18 1 34-12L44-36Q44-58 28-75L0-88Z" fill="var(--ham-fur,#c89a60)"/>
594
+ <path d="M-39-79-50-56-51-32-41-12-21-3-32-2Q-52-5-58-20L-61-43Q-58-66-39-79Z" fill="var(--ham-shade,#aa784c)"/>
595
+ <path d="M-39-79Q-20-91 0-88L22-77-1-72-27-61-50-56Z" fill="var(--ham-light,#e3bb82)"/>
596
+ <path d="M-2-68Q22-72 34-51L38-30Q33-11 16-6L-3-5Q-19-12-23-28L-20-50Z" fill="#f4ddb0"/>
597
+ <path d="M-20-50-15-27-3-13 16-6-3-5Q-19-12-23-28Z" fill="#e7c792"/>
598
+ <path d="m-45-36 3 9m5-16 2 6m16-28 7-3" fill="none" stroke="#f1d19e" stroke-width="1.2" stroke-linecap="round" opacity=".52"/>
599
+ <path d="M26-65Q34-65 39-57L49-52 48-46Q37-44 31-49L23-56Z" fill="var(--ham-shade,#aa784c)"/>
600
+ <g class="ham-head">
601
+ <path d="M29-106Q27-119 38-122 48-125 53-116L52-103 43-97Z" fill="var(--ham-shade,#aa784c)"/>
602
+ <path d="M35-108Q33-116 40-118 47-119 49-113L47-104Z" fill="#d7a68c"/>
603
+ <path d="M-28-99Q-40-108-32-120-27-128-16-125-3-123-1-111L-7-99Z" fill="var(--ham-fur,#c89a60)"/>
604
+ <path d="M-31-112Q-30-121-22-121-12-122-7-112L-11-104-23-104Z" fill="var(--ham-light,#e3bb82)"/>
605
+ <path d="M-27-111Q-27-117-21-117-14-117-11-111L-13-105-23-106Z" fill="#d5a18a"/>
606
+ <path d="M-21-104Q-4-118 17-112L37-105Q54-97 57-82L60-65Q57-48 41-43L12-41Q-9-41-25-52-39-60-38-76L-33-94Z" fill="var(--ham-fur,#c89a60)"/>
607
+ <path d="M-21-104Q-4-118 17-112L37-105 45-96 21-99 2-103-16-96-33-78-33-94Z" fill="var(--ham-light,#e3bb82)"/>
608
+ <path d="M-33-94-27-78-30-64-20-53-3-47 12-41Q-9-41-25-52-39-60-38-76Z" fill="var(--ham-shade,#aa784c)"/>
609
+ <path d="M35-78Q45-86 53-80L58-70Q66-65 62-55L53-47 39-47 30-57Z" fill="#f0d4a4"/>
610
+ <path d="M1-78Q14-85 25-76L36-67 44-62Q42-45 27-41L5-40Q-13-40-22-51-28-59-21-69L-12-74Z" fill="#f6e1b7"/>
611
+ <path d="M-21-69-17-56-6-48 12-44 27-41 5-40Q-13-40-22-51-28-59-21-69Z" fill="#eacb99"/>
612
+ <path d="M23-77Q31-82 39-77L48-72 46-66 34-62 24-66Z" fill="#f8e5c0"/>
613
+ <path d="M42-76Q47-80 52-76L50-71Q47-68 44-72Z" fill="#9a6b5d"/>
614
+ <path d="m44-76 5 0" fill="none" stroke="#c18d78" stroke-width="1.2" stroke-linecap="round"/>
615
+ <path d="M47-69 46-65Q43-62 39-64" fill="none" stroke="#ac8562" stroke-width="1.2" stroke-linecap="round"/>
616
+ <g class="ham-eye">
617
+ <ellipse cx="10" cy="-88" rx="3.5" ry="4.3" fill="#49382f"/>
618
+ <circle cx="11" cy="-89.3" r="1.1" fill="#fff4d8"/>
619
+ </g>
620
+ <g class="ham-eye">
621
+ <ellipse cx="40.5" cy="-88" rx="2.7" ry="3.6" fill="#49382f"/>
622
+ <circle cx="41.2" cy="-89" r=".8" fill="#fff4d8"/>
623
+ </g>
624
+ <path d="m5-97 7-1m25 1 5 1" fill="none" stroke="#a4774e" stroke-width="1.2" stroke-linecap="round" opacity=".65"/>
625
+ <path d="m-6-64 5 1m-3-6 3 1m54 9 4-1" fill="none" stroke="#c1a179" stroke-width="1" stroke-linecap="round" opacity=".6"/>
626
+ <path d="m-13-94 6-4m16-7 7 1" fill="none" stroke="#f6d6a2" stroke-width="1.15" stroke-linecap="round" opacity=".75"/>
627
+ </g>
628
+ <g class="ham-cargo"><use href="#hp429-parcel" transform="translate(53 -31) scale(.92)"/></g>
629
+ <g class="ham-paw">
630
+ <path d="M17-57Q24-64 31-58L39-51 46-56Q51-60 55-56L58-50Q56-44 49-43L38-40Q29-40 24-45Z" fill="var(--ham-fur,#c89a60)"/>
631
+ <path d="M19-57Q25-61 30-56L38-48 32-44 25-48Z" fill="var(--ham-light,#e3bb82)"/>
632
+ <path d="M39-51 46-56Q51-60 55-56L58-50Q56-45 50-45L41-43 37-46Z" fill="#e8c18e"/>
633
+ <path d="m46-52 2 4m3-5 2 3" fill="none" stroke="#b58b60" stroke-width="1" stroke-linecap="round" opacity=".75"/>
634
+ </g>
635
+ </g>
636
+ </g>
637
+ </g>
638
+ <g data-actor="8" style="--ham-fur:#ddc799;--ham-light:#f0dfb8;--ham-shade:#b9a37b" transform="translate(-300 540)">
639
+ <ellipse class="ham-shadow" cx="0" cy="7" rx="54" ry="7" fill="#68583e" opacity=".16"/>
640
+ <g class="hamster-shape">
641
+ <g class="ham-foot-back">
642
+ <path d="M-45-9Q-34-13-25-6L-20-1-12 1Q-8 4-14 7L-42 7Q-50 5-49 1Z" fill="var(--ham-shade,#aa784c)"/>
643
+ <path d="M-43-4-27-5-21 0-14 2-19 4-41 3Z" fill="#dcb58a"/>
644
+ <path d="m-23 2 1 3m-7-3 1 3" fill="none" stroke="#9c7355" stroke-width="1" stroke-linecap="round" opacity=".6"/>
645
+ </g>
646
+ <g class="ham-foot-front">
647
+ <path d="M14-8Q23-13 31-6L33-1 45 1Q51 4 45 7H18Q10 5 11 1Z" fill="var(--ham-fur,#c89a60)"/>
648
+ <path d="M16-4Q23-7 29-2L31 1 42 3 38 5H19L14 3Z" fill="#ebc99a"/>
649
+ <path d="m33 3 1 3m-7-3 1 3" fill="none" stroke="#ab805b" stroke-width="1" stroke-linecap="round" opacity=".6"/>
650
+ </g>
651
+ <g class="ham-bob">
652
+ <path d="M-39-79Q-58-66-61-43L-58-20Q-52-5-32-2L-6 1Q18 1 34-12L44-36Q44-58 28-75L0-88Z" fill="var(--ham-fur,#c89a60)"/>
653
+ <path d="M-39-79-50-56-51-32-41-12-21-3-32-2Q-52-5-58-20L-61-43Q-58-66-39-79Z" fill="var(--ham-shade,#aa784c)"/>
654
+ <path d="M-39-79Q-20-91 0-88L22-77-1-72-27-61-50-56Z" fill="var(--ham-light,#e3bb82)"/>
655
+ <path d="M-2-68Q22-72 34-51L38-30Q33-11 16-6L-3-5Q-19-12-23-28L-20-50Z" fill="#f4ddb0"/>
656
+ <path d="M-20-50-15-27-3-13 16-6-3-5Q-19-12-23-28Z" fill="#e7c792"/>
657
+ <path d="m-45-36 3 9m5-16 2 6m16-28 7-3" fill="none" stroke="#f1d19e" stroke-width="1.2" stroke-linecap="round" opacity=".52"/>
658
+ <path d="M26-65Q34-65 39-57L49-52 48-46Q37-44 31-49L23-56Z" fill="var(--ham-shade,#aa784c)"/>
659
+ <g class="ham-head">
660
+ <path d="M29-106Q27-119 38-122 48-125 53-116L52-103 43-97Z" fill="var(--ham-shade,#aa784c)"/>
661
+ <path d="M35-108Q33-116 40-118 47-119 49-113L47-104Z" fill="#d7a68c"/>
662
+ <path d="M-28-99Q-40-108-32-120-27-128-16-125-3-123-1-111L-7-99Z" fill="var(--ham-fur,#c89a60)"/>
663
+ <path d="M-31-112Q-30-121-22-121-12-122-7-112L-11-104-23-104Z" fill="var(--ham-light,#e3bb82)"/>
664
+ <path d="M-27-111Q-27-117-21-117-14-117-11-111L-13-105-23-106Z" fill="#d5a18a"/>
665
+ <path d="M-21-104Q-4-118 17-112L37-105Q54-97 57-82L60-65Q57-48 41-43L12-41Q-9-41-25-52-39-60-38-76L-33-94Z" fill="var(--ham-fur,#c89a60)"/>
666
+ <path d="M-21-104Q-4-118 17-112L37-105 45-96 21-99 2-103-16-96-33-78-33-94Z" fill="var(--ham-light,#e3bb82)"/>
667
+ <path d="M-33-94-27-78-30-64-20-53-3-47 12-41Q-9-41-25-52-39-60-38-76Z" fill="var(--ham-shade,#aa784c)"/>
668
+ <path d="M35-78Q45-86 53-80L58-70Q66-65 62-55L53-47 39-47 30-57Z" fill="#f0d4a4"/>
669
+ <path d="M1-78Q14-85 25-76L36-67 44-62Q42-45 27-41L5-40Q-13-40-22-51-28-59-21-69L-12-74Z" fill="#f6e1b7"/>
670
+ <path d="M-21-69-17-56-6-48 12-44 27-41 5-40Q-13-40-22-51-28-59-21-69Z" fill="#eacb99"/>
671
+ <path d="M23-77Q31-82 39-77L48-72 46-66 34-62 24-66Z" fill="#f8e5c0"/>
672
+ <path d="M42-76Q47-80 52-76L50-71Q47-68 44-72Z" fill="#9a6b5d"/>
673
+ <path d="m44-76 5 0" fill="none" stroke="#c18d78" stroke-width="1.2" stroke-linecap="round"/>
674
+ <path d="M47-69 46-65Q43-62 39-64" fill="none" stroke="#ac8562" stroke-width="1.2" stroke-linecap="round"/>
675
+ <g class="ham-eye">
676
+ <ellipse cx="10" cy="-88" rx="3.5" ry="4.3" fill="#49382f"/>
677
+ <circle cx="11" cy="-89.3" r="1.1" fill="#fff4d8"/>
678
+ </g>
679
+ <g class="ham-eye">
680
+ <ellipse cx="40.5" cy="-88" rx="2.7" ry="3.6" fill="#49382f"/>
681
+ <circle cx="41.2" cy="-89" r=".8" fill="#fff4d8"/>
682
+ </g>
683
+ <path d="m5-97 7-1m25 1 5 1" fill="none" stroke="#a4774e" stroke-width="1.2" stroke-linecap="round" opacity=".65"/>
684
+ <path d="m-6-64 5 1m-3-6 3 1m54 9 4-1" fill="none" stroke="#c1a179" stroke-width="1" stroke-linecap="round" opacity=".6"/>
685
+ <path d="m-13-94 6-4m16-7 7 1" fill="none" stroke="#f6d6a2" stroke-width="1.15" stroke-linecap="round" opacity=".75"/>
686
+ </g>
687
+ <g class="ham-cargo"><use href="#hp429-parcel" transform="translate(53 -31) scale(.92)"/></g>
688
+ <g class="ham-paw">
689
+ <path d="M17-57Q24-64 31-58L39-51 46-56Q51-60 55-56L58-50Q56-44 49-43L38-40Q29-40 24-45Z" fill="var(--ham-fur,#c89a60)"/>
690
+ <path d="M19-57Q25-61 30-56L38-48 32-44 25-48Z" fill="var(--ham-light,#e3bb82)"/>
691
+ <path d="M39-51 46-56Q51-60 55-56L58-50Q56-45 50-45L41-43 37-46Z" fill="#e8c18e"/>
692
+ <path d="m46-52 2 4m3-5 2 3" fill="none" stroke="#b58b60" stroke-width="1" stroke-linecap="round" opacity=".75"/>
693
+ </g>
694
+ </g>
695
+ </g>
696
+ </g></g>
697
+ <path d="M-220 744Q-6 666 143 692L339 749 1500 740V1100H-220Z" fill="var(--hp-foreground)"/>
698
+ <g color="var(--hp-leaf-mid)"><use href="#hp429-leaf" transform="translate(104 688) rotate(28) scale(.75)"/><use href="#hp429-leaf" transform="translate(119 698) rotate(82) scale(.64)"/></g>
699
+ <g color="var(--hp-foreground)"><use href="#hp429-leaf" transform="translate(1142 678) rotate(-10) scale(.65)"/><use href="#hp429-leaf" transform="translate(1156 686) rotate(55) scale(.8)"/></g>
700
+ <path d="M-300-400H1650V1200H-300Z" fill="url(#hp429-grain)" pointer-events="none"/>
701
+ </g>
702
+ <path d="M43 90 46 630Q46 665 91 668" stroke="#fff8df" stroke-width="2" opacity=".4" fill="none"/>
703
+ </g>
704
+ </svg></div>
705
+ <figcaption v-show="!reducedMotion" class="hp429-controls">
706
+ <button type="button" class="hp429-control" data-action="replay" aria-label="重新播放动画">
707
+ <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M4 10a8 8 0 1 1 1.7 7M4 4v6h6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
708
+ </button>
709
+ <button type="button" class="hp429-control" data-action="pause" aria-label="暂停动画" aria-pressed="false">
710
+ <svg data-icon="pause" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M8 5v14M16 5v14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
711
+ <svg data-icon="play" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" hidden><path d="m8 5 11 7-11 7Z" fill="currentColor"/></svg>
712
+ </button>
713
+ </figcaption>
714
+ </figure>
715
+ </template>
716
+
717
+ <script setup lang="ts">
718
+ import { onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'
719
+
720
+ const props = defineProps<{ theme: 'light' | 'dark'; reducedMotion: boolean }>()
721
+ const uid = `hp429-${useId()}-`
722
+ const root = ref<HTMLElement>()
723
+ let player: ReturnType<typeof mountHamster429> | undefined
724
+
725
+ onMounted(() => {
726
+ if (root.value) player = mountHamster429(root.value, uid, props.reducedMotion)
727
+ })
728
+ watch(() => props.reducedMotion, reduced => player?.setReducedMotion(reduced))
729
+ onBeforeUnmount(() => {
730
+ player?.destroy()
731
+ player = undefined
732
+ })
733
+
734
+ /** A shared timeline for the worker close-up, mountain reveal and falling parcels. */
735
+ function findElement<T extends Element>(root: Element, selector: string): T {
736
+ const element = root.querySelector<T>(selector)
737
+ if (!element) throw new Error(`Missing hamster scene element: ${selector}`)
738
+ return element
739
+ }
740
+
741
+ function mountHamster429(scene: HTMLElement, unique: string, reducedMotion: boolean) {
742
+ const svg = findElement<SVGSVGElement>(scene, '.hp429-art')
743
+ const ns = 'http://www.w3.org/2000/svg'
744
+ const ids = new Map<string, string>()
745
+ svg.querySelectorAll<SVGElement>('[id]').forEach(el => { const old = el.id; ids.set(old, unique + old); el.id = unique + old; });
746
+ svg.querySelectorAll('*').forEach(el => {
747
+ for (const attr of Array.from(el.attributes)) {
748
+ if (attr.name === 'id') continue;
749
+ let value = attr.value.replace(/url\(#([^)]*)\)/g, (match, id) => ids.has(id) ? 'url(#' + ids.get(id) + ')' : match);
750
+ if ((attr.name === 'href' || attr.name === 'xlink:href') && value.startsWith('#')) value = '#' + (ids.get(value.slice(1)) || value.slice(1));
751
+ if (attr.name === 'aria-labelledby') value = value.split(' ').map(id => ids.get(id) || id).join(' ');
752
+ if (value !== attr.value) el.setAttribute(attr.name, value);
753
+ }
754
+ });
755
+ svg.setAttribute('aria-labelledby', ['hp429-title', 'hp429-desc'].map(id => ids.get(id)).join(' '));
756
+ const part = (name: string) => findElement<SVGElement>(svg, `[data-part="${name}"]`)
757
+ const camera = part('camera'), sky = part('sky-parcels'), sweat = part('sweat');
758
+ const heroBox = part('hero-box'), leftBox = part('left-box');
759
+ const heroShadow = part('hero-shadow'), leftShadow = part('left-shadow');
760
+ const impactDust = part('impact-dust'), skidDust = part('skid-dust');
761
+ const clamp = (x: number, a = 0, b = 1) => Math.max(a, Math.min(b, x));
762
+ const ease = (x: number) => { const v = clamp(x); return v * v * (3 - 2 * v); };
763
+ const lerp = (a: number, b: number, x: number) => a + (b - a) * x, mod = (n: number, m: number) => ((n % m) + m) % m;
764
+ const set = (el: SVGElement, transform: string) => el.setAttribute('transform', transform);
765
+ const create = <T extends keyof SVGElementTagNameMap>(name: T, attrs: Record<string, string | number>, parent: SVGElement) => {
766
+ const el = document.createElementNS(ns, name);
767
+ for (const [key,value] of Object.entries(attrs)) el.setAttribute(key, String(value));
768
+ parent.appendChild(el); return el;
769
+ };
770
+ const parcelRef = '#' + ids.get('hp429-parcel');
771
+ const actors = Array.from(svg.querySelectorAll<SVGGElement>('[data-actor]')).map(el => ({
772
+ el,
773
+ bob: findElement<SVGGElement>(el, '.ham-bob'),
774
+ head: findElement<SVGGElement>(el, '.ham-head'),
775
+ front: findElement<SVGGElement>(el, '.ham-foot-front'),
776
+ back: findElement<SVGGElement>(el, '.ham-foot-back'),
777
+ paw: findElement<SVGElement>(el, '.ham-paw'),
778
+ cargo: findElement<SVGGElement>(el, '.ham-cargo'),
779
+ eyes: Array.from(el.querySelectorAll<SVGElement>('.ham-eye')),
780
+ }))
781
+ const pushers = actors.slice(0, 2).map(actor => {
782
+ part('push-workers').appendChild(actor.el)
783
+ actor.cargo.setAttribute('display', 'none')
784
+ actor.paw.setAttribute('display', 'none')
785
+ for (const child of actor.bob.children) {
786
+ if (child.tagName.toLowerCase() === 'path' && child.getAttribute('d')?.startsWith('M26-65')) {
787
+ child.setAttribute('display', 'none')
788
+ }
789
+ }
790
+ // Palms stay fixed against the carton while the shoulders tremble.
791
+ const arms = [0, 1].map(index => {
792
+ const group = create('g', {}, actor.bob)
793
+ actor.bob.insertBefore(group, actor.head)
794
+ const arm = create('path', { fill: index ? 'var(--ham-fur,#c89a60)' : 'var(--ham-shade,#aa784c)' }, group)
795
+ const hand = create('g', {}, group)
796
+ create('path', { d: 'M-6-7Q1-12 8-6L13-3Q16 1 12 5L4 8Q-3 8-7 3Z', fill: '#e7c18e' }, hand)
797
+ create('path', { d: 'M5-4 8 1M1-2 4 3', stroke: '#ad805b', 'stroke-width': 1, 'stroke-linecap': 'round', fill: 'none' }, hand)
798
+ return { arm, hand }
799
+ })
800
+ create('path', { d: 'M4-97 15-94M35-94 44-97', stroke: '#886748', 'stroke-width': 2, 'stroke-linecap': 'round', fill: 'none' }, actor.head)
801
+ const mouth = create('ellipse', { cx: 43, cy: -61, rx: 3.1, ry: 2.4, fill: '#8b6550' }, actor.head)
802
+ return { ...actor, arms, mouth }
803
+ })
804
+ const porters = actors.slice(2).map(actor => ({
805
+ ...actor,
806
+ topBox: create('use', { href: parcelRef, transform: 'translate(49 -78) scale(.82)' }, actor.cargo),
807
+ }))
808
+ const rocks = Array.from(svg.querySelectorAll<SVGElement>('[data-pile-rock]'));
809
+ const fallback = [[686,113],[744,131],[458,379],[879,377],[594,237]];
810
+ const surfaces = rocks.length ? rocks.map((el,i) => ({
811
+ x: Number(el.getAttribute('data-surface-x')) || fallback[i % fallback.length][0],
812
+ y: Number(el.getAttribute('data-surface-y')) || fallback[i % fallback.length][1], el
813
+ })) : fallback.map(([x,y])=>({x,y,el:null}));
814
+ const drops = Array.from({length:12}, (_,i) => {
815
+ const el = create('g', {transform:'translate(0 -500)'}, sky);
816
+ create('use', {href:parcelRef}, el);
817
+ if (i % 5 === 2) el.setAttribute('style','--parcel-top:#c4c9a8;--parcel-front:#a4af91;--parcel-side:#7c8b70;--parcel-tape:#deddbb');
818
+ const dust = create('g', {transform:'scale(0)'}, impactDust);
819
+ create('path',{d:'M-16 0Q-22-12-13-15-7-20 0-11 4-22 13-18 23-15 19-6 29-9 31-1 28 4H-20Z'},dust);
820
+ return {el,dust};
821
+ });
822
+ const beads = Array.from({length:5}, () => create('path', {
823
+ d:'M0-5C-2-1-5 3-4 6Q-3 10 1 9Q6 8 4 4Z',transform:'scale(0)'
824
+ }, sweat));
825
+ const skid = Array.from({length:4}, () => create('ellipse', {cx:0,cy:0,rx:0,ry:0},skidDust));
826
+ // Every stride makes forward progress. Speed rises after the close-up;
827
+ // integrating the ramp keeps both position and velocity continuous.
828
+ function pushDistance(time: number) {
829
+ const ramp = clamp((time - 4.2) / 1.8);
830
+ return 12 * time + 32 * 1.8 * (ramp ** 3 - .5 * ramp ** 4)
831
+ + 32 * Math.max(0,time - 6) + .35 * (1 - Math.cos(time * 17));
832
+ }
833
+ function outboundX(distance: number, start: number, hiddenStart: number, exit: number, facing: number) {
834
+ const firstTrip = Math.abs(exit - start);
835
+ if (distance < firstTrip) return start + facing * distance;
836
+ // Both the box AND its worker have left the crop before this reset.
837
+ // The next trip begins entirely behind the foreground mountain parcels.
838
+ return hiddenStart + facing * mod(distance - firstTrip,Math.abs(exit - hiddenStart));
839
+ }
840
+ function pushPose(a: typeof pushers[number], time: number, x: number, y: number, scale: number, facing: number, phaseOffset: number) {
841
+ const p = mod(time + phaseOffset, 2.8);
842
+ const effort = .25 + .75 * Math.sin(Math.PI * clamp((p - .18) / 2.1));
843
+ const actorX = x, lean = 9 + effort * 5;
844
+ const bob = Math.sin(time * 38 + phaseOffset) * effort * .72;
845
+ set(a.el,'translate(' + actorX.toFixed(3) + ' ' + y + ') scale(' + (scale * facing) + ' ' + scale + ')');
846
+ set(a.bob,'translate(0 ' + bob.toFixed(3) + ') rotate(' + lean.toFixed(3) + ' -22 -8)');
847
+ set(a.head,'rotate(' + (-3 - effort * 2 + Math.sin(time * 28) * .6 * effort).toFixed(3) + ' 16 -77)');
848
+ const foot = Math.sin(time * 17 + phaseOffset) * (3 + effort * 6);
849
+ set(a.front,'translate(' + foot.toFixed(3) + ' ' + (-Math.max(0,Math.cos(time * 17)) * 1.7).toFixed(3) + ')');
850
+ set(a.back,'translate(' + (-foot * .9).toFixed(3) + ' 0)');
851
+ const angle = -lean * Math.PI / 180, c = Math.cos(angle), s = Math.sin(angle);
852
+ a.arms.forEach((arm,j) => {
853
+ const targetX = j ? 80 : 83, targetY = j ? -45 : -66;
854
+ const dx = targetX + 22, dy = targetY - bob + 8;
855
+ const hx = dx * c - dy * s - 22, hy = dx * s + dy * c - 8;
856
+ const sx = j ? 7 : 25, sy = j ? -27 : -45;
857
+ arm.arm.setAttribute('d','M'+(sx-6)+' '+(sy-6)+'Q'+(sx+5)+' '+(hy+14)+' '+(hx-3)+' '+(hy-5)+'L'+(hx+3)+' '+(hy+6)+'Q'+(sx+12)+' '+(hy+27)+' '+(sx-3)+' '+(sy+8)+'Z');
858
+ set(arm.hand,'translate('+hx.toFixed(3)+' '+hy.toFixed(3)+') rotate('+(-lean).toFixed(3)+')');
859
+ });
860
+ const eyeHeight = .8 - effort * .42;
861
+ for (const eye of a.eyes) set(eye,'translate(0 -88) scale(1 '+eyeHeight.toFixed(3)+') translate(0 88)');
862
+ a.mouth.setAttribute('ry',(1.7 + effort * 1.3).toFixed(2));
863
+ return {effort,x:actorX};
864
+ }
865
+ function render(t: number) {
866
+ // Work moves forward during the close-up; the camera reveals the whole hill once.
867
+ const reveal = ease((t - 4.2) / 5.0), zoom = lerp(3.2,1,reveal);
868
+ const tx = lerp(600 - 3.2 * 1020,0,reveal), ty = lerp(420 - 3.2 * 585,0,reveal);
869
+ set(camera,'translate('+tx.toFixed(3)+' '+ty.toFixed(3)+') scale('+zoom.toFixed(5)+')');
870
+ const distance = pushDistance(t);
871
+ const hero = pushPose(pushers[0],t,outboundX(distance,974,780,1280,1),628,.62,1,0);
872
+ const left = pushPose(pushers[1],t,outboundX(distance,299,490,-100,-1),628,.57,-1,1.2);
873
+ set(heroBox,'translate('+(hero.x+86).toFixed(3)+' 620) scale(1.32)');
874
+ set(leftBox,'translate('+(left.x-79).toFixed(3)+' 623) scale(1.1)');
875
+ heroShadow.setAttribute('cx',(hero.x+86).toFixed(3));
876
+ leftShadow.setAttribute('cx',(left.x-79).toFixed(3));
877
+ // Porters enter and leave beyond the crop; recycled instances never jump in view.
878
+ for (const porter of porters) set(porter.el, 'translate(-400 660)')
879
+ const lastPorter = Math.floor((t + 1.8) / 5.5);
880
+ for (let n = Math.max(0,lastPorter-3); n <= lastPorter; n++) {
881
+ const age = t - (n * 5.5 - 1.8), x = -150 + age * 104;
882
+ if (age < 0 || x < -150 || x > 1320) continue;
883
+ const a = porters[mod(n, porters.length)], gait = t * 17 + n * 1.7;
884
+ set(a.el,'translate('+x.toFixed(3)+' 658) scale(.5)');
885
+ set(a.bob,'translate(0 '+(-Math.abs(Math.sin(gait))*3).toFixed(3)+') rotate(4 0 -25)');
886
+ set(a.head,'rotate('+(-4+Math.sin(gait*.5)*1.5).toFixed(3)+' 16 -77)');
887
+ set(a.front,'translate('+(Math.sin(gait)*11).toFixed(3)+' '+(-Math.max(0,Math.cos(gait))*4).toFixed(3)+')');
888
+ set(a.back,'translate('+(-Math.sin(gait)*10).toFixed(3)+' '+(-Math.max(0,-Math.cos(gait))*4).toFixed(3)+')');
889
+ set(a.cargo,'rotate('+(Math.sin(gait*.5)*2).toFixed(3)+' 50 -45)');
890
+ set(a.topBox,'translate(49 -78) rotate('+(Math.sin(gait*.5+1)*2.5).toFixed(3)+') scale(.82)');
891
+ }
892
+ // Deliveries fall from an unseen source. The pile occludes their far-side roll.
893
+ for (const rock of rocks) set(rock,'translate(0 0)');
894
+ for (const drop of drops) { set(drop.el,'translate(0 -500)'); set(drop.dust,'scale(0)'); }
895
+ const lastDrop = Math.floor(t / .72);
896
+ for (let n = lastDrop - 6; n <= lastDrop; n++) {
897
+ const age = t - n * .72, drop = drops[mod(n,12)], target = surfaces[mod(n,surfaces.length)];
898
+ const size = .67 + mod(n,3) * .09;
899
+ const duration = 1.35 + (target.y / 650) * .5 + mod(n,2) * .08;
900
+ const startX = target.x + [-78,66,-45,93,30][mod(n,5)];
901
+ let x, y, angle;
902
+ if (age < duration) {
903
+ const u = clamp(age / duration);
904
+ x = lerp(startX,target.x,u);
905
+ y = -180 + (target.y - size * 9 + 180) * (.16*u + .84*u*u);
906
+ angle = lerp(-50 + mod(n,4)*29,8 - mod(n,3)*9,u);
907
+ } else {
908
+ const landed = age - duration;
909
+ if (landed > .92) continue;
910
+ const inward = Math.sign(700-target.x) || 1;
911
+ x = target.x + inward * 25 * ease((landed-.2)/.62);
912
+ y = target.y - size*9 - Math.sin(clamp(landed/.28)*Math.PI)*13 + 100*ease((landed-.2)/.62);
913
+ angle = 8 - mod(n,3)*9 + inward*34*ease(landed/.7);
914
+ const jolt = Math.sin(landed*29)*Math.exp(-landed*8);
915
+ if (target.el) set(target.el,'translate(0 '+(jolt*2.5).toFixed(3)+')');
916
+ const puff = Math.sin(clamp(landed/.48)*Math.PI);
917
+ set(drop.dust,'translate('+target.x.toFixed(2)+' '+(target.y-2-landed*13).toFixed(2)+') scale('+(puff*.45).toFixed(3)+')');
918
+ }
919
+ set(drop.el,'translate('+x.toFixed(3)+' '+y.toFixed(3)+') rotate('+angle.toFixed(3)+') scale('+size+')');
920
+ }
921
+ beads.forEach((bead,i) => {
922
+ const progress = mod(t * .86 + i * .27,1), growing = Math.sin(progress*Math.PI), isLeft = i > 2;
923
+ const x = isLeft ? left.x-11-progress*10 : hero.x+19-progress*10-i*3;
924
+ const y = (isLeft?570:566) + progress*37;
925
+ set(bead,'translate('+x.toFixed(3)+' '+y.toFixed(3)+') rotate('+(isLeft?22:-20)+') scale('+(growing*(isLeft?.32:.38)).toFixed(3)+')');
926
+ });
927
+ skid.forEach((puff,i) => {
928
+ const q = mod(t*1.35+i*.23,1), size = Math.sin(q*Math.PI), isLeft = i>1;
929
+ puff.setAttribute('cx',((isLeft?left.x+22:hero.x-21)+(isLeft?1:-1)*q*13).toFixed(2));
930
+ puff.setAttribute('cy',(632-q*3).toFixed(2));
931
+ puff.setAttribute('rx',(size*4.2).toFixed(2)); puff.setAttribute('ry',(size*2.0).toFixed(2));
932
+ });
933
+ scene.dataset.phase = t < 4.2 ? 'close-up' : t < 9.2 ? 'reveal' : 'wide';
934
+ scene.dataset.time = t.toFixed(2);
935
+ }
936
+ const pauseButton = findElement<HTMLButtonElement>(scene, '[data-action="pause"]')
937
+ const replayButton = findElement<HTMLButtonElement>(scene, '[data-action="replay"]')
938
+ const stillFrame = 12
939
+ const pauseIcon = findElement<SVGElement>(pauseButton, '[data-icon="pause"]')
940
+ const playIcon = findElement<SVGElement>(pauseButton, '[data-icon="play"]')
941
+ let elapsed = reducedMotion ? stillFrame : 0
942
+ let userPaused = false
943
+ let offscreen = false
944
+ let frameId = 0
945
+ let lastFrame: number | undefined
946
+
947
+ function canPlay() {
948
+ return !reducedMotion && !userPaused && !document.hidden && !offscreen
949
+ }
950
+
951
+ function frame(now: number) {
952
+ frameId = 0
953
+ if (!canPlay()) return
954
+ if (lastFrame !== undefined) elapsed += Math.min((now - lastFrame) / 1000, .06)
955
+ lastFrame = now
956
+ render(elapsed)
957
+ frameId = requestAnimationFrame(frame)
958
+ }
959
+
960
+ function sync() {
961
+ cancelAnimationFrame(frameId)
962
+ lastFrame = undefined
963
+ pauseButton.setAttribute('aria-label', userPaused ? '播放动画' : '暂停动画')
964
+ pauseButton.setAttribute('aria-pressed', String(userPaused))
965
+ pauseIcon.toggleAttribute('hidden', userPaused)
966
+ playIcon.toggleAttribute('hidden', !userPaused)
967
+ frameId = canPlay() ? requestAnimationFrame(frame) : 0
968
+ }
969
+
970
+ function togglePause() {
971
+ userPaused = !userPaused
972
+ sync()
973
+ }
974
+
975
+ function replay() {
976
+ elapsed = 0
977
+ userPaused = false
978
+ render(elapsed)
979
+ sync()
980
+ }
981
+
982
+ pauseButton.addEventListener('click', togglePause)
983
+ replayButton.addEventListener('click', replay)
984
+ document.addEventListener('visibilitychange', sync)
985
+ const observer = typeof IntersectionObserver === 'function'
986
+ ? new IntersectionObserver(([entry]) => {
987
+ offscreen = !entry.isIntersecting
988
+ sync()
989
+ })
990
+ : undefined
991
+ observer?.observe(scene)
992
+ render(elapsed)
993
+ sync()
994
+
995
+ return {
996
+ setReducedMotion(reduced: boolean) {
997
+ reducedMotion = reduced
998
+ if (reduced) elapsed = stillFrame
999
+ render(elapsed)
1000
+ sync()
1001
+ },
1002
+ destroy() {
1003
+ cancelAnimationFrame(frameId)
1004
+ observer?.disconnect()
1005
+ pauseButton.removeEventListener('click', togglePause)
1006
+ replayButton.removeEventListener('click', replay)
1007
+ document.removeEventListener('visibilitychange', sync)
1008
+ },
1009
+ };
1010
+ }
1011
+ </script>
1012
+
1013
+ <style scoped>
1014
+ .hp429-scene {
1015
+ --hp-sky-top: #f4ead8; --hp-sky: #e8e3c9; --hp-sun: #fdf6d5;
1016
+ --hp-paper-shadow: #d4cbbb; --hp-mountain-far: #dadcc1; --hp-mountain-fold: #e5e2ca; --hp-mountain-near: #bcc7ac;
1017
+ --hp-pine: #869981; --hp-ground-back: #aebc91; --hp-ground: #c5c69d;
1018
+ --hp-path: #d3c99e; --hp-path-light: #eee0b9; --hp-path-edge: #b5ac85; --hp-grass: #89966c;
1019
+ --hp-leaf-dark: #83936f; --hp-leaf-mid: #a5b17c; --hp-leaf-light: #c2c58e; --hp-leaf-fold: #97a26f;
1020
+ --hp-wall: #dfcda8; --hp-wall-shade: #b4a487; --hp-wall-side: #c2b28f;
1021
+ --hp-foreground: #82916f;
1022
+ position: relative; margin: 0; min-width: 0; width: 100%;
1023
+ }
1024
+ .hp429-window { padding: 5px; overflow: hidden; }
1025
+ .hp429-art { display: block; width: 100%; height: auto; overflow: visible; isolation: isolate; }
1026
+ .hp429-art [data-part], .hp429-art [data-actor], .hp429-art .ham-bob, .hp429-art .ham-head, .hp429-art .ham-eye, .hp429-art .ham-cargo, .hp429-art .ham-foot-back, .hp429-art .ham-foot-front { transform-box: view-box; }
1027
+ .hp429-controls { position: absolute; right: 2.5%; bottom: -21px; display: flex; align-items: center; gap: 1px; }
1028
+ .hp429-control { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; padding: 0; border-radius: 50%; color: var(--apple-secondary); background: transparent; cursor: pointer; }
1029
+ .hp429-control:hover { background: var(--apple-hover); }
1030
+ .hp429-control:focus-visible { outline: 2px solid var(--apple-accent); outline-offset: 2px; }
1031
+ .hp429-control svg[hidden] { display: none; }
1032
+ @media (max-width: 880px) { .hp429-controls { bottom: -24px; } }
1033
+ @media (max-width: 420px) {
1034
+ .hp429-window { margin-inline: -9px; padding: 4px; }
1035
+ .hp429-controls { right: 0; }
1036
+ }
1037
+ @media (pointer: coarse) { .hp429-control { width: 44px; height: 44px; } }
1038
+ .hp429-scene[data-theme="dark"] {
1039
+ --hp-sky-top: #253536; --hp-sky: #354a47; --hp-sun: #ddcd9d; --hp-paper-shadow: #15231f;
1040
+ --hp-mountain-far: #3a5149; --hp-mountain-fold: #3f5850; --hp-mountain-near: #466357; --hp-pine: #78917b;
1041
+ --hp-ground-back: #60795c; --hp-ground: #788462; --hp-path: #9c9d72; --hp-path-light: #c0b58a; --hp-path-edge: #727a57; --hp-grass: #526c4b;
1042
+ --hp-leaf-dark: #496549; --hp-leaf-mid: #738958; --hp-leaf-light: #94a66b; --hp-leaf-fold: #59764d;
1043
+ --hp-wall: #b3ab89; --hp-wall-shade: #817f64; --hp-wall-side: #999474; --hp-foreground: #334e42;
1044
+ }
1045
+ </style>