@charset "utf-8";
/* ==========================================================
   元气气泡实验室 —— 视觉系统
   轻快糖果风 + 实验室元素；主色元气绿 + 气泡蓝，辅助果味色系
   1rem = 设计稿 10px（375 宽基准，JS 按屏幕动态换算）
   ========================================================== */
:root{
  --green:#22B573; --green-d:#0F7D4C; --green-dd:#0E7A4A; --green-l:#9BE8C0; --mint:#E6F9EF;
  --blue:#4FC3F7; --blue-d:#1688C0; --blue-t:#0B6E9E; --blue-l:#D8F3FF; --pink-t:#C23A55;
  --peach:#FF9FB2; --orange:#FFB347; --grape:#9C6BD6; --lime:#7CC94F; --gold:#FFC94D;
  --ink:#1D3A31; --ink-2:#3B5750; --ink-3:#587069;   /* 小字颜色对浅色底的对比度均 ≥4.5:1 */
  --card:#FFFFFF;
  --display:"RHR","PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei",sans-serif;   /* 标题、按钮：源泉圆体粗体 */
  --sans:"RHR","PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;   /* 正文：源泉圆体常规 */
  --ease:cubic-bezier(.22,.61,.36,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --top:calc(var(--safe-t) + 6.2rem);
  --bottom:calc(max(var(--safe-b),1.4rem) + 1.2rem);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#DDF5E8}
body{display:flex;align-items:center;justify-content:center;font-family:var(--sans);color:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body.framed{background:radial-gradient(ellipse at 50% 30%,#2f6f57 0%,#123b2e 75%)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus{outline:none}
button:focus-visible{outline:.2rem solid var(--blue);outline-offset:.2rem}
ol,ul{list-style:none}
.defs{position:absolute;width:0;height:0;overflow:hidden}
[hidden]{display:none!important}

#app{position:relative;width:var(--w,100vw);height:var(--h,100vh);overflow:hidden;overflow:clip;isolation:isolate;touch-action:none;
  background:linear-gradient(180deg,#EAFBF2 0%,#F4FCFF 48%,#E2F5FF 100%)}
body.framed #app{border-radius:4.6rem;box-shadow:0 0 0 1rem #0b211a,0 0 0 1.12rem #3d6b5b,0 4rem 10rem rgba(0,0,0,.55)}
#desk-tip{display:none;position:fixed;left:0;right:0;bottom:12px;text-align:center;color:rgba(230,249,239,.55);font-size:12px;letter-spacing:.2em}
body.framed #desk-tip{display:block}
#rotate{display:none}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  #rotate{display:flex;position:fixed;inset:0;z-index:999;background:#EAFBF2;align-items:center;justify-content:center;font-size:16px;letter-spacing:.2em;color:var(--ink)}
}

/* ---------- 背景：柔光色块 + 上升气泡 ---------- */
.bg-blobs i{position:absolute;border-radius:50%;filter:blur(3rem);opacity:.55;pointer-events:none}
.bg-blobs i:nth-child(1){width:26rem;height:26rem;left:-10rem;top:-6rem;background:#C9F3DC}
.bg-blobs i:nth-child(2){width:22rem;height:22rem;right:-9rem;top:24%;background:#CDEFFF}
.bg-blobs i:nth-child(3){width:24rem;height:24rem;left:-6rem;bottom:-8rem;background:#FFE1E8;opacity:.45}
.bg-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bg-bubbles i{position:absolute;bottom:-4rem;border-radius:50%;border:.15rem solid rgba(79,195,247,.45);
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 18%,rgba(255,255,255,.15) 30%,rgba(216,243,255,.25) 100%);
  animation:rise linear infinite}
@keyframes rise{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(1.2rem,calc(var(--h,100vh) * -.55),0)}100%{transform:translate3d(-.6rem,calc(var(--h,100vh) * -1.1),0)}}

/* ---------- 通用排版 ---------- */
.page{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
  padding:var(--top) 2rem var(--bottom);visibility:hidden;opacity:0;pointer-events:none}
.page.on{visibility:visible;opacity:1;pointer-events:auto}
.page:not(.on) *{animation-play-state:paused!important}   /* 看不见的页面不跑循环动画，省电不掉帧 */
.h1{font-family:var(--display);font-weight:700;font-size:4.6rem;line-height:1.08;color:var(--green-d);letter-spacing:.2rem;
  text-shadow:0 .3rem 0 #fff,0 .6rem 1.4rem rgba(19,150,92,.18)}
.h2{font-family:var(--display);font-weight:700;font-size:2.6rem;line-height:1.2;color:var(--green-d);letter-spacing:.1rem;text-align:center}
.sub{font-size:1.45rem;color:var(--ink-2);margin-top:.6rem;text-align:center;line-height:1.5}
.hint{font-size:1.2rem;color:var(--ink-3);margin-top:1rem;text-align:center;line-height:1.5}
.hint.gift{color:var(--pink-t);font-weight:600}
.hint.gift::before{content:"🎁 "}
.head{text-align:center;flex:none}
.foot{flex:none;display:flex;justify-content:center;width:100%;min-height:5.6rem;margin-top:1rem}

/* 按钮：现代胶囊按钮（纯色微渐变 + 柔和彩色投影，按下轻微缩小），全站统一
   源泉圆体的字形在行框里略偏下（约 0.06em），按钮和胶囊标签都用「下内边距多 0.12em」把文字提到正中 */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:5.2rem;min-width:16rem;padding:0 3rem .12em;border-radius:99rem;
  font-family:var(--display);font-weight:700;font-size:1.9rem;letter-spacing:0;color:#fff;
  background:linear-gradient(180deg,#18A964 0%,#0C8A4D 100%);
  box-shadow:0 1rem 2.4rem -.6rem rgba(12,138,77,.55),0 .2rem .6rem rgba(12,138,77,.18),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .15s var(--ease),box-shadow .15s,background .2s,color .2s;overflow:hidden}
.btn:active{transform:scale(.97);box-shadow:0 .5rem 1.4rem -.6rem rgba(12,138,77,.5),inset 0 1px 0 rgba(255,255,255,.2)}
@media (hover:hover){.btn:hover{filter:brightness(1.05)}}
.btn.big{min-height:5.6rem;min-width:24rem;font-size:2.1rem}
.btn.ghost{color:var(--green-d);background:#fff;box-shadow:0 .8rem 2rem -.8rem rgba(15,60,40,.25),inset 0 0 0 .15rem rgba(15,125,76,.16)}
.btn.disabled{background:#CFDAD5;box-shadow:none;pointer-events:none}
.btn-s{display:inline-flex;align-items:center;justify-content:center;min-height:4rem;padding:0 1.6rem .12em;border-radius:99rem;
  font-size:1.35rem;font-weight:700;color:var(--green-d);background:rgba(255,255,255,.92);
  box-shadow:0 .4rem 1.2rem rgba(15,60,40,.08),inset 0 0 0 .1rem rgba(15,125,76,.14);transition:transform .15s var(--ease),background .2s}
.btn-s:active{transform:scale(.96);background:#fff}
.btn-s.light{color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 .1rem rgba(255,255,255,.55)}
.breath{animation:breath 1.2s ease-in-out infinite}
.btn.tap{animation:tap .2s var(--pop)}
@keyframes tap{0%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.breath:active{animation:none}
/* P8 主按钮：每 2s 放大 + 光泽扫过 */
.shine{animation:pulse2 2s ease-in-out infinite}
.shine::before{content:"";position:absolute;top:0;bottom:0;width:40%;left:0;transform:translateX(-150%) skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:sheen 2s ease-in-out infinite}
@keyframes pulse2{0%,40%,100%{transform:scale(1)}15%{transform:scale(1.07)}}
@keyframes sheen{0%{transform:translateX(-150%) skewX(-20deg)}35%,100%{transform:translateX(330%) skewX(-20deg)}}

/* ---------- 顶部 HUD ---------- */
.hud{position:absolute;left:0;right:0;top:calc(var(--safe-t) + 1.2rem);z-index:60;display:flex;justify-content:space-between;align-items:center;padding:0 1.4rem;pointer-events:none}
.hud>*{pointer-events:auto}
.hud-back{display:flex;align-items:center;gap:.2rem;height:3.6rem;padding:0 1.4rem .12em 1rem;border-radius:99rem;background:rgba(255,255,255,.9);box-shadow:0 .4rem 1.2rem rgba(15,60,40,.1),inset 0 0 0 .1rem rgba(255,255,255,.7);
  font-size:1.4rem;font-weight:700;color:var(--green-d);opacity:0;visibility:hidden;transition:opacity .3s,transform .15s}
.hud-back:active,.hud-pill:active,.hud-music:active,.car-btn:active{transform:scale(.94)}
.hud-back span{font-size:2.2rem;line-height:1;margin-top:-.2rem}
.hud-back.on{opacity:1;visibility:visible}
.hud-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:2.6rem;width:auto;border-radius:.4rem;
  box-shadow:0 .3rem 1rem rgba(0,0,0,.18);opacity:0;visibility:hidden;transition:opacity .3s;pointer-events:none}
.hud-logo.on{opacity:1;visibility:visible}
.hud-r{display:flex;gap:.8rem;align-items:center;margin-left:auto}
.hud-pill{height:3.2rem;padding:0 1.3rem .12em;border-radius:99rem;font-size:1.3rem;font-weight:700;color:var(--green-d);
  background:rgba(255,255,255,.9);box-shadow:0 .4rem 1.2rem rgba(15,60,40,.1),inset 0 0 0 .1rem rgba(255,255,255,.7);display:none;transition:transform .15s}
.hud-pill.on{display:block}
.hud-music{width:3.8rem;height:3.8rem;border-radius:50%;color:var(--green-d);display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);box-shadow:0 .4rem 1.2rem rgba(15,60,40,.1),inset 0 0 0 .1rem rgba(255,255,255,.7)}
.hud-music.show{display:flex}
.hud-music svg{width:2rem;height:2rem}
.hud-music.on{background:linear-gradient(180deg,#18A964,#0C8A4D);color:#fff;box-shadow:0 .6rem 1.4rem -.4rem rgba(12,138,77,.55);animation:spin 3.2s linear infinite}
.hud-music:not(.on)::after{content:"";position:absolute;width:2.4rem;height:.2rem;background:var(--green);transform:rotate(-45deg);border-radius:1rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 瓶身：元气森林官方产品图 + 瓶内气泡 ---------- */
.bottle{position:relative;width:100%}
.bottle::before{content:"";display:block;padding-top:283.58%}   /* 268:760，所有瓶身图同高 */
.bottle img,.bottle canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.bottle img{transition:opacity .8s var(--ease)}
.bottle .b-blank{filter:grayscale(1) brightness(1.06) contrast(.92);opacity:.92}
.bottle .b-img{opacity:0}
.bottle.has .b-img{opacity:1}
.bottle.has .b-blank{opacity:0}
.bottle.preview .b-img{opacity:.55}
.bottle-slot{position:relative;flex:none}
.bottle-slot::after{content:"";position:absolute;left:14%;right:14%;bottom:-1.6%;height:3%;border-radius:50%;background:rgba(29,58,49,.16);filter:blur(.3rem);z-index:-1}
.bottle-slot .bottle{transform-origin:50% 92%;will-change:transform}

/* 元气森林官方 Logo：官网原版黑底白字，原样使用，不改颜色 */
.logo{display:inline-block;flex:none;width:auto;border-radius:.3rem;-webkit-user-drag:none}

/* ---------- 调配师 IP ---------- */
.mascot{width:100%;height:auto;overflow:visible;display:block}
.mascot .goggles{transition:transform .3s var(--pop)}
.mascot-slot.big .goggles{transform:translateY(-30px)}
.mascot-slot.big.in .goggles{transform:none}
.mascot-slot.mini{position:absolute;width:8.6rem;right:-7.4rem;bottom:-.6rem;animation:bob 2.6s ease-in-out infinite}
.mascot-slot.tiny{display:inline-block;width:3.6rem;vertical-align:middle}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.6rem)}}

/* ---------- P1 加载 ---------- */
.p1{justify-content:center;gap:3rem}
.load-bottle{position:relative;width:8.6rem}
.load-bottle::before{content:"";display:block;padding-top:314%}
.load-bottle img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lb-gray{filter:grayscale(1) brightness(1.12);opacity:.32}
.lb-color{clip-path:inset(100% 0 0 0)}   /* 不能再加 drop-shadow：阴影会被裁切成一圈矩形印 */
.load-bottle::after{content:"";position:absolute;left:16%;right:16%;bottom:-1.6%;height:3%;border-radius:50%;background:rgba(29,58,49,.16);filter:blur(.3rem);z-index:-1}
.load-pct{position:absolute;left:0;right:0;top:40%;text-align:center;font-family:var(--display);font-weight:700;font-size:2.4rem;color:var(--green-dd);text-shadow:0 0 .6rem #fff,0 0 .6rem #fff}
.load-pct b{font-weight:400;font-size:3.6rem}
.load-brand{text-align:center;opacity:0;transition:opacity 1s var(--ease)}
.lb-ip{display:block;width:5.4rem;height:5rem;margin:0 auto .8rem;animation:bob 2.6s ease-in-out infinite}
.p1.brand-in .load-brand{opacity:1}
.load-brand .logo{display:block;height:4.4rem;margin:0 auto;border-radius:.5rem;box-shadow:0 .6rem 1.6rem rgba(0,0,0,.15)}
.load-slogan{margin-top:.6rem;font-size:1.3rem;letter-spacing:.2rem;color:var(--ink-2)}
.p1.out{transition:opacity .3s;opacity:0}

/* ---------- P2 首页 ---------- */
.p2{justify-content:space-between}
.lab{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.p2-title{text-align:center;margin-top:1.4rem}
.kicker{display:inline-block;padding:.44rem 1.4rem .56rem;border-radius:99rem;background:#fff;color:var(--green-d);font-size:1.25rem;font-weight:700;letter-spacing:.15rem;
  box-shadow:0 .3rem 1rem rgba(19,150,92,.12);margin-bottom:1.4rem}
.kicker .logo{height:1.8rem;vertical-align:-.45rem;margin-right:.6rem}
.p2 .sub{font-family:var(--display);font-weight:700;font-size:2rem;color:var(--blue-d);margin-top:1rem}
.p2-stage{position:relative;width:10.4rem;margin:1rem 0}
.p2-stage .bottle-slot{width:100%}
.p2-foot{display:flex;flex-direction:column;align-items:center}
.credit{margin-top:.8rem;font-size:1.15rem;color:var(--ink-3);letter-spacing:.1rem}

/* ---------- P3 调配师入场 ---------- */
.p3{justify-content:space-between}
.p3-head{text-align:center;opacity:0;transform:translateY(1rem);transition:all .5s var(--ease)}
.p3.in .p3-head{opacity:1;transform:none}
.mascot-slot.big{width:15rem;transform:translateX(26rem);opacity:0}
.p3.in .mascot-slot.big{transform:none;opacity:1;transition:transform .5s var(--pop) .3s,opacity .3s .3s}
.steps{display:flex;gap:1rem;width:100%;justify-content:center}
.steps li{flex:1;max-width:10.6rem;background:#fff;border-radius:1.8rem;padding:1.2rem .6rem 1.2rem;text-align:center;box-shadow:0 .6rem 1.6rem rgba(19,150,92,.12);
  opacity:0;transform:scale(.4) translateY(2rem);position:relative}
.steps li::after{content:"";position:absolute;right:-1rem;top:50%;width:1rem;height:.3rem;background:#BFE8D3;border-radius:1rem}
.steps li:last-child::after{display:none}
.steps svg{width:4.4rem;height:4.4rem;display:block;margin:0 auto .6rem}
.steps b{display:block;font-family:var(--display);font-weight:700;font-size:1.7rem;color:var(--green-d)}
.steps span{display:block;margin-top:.4rem;font-size:1.1rem;color:var(--ink-2);line-height:1.4}
.p3.in .steps li{animation:popIn .3s var(--pop) forwards}
.p3.in .steps li:nth-child(1){animation-delay:.6s}.p3.in .steps li:nth-child(2){animation-delay:.9s}.p3.in .steps li:nth-child(3){animation-delay:1.2s}
@keyframes popIn{to{opacity:1;transform:none}}
.p3-foot{display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(1rem)}
.p3.ready .p3-foot{opacity:1;transform:none;transition:all .4s var(--ease)}

/* ---------- P4 摇晃激活 ---------- */
.meter{display:flex;align-items:center;gap:1rem;width:100%;max-width:30rem;padding:.8rem 1.4rem;border-radius:99rem;background:rgba(255,255,255,.85);box-shadow:0 .4rem 1.2rem rgba(19,150,92,.1)}
.meter-label{font-size:1.2rem;font-weight:700;color:var(--green-d);white-space:nowrap}
.meter-bar{flex:1;height:1.2rem;border-radius:1rem;background:var(--blue-l);overflow:hidden;position:relative}
.meter-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:1rem;
  background:repeating-linear-gradient(90deg,#4FC3F7 0 .8rem,#7DD6FA .8rem 1.6rem);width:100%;transform:scaleX(0);transform-origin:left center;transition:transform .12s linear}
.meter-pct{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--blue-t);min-width:4.4rem;text-align:right}
.p4-head{margin-top:1.6rem;text-align:center}
.p4-head .h2::after{content:"";display:inline-block;width:2.6rem;height:2.6rem;margin-left:.4rem;vertical-align:-.4rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='15' y='6' width='18' height='34' rx='4.5' fill='%23fff' stroke='%2322B573' stroke-width='3'/%3E%3Cpath d='M8 15c-3.5 4.5-3.5 13.5 0 18M40 15c3.5 4.5 3.5 13.5 0 18' stroke='%234FC3F7' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:wiggle .6s ease-in-out infinite}
.p4.hold .p4-head .h2::after{display:none}
@keyframes wiggle{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.p4-stage{position:relative;flex:1;width:100%;display:flex;align-items:center;justify-content:center;min-height:0}
.p4-stage .bottle-slot{width:11.6rem;cursor:pointer;touch-action:none}
.shout{position:absolute;top:8%;left:50%;transform:translate(-50%,1rem) scale(.6);opacity:0;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:3rem;color:var(--blue-d);text-shadow:0 .3rem 0 #fff;pointer-events:none}
.shout.on{opacity:1;transform:translate(-50%,0) scale(1);transition:all .35s var(--pop)}
.press-hint{position:absolute;bottom:10%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.6rem;padding:.6rem 1.4rem;border-radius:99rem;
  background:rgba(29,58,49,.7);color:#fff;font-size:1.25rem;pointer-events:none;transition:opacity .3s}
.press-hint i{width:1.2rem;height:1.2rem;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:ping 1.2s infinite}
.p4.done .press-hint,.p4.holding .press-hint{opacity:0}
@keyframes ping{to{box-shadow:0 0 0 1rem rgba(255,255,255,0)}}
.flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,#fff 0%,rgba(255,255,255,.85) 35%,rgba(216,243,255,0) 75%);opacity:0;pointer-events:none;z-index:5}
.flash.on{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* ---------- P5 口味注入 ---------- */
.p5-stage{position:relative;flex:1;width:100%;min-height:0;margin-top:1.6rem}
.p5-stage .bottle-slot{position:absolute;left:50%;bottom:4%;width:9.6rem;transform:translateX(-50%)}
.flavor{position:absolute;width:8.4rem;height:8.4rem;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 .6rem 1.6rem rgba(0,0,0,.08),inset 0 0 0 .3rem var(--c);transition:transform .3s var(--pop),opacity .3s,box-shadow .3s;z-index:2}
.flavor svg{width:4.2rem;height:4.2rem}
.flavor b{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--cd);margin-top:.2rem}
.flavor[data-f="peach"]{--c:#FF9FB2;--cd:#C23A55;left:4%;top:6%}
.flavor[data-f="grape"]{--c:#9C6BD6;--cd:#6B3FB0;left:50%;top:0;margin-left:-4.2rem}
.flavor[data-f="lime"]{--c:#7CC94F;--cd:#2F7A14;right:4%;top:6%}
.flavor[data-f="lime"] b{font-size:1.3rem}
.flavor .ripple{position:absolute;inset:0;border-radius:50%;background:var(--c);opacity:0;transform:scale(.3);pointer-events:none;z-index:-1}
.flavor.sel{transform:scale(1.15);background:var(--c);box-shadow:0 .8rem 2rem rgba(0,0,0,.12),0 0 0 .5rem rgba(255,255,255,.9)}
.flavor.sel b{color:#fff}
.flavor.sel .ripple{animation:ripple .6s ease-out}
.p5-stage.picked .flavor:not(.sel){opacity:.5;transform:scale(.92)}
@keyframes ripple{0%{opacity:.6;transform:scale(.3)}100%{opacity:0;transform:scale(2.4)}}
.say{position:absolute;left:50%;top:30%;transform:translate(-50%,0) scale(.6);opacity:0;white-space:nowrap;padding:.9rem 1.6rem;border-radius:1.6rem;
  background:#fff;font-size:1.45rem;font-weight:700;color:var(--ink);box-shadow:0 .5rem 1.4rem rgba(0,0,0,.08);z-index:3;pointer-events:none}
.say::after{content:"";position:absolute;left:50%;bottom:-.7rem;margin-left:-.7rem;border:.7rem solid transparent;border-top-color:#fff;border-bottom:0}
.say.on{opacity:1;transform:translate(-50%,0) scale(1);transition:all .35s var(--pop)}
.pour{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.pour path{opacity:0}

/* ---------- P6 甜味揭秘 ---------- */
.p6-stage{position:relative;flex:1;width:100%;min-height:0;display:flex;align-items:flex-end;justify-content:center;transition:transform .5s var(--ease)}
.p6-stage .bottle-slot{width:9.6rem;margin-bottom:1rem;transition:transform .5s var(--ease)}
.p6.revealed .p6-stage .bottle-slot{transform:translateY(1rem) scale(.78);transform-origin:50% 100%}
.molecule{position:absolute;left:50%;top:6%;width:8.6rem;margin-left:-4.3rem;text-align:center;touch-action:none;cursor:grab;z-index:4;animation:float 2s ease-in-out infinite}
.molecule svg{width:7rem;height:7rem;display:block;margin:0 auto;filter:drop-shadow(0 .4rem .8rem rgba(255,180,40,.45))}
.molecule span{display:inline-block;margin-top:.2rem;padding:.3rem 1rem;border-radius:99rem;background:#FFF6D8;color:#8A5A00;font-size:1.2rem;font-weight:700}
.molecule.drag{animation:none;cursor:grabbing}
.molecule.drag svg{transform:scale(1.12)}
.molecule.drop{animation:none;transition:transform .3s var(--ease)}
.molecule.sink{animation:none;transition:transform .5s ease-in,opacity .5s ease-in;opacity:0}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1rem)}}
.p6-stage::before{content:"";position:absolute;left:50%;top:24%;width:.3rem;height:22%;margin-left:-.15rem;
  background:repeating-linear-gradient(180deg,#FFC94D 0 .6rem,transparent .6rem 1.2rem);opacity:.7;animation:dash .8s linear infinite}
.p6.dropped .p6-stage::before{display:none}
@keyframes dash{to{background-position:0 1.2rem}}
.compare{position:absolute;left:1.6rem;right:1.6rem;top:calc(var(--top) + 8.4rem);display:flex;align-items:stretch;gap:.6rem;z-index:3;pointer-events:none;perspective:60rem}
.cmp{flex:1;border-radius:1.8rem;padding:1.4rem .8rem;text-align:center;background:#fff;box-shadow:0 .8rem 2rem rgba(19,150,92,.14);
  opacity:0;backface-visibility:hidden}
.cmp-l{transform:rotateY(-90deg);transform-origin:right center;background:#F4F6F7}
.cmp-r{transform:rotateY(90deg);transform-origin:left center;box-shadow:0 .8rem 2rem rgba(19,150,92,.2),inset 0 0 0 .3rem var(--green-l)}
.cmp svg{width:5rem;height:5rem;display:block;margin:0 auto .4rem}
.cmp b{display:block;font-family:var(--display);font-weight:700;font-size:1.9rem}
.cmp-l b{color:#66737A}.cmp-r b{color:var(--green-d)}
.cmp span{display:block;margin-top:.5rem;font-size:1.2rem;line-height:1.6;color:var(--ink-2)}
.cmp-l span{color:#5E6B71}
.zero{display:block;font-style:normal;font-family:var(--display);font-weight:700;font-size:2.6rem;color:var(--pink-t);line-height:1.2;transform:scale(.4)}
.vs{align-self:center;font-family:var(--display);font-weight:700;font-size:2rem;color:var(--blue-d);opacity:0}
.p6.revealed .cmp{opacity:1;transform:none;transition:transform .6s var(--pop),opacity .2s}
.p6.revealed .vs{opacity:1;transition:opacity .3s .3s}
.p6.revealed .zero{transform:scale(1);transition:transform .5s var(--pop) .5s}

/* ---------- P7 气泡调节 ---------- */
.p7-stage{position:relative;flex:1;width:100%;min-height:0;display:flex;align-items:center;justify-content:center;gap:3rem}
.bottle-wrap{position:relative;width:10rem;perspective:60rem}
.bottle-wrap .bottle-slot{width:100%}
.bottle-wrap.spin .bottle-slot{animation:spinY 1s var(--ease)}
@keyframes spinY{0%{transform:rotateY(0) scale(1)}50%{transform:rotateY(180deg) scale(1.08)}100%{transform:rotateY(360deg) scale(1)}}
.ring{position:absolute;left:50%;top:50%;width:30rem;height:30rem;margin:-15rem 0 0 -15rem;border-radius:50%;
  border:.6rem solid rgba(79,195,247,.0);opacity:0;pointer-events:none}
.bottle-wrap.spin .ring{animation:ring 1s var(--ease)}
@keyframes ring{0%{transform:scale(1.3);opacity:0;border-color:rgba(79,195,247,.7);box-shadow:0 0 4rem rgba(79,195,247,.6)}40%{opacity:1}100%{transform:scale(.35);opacity:0;border-color:rgba(255,255,255,1);box-shadow:0 0 6rem #fff}}
.slider{position:relative;display:flex;align-items:stretch;gap:2rem;height:26rem;touch-action:none;cursor:pointer;padding:0 .6rem}
.marks{display:flex;flex-direction:column;justify-content:space-between;padding:.4rem 0}
.marks li{font-size:1.3rem;font-weight:700;color:var(--ink-3);text-align:right;transition:color .2s,transform .2s;transform-origin:right center}
.marks li.on{color:var(--green-d);transform:scale(1.15)}
.track{position:relative;width:1.6rem;border-radius:1rem;background:var(--blue-l);box-shadow:inset 0 .2rem .4rem rgba(0,0,0,.06)}
.track .fill{position:absolute;left:0;right:0;bottom:0;top:0;transform-origin:50% 100%;transform:scaleY(.5);will-change:transform;border-radius:1rem;background:linear-gradient(0deg,#9BE8C0,#4FC3F7 60%,#1E9FD8)}
.thumb{position:absolute;left:50%;top:0;will-change:transform;width:4rem;height:4rem;margin:-2rem 0 0 -2rem;border-radius:50%;background:#fff;
  box-shadow:0 .4rem 1rem rgba(19,150,92,.3),inset 0 0 0 .4rem var(--green);display:flex;align-items:center;justify-content:center}
.thumb::after{content:"";width:1.2rem;height:1.2rem;border-radius:50%;background:var(--blue)}
.taste{flex:none;display:flex;align-items:center;gap:1rem;padding:1rem 1.8rem;border-radius:1.6rem;background:#fff;box-shadow:0 .5rem 1.4rem rgba(19,150,92,.1);margin-top:1rem}
.taste b{font-family:var(--display);font-weight:700;font-size:2rem;color:var(--blue-d)}
.taste span{font-size:1.4rem;color:var(--ink-2)}

/* ---------- P8 配方卡 ---------- */
.p8{justify-content:flex-start;gap:1.6rem}
.p8 .recipe{margin-top:auto}
.p8-foot{margin-top:auto}
.recipe{position:relative;width:100%;max-width:32rem;border-radius:2.4rem;background:#fff;padding:1.6rem 1.8rem 1.8rem;
  box-shadow:0 1.2rem 3rem rgba(19,150,92,.18),inset 0 0 0 .3rem var(--mint);transform:scale(.7);opacity:0}
.recipe::before{content:"";position:absolute;inset:.8rem;border:.15rem dashed #CDEEDD;border-radius:1.8rem;pointer-events:none}
.p8.in .recipe{transform:none;opacity:1;transition:transform .6s var(--pop),opacity .3s}
.rc-head{display:flex;justify-content:space-between;align-items:center}
.rc-tag{font-family:var(--display);font-weight:700;font-size:1.6rem;color:#fff;background:var(--green-d);padding:.24rem 1.2rem .36rem;border-radius:99rem}
.rc-no{font-size:1.2rem;color:var(--ink-3);letter-spacing:.1rem}
.rc-body{display:flex;align-items:center;gap:1.6rem;margin-top:1.2rem}
.rc-body .bottle-slot{width:5.4rem;margin:0 1.2rem}
.rc-body dl{flex:1;display:grid;grid-template-columns:auto 1fr;gap:.9rem 1rem;align-items:center}
.rc-body dt{font-size:1.2rem;color:var(--ink-3)}
.rc-body dd{font-family:var(--display);font-weight:700;font-size:1.9rem;color:var(--ink)}
.rc-dots{display:inline-flex;gap:.3rem;margin-left:.6rem;vertical-align:.2rem}
.rc-dots i{width:.9rem;height:.9rem;border-radius:50%;border:.15rem solid var(--blue);background:transparent}
.rc-dots i.on{background:var(--blue)}
.rc-title{margin-top:1.4rem;text-align:center;padding:1rem;border-radius:1.4rem;background:linear-gradient(90deg,var(--mint),#E9F7FF)}
.rc-title small{display:block;font-size:1.1rem;color:var(--ink-3);letter-spacing:.2rem}
.rc-title strong{display:block;margin-top:.3rem;font-family:var(--display);font-weight:700;font-size:2.4rem;color:var(--fc,var(--green-d))}
.rc-info{margin-top:1rem;text-align:center;font-size:1.3rem;line-height:1.6;color:var(--ink-2)}
.rc-info b{color:var(--fc,var(--green-d))}
.rc-sum{margin-top:.6rem;text-align:center;font-size:1.4rem;font-weight:700;color:var(--green-d)}
.p8-foot{display:flex;flex-direction:column;align-items:center;gap:1.2rem;opacity:0;transform:translateY(1rem)}
.p8.in .p8-foot{opacity:1;transform:none;transition:all .4s var(--ease) .5s}
.cta-line{font-family:var(--display);font-weight:700;font-size:1.8rem;color:var(--pink-t)}
.row3{display:flex;gap:.8rem;justify-content:center;margin-top:.4rem}

/* ---------- P9 卖点 ---------- */
.carousel{position:relative;flex:1;width:calc(100% + 4rem);margin:1.4rem -2rem 0;overflow:hidden;min-height:0;touch-action:pan-y}
.car-track{display:flex;height:100%;transition:transform .4s var(--ease)}
.sp{flex:0 0 100%;position:relative;isolation:isolate;padding:2rem 4rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.sp::before{content:"";position:absolute;inset:1rem 2.4rem;z-index:-1;border-radius:2.6rem;background:rgba(255,255,255,.72);box-shadow:0 1rem 2.6rem rgba(19,150,92,.12),inset 0 0 0 .2rem rgba(255,255,255,.9)}
.sp-no{display:inline-block;padding:.24rem 1.2rem .36rem;border-radius:99rem;background:var(--blue-l);color:var(--blue-t);font-size:1.2rem;font-weight:700}
.sp h3{margin-top:1rem;font-family:var(--display);font-weight:700;font-size:2.6rem;color:var(--green-d)}
.sp p{margin-top:1.4rem;font-size:1.45rem;line-height:1.7;color:var(--ink-2);max-width:26rem}
.sp small{margin-top:.8rem;font-size:1.05rem;color:var(--ink-3)}
.nutri{margin-top:1.4rem;width:24rem;border-collapse:collapse;background:#fff;border-radius:1.4rem;overflow:hidden;box-shadow:0 .6rem 1.6rem rgba(19,150,92,.12)}
.nutri th{background:var(--green-d);color:#fff;font-size:1.3rem;padding:.8rem;font-weight:700}
.nutri td{padding:.9rem 1.4rem;font-size:1.5rem;border-top:.1rem solid #E3F3EA;text-align:left}
.nutri td:last-child{text-align:right;color:var(--ink-2)}
.nutri b{font-family:var(--display);font-weight:700;font-size:2.4rem;color:var(--pink-t);display:inline-block;min-width:3.6rem;text-align:right}
.sp-ico{width:12rem;height:12rem;margin-top:1rem;filter:drop-shadow(0 .6rem 1.2rem rgba(255,180,40,.4));animation:float 2.4s ease-in-out infinite}
.sp-bubbles{position:relative;width:14rem;height:12rem;margin-top:1rem}
.sp-bubbles i{position:absolute;bottom:0;border-radius:50%;border:.25rem solid var(--blue);background:radial-gradient(circle at 32% 30%,#fff 0 18%,rgba(216,243,255,.6) 40%,rgba(79,195,247,.15));animation:spb 2.2s ease-in infinite}
.sp-bubbles i:nth-child(1){left:10%;width:3rem;height:3rem}
.sp-bubbles i:nth-child(2){left:36%;width:4.6rem;height:4.6rem;animation-delay:.4s}
.sp-bubbles i:nth-child(3){left:66%;width:2.6rem;height:2.6rem;animation-delay:.8s}
.sp-bubbles i:nth-child(4){left:20%;width:2rem;height:2rem;animation-delay:1.2s}
.sp-bubbles i:nth-child(5){left:55%;width:3.4rem;height:3.4rem;animation-delay:1.5s}
.sp-bubbles i:nth-child(6){left:80%;width:1.8rem;height:1.8rem;animation-delay:.2s}
.sp-bubbles i:nth-child(7){left:44%;width:1.6rem;height:1.6rem;animation-delay:1.8s}
@keyframes spb{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-9rem) scale(1);opacity:0}}
.sp-bottles{display:flex;gap:.4rem;justify-content:center;margin-top:1.2rem}
.sp-bottles figure{width:6rem;text-align:center}
.sp-bottles img{display:block;height:15rem;width:auto;max-width:100%;margin:0 auto;object-fit:contain;filter:drop-shadow(0 .6rem .8rem rgba(29,58,49,.15))}
.sp-bottles figcaption{margin-top:.5rem;font-size:1.15rem;font-weight:700;color:var(--ink-2);white-space:nowrap}
.car-btn{position:absolute;top:50%;width:3.6rem;height:3.6rem;margin-top:-1.8rem;border-radius:50%;color:var(--green-d);font-size:2.4rem;line-height:1;
  background:rgba(255,255,255,.9);box-shadow:0 .4rem 1.2rem rgba(15,60,40,.1),inset 0 0 0 .1rem rgba(255,255,255,.7);transition:transform .15s}
.car-btn.prev{left:.6rem}.car-btn.next{right:.6rem}
.car-btn[disabled]{opacity:.25}
.car-dots{display:flex;gap:.8rem;justify-content:center;margin:1.2rem 0 .4rem}
.claim{flex:none;text-align:center;margin-top:.6rem}
.claim b{display:block;font-family:var(--display);font-weight:700;font-size:1.7rem;color:var(--green-d)}
.claim span{display:block;margin-top:.3rem;font-size:1.3rem;font-weight:700;color:var(--pink-t)}
.car-dots i{width:.9rem;height:.9rem;border-radius:1rem;background:#BFE8D3;transition:all .3s}
.car-dots i.on{width:2.6rem;background:var(--green)}

/* ---------- P10 拧开瓶盖领券 ---------- */
.p10-stage{position:relative;flex:1;width:100%;display:flex;align-items:flex-start;justify-content:center;min-height:0;padding-top:12rem}
.p10-bottle{--bw:17rem;position:relative;width:var(--bw);flex:none}
.p10-crop{height:30rem;overflow:hidden;-webkit-mask:linear-gradient(#000 72%,transparent);mask:linear-gradient(#000 72%,transparent)}
.p10-crop .bottle-slot{width:100%}
.p10-crop .bottle-slot::after{display:none}
.p10-crop .bottle img{clip-path:inset(8.6% 0 0 0)}          /* 照片上的瓶盖换成可以拧的瓶盖 */
.neck,.cap{position:absolute;left:calc(var(--bw) * .31);width:calc(var(--bw) * .385);top:calc(var(--bw) * -.006);height:calc(var(--bw) * .264)}
.neck{display:block}
.cap{z-index:3;cursor:grab;touch-action:none;transform-origin:50% 100%}
.cap::before{content:"";position:absolute;inset:-2.4rem -4rem -1.6rem}       /* 放大可拧区域，防止手指点不准 */
.cap svg{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(0 .3rem .4rem rgba(0,0,0,.25))}
.cap.off{animation:capOff .6s cubic-bezier(.3,.6,.4,1) forwards;pointer-events:none}
.cap.gone{opacity:0;pointer-events:none}
@keyframes capOff{0%{transform:none}30%{transform:translateY(-1.4rem) rotate(-6deg)}100%{transform:translate(-6rem,-15rem) rotate(-40deg);opacity:0}}
.twist-hint{position:absolute;left:calc(var(--bw) * .5 - 3.6rem);top:calc(var(--bw) * .3);width:7.2rem;height:2.2rem;color:var(--green-d);z-index:4;pointer-events:none;animation:twist 1.2s ease-in-out infinite}
.twist-hint svg{width:100%;height:100%;display:block}
.p10.opened .twist-hint{display:none}
@keyframes twist{0%,100%{transform:translateX(-.8rem)}50%{transform:translateX(.8rem)}}
.coupon-pop{position:absolute;left:50%;bottom:calc(100% + 1rem);width:26rem;margin-left:-13rem;z-index:3;perspective:60rem;pointer-events:none}
.mini-coupon{display:flex;height:9rem;border-radius:1.4rem;background:#fff;box-shadow:0 1rem 2.4rem rgba(232,104,127,.28);overflow:hidden;
  opacity:0;transform:translateY(7.6rem) scale(.15) rotateY(180deg)}
.coupon-pop.on .mini-coupon{opacity:1;transform:none;transition:transform 1s var(--pop),opacity .2s}
.mc-l{width:7.4rem;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#D9506E,#B52F4B);color:#fff;
  font-family:var(--display);font-weight:700;font-size:2rem;writing-mode:vertical-rl;letter-spacing:.3rem;position:relative}
.mc-l::after{content:"";position:absolute;right:-.8rem;top:0;bottom:0;width:1.6rem;background:radial-gradient(circle at 50% .8rem,transparent .6rem,#fff .65rem) 0 0/1.6rem 1.8rem repeat-y}
.mc-r{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 1.6rem}
.mc-r b{font-family:var(--display);font-weight:700;font-size:2.1rem;color:var(--pink-t)}
.mc-r small{margin-top:.4rem;font-size:1.15rem;color:var(--ink-2)}

/* ---------- P11 券核销 ---------- */
.p11{justify-content:center;gap:1.4rem}
.wallet-row{position:relative;display:flex;flex-direction:column;align-items:center}
.wallet{width:8rem;height:6.4rem}
.wallet.bump{animation:bump .3s var(--pop)}
@keyframes bump{50%{transform:scale(1.15)}}
.wallet-txt{margin-top:.4rem;font-size:1.3rem;font-weight:700;color:var(--green-d)}
.fly-coupon{position:absolute;top:-5rem;left:50%;width:5.6rem;height:3.4rem;margin-left:-2.8rem;border-radius:.6rem;overflow:hidden;background:#fff;display:flex;opacity:0;z-index:2;
  box-shadow:0 .4rem 1rem rgba(232,104,127,.3)}
.fly-coupon .mc-l{width:100%;writing-mode:horizontal-tb;font-size:1.4rem}
.fly-coupon .mc-l::after{display:none}
.fly-coupon.on{animation:fly .4s ease-in forwards}
@keyframes fly{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(6.6rem) scale(.5)}}
.coupon{position:relative;width:100%;max-width:32rem;border-radius:2rem;background:#fff;overflow:hidden;box-shadow:0 1rem 2.6rem rgba(232,104,127,.2)}
.cp-top{background:linear-gradient(135deg,#D9506E,#B52F4B);color:#fff;padding:1.6rem 2rem 2.2rem;position:relative}
.cp-top::after{content:"";position:absolute;left:0;right:0;bottom:-.8rem;height:1.6rem;background:radial-gradient(circle at .8rem 50%,#fff .6rem,transparent .65rem) 0 0/1.6rem 1.6rem repeat-x}
.cp-top b{display:block;font-family:var(--display);font-weight:700;font-size:2.4rem}
.cp-top>span{display:block;margin-top:.3rem;font-size:1.25rem;opacity:.95}
.cp-tag{display:inline-block;vertical-align:.35rem;margin-left:.6rem;padding:.1rem .8rem;border-radius:.6rem;background:#fff;color:var(--pink-t);font-style:normal;font-family:var(--sans);font-size:1.2rem;font-weight:700}
.cp-mid{display:flex;align-items:center;gap:1.6rem;padding:2rem 2rem 1rem}
.qr{width:9.6rem;height:9.6rem;flex:none;border-radius:1rem;padding:.6rem;background:#fff;box-shadow:inset 0 0 0 .15rem #F3D4DB}
.qr svg{width:100%;height:100%;display:block}
.cp-code small{display:block;font-size:1.1rem;color:var(--ink-3)}
.cp-code b{display:block;margin:.4rem 0 .6rem;font-size:2rem;font-weight:800;letter-spacing:.15rem;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.cp-info{padding:0 2rem 1rem}
.cp-info li{display:flex;gap:1rem;padding:.7rem 0;border-top:.1rem dashed #F3D4DB;font-size:1.25rem;line-height:1.5}
.cp-info em{font-style:normal;color:var(--ink-3);flex:none;width:5.6rem}
.cp-demo{text-align:center;font-size:1.15rem;color:var(--ink-3);padding-bottom:1.2rem}
.stamp{position:absolute;right:1.4rem;top:.8rem;width:7.6rem;height:7.6rem;border-radius:50%;border:.35rem solid rgba(255,255,255,.95);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:1.5rem;white-space:nowrap;transform:rotate(-18deg) scale(2.4);opacity:0;pointer-events:none}
.stamp::before{content:"";position:absolute;inset:.5rem;border-radius:50%;border:.15rem solid rgba(255,255,255,.8)}
.stamp.on{opacity:1;transform:rotate(-18deg) scale(1);transition:transform .2s cubic-bezier(.6,0,.9,.4),opacity .1s}
.row2{display:flex;gap:1rem;justify-content:center;width:100%}
.row2 .btn{min-width:0;flex:1;max-width:16rem;font-size:1.7rem;padding:0 1.4rem .12em}

/* ---------- P12 海报 ---------- */
.p12{justify-content:center;gap:1.2rem}
.poster-wrap{position:relative;height:calc(var(--h,100vh) - var(--top) - 17rem);aspect-ratio:750/1250;max-width:100%;border-radius:1.8rem;overflow:hidden;
  box-shadow:0 1.2rem 3rem rgba(19,150,92,.22)}
.poster-wrap canvas,.poster-wrap img{position:absolute;inset:0;width:100%;height:100%;display:block}
.poster-wrap canvas{filter:blur(12px);transition:filter 1s var(--ease);will-change:filter}
.poster-wrap.clear canvas{filter:none}
.poster-wrap img{opacity:0;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto;pointer-events:none}
.poster-wrap.done img{opacity:1;pointer-events:auto}
.save-hint{font-size:1.4rem;font-weight:700;color:var(--green-d);animation:blink 1.4s ease-in-out infinite}
.save-hint::before{content:"👆 "}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- 小贴士 / 提示 / 弹窗 ---------- */
.tip{position:absolute;left:2rem;right:2rem;bottom:calc(var(--bottom) + 7.6rem);z-index:70;padding:1.4rem 1.6rem 1.5rem 7rem;border-radius:2rem;background:#fff;
  box-shadow:0 1rem 2.6rem rgba(19,150,92,.25),inset 0 0 0 .3rem var(--green-l);transform:translateY(3rem) scale(.9);opacity:0;pointer-events:none}
.tip.on{opacity:1;transform:none;transition:transform .4s var(--pop),opacity .2s}
.tip.off{opacity:0;transform:scale(.6);transition:all .3s var(--ease)}
.tip-ip{position:absolute;left:1.4rem;top:50%;width:4.6rem;height:4.3rem;margin-top:-2.15rem}
.tip-badge{display:inline-block;padding:.24rem 1.1rem .36rem;border-radius:99rem;background:var(--green-d);color:#fff;font-family:var(--display);font-weight:700;font-size:1.4rem}
.tip-txt{margin-top:.8rem;font-size:1.6rem;font-weight:700;line-height:1.6;color:var(--ink)}
.tip-txt p+p{margin-top:.2rem}
.toast{position:absolute;left:50%;top:42%;z-index:90;transform:translate(-50%,-50%) scale(.8);padding:1.2rem 2.2rem;border-radius:1.4rem;background:rgba(29,58,49,.88);
  color:#fff;font-size:1.5rem;font-weight:600;opacity:0;pointer-events:none;white-space:nowrap;transition:all .25s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.modal{position:absolute;inset:0;z-index:95;background:rgba(18,45,36,.5);display:flex;align-items:center;justify-content:center;padding:2.4rem;opacity:0;visibility:hidden;transition:opacity .25s}
.modal.on{opacity:1;visibility:visible}
.modal-card{width:100%;max-width:32rem;border-radius:2.4rem;background:#fff;padding:2.6rem 2.2rem 2.2rem;transform:scale(.9);transition:transform .3s var(--pop);
  box-shadow:0 2rem 5rem rgba(10,40,28,.28)}
.modal.on .modal-card{transform:none}
.modal-card h3{font-family:var(--display);font-weight:700;font-size:2.1rem;color:var(--green-d);text-align:center}
.modal-body{margin-top:1.4rem;font-size:1.45rem;line-height:1.75;color:var(--ink-2);text-align:left;max-height:calc(var(--h,100vh) * .5);overflow:auto;touch-action:pan-y}
.modal-body p+p{margin-top:.8rem}
.modal-body ol{list-style:decimal;padding-left:1.8rem}
.modal-body li+li{margin-top:.6rem}
.modal-body .note{margin-top:1.2rem;padding:1rem 1.2rem;border-radius:1.2rem;background:#F1F8F4;font-size:1.25rem;line-height:1.65;color:var(--ink-3)}
.modal-btns{margin-top:2rem;display:flex;gap:1rem}
.modal-btns .btn{flex:1;min-width:0;min-height:4.8rem;padding:0 1.2rem .12em;font-size:1.7rem;white-space:nowrap}
.share-guide{position:absolute;inset:0;z-index:96;background:rgba(18,45,36,.82);color:#fff;text-align:center;padding:calc(var(--safe-t) + 15rem) 3rem 0;opacity:0;visibility:hidden;transition:opacity .25s}
.share-guide.on{opacity:1;visibility:visible}
.sg-arrow{position:absolute;right:2rem;top:calc(var(--safe-t) + 1rem);width:11rem;height:11rem}
.share-guide p{font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1.6}
.share-guide .sg-sub{margin-top:1rem;font-family:var(--sans);font-size:1.4rem;opacity:.8}
.share-guide .btn-s{margin-top:2.4rem}
.confetti{position:absolute;inset:0;width:100%;height:100%;z-index:80;pointer-events:none}

/* ---------- 页面转场：气泡上升遮罩擦除 ---------- */
.wipe{position:absolute;inset:0;z-index:100;pointer-events:none;overflow:hidden;visibility:hidden}
.wipe.on{visibility:visible;pointer-events:auto}
.wipe-body{position:absolute;left:-10%;width:120%;top:100%;height:150%;will-change:transform;background:linear-gradient(180deg,#B9EED3,#9BE2F7)}
.wipe-body::before,.wipe-body::after{content:"";position:absolute;left:0;right:0;height:4rem;background-size:6rem 4rem;background-repeat:repeat-x}
.wipe-body::before{top:-3.9rem;background-image:radial-gradient(circle at 50% 100%,#B9EED3 2.8rem,transparent 2.85rem)}
.wipe-body::after{bottom:-3.9rem;background-image:radial-gradient(circle at 50% 0,#9BE2F7 2.8rem,transparent 2.85rem);background-position:3rem 0}
.wipe.on .wipe-body{animation:wipe .4s cubic-bezier(.45,0,.55,1) forwards}
@keyframes wipe{from{transform:translateY(0)}to{transform:translateY(calc(-166.7% - 8rem))}}

@media (prefers-reduced-motion:reduce){
  .bg-bubbles i,.breath,.shine,.shine::before,.mascot-slot.mini,.molecule,.sp-ico{animation:none!important}
}