/* 设计稿宽 1144px = calc(var(--r)*750)，1 设计像素 = calc(var(--r)*0.6556) */
.page { background: #3f2366; }

.content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.sp { flex-shrink: 1; min-height: 0; }
.sp-a { flex-grow: 1; max-height: calc(var(--r)*40); }
.sp-b { flex-grow: 1; max-height: calc(var(--r)*70); }
.sp-c { flex-grow: 2; }
.sp-d { flex-grow: 1; max-height: calc(var(--r)*120); }

.title { width: calc(var(--r)*488); display: block; flex-shrink: 0; }
.slogan { width: calc(var(--r)*435); display: block; flex-shrink: 0; }

.cards { position: relative; width: calc(var(--r)*750); height: calc(var(--r)*648); flex-shrink: 0; transform-origin: 50% 50%; }
.card { position: absolute; top: 0; width: calc(var(--r)*372); height: calc(var(--r)*648); }
.card-l { left: calc(var(--r)*8); }
.card-r { left: calc(var(--r)*371); }
.anim { position: absolute; left: calc(var(--r)*37); top: calc(var(--r)*47); width: calc(var(--r)*679); height: calc(var(--r)*359); }

/* 点击区域：整张卡片可点，按下有提亮反馈 */
.tap { position: absolute; top: calc(var(--r)*14); width: calc(var(--r)*344); height: calc(var(--r)*620); border-radius: calc(var(--r)*22); z-index: 5; transition: background .12s; }
.tap-l { left: calc(var(--r)*22); }
.tap-r { left: calc(var(--r)*385); }
.tap-on { background: rgba(255, 238, 190, .16); }

/* 未出帧前把原生画布移到屏幕外（原生组件层级高于 image，透明度/层级对其无效） */
.anim-canvas.off { left: -9999px !important; top: -9999px !important; }

.content{top:0;padding-top:env(safe-area-inset-top,0px)}
.tap{display:block;border:0;background:transparent;cursor:pointer}
.tap:active,.tap.on{background:rgba(255,238,190,.16)}
.cards{-webkit-transform-origin:50% 50%}