Files
yangyixuan 71fa43ac7b feat: add PICO virtual pet
A dependency-free browser companion with live needs, a star-catching
mini game, daily goals, collectible accessories, local saving,
day/night scenery and a responsive layout.
2026-11-04 18:51:30 +08:00

753 lines
44 KiB
HTML

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ece7dc">
<meta name="description" content="PICO 是一只住在云朵花园里的电子宠物。喂饱它、陪它玩、哄它睡觉,把平常的日子过成毛茸茸的小事。">
<title>pico · 一只住在云里的电子宠物</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='18' fill='%23e7edda'/%3E%3Cpath d='M32 50V29' stroke='%23344c3a' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M32 32C19 33 10 24 11 11c12-1 21 7 21 21Z' fill='%237a9969' stroke='%23344c3a' stroke-width='3'/%3E%3Cpath d='M32 29C43 30 53 22 52 10c-11-1-20 6-20 19Z' fill='%23a7bd8f' stroke='%23344c3a' stroke-width='3'/%3E%3C/svg%3E">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<svg class="svg-defs" aria-hidden="true" focusable="false">
<defs>
<symbol id="i-bowl" viewBox="0 0 24 24">
<path d="M3.5 11.5h17c0 4.8-3.8 8.6-8.5 8.6s-8.5-3.8-8.5-8.6Z"/>
<path d="M8 8c0-1.1 1-1.5 1-2.5S8 4.2 8 3.2M13 7.5c0-1.1 1-1.5 1-2.5s-1-1.3-1-2.3"/>
</symbol>
<symbol id="i-heart" viewBox="0 0 24 24">
<path d="M12 20s-7.2-4.4-9.3-9.1C1.2 7.2 3.3 4 6.7 4c2 0 3.7 1.1 5.3 3.1C13.6 5.1 15.3 4 17.3 4c3.4 0 5.5 3.2 4 6.9C19.2 15.6 12 20 12 20Z"/>
</symbol>
<symbol id="i-bolt" viewBox="0 0 24 24">
<path d="M13 2 4.8 13H11l-1 9 8.2-11H12l1-9Z"/>
</symbol>
<symbol id="i-bubbles" viewBox="0 0 24 24">
<circle cx="9" cy="13" r="5.5"/>
<circle cx="17.5" cy="7.5" r="3.5"/>
<path d="M19.5 15.5c1.7 0 3 1.2 3 2.7s-1.3 2.8-3 2.8-3-1.2-3-2.8 1.3-2.7 3-2.7Z"/>
</symbol>
<symbol id="i-moon" viewBox="0 0 24 24">
<path d="M20.2 14.7A8.6 8.6 0 0 1 9.3 3.8 8.7 8.7 0 1 0 20.2 14.7Z"/>
<path d="m16.2 3 .6 1.7 1.7.6-1.7.6-.6 1.7-.6-1.7-1.7-.6 1.7-.6.6-1.7Z"/>
</symbol>
<symbol id="i-sun" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="4.2"/>
<path d="M12 2v2.1M12 19.9V22M4.9 4.9l1.5 1.5M17.6 17.6l1.5 1.5M2 12h2.1M19.9 12H22M4.9 19.1l1.5-1.5M17.6 6.4l1.5-1.5"/>
</symbol>
<symbol id="i-cloud" viewBox="0 0 24 24">
<path d="M5.5 19h12a4 4 0 0 0 .8-7.9A6.2 6.2 0 0 0 6.5 9.6 4.8 4.8 0 0 0 5.5 19Z"/>
</symbol>
<symbol id="i-star" viewBox="0 0 24 24">
<path d="m12 2.7 2.6 6 6.5.6-4.9 4.3 1.5 6.4-5.7-3.4L6.3 20l1.5-6.4L3 9.3l6.4-.6 2.6-6Z"/>
</symbol>
<symbol id="i-sparkle" viewBox="0 0 24 24">
<path d="M12 2.5c.6 5.8 2.4 8 7.5 8.5-5.1.5-6.9 2.7-7.5 8.5-.6-5.8-2.4-8-7.5-8.5 5.1-.5 6.9-2.7 7.5-8.5Z"/>
<path d="M19.3 16.3c.3 2.2.9 3 2.7 3.2-1.8.2-2.4 1-2.7 3.2-.3-2.2-.9-3-2.7-3.2 1.8-.2 2.4-1 2.7-3.2Z"/>
</symbol>
<symbol id="i-arrow" viewBox="0 0 24 24">
<path d="M4 12h15M14 6l6 6-6 6"/>
</symbol>
<symbol id="i-close" viewBox="0 0 24 24">
<path d="m6 6 12 12M18 6 6 18"/>
</symbol>
<symbol id="i-check" viewBox="0 0 24 24">
<path d="m5 12.5 4.3 4.3L19 7.5"/>
</symbol>
<symbol id="i-lock" viewBox="0 0 24 24">
<rect x="4.5" y="10" width="15" height="11" rx="3"/>
<path d="M8 10V7a4 4 0 0 1 8 0v3"/>
</symbol>
<symbol id="i-sound" viewBox="0 0 24 24">
<path d="M5 10v4h3l4 3.5v-11L8 10H5Z"/>
<path d="M15.5 9a4.3 4.3 0 0 1 0 6M18 6.5a8 8 0 0 1 0 11"/>
</symbol>
<symbol id="i-sound-off" viewBox="0 0 24 24">
<path d="M5 10v4h3l4 3.5v-11L8 10H5Z"/>
<path d="m15.5 10 4.5 4.5M20 10l-4.5 4.5"/>
</symbol>
<symbol id="i-clock" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="8.5"/>
<path d="M12 7.5V12l3 2"/>
</symbol>
<symbol id="i-hand" viewBox="0 0 24 24">
<path d="M8.2 12.3V6.7a1.5 1.5 0 0 1 3 0v4.1-5.7a1.5 1.5 0 0 1 3 0v5.7-4.4a1.5 1.5 0 0 1 3 0v5.1-2.8a1.5 1.5 0 0 1 3 0v4.9c0 4.1-2.7 6.6-6.7 6.6-2.7 0-4.2-1.1-5.7-3.8L5 12.7c-.7-1.3.7-2.7 2-1.8l1.2 1.4Z"/>
</symbol>
<symbol id="i-hanger" viewBox="0 0 24 24">
<path d="M12 7.5a2.2 2.2 0 1 0-2.2-2.2"/>
<path d="m12 7.5 8.3 5.8c1 .7.5 2.2-.7 2.2H4.4c-1.2 0-1.7-1.5-.7-2.2L12 7.5Z"/>
</symbol>
<g id="daisy">
<g fill="#fff9e7" stroke="#364c3b" stroke-width="2">
<ellipse cx="0" cy="-6" rx="3.2" ry="5"/>
<ellipse cx="5.7" cy="-1.8" rx="3.2" ry="5" transform="rotate(72 5.7 -1.8)"/>
<ellipse cx="3.5" cy="5" rx="3.2" ry="5" transform="rotate(144 3.5 5)"/>
<ellipse cx="-3.5" cy="5" rx="3.2" ry="5" transform="rotate(216 -3.5 5)"/>
<ellipse cx="-5.7" cy="-1.8" rx="3.2" ry="5" transform="rotate(288 -5.7 -1.8)"/>
</g>
<circle cx="0" cy="0" r="2.4" fill="#edc765" stroke="#364c3b" stroke-width="1.5"/>
</g>
</defs>
</svg>
<div class="paper-grain" aria-hidden="true"></div>
<div class="app">
<header class="topbar">
<div class="brand">
<div class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 56 56">
<path d="M28 44V26" fill="none" stroke="#324b39" stroke-width="3.2" stroke-linecap="round"/>
<path d="M28 30C16 31 8.5 23.5 9 12.5c11-.5 19 6.5 19 17.5Z" fill="#7e9c6e" stroke="#324b39" stroke-width="2.4" stroke-linejoin="round"/>
<path d="M28 27c11 .5 18.5-7 18-18-10 0-18 7-18 18Z" fill="#b5c89d" stroke="#324b39" stroke-width="2.4" stroke-linejoin="round"/>
<circle cx="18" cy="35" r="2" fill="#e7a080"/>
<circle cx="38" cy="38" r="1.3" fill="#e7a080"/>
</svg>
</div>
<div class="brand-copy">
<span class="brand-name">pico</span>
<span class="brand-sub">住在云里的电子宠物</span>
</div>
</div>
<p class="header-note" aria-hidden="true">
<span></span>
A LITTLE FRIEND FOR SLOW DAYS
</p>
<div class="header-actions">
<button class="coin-menu" id="coinBtn" type="button" aria-label="打开星星衣橱">
<span class="coin-star" aria-hidden="true">
<svg class="icon" viewBox="0 0 24 24"><use href="#i-star"></use></svg>
</span>
<span class="coin-value" id="coinCount">18</span>
<span class="coin-unit">星星</span>
</button>
<button class="icon-button" id="soundBtn" type="button" aria-label="关闭音效" aria-pressed="true" title="关闭音效">
<svg class="icon sound-on-icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-sound"></use></svg>
<svg class="icon sound-off-icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-sound-off"></use></svg>
</button>
</div>
</header>
<main class="layout">
<section class="habitat" id="habitat" data-phase="day" aria-label="PICO 的云端花园">
<div class="sky" aria-hidden="true">
<div class="stars" id="stars">
<i style="--x:8%;--y:18%;--d:0s"></i>
<i style="--x:16%;--y:36%;--d:1.4s"></i>
<i style="--x:23%;--y:11%;--d:.6s"></i>
<i style="--x:33%;--y:25%;--d:2.1s"></i>
<i style="--x:43%;--y:9%;--d:1.1s"></i>
<i style="--x:56%;--y:16%;--d:2.8s"></i>
<i style="--x:68%;--y:7%;--d:.3s"></i>
<i style="--x:74%;--y:29%;--d:1.8s"></i>
<i style="--x:87%;--y:13%;--d:2.4s"></i>
<i style="--x:93%;--y:35%;--d:.9s"></i>
<i style="--x:60%;--y:31%;--d:3.2s"></i>
<i style="--x:40%;--y:42%;--d:1.6s"></i>
</div>
<div class="celestial sun"></div>
<div class="celestial moon"></div>
<div class="cloud cloud--one"></div>
<div class="cloud cloud--two"></div>
<div class="cloud cloud--three"></div>
<div class="birds"><i></i><i></i></div>
<div class="motes">
<i style="--mx:13%;--my:45%;--md:0s"></i>
<i style="--mx:29%;--my:65%;--md:2.3s"></i>
<i style="--mx:48%;--my:35%;--md:1.2s"></i>
<i style="--mx:66%;--my:52%;--md:3.5s"></i>
<i style="--mx:82%;--my:40%;--md:.8s"></i>
<i style="--mx:73%;--my:72%;--md:2.9s"></i>
</div>
</div>
<div class="hills" aria-hidden="true">
<div class="hill hill--back"></div>
<div class="hill hill--middle"></div>
<div class="hill hill--front"></div>
<svg class="garden-plant garden-plant--left" viewBox="0 0 220 310" aria-hidden="true">
<path d="M110 310c4-70-8-118 0-178" fill="none" stroke="#49654c" stroke-width="5" stroke-linecap="round"/>
<path d="M112 249c-30-3-63-22-66-52 28-5 55 6 70 37" fill="#5e7d5d" stroke="#49654c" stroke-width="3"/>
<path d="M111 213c27-8 46-33 41-58-25 3-43 21-46 48" fill="#7d9b70" stroke="#49654c" stroke-width="3"/>
<path d="M112 178c-23-6-38-27-35-51 22 3 36 20 39 41" fill="#89a67a" stroke="#49654c" stroke-width="3"/>
<path d="M111 144c22-5 36-25 32-44-19 2-32 17-34 36" fill="#6d8c63" stroke="#49654c" stroke-width="3"/>
<path d="M112 116c-15-8-22-24-16-38 14 4 22 17 20 31" fill="#9bb486" stroke="#49654c" stroke-width="3"/>
<path d="M112 249c-17 14-28 31-30 50" fill="none" stroke="#49654c" stroke-width="3" stroke-linecap="round"/>
<g transform="translate(82 296)">
<ellipse cx="0" cy="0" rx="11" ry="4" fill="#f6efda" opacity=".55"/>
<g transform="translate(-17 -8)">
<path d="M0 7C-5 1-11 1-13 4c-2 4 4 8 13 3Z" fill="#fff9e8"/>
<path d="M0 7C5 1 11 1 13 4c2 4-4 8-13 3Z" fill="#f6eed6"/>
<circle cx="0" cy="7" r="2.6" fill="#e9c466"/>
</g>
<g transform="translate(13 -15) scale(.65)">
<path d="M0 7C-5 1-11 1-13 4c-2 4 4 8 13 3Z" fill="#fff9e8"/>
<path d="M0 7C5 1 11 1 13 4c2 4-4 8-13 3Z" fill="#f6eed6"/>
<circle cx="0" cy="7" r="2.6" fill="#e9c466"/>
</g>
</g>
</svg>
<svg class="garden-plant garden-plant--right" viewBox="0 0 210 220" aria-hidden="true">
<path d="M123 220c-5-40 10-65 3-94" fill="none" stroke="#4c674d" stroke-width="4" stroke-linecap="round"/>
<path d="M122 171c24 2 43-13 45-32-21-2-38 11-45 32Z" fill="#76936a" stroke="#4c674d" stroke-width="2.5"/>
<path d="M125 142c-20 3-37-10-39-27 18-3 34 8 39 27Z" fill="#8ba47a" stroke="#4c674d" stroke-width="2.5"/>
<path d="M126 111c17 1 30-10 31-24-15-2-27 8-31 24Z" fill="#6b8864" stroke="#4c674d" stroke-width="2.5"/>
<g transform="translate(153 197)">
<path d="M-12 2C-11-9 0-17 13-17S37-9 38 2c0 5-50 5-50 0Z" fill="#e6a487" stroke="#564e3f" stroke-width="2.2"/>
<path d="M7 2h11l-1 20c-1 4-8 4-9 0L7 2Z" fill="#f5e8d1" stroke="#564e3f" stroke-width="2.2"/>
<circle cx="3" cy="-6" r="2.2" fill="#fff7e8" opacity=".75"/>
<circle cx="24" cy="-10" r="1.6" fill="#fff7e8" opacity=".7"/>
</g>
<g transform="translate(94 203) scale(.65)">
<path d="M-12 2C-11-9 0-17 13-17S37-9 38 2c0 5-50 5-50 0Z" fill="#e8b193" stroke="#564e3f" stroke-width="2.5"/>
<path d="M7 2h11l-1 20c-1 4-8 4-9 0L7 2Z" fill="#f5e8d1" stroke="#564e3f" stroke-width="2.5"/>
</g>
<g fill="none" stroke="#5b785b" stroke-width="2" stroke-linecap="round">
<path d="M44 204c-1-12 4-21 11-27M49 204c6-10 15-14 24-15M60 205c2-9 8-15 15-18"/>
</g>
</svg>
<svg class="meadow-flowers" viewBox="0 0 220 80" aria-hidden="true">
<g fill="none" stroke="#53704f" stroke-width="2" stroke-linecap="round">
<path d="M22 77c1-18-2-29 1-42M57 78c-2-12 3-21 1-31M97 78c1-10-2-19 2-28M149 78c-1-16 3-23 1-36M185 78c1-12-3-20 0-29"/>
</g>
<g transform="translate(23 33)">
<g fill="#fff9e7"><ellipse cx="0" cy="-6" rx="3.4" ry="5"/><ellipse cx="5.7" cy="-1.8" rx="3.4" ry="5" transform="rotate(72 5.7 -1.8)"/><ellipse cx="3.5" cy="5" rx="3.4" ry="5" transform="rotate(144 3.5 5)"/><ellipse cx="-3.5" cy="5" rx="3.4" ry="5" transform="rotate(216 -3.5 5)"/><ellipse cx="-5.7" cy="-1.8" rx="3.4" ry="5" transform="rotate(288 -5.7 -1.8)"/></g>
<circle r="2.5" fill="#e9c35f"/>
</g>
<g transform="translate(58 46) scale(.8)">
<g fill="#fff9e7"><ellipse cx="0" cy="-6" rx="3.4" ry="5"/><ellipse cx="5.7" cy="-1.8" rx="3.4" ry="5" transform="rotate(72 5.7 -1.8)"/><ellipse cx="3.5" cy="5" rx="3.4" ry="5" transform="rotate(144 3.5 5)"/><ellipse cx="-3.5" cy="5" rx="3.4" ry="5" transform="rotate(216 -3.5 5)"/><ellipse cx="-5.7" cy="-1.8" rx="3.4" ry="5" transform="rotate(288 -5.7 -1.8)"/></g>
<circle r="2.5" fill="#e9c35f"/>
</g>
<g transform="translate(99 49) scale(.68)">
<g fill="#f6e3c0"><ellipse cx="0" cy="-6" rx="3.4" ry="5"/><ellipse cx="5.7" cy="-1.8" rx="3.4" ry="5" transform="rotate(72 5.7 -1.8)"/><ellipse cx="3.5" cy="5" rx="3.4" ry="5" transform="rotate(144 3.5 5)"/><ellipse cx="-3.5" cy="5" rx="3.4" ry="5" transform="rotate(216 -3.5 5)"/><ellipse cx="-5.7" cy="-1.8" rx="3.4" ry="5" transform="rotate(288 -5.7 -1.8)"/></g>
<circle r="2.5" fill="#d9a85f"/>
</g>
<g transform="translate(150 41) scale(.75)">
<g fill="#fff9e7"><ellipse cx="0" cy="-6" rx="3.4" ry="5"/><ellipse cx="5.7" cy="-1.8" rx="3.4" ry="5" transform="rotate(72 5.7 -1.8)"/><ellipse cx="3.5" cy="5" rx="3.4" ry="5" transform="rotate(144 3.5 5)"/><ellipse cx="-3.5" cy="5" rx="3.4" ry="5" transform="rotate(216 -3.5 5)"/><ellipse cx="-5.7" cy="-1.8" rx="3.4" ry="5" transform="rotate(288 -5.7 -1.8)"/></g>
<circle r="2.5" fill="#e9c35f"/>
</g>
<g transform="translate(186 48) scale(.6)">
<g fill="#f6e3c0"><ellipse cx="0" cy="-6" rx="3.4" ry="5"/><ellipse cx="5.7" cy="-1.8" rx="3.4" ry="5" transform="rotate(72 5.7 -1.8)"/><ellipse cx="3.5" cy="5" rx="3.4" ry="5" transform="rotate(144 3.5 5)"/><ellipse cx="-3.5" cy="5" rx="3.4" ry="5" transform="rotate(216 -3.5 5)"/><ellipse cx="-5.7" cy="-1.8" rx="3.4" ry="5" transform="rotate(288 -5.7 -1.8)"/></g>
<circle r="2.5" fill="#d9a85f"/>
</g>
</svg>
<div class="fireflies" aria-hidden="true">
<i style="--fx:14%;--fy:72%;--fd:0s"></i>
<i style="--fx:27%;--fy:62%;--fd:1.7s"></i>
<i style="--fx:63%;--fy:68%;--fd:.9s"></i>
<i style="--fx:78%;--fy:59%;--fd:2.4s"></i>
<i style="--fx:89%;--fy:74%;--fd:1.2s"></i>
</div>
</div>
<div class="sleep-veil" aria-hidden="true"></div>
<div class="scene">
<div class="scene-meta">
<div class="scene-badge">
<span class="scene-badge-dot"></span>
<span>PICO'S GARDEN</span>
</div>
<div class="date-badge" id="dateBadge">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-sun"></use></svg>
<span id="dateText">11月4日 · 黄昏</span>
</div>
</div>
<div class="speech-bubble" id="speechBubble" aria-live="polite">
<span class="speech-label" id="speechLabel">PICO 说</span>
<p id="speechText">今天也要一起发呆吗?</p>
</div>
<div class="pet-area">
<button class="pet-button" id="petButton" type="button" aria-label="摸摸 PICO" data-mood="happy">
<div class="pet-art">
<svg class="pet-svg" viewBox="0 0 360 360" aria-hidden="true" focusable="false">
<defs>
<linearGradient id="furGradient" x1="0" y1="0" x2=".8" y2="1">
<stop offset="0" stop-color="#fcf2e0"/>
<stop offset="1" stop-color="#f0dcc0"/>
</linearGradient>
<linearGradient id="earGradient" x1="0" y1="0" x2=".6" y2="1">
<stop offset="0" stop-color="#d9e4c8"/>
<stop offset="1" stop-color="#b8cda8"/>
</linearGradient>
<linearGradient id="bellyGradient" x1="0" y1="0" x2=".5" y2="1">
<stop offset="0" stop-color="#eee9d4"/>
<stop offset="1" stop-color="#d9ddbd"/>
</linearGradient>
<linearGradient id="leafGradient" x1="0" y1="0" x2=".8" y2="1">
<stop offset="0" stop-color="#9bb77d"/>
<stop offset="1" stop-color="#688c5c"/>
</linearGradient>
<linearGradient id="leafGradientLight" x1="0" y1="0" x2=".7" y2="1">
<stop offset="0" stop-color="#bad09c"/>
<stop offset="1" stop-color="#88a971"/>
</linearGradient>
</defs>
<ellipse class="pet-ground-shadow" cx="182" cy="338" rx="107" ry="13" fill="#304b3a" opacity=".17"/>
<g class="pet-art-inner">
<g class="tail">
<path d="M246 280c42 15 72-9 61-39-5-14-22-18-28-6-6 12 10 20 20 11" fill="none" stroke="#334d3b" stroke-width="29" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M246 280c42 15 72-9 61-39-5-14-22-18-28-6-6 12 10 20 20 11" fill="none" stroke="url(#furGradient)" stroke-width="19" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g class="feet">
<ellipse cx="140" cy="319" rx="27" ry="16" fill="url(#furGradient)" stroke="#334d3b" stroke-width="5"/>
<ellipse cx="220" cy="319" rx="27" ry="16" fill="url(#furGradient)" stroke="#334d3b" stroke-width="5"/>
<path d="M132 319h.1M147 319h.1M212 319h.1M227 319h.1" stroke="#c9b395" stroke-width="3.5" stroke-linecap="round"/>
</g>
<g class="body">
<path d="M180 195c45 0 78 30 78 75 0 37-31 57-78 57s-78-20-78-57c0-45 33-75 78-75Z" fill="url(#furGradient)" stroke="#334d3b" stroke-width="5"/>
<ellipse cx="180" cy="272" rx="45" ry="42" fill="url(#bellyGradient)" opacity=".92"/>
<path d="M180 251c5-6 14-4 15 3 1 7-7 12-15 16-8-4-16-9-15-16 1-7 10-9 15-3Z" fill="#839d72" opacity=".55"/>
<path d="M226 292c8 3 14 9 16 16M133 295c-6 4-10 9-11 15" fill="none" stroke="#d6c3a9" stroke-width="3.2" stroke-linecap="round"/>
</g>
<g class="arms">
<path d="M113 238c-18-2-33 15-29 34 4 17 22 21 33 7 9-12 8-30 2-37-.6-.8-1.3-1.4-2-1.8Z" fill="url(#furGradient)" stroke="#334d3b" stroke-width="5"/>
<path d="M247 238c18-2 33 15 29 34-4 17-22 21-33 7-9-12-8-30-2-37 .6-.8 1.3-1.4 2-1.8Z" fill="url(#furGradient)" stroke="#334d3b" stroke-width="5"/>
</g>
<g class="ears">
<path d="M111 104C91 86 81 56 94 42c13-14 35 7 42 30 5 16 3 29-4 39Z" fill="url(#earGradient)" stroke="#334d3b" stroke-width="5" stroke-linejoin="round"/>
<path d="M250 104c20-18 30-48 17-62-13-14-35 7-42 30-5 16-3 29 4 39Z" fill="url(#earGradient)" stroke="#334d3b" stroke-width="5" stroke-linejoin="round"/>
<path d="M109 89c-10-14-13-32-7-37 7-6 18 9 22 25 2 8 0 13-4 15Z" fill="#eff1dc" opacity=".72"/>
<path d="M252 89c10-14 13-32 7-37-7-6-18 9-22 25-2 8 0 13 4 15Z" fill="#eff1dc" opacity=".72"/>
</g>
<g class="sprout">
<path d="M181 91c-4-17 0-31 0-46" fill="none" stroke="#334d3b" stroke-width="10" stroke-linecap="round"/>
<path d="M181 90c-4-17 0-31 0-45" fill="none" stroke="url(#leafGradient)" stroke-width="5" stroke-linecap="round"/>
<path d="M180 52C158 58 134 45 134 23c0-15 21-22 34-8 8 8 12 23 12 37Z" fill="url(#leafGradient)" stroke="#334d3b" stroke-width="4.5" stroke-linejoin="round"/>
<path d="M181 47c21 6 43-7 43-29 0-14-19-21-32-8-8 8-11 23-11 37Z" fill="url(#leafGradientLight)" stroke="#334d3b" stroke-width="4.5" stroke-linejoin="round"/>
<path d="M156 24c9 0 17 8 20 20M199 24c-8 2-15 9-17 18" fill="none" stroke="#e8efd5" stroke-width="2.2" stroke-linecap="round" opacity=".55"/>
</g>
<g class="head">
<path d="M180 64c60 0 105 36 105 94 0 47-38 75-105 75S75 205 75 158c0-58 45-94 105-94Z" fill="url(#furGradient)" stroke="#334d3b" stroke-width="5"/>
<path d="M104 127c9-29 35-47 65-50" fill="none" stroke="#fffaf0" stroke-width="8" stroke-linecap="round" opacity=".34"/>
<path d="M99 197c7 15 21 25 36 30" fill="none" stroke="#d8c3a7" stroke-width="3.2" stroke-linecap="round" opacity=".65"/>
</g>
<g class="face">
<g class="eyes eyes-open">
<g class="eye"><ellipse cx="145" cy="153" rx="8.5" ry="11.5" fill="#2f4735"/><circle cx="142" cy="148.5" r="2.8" fill="#fbf6e8"/><circle cx="148" cy="157" r="1.2" fill="#d8af91"/></g>
<g class="eye"><ellipse cx="215" cy="153" rx="8.5" ry="11.5" fill="#2f4735"/><circle cx="212" cy="148.5" r="2.8" fill="#fbf6e8"/><circle cx="218" cy="157" r="1.2" fill="#d8af91"/></g>
</g>
<g class="eyes eyes-closed">
<path d="M134 153c7 8 15 8 22 0M204 153c7 8 15 8 22 0" fill="none" stroke="#2f4735" stroke-width="3.5" stroke-linecap="round"/>
</g>
<ellipse cx="121" cy="181" rx="20" ry="9" fill="#e7967c" opacity=".47"/>
<ellipse cx="239" cy="181" rx="20" ry="9" fill="#e7967c" opacity=".47"/>
<path d="M126 176h3M129 181h3M232 176h3M235 181h3" stroke="#cb806b" stroke-width="1.5" stroke-linecap="round" opacity=".5"/>
<path class="nose" d="M175 163c3-2.5 7-2.5 10 0-1 3-3 5-5 5s-4-2-5-5Z" fill="#334d3b"/>
<g class="mouth mouth--happy">
<path d="M180 168c0 7-8 10-16 5M180 168c0 7 8 10 16 5" fill="none" stroke="#334d3b" stroke-width="3.1" stroke-linecap="round"/>
</g>
<g class="mouth mouth--neutral">
<path d="M169 174c7 4 15 4 22 0" fill="none" stroke="#334d3b" stroke-width="3.1" stroke-linecap="round"/>
</g>
<g class="mouth mouth--sad">
<path d="M168 180c7-8 17-8 24 0" fill="none" stroke="#334d3b" stroke-width="3.1" stroke-linecap="round"/>
</g>
</g>
<g class="accessory accessory--flower">
<path d="M101 112c24-23 132-29 159-4" fill="none" stroke="#5d7d5b" stroke-width="3.4" stroke-linecap="round"/>
<g transform="translate(120 103) scale(.9)"><use href="#daisy"></use></g>
<g transform="translate(161 89) scale(.7) rotate(12)"><use href="#daisy"></use></g>
<g transform="translate(207 90) scale(.65) rotate(-10)"><use href="#daisy"></use></g>
<g transform="translate(243 106) scale(.82) rotate(20)"><use href="#daisy"></use></g>
</g>
<g class="accessory accessory--scarf">
<path d="M110 214c35 21 105 21 140 0l6 23c-40 21-114 21-153 0Z" fill="#dc856b" stroke="#334d3b" stroke-width="5" stroke-linejoin="round"/>
<path d="M113 238c-11 15-13 33-3 41 12-5 19-22 18-37Z" fill="#dc856b" stroke="#334d3b" stroke-width="4.4" stroke-linejoin="round"/>
<path d="M126 242c-1 12 2 25 9 32 9-8 10-25 4-36Z" fill="#e99b82" stroke="#334d3b" stroke-width="4.4" stroke-linejoin="round"/>
<path d="M139 225c25 7 53 7 79 0" fill="none" stroke="#f4b59d" stroke-width="3" stroke-linecap="round" opacity=".8"/>
<circle cx="123" cy="240" r="3" fill="#f2cbb2"/>
<circle cx="145" cy="246" r="2.2" fill="#f2cbb2" opacity=".8"/>
</g>
<g class="accessory accessory--beret">
<path d="M104 91c0-32 35-51 77-51 43 0 76 19 76 51 0 12-31 18-76 18-46 0-77-6-77-18Z" fill="#a66555" stroke="#334d3b" stroke-width="5" stroke-linejoin="round"/>
<path d="M118 80c19-17 58-23 89-21 17 1 31 5 41 11" fill="none" stroke="#c38672" stroke-width="5" stroke-linecap="round" opacity=".9"/>
<path d="M180 41c-4-9 1-17 7-19" fill="none" stroke="#334d3b" stroke-width="3" stroke-linecap="round"/>
<ellipse cx="189" cy="21" rx="8" ry="4.5" transform="rotate(-22 189 21)" fill="#7c9868" stroke="#334d3b" stroke-width="2.6"/>
</g>
</g>
</svg>
</div>
</button>
<div class="zzz" aria-hidden="true">
<i>z</i><i>z</i><i>z</i>
</div>
</div>
<div class="nameplate">
<div class="nameplate-mark" aria-hidden="true">
<svg viewBox="0 0 32 32">
<path d="M16 28V15" fill="none" stroke="#3e5944" stroke-width="2.2" stroke-linecap="round"/>
<path d="M16 18C8 19 3.5 14.7 4 8c6.5-.4 11.5 3.7 12 10Z" fill="#8ba678" stroke="#3e5944" stroke-width="1.8"/>
<path d="M16 16c8.2.3 12.8-4.3 12.5-11-7.2 0-12.2 4.5-12.5 11Z" fill="#b2c799" stroke="#3e5944" stroke-width="1.8"/>
</svg>
</div>
<div class="nameplate-copy">
<div class="nameplate-title">
<h1>PICO</h1>
<span id="miniLevel">LV.01</span>
</div>
<p>相遇第 <span id="dayCount">1</span> 天 · <span id="miniMood">心情很好</span></p>
</div>
</div>
<button class="pet-hint" id="petHint" type="button">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-sparkle"></use></svg>
<span>摸摸它</span>
</button>
</div>
<div class="fx-layer" id="petFx" aria-hidden="true"></div>
<div class="bubble-layer" id="bubbleField" aria-hidden="true"></div>
<div class="habitat-grain" aria-hidden="true"></div>
</section>
<aside class="dashboard" aria-label="照料 PICO">
<section class="panel care-panel" aria-labelledby="careTitle">
<div class="care-head">
<div class="care-heading">
<p class="eyebrow"><span class="live-dot"></span><span id="moodLabel">此刻心情很好</span></p>
<h2 id="careTitle">午后好,PICO 在晒太阳</h2>
</div>
<div class="level-badge" id="levelBadge" style="--progress: 26%" title="成长进度">
<span class="level-word">LV.</span>
<strong id="levelNum">01</strong>
<span class="level-xp" id="levelXp">18 / 70</span>
</div>
</div>
<p class="care-copy" id="moodCopy">一切都刚刚好。PICO 把今天的阳光收进了口袋里。</p>
<div class="stats-grid" aria-label="PICO 的状态">
<div class="stat" data-stat="hunger">
<div class="stat-head">
<span class="stat-icon stat-icon--hunger"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-bowl"></use></svg></span>
<span class="stat-name">饱食</span>
<span class="stat-value"><b id="valueHunger">78</b><small>%</small></span>
</div>
<div class="stat-track" id="trackHunger" role="progressbar" aria-label="饱食度" aria-valuemin="0" aria-valuemax="100" aria-valuenow="78">
<i id="barHunger" style="width:78%"></i>
</div>
</div>
<div class="stat" data-stat="happiness">
<div class="stat-head">
<span class="stat-icon stat-icon--happiness"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-heart"></use></svg></span>
<span class="stat-name">心情</span>
<span class="stat-value"><b id="valueHappiness">82</b><small>%</small></span>
</div>
<div class="stat-track" id="trackHappiness" role="progressbar" aria-label="心情" aria-valuemin="0" aria-valuemax="100" aria-valuenow="82">
<i id="barHappiness" style="width:82%"></i>
</div>
</div>
<div class="stat" data-stat="energy">
<div class="stat-head">
<span class="stat-icon stat-icon--energy"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-bolt"></use></svg></span>
<span class="stat-name">精力</span>
<span class="stat-value"><b id="valueEnergy">68</b><small>%</small></span>
</div>
<div class="stat-track" id="trackEnergy" role="progressbar" aria-label="精力" aria-valuemin="0" aria-valuemax="100" aria-valuenow="68">
<i id="barEnergy" style="width:68%"></i>
</div>
</div>
<div class="stat" data-stat="cleanliness">
<div class="stat-head">
<span class="stat-icon stat-icon--cleanliness"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-bubbles"></use></svg></span>
<span class="stat-name">清洁</span>
<span class="stat-value"><b id="valueCleanliness">88</b><small>%</small></span>
</div>
<div class="stat-track" id="trackCleanliness" role="progressbar" aria-label="清洁度" aria-valuemin="0" aria-valuemax="100" aria-valuenow="88">
<i id="barCleanliness" style="width:88%"></i>
</div>
</div>
</div>
<div class="actions-grid" aria-label="照料方式">
<button class="care-action care-action--feed" id="actionFeed" type="button" data-action="feed">
<span class="action-icon"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-bowl"></use></svg></span>
<span class="action-copy">
<strong>准备一餐</strong>
<small>热乎乎的,刚好入口</small>
</span>
<span class="action-arrow" aria-hidden="true">↗</span>
</button>
<button class="care-action care-action--play" id="actionPlay" type="button" data-action="play">
<span class="action-icon"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-star"></use></svg></span>
<span class="action-copy">
<strong>追一颗星</strong>
<small>玩一局小游戏</small>
</span>
<span class="action-arrow" aria-hidden="true">↗</span>
</button>
<button class="care-action care-action--clean" id="actionClean" type="button" data-action="clean">
<span class="action-icon"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-bubbles"></use></svg></span>
<span class="action-copy">
<strong>洗个香香澡</strong>
<small>把烦恼冲成泡泡</small>
</span>
<span class="action-arrow" aria-hidden="true">↗</span>
</button>
<button class="care-action care-action--sleep" id="actionSleep" type="button" data-action="sleep">
<span class="action-icon"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-moon"></use></svg></span>
<span class="action-copy">
<strong id="sleepLabel">哄它睡觉</strong>
<small id="sleepSub">钻进软绵绵的梦里</small>
</span>
<span class="action-arrow" aria-hidden="true">↗</span>
</button>
</div>
<div class="care-foot">
<span class="care-count" id="careSentence">今天还没有被照顾,先摸摸它吧</span>
<button class="text-button" id="wardrobeBtn" type="button">
打开小衣橱
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-arrow"></use></svg>
</button>
</div>
</section>
<section class="panel quest-panel" aria-labelledby="questTitle">
<div class="quest-head">
<div>
<p class="eyebrow">TODAY'S LITTLE NOTES</p>
<h2 id="questTitle">今天的小约定</h2>
</div>
<span class="refresh-note">每天 0 点刷新</span>
</div>
<ul class="quest-list" id="questList"></ul>
<div class="quest-whisper" aria-label="PICO 的小纸条:不用每次都做到满分,陪着就已经很好了。">
<span class="whisper-mark" aria-hidden="true">
<svg viewBox="0 0 32 32">
<path d="M16 27V15" fill="none" stroke="#49614a" stroke-width="2.2" stroke-linecap="round"/>
<path d="M16 18C8 19 3.5 14.7 4 8c6.5-.4 11.5 3.7 12 10Z" fill="#8ca77a" stroke="#49614a" stroke-width="1.8"/>
<path d="M16 16c8.2.3 12.8-4.3 12.5-11-7.2 0-12.2 4.5-12.5 11Z" fill="#b5c89c" stroke="#49614a" stroke-width="1.8"/>
</svg>
</span>
<span class="whisper-copy">
<span class="whisper-label">A NOTE FROM PICO</span>
<span class="whisper-text">“不用每次都做到满分,<br>陪着,就已经很好了。”</span>
</span>
<span class="whisper-spark" aria-hidden="true">✦</span>
</div>
<div class="quest-foot">
<p><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-sparkle"></use></svg>完成约定,星星币会自动落进口袋。</p>
<span class="save-note">陪伴记录会自动保存在这台设备上</span>
</div>
</section>
</aside>
</main>
</div>
<dialog class="pico-dialog food-dialog" id="foodDialog" aria-labelledby="foodTitle">
<div class="dialog-shell">
<div class="dialog-head">
<div>
<p class="eyebrow">PICO'S LITTLE PANTRY</p>
<h2 id="foodTitle">今天想吃点什么?</h2>
</div>
<button class="dialog-close" type="button" data-close-dialog aria-label="关闭">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-close"></use></svg>
</button>
</div>
<div class="food-grid">
<button class="food-card" type="button" data-food="pudding">
<span class="food-art food-art--pudding" aria-hidden="true">
<svg viewBox="0 0 96 96">
<ellipse cx="48" cy="79" rx="27" ry="5" fill="#dfd5c4" opacity=".7"/>
<path d="M29 41h38l-4 26c-2 8-8 12-15 12s-13-4-15-12Z" fill="#f8e5de" stroke="#4c5f4d" stroke-width="2.4" stroke-linejoin="round"/>
<path d="M31.5 49h33l-2.6 16c-1.5 7-7 10-14 10s-12-3-13.5-10Z" fill="#f3b7b2"/>
<path d="M35 41c2-7 8-11 13-11s11 4 13 11" fill="#fff7e7" stroke="#4c5f4d" stroke-width="2.4"/>
<path d="M43 27c0-5 3-7 7-9 2 4 1 8-2 11" fill="#f7e8c8" stroke="#4c5f4d" stroke-width="2.2" stroke-linecap="round"/>
<path d="M50 25c-6-2-10-7-9-12 5 0 9 3 11 8" fill="#83a170" stroke="#4c5f4d" stroke-width="2.2"/>
<path d="M55 24c4-5 10-6 14-3-2 4-6 7-10 7" fill="#6f9165" stroke="#4c5f4d" stroke-width="2.2"/>
<circle cx="40" cy="59" r="1.6" fill="#fff5e8" opacity=".9"/>
<circle cx="56" cy="66" r="1.2" fill="#fff5e8" opacity=".8"/>
</svg>
</span>
<span class="food-copy">
<strong>草莓布丁</strong>
<span>软乎乎,甜度刚刚好</span>
</span>
<span class="food-effects"><i>饱食 +16</i><i>心情 +6</i></span>
</button>
<button class="food-card" type="button" data-food="cookie">
<span class="food-art food-art--cookie" aria-hidden="true">
<svg viewBox="0 0 96 96">
<ellipse cx="48" cy="80" rx="26" ry="5" fill="#dfd5c4" opacity=".65"/>
<path d="m48 23 6.3 13.5 14.8 1.7-11 10.3 3 14.6L48 55.9 34.9 63l3-14.6-11-10.3 14.8-1.7L48 23Z" fill="#eccb88" stroke="#55604c" stroke-width="2.6" stroke-linejoin="round"/>
<circle cx="45" cy="41" r="2.4" fill="#d9a45d"/>
<circle cx="54" cy="48" r="2" fill="#dbab64"/>
<circle cx="45" cy="53" r="1.6" fill="#e5bd7b"/>
<path d="M37 63c6 3 14 3 20 0" fill="none" stroke="#f8edc9" stroke-width="2" stroke-linecap="round"/>
<path d="m69 30 1.5 4.3L75 36l-4.5 1.7L69 42l-1.5-4.3L63 36l4.5-1.7L69 30Z" fill="#f5e7b3"/>
<circle cx="27" cy="33" r="2.5" fill="#cfdfb8"/>
<circle cx="63" cy="58" r="2" fill="#e8bea9"/>
</svg>
</span>
<span class="food-copy">
<strong>星星饼干</strong>
<span>咬一口,会听见咔嚓声</span>
</span>
<span class="food-effects"><i>饱食 +11</i><i>心情 +9</i></span>
</button>
<button class="food-card" type="button" data-food="onigiri">
<span class="food-art food-art--onigiri" aria-hidden="true">
<svg viewBox="0 0 96 96">
<ellipse cx="48" cy="80" rx="27" ry="5" fill="#dfd5c4" opacity=".65"/>
<path d="M48 22c3 0 6 2 9 8l16 30c3 6 1 10-6 11-13 2-25 2-38 0-7-1-9-5-6-11l16-30c3-6 6-8 9-8Z" fill="#fffaf0" stroke="#4c5f4d" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M38 61h20v11c-6 2-14 2-20 0Z" fill="#425746" stroke="#4c5f4d" stroke-width="2.2" stroke-linejoin="round"/>
<ellipse cx="38" cy="55" rx="4.4" ry="2.6" fill="#eba18c" opacity=".55"/>
<ellipse cx="58" cy="55" rx="4.4" ry="2.6" fill="#eba18c" opacity=".55"/>
<path d="M44 55c1.5 2 6.5 2 8 0" fill="none" stroke="#4c5f4d" stroke-width="1.8" stroke-linecap="round"/>
<path d="M64 27c5-2 9-1 12 2-4 3-8 3-11 1Z" fill="#a7c092" stroke="#4c5f4d" stroke-width="1.8"/>
<path d="M36 31c-3-4-3-8-1-11 4 2 6 6 5 10" fill="#b9cf9d" stroke="#4c5f4d" stroke-width="1.8"/>
</svg>
</span>
<span class="food-copy">
<strong>云朵饭团</strong>
<span>暖胃,也暖一小会儿心</span>
</span>
<span class="food-effects"><i>饱食 +24</i><i>精力 +5</i></span>
</button>
</div>
<p class="dialog-note">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-sparkle"></use></svg>
无糖,无添加,只有一点点魔法。
</p>
</div>
</dialog>
<dialog class="pico-dialog game-dialog" id="gameDialog" aria-label="追星星小游戏">
<div class="dialog-shell game-shell">
<div class="dialog-head dialog-head--game">
<div>
<p class="eyebrow">A TINY GAME FOR TWO</p>
<h2 id="gameTitle">和 PICO 一起,追星星</h2>
</div>
<button class="dialog-close" type="button" data-close-dialog aria-label="关闭">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-close"></use></svg>
</button>
</div>
<div class="game-intro" id="gameIntro">
<div class="game-hero" aria-hidden="true">
<span class="hero-orbit hero-orbit--one"></span>
<span class="hero-orbit hero-orbit--two"></span>
<span class="hero-star"><svg viewBox="0 0 24 24"><use href="#i-star"></use></svg></span>
<span class="hero-dot hero-dot--one"></span>
<span class="hero-dot hero-dot--two"></span>
<span class="hero-dot hero-dot--three"></span>
</div>
<h3>15 秒,接住五颗小星星</h3>
<p>星星会从草地的光里冒出来。点中它们,把亮晶晶的心情带回去给 PICO。</p>
<div class="game-rewards">
<span><svg class="icon" viewBox="0 0 24 24"><use href="#i-heart"></use></svg> 心情</span>
<span><svg class="icon" viewBox="0 0 24 24"><use href="#i-sparkle"></use></svg> 成长值</span>
<span><svg class="icon" viewBox="0 0 24 24"><use href="#i-star"></use></svg> 星星币</span>
</div>
<button class="primary-button" id="startGameBtn" type="button">
开始找星星
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-arrow"></use></svg>
</button>
</div>
<div class="game-play" id="gamePlay" hidden>
<div class="game-hud">
<div class="game-score">接住 <strong id="gameScore">0</strong><span> / 5</span></div>
<div class="game-time">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-clock"></use></svg>
<span id="gameTime">15.0</span>s
</div>
</div>
<div class="game-stage" id="gameStage">
<div class="stage-glow stage-glow--one" aria-hidden="true"></div>
<div class="stage-glow stage-glow--two" aria-hidden="true"></div>
<div class="stage-hill stage-hill--one" aria-hidden="true"></div>
<div class="stage-hill stage-hill--two" aria-hidden="true"></div>
<p class="game-stage-tip" id="gameStageTip">光在动,星星要出来了。</p>
</div>
</div>
<div class="game-result" id="gameResult" hidden>
<div class="result-stars" id="resultStars" aria-hidden="true"></div>
<p class="eyebrow">A LITTLE POCKETFUL OF LIGHT</p>
<h3 id="resultTitle">接住 4 颗星星!</h3>
<p id="resultCopy">星星落进 PICO 的口袋里,它正在偷偷开心。</p>
<div class="result-rewards" id="resultRewards"></div>
<p class="result-extra" id="resultExtra"></p>
<button class="primary-button" id="claimGameBtn" type="button">
收下这份开心
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-sparkle"></use></svg>
</button>
</div>
</div>
</dialog>
<dialog class="pico-dialog wardrobe-dialog" id="wardrobeDialog" aria-labelledby="wardrobeTitle">
<div class="dialog-shell">
<div class="dialog-head">
<div>
<p class="eyebrow">PICO'S TINY WARDROBE</p>
<h2 id="wardrobeTitle">给小小的它,挑一点点可爱</h2>
</div>
<button class="dialog-close" type="button" data-close-dialog aria-label="关闭">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-close"></use></svg>
</button>
</div>
<div class="wallet-row">
<div class="wallet-copy">
<span>口袋里的星星币</span>
<strong>
<svg class="icon coin-inline" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-star"></use></svg>
<span id="shopCoinCount">18</span>
</strong>
</div>
<p>照顾 PICO、完成今日小约定,就能收集更多星星。</p>
</div>
<div class="shop-grid" id="shopGrid"></div>
<div class="shop-foot">
<button class="text-button text-button--plain" id="removeAccessoryBtn" type="button">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-hanger"></use></svg>
换回自然的样子
</button>
<p id="shopMessage" role="status">配饰是永久的。选一个喜欢的吧。</p>
</div>
</div>
</dialog>
<div class="toast-stack" id="toastStack" aria-live="polite" aria-atomic="false"></div>
<div class="celebration-layer" id="celebrationLayer" aria-hidden="true"></div>
<script src="app.js"></script>
</body>
</html>