okooooooo/Piik
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4ff970f483c19b367a5d6f95961a29de86a8d0ab
Piik/site/assets/living-room.svg
T
AAA 4ff970f483 fix(website): simplify downloads and scope product releases (#390) 
## Problem and outcome

Website visitors can download the usual Windows x64, macOS Apple silicon
and Linux x64 App packages directly from clearly labeled platform cards.
Each card includes a verified Gitee alternative, with shared setup
guidance and a More downloads link for the full release list. The
homepage reuses the application's 20 bilingual greetings, and the sample
game no longer displays an invented title.

Website builds resolve links from the latest published GitHub release
and validate matching mirror assets. Website deployment follows main CI
so newly published packages reach the next site build. Version selection
and release notes now share a product-change filter: standalone website,
documentation and maintenance changes do not create App/Server releases
or affect the next product version.

## Verification

- `npm run check`: 57 test files / 759 tests, TypeScript and product
production build passed.
- Website build passed with real GitHub/Gitee v1.0.0 metadata and with
the explicit local fallback.
- English and Chinese browser checks at 390px and 1440px passed:
platform links, More downloads, greeting selection and language
switching.
- All 23 website film check groups passed; the final shared artwork
change rebuilt successfully.
- Documentation, repository hygiene and diff checks passed. Real
Git-history tests cover product/website mixtures and moves across the
release boundary; the accepted phase plans `publish: false`.

## Impact

GitHub remains the version authority; Gitee is a download mirror.
Unavailable mirror metadata falls back to its release page. Product
runtime behavior and package compatibility are unchanged. Physical
macOS/Linux capture and broader device/network limits remain documented.
2026-09-12 23:01:48 +08:00

258 lines
55 KiB
XML
Raw Blame History

<svg xmlns="http://www.w3.org/2000/svg" id="still" width="900" height="590" viewBox="0 0 900 590" fill="none" role="img" aria-labelledby="title desc">
<title id="title">Share the good stuff</title>
<desc id="desc">A host with a small gold crown shares an RPG, a pencil drawing, travel photos and a movie. Three friends watch from a warm orange sofa, with the Piik mascot nearby.</desc>
<defs>
<g id="person" fill="currentColor" stroke="none">
<circle cx="0" cy="-31" r="20"/>
<path d="M-35 51.5c0-32.5 12.5-50 35-50s35 17.5 35 50q0 7.5-7.5 7.5h-55Q-35 59-35 51.5Z"/>
</g>
<g id="eyes" fill="#22303e" stroke="none"><ellipse cx="-7" cy="-30.75" rx="2.75" ry="3.75"/><ellipse cx="7" cy="-30.75" rx="2.75" ry="3.75"/></g>
<clipPath id="screen"><rect x="284" y="111" width="370" height="190" rx="13"/></clipPath>
</defs>
<style>
.person-body { transform-origin:0 59px; }
.person-eyes { transform-origin:0 -30.75px; }
@media (prefers-reduced-motion:no-preference) {
.person-body { animation:lean var(--pace) ease-in-out var(--phase) infinite; }
.person-eyes { animation:look var(--pace) ease-in-out var(--phase) infinite; }
.game-hand { animation:play 7.4s ease-in-out var(--tap-delay,0s) infinite; }
}
:root:target .person-body, :root:target .person-eyes, :root:target .game-hand { animation:none; }
@keyframes lean { 0%,36%,43%,100%{transform:none} 38%,41%{transform:rotate(3deg)} }
@keyframes look { 0%,3%,3.6%,12%,16%,47%,47.6%,61%,67%,100%{transform:none} 3.3%,47.3%{transform:scaleY(.14)} 13%,15%{transform:translate(2px,-2px)} 62%,63%{transform:translateX(-2px)} 65%,66%{transform:translateX(2px)} }
@keyframes play { 0%,19%,27%,54%,64%,100%{transform:none} 22%,25%{transform:translate(-2px,-2px)} 57%,61%{transform:translate(2px,-1px)} }
</style>
<path d="M78 277C63 147 164 70 302 62c127-8 186-50 314-20 130 30 214 127 216 249 3 159-91 247-245 252l-292-3C145 536 70 457 78 277Z" fill="#f7f4e9"/>
<path d="M122 267c2-113 90-171 211-171 138 0 163-39 277 5 101 39 149 104 158 216H122Z" fill="#dcebe1"/>
<ellipse cx="460" cy="504" rx="350" ry="48" fill="#c8dccf"/>
<ellipse cx="460" cy="504" rx="296" ry="30" stroke="#f7f4e9" stroke-width="3"/>
<g stroke="#22303e" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
<!-- Original screen content; room figures follow the shared UI identity. -->
<path d="m439 52 30 25 30-25"/><path d="m331 324-14 22m289-22 14 22" stroke-width="6"/>
<rect x="264" y="78" width="410" height="248" rx="29" fill="#22303e"/>
<rect x="279" y="93" width="380" height="211" rx="16" fill="#fffdf5" stroke="none"/>
<g stroke="none"><circle cx="292" cy="103" r="2.5" fill="#e58b69"/><circle cx="301" cy="103" r="2.5" fill="#edc969"/><circle cx="310" cy="103" r="2.5" fill="#77b29a"/><rect x="434" y="100" width="70" height="4" rx="2" fill="#dce7df"/></g>
<g clip-path="url(#screen)" stroke="none">
<!-- Shared activities: generated by scripts/update-website-hero.mjs. -->
<svg x="284" y="111" width="370" height="190" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" stroke="none" font-family="ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif"><g id="activity-rpg"><style>#hero-rpg-water{transform:translate(-5.69px,0px)}#hero-rpg-flowers{transform:skewX(-1.22deg)}#hero-rpg-shadow{transform:translate(907.7px,544.82px)}#hero-rpg-player{transform:translate(907.7px,522.94px) rotate(2.88deg)}#hero-rpg-lid{transform:scaleY(1)}#hero-rpg-treasure{transform:translate(1028px,457px) scale(0)}</style><rect width="1600" height="900" fill="#bbd596"/>
<path d="M0 0h1600v240q-263-98-520-33T480 181 0 280Z" fill="#91b780"/>
<path d="M0 567q224-38 290 148t227 185H0Z" fill="#91c9c6"/>
<path d="M0 558q224-38 299 158t230 184" fill="none" stroke="#eef0bd" stroke-width="18"/>
<g id="hero-rpg-water" fill="none" stroke="#d4ece0" stroke-width="5" stroke-linecap="round"><path d="M33 690h102m-75 60h109m50 90h111M28 845h76"/></g>
<path d="M436 934q78-205 231-276t386-179 230-229" fill="none" stroke="#d7cc99" stroke-width="94"/>
<path d="M436 934q78-205 231-276t386-179 230-229" fill="none" stroke="#e9dfb1" stroke-width="65"/>
<g fill="#a3bd7c"><ellipse cx="391" cy="330" rx="230" ry="100"/><ellipse cx="740" cy="167" rx="220" ry="72"/><ellipse cx="1110" cy="740" rx="310" ry="90"/></g>
<g fill="none" stroke="#86aa74" stroke-width="5" stroke-linecap="round"><path d="m330 400 -5-12m11 11 5-15m7 18 6-9"/><path d="m580 302 -5-12m11 11 5-15m7 18 6-9"/><path d="m910 699 -5-12m11 11 5-15m7 18 6-9"/><path d="m1080 643 -5-12m11 11 5-15m7 18 6-9"/><path d="m715 786 -5-12m11 11 5-15m7 18 6-9"/><path d="m1440 566 -5-12m11 11 5-15m7 18 6-9"/><path d="m469 626 -5-12m11 11 5-15m7 18 6-9"/></g>
<g transform="translate(1240 276)"><ellipse cy="83" rx="150" ry="32" fill="#31594b" opacity=".16"/>
<path d="M-114 82V-97q0-41 40-41H71q40 0 40 41V82H63V-85H-65V82Z" fill="#758d83"/>
<path d="M-105 67V-102q0-26 29-26H73q29 0 29 26v24H-105Z" fill="#b5c6aa"/>
<path d="M-63-78H63V74H-63Z" fill="#355e56"/>
<path d="m0-111 11 15-11 15-11-15Z" fill="#e9dfb1"/>
<path d="m-104 8 35 1m35-125 4 36m73-33-7 36m68 6-35 2" stroke="#607f73" stroke-width="4"/>
<path d="m-122 64 25-3 8 21h-42Zm218 13 17-19 24 13 6 16h-48Z" fill="#9eaf99"/></g>
<g transform="translate(172 302) scale(1.35)"><ellipse cy="65" rx="73" ry="23" fill="#31594b" opacity=".18"/><path d="M-7 9h14v57H-7Z" fill="#816947"/><path d="M-69 12q-2-48 38-46 6-66 54-38 43-3 40 40 42 36 4 65-24 24-57 3-46 13-79-24Z" fill="#428570"/><path d="M-58-6q-9-32 29-32 11-45 44-34 37 8 35 35-21 29-47 14-20 36-61 17Z" fill="#72aa7e"/></g><g transform="translate(380 155) scale(0.92)"><ellipse cy="65" rx="73" ry="23" fill="#31594b" opacity=".18"/><path d="M-7 9h14v57H-7Z" fill="#816947"/><path d="M-69 12q-2-48 38-46 6-66 54-38 43-3 40 40 42 36 4 65-24 24-57 3-46 13-79-24Z" fill="#428570"/><path d="M-58-6q-9-32 29-32 11-45 44-34 37 8 35 35-21 29-47 14-20 36-61 17Z" fill="#72aa7e"/></g><g transform="translate(1460 335) scale(1.2)"><ellipse cy="65" rx="73" ry="23" fill="#31594b" opacity=".18"/><path d="M-7 9h14v57H-7Z" fill="#816947"/><path d="M-69 12q-2-48 38-46 6-66 54-38 43-3 40 40 42 36 4 65-24 24-57 3-46 13-79-24Z" fill="#428570"/><path d="M-58-6q-9-32 29-32 11-45 44-34 37 8 35 35-21 29-47 14-20 36-61 17Z" fill="#72aa7e"/></g><g transform="translate(969 96) scale(0.9)"><ellipse cy="65" rx="73" ry="23" fill="#31594b" opacity=".18"/><path d="M-7 9h14v57H-7Z" fill="#816947"/><path d="M-69 12q-2-48 38-46 6-66 54-38 43-3 40 40 42 36 4 65-24 24-57 3-46 13-79-24Z" fill="#428570"/><path d="M-58-6q-9-32 29-32 11-45 44-34 37 8 35 35-21 29-47 14-20 36-61 17Z" fill="#72aa7e"/></g>
<g id="hero-rpg-flowers" fill="#faf5e7"><path d="m467 205 -7-5 1-7 7 3 5-5 5 4-4 7 6 4-3 5-7-3-5 4-5-5Z"/><path d="m478 222 -7-5 1-7 7 3 5-5 5 4-4 7 6 4-3 5-7-3-5 4-5-5Z"/><path d="m745 717 -7-5 1-7 7 3 5-5 5 4-4 7 6 4-3 5-7-3-5 4-5-5Z"/><path d="m777 745 -7-5 1-7 7 3 5-5 5 4-4 7 6 4-3 5-7-3-5 4-5-5Z"/><path d="m1340 661 -7-5 1-7 7 3 5-5 5 4-4 7 6 4-3 5-7-3-5 4-5-5Z"/><path d="m1370 679 -7-5 1-7 7 3 5-5 5 4-4 7 6 4-3 5-7-3-5 4-5-5Z"/></g>
<g transform="translate(1028 477)"><ellipse cy="63" rx="87" ry="21" fill="#31594b" opacity=".18"/>
<path d="m-66 5 115 29 36-38-114-29Z" fill="#503e36" stroke="#f0c66d" stroke-width="7" stroke-linejoin="round"/>
<path d="m-66 5 115 29v47L-66 52Z" fill="#b37748"/><path d="m49 34 36-38v47L49 81Z" fill="#805337"/>
<path d="m-45 13v45m70-27v45" stroke="#edbf64" stroke-width="11"/><path d="m-64 49 112 28 35-37" fill="none" stroke="#d9a34f" stroke-width="5"/>
<path d="m-29 20 45 12v8l-45-12Z" fill="#996139"/><path d="m-15 20 20 5v24l-20-5Z" fill="#ffe1a0"/><path d="m-7 30 5 1v8l-5-1Z" fill="#815b37"/>
<g transform="translate(-29 -33) rotate(14)"><g id="hero-rpg-lid">
<path d="M0 0h119l-26 46H-27Z" fill="#c58950" stroke="#f0c66d" stroke-width="6" stroke-linejoin="round"/>
<path d="M21 1-5 45m97-44L66 45" stroke="#ffe1a0" stroke-width="11"/>
<path d="M44 10h29l-12 24H31Z" fill="#a86f45"/>
</g></g>
</g>
<ellipse id="hero-rpg-shadow" rx="46" ry="13" fill="#31594b" opacity=".22"/>
<g id="hero-rpg-player" style="color:#203037"><g transform="translate(-36 -44) scale(2.4)"><rect x="1" y="13" width="10" height="14" rx="3" fill="#db8755"/><g fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
<g class="mascot-shell"><rect pathLength="1" x="4" y="8" width="24" height="18" rx="4" fill="#faf5e7"/>
<path class="mascot-antenna" pathLength="1" d="m11 4 5 4 5-4"/>
<path class="mascot-feet" pathLength="1" d="M10 29l2-3m10 3-2-3"/></g>
<g id="hero-rpg-hero-eyes" class="mascot-face">
<circle cx="11.5" cy="16.5" r="1.25" fill="currentColor" stroke="none"/>
<circle id="hero-rpg-hero-open" class="mascot-eye-open" cx="21.35" cy="16.5" r="1.25" fill="currentColor" stroke="none" opacity="0"/>
<path id="hero-rpg-hero-wink" class="mascot-eye-wink" pathLength="1" d="M19 17c1.5-1.8 3.2-1.8 4.7 0"/>
</g>
<g id="hero-rpg-hero-sparkles" class="mascot-sparkles" stroke="#d7982b" stroke-width="1.2" fill="#f4c14d" opacity="0">
<path d="m25 11.5 .8 1.9 1.9.8-1.9.8-.8 1.9-.8-1.9-1.9-.8 1.9-.8.8-1.9Z"/>
<path d="m25 17.2 .45 1.1 1.1.45-1.1.45-.45 1.1-.45-1.1-1.1-.45 1.1-.45.45-1.1Z"/>
</g></g></g></g>
<g id="hero-rpg-treasure"><circle r="53" fill="#fff3bd" opacity=".22"/><path d="m0-31 24 31-24 31-24-31Z" fill="#ffe391" stroke="#bb8537" stroke-width="3"/><path d="m0-31 0 62-24-31Z" fill="#fff5cd"/><path d="m-45-8-12-6m11 37-10 9m102-40 12-6m-11 37 10 9M0-55v-12" stroke="#fff5ce" stroke-width="5" stroke-linecap="round"/></g>
<g transform="translate(1435 779) scale(1.6)"><ellipse cy="65" rx="73" ry="23" fill="#31594b" opacity=".18"/><path d="M-7 9h14v57H-7Z" fill="#816947"/><path d="M-69 12q-2-48 38-46 6-66 54-38 43-3 40 40 42 36 4 65-24 24-57 3-46 13-79-24Z" fill="#428570"/><path d="M-58-6q-9-32 29-32 11-45 44-34 37 8 35 35-21 29-47 14-20 36-61 17Z" fill="#72aa7e"/></g><g transform="translate(744 952) scale(1.22)"><ellipse cy="65" rx="73" ry="23" fill="#31594b" opacity=".18"/><path d="M-7 9h14v57H-7Z" fill="#816947"/><path d="M-69 12q-2-48 38-46 6-66 54-38 43-3 40 40 42 36 4 65-24 24-57 3-46 13-79-24Z" fill="#428570"/><path d="M-58-6q-9-32 29-32 11-45 44-34 37 8 35 35-21 29-47 14-20 36-61 17Z" fill="#72aa7e"/></g>
<g transform="translate(1415 94)" stroke="#faf5e7" stroke-width="4" fill="none"><circle r="32"/><path d="m0-19 8 19-8 19-8-19Z" fill="#faf5e7"/><path d="M0-41v-8m41 49h8m-49 41v8m-41-49h-8"/></g></g>
<g id="activity-drawing">
<rect width="1600" height="900" fill="#f3cc68"/>
<path d="M-130 750Q220-60 600 580T1720 300" fill="none" stroke="#f47843" stroke-width="190"/>
<g id="hero-paper"><g transform="translate(490 85) rotate(8 310 360)"><rect width="620" height="720" rx="5" fill="#faf7ed"/>
<g fill="none" stroke="#bdbaac" stroke-width="1.5" opacity=".65">
<path d="m138 197 312-36 61 341-312 31Zm33-19 63 376m193-415 62 371M123 331l390-45M304 123l59 424"/>
<ellipse cx="336" cy="327" rx="138" ry="161" transform="rotate(-8 336 327)"/>
<path d="M176 246q-11-48 16-55l225-27q49-3 57 42l25 201q5 51-35 49l-235 28q-46-1-49-44ZM242 184l-38-40m62 44 43-58"/>
<ellipse cx="276" cy="300" rx="24" ry="29"/><ellipse cx="379" cy="288" rx="26" ry="28"/>
<path d="m88 590 63-7m-45 14 119-12m273-469 38-9m-35 19 53-11"/>
</g>
<g fill="none" stroke="#edbc7b" stroke-width="2" opacity=".75">
<path d="M133 471Q80 224 215 147m269 61q89 174 15 284M132 552q187 50 391-40"/>
<path d="m121 540 11 12-16 7m384-56 23 9-16 14"/>
</g>
<g fill="none" stroke="#414842" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round">
<path id="hero-sketch-stroke-0" d="M177 245Q160 203 195 195L414 171Q455 164 467 206L492 406Q500 445 463 451L231 477Q190 482 187 444Z" pathLength="1" stroke-dasharray="1"/><path id="hero-sketch-stroke-1" d="M189 246Q179 214 211 211L414 187Q444 184 450 213L476 405Q480 432 453 438L231 461Q207 465 204 439Z" pathLength="1" stroke-dasharray="1"/><path id="hero-sketch-stroke-2" d="M256 189 210 151" pathLength="1" stroke-dasharray="1"/><path id="hero-sketch-stroke-3" d="M257 185 298 134" pathLength="1" stroke-dasharray="1"/><path id="hero-sketch-stroke-4" d="M270 288Q282 284 285 296T278 312Q266 315 265 303T270 288" pathLength="1" stroke-dasharray="1"/><path id="hero-sketch-stroke-5" d="M362 296Q377 271 398 291" pathLength="1" stroke-dasharray="1"/><path id="hero-sketch-stroke-6" d="M242 475 222 506" pathLength="1" stroke-dasharray="1"/><path id="hero-sketch-stroke-7" d="M432 455 453 486" pathLength="1" stroke-dasharray="1"/><path id="hero-sketch-stroke-8" d="M216 221 229 441" pathLength="1" stroke-dasharray="1"/><path id="hero-sketch-stroke-9" d="M226 447 454 426" pathLength="1" stroke-dasharray="1"/><path id="hero-sketch-stroke-10" d="M166 523Q307 544 499 500" pathLength="1" stroke-dasharray="1"/>
</g>
<g fill="none" stroke="#657066" stroke-width="1.5" opacity=".7">
<path d="m213 488 20 15"/><path d="m220 487.2 20 15"/><path d="m227 486.4 20 15"/><path d="m234 485.6 20 15"/><path d="m241 484.8 20 15"/><path d="m248 484 20 15"/><path d="m255 483.2 20 15"/><path d="m262 482.4 20 15"/><path d="m269 481.6 20 15"/><path d="m276 480.8 20 15"/><path d="m283 480 20 15"/><path d="m290 479.2 20 15"/>
<path d="m471 342 12-17"/><path d="m473 353 12-17"/><path d="m475 364 12-17"/><path d="m477 375 12-17"/><path d="m479 386 12-17"/><path d="m481 397 12-17"/><path d="m483 408 12-17"/><path d="m485 419 12-17"/>
<path d="m151 598 160-19m-144 27 66-11m169-5 119-20"/>
</g>
<path d="M44 54h66m-66 10h37M491 645h69m-35-8v16" stroke="#a3a699" stroke-width="2"/>
</g></g>
<g id="hero-pencil"><path d="M-11-255h22v217l-11 38-11-38Z" fill="#203037"/><path d="m-11-38 11 38 11-38Z" fill="#d6b68b"/><path d="M-3-10 0 0 3-10Z" fill="#203037"/><path d="M-4-240v188" stroke="#faf5e7" stroke-width="3"/></g>
</g>
<g id="activity-photos"><rect width="1600" height="900" fill="#203037"/><g id="hero-photos"><rect width="1600" height="900" fill="#203037"/>
<path d="M148 683q-49-268 192-414t595-108 502 112" fill="none" stroke="#6a8b80" stroke-width="5" stroke-dasharray="11 16"/>
<path d="m1339 258 14 29 31 4-23 22 6 31-28-15-28 15 5-31-22-22 31-4Z" fill="#f3cc68"/>
<path d="m236 696 153 23-21 117-153-23Z" fill="#df9c6c"/>
<path d="m255 726 86 13m-90 10 70 11m-74 11 81 12" stroke="#203037" stroke-width="6" opacity=".55"/>
<text x="267" y="807" transform="rotate(9 267 807)" fill="#203037" font-family="ui-monospace,monospace" font-size="25" font-weight="700">9527</text>
<g transform="translate(206 72) rotate(-12 410 300)">
<rect x="11" y="15" width="820" height="645" rx="12" fill="#111f26" opacity=".35"/>
<rect width="820" height="645" rx="12" fill="#faf5e7"/>
<svg x="24" y="24" width="772" height="516" viewBox="0 0 772 516" overflow="hidden">
<rect width="772" height="516" fill="#b7d6d2"/>
<circle cx="600" cy="106" r="62" fill="#f3cc68"/>
<path d="M-45 375 197 94 381 327 529 157 826 455v100H-45Z" fill="#85a99a"/>
<path d="m124 178 73-84 85 107-46-13-38 26-29-32Z" fill="#faf5e7"/>
<path d="M-43 504 185 320 365 384 486 268 833 473v96H-43Z" fill="#557f70"/>
<path d="M-60 438q178-51 316 11t296-4 268 21v90H-60Z" fill="#8caa79"/>
<path d="m0 474 176-3 55-63 203-1 74 91 267-9v50H0Z" fill="#c9c399"/>
<g transform="translate(275 351) rotate(-5)"><path d="M-29 62q0-70 29-70t29 70Z" fill="#8ebbd6"/><circle cy="-33" r="23" fill="#8ebbd6"/><path d="M-29-45q29-39 58 0Z" fill="#e9d2a0"/><path d="M-38-43h76" stroke="#c6a774" stroke-width="8" stroke-linecap="round"/><path d="M-7-31v3m14-3v3" stroke="#203037" stroke-width="4" stroke-linecap="round"/></g>
<g transform="translate(348 365) rotate(9)"><path d="M-27 53q0-60 27-60t27 60Z" fill="#d6958c"/><circle cy="-31" r="22" fill="#d6958c"/><path d="M-8-30v3m15-3v3" stroke="#203037" stroke-width="4" stroke-linecap="round"/><circle cx="45" cy="-40" r="7" fill="#d6958c"/><path d="m40-45 4-11m5 14 9-5" stroke="#d6958c" stroke-width="6" stroke-linecap="round"/></g>
<g transform="translate(138 437) rotate(22)"><path d="M-22 45q0-52 22-52t22 52Z" fill="#e8bf6c"/><circle cy="-26" r="19" fill="#e8bf6c"/><path d="m-7-28 4 3m8-1 4-3" stroke="#203037" stroke-width="3" stroke-linecap="round"/><path d="M26-5 10 9 44 45" fill="none" stroke="#6c7052" stroke-width="5" stroke-linecap="round"/><circle cx="10" cy="9" r="6" fill="#e8bf6c"/></g>
<path d="m-5 482 44-57-9 66 28-33-12 65m621-6 9-51 15 44 16-22 3 50" fill="#355e50"/>
</svg>
<path d="M61 580h226m-225 16h146" stroke="#b2b5a3" stroke-width="6" stroke-linecap="round"/>
<text x="725" y="602" fill="#597b69" font-family="ui-monospace,monospace" font-size="36" font-weight="700">01</text>
<path d="m319-7 155 8-10 42-153-9Z" fill="#d7b179" opacity=".9"/>
</g>
<g transform="translate(644 245) rotate(9 360 255)">
<rect x="12" y="14" width="720" height="562" rx="12" fill="#111f26" opacity=".3"/>
<rect width="720" height="562" rx="12" fill="#faf5e7"/>
<svg x="24" y="24" width="672" height="440" viewBox="0 0 672 440" overflow="hidden">
<rect width="672" height="440" fill="#b9d4d8"/>
<path d="M0 228h672v212H0Z" fill="#6f9d9f"/>
<path d="M0 246h83m25 17h91m52-20h69m44 5h112m19 21h51m53-23h73" stroke="#dbe8dc" stroke-width="5" stroke-linecap="round"/>
<svg width="328" height="440" viewBox="0 0 328 440" overflow="hidden">
<path d="M-37 471q10-118 78-173 28-23 28-73-3-49 37-62 49-18 82 11 24 22 27 60l-3 53q34 53 46 184Z" fill="#faf5e7"/>
<path d="M-30 414q29-55 91-63 60-6 89 104H-30Z" fill="#8fa8aa"/>
<path d="M14 391q27-28 55-22m-69 46q31-24 67-21" fill="none" stroke="#64878b" stroke-width="5" stroke-linecap="round"/>
<path d="M178 221q56-6 100 32l-15 17q-39-24-84-22Z" fill="#e2b64c"/>
<path d="m183 260 78 30q-34 10-71-4Z" fill="#c6993b"/>
<path d="M183 245q49-1 83 20" fill="none" stroke="#657064" stroke-width="4"/>
<circle cx="160" cy="201" r="11" fill="#e0ba57"/><circle cx="160" cy="201" r="5" fill="#203037"/>
<path d="m123 188 10-3m-24 22 10 1m-24 18 12 4m-13 19 11 2" stroke="#b7c6ba" stroke-width="3" stroke-linecap="round"/>
<path d="M39 21h233q20 0 20 20v62q0 20-20 20H115l-29 28 5-28H39q-20 0-20-20V41q0-20 20-20Z" fill="#faf5e7"/>
<circle cx="153" cy="71" r="25" fill="#60868b"/><ellipse cx="153" cy="71" rx="51" ry="11" transform="rotate(-24 153 71)" fill="none" stroke="#e0b858" stroke-width="7"/>
<path d="m224 43 3 8 8 3-8 3-3 8-3-8-8-3 8-3Zm-127-1 2 5 5 2-5 2-2 5-2-5-5-2 5-2Z" fill="#60868b"/>
</svg>
<rect x="328" width="16" height="440" fill="#faf5e7"/>
<svg x="344" width="328" height="440" viewBox="0 0 328 440" overflow="hidden">
<path d="M-44 471q0-110 77-143 31-14 37-73l29-68 128 51-4 81q70 32 89 152Z" fill="#9cafb0"/>
<path d="M50 291q21-23 22-62-3-47 29-68 36-24 73-8 41 17 40 71l-2 50q-64-19-89 5-41 38-73 12Z" fill="#faf5e7"/>
<path d="M204 211q53 0 99 31l-7 13q-49-22-93-19Z" fill="#e2b64c"/>
<path d="m205 247 92 23q-31 10-87-6Z" fill="#c6993b"/>
<path d="M212 231q44 1 85 18" fill="none" stroke="#657064" stroke-width="4"/>
<circle cx="185" cy="198" r="10" fill="#e0ba57"/><circle cx="185" cy="198" r="5" fill="#203037"/>
<path d="M79 315q69 3 91 70m-149-27q77 4 98 82m45-95q55 22 60 83" fill="none" stroke="#6e8a8f" stroke-width="6" stroke-linecap="round"/>
<path d="M67 20h197q22 0 22 22v61q0 22-22 22h-47l-20 29-5-29H67q-22 0-22-22V42q0-22 22-22Z" fill="#faf5e7"/>
<g transform="translate(167 75) rotate(-8)">
<path d="M-22 2v-33m12 31v-42m12 42v-32m12 32v-39m12 38v-27" stroke="#e1b449" stroke-width="9" stroke-linecap="round"/>
<path d="m-35-4 10 44q24 9 46 0l11-44q-35 13-67 0Z" fill="#df8a57"/><circle cy="23" r="7" fill="#faf5e7"/>
</g>
</svg>
</svg>
<path d="M60 501h181m-181 17h114" stroke="#b2b5a3" stroke-width="6" stroke-linecap="round"/>
<text x="625" y="523" fill="#597b69" font-family="ui-monospace,monospace" font-size="36" font-weight="700">02</text>
<path d="m663-8 59 66-34 24-57-66Z" fill="#d7b179" opacity=".9"/>
</g></g></g>
<g id="activity-movie"><rect width="1600" height="900" fill="#324458"/><rect width="1600" height="900" fill="#293e50"/>
<circle cx="1220" cy="387" r="302" fill="#516d76"/>
<path d="M1108 105a298 298 0 0 1 403 331" fill="none" stroke="#83938a" stroke-width="2"/>
<path d="M150 107v10m-5-5h10" stroke="#b5c9c1" stroke-width="3" stroke-linecap="round"/><path d="M365 173v10m-5-5h10" stroke="#b5c9c1" stroke-width="3" stroke-linecap="round"/><path d="M632 239v10m-5-5h10" stroke="#b5c9c1" stroke-width="3" stroke-linecap="round"/><path d="M859 107v10m-5-5h10" stroke="#b5c9c1" stroke-width="3" stroke-linecap="round"/><path d="M1042 173v10m-5-5h10" stroke="#b5c9c1" stroke-width="3" stroke-linecap="round"/><path d="M1491 239v10m-5-5h10" stroke="#b5c9c1" stroke-width="3" stroke-linecap="round"/>
<path d="M0 631 244 465 415 579 681 425 911 586 1211 466 1600 589v311H0Z" fill="#385661"/>
<path d="M0 728 312 650 594 700 859 616 1142 740 1600 644v256H0Z" fill="#233a47"/>
<path d="M837 805h727l-22-38H868Z" fill="#91a499"/>
<path d="M870 763h670l-24-37H902Z" fill="#a4b0a0"/>
<path d="M904 722h610l-29-38H936Z" fill="#bbc0a5"/>
<path d="M938 681h545l-25-38H970Z" fill="#d2ccb0"/>
<g id="hero-answer-machine">
<path d="m1112 581-68 67h321l-77-67Z" fill="#b69360"/>
<path d="m1164 478-42 132h155l-29-121Z" fill="#a48150"/>
<path d="m1137 535 11 66 19-42 29-2 45 54 9-84Z" fill="#354851"/>
<path d="m999 176 52-45 424 43q17 2 15 19l-28 290-56 53Z" fill="#a7804d"/>
<path d="m1001 176 50-45 422 44-50 46Z" fill="#efd78f"/>
<path d="M1009 176 1420 219q15 1 13 18l-26 294q-2 16-18 14L987 499q-17-2-16-20l22-287q1-18 16-16Z" fill="#d6ae65"/>
<path d="m1010 194 399 42-22 289-397-44Z" fill="#e6c580"/>
<path d="M1067 285 1349 314l-12 139-282-30Z" fill="#263d43"/>
<path d="m1077 297 258 27-8 113-260-28Z" fill="#365654"/>
<path d="m1016 241 76 8m235 25 65 7m-376 209 58 6m192 21 77 8" stroke="#b49155" stroke-width="5" stroke-linecap="round"/>
<path d="m1456 225-19 213m6-160-12 134" stroke="#806843" stroke-width="6" stroke-linecap="round"/>
<circle cx="1304" cy="487" r="6" fill="#9bba93"/><circle cx="1327" cy="490" r="6" fill="#9bba93"/><circle cx="1350" cy="493" r="6" fill="#9bba93"/>
<g id="hero-answer" transform="translate(1202 368) rotate(6)" fill="none" stroke="#f3d786" stroke-width="15" stroke-linecap="round" stroke-linejoin="round">
<path d="M-51-42-80 13h59m-14-55v89M4-23q0-26 27-26t27 24q0 13-16 27L7 42h54"/>
</g>
</g>
<g transform="translate(907 753) rotate(6)"><path d="M-14 45q0-37 14-37t14 37Z" fill="#97bbad"/><circle cy="-7" r="10" fill="#97bbad"/><path d="M-4-8v2m8-2v2" stroke="#263b43" stroke-width="2" stroke-linecap="round"/></g><g transform="translate(1031 784) rotate(-7)"><path d="M-14 45q0-37 14-37t14 37Z" fill="#d69883"/><circle cy="-7" r="10" fill="#d69883"/><path d="M-4-8v2m8-2v2" stroke="#263b43" stroke-width="2" stroke-linecap="round"/></g><g transform="translate(1410 738) rotate(6)"><path d="M-14 45q0-37 14-37t14 37Z" fill="#a6b9cf"/><circle cy="-7" r="10" fill="#a6b9cf"/><path d="M-4-8v2m8-2v2" stroke="#263b43" stroke-width="2" stroke-linecap="round"/></g><g transform="translate(1514 790) rotate(-7)"><path d="M-14 45q0-37 14-37t14 37Z" fill="#d7bb7c"/><circle cy="-7" r="10" fill="#d7bb7c"/><path d="M-4-8v2m8-2v2" stroke="#263b43" stroke-width="2" stroke-linecap="round"/></g>
<path d="M0 28h1600M0 873h1600" stroke="#152b3b" stroke-width="56"/></g><style>#hero-rpg-water{transform:translate(-5.69px,0px)}#hero-rpg-flowers{transform:skewX(-1.22deg)}#hero-rpg-shadow{transform:translate(907.7px,544.82px)}#hero-rpg-player{transform:translate(907.7px,522.94px) rotate(2.88deg)}#hero-rpg-lid{transform:scaleY(1)}#hero-rpg-treasure{transform:translate(1028px,457px) scale(0)}#hero-paper{transform:translate(0px,0px)}#hero-pencil{transform:translate(1160px,670px) rotate(28deg)}#hero-photos{transform:translate(800px,450px) scale(0.97) translate(-800px,-450px)}#hero-answer{transform:translate(1202px,380px) rotate(6deg) scale(0.92,0.08)}#activity-rpg{opacity:1}#activity-drawing{opacity:0}#activity-photos{opacity:0}#activity-movie{opacity:0}
@media(prefers-reduced-motion:no-preference){#hero-rpg-water{animation:hero-rpg-water 20s linear infinite}#hero-rpg-flowers{animation:hero-rpg-flowers 20s linear infinite}#hero-rpg-shadow{animation:hero-rpg-shadow 20s linear infinite}#hero-rpg-player{animation:hero-rpg-player 20s linear infinite}#hero-rpg-lid{animation:hero-rpg-lid 20s linear infinite}#hero-rpg-treasure{animation:hero-rpg-treasure 20s linear infinite}#hero-paper{animation:hero-paper 20s linear infinite}#hero-pencil{animation:hero-pencil 20s linear infinite}#hero-photos{animation:hero-photos 20s linear infinite}#hero-answer{animation:hero-answer 20s linear infinite}#activity-rpg{animation:activity-rpg 20s steps(1,end) infinite}#activity-drawing{animation:activity-drawing 20s steps(1,end) infinite}#activity-photos{animation:activity-photos 20s steps(1,end) infinite}#activity-movie{animation:activity-movie 20s steps(1,end) infinite}}
:root:target #hero-rpg-water,:root:target #hero-rpg-flowers,:root:target #hero-rpg-shadow,:root:target #hero-rpg-player,:root:target #hero-rpg-lid,:root:target #hero-rpg-treasure,:root:target #hero-paper,:root:target #hero-pencil,:root:target #hero-photos,:root:target #hero-answer,:root:target #activity-rpg,:root:target #activity-drawing,:root:target #activity-photos,:root:target #activity-movie{animation:none}
@keyframes hero-rpg-water{0%{transform:translate(-5.69px,0px)}0.417%{transform:translate(-6.08px,0px)}0.833%{transform:translate(-6.45px,0px)}1.25%{transform:translate(-6.82px,0px)}1.667%{transform:translate(-7.19px,0px)}2.083%{transform:translate(-7.55px,0px)}2.5%{transform:translate(-7.9px,0px)}2.917%{transform:translate(-8.24px,0px)}3.333%{transform:translate(-8.58px,0px)}3.75%{transform:translate(-8.91px,0px)}4.167%{transform:translate(-9.23px,0px)}4.583%{transform:translate(-9.54px,0px)}5%{transform:translate(-9.85px,0px)}5.417%{transform:translate(-10.14px,0px)}5.833%{transform:translate(-10.43px,0px)}6.25%{transform:translate(-10.7px,0px)}6.667%{transform:translate(-10.97px,0px)}7.083%{transform:translate(-11.23px,0px)}7.5%{transform:translate(-11.48px,0px)}7.917%{transform:translate(-11.71px,0px)}8.333%{transform:translate(-11.94px,0px)}8.75%{transform:translate(-12.15px,0px)}9.167%{transform:translate(-12.36px,0px)}9.583%{transform:translate(-12.55px,0px)}10%{transform:translate(-12.73px,0px)}10.417%{transform:translate(-12.9px,0px)}10.833%{transform:translate(-13.06px,0px)}11.25%{transform:translate(-13.2px,0px)}11.667%{transform:translate(-13.34px,0px)}12.083%{transform:translate(-13.46px,0px)}12.5%{transform:translate(-13.57px,0px)}12.917%{transform:translate(-13.67px,0px)}13.333%{transform:translate(-13.75px,0px)}13.75%{transform:translate(-13.82px,0px)}14.167%{transform:translate(-13.88px,0px)}14.583%{transform:translate(-13.93px,0px)}15%{transform:translate(-13.97px,0px)}15.417%{transform:translate(-13.99px,0px)}15.833%{transform:translate(-14px,0px)}16.25%{transform:translate(-14px,0px)}16.667%{transform:translate(-13.98px,0px)}17.083%{transform:translate(-13.95px,0px)}17.5%{transform:translate(-13.91px,0px)}17.917%{transform:translate(-13.86px,0px)}18.333%{transform:translate(-13.79px,0px)}18.75%{transform:translate(-13.71px,0px)}19.167%{transform:translate(-13.62px,0px)}19.583%{transform:translate(-13.52px,0px)}20%{transform:translate(-13.4px,0px)}20.417%{transform:translate(-13.27px,0px)}20.833%{transform:translate(-13.13px,0px)}21.25%{transform:translate(-12.98px,0px)}21.667%{transform:translate(-12.82px,0px)}22.083%{transform:translate(-12.64px,0px)}22.5%{transform:translate(-12.46px,0px)}22.917%{transform:translate(-12.26px,0px)}23.333%{transform:translate(-12.05px,0px)}23.75%{transform:translate(-11.83px,0px)}24.167%{transform:translate(-11.6px,0px)}24.583%{transform:translate(-11.36px,0px)}25%{transform:translate(-11.11px,0px)}100%{transform:translate(-11.11px,0px)}}@keyframes hero-rpg-flowers{0%{transform:skewX(-1.22deg)}0.417%{transform:skewX(-1.3deg)}0.833%{transform:skewX(-1.38deg)}1.25%{transform:skewX(-1.46deg)}1.667%{transform:skewX(-1.54deg)}2.083%{transform:skewX(-1.62deg)}2.5%{transform:skewX(-1.69deg)}2.917%{transform:skewX(-1.77deg)}3.333%{transform:skewX(-1.84deg)}3.75%{transform:skewX(-1.91deg)}4.167%{transform:skewX(-1.98deg)}4.583%{transform:skewX(-2.05deg)}5%{transform:skewX(-2.11deg)}5.417%{transform:skewX(-2.17deg)}5.833%{transform:skewX(-2.23deg)}6.25%{transform:skewX(-2.29deg)}6.667%{transform:skewX(-2.35deg)}7.083%{transform:skewX(-2.41deg)}7.5%{transform:skewX(-2.46deg)}7.917%{transform:skewX(-2.51deg)}8.333%{transform:skewX(-2.56deg)}8.75%{transform:skewX(-2.6deg)}9.167%{transform:skewX(-2.65deg)}9.583%{transform:skewX(-2.69deg)}10%{transform:skewX(-2.73deg)}10.417%{transform:skewX(-2.76deg)}10.833%{transform:skewX(-2.8deg)}11.25%{transform:skewX(-2.83deg)}11.667%{transform:skewX(-2.86deg)}12.083%{transform:skewX(-2.88deg)}12.5%{transform:skewX(-2.91deg)}12.917%{transform:skewX(-2.93deg)}13.333%{transform:skewX(-2.95deg)}13.75%{transform:skewX(-2.96deg)}14.167%{transform:skewX(-2.98deg)}14.583%{transform:skewX(-2.99deg)}15%{transform:skewX(-2.99deg)}15.417%{transform:skewX(-3deg)}16.667%{transform:skewX(-3deg)}17.083%{transform:skewX(-2.99deg)}17.5%{transform:skewX(-2.98deg)}17.917%{transform:skewX(-2.97deg)}18.333%{transform:skewX(-2.96deg)}18.75%{transform:skewX(-2.94deg)}19.167%{transform:skewX(-2.92deg)}19.583%{transform:skewX(-2.9deg)}20%{transform:skewX(-2.87deg)}20.417%{transform:skewX(-2.84deg)}20.833%{transform:skewX(-2.81deg)}21.25%{transform:skewX(-2.78deg)}21.667%{transform:skewX(-2.75deg)}22.083%{transform:skewX(-2.71deg)}22.5%{transform:skewX(-2.67deg)}22.917%{transform:skewX(-2.63deg)}23.333%{transform:skewX(-2.58deg)}23.75%{transform:skewX(-2.54deg)}24.167%{transform:skewX(-2.49deg)}24.583%{transform:skewX(-2.43deg)}25%{transform:skewX(-2.38deg)}100%{transform:skewX(-2.38deg)}}@keyframes hero-rpg-shadow{0%{transform:translate(907.7px,544.82px)}0.417%{transform:translate(909.69px,543.89px)}0.833%{transform:translate(911.61px,543px)}1.25%{transform:translate(913.45px,542.15px)}1.667%{transform:translate(915.21px,541.33px)}2.083%{transform:translate(916.88px,540.55px)}2.5%{transform:translate(918.47px,539.82px)}2.917%{transform:translate(919.97px,539.12px)}3.333%{transform:translate(921.39px,538.46px)}3.75%{transform:translate(922.71px,537.85px)}4.167%{transform:translate(923.94px,537.28px)}4.583%{transform:translate(925.08px,536.75px)}5%{transform:translate(926.12px,536.26px)}5.417%{transform:translate(927.07px,535.82px)}5.833%{transform:translate(927.92px,535.43px)}6.25%{transform:translate(928.67px,535.08px)}6.667%{transform:translate(929.32px,534.78px)}7.083%{transform:translate(929.86px,534.53px)}7.5%{transform:translate(930.3px,534.32px)}7.917%{transform:translate(930.64px,534.17px)}8.333%{transform:translate(930.86px,534.06px)}8.75%{transform:translate(930.98px,534.01px)}9.167%{transform:translate(931px,534px)}100%{transform:translate(931px,534px)}}@keyframes hero-rpg-player{0%{transform:translate(907.7px,522.94px) rotate(2.88deg)}0.417%{transform:translate(909.69px,522.53px) rotate(2.36deg)}0.833%{transform:translate(911.61px,522.46px) rotate(1.54deg)}1.25%{transform:translate(913.45px,522.58px) rotate(0.57deg)}1.667%{transform:translate(915.21px,521.9px) rotate(-0.43deg)}2.083%{transform:translate(916.88px,520.22px) rotate(-1.34deg)}2.5%{transform:translate(918.47px,518.74px) rotate(-2.07deg)}2.917%{transform:translate(919.97px,517.52px) rotate(-2.6deg)}3.333%{transform:translate(921.39px,516.56px) rotate(-2.9deg)}3.75%{transform:translate(922.71px,515.85px) rotate(-3deg)}4.167%{transform:translate(923.94px,515.36px) rotate(-2.92deg)}4.583%{transform:translate(925.08px,515.04px) rotate(-2.71deg)}5%{transform:translate(926.12px,514.87px) rotate(-2.4deg)}5.417%{transform:translate(927.07px,514.79px) rotate(-2.04deg)}5.833%{transform:translate(927.92px,514.77px) rotate(-1.66deg)}6.25%{transform:translate(928.67px,514.8px) rotate(-1.29deg)}6.667%{transform:translate(929.32px,514.84px) rotate(-0.94deg)}7.083%{transform:translate(929.86px,514.89px) rotate(-0.64deg)}7.5%{transform:translate(930.3px,514.93px) rotate(-0.4deg)}7.917%{transform:translate(930.64px,514.96px) rotate(-0.21deg)}8.333%{transform:translate(930.86px,514.99px) rotate(-0.08deg)}8.75%{transform:translate(930.98px,515px) rotate(-0.01deg)}9.167%{transform:translate(931px,515px) rotate(0deg)}100%{transform:translate(931px,515px) rotate(0deg)}}@keyframes hero-rpg-lid{0%{transform:scaleY(1)}9.583%{transform:scaleY(1)}10%{transform:scaleY(0.99)}10.417%{transform:scaleY(0.85)}10.833%{transform:scaleY(0.59)}11.25%{transform:scaleY(0.26)}11.667%{transform:scaleY(-0.09)}12.083%{transform:scaleY(-0.4)}12.5%{transform:scaleY(-0.62)}12.917%{transform:scaleY(-0.7)}100%{transform:scaleY(-0.7)}}@keyframes hero-rpg-treasure{0%{transform:translate(1028px,457px) scale(0)}11.25%{transform:translate(1028px,457px) scale(0)}11.667%{transform:translate(1028px,456.97px) scale(0)}12.083%{transform:translate(1028px,455.52px) scale(0.04)}12.5%{transform:translate(1028px,452.12px) scale(0.11)}12.917%{transform:translate(1028px,447.06px) scale(0.22)}13.333%{transform:translate(1028px,440.59px) scale(0.35)}13.75%{transform:translate(1028px,433px) scale(0.49)}14.167%{transform:translate(1028px,424.54px) scale(0.64)}14.583%{transform:translate(1028px,415.5px) scale(0.77)}15%{transform:translate(1028px,406.14px) scale(0.88)}15.417%{transform:translate(1028px,396.73px) scale(0.96)}15.833%{transform:translate(1028px,387.55px) scale(1)}16.25%{transform:translate(1028px,378.86px) scale(1)}16.667%{transform:translate(1028px,370.93px) scale(1)}17.083%{transform:translate(1028px,364.04px) scale(1)}17.5%{transform:translate(1028px,358.46px) scale(1)}17.917%{transform:translate(1028px,354.46px) scale(1)}18.333%{transform:translate(1028px,352.3px) scale(1)}18.75%{transform:translate(1028px,352px) scale(1)}100%{transform:translate(1028px,352px) scale(1)}}@keyframes hero-paper{0%{transform:translate(0px,0px)}25%{transform:translate(0px,0px)}25.417%{transform:translate(0px,0.6271707796059207px)}25.833%{transform:translate(0px,1.247470144906556px)}26.25%{transform:translate(0px,1.8541019662496843px)}26.667%{transform:translate(0px,2.440419858454801px)}27.083%{transform:translate(0px,2.9999999999999996px)}27.5%{transform:translate(0px,3.526711513754839px)}27.917%{transform:translate(0px,4.014783638153149px)}28.333%{transform:translate(0px,4.458868952864366px)}28.75%{transform:translate(0px,4.854101966249685px)}29.167%{transform:translate(0px,5.196152422706632px)}29.583%{transform:translate(0px,5.481272745855605px)}30%{transform:translate(0px,5.706339097770921px)}30.417%{transform:translate(0px,5.868885604402834px)}30.833%{transform:translate(0px,5.967131372209639px)}31.25%{transform:translate(0px,6px)}31.667%{transform:translate(0px,5.96713137220964px)}32.083%{transform:translate(0px,5.868885604402834px)}32.5%{transform:translate(0px,5.706339097770922px)}32.917%{transform:translate(0px,5.481272745855605px)}33.333%{transform:translate(0px,5.196152422706632px)}33.75%{transform:translate(0px,4.854101966249685px)}34.167%{transform:translate(0px,4.458868952864367px)}34.583%{transform:translate(0px,4.014783638153148px)}35%{transform:translate(0px,3.5267115137548393px)}35.417%{transform:translate(0px,2.9999999999999996px)}35.833%{transform:translate(0px,2.4404198584548px)}36.25%{transform:translate(0px,1.8541019662496852px)}36.667%{transform:translate(0px,1.247470144906556px)}37.083%{transform:translate(0px,0.6271707796059224px)}37.5%{transform:translate(0px,7.347880794884119e-16px)}37.917%{transform:translate(0px,-0.6271707796059209px)}38.333%{transform:translate(0px,-1.2474701449065544px)}38.75%{transform:translate(0px,-1.8541019662496865px)}39.167%{transform:translate(0px,-2.440419858454799px)}39.583%{transform:translate(0px,-3.000000000000001px)}40%{transform:translate(0px,-3.5267115137548384px)}40.417%{transform:translate(0px,-4.014783638153149px)}40.833%{transform:translate(0px,-4.458868952864364px)}41.25%{transform:translate(0px,-4.854101966249684px)}41.667%{transform:translate(0px,-5.196152422706631px)}42.083%{transform:translate(0px,-5.481272745855605px)}42.5%{transform:translate(0px,-5.706339097770921px)}42.917%{transform:translate(0px,-5.868885604402833px)}43.333%{transform:translate(0px,-5.967131372209639px)}43.75%{transform:translate(0px,-6px)}44.167%{transform:translate(0px,-5.967131372209639px)}44.583%{transform:translate(0px,-5.868885604402833px)}45%{transform:translate(0px,-5.706339097770922px)}45.417%{transform:translate(0px,-5.481272745855606px)}45.833%{transform:translate(0px,-5.196152422706632px)}46.25%{transform:translate(0px,-4.854101966249686px)}46.667%{transform:translate(0px,-4.458868952864364px)}47.083%{transform:translate(0px,-4.014783638153153px)}47.5%{transform:translate(0px,-3.52671151375484px)}47.917%{transform:translate(0px,-3.0000000000000027px)}48.333%{transform:translate(0px,-2.440419858454801px)}48.75%{transform:translate(0px,-1.8541019662496856px)}49.167%{transform:translate(0px,-1.2474701449065593px)}49.583%{transform:translate(0px,-0.6271707796059258px)}50%{transform:translate(0px,-1.4695761589768238e-15px)}100%{transform:translate(0px,-1.4695761589768238e-15px)}}@keyframes hero-pencil{0%{transform:translate(1160px,670px) rotate(28deg)}25%{transform:translate(1160px,670px) rotate(28deg)}25.417%{transform:translate(1161.8815123388179px,669.9452189536827px) rotate(28.31358538980296deg)}25.833%{transform:translate(1163.7424104347197px,669.781476007338px) rotate(28.62373507245328deg)}26.25%{transform:translate(1165.562305898749px,669.5105651629515px) rotate(28.927050983124843deg)}26.667%{transform:translate(1167.3212595753644px,669.135454576426px) rotate(29.2202099292274deg)}27.083%{transform:translate(1169px,668.6602540378444px) rotate(29.5deg)}27.5%{transform:translate(1170.5801345412644px,668.0901699437495px) rotate(29.76335575687742deg)}27.917%{transform:translate(1172.0443509144595px,667.431448254774px) rotate(30.007391819076574deg)}28.333%{transform:translate(1173.376606858593px,666.6913060635886px) rotate(30.229434476432182deg)}28.75%{transform:translate(1174.562305898749px,665.8778525229247px) rotate(30.427050983124843deg)}29.167%{transform:translate(1175.5884572681198px,665px) rotate(30.598076211353316deg)}29.583%{transform:translate(1176.4438182375668px,664.067366430758px) rotate(30.740636372927803deg)}30%{transform:translate(1177.1190172933127px,663.0901699437495px) rotate(30.85316954888546deg)}30.417%{transform:translate(1177.6066568132085px,662.0791169081776px) rotate(30.934442802201417deg)}30.833%{transform:translate(1177.9013941166288px,661.0452846326765px) rotate(30.983565686104818deg)}31.25%{transform:translate(1178px,660px) rotate(31deg)}31.667%{transform:translate(1177.901394116629px,658.9547153673235px) rotate(30.98356568610482deg)}32.083%{transform:translate(1177.6066568132085px,657.9208830918224px) rotate(30.934442802201417deg)}32.5%{transform:translate(1177.1190172933127px,656.9098300562505px) rotate(30.85316954888546deg)}32.917%{transform:translate(1176.4438182375668px,655.932633569242px) rotate(30.740636372927803deg)}33.333%{transform:translate(1175.5884572681198px,655px) rotate(30.598076211353316deg)}33.75%{transform:translate(1174.562305898749px,654.1221474770753px) rotate(30.427050983124843deg)}34.167%{transform:translate(1173.376606858593px,653.3086939364114px) rotate(30.229434476432182deg)}34.583%{transform:translate(1172.0443509144595px,652.568551745226px) rotate(30.007391819076574deg)}35%{transform:translate(1170.5801345412644px,651.9098300562505px) rotate(29.76335575687742deg)}35.417%{transform:translate(1169px,651.3397459621556px) rotate(29.5deg)}35.833%{transform:translate(1167.3212595753644px,650.864545423574px) rotate(29.2202099292274deg)}36.25%{transform:translate(1165.562305898749px,650.4894348370485px) rotate(28.927050983124843deg)}36.667%{transform:translate(1163.7424104347197px,650.218523992662px) rotate(28.62373507245328deg)}37.083%{transform:translate(1161.8815123388179px,650.0547810463173px) rotate(28.31358538980296deg)}37.5%{transform:translate(1160px,650px) rotate(28deg)}37.917%{transform:translate(1158.1184876611821px,650.0547810463173px) rotate(27.68641461019704deg)}38.333%{transform:translate(1156.2575895652803px,650.218523992662px) rotate(27.37626492754672deg)}38.75%{transform:translate(1154.437694101251px,650.4894348370485px) rotate(27.072949016875157deg)}39.167%{transform:translate(1152.6787404246356px,650.864545423574px) rotate(26.7797900707726deg)}39.583%{transform:translate(1151px,651.3397459621556px) rotate(26.5deg)}40%{transform:translate(1149.4198654587356px,651.9098300562505px) rotate(26.23664424312258deg)}40.417%{transform:translate(1147.9556490855405px,652.568551745226px) rotate(25.992608180923426deg)}40.833%{transform:translate(1146.623393141407px,653.3086939364114px) rotate(25.770565523567818deg)}41.25%{transform:translate(1145.437694101251px,654.1221474770753px) rotate(25.572949016875157deg)}41.667%{transform:translate(1144.4115427318802px,655px) rotate(25.401923788646684deg)}42.083%{transform:translate(1143.5561817624332px,655.932633569242px) rotate(25.259363627072197deg)}42.5%{transform:translate(1142.8809827066873px,656.9098300562505px) rotate(25.14683045111454deg)}42.917%{transform:translate(1142.3933431867915px,657.9208830918224px) rotate(25.065557197798583deg)}43.333%{transform:translate(1142.0986058833712px,658.9547153673235px) rotate(25.016434313895182deg)}43.75%{transform:translate(1142px,660px) rotate(25deg)}44.167%{transform:translate(1142.0986058833712px,661.0452846326765px) rotate(25.016434313895182deg)}44.583%{transform:translate(1142.3933431867915px,662.0791169081776px) rotate(25.065557197798583deg)}45%{transform:translate(1142.8809827066873px,663.0901699437495px) rotate(25.14683045111454deg)}45.417%{transform:translate(1143.5561817624332px,664.0673664307579px) rotate(25.259363627072197deg)}45.833%{transform:translate(1144.4115427318802px,665px) rotate(25.401923788646684deg)}46.25%{transform:translate(1145.437694101251px,665.8778525229247px) rotate(25.572949016875157deg)}46.667%{transform:translate(1146.623393141407px,666.6913060635886px) rotate(25.770565523567818deg)}47.083%{transform:translate(1147.9556490855405px,667.431448254774px) rotate(25.992608180923423deg)}47.5%{transform:translate(1149.4198654587356px,668.0901699437495px) rotate(26.23664424312258deg)}47.917%{transform:translate(1151px,668.6602540378444px) rotate(26.5deg)}48.333%{transform:translate(1152.6787404246356px,669.135454576426px) rotate(26.7797900707726deg)}48.75%{transform:translate(1154.437694101251px,669.5105651629515px) rotate(27.072949016875157deg)}49.167%{transform:translate(1156.2575895652803px,669.781476007338px) rotate(27.37626492754672deg)}49.583%{transform:translate(1158.1184876611821px,669.9452189536827px) rotate(27.686414610197037deg)}50%{transform:translate(1160px,670px) rotate(28deg)}100%{transform:translate(1160px,670px) rotate(28deg)}}@keyframes hero-photos{0%{transform:translate(800px,450px) scale(0.97) translate(-800px,-450px)}50%{transform:translate(800px,450px) scale(0.97) translate(-800px,-450px)}50.417%{transform:translate(800px,450px) scale(0.97075) translate(-800px,-450px)}50.833%{transform:translate(800px,450px) scale(0.9714999999999999) translate(-800px,-450px)}51.25%{transform:translate(800px,450px) scale(0.97225) translate(-800px,-450px)}51.667%{transform:translate(800px,450px) scale(0.973) translate(-800px,-450px)}52.083%{transform:translate(800px,450px) scale(0.97375) translate(-800px,-450px)}52.5%{transform:translate(800px,450px) scale(0.9744999999999999) translate(-800px,-450px)}52.917%{transform:translate(800px,450px) scale(0.97525) translate(-800px,-450px)}53.333%{transform:translate(800px,450px) scale(0.976) translate(-800px,-450px)}53.75%{transform:translate(800px,450px) scale(0.97675) translate(-800px,-450px)}54.167%{transform:translate(800px,450px) scale(0.9774999999999999) translate(-800px,-450px)}54.583%{transform:translate(800px,450px) scale(0.97825) translate(-800px,-450px)}55%{transform:translate(800px,450px) scale(0.979) translate(-800px,-450px)}55.417%{transform:translate(800px,450px) scale(0.97975) translate(-800px,-450px)}55.833%{transform:translate(800px,450px) scale(0.9804999999999999) translate(-800px,-450px)}56.25%{transform:translate(800px,450px) scale(0.98125) translate(-800px,-450px)}56.667%{transform:translate(800px,450px) scale(0.982) translate(-800px,-450px)}57.083%{transform:translate(800px,450px) scale(0.98275) translate(-800px,-450px)}57.5%{transform:translate(800px,450px) scale(0.9834999999999999) translate(-800px,-450px)}57.917%{transform:translate(800px,450px) scale(0.98425) translate(-800px,-450px)}58.333%{transform:translate(800px,450px) scale(0.985) translate(-800px,-450px)}58.75%{transform:translate(800px,450px) scale(0.98575) translate(-800px,-450px)}59.167%{transform:translate(800px,450px) scale(0.9864999999999999) translate(-800px,-450px)}59.583%{transform:translate(800px,450px) scale(0.98725) translate(-800px,-450px)}60%{transform:translate(800px,450px) scale(0.988) translate(-800px,-450px)}60.417%{transform:translate(800px,450px) scale(0.98875) translate(-800px,-450px)}60.833%{transform:translate(800px,450px) scale(0.9894999999999999) translate(-800px,-450px)}61.25%{transform:translate(800px,450px) scale(0.99025) translate(-800px,-450px)}61.667%{transform:translate(800px,450px) scale(0.991) translate(-800px,-450px)}62.083%{transform:translate(800px,450px) scale(0.99175) translate(-800px,-450px)}62.5%{transform:translate(800px,450px) scale(0.9924999999999999) translate(-800px,-450px)}62.917%{transform:translate(800px,450px) scale(0.99325) translate(-800px,-450px)}63.333%{transform:translate(800px,450px) scale(0.994) translate(-800px,-450px)}63.75%{transform:translate(800px,450px) scale(0.99475) translate(-800px,-450px)}64.167%{transform:translate(800px,450px) scale(0.9954999999999999) translate(-800px,-450px)}64.583%{transform:translate(800px,450px) scale(0.99625) translate(-800px,-450px)}65%{transform:translate(800px,450px) scale(0.997) translate(-800px,-450px)}65.417%{transform:translate(800px,450px) scale(0.99775) translate(-800px,-450px)}65.833%{transform:translate(800px,450px) scale(0.9984999999999999) translate(-800px,-450px)}66.25%{transform:translate(800px,450px) scale(0.99925) translate(-800px,-450px)}66.667%{transform:translate(800px,450px) scale(1) translate(-800px,-450px)}67.083%{transform:translate(800px,450px) scale(1.00075) translate(-800px,-450px)}67.5%{transform:translate(800px,450px) scale(1.0015) translate(-800px,-450px)}67.917%{transform:translate(800px,450px) scale(1.00225) translate(-800px,-450px)}68.333%{transform:translate(800px,450px) scale(1.003) translate(-800px,-450px)}68.75%{transform:translate(800px,450px) scale(1.00375) translate(-800px,-450px)}69.167%{transform:translate(800px,450px) scale(1.0045) translate(-800px,-450px)}69.583%{transform:translate(800px,450px) scale(1.00525) translate(-800px,-450px)}70%{transform:translate(800px,450px) scale(1.006) translate(-800px,-450px)}70.417%{transform:translate(800px,450px) scale(1.00675) translate(-800px,-450px)}70.833%{transform:translate(800px,450px) scale(1.0075) translate(-800px,-450px)}71.25%{transform:translate(800px,450px) scale(1.0082499999999999) translate(-800px,-450px)}71.667%{transform:translate(800px,450px) scale(1.009) translate(-800px,-450px)}72.083%{transform:translate(800px,450px) scale(1.00975) translate(-800px,-450px)}72.5%{transform:translate(800px,450px) scale(1.0105) translate(-800px,-450px)}72.917%{transform:translate(800px,450px) scale(1.01125) translate(-800px,-450px)}73.333%{transform:translate(800px,450px) scale(1.012) translate(-800px,-450px)}73.75%{transform:translate(800px,450px) scale(1.01275) translate(-800px,-450px)}74.167%{transform:translate(800px,450px) scale(1.0135) translate(-800px,-450px)}74.583%{transform:translate(800px,450px) scale(1.0142499999999999) translate(-800px,-450px)}75%{transform:translate(800px,450px) scale(1.015) translate(-800px,-450px)}100%{transform:translate(800px,450px) scale(1.015) translate(-800px,-450px)}}@keyframes hero-answer{0%{transform:translate(1202px,380px) rotate(6deg) scale(0.92,0.08)}75%{transform:translate(1202px,380px) rotate(6deg) scale(0.92,0.08)}75.417%{transform:translate(1202px,378.409303078799px) rotate(6deg) scale(0.9306046461413403,0.20195343062541277)}75.833%{transform:translate(1202px,376.96578265508305px) rotate(6deg) scale(0.9402281156327796,0.31262332977696483)}76.25%{transform:translate(1202px,375.6622942386831px) rotate(6deg) scale(0.9489180384087792,0.4125574417009602)}76.667%{transform:translate(1202px,374.49169333942996px) rotate(6deg) scale(0.9567220444038003,0.5023035106437027)}77.083%{transform:translate(1202px,373.4468354671544px) rotate(6deg) scale(0.963687763552304,0.5824092808514962)}77.5%{transform:translate(1202px,372.5205761316872px) rotate(6deg) scale(0.9698628257887517,0.6534224965706447)}77.917%{transform:translate(1202px,371.7057708428593px) rotate(6deg) scale(0.9752948610476045,0.7158909020474521)}78.333%{transform:translate(1202px,370.99527511050144px) rotate(6deg) scale(0.9800314992633238,0.7703622415282224)}78.75%{transform:translate(1202px,370.38194444444446px) rotate(6deg) scale(0.9841203703703705,0.8173842592592594)}79.167%{transform:translate(1202px,369.85863435451915px) rotate(6deg) scale(0.9876091043032058,0.8575046994868669)}79.583%{transform:translate(1202px,369.41820035055633px) rotate(6deg) scale(0.9905453309962913,0.891271306457349)}80%{transform:translate(1202px,369.05349794238685px) rotate(6deg) scale(0.9929766803840878,0.9192318244170096)}80.417%{transform:translate(1202px,368.75738263984147px) rotate(6deg) scale(0.9949507824010568,0.9419339976121527)}80.833%{transform:translate(1202px,368.5227099527511px) rotate(6deg) scale(0.9965152669816594,0.959925570289082)}81.25%{transform:translate(1202px,368.3423353909465px) rotate(6deg) scale(0.9977177640603567,0.9737542866941016)}81.667%{transform:translate(1202px,368.2091144642585px) rotate(6deg) scale(0.99860590357161,0.9839678910735152)}82.083%{transform:translate(1202px,368.1159026825179px) rotate(6deg) scale(0.9992273154498806,0.9911141276736269)}82.5%{transform:translate(1202px,368.05555555555554px) rotate(6deg) scale(0.9996296296296296,0.9957407407407407)}82.917%{transform:translate(1202px,368.02092859320226px) rotate(6deg) scale(0.9998604760453184,0.9983954745211604)}83.333%{transform:translate(1202px,368.0048773052888px) rotate(6deg) scale(0.9999674846314078,0.9996260732611898)}83.75%{transform:translate(1202px,368.0002572016461px) rotate(6deg) scale(0.9999982853223595,0.9999802812071331)}84.167%{transform:translate(1202px,368px) rotate(6deg) scale(1,1)}99.999%{transform:translate(1202px,368px) rotate(6deg) scale(1,1)}100%{transform:translate(1202px,380px) rotate(6deg) scale(0.92,0.08)}}@keyframes activity-rpg{0%{opacity:1}25%{opacity:0}100%{opacity:0}}@keyframes activity-drawing{0%{opacity:0}25%{opacity:1}50%{opacity:0}100%{opacity:0}}@keyframes activity-photos{0%{opacity:0}50%{opacity:1}75%{opacity:0}100%{opacity:0}}@keyframes activity-movie{0%{opacity:0}75%{opacity:1}100%{opacity:0}}</style></svg>
<!-- /Shared activities -->
</g>
<circle cx="470" cy="316" r="2.5" fill="#f7f4e9" stroke="none"/>
<rect x="245" y="346" width="447" height="18" rx="9" fill="#d6b58d"/><path d="M267 365v47m403-47v47"/>
<!-- Familiar room objects and the Piik mascot. -->
<path d="M126 343v-76m0 45c-27-3-40-18-36-38 25 3 36 17 36 38Zm0-22c28-3 39-19 35-37-24 2-34 18-35 37Z" fill="#79b398"/>
<path d="M126 272c-21-8-27-26-17-42 19 11 24 25 17 42Z" fill="#a0c7a2"/>
<path d="m103 334 6 40c2 9 32 9 34 0l6-40Z" fill="#e0bd99"/><path d="M103 334h46"/>
<g transform="rotate(8 746 154)">
<rect x="702" y="109" width="88" height="79" rx="26" fill="#fffdf5" stroke="none"/>
<g transform="translate(715 117) scale(1.9)" stroke-width="2.3"><path d="m11 4 5 4 5-4"/><rect x="4" y="8" width="24" height="18" rx="5"/><circle cx="11.5" cy="16.5" r="1.25" fill="#22303e" stroke="none"/><path d="M19 17q2.3-3 4.7 0M10 29l2-3m10 3-2-3"/></g>
</g>
<path d="m749 237 5 11 12 3-12 4-5 11-3-12-11-3 11-4Z" fill="#f4cc74" stroke="none"/>
<!-- The same simple figures as the UI; each has its own quiet cadence. -->
<path d="m355 490-5 29m387-29 5 29M162 482v28m128-28v28" stroke-width="5"/>
<rect x="322" y="373" width="453" height="115" rx="39" fill="#e9ad63" stroke="none"/>
<path d="M474 382v99m148-99v99" stroke="#cd8845" stroke-width="2.5"/>
<rect x="119" y="366" width="196" height="125" rx="40" fill="#cd8845" stroke="none"/>
<rect x="137" y="379" width="160" height="98" rx="30" fill="#e9ad63" stroke="none"/>
<g transform="translate(216 362) rotate(6 0 59)" color="#83c4a5" style="--pace:43s;--phase:-4s">
<g class="person-body"><use href="#person"/><g transform="translate(3 -2)"><g class="person-eyes"><use href="#eyes"/></g></g>
<!-- Crown geometry and colours match the shared UI HostMark. -->
<g transform="translate(-15 -66) scale(2.5)" stroke="#705025" stroke-width="1">
<path d="m1.2 6.3-1.2-3.7q-.2-.7.5-.4L3 3.6l2.4-2.5q.6-.7 1.2 0L9 3.6l2.5-1.4q.7-.3.5.4l-1.2 3.7q-.2.9-1.2.9H2.4q-1 0-1.2-.9Z" fill="#f7d861"/>
<path d="M2.1 6.5h7.8" stroke="#b58a2f" stroke-width="1"/>
</g>
<g id="hero-gamepad" transform="translate(3 40) rotate(-10) scale(.68)">
<path d="M-29-20h58c9 0 15 7 18 20l3 14c2 10-9 15-15 7l-12-13h-46l-12 13c-6 8-17 3-15-7l3-14c3-13 9-20 18-20Z" fill="#fffdf5" stroke-width="3"/>
<path d="M-28-7V6m-6.5-6.5h13" stroke-width="3.5"/>
<g stroke="none"><circle cx="28" cy="-8" r="3" fill="#e58b69"/><circle cx="36" cy="0" r="3" fill="#7eadde"/><circle cx="20" cy="0" r="3" fill="#74b297"/><circle cx="28" cy="8" r="3" fill="#edc969"/></g>
<path d="M-6-6h4m4 0h4" stroke-width="2"/>
<g fill="currentColor" stroke="none"><circle class="game-hand" cx="-34" cy="5" r="8" style="--tap-delay:-3.2s"/><circle class="game-hand" cx="31" cy="4" r="8"/></g>
</g>
</g>
</g>
<g transform="translate(414 371) rotate(-3)" color="#9ac8e4" style="--pace:47s;--phase:-17s">
<g class="person-body"><use href="#person"/><g class="person-eyes"><use href="#eyes"/></g></g>
<path d="M-21 39h43l-7 24h-29Z" fill="#fff5d4"/><path d="M-17 38q-4-12 6-11 1-12 10-5 9-8 11 2 12-2 9 14" fill="#fff9de" stroke-width="2.5"/>
<g fill="currentColor" stroke="none"><circle cx="-24" cy="45" r="6.5"/><circle cx="24" cy="45" r="6.5"/></g>
</g>
<g transform="translate(552 370) rotate(2)" color="#b6addc" style="--pace:53s;--phase:-29s">
<g class="person-body"><use href="#person"/><g class="person-eyes"><use href="#eyes"/></g></g>
</g>
<g transform="translate(694 369) rotate(-2)" color="#e9adc1" style="--pace:59s;--phase:-9s">
<g class="person-body"><use href="#person"/><g class="person-eyes"><use href="#eyes"/></g></g>
</g>
<path d="M322 434c0-13 8-21 19-21s20 8 20 21v40h376v-40c0-13 8-21 19-21s19 8 19 21v44c0 17-13 29-30 29H352c-17 0-30-12-30-29Z" fill="#cd8845" stroke="none"/>
<path d="M130 431c0-12 7-20 17-20s18 8 18 20v51h-12c-13 0-23-11-23-24Z" fill="#cd8845" stroke="none"/>
</g>
</svg>
Reference in new issue View Git Blame Copy Permalink