*{box-sizing:border-box}body{margin:0;background:#f9f7f1;color:#29413e;font-family:Arial,"Microsoft YaHei",sans-serif}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #b64970;outline-offset:5px}header{max-width:1440px;margin:auto;padding:18px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5e3d8}header a{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-size:12px;letter-spacing:1px}header img{width:43px;height:43px;object-fit:contain;mix-blend-mode:multiply}header>span{font-size:11px;color:#849085}header button{background:none;border:1px solid #d9ded4;border-radius:24px;padding:9px 15px;font-size:10px;color:#6c7c70}main{max-width:1360px;margin:auto;padding:0 5%}.heading{text-align:center;padding-top:30px}.heading p{font-size:10px;letter-spacing:3px;color:#8b9688;margin:0 0 12px}h1{font-size:clamp(30px,3.6vw,50px);font-weight:500;letter-spacing:-2px;margin:0 0 12px}h1 em{font-style:normal;color:#b6426b}.heading>div{font-size:12px;color:#829082}#stage{position:relative;height:600px;isolation:isolate;touch-action:pan-y}.glow{position:absolute;left:50%;top:42%;width:55%;height:85%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,#ede9d9b0,transparent 68%);pointer-events:none}.floor{position:absolute;bottom:16%;left:34%;width:32%;height:25px;background:#9b9b761c;border-radius:50%;filter:blur(12px)}.person{position:absolute;left:50%;top:47%;width:430px;aspect-ratio:1;transform:translate(-50%,-50%);background-image:url('assets/person-poses.png');background-size:200% 200%;background-repeat:no-repeat;pointer-events:none;z-index:2}.person[data-pose="0"]{background-position:0 0}.person[data-pose="1"]{background-position:100% 0}.person[data-pose="2"]{background-position:0 100%}.person[data-pose="3"]{background-position:100% 100%}.person-caption{position:absolute;top:85%;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:2px;color:#9b9d8a;white-space:nowrap}.scene{position:absolute;top:0;left:0;width:215px;padding:6px 6px 12px;background:#fffdf8;border:1px solid #e8e5d9;border-radius:15px;box-shadow:0 10px 35px #454b3410;transform:translate(-50%,-50%);text-align:left;z-index:3;will-change:transform}.photo{width:100%;aspect-ratio:1.45;overflow:hidden;border-radius:10px;background:#e9e5dc}.photo img{height:100%;width:100%;object-fit:cover;display:block}.scene>span{display:flex;flex-direction:column;gap:5px;padding:10px 8px 0}.scene b{font-size:12px;font-weight:500;color:#304a43}.scene i{font-size:9px;font-style:normal;color:#919a8e}.scene.active{border-color:#bf6887;box-shadow:0 14px 40px #5d3c4222;z-index:8}.scene.dim{filter:saturate(.8) brightness(.96)}.explanation{border-top:1px solid #dddcd1;border-bottom:1px solid #dddcd1;padding:22px 0;display:flex;align-items:center;gap:40px;min-height:110px}.explanation>div{min-width:35%}#number{font-size:9px;color:#b25477;letter-spacing:2px}.explanation h2{font-size:23px;font-weight:500;margin:8px 0 0;line-height:1.4}.explanation p{max-width:490px;font-size:13px;line-height:1.9;color:#7d897c;margin:0}.explanation button{margin-left:auto;white-space:nowrap;border:0;border-bottom:1px solid #b86e86;background:none;padding:10px 0;color:#a14d6d;font-size:11px}.note{text-align:center;font-size:10px;color:#929b8e;margin:23px 0}dialog{border:0;padding:15px;background:#fffdf8;border-radius:14px;width:min(850px,90vw);max-height:90vh}dialog::backdrop{background:#243b3699;backdrop-filter:blur(6px)}dialog>button{display:block;margin:0 0 12px auto;background:none;border:0;padding:9px;font-size:12px}dialog img{width:100%;max-height:60vh;object-fit:contain;border-radius:9px}dialog>div{padding:0 16px}dialog h2{font-size:23px}dialog p{font-size:14px;line-height:1.8;color:#738172}@media(max-width:750px){header{padding:15px 5%}header>span{display:none}.heading{padding-top:26px}#stage{height:505px;margin:0 -2%}.person{width:275px;top:49%}.scene{width:118px;padding:4px 4px 8px;border-radius:10px}.scene .photo{aspect-ratio:1.15;border-radius:7px}.scene>span{padding:7px 3px 0;gap:4px}.scene b{font-size:9px}.scene i{font-size:7px}.person-caption{font-size:9px;top:90%;letter-spacing:1px}.explanation{display:block;padding:18px 0;min-height:150px}.explanation p{margin-top:12px;font-size:12px}.explanation h2{font-size:23px}.explanation button{margin-top:7px}.floor{bottom:23%}.note{font-size:9px;line-height:1.8}.scene.active{z-index:8}}
@media(max-width:750px){#stage{height:650px}.person{width:260px;top:48%}.person-caption{top:94%}.floor{bottom:30%}}
/* Eight-direction poses and eight distinct scenes. */
#stage{height:810px}.scene{width:180px}.person{width:370px;top:46%}.person-caption{top:71%}.floor{bottom:30%}.person[data-pose]{background-image:url('assets/person-poses.png')}.person[data-pose="0"],.person[data-pose="2"],.person[data-pose="4"],.person[data-pose="6"]{background-image:url('assets/person-cardinal.png')}.person[data-pose="0"]{background-position:100% 0}.person[data-pose="1"]{background-position:100% 100%}.person[data-pose="2"]{background-position:0 100%}.person[data-pose="3"]{background-position:0 100%}.person[data-pose="4"]{background-position:100% 100%}.person[data-pose="5"]{background-position:0 0}.person[data-pose="6"]{background-position:0 0}.person[data-pose="7"]{background-position:100% 0}@media(max-width:750px){#stage{height:940px}.scene{width:105px}.scene b{font-size:8px}.scene i{font-size:7px}.person{width:225px;top:48%}.person-caption{top:62%;font-size:8px}.floor{bottom:39%}}
#stage{margin-top:32px}.person-caption{display:none}.scene[data-index="7"] img{object-position:center top}@media(max-width:750px){#stage{margin-top:15px}}
/* Embedded homepage presentation */
header{display:none}main{max-width:1280px;padding:0 4%}.heading{padding-top:18px}h1{font-size:clamp(30px,3.4vw,44px)}.heading>div{font-size:14px}.explanation h2{font-size:24px}.explanation p{font-size:14px}.scene i{font-size:10px}.scene b{font-size:12px}#stage{margin-top:40px}.note{padding-bottom:15px;margin-bottom:0}dialog{position:fixed}@media(max-width:750px){.scene b{font-size:9px}.scene i{font-size:8px}.heading>div{font-size:12px}.explanation p{font-size:13px}}
.heading #motion{margin:16px auto 0;background:transparent;border:1px solid #deded1;border-radius:20px;padding:7px 14px;font-size:10px;color:#74826f}
.package-display{position:absolute;left:43%;top:59%;transform:translateX(-50%);width:172px;height:178px;background:none;border:0;padding:0;z-index:4;isolation:isolate}.package-display img{position:absolute;object-fit:contain;filter:drop-shadow(0 6px 6px #463d2924);border-radius:2px}.pack-back{width:77px;height:123px;top:12px;z-index:-1}.pack-left{left:3px;transform:rotate(-13deg)}.pack-right{right:3px;transform:rotate(13deg)}#pack-front{width:96px;height:145px;top:0;left:38px}.package-display span{position:absolute;top:150px;left:-15px;width:202px;font-size:10px;color:#6f775b;text-align:center;background:#faf8f2dd;border-radius:15px;padding:5px 0}.package-display:hover #pack-front{filter:drop-shadow(0 8px 9px #463d2940)}@media(max-width:750px){.package-display{left:50%;top:60%;width:125px;height:145px}.pack-back{width:57px;height:90px;top:8px}#pack-front{width:72px;height:109px;left:26px}.package-display span{top:112px;left:-10px;width:145px;font-size:8px}}
@media(min-width:751px){.package-display{left:40%;top:49%}}
/* Keep packs outside the portrait and the orbit, clear of all eight gestures. */
#stage{height:1010px;padding-bottom:200px}.person{top:372.6px}.package-display{left:50%;top:810px;width:172px;height:178px}.floor{bottom:auto;top:550px}@media(max-width:750px){#stage{height:1140px;padding-bottom:200px}.person{top:451.2px}.package-display{left:50%;top:950px;width:125px;height:145px}.floor{top:570px;bottom:auto}}

/* Packaging is now part of the orbit. */
#stage{height:810px;padding-bottom:0}.scene{width:160px}.person{top:46%}.package-scene .photo{background:#fff6d9}.package-scene .photo img{object-fit:contain;padding:3px}.package-scene{border-color:#dfc653}@media(max-width:750px){#stage{height:1060px;padding-bottom:0}.scene{width:105px}.person{top:55%;width:220px}.floor{top:680px}}

/* Circular scenes, paired with uncropped package photographs. */
.scene{width:166px;height:166px;border-radius:50%;padding:4px;background:#fffdf8;overflow:visible}.scene .photo{width:100%;height:100%;aspect-ratio:1;border-radius:50%;background:#fff9e9}.scene .photo img{object-fit:cover;border-radius:50%}.scene.show-package .photo img{object-fit:contain;padding:13px 24px;border-radius:0}.scene>span{position:absolute;top:100%;left:-15%;width:130%;text-align:center;align-items:center;padding:9px 0 0;pointer-events:none}.scene b{background:#faf8f2e8;padding:2px 6px;border-radius:12px}.scene.active{border-color:#bf6887}.scene[data-index="7"] img{object-position:center top}@media(max-width:750px){#stage{height:940px}.person{top:48%;width:225px}.scene{width:100px;height:100px}.scene.show-package .photo img{padding:8px 15px}.scene>span{padding-top:5px;gap:2px}.scene b{font-size:9px}.scene i{font-size:7px}.floor{top:570px}}
@media(min-width:751px){.person{width:340px;top:47%}}

/* Exclude the previous sprite row's bottom edge from the portrait frame. */
.person{clip-path:inset(1% 0 0 0)}


/* Keep the application gallery free of extra controls and instructions. */
.heading #motion,.explanation{display:none}


body{background:#faf7f3}.person[data-pose]{background-image:url('assets/uv-child.png')}.person[data-pose="0"],.person[data-pose="1"],.person[data-pose="7"]{background-position:100% 0}.person[data-pose="2"],.person[data-pose="3"]{background-position:0 100%}.person[data-pose="4"],.person[data-pose="5"]{background-position:100% 100%}.person[data-pose="6"]{background-position:0 0}.person{width:330px}#stage{height:760px;margin-top:24px}.scene{width:164px}.photo{aspect-ratio:1;background:#fff}.photo img{object-fit:contain;padding:4px}.scene i{font-size:10px}.person-caption{top:72%}.heading h1{letter-spacing:0}.heading em{color:#a54742}dialog img{max-height:65vh;object-fit:contain}header{display:none}@media(max-width:750px){#stage{height:800px}.scene{width:96px}.person{width:200px}.scene b{font-size:9px}.scene i{font-size:8px}.person-caption{top:63%;font-size:9px}.heading h1{font-size:28px}.heading>div{font-size:12px}}

.scene .photo{background:#fff}.scene .photo img{object-fit:contain;padding:8px 18px;border-radius:0}.person{clip-path:inset(3% 0 0 0)}@media(max-width:750px){.scene{height:96px}.scene .photo img{padding:5px 10px}.heading h1{font-size:25px}.heading h1 em{display:block}}


/* Eight independent directional poses and application photographs. */
.person[data-pose]{background-image:url("assets/uv-child-eight.png");background-size:400% 200%;clip-path:inset(3% 0 1% 0)}
.person[data-pose="0"]{background-position:0% 0%}
.person[data-pose="1"]{background-position:33.3333% 0%}
.person[data-pose="2"]{background-position:66.6667% 0%}
.person[data-pose="3"]{background-position:100% 0%}
.person[data-pose="4"]{background-position:0% 100%}
.person[data-pose="5"]{background-position:33.3333% 100%}
.person[data-pose="6"]{background-position:66.6667% 100%}
.person[data-pose="7"]{background-position:100% 100%}
.scene .photo img{object-fit:cover;padding:0;border-radius:50%}

/* Each pose has its own source window; hands never bleed from neighbours. */
.person[data-pose]{background-image:url("assets/uv-child-eight-fixed.png");background-repeat:no-repeat;clip-path:none}
.person[data-pose="0"]{aspect-ratio:1.128000;background-size:354.609929% 200%;background-position:0.000000% 0%}
.person[data-pose="1"]{aspect-ratio:1.008000;background-size:396.825397% 200%;background-position:37.700535% 0%}
.person[data-pose="2"]{aspect-ratio:0.796000;background-size:502.512563% 200%;background-position:66.666667% 0%}
.person[data-pose="3"]{aspect-ratio:1.068000;background-size:374.531835% 200%;background-position:100.000000% 0%}
.person[data-pose="4"]{aspect-ratio:1.068000;background-size:374.531835% 200%;background-position:0.000000% 100%}
.person[data-pose="5"]{aspect-ratio:1.052000;background-size:380.228137% 200%;background-position:36.227951% 100%}
.person[data-pose="6"]{aspect-ratio:0.812000;background-size:492.610837% 200%;background-position:66.499373% 100%}
.person[data-pose="7"]{aspect-ratio:1.068000;background-size:374.531835% 200%;background-position:100.000000% 100%}