/* Native onboarding choreography, sized for the web funnel. */
.screen.demo{padding-top:24px;animation:none}
.demo h1{max-width:330px;margin:0 auto 9px;font-size:34px;letter-spacing:-1.15px}
.demo>.sub{font-size:14px;margin-bottom:2px}
.demo .bottom{padding-top:24px}
.earn-demo{--reward:#50d3ab;--reaction:80,211,171}
.earn-stage{height:390px;position:relative;isolation:isolate;overflow:hidden;margin:0 -10px}
.earn-dots{position:absolute;inset:0;background-image:radial-gradient(circle,#ffffff2b .75px,transparent 1px);background-size:15px 15px;mask-image:radial-gradient(ellipse at 50% 60%,#0002 16%,#000 50%,transparent 75%);opacity:.55}
.earn-ripple{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.earn-ripple i{position:absolute;width:150px;height:150px;left:calc(50% - 75px);top:213px;border:1px solid rgba(var(--reaction),.28);border-radius:50%;box-shadow:0 0 24px rgba(var(--reaction),.06);opacity:0}
.earn-gaining .earn-ripple i,.earn-draining .earn-ripple i{animation:earn-wave 2.7s cubic-bezier(.18,.6,.25,1) infinite}
.earn-ripple i:nth-child(2){animation-delay:.48s}.earn-ripple i:nth-child(3){animation-delay:.96s}
.earn-cluster{position:absolute;inset:0}
.earn-apps{display:flex;align-items:center;justify-content:center;gap:10px;position:absolute;left:0;right:0}
.earn-app{position:relative;flex-shrink:0;width:67px;height:67px;opacity:0;transform:translateY(15px) scale(.8);transition:opacity .42s,transform .5s cubic-bezier(.16,1.25,.35,1)}
.earn-app.is-visible{opacity:1;transform:translateY(0) scale(1)}
.earn-app img{display:block;width:100%;height:100%;object-fit:contain;transition:filter .45s,opacity .45s;filter:drop-shadow(0 5px 7px #0007)}
.earn-app.is-locked img{filter:grayscale(1) brightness(.5);opacity:.75}
.earn-app-lock{position:absolute;inset:23%;display:grid;place-items:center;color:white;opacity:0;transform:scale(.65);transition:opacity .3s,transform .42s cubic-bezier(.2,1.5,.3,1)}
.earn-app-lock svg{width:28px;height:28px;filter:drop-shadow(0 2px 4px #0009)}
.earn-app.is-locked .earn-app-lock{opacity:1;transform:scale(1)}
.earn-apps-mini{top:338px;gap:9px}
.earn-apps-mini .earn-app{width:40px;height:40px}
.earn-apps-mini .earn-app-lock svg{width:17px;height:17px}
.earn-chips{position:absolute;top:12px;left:0;right:0;height:99px;display:flex;align-items:center;flex-direction:column;pointer-events:none}
.earn-chip{position:absolute;bottom:0;width:245px;max-width:90%;height:46px;display:flex;align-items:center;gap:10px;padding:8px 13px;border:1px solid #ffffff20;border-radius:30px;background:linear-gradient(120deg,#232327,#17171a);box-shadow:0 6px 20px #0006;text-align:left;opacity:0;transform:translateY(22px) scale(.91);transition:opacity .45s,transform .7s cubic-bezier(.16,1.25,.32,1)}
.earn-chip-icon{font-size:23px;line-height:1;width:29px;text-align:center}
.earn-chip b{display:block;font-size:13px;font-weight:650;line-height:1.2}
.earn-chip small{display:block;font-size:11px;color:var(--reward);line-height:1.4;white-space:nowrap}
.earn-check{margin-left:auto;background:#50d3ab15;color:var(--reward);border:1px solid #50d3ab35;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px}
.earn-has-gym .earn-chip-gym{opacity:1;transform:translateY(0) scale(1)}
.earn-has-read .earn-chip-gym{transform:translateY(-54px) scale(.97)}
.earn-has-read .earn-chip-read{opacity:1;transform:translateY(0) scale(1)}
.earn-demo[data-beat="3"] .earn-chip,.earn-demo[data-beat="4"] .earn-chip{transform:translateY(-28px) scale(.97)}
.earn-ghosts{position:absolute;top:115px;left:calc(50% - 78px);width:156px;height:156px}
.earn-ghost{position:absolute;inset:0;opacity:0;transition:opacity .55s}
.earn-ghost.is-active{opacity:1}
.earn-ghost>img,.earn-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.earn-ghost.is-loaded>img{visibility:hidden}
.earn-motion svg{display:block;width:100%;height:100%}
.earn-balance{position:absolute;top:267px;left:0;right:0;height:68px}
.earn-number{display:flex;align-items:baseline;justify-content:center;font-size:65px;line-height:.95;font-weight:650;letter-spacing:-3px;font-variant-numeric:tabular-nums;transform:scale(1);transition:color .6s,transform .7s cubic-bezier(.16,1.3,.3,1),opacity .4s}
.earn-number [data-balance]{display:inline-block;min-width:.55em}
.earn-unit{font-size:.65em;letter-spacing:-2px;margin-left:2px}
.earn-gaining .earn-number{color:var(--reward);transform:scale(1.09)}
.earn-draining{--reaction:255,104,110}
.earn-draining .earn-number{color:var(--red)}
.earn-delta{position:absolute;top:-17px;left:calc(50% + 49px);font-size:15px;font-weight:650;color:var(--reward);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .9s cubic-bezier(.2,.8,.2,1)}
.earn-gaining .earn-delta,.earn-draining .earn-delta{opacity:1;transform:translateY(-3px)}
.earn-draining .earn-delta{color:var(--red)}
.earn-zero-lock{position:absolute;top:0;left:calc(50% - 25px);width:50px;height:54px;color:var(--red);opacity:0;transform:scale(.7);transition:opacity .4s,transform .6s cubic-bezier(.2,1.3,.3,1)}
.earn-empty .earn-zero-lock{opacity:1;transform:scale(1)}
.earn-empty .earn-number{opacity:0;transform:scale(.85)}
.earn-caption{min-height:48px;margin:1px 0 3px}
.earn-caption-title{font-size:19px;line-height:1.25;font-weight:650;letter-spacing:-.4px;margin-bottom:6px}
.earn-caption-detail{font-size:12px;line-height:1.4;color:var(--muted)}
.earn-track{display:flex;gap:5px;width:135px;margin:0 auto 18px}
.earn-track>span{height:3px;background:#29292f;border-radius:4px;overflow:hidden;flex:1}
.earn-track i{display:block;width:100%;height:100%;background:#c5c5cb;transform:scaleX(0);transform-origin:left}
.earn-paused .earn-ripple i{animation-play-state:paused}
.earn-reduced *{animation:none!important;transition:none!important}
@keyframes earn-wave{0%{opacity:0;transform:scale(.4)}15%{opacity:.8}100%{opacity:0;transform:scale(2.9)}}
@media(max-width:360px){.demo h1{font-size:30px}.earn-stage{height:370px}.earn-cluster{transform:scale(.94);transform-origin:top center}.earn-caption-title{font-size:17px}}
@media(prefers-reduced-motion:reduce){.earn-demo *{animation:none!important;transition:none!important}}