/* Minta sayti — jonli demolar (`<!--assets: demos-->` yozilgan sahifalarda). site.css ustiga quriladi:
   .phone/.browser ramkalari, .flow/.fstep qadamlari qayta ishlatiladi.
   Faqat transform/opacity animatsiya qilinadi; o'lchamlar oldindan band (CLS 0).
   Qurilma ichida 1em = ekran kengligi/23 (container query) — ramka kichraysa, ichi ham. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.xd-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gold);border:1px solid rgba(245,182,46,.4);padding:3px 10px;border-radius:99px}
.xd-inst,.xd-inst *{transition:none!important;animation:none!important}
.coin{background:radial-gradient(circle at 35% 35%,#FFE08A,#F5B62E 60%,#C98B12);border-radius:50%}

/* ---------- Ramkalar ---------- */
.xd .phone,.xd-br{container-type:inline-size}
.xd-scr{position:relative;aspect-ratio:390/844;border-radius:40px;overflow:hidden;background:#000;color:#EDEDED;font-size:calc(100cqw/23);line-height:1.3}
.xd-br .xd-scr{aspect-ratio:16/10;border-radius:0;font-size:calc(100cqw/56);background:#070908}
.xd-br .bar{height:30px}
.xd-sb{display:flex;justify-content:space-between;padding:1.1em 1.9em 0;height:3.3em;font-weight:700}
.xd-sb i{width:2.4em;height:1em;border-radius:.3em;background:#ddd}
.xd-dot{width:1.2em;height:1.2em;border-radius:50%;background:#F5B62E;box-shadow:0 0 0 .28em #2ED3A5;flex:none}
.xd-b,.xd-v,.xp-st div,.xp-r{background:#101211;border:1px solid #232625;border-radius:1.2em}
.xd-pill{display:inline-block;font-weight:700;color:#2ED3A5;background:rgba(46,211,165,.12);border-radius:99px;padding:.2em .7em}
.xd-btn{margin-top:.8em;text-align:center;padding:.85em;border-radius:.9em;font-weight:800;background:#2ED3A5;color:#0E332E}
.xd-u{font-family:'Unbounded',sans-serif;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.xd small{color:#9a9a9a}

/* ---------- 1-demo: kassadan panelgacha ---------- */
.xd-top{display:flex;justify-content:flex-end;max-width:1100px;margin:-8px auto 14px}
.xd-stage{position:relative;display:grid;grid-template-columns:250px 250px minmax(0,1fr);gap:30px;align-items:end;max-width:1100px;margin:0 auto;transition:opacity .45s}
.xd-out .xd-stage{opacity:0}
.xd-dev{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0;z-index:1}
.xd-dev>*{width:100%}
.xd-dev>.xd-cap{width:auto;font-size:13px;font-weight:700;color:var(--ink2);background:var(--bg);border:1px solid var(--line2);border-radius:99px;padding:5px 13px}
.xd-track{position:absolute;left:125px;right:16%;bottom:14px;height:2px;background:var(--line2)}
.xd-track i{position:absolute;inset:-1px 0;background:linear-gradient(90deg,var(--mint),var(--gold));box-shadow:0 0 14px var(--mint);transform:scaleX(0);transform-origin:left;opacity:0}
.p4 .xd-track i{animation:xd-pulse 1.1s both}
@keyframes xd-pulse{0%{opacity:1}70%{transform:none;opacity:1}100%{transform:none;opacity:0}}

/* Mijoz telefoni */
.xa-tg{display:flex;justify-content:space-between;align-items:center;padding:.5em 1.3em .7em;border-bottom:1px solid #1d1d1d;color:#2ED3A5;font-weight:700}
.xa-tg em,.xa-tg i{font-style:normal}
.xa-tg>span{text-align:center;color:#EDEDED;line-height:1.15}
.xa-tg b,.xa-who small,.xa-ntf div>span,.xc-c small{display:block}
.xa-who{display:flex;align-items:center;gap:.7em;padding:1em 1.4em .8em;font-weight:700}
.xa-who .av{width:2.6em;height:2.6em;border-radius:.8em;background:#2ED3A5;color:#0E332E;display:grid;place-items:center}
.xa-who b{flex:1}.xa-who>span:last-child{text-align:right}
.xa-bal{position:relative;margin:0 1.1em;padding:1em 1.1em;border-radius:1.3em;background:linear-gradient(135deg,#2ED3A5,#6BE6C3);color:#0E332E;font-weight:600}
.xa-bal small{color:inherit;font-weight:700}
.xa-bal .r{display:flex;justify-content:space-between;font-size:.92em}
.xa-bal .r>span:last-child{border:1px solid rgba(14,51,46,.25);border-radius:99px;padding:0 .6em;font-weight:700}
.xa-bal .n{display:flex;align-items:center;gap:.35em;margin-top:.3em}
.xa-bal .n b{font-size:2.9em;letter-spacing:-.04em;line-height:1}
.xa-bal .n .coin{width:1.5em;height:1.5em}
.xa-plus{position:absolute;right:1em;bottom:1.1em;background:#0E332E;color:#6BE6C3;font-weight:800;padding:.3em .7em;border-radius:99px;opacity:0;transform:translateY(.8em) scale(.8);transition:opacity .4s,transform .5s cubic-bezier(.2,1.4,.4,1)}
.p5 .xa-plus,.p5 .xa-ntf{opacity:1;transform:none}
.xa-coins{position:absolute;right:2.6em;bottom:2.2em}
.xa-coins i{position:absolute;width:1em;height:1em;opacity:0}
.p5 .xa-coins i{animation:xd-coin .95s cubic-bezier(.2,.7,.3,1) both}
.xa-coins i:nth-child(1){--x:-4em;--y:-3.4em}.xa-coins i:nth-child(2){--x:-1.6em;--y:-4.6em;animation-delay:.05s}
.xa-coins i:nth-child(3){--x:1.2em;--y:-4em;animation-delay:.1s}.xa-coins i:nth-child(4){--x:-5.5em;--y:-1em}
.xa-coins i:nth-child(5){--x:2.4em;--y:-1.6em;animation-delay:.12s}.xa-coins i:nth-child(6){--x:-3em;--y:-5.6em;animation-delay:.16s}
@keyframes xd-coin{0%{transform:scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y))}}
.xa-qr{margin:1em 1.1em 0;padding:1em;text-align:center}
.xa-qr .l{font-size:.85em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#aaa;text-align:left}
.xa-qr .q{width:11em;margin:.8em auto 0;padding:.8em;background:#fff;border-radius:1em}
.xa-qr svg{display:block;fill:#0D745A}
.xa-qr .c{font-size:2.1em;letter-spacing:.22em;margin-top:.4em}
.xa-qr .h{display:flex;align-items:center;gap:.6em;font-size:.85em;color:#999;text-align:left;margin-top:.4em}
.xa-qr .h i{flex:none;width:2.6em;height:2.6em;border-radius:50%;border:.3em solid #2ED3A5;border-right-color:#1d3a31}
.xa-ntf{position:absolute;top:3.4em;left:.8em;right:.8em;z-index:4;display:flex;gap:.7em;padding:.8em .9em;border-radius:1.1em;background:#202825;box-shadow:0 .8em 2.4em #000;font-size:.95em;opacity:0;transform:translateY(-130%);transition:opacity .35s,transform .55s cubic-bezier(.2,1.2,.3,1)}
.xa-ntf>span{flex:none;width:2.4em;height:2.4em;border-radius:50%;background:#2ED3A5;display:grid;place-items:center}
.xa-ntf div>span{color:#d6dfdb}

/* Kassir ekrani */
.xc-h{display:flex;align-items:center;gap:.6em;padding:.6em 1.4em 0;font-size:1.3em;font-weight:700}
.xc-h span:last-child{font-size:.65em;color:#F5B62E;border:1px solid rgba(245,182,46,.45);border-radius:99px;padding:.2em .7em}
.xc-k{padding:.5em 1.4em 0;font-weight:600}
.xd-v{position:absolute;left:1.1em;right:1.1em;top:7.4em;padding:1.1em;opacity:0;transform:translateX(1.6em);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.xd:not(.p2) .xc-a,.p2:not(.p4) .xc-b,.p4 .xc-c{opacity:1;transform:none}
.xc-tabs{display:grid;grid-template-columns:1fr 1fr;padding:.3em;border-radius:.9em;background:#181818;text-align:center;font-weight:700;color:#999}
.xc-tabs span{padding:.5em 0;border-radius:.7em}
.xc-tabs span:first-child{background:#2ED3A5;color:#0E332E}
.xc-vf{position:relative;height:12em;margin:1em 0;border-radius:1em;background:radial-gradient(#1e2a25,#0b0f0d);overflow:hidden}
.xc-vf:before{content:"";position:absolute;inset:2em 5em;border:.2em dashed rgba(46,211,165,.5);border-radius:.6em}
.xc-vf i{position:absolute;left:3.6em;right:3.6em;top:1.8em;height:.2em;background:#2ED3A5;box-shadow:0 0 1em #2ED3A5;opacity:0}
.p1:not(.p2) .xc-vf i{opacity:1;animation:xd-scan .6s ease-in-out infinite alternate}
@keyframes xd-scan{to{transform:translateY(8.2em)}}
.xc-in{padding:.85em 1em;border-radius:.9em;background:#181818;border:1px solid #2a2a2a;color:#bbb;min-height:2.9em}
.xc-b>span:first-child{font-size:.85em}
.xc-n{text-align:center;margin:.5em 0 .8em;font-weight:700;font-size:1.3em;line-height:1.2}
.xc-n small{display:block;font-size:.65em;font-weight:400}
.xc-st{display:grid;grid-template-columns:1fr 1fr;gap:.6em;text-align:center}
.xc-st div{padding:.7em .3em;border-radius:1em;background:#161616;border:1px solid #2a2a2a}
.xc-st b{display:block;font-size:1.5em;color:#2ED3A5}.xc-st div+div b{color:#F5B62E}
.xc-l{display:block;font-size:.9em;color:#bbb;margin:1em 0 .4em}
.xc-in.amt{color:#fff;font-weight:600}
.xc-in i{display:inline-block;width:.1em;height:1.1em;background:#2ED3A5;vertical-align:-.15em;animation:xd-blink 1s steps(1) infinite}
@keyframes xd-blink{50%{opacity:0}}
.xc-sum{margin-top:.8em;padding:.7em .9em;border-radius:.9em;border:1px dashed #333;font-size:.92em;color:#bbb;line-height:1.5;opacity:0;transition:opacity .35s}
.xc-sum b{color:#2ED3A5}.p3 .xc-sum{opacity:1}
.xd-btn.gold{background:linear-gradient(135deg,#F5B62E,#FFD06A);color:#3a2700}
.p3:not(.p4) .xd-btn.gold{animation:xd-press .45s .25s}
@keyframes xd-press{50%{transform:scale(.94)}}
.xc-c{text-align:center;padding-top:1.8em}
.xc-c .xd-u{font-size:2.3em;color:#2ED3A5}
.xc-c .xd-pill{margin:1em 0 1.4em}
.xc-c>b{width:3.6em;height:3.6em;margin:0 auto 1em;border-radius:50%;display:grid;place-items:center;background:rgba(46,211,165,.15);color:#2ED3A5;font-size:1.5em;transform:scale(.6);transition:transform .5s cubic-bezier(.2,1.6,.4,1)}
.p4 .xc-c>b{transform:none}

/* Egasi paneli */
.xp{display:flex;height:100%}
.xp-side{flex:none;width:12.5em;padding:1.2em 0;background:#0d0f0e;border-right:1px solid #1c1f1d;font-weight:600}
.xp-side>b{display:flex;align-items:center;gap:.6em;padding:0 1.2em 1em;font:700 1.4em 'Unbounded',sans-serif}
.xp-side>b .xd-dot{width:.8em;height:.8em;box-shadow:0 0 0 .2em #2ED3A5}
.xp-side em{font-style:normal;color:#2ED3A5}
.xp-side>span{display:block;padding:.65em 1.4em;font-size:1.05em;color:#cfcfcf;white-space:nowrap}
.xp-side>.on{color:#2ED3A5;background:rgba(46,211,165,.08)}
.xp-main{flex:1;min-width:0;padding:1.4em 1.8em}
.xp-h b{font:700 1.8em 'Unbounded',sans-serif}
.xp-h small{display:block}
.xp-st{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1em;margin:1.2em 0}
.xp-st div{padding:1em 1.1em}
.xp-st small{display:block;color:#bdbdbd}
.xp-st b{display:block;font-size:1.45em;margin-top:.3em}
.xp-st div:first-child b{color:#F5B62E}.xp-st div:last-child b{color:#2ED3A5}
.xp-ls{height:19em;overflow:hidden}
.xp-in{display:flex;flex-direction:column;gap:.6em;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.xd:not(.p6) .xp-in{transform:translateY(-5.1em)}
.xp-r{position:relative;display:grid;grid-template-columns:9em minmax(0,1fr) auto;gap:1em;align-items:center;height:4.5em;padding:0 1.2em;flex:none}
.xp-r b{display:block;font-size:1.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-r small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-r>span:last-child{text-align:right}
.xp-r>span:last-child b{font:700 1.15em 'Unbounded',sans-serif}
.xp-r .xd-pill{font-size:.85em;padding:.1em .6em;margin-top:.2em}
.xp-r:first-child{opacity:0;transition:opacity .6s .15s}
.xp-r:first-child:after{content:"";position:absolute;inset:-1px;border-radius:1.2em;border:1px solid #2ED3A5;box-shadow:0 0 1.4em rgba(46,211,165,.35)}
.p6 .xp-r:first-child{opacity:1}

/* Qadamlar — site.css .flow/.fstep ustida; bosilsa demo o'sha joyga o'tadi */
.xd-steps{list-style:none;margin-top:44px}
.xd-step{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0 6px 6px;border-radius:16px}
.xd-step .num{transition:background .3s,color .3s}
.xd-step .t{font-size:17px;margin-top:18px}
.xd-step .d{color:var(--muted);font-size:14px;margin-top:6px}
.xd-step .tx{display:flex;flex-direction:column}
.xd-step.on .num,.no-js .xd-step .num,.xd-static .xd-step .num{background:var(--mint);color:#04261c}
.xd-ctl{text-align:center;margin-top:28px}
.no-js .xd-replay,.xd [hidden],.xk [hidden]{display:none}

@media(max-width:980px){
  .xd-stage{grid-template-columns:repeat(2,220px);justify-content:center;gap:28px 34px}
  .xd-d2{grid-column:1/-1;max-width:640px;justify-self:center}
  .xd-track{display:none}
}
/* Telefon: bitta qurilma, vaqt jadvali bo'yicha almashadi */
@media(max-width:767px){
  .xd-stage{display:block;height:590px;max-width:300px}
  .xd-dev{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateX(24px);transition:opacity .45s,transform .5s}
  .xd-dev.on{opacity:1;transform:none}
  .xd-dev>.phone,.xd-dev>.xd-br{width:250px}
  .xd-dev>.xd-br{border-radius:44px;padding:9px;border:0;background:linear-gradient(155deg,#2a3b34,#0b1511 40%,#1c2a24)}
  .xd-br .bar,.xp-side,.xp-r>span:first-child{display:none}
  .xd-br .xd-scr{aspect-ratio:390/844;border-radius:36px;font-size:calc(100cqw/23)}
  .xp-main{padding:3.6em 1.1em 1em}
  .xp-st{grid-template-columns:1fr 1fr;gap:.6em}
  .xp-st div:first-child{grid-column:1/-1}
  .xp-ls{height:24.3em}
  .xp-r{grid-template-columns:minmax(0,1fr) auto;padding:0 1em}
  .xp-r b,.xp-r>span:last-child b{font-size:1em}
  .xd-steps{gap:6px;margin-top:30px}
  .xd-step{flex-direction:row;align-items:flex-start;text-align:left;gap:14px;padding:10px 8px}
  .xd-step .num{width:44px;height:44px;border-radius:14px;font-size:17px;flex:none;margin:0}
  .xd-step .t{margin-top:0}
  /* JS'siz yoki harakat kamaytirilganda — uchala qurilma ketma-ket */
  .no-js .xd-stage,.xd-static .xd-stage{height:auto;display:flex;flex-direction:column;align-items:center;gap:30px}
  .no-js .xd-dev,.xd-static .xd-dev{position:relative;opacity:1;transform:none}
}

/* ---------- 2-demo: hero paneli ---------- */
.xh .xp-st{grid-template-columns:1fr 1fr}
.xh .xp-st div{position:relative}
.xh .xp-st div:after{content:"";position:absolute;inset:-1px;border-radius:1.2em;border:1px solid #2ED3A5;opacity:0;transition:opacity .9s}
.xh .xp-st .hit:after{opacity:1;transition:none}
.xh .xd-tag{float:right;margin-top:.4em}
.xh-sp{padding:.8em 1.1em}
.xh-sp svg{display:block;width:100%;height:8em;margin-top:.4em;overflow:visible}
.xh-sp g{transition:transform .8s ease-out}
.xh-sp .a{fill:rgba(46,211,165,.14)}.xh-sp .l{fill:none;stroke:#2ED3A5;stroke-width:2;vector-effect:non-scaling-stroke}
@container (max-width:460px){.xd-br .xh{aspect-ratio:4/3;font-size:calc(100cqw/36)}.xh .xp-side{display:none}}
/* Logodagi tanga "zarb qilinadi" (JS qo'shadi, bir marta) */
.nav .logo{position:relative}
.xd-mint{position:absolute;left:12.5%;top:50%;width:8.4%;aspect-ratio:1;margin:-4.2% 0 0 -4.2%;border-radius:50%;background:#F5B62E;animation:xd-mint .7s .4s cubic-bezier(.3,1.5,.5,1) both}
.xd-mint:after{content:"";position:absolute;inset:-60%;border-radius:50%;border:2px solid #FFD06A;opacity:0;animation:xd-ring .9s .75s ease-out}
@keyframes xd-mint{0%{transform:scale(2.2);opacity:0}60%{transform:scale(.8);opacity:1}}
@keyframes xd-ring{0%{opacity:1}100%{opacity:0;transform:scale(2.4)}}

/* ---------- 3-demo: Telegram chat ---------- */
.xt{display:flex;flex-direction:column;align-items:center;gap:18px}
.xt-h{display:flex;align-items:center;gap:.8em;padding:.4em 1.2em .7em;background:#17211d}
.xt-h>span:nth-child(2){flex:1;text-align:center;line-height:1.2}
.xt-h b{display:block}.xt-h>span:first-child{color:#52d1a6;font-size:1.8em;line-height:1}
.xt-h>span:last-child{width:2.6em;height:2.6em;border-radius:50%;background:#2ED3A5;display:grid;place-items:center}
.xt-w{height:100%;padding:.9em .8em;background:linear-gradient(#0e271d,#08140f);font-size:.9em;display:flex;flex-direction:column;align-items:flex-start;gap:.8em}
.xt-m{position:relative;max-width:90%}
.xt-b{background:#1f2c27;border-radius:1em 1em 1em .3em;padding:.6em .8em;line-height:1.35}
.xt-b i{float:right;font-style:normal;font-size:.8em;color:#8fa59c;margin:.6em 0 0 .8em}
.xt-k{margin-top:.3em;text-align:center;padding:.45em;border-radius:.7em;background:#1a2622;font-weight:600}
.xt-m>*{transition:opacity .35s,transform .45s}
.xt-m:not(.on)>:not(.xt-ty){opacity:0;transform:translateY(.6em)}
.xt-ty{position:absolute;left:0;top:0;display:flex;gap:.3em;padding:.8em 1em;border-radius:1em;background:#1f2c27;opacity:0}
.xt-m.ty .xt-ty{opacity:1}
.xt-ty i{width:.5em;height:.5em;border-radius:50%;background:#9bb;animation:xd-ty 1s infinite}
.xt-ty i:nth-child(2){animation-delay:.15s}.xt-ty i:nth-child(3){animation-delay:.3s}
@keyframes xd-ty{50%{opacity:.3;transform:translateY(-.25em)}}
.xt .xd-ctl{margin:0;display:flex;align-items:center;gap:12px}

/* ---------- 4-demo: raqamlar ---------- */
.fact .n.xd-pop{animation:xd-pop .25s ease-out}
@keyframes xd-pop{from{transform:translateY(-6px);opacity:.4}}

/* ---------- 5-demo: tarif kalkulyatori ---------- */
.xk{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;max-width:980px;margin:0 auto 34px;padding:26px 28px;background:var(--surf);border:1px solid var(--line2);border-radius:var(--r)}
.no-js .xk{display:none}
.xk-in{display:grid;gap:18px}
.xk-l{display:block;font-size:14px;font-weight:600;color:var(--ink2);margin-bottom:8px}
.xk-l b{color:var(--mint)}
.xk-st{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:13px;overflow:hidden}
.xk-st button{width:44px;height:44px;background:rgba(255,255,255,.04);border:0;color:var(--ink);font-size:20px;cursor:pointer}
.xk-st output{min-width:52px;text-align:center;font:700 18px 'Unbounded',sans-serif}
.xk input{width:100%;accent-color:var(--mint)}
.xk input[type=text]{padding:12px 14px;background:var(--bg2);border:1px solid var(--line2);border-radius:13px;color:var(--ink);font:inherit}
.xk-out{min-height:190px;padding:20px 22px;border-radius:18px;background:var(--bg2);border:1px solid var(--line)}
.xk-out small{color:var(--muted);font-size:13px}
.xk-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:4px 0 10px}
.xk-p b{font:700 22px 'Unbounded',sans-serif}
.xk-p span{color:var(--gold);font-weight:700}
.xk-out p{font-size:15.5px}.xk-out p b{color:var(--mint);font-size:18px}
.xk-n{display:block;margin-top:10px;line-height:1.45}
.plan:after{content:"";position:absolute;inset:-2px;border-radius:27px;border:2px solid var(--gold);box-shadow:0 0 40px rgba(245,182,46,.2);opacity:0;transition:opacity .35s;pointer-events:none}
.plan.xpick:after{opacity:1}
@media(max-width:767px){.xk{grid-template-columns:1fr;padding:20px 18px}}

/* ---------- 6: kartalar va FAQ ---------- */
.reveal{transform:translateY(16px)}
.faq details[open]>p{animation:xd-faq .35s ease-out}
@keyframes xd-faq{from{opacity:0;transform:translateY(-6px)}}
/* 7: shtamp karta (#xdStamp) */
.xs-w{display:flex;flex-direction:column;gap:.8em;padding:.5em 1.1em;height:calc(100% - 3.3em)}
.xs-h{display:flex;align-items:center;gap:.6em;font-size:1.1em}.xs-h span{width:2em;height:2em;border-radius:.6em;background:#2ED3A5;display:grid;place-items:center;font-size:.85em}
.xs-b{border-radius:1.3em;padding:.9em 1.1em;background:linear-gradient(135deg,#2ED3A5,#8BE9CD);color:#04140E;font-weight:700}.xs-b small{display:block;color:#0b3a2c}.xs-bal{font:800 1.8em Unbounded,sans-serif}
.xs-c{border-radius:1.3em;padding:1em;background:linear-gradient(160deg,#173A2F,#0E1F19 70%);border:1px solid rgba(46,211,165,.25)}
.xs-t{display:flex;justify-content:space-between}.xs-k{font:700 1em Unbounded,sans-serif;color:#2ED3A5}
.xs-g{display:grid;grid-template-columns:repeat(5,1fr);gap:.5em;margin:.8em 0}
.xs-g i{position:relative;aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(234,245,240,.28);display:grid;place-items:center}
.xs-g b{position:absolute;inset:-1.5px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#3DF0BC,#12A97E);opacity:0;transform:scale(.3);transition:opacity .3s,transform .45s cubic-bezier(.3,1.7,.5,1)}
.xs-g svg{width:58%;fill:#04140E}.xs-g .on b{opacity:1;transform:none}
.xs-r{display:grid;font-size:.9em;min-height:2.7em}.xs-r>*{grid-area:1/1;transition:opacity .4s,transform .4s}
.xs-r .h{color:#9fb3aa}.xs-r .g{padding:.5em .7em;border-radius:.9em;background:rgba(245,182,46,.14);border:1px solid rgba(245,182,46,.45);opacity:0;transform:scale(.9)}
.xs.gift .xs-r .g{opacity:1;transform:none}.xs.gift .xs-r .h{opacity:0}
.xs-q{margin:auto 0 1em;text-align:center;border-radius:1.2em;background:#141a17;padding:.8em}.xs-q small{display:block;color:#8fa59c}.xs-q b{font:700 1.6em Unbounded,sans-serif;letter-spacing:.1em}
.xs-n{position:absolute;z-index:3;left:.6em;right:.6em;top:3.4em;padding:.7em .9em;border-radius:1.1em;background:rgba(32,44,39,.97);box-shadow:0 .6em 1.6em rgba(0,0,0,.5);font-size:.85em;opacity:0;transform:translateY(-120%);transition:opacity .3s,transform .45s}
.xs-n.on{opacity:1;transform:none}.xs-n b{display:block;margin-bottom:.2em;color:#52d1a6}