body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 32% at 18% 28%,rgba(0,163,176,.2),transparent 70%),radial-gradient(34% 30% at 82% 72%,rgba(91,47,208,.17),transparent 70%);
  animation:drift 22s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{from{transform:translate3d(-4%,-3%,0)}to{transform:translate3d(5%,4%,0)}}

.hx-progress{position:fixed;left:0;top:0;width:100%;height:3px;background:var(--yg);transform-origin:0 50%;transform:scaleX(0);z-index:70;pointer-events:none}

.hx-btn.hx-pulse{position:relative;overflow:hidden;isolation:isolate}
.hx-btn.hx-pulse::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-45%;width:35%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(0) skewX(-22deg);animation:shine 4.6s ease-in-out infinite}
@keyframes shine{0%,72%{transform:translateX(0) skewX(-22deg)}100%{transform:translateX(480%) skewX(-22deg)}}

.hx-hero.hx-stripes::before{display:none}
.hx-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background:linear-gradient(rgba(0,163,176,.25) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(0,163,176,.25) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask:radial-gradient(60% 70% at 75% 40%,#000,transparent 75%);mask:radial-gradient(60% 70% at 75% 40%,#000,transparent 75%)}
.hx-srun{position:absolute;right:-40px;top:-30px;width:360px;height:230px;overflow:hidden;pointer-events:none;z-index:0;clip-path:polygon(30% 0,100% 0,70% 100%,0 100%)}
.hx-srun i{position:absolute;top:0;bottom:0;left:-124px;right:0;background:repeating-linear-gradient(-55deg,var(--y) 0 26px,transparent 26px 62px);animation:srun 2.6s linear infinite}
@keyframes srun{to{transform:translateX(75.7px)}}
@media(max-width:900px){.hx-srun{top:auto;bottom:-20px;right:-150px;opacity:.45}}

.hx-coins{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hx-coins span{position:absolute;bottom:-30px;border-radius:50%;animation:floatup linear infinite;will-change:transform,opacity}
.hx-coins .hx-c{background:radial-gradient(circle at 35% 30%,#fffbb0,#FCEE0A 40%,#F5AA07 75%,#9a6a00);box-shadow:inset 0 0 0 2px rgba(120,80,0,.35)}
.hx-coins .hx-s{background:#7ff3ff;box-shadow:0 0 8px #00a3b0}
@keyframes floatup{0%{transform:translate3d(0,0,0) rotate(0);opacity:0}12%{opacity:.9}100%{transform:translate3d(var(--dx,20px),-560px,0) rotate(540deg);opacity:0}}

.hx-ladder{perspective:900px}
.hx-ladder .hx-step{animation:rise .7s backwards;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .25s ease-out,box-shadow .25s}
.hx-ladder .hx-step:hover{--ty:-8px;box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 2px var(--y)}
.hx-step .hx-art img,.hx-step:hover .hx-art img{transform:translate3d(var(--px,0px),var(--py,0px),0) scale(var(--s,1.06));transition:transform .3s ease-out}
.hx-step:hover{--s:1.12}
.hx-step .hx-num{animation:numpop .6s .5s backwards}
.hx-step:nth-child(2) .hx-num{animation-delay:.62s}
.hx-step:nth-child(3) .hx-num{animation-delay:.74s}
@keyframes numpop{from{transform:scale(1.8) rotate(-12deg)}to{transform:none}}

.hx-phero picture{transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(1.04);transition:transform .4s ease-out}
.hx-phero picture img{animation:zoomin 1.2s ease-out both,kb 16s 1.2s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07) translate3d(-1.5%,0,0)}}
@media(max-width:900px){.hx-phero picture{transform:none}}

.hx-checker{position:relative;overflow:hidden;background:none}
.hx-checker::before{content:"";position:absolute;top:0;bottom:0;left:-36px;right:0;background:conic-gradient(#0C111D 25%,var(--y) 0 50%,#0C111D 0 75%,var(--y) 0) 0 0/18px 18px;animation:chk 1.4s linear infinite}
@keyframes chk{to{transform:translateX(36px)}}

.hx-ticker{overflow:hidden;border-bottom:1px solid var(--line);background:#0b1620;padding:10px 0}
.hx-ticker .hx-tk{display:flex;width:max-content;animation:tick 34s linear infinite}
.hx-ticker span{font:italic 700 17px/1 "Roboto Condensed";text-transform:uppercase;color:var(--t2);padding:0 22px;white-space:nowrap}
.hx-ticker span b{color:var(--y);margin-left:22px}
.hx-ticker:hover .hx-tk{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

.hx-timeline{overflow:visible}
.hx-timeline::before{left:-30px;right:30px;animation:dash 1.1s linear infinite}
@keyframes dash{to{transform:translateX(30px)}}
.hx-timeline .hx-dot{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.hx-js .hx-timeline:not(.hx-in) .hx-dot{transform:scale(.55) rotate(-20deg)}
@media(max-width:900px){.hx-timeline::before{left:27px;right:auto;top:-30px;bottom:30px;animation-name:dashv}}
@keyframes dashv{to{transform:translateY(30px)}}

.hx-games a{overflow:visible;background:none}
.hx-games a img{border-radius:4px;transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--gs,1));transition:transform .2s ease-out,box-shadow .2s}
.hx-games a:hover img{--gs:1.05;box-shadow:0 0 0 2px var(--teal),0 12px 28px rgba(0,163,176,.35)}
.hx-games a::after{transform:translateY(8px) scale(.9);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1);z-index:2}
.hx-games a:hover::after{transform:none}

.hx-calc .hx-seg{position:relative}
.hx-calc .hx-seg .hx-ind{position:absolute;top:0;left:0;width:33.334%;height:100%;background:var(--y);transform:translateX(calc(var(--i,0) * 100%));transition:transform .35s cubic-bezier(.5,1.4,.5,1);pointer-events:none}
.hx-calc .hx-seg button{position:relative;z-index:1;background:transparent;transition:color .2s}
.hx-calc .hx-seg button[aria-pressed="true"]{background:transparent}
.hx-calc .hx-seg{background:#0C111D}
.hx-calc .hx-big.hx-bump{animation:bump .35s}
@keyframes bump{50%{transform:scale(1.08)}}
.hx-calc .hx-big{transform-origin:0 50%}

.hx-faq details[open] p,.hx-toc[open] ol{animation:openin .3s ease-out}
@keyframes openin{from{transform:translateY(-8px);opacity:.4}to{transform:none;opacity:1}}
.hx-toc summary::after,.hx-faq summary::after{transition:transform .25s}
.hx-toc[open] summary::after{transform:rotate(180deg)}

.hx-copied{animation:cpop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes cpop{40%{transform:scale(1.12)}}

.hx-mcta{display:none}
@media(max-width:900px){
  .hx-btn.hx-mcta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:65;min-height:52px;transform:translateY(140%);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
  .hx-btn.hx-mcta.hx-show{transform:none}
  .hx-has-mcta footer{padding-bottom:84px}
}

@media(prefers-reduced-motion:reduce){
  body::before,.hx-srun i,.hx-coins,.hx-checker::before,.hx-ticker .hx-tk,.hx-timeline::before,.hx-btn.hx-pulse::after{animation:none!important}
  .hx-coins{display:none}
  .hx-ladder .hx-step,.hx-games a img,.hx-phero picture{transform:none!important}
  .hx-js .hx-timeline:not(.hx-in) .hx-dot{transform:none}
  .hx-mcta{transition:none}
  .hx-progress{display:none}
}