*{box-sizing:border-box}body{margin:0;background:#111116;color:#f2f0f8;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif}button,a{-webkit-tap-highlight-color:transparent}main{max-width:1240px;margin:auto;padding:30px 54px 22px}header,footer{display:flex;justify-content:space-between;align-items:center}.brand{color:#f4f0ff;font-size:13px;font-weight:650;letter-spacing:.14em;text-decoration:none}.brand span{color:#87808f;margin-left:16px}.label,footer{font-size:10px;color:#77727f;letter-spacing:.13em}.layout{display:grid;grid-template-columns:1fr 400px;align-items:center;gap:70px;min-height:calc(100vh - 125px);padding:26px 0}.eyebrow{color:#bca5e6;font-size:12px;letter-spacing:.12em;margin-bottom:28px}h1{font-size:clamp(38px,4.2vw,60px);line-height:1.35;font-weight:550;letter-spacing:-.04em;margin:0 0 26px}.description{color:#9d97a8;font-size:14px;line-height:2}.steps{display:flex;align-items:center;gap:13px;margin:48px 0 34px;font-size:11px;color:#6f687b}.steps i{width:20px;height:1px;background:#3d3549}.steps .active{color:#e1c7ff}.reset{border:1px solid #494052;border-radius:24px;background:transparent;color:#dfd6e9;padding:12px 22px;cursor:pointer;font-size:12px}.reset:hover{background:#292131}.hint{font-size:10px;color:#766e82;margin-top:16px}.stage{position:relative;width:100%;aspect-ratio:9/16;max-height:740px;overflow:hidden;border-radius:24px;background:linear-gradient(180deg,#43c5ef 0%,#43c5ef 62%,#18536b 100%);box-shadow:0 24px 85px #0006;isolation:isolate;container-type:inline-size}.stage:before{position:absolute;inset:0;content:"";background:linear-gradient(180deg,#a776ee 0%,#a776ee 63%,#443365 100%);opacity:0;transition:opacity .6s}.stage.epic:before{opacity:1}.scene-head{position:absolute;top:13%;width:100%;text-align:center;z-index:3}.scene-head span{font-size:22px;font-weight:800;letter-spacing:.13em;color:#fffdf3}.scene-head p{font-size:10px;letter-spacing:.25em;color:#ffffff9c;margin-top:10px}.chest{position:absolute;left:10%;top:24%;width:80%;padding:0;border:0;background:none;cursor:pointer;z-index:3;transform-origin:50% 52%;touch-action:manipulation}.chest:disabled{cursor:default}.chest svg{width:100%;display:block;overflow:visible}.chest:focus-visible{outline:2px solid #fff9;outline-offset:8px;border-radius:25%}.shadow{position:absolute;left:29%;top:65%;width:42%;height:4%;background:#26335e30;border-radius:50%;filter:blur(7px)}.scene-bottom{position:absolute;bottom:10%;width:100%;text-align:center;z-index:4;pointer-events:none}.dots{display:flex;gap:20px;justify-content:center;margin-bottom:26px}.dots span{background:#119acc80;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;color:#78d9ed;font-size:18px;transition:.25s}.dots span.current{background:#fffcee;color:#29b0d4}.dots span.used{opacity:.35}.scene-bottom p{font-size:16px;font-weight:650;margin:0 0 12px;color:#fffbed}.caption{font-size:10px;color:#ffffff92}.aura{position:absolute;left:12%;top:35%;width:76%;height:32%;background:radial-gradient(ellipse,#fff1a2b0,transparent 68%);opacity:0;filter:blur(15px);z-index:1}#stars,.burst{position:absolute;inset:0;pointer-events:none;z-index:2}.star{position:absolute;top:0;left:var(--x);width:var(--s);height:var(--s);background:#fffbe7;clip-path:polygon(50% 0,64% 36%,100% 50%,64% 64%,50% 100%,36% 64%,0 50%,36% 36%);animation:flow var(--d) linear infinite;animation-delay:var(--delay);opacity:0}.star.dot{border-radius:50%;clip-path:none}.stage:not(.epic) .star{background:#e6fcff}.burst{z-index:4}.glint{position:absolute;width:5px;height:26px;border-radius:50%;background:#fffae1;left:var(--x);top:54%;opacity:0}.tap-ring{position:absolute;left:50%;top:52%;width:45px;height:45px;border:2px solid #fff2bb;border-radius:50%;opacity:0;transform:translate(-50%,-50%)}@keyframes flow{0%{transform:translate(0,650px) scale(.5);opacity:0}15%{opacity:.55}80%{opacity:.8}100%{transform:translate(var(--drift),110px) scale(1);opacity:0}}button:focus-visible{outline:2px solid #dcc5ff;outline-offset:4px}footer{border-top:1px solid #27232e;padding-top:20px;margin-top:10px}@media(max-width:800px){main{padding:22px}.layout{grid-template-columns:1fr;gap:28px;justify-items:center;padding-top:30px}.copy{width:100%;max-width:400px}.eyebrow{margin:0 0 12px}h1{font-size:32px;margin-bottom:10px}h1 br{display:none}.description{font-size:12px;margin:0}.description br{display:none}.steps{margin:22px 0 14px}.reset{position:relative;padding:9px 16px}.hint{display:inline;margin-left:10px;font-size:9px}.stage{max-width:400px}.label{font-size:8px}footer{font-size:8px}.layout{min-height:0}}@media(prefers-reduced-motion:reduce){.star{animation:none;top:var(--y);opacity:.4}.stage:before{transition:none}}
.chest{left:15.5%;top:20.3%;width:69%}.shadow{top:60.9%}.scene-head{top:16%}

body.embed{background:transparent}body.embed main{padding:12px 16px;max-width:none}body.embed header,body.embed footer{display:none}body.embed .layout{display:flex;flex-direction:column;gap:18px;min-height:0;padding:0}body.embed .copy{order:2;text-align:center;width:100%;max-width:none}body.embed .copy>*:not(.reset){display:none}body.embed .stage{order:1;width:min(100%,330px);max-height:none;flex:none;border-radius:18px}body.embed .reset{padding:11px 22px}

/* Reserve space above the complete opening/scale motion envelope. */
.scene-head{top:7%;pointer-events:none}
.scene-head span{font-size:clamp(14px,6.67cqw,22px);line-height:1.2}
.scene-head p{font-size:clamp(8px,3cqw,10px);line-height:1.2;margin:8px 0 0}

.pointer-light{position:absolute;z-index:6;pointer-events:none;width:52px;height:52px;border:1.5px solid #fff2bb;border-radius:50%;background:radial-gradient(circle,#fffdebc9 0%,#ffe89263 30%,transparent 69%);box-shadow:0 0 20px #ffe79380;opacity:0;transform:translate(-50%,-50%)}
