.app{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:48px clamp(40px,6vw,96px)}.app__head{margin-bottom:0}.feats{margin-top:var(--shead);border-top:1px solid var(--line)}.feats>div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}.feats dd{font-size:var(--t-body)}.stores{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:28px}.store{display:inline-grid;align-content:center;gap:4px;min-width:150px;min-height:54px;padding:0 20px;border-radius:var(--radius);background:var(--paper-ink);color:var(--paper-3);font:700 var(--t-body)/1 var(--font);transition:box-shadow var(--tr),translate var(--tr)}.store small{color:#C9C4B8;font:400 var(--t-label)/1 var(--font)}.store:hover{box-shadow:0 14px 30px -16px rgb(20 20 20 / .8);translate:0 -1px}.app__visual{margin:0;display:grid;justify-items:center}.app__stage{position:relative;padding-left:116px}.phone{display:block;width:270px;padding:6px;border-radius:36px;background:#0A0B0A;box-shadow:0 0 0 1px rgb(20 20 20 / .55),0 50px 70px -36px rgb(20 20 20 / .55)}.phone img{width:100%;border-radius:30px}.app__cap{max-width:26rem;margin-top:44px;color:var(--text-2);text-align:center}.lcard{position:absolute;left:0;bottom:64px;width:290px;margin:0}.lcard__in{width:100%;padding:16px 16px 14px;border:1px solid #2B3A24;border-radius:16px;background:radial-gradient(120% 100% at 0% 0%,#1D2C15,#111A0C 62%);color:#F0F3E9;box-shadow:0 30px 60px -28px rgb(20 20 20 / .75),0 0 0 1px rgb(0 0 0 / .2)}.lcard__top{display:flex;align-items:center;justify-content:space-between}.lcard__k{color:#A9C76E;line-height:1}.lcard__msg{position:relative;height:1.4em;margin:10px 0 12px;font-size:var(--t-ui);font-weight:700;letter-spacing:-.01em}.lcard__msg span{position:absolute;inset:0;white-space:nowrap}.lcard__msg-a{opacity:0}.cups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.cups__i{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:50%}.cups__i::before{content:"";position:absolute;inset:0;border:1.5px dashed #3A4634;border-radius:50%}.cups__i::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8BD35B,#3F9A2C 72%)}.cups__gift .ico{position:relative;z-index:1;width:48%;height:48%;color:#0B1108;stroke-width:2.2}.cup{position:relative;z-index:1;width:38%;height:30%;margin:8% 10% 0 0;border:2px solid #0B1108;border-top:0;border-radius:0 0 45% 45% / 0 0 75% 75%}.cup::before{content:"";position:absolute;left:-16%;right:-16%;top:0;height:2px;border-radius:2px;background:#0B1108}.cup::after{content:"";position:absolute;left:100%;top:14%;width:34%;height:46%;border:2px solid #0B1108;border-left:0;border-radius:0 60% 60% 0}.cups__gift::after{background:radial-gradient(circle at 35% 30%,#F5B35A,#E07B18 72%)}.cups__glow{position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 22px 6px rgb(245 170 80 / .55);opacity:.8}.lcard__bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:14px}.lcard__track{position:relative;height:5px;overflow:hidden;border-radius:3px;background:#2B3A24}.lcard__fill{position:absolute;inset:0;border-radius:3px;background:#E9932A;transform-origin:left;transform:scaleX(.9)}.lcard__n{min-width:3.2em;color:#F0C27A;font:700 var(--t-small)/1 var(--font);font-variant-numeric:tabular-nums;text-align:right;counter-reset:n var(--n,9)}.lcard__n::after{content:counter(n) "/10"}.lcard__replay{position:absolute;top:2px;right:2px;display:none;place-items:center;width:var(--tap);height:var(--tap);border-radius:12px;color:#A9C76E;--focus:var(--lime)}.lcard__replay:hover{color:#F0F3E9}.lcard__replay .ico{width:16px;height:16px}.mo .lcard__replay{display:grid}@media (max-width:1023px){.app{grid-template-columns:minmax(0,1fr)}.app__visual{justify-self:center}}@media (max-width:760px){.feats{margin-top:30px}.feats>div{grid-template-columns:minmax(0,1fr);gap:4px}.store{flex:1 1 140px}.app__stage{padding-left:64px}.phone{width:min(210px,56vw);border-radius:30px}.phone img{border-radius:26px}.lcard{width:min(250px,66vw);bottom:40px}}@media (max-width:379px){.stores{column-gap:12px}}@property --n{syntax:"<integer>";inherits:false;initial-value:9}.mo .lcard:not(.is-play) .cups__i::after{opacity:0;transform:scale(.55)}.mo .lcard:not(.is-play) .cups__i>:is(.cup,.ico){opacity:0}.mo .lcard:not(.is-play) .cups__glow{opacity:0}.mo .lcard:not(.is-play) .lcard__fill{transform:scaleX(0)}.mo .lcard:not(.is-play) .lcard__n{--n:0}.mo .lcard:not(.is-play) .lcard__msg-a{opacity:1}.mo .lcard:not(.is-play) .lcard__msg-b{opacity:0}.mo .lcard.is-play .cups__i::after{animation:cup-fill 340ms var(--ease-out) calc(220ms + var(--i) * 110ms) backwards}.mo .lcard.is-play .cups__i>.cup{animation:cup-ico 340ms var(--ease-out) calc(220ms + var(--i) * 110ms) backwards}.mo .lcard.is-play .cups__gift::after{animation:cup-fill 460ms var(--ease-emph) 1340ms backwards}.mo .lcard.is-play .cups__gift .ico{animation:cup-ico 460ms var(--ease-out) 1340ms backwards}.mo .lcard.is-play .cups__glow{animation:gift-glow 1500ms var(--ease-io) 1400ms both}.mo .lcard.is-play .lcard__fill{animation:bar-fill 990ms linear 220ms both}.mo .lcard.is-play .lcard__n{animation:n9 990ms linear 220ms both}.mo .lcard.is-play .lcard__msg-a{animation:msg-out 300ms var(--ease-out) 1300ms both}.mo .lcard.is-play .lcard__msg-b{animation:msg-in 420ms var(--ease-out) 1420ms both}.cups__i--0{--i:0}.cups__i--1{--i:1}.cups__i--2{--i:2}.cups__i--3{--i:3}.cups__i--4{--i:4}.cups__i--5{--i:5}.cups__i--6{--i:6}.cups__i--7{--i:7}.cups__i--8{--i:8}.cups__i--9{--i:9}@keyframes cup-fill{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}@keyframes cup-ico{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes gift-glow{0%{opacity:0}22%{opacity:1}48%{opacity:.35}74%{opacity:1}100%{opacity:.8}}@keyframes bar-fill{from{transform:scaleX(0)}to{transform:scaleX(.9)}}@keyframes n9{from{--n:0}to{--n:9}}@keyframes msg-out{from{opacity:1}to{opacity:0;translate:0 -6px}}@keyframes msg-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:none}}
