/* Laid over the capture's own stylesheet (site.css): the pixel accent font, the header
   wordmark, and the sections and app screens the capture never had. Sizes are in the
   site's rem (1rem = 1/1800 of the viewport width on desktop, 1/375 on phones). */

/* site.css gives html and body overflow-x:hidden + overscroll-behavior:none: the body becomes its
   own (never scrollable) scroll box and, with chaining off, the mouse wheel never reaches the page */
html body{overscroll-behavior:auto}

@font-face{font-display:swap;font-family:future-type;font-style:normal;font-weight:400;src:url(/ui/fonts/pixelify-sans-500.woff2) format("woff2")}

/* header: the ring sits in front of a one-line wordmark */
.spin-logo img{height:2.3em;margin-left:4.4em;margin-top:.55em;width:auto!important}
.spin-logo .spin-logo__shape{height:3.4em!important;left:0!important}

/* sections that are empty now */
section[data-v-59fa0a86],section[data-v-367ecb3e],article>section.relative:last-of-type:not(.sp){display:none}

/* ---- shared pieces ---- */
.sp{position:relative;z-index:5}
.sp-head{align-items:center;display:flex;flex-direction:column;margin:0 auto 5rem;max-width:125rem}
.sp-head .label{margin-bottom:3rem}
.sp-btn{align-items:center;background:#ff00fe;border:0;color:#fff;cursor:pointer;display:inline-flex;font-family:space-mono;font-size:1.5rem;gap:1.2rem;line-height:1.4;padding:1.1rem 1.8rem;position:relative;text-transform:uppercase;transition:transform .2s,box-shadow .2s}
.sp-btn:hover{box-shadow:-.3rem .3rem 0 #5f2ff6;transform:translate(.3rem,-.3rem)}
.sp-btn[disabled]{background:#2a2c2f;color:#888;cursor:default}
.sp-btn[disabled]:hover{box-shadow:none;transform:none}
.sp-btn.--line{background:transparent;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.35)}
.sp-btn.--line:hover{box-shadow:inset 0 0 0 1px #ff00fe;color:#ff00fe;transform:none}
.sp-mono{font-family:space-mono;text-transform:uppercase}
.sp-dim{color:hsla(0,0%,100%,.5)}

/* ---- live pairs ---- */
.sp-pairs{margin-bottom:11rem}
.sp-pairs__grid{border-left:1px solid hsla(0,0%,100%,.2);border-top:1px solid hsla(0,0%,100%,.2);display:grid;grid-template-columns:1fr}
.sp-pair{border-bottom:1px solid hsla(0,0%,100%,.2);border-right:1px solid hsla(0,0%,100%,.2);color:#fff;display:block;overflow:hidden;position:relative}
.sp-pair__sides{display:grid;grid-template-columns:1fr auto 1fr}
.sp-side{align-items:center;display:flex;gap:1.6rem;min-width:0;padding:2.6rem 2.4rem}
.sp-side.--b{flex-direction:row-reverse;text-align:right}
.sp-side img,.sp-coin{background:#1d1f22;flex:none;height:5.6rem;object-fit:cover;width:5.6rem}
.sp-side h4{font-family:clash;font-size:2.8rem;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-side p{font-family:space-mono;font-size:1.3rem;margin-top:.8rem;text-transform:uppercase}
.sp-pair__vs{align-self:center;color:#ff00fe;font-family:future-type;font-size:1.8rem}
.sp-bar{background:#5f2ff6;display:flex;height:.6rem}
.sp-bar i{background:#ff00fe;display:block;transition:width .8s cubic-bezier(.19,1,.22,1)}
.sp-pair__foot{display:flex;font-family:space-mono;font-size:1.2rem;justify-content:space-between;padding:1.2rem 2.4rem;text-transform:uppercase}
.sp-pair:hover .sp-pair__foot{color:#ff00fe}
.sp-empty{border:1px solid hsla(0,0%,100%,.2);padding:6rem 2.4rem;text-align:center}
.sp-empty p{font-family:clash;font-size:2.8rem;margin-bottom:3rem}

/* ---- fees ---- */
.sp-fees{margin-bottom:11rem}
.sp-fee{align-items:baseline;border-top:1px solid hsla(0,0%,100%,.2);display:grid;gap:1rem 3rem;grid-template-columns:1fr;padding:2.6rem 0}
.sp-fee:last-of-type{border-bottom:1px solid hsla(0,0%,100%,.2)}
.sp-fee dt{font-family:space-mono;font-size:1.5rem;text-transform:uppercase}
.sp-fee dd.v{font-family:clash;font-size:3.6rem;line-height:1}
.sp-fee dd.n{color:hsla(0,0%,100%,.6)}
.sp-fees__foot{color:hsla(0,0%,100%,.6);margin-top:3rem;max-width:80rem}

/* ---- faq ---- */
.sp-faq{margin-bottom:11rem}
.sp-q{border-top:1px solid hsla(0,0%,100%,.2)}
.sp-q:last-child{border-bottom:1px solid hsla(0,0%,100%,.2)}
.sp-q button{align-items:center;background:none;border:0;color:#fff;cursor:pointer;display:flex;font-size:2.2rem;gap:2rem;justify-content:space-between;line-height:1.28;padding:2.8rem 0;text-align:left;width:100%}
.sp-q button i{color:#ff00fe;flex:none;font-family:space-mono;font-size:2.6rem;font-style:normal;transition:transform .3s}
.sp-q.is-open button i{transform:rotate(45deg)}
.sp-q div{color:hsla(0,0%,100%,.7);display:none;max-width:95rem;padding:0 0 3rem}
.sp-q.is-open div{display:block}
.sp-q button:hover{color:#ff00fe}

@media (min-width:650px){
  .sp-head{margin-bottom:6.5rem}
  .sp-btn{font-size:1.7rem;padding:1.3rem 2.4rem}
  .sp-pairs,.sp-fees,.sp-faq{margin-bottom:15rem}
  .sp-pairs__grid{grid-template-columns:1fr 1fr}
  .sp-side{gap:2.4rem;padding:4rem 3.6rem}
  .sp-side img,.sp-coin{height:8.8rem;width:8.8rem}
  .sp-side h4{font-size:4.4rem}
  .sp-side p{font-size:1.5rem}
  .sp-pair__vs{font-size:2.4rem}
  .sp-pair__foot{font-size:1.4rem;padding:1.6rem 3.6rem}
  .sp-empty{padding:10rem 4rem}
  .sp-empty p{font-size:4rem}
  .sp-fee{grid-template-columns:32rem 34rem 1fr;padding:3.6rem 0}
  .sp-fee dd.v{font-size:5.5rem}
  .sp-q button{font-size:2.8rem;padding:3.8rem 0}
  .sp-q button i{font-size:3.4rem}
}

/* ---- header mark: the logo, still (the capture spun its rings) ---- */
.spin-logo img.spin-logo__mark{animation:none;height:3.4em!important;left:0!important;margin:0;top:0;width:3.4em!important}

/* ---- home hero: contract address with copy, and the X button under it ---- */
.sp-ca{display:grid;gap:1.2rem;margin-top:3rem;max-width:44rem;pointer-events:auto;position:relative;width:100%}
.sp-ca__label{color:hsla(0,0%,100%,.5);font-family:space-mono;font-size:max(11px,1.2rem);text-transform:uppercase}
.sp-ca__addr{align-items:center;background:transparent;border:0;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.35);color:#fff;cursor:pointer;display:flex;font-family:space-mono;font-size:max(12px,1.3rem);gap:1.2rem;justify-content:space-between;min-height:max(40px,4.6rem);padding:0 1.6rem;text-align:left;transition:box-shadow .2s;width:100%}
.sp-ca__addr:hover{box-shadow:inset 0 0 0 1px #ff00fe}
.sp-ca__addr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-ca__addr .--full{display:none}
.sp-ca__addr i{color:#ff00fe;flex:none;font-style:normal;text-transform:uppercase}
.sp-x{font-size:max(12px,1.5rem);justify-content:center;min-height:max(40px,4.6rem);width:100%}
.sp-x svg{fill:currentColor;flex:none;height:max(14px,1.6rem);width:max(14px,1.6rem)}
@media (min-width:650px){
  .sp-ca{max-width:none}
  .sp-ca__addr .--full{display:inline}
  .sp-ca__addr .--short{display:none}
}