.stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 16px 28px; min-height: calc(100svh - 64px); }
.stage .phone { --pw: max(250px, min(360px, calc(100vw - 64px), calc((100svh - 64px - 110px) * 360 / 740))); }
.aura { position: absolute; z-index: -1; left: 50%; top: 46%; width: min(820px, 150vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(80px); opacity: .45; background: radial-gradient(closest-side, rgba(255,95,162,.26), rgba(124,92,255,.18) 50%, rgba(56,189,248,.1) 70%, transparent); pointer-events: none; }
.subs { min-height: 48px; margin: 16px 0 0; max-width: min(520px, 92vw); text-align: center; font-size: 15px; font-weight: 500; color: var(--g5); }
.subs span { display: inline-block; animation: capIn .4s var(--out) both; }
@keyframes capIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }

.scr { position: absolute; z-index: 50; inset: calc(var(--pw) * .028); border-radius: calc(var(--pw) * .105); overflow: hidden; container-type: inline-size; pointer-events: none; }
.scr > * { pointer-events: auto; }
.over { position: absolute; z-index: 60; inset: 0; pointer-events: none; container-type: inline-size; }
.over > * { pointer-events: auto; }

.start { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6.4cqw; background: #fff; transition: opacity .5s; cursor: pointer; }
.start.gone { opacity: 0; pointer-events: none; }
.start .o { position: relative; display: grid; padding: 1.2cqw; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10cqw -1cqw rgba(124,92,255,.55); transition: transform .3s; }
.start .o::before, .start .o::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(124,92,255,.35) 55%, rgba(255,95,162,.22) 70%, transparent 72%); opacity: 0; animation: ringWave 3.2s cubic-bezier(.2,.6,.3,1) infinite; pointer-events: none; }
.start .o::after { animation-delay: 1.6s; }
.start .o svg { box-sizing: content-box; width: 6.4cqw; height: 6.4cqw; padding: 7.2cqw 8cqw 7.2cqw 7.2cqw; border-radius: 50%; background: var(--ink); color: #fff; }
.start:hover .o { transform: scale(1.05); }
.start .l { padding-left: .24em; font-size: 3.1cqw; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
@keyframes ringWave { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }

.mute { position: absolute; right: -3cqw; top: 26cqw; width: 11cqw; height: 11cqw; border-radius: 99px; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.18), 0 0 0 1px var(--g1); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s var(--spring); }
.mute.on { opacity: 1; transform: none; }
.mute svg { width: 5cqw; height: 5cqw; }

.panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16cqw 8cqw 10cqw; background: #fff; opacity: 0; transition: opacity .5s; font-family: "Outfit", sans-serif; }
.panel.on { opacity: 1; }
.panel.dark { background: #0A0A0A; color: #fff; }
.panel h3 { margin: 0; font-size: 9.6cqw; line-height: 1.02; letter-spacing: -.05em; font-weight: 700; }
.panel p { margin: 3.4cqw 0 0; font-size: 4cqw; line-height: 1.4; color: var(--g5); }
.panel.dark p { color: rgba(255,255,255,.6); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.panel .w { display: inline-block; animation: wordUp .7s var(--out) both; }
@keyframes wordUp { from { opacity: 0; transform: translateY(40%); filter: blur(4px); } }

.cap { position: absolute; z-index: 3; left: 5cqw; right: 5cqw; top: 15cqw; padding: 3.4cqw 4cqw 3.8cqw; border-radius: 5cqw; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 3cqw 8cqw -3cqw rgba(30,20,80,.3), 0 0 0 .25cqw rgba(0,0,0,.04); font-family: "Outfit", sans-serif; transform: translateY(-4cqw); opacity: 0; transition: transform .6s var(--out), opacity .4s; }
.cap.on { transform: none; opacity: 1; }
.cap em { display: block; font-style: normal; font-size: 2.6cqw; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--g4); }
.cap b { display: block; margin-top: .6cqw; font-size: 5.4cqw; line-height: 1.12; letter-spacing: -.03em; font-weight: 700; }

.steppill { position: absolute; z-index: 4; left: 50%; top: -3.6cqw; transform: translate(-50%, 3cqw); display: flex; align-items: center; gap: 1.6cqw; height: 7.6cqw; padding: 0 3cqw .2cqw 1cqw; box-shadow: 0 0 0 .8cqw #fff, 0 3cqw 6cqw -2cqw rgba(0,0,0,.35); border-radius: 99px; background: var(--ink); color: #fff; font: 600 3.2cqw "Outfit", sans-serif; white-space: nowrap; opacity: 0; transition: transform .5s var(--spring), opacity .3s; }
.steppill.on { transform: translate(-50%, 0); opacity: 1; }
.steppill i { width: 5.6cqw; height: 5.6cqw; border-radius: 99px; background: var(--grad); display: grid; place-items: center; font-style: normal; font-size: 2.8cqw; }

.dmbar { position: absolute; z-index: 2; left: 3.4cqw; right: 3.4cqw; display: flex; align-items: center; gap: 2.6cqw; padding: 2.6cqw 3cqw; border-radius: 5cqw; background: rgba(245,245,247,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 2cqw 6cqw rgba(0,0,0,.14); font-family: var(--sys); transform: translateY(-30cqw); transition: transform .55s var(--out), top .55s var(--out), opacity .4s; }
.dmbar img { width: 9cqw; height: 9cqw; border-radius: 99px; object-fit: cover; flex: none; }
.dmbar b { display: block; font-size: 3.3cqw; font-weight: 600; }
.dmbar small { display: block; font-size: 3.3cqw; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmbar .ap { margin-left: auto; align-self: flex-start; font-size: 2.6cqw; color: #8e8e93; }
.dmbar.on { transform: none; }
.dmbar.gone { opacity: 0; transform: translateY(-6cqw) scale(.96); }
.dmpop { position: absolute; display: flex; align-items: flex-end; gap: 1.4cqw; transform: scale(0) rotate(var(--r)); transform-origin: var(--o, 0 100%); animation: dmIn .5s var(--spring) forwards; }
.dmpop img { width: 6.6cqw; height: 6.6cqw; border-radius: 99px; object-fit: cover; box-shadow: 0 0 0 .5cqw #fff; }
.dmpop span { padding: 1.8cqw 3cqw 2.1cqw; border-radius: 4cqw 4cqw 4cqw 1.2cqw; background: #fff; font: 500 3.3cqw var(--sys); white-space: nowrap; box-shadow: 0 2cqw 5cqw -2cqw rgba(0,0,0,.3), 0 0 0 .25cqw rgba(0,0,0,.05); }
.dmpop.gone { animation: dmOut .4s var(--ease) forwards; }
@keyframes dmIn { to { transform: scale(1) rotate(var(--r)); } }
@keyframes dmOut { from { transform: scale(1) rotate(var(--r)); } to { transform: scale(.3) rotate(var(--r)); opacity: 0; } }
.dmcount { position: absolute; z-index: 3; left: 50%; bottom: 10cqw; transform: translate(-50%, 4cqw); display: flex; align-items: center; gap: 2cqw; height: 10cqw; padding: 0 4cqw .3cqw 1.6cqw; border-radius: 99px; background: var(--ink); color: #fff; font: 600 3.6cqw "Outfit", sans-serif; white-space: nowrap; opacity: 0; transition: transform .5s var(--spring), opacity .3s; }
.dmcount.on { transform: translate(-50%, 0); opacity: 1; }
.dmcount i { width: 7cqw; height: 7cqw; border-radius: 99px; background: var(--grad); display: grid; place-items: center; font-style: normal; font-size: 3.2cqw; }
.dmcount b { font-variant-numeric: tabular-nums; }

.big3 { display: grid; gap: 2.6cqw; width: 100%; margin-top: 6cqw; }
.big3 div { display: flex; align-items: center; gap: 3cqw; padding: 3cqw 3.4cqw; border-radius: 4.4cqw; background: #fff; box-shadow: 0 0 0 .25cqw var(--g1), 0 4cqw 8cqw -5cqw rgba(0,0,0,.3); text-align: left; animation: pop .6s var(--spring) both; }
.big3 b { font-size: 7cqw; letter-spacing: -.04em; font-weight: 700; line-height: 1; }
.big3 span { flex: 1; font-size: 3.8cqw; font-weight: 550; }
.big3 em { padding: .6cqw 2.4cqw 1cqw; border-radius: 99px; font-style: normal; font-size: 2.6cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--g05); color: var(--g5); }
.big3 div.us em { background: var(--ink); color: #fff; }
@keyframes pop { from { transform: scale(.6) translateY(4cqw); opacity: 0; } }
.chipline { display: inline-flex; align-items: center; gap: 2cqw; margin-top: 5cqw; height: 9cqw; padding: 0 3.6cqw .3cqw 1.4cqw; border-radius: 99px; background: #fff; box-shadow: 0 0 0 .25cqw var(--g1), 0 3cqw 6cqw -4cqw rgba(0,0,0,.3); font: 600 3.4cqw "Outfit", sans-serif; animation: pop .5s var(--spring) both; }
.chipline i { width: 6.4cqw; height: 6.4cqw; border-radius: 99px; background: #DCFCE7; color: #047857; display: grid; place-items: center; font-style: normal; }
.timerchip { position: absolute; z-index: 3; left: 50%; bottom: 14cqw; transform: translateX(-50%); }

.fly { position: absolute; z-index: 2; left: 0; top: 0; border-radius: 2.6cqw; overflow: hidden; box-shadow: 0 2cqw 5cqw -2cqw rgba(30,20,80,.4); background: #eee; will-change: transform, opacity; }
.fly img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fly.round { border-radius: 99px; }

.num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.num b { display: block; font-size: 30cqw; line-height: .9; letter-spacing: -.06em; font-weight: 700; font-variant-numeric: tabular-nums; animation: numIn .7s var(--out) both; }
.num > span { display: block; margin-top: 2cqw; font-size: 6.4cqw; font-weight: 600; letter-spacing: -.03em; color: rgba(255,255,255,.7); animation: capIn .6s var(--out) .15s both; }
.num .strike { position: relative; display: inline-block; }
.num .strike::after { content: ""; position: absolute; left: -6%; right: -6%; top: 52%; height: .07em; border-radius: 99px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; animation: strike .6s var(--out) .5s forwards; }
.num .pill { display: inline-flex; align-items: center; gap: 2cqw; margin-top: 5cqw; height: 10cqw; padding: 0 4cqw .3cqw 1.4cqw; border-radius: 99px; background: rgba(255,255,255,.1); border: .25cqw solid rgba(255,255,255,.16); font-size: 3.6cqw; font-weight: 600; animation: capIn .6s var(--out) .3s both; }
.num .pill img { width: 7cqw; height: 7cqw; border-radius: 99px; object-fit: cover; }
@keyframes strike { to { transform: scaleX(1); } }
@keyframes numIn { from { opacity: 0; transform: scale(.85); filter: blur(8px); } }
.wall { position: absolute; inset: -30%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2cqw; transform: rotate(-9deg); opacity: .28; animation: wallDrift 24s linear infinite; }
.wall div { aspect-ratio: 9 / 15; border-radius: 2.4cqw; overflow: hidden; background: #222; }
.wall img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall + .shade { position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 50%, rgba(10,10,10,.95), rgba(10,10,10,.5)); }
@keyframes wallDrift { to { transform: rotate(-9deg) translateY(-14%); } }

.earn { position: absolute; z-index: 2; left: -5cqw; right: -5cqw; top: 40%; padding: 4.4cqw 5cqw 4.8cqw; border-radius: 6cqw; background: #fff; box-shadow: 0 8cqw 16cqw -6cqw rgba(30,20,80,.45), 0 0 0 .3cqw rgba(124,92,255,.14); font-family: "Outfit", sans-serif; transform: translateY(8cqw) scale(.9); opacity: 0; transition: transform .7s var(--spring), opacity .35s; }
.earn.on { transform: none; opacity: 1; }
.earn .tot { display: flex; align-items: center; gap: 3cqw; }
.earn .tot img { width: 11cqw; height: 11cqw; border-radius: 99px; object-fit: cover; box-shadow: 0 0 0 .6cqw #fff, 0 0 0 1.1cqw #D62976; }
.earn .tot small { display: block; font-size: 3.2cqw; color: var(--g5); font-weight: 500; }
.earn .tot b { display: block; font-size: 11cqw; line-height: 1; letter-spacing: -.05em; font-weight: 700; font-variant-numeric: tabular-nums; }
.earn .row { display: flex; justify-content: space-between; gap: 3cqw; padding: 2.2cqw 0; border-bottom: .25cqw dashed var(--g2); font-size: 3.5cqw; opacity: 0; transform: translateY(2cqw); transition: opacity .4s, transform .5s var(--out); }
.earn .row.in { opacity: 1; transform: none; }
.earn .row:first-of-type { margin-top: 2.6cqw; }
.earn .row:last-of-type { border-bottom: 0; }
.earn .row span { color: var(--g5); }
.earn .row b.ok { color: #047857; }
.earn .month { display: flex; align-items: center; justify-content: space-between; margin-top: 2.4cqw; height: 10cqw; padding: 0 3.6cqw .2cqw 1.6cqw; border-radius: 99px; background: var(--ink); color: #fff; font-size: 3.5cqw; font-weight: 600; opacity: 0; transition: opacity .4s; }
.earn .month.in { opacity: 1; }
.earn .month span { display: flex; align-items: center; gap: 2cqw; }
.earn .month i { width: 7cqw; height: 7cqw; border-radius: 99px; background: #047857; display: grid; place-items: center; font-style: normal; }
.earn .month b { font-variant-numeric: tabular-nums; }
.coin { position: absolute; z-index: 3; left: 0; top: 0; width: 8cqw; height: 8cqw; border-radius: 99px; background: linear-gradient(135deg, #34D399, #047857); color: #fff; display: grid; place-items: center; font: 700 3.6cqw "Outfit", sans-serif; box-shadow: 0 2cqw 4cqw -1cqw rgba(4,120,87,.6); pointer-events: none; }

.endcard { gap: 0; }
.endcard .mk { display: inline-flex; align-items: baseline; gap: .5cqw; font-weight: 750; font-size: 6cqw; letter-spacing: -.04em; margin-bottom: 7cqw; }
.endcard .mk i { width: 1.6cqw; height: 1.6cqw; border-radius: 99px; background: var(--grad); }
.endcard .cta { display: grid; gap: 2.4cqw; width: 100%; margin-top: 8cqw; }
.endcard .cta a, .endcard .cta button { height: 12cqw; border-radius: 99px; display: grid; place-items: center; font-size: 4cqw; font-weight: 650; }
.endcard .cta a { background: var(--ink); color: #fff; }
.endcard .cta button { border: .3cqw solid var(--g2); background: #fff; }
.endcard.dark .cta a { background: #fff; color: var(--ink); }
.endcard.dark .cta button { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }

html.embed, html.embed body { height: 100%; overflow: hidden; background: transparent; }
html.embed .top, html.embed .subs, html.embed .aura { display: none; }
html.embed .stage { min-height: 0; height: 100%; padding: 3vh 0 0; justify-content: flex-start; }
html.embed .stage .phone { --pw: min(84vw, calc(88vh * 360 / 740)); box-shadow: 0 30px 60px -26px rgba(10,10,10,.45), 0 0 0 1px rgba(0,0,0,.06); }
html.embed .stage .phone.glow { box-shadow: 0 30px 70px -26px rgba(124,92,255,.55), 0 0 0 1px rgba(0,0,0,.06), 0 0 40px 2px rgba(255,95,162,.22); }
html.video, html.video body { height: 100%; overflow: hidden; background: #fff; }
html.video .top, html.video .subs, html.video .aura, html.video .mute, html.video .start { display: none; }
html.video .stage { min-height: 0; height: 100%; padding: 0; justify-content: center; }
html.video .stage .phone { --pw: calc(88vh * 360 / 740); box-shadow: 0 40px 80px -34px rgba(10,10,10,.4), 0 0 0 1px rgba(0,0,0,.06); }
html.video .stage .phone.glow { box-shadow: 0 40px 90px -34px rgba(124,92,255,.5), 0 0 0 1px rgba(0,0,0,.06), 0 0 50px 2px rgba(255,95,162,.2); }
@media (prefers-reduced-motion: reduce) { .start .o::before, .start .o::after, .wall { animation: none; } }