@font-face{
  font-family:Geist Variable;
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(geist-cyrillic-ext-wght-normal-DjL33-gN.woff2) format("woff2-variations");
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}
@font-face{
  font-family:Geist Variable;
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(geist-cyrillic-wght-normal-BEAKL7Jp.woff2) format("woff2-variations");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}
@font-face{
  font-family:Geist Variable;
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(geist-vietnamese-wght-normal-6IgcOCM7.woff2) format("woff2-variations");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB
}
@font-face{
  font-family:Geist Variable;
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(geist-latin-ext-wght-normal-DC-KSUi6.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}
@font-face{
  font-family:Geist Variable;
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(geist-latin-wght-normal-BgDaEnEv.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face{
  font-family:Geist Mono Variable;
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(geist-mono-cyrillic-ext-wght-normal-X_5orZeX.woff2) format("woff2-variations");
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}
@font-face{
  font-family:Geist Mono Variable;
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(geist-mono-cyrillic-wght-normal-DiZS0aHC.woff2) format("woff2-variations");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}
@font-face{
  font-family:Geist Mono Variable;
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(geist-mono-symbols2-wght-normal-CO5SzqOn.woff2) format("woff2-variations");
  unicode-range:U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F
}
@font-face{
  font-family:Geist Mono Variable;
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(geist-mono-vietnamese-wght-normal-DadHysG0.woff2) format("woff2-variations");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB
}
@font-face{
  font-family:Geist Mono Variable;
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(geist-mono-latin-ext-wght-normal-Bwz-egvJ.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}
@font-face{
  font-family:Geist Mono Variable;
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(geist-mono-latin-wght-normal-XN7g48iV.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
.section{
  position:relative;
  padding-block:clamp(84px,10vw,140px)
}
.section-head{
  margin-bottom:clamp(32px,4.5vw,52px)
}
.section-head .section-title{
  max-width:760px
}
.section-head>p,.section-head-split p{
  max-width:500px;
  margin-top:16px;
  color:var(--text-2);
  font-size:16.5px;
  line-height:1.6
}
.section-title{
  display:block;
  margin:0;
  font-size:clamp(30px,3.5vw,44px);
  letter-spacing:-.042em;
  line-height:1.05
}
.section-head-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,420px);
  align-items:end;
  gap:32px;
  max-width:none
}
.section-head-split>p{
  justify-self:end;
  margin:0
}
.section-head-center{
  text-align:center
}
.section-head-center>p,.section-head-center .section-title{
  margin-inline:auto
}
@media(max-width:760px){
  .section-head-split{
    grid-template-columns:1fr;
    gap:14px
  }
  .section-head-split>p{
    justify-self:start
  }
}
.hero{
  height:100vh;
  height:100svh;
  min-height:600px;
  max-height:1080px;
  padding:10px
}
.hero-viewport{
  position:relative;
  height:100%;
  border-radius:26px;
  overflow:hidden;
  background:#0b0b0a;
  isolation:isolate;
  transform-origin:50% 20%
}
.hero-viewport:after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:6;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--line-2);
  pointer-events:none
}
.hero-scrim{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  background:linear-gradient(90deg,#080808e6,#0808089e 30%,#08080800 58%),linear-gradient(0deg,#080808d1,#08080800 42%),linear-gradient(180deg,#080808b3,#08080800 24%);
  pointer-events:none
}
.hero-dim{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:5;
  background:var(--bg);
  pointer-events:none
}
.hero-copy{
  position:absolute;
  z-index:4;
  left:clamp(20px,3.4vw,48px);
  bottom:clamp(28px,7vh,72px);
  width:min(560px,calc(100% - 40px))
}
.hero-title{
  margin:0;
  font-size:clamp(38px,4.8vw,64px);
  font-weight:560;
  letter-spacing:-.048em;
  line-height:1.02
}
.hero-copy>p{
  max-width:470px;
  margin-top:18px;
  color:var(--text-2);
  font-size:16.5px;
  line-height:1.6
}
.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px
}
.hero-stock{
  margin-top:16px;
  color:var(--text-3);
  font-size:14px
}
.hero-hint{
  position:absolute;
  right:24px;
  bottom:22px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--text-3);
  font-size:13px;
  pointer-events:none
}
@media(max-width:700px){
  .hero{
    padding:8px
  }
  .hero-viewport{
    border-radius:20px
  }
  .hero-scrim{
    background:linear-gradient(0deg,#080808f0,#080808b3 38%,#08080800 62%),linear-gradient(180deg,#080808b3,#08080800 22%)
  }
  .hero-hint{
    display:none
  }
  .hero-copy{
    left:18px;
    right:18px;
    bottom:22px;
    width:auto
  }
  .hero-copy>p{
    font-size:15.5px
  }
}
.esp-stage{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow:hidden
}
.esp-backdrop{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.58) saturate(.92) contrast(1.04);
  transform:scale(1.08);
  will-change:transform;
  -webkit-user-select:none;
  user-select:none;
  pointer-events:none
}
.esp-canvas{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%
}
.esp-canvas-overlay{
  z-index:1;
  cursor:grab;
  touch-action:pan-y
}
.esp-canvas-overlay[data-dragging]{
  cursor:grabbing
}
.stage-vignette{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%),linear-gradient(180deg,rgba(0,0,0,.35),transparent 22%,transparent 78%,rgba(0,0,0,.45))
}
.esp-section{
  position:relative
}
.esp-anchor{
  position:absolute;
  left:0;
  width:1px;
  height:1px;
  pointer-events:none
}
.esp-pin{
  position:sticky;
  top:0;
  display:flex;
  align-items:center;
  height:100vh;
  height:100svh;
  padding:calc(var(--nav-h) + 24px) 0 24px
}
.esp-pin-inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:22px;
  height:100%;
  max-height:860px
}
.esp-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:20px;
  flex:1;
  min-height:0;
  max-height:660px
}
.esp-stage-card{
  position:relative;
  min-height:340px;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:#0b0b0a;
  box-shadow:0 40px 90px -40px #000000e6;
  isolation:isolate
}
.esp-stage-card:after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:6;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--line-2);
  pointer-events:none
}
.esp-stage-bottom{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:4;
  display:flex;
  justify-content:center;
  pointer-events:none
}
.variant-chips{
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2px;
  padding:4px;
  border-radius:999px;
  background:#0c0c0cb8;
  box-shadow:inset 0 0 0 1px var(--line-2);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  pointer-events:auto
}
.variant-chip{
  position:relative;
  height:32px;
  padding:0 14px;
  border-radius:999px;
  color:var(--text-3);
  font-size:13px;
  font-weight:520;
  isolation:isolate;
  transition:color .22s ease
}
.variant-chip:hover,.variant-chip.is-active{
  color:var(--text)
}
.variant-pill{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:-1;
  overflow:hidden;
  border-radius:inherit;
  background:var(--surface-3);
  box-shadow:inset 0 0 0 1px var(--line-2)
}
.variant-timer{
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:2px;
  border-radius:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  animation:timer-fill linear forwards
}
@keyframes timer-fill{
  to{
    transform:scaleX(1)
  }
}
.esp-side{
  display:flex;
  gap:14px;
  min-height:0
}
.esp-list{
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none
}
.esp-item-button{
  position:relative;
  display:grid;
  width:100%;
  padding:12px 18px;
  border-radius:14px;
  text-align:left;
  isolation:isolate
}
.esp-item-bg{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-2)
}
.esp-item-title{
  color:var(--text-3);
  font-size:17px;
  font-weight:540;
  letter-spacing:-.02em;
  transition:color .3s ease
}
.esp-item-body{
  overflow:hidden
}
.esp-item-body span{
  display:block;
  padding-top:5px;
  color:var(--text-2);
  font-size:14.5px;
  line-height:1.55
}
.esp-item-button:hover .esp-item-title,.esp-item.is-done .esp-item-title{
  color:var(--text-2)
}
.esp-item.is-active .esp-item-title{
  color:var(--text)
}
.esp-rail{
  position:relative;
  flex:none;
  width:2px;
  margin:10px 0;
  border-radius:2px;
  background:var(--line);
  overflow:hidden
}
.esp-rail-fill{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:var(--red);
  transform-origin:top
}
@media(max-width:900px){
  .esp-pin{
    padding-top:calc(var(--nav-h) + 20px)
  }
  .esp-pin-inner{
    justify-content:flex-start;
    gap:16px
  }
  .esp-grid{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
    max-height:none
  }
  .esp-stage-card{
    min-height:0;
    border-radius:var(--r-lg)
  }
  .esp-rail{
    display:none
  }
  .esp-item:not(.is-active){
    display:none
  }
  .esp-list{
    min-height:118px;
    justify-content:flex-start
  }
}
.suite-section{
  position:relative
}
.suite-anchor{
  position:absolute;
  top:60px;
  left:0;
  width:1px;
  height:1px;
  pointer-events:none
}
.suite-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:20px;
  align-items:stretch
}
.suite-stage{
  aspect-ratio:16 / 11;
  min-height:0
}
.suite-stage .esp-stage{
  transition:filter .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)
}
.suite-stage.is-dimmed .esp-stage{
  filter:brightness(.4) blur(3px);
  transform:scale(1.03)
}
.suite-list{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none
}
.suite-item-button{
  position:relative;
  display:grid;
  width:100%;
  padding:14px 20px 16px;
  border-radius:16px;
  text-align:left;
  isolation:isolate;
  overflow:hidden
}
.suite-item-bg{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-2)
}
.suite-item-title{
  color:var(--text-3);
  font-size:19px;
  font-weight:560;
  letter-spacing:-.02em;
  transition:color .3s ease
}
.suite-item-button:hover .suite-item-title{
  color:var(--text-2)
}
.suite-item.is-active .suite-item-title{
  color:var(--text)
}
.suite-item-body{
  display:block;
  overflow:hidden
}
.suite-item-lead{
  display:block;
  padding-top:6px;
  color:var(--text-2);
  font-size:15px;
  line-height:1.55
}
.suite-item-list{
  display:grid;
  gap:7px;
  padding:14px 0 2px
}
.suite-item-list span{
  position:relative;
  padding-left:16px;
  color:var(--text);
  font-size:14.5px
}
.suite-item-list span:before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:5px;
  height:5px;
  border-radius:1.5px;
  background:var(--red-bright)
}
.suite-timer{
  position:absolute;
  left:20px;
  right:20px;
  bottom:0;
  height:2px;
  border-radius:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  animation:timer-fill linear forwards
}
.lua-editor{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:4;
  display:grid;
  gap:8px;
  width:min(560px,calc(100% - 32px));
  height:fit-content;
  margin:auto;
  padding:8px;
  border-radius:10px;
  background:#151515;
  box-shadow:inset 0 0 0 1px #ffffff0f,0 40px 80px -30px #000000e6
}
.lua-card{
  border-radius:6px;
  background:#1c1c1c;
  overflow:hidden
}
.lua-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:30px;
  padding:0 10px;
  border-bottom:1px solid #c8372d;
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase
}
.lua-status{
  color:#7b7b7b;
  font-weight:500;
  letter-spacing:0;
  text-transform:none
}
.lua-status.is-running{
  color:#ffffff
}
.lua-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 8px 0 10px
}
.lua-file{
  color:#bdbdbd;
  font-size:12.5px;
  font-weight:600
}
.lua-button{
  position:relative;
  height:28px;
  padding:0 18px;
  border-radius:4px;
  background:#2a2a2a;
  color:#fff;
  font-size:12.5px;
  font-weight:600;
  transition:background-color .15s ease
}
.lua-button:hover{
  background:#343434
}
.lua-button:focus-visible{
  outline:2px solid var(--red-bright);
  outline-offset:2px
}
.lua-button.is-hinting:after{
  content:"";
  position:absolute;
  top:-1px;
  right:-1px;
  bottom:-1px;
  left:-1px;
  border-radius:inherit;
  box-shadow:0 0 0 1px #ffffff;
  animation:lua-hint 1.6s var(--ease-out) infinite;
  pointer-events:none
}
@keyframes lua-hint{
  0%{
    box-shadow:0 0 0 1px #ffffffe6
  }
  to{
    box-shadow:0 0 0 7px #ffffff00
  }
}
.lua-code{
  min-height:188px;
  margin:8px;
  padding:8px 10px;
  border-radius:3px;
  border-bottom:1px solid #c8372d;
  background:#161616;
  color:#e8e8e8;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.7;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.lua-line{
  display:grid;
  grid-template-columns:24px minmax(0,1fr)
}
.lua-num{
  color:#5a5a5a;
  -webkit-user-select:none;
  user-select:none
}
.lua-keyword{
  color:#ffffff
}
.lua-string{
  color:#e8c47c
}
.lua-global{
  color:#9cc3ff
}
.lua-constant{
  color:#d7a6ff
}
.lua-caret{
  display:inline-block;
  width:2px;
  height:1.1em;
  margin-left:1px;
  vertical-align:-.15em;
  background:var(--red-bright);
  animation:caret 1s steps(1) infinite
}
@keyframes caret{
  50%{
    opacity:0
  }
}
.lua-console{
  height:86px;
  padding:8px 10px;
  overflow-y:auto;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.7;
  scrollbar-width:thin
}
.lua-console p{
  color:#e8e8e8
}
.lua-console p.is-system{
  color:#7b7b7b
}
.lua-console .lua-empty{
  display:grid;
  place-items:center;
  height:100%;
  color:#6a6a6a;
  font-family:var(--font);
  font-size:12px;
  font-weight:600
}
@media(max-width:900px){
  .suite-grid{
    grid-template-columns:1fr
  }
  .suite-stage{
    aspect-ratio:4 / 3
  }
  .suite-stage.is-dimmed{
    aspect-ratio:auto
  }
  .suite-stage.is-dimmed .lua-editor{
    position:relative;
    inset:auto;
    margin:16px auto
  }
}
.video-player{
  position:relative;
  aspect-ratio:16 / 9;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:#000;
  box-shadow:0 0 0 1px var(--line-2),0 50px 100px -40px #000000e6;
  isolation:isolate
}
.video-slide{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0
}
.video-slide iframe{
  width:100%;
  height:100%;
  border:0
}
.video-poster{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden
}
.video-poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease-out),filter .6s ease
}
.video-poster:after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:radial-gradient(circle at center,#0000001a,#0006);
  transition:opacity .4s ease
}
.video-poster:hover img{
  transform:scale(1.035)
}
.video-poster:hover:after{
  opacity:.6
}
.video-play{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:1;
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  margin:auto;
  border-radius:50%;
  background:var(--red);
  color:#0a0a0a;
  box-shadow:inset 0 1px #ffffff40,0 20px 40px -10px #0009;
  transition:transform .5s var(--ease-spring),background-color .2s ease
}
.video-play svg{
  margin-left:-1px
}
.video-poster:hover .video-play{
  transform:scale(1.1);
  background:var(--red-bright)
}
.video-poster:active .video-play{
  transform:scale(.94)
}
.video-rail{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:18px
}
.video-thumbs{
  display:flex;
  flex:1;
  justify-content:center;
  gap:10px;
  min-width:0;
  padding:6px;
  overflow-x:auto;
  scrollbar-width:none
}
.video-thumbs::-webkit-scrollbar{
  display:none
}
.video-thumb{
  position:relative;
  flex:none;
  width:116px;
  aspect-ratio:16 / 9;
  border-radius:10px
}
.video-thumb img{
  width:100%;
  height:100%;
  border-radius:10px;
  object-fit:cover;
  opacity:.45;
  filter:saturate(.6);
  transition:opacity .3s ease,filter .3s ease
}
.video-thumb:hover img,.video-thumb.is-active img{
  opacity:1;
  filter:none
}
.video-thumb-ring{
  position:absolute;
  top:-4px;
  right:-4px;
  bottom:-4px;
  left:-4px;
  border-radius:13px;
  box-shadow:0 0 0 2px var(--red);
  pointer-events:none
}
.video-arrow{
  display:grid;
  flex:none;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--surface-2);
  color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:background-color .2s ease,opacity .2s ease
}
.video-arrow:hover:not(:disabled){
  background:var(--surface-3)
}
.video-arrow:disabled{
  opacity:.3
}
@media(max-width:700px){
  .video-player{
    border-radius:var(--r-md)
  }
  .video-play{
    width:60px;
    height:60px
  }
  .video-thumbs{
    justify-content:flex-start
  }
  .video-thumb{
    width:92px
  }
}
.compare-stage{
  position:relative;
  aspect-ratio:16 / 9;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:#000;
  box-shadow:0 0 0 1px var(--line-2),0 50px 100px -40px #000000e6;
  cursor:ew-resize;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  isolation:isolate
}
.compare-pair,.compare-after{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0
}
.compare-img{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none
}
.compare-label{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  height:28px;
  padding:0 11px;
  border-radius:999px;
  background:#0808089e;
  color:#fff;
  font-size:13px;
  font-weight:540;
  line-height:28px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  pointer-events:none
}
.compare-label-after{
  left:auto;
  right:16px
}
.compare-handle{
  position:absolute;
  top:0;
  bottom:0;
  z-index:3;
  width:0;
  pointer-events:none
}
.compare-line{
  position:absolute;
  top:0;
  bottom:0;
  left:-1px;
  width:2px;
  background:#fff;
  box-shadow:0 0 0 1px #0000002e
}
.compare-grip{
  position:absolute;
  top:50%;
  left:0;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:#fff;
  color:#111;
  box-shadow:0 12px 30px -6px #0000008c;
  pointer-events:auto;
  cursor:grab
}
.compare-stage.is-dragging .compare-grip{
  cursor:grabbing
}
.compare-grip svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}
.compare-range{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  pointer-events:none
}
.compare-stage:has(.compare-range:focus-visible) .compare-grip{
  outline:2px solid var(--red-bright);
  outline-offset:3px
}
.compare-tabs{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:18px
}
.compare-tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:50px;
  padding:6px 16px 6px 6px;
  border-radius:14px;
  color:var(--text-3);
  font-size:14px;
  font-weight:520;
  isolation:isolate;
  transition:color .25s ease
}
.compare-tab:hover,.compare-tab.is-active{
  color:var(--text)
}
.compare-tab img{
  width:54px;
  height:38px;
  border-radius:9px;
  object-fit:cover;
  opacity:.55;
  transition:opacity .25s ease
}
.compare-tab:hover img,.compare-tab.is-active img{
  opacity:1
}
.compare-tab-pill{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line-2)
}
@media(max-width:700px){
  .compare-stage{
    aspect-ratio:4 / 3;
    border-radius:var(--r-md)
  }
  .compare-tab{
    padding-right:12px;
    font-size:13px
  }
  .compare-tab img{
    width:40px;
    height:30px
  }
}
.how-steps{
  --how-gap: clamp(24px, 4vw, 56px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--how-gap);
  margin-block:0;
  list-style:none
}
.how-step{
  position:relative;
  min-width:0
}
.how-node{
  position:relative;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--line-3);
  isolation:isolate
}
.how-node-fill{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--red)
}
.how-node-num{
  color:#fff;
  font-size:14px;
  font-weight:600;
  font-variant-numeric:tabular-nums
}
.how-track{
  position:absolute;
  top:16px;
  left:50px;
  right:calc(16px - var(--how-gap));
  height:2px;
  border-radius:2px;
  background:var(--line-2);
  overflow:hidden
}
.how-track-fill{
  --fill: 0;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:var(--red);
  transform:scaleX(var(--fill));
  transform-origin:left;
  transition-property:transform;
  transition-timing-function:cubic-bezier(.65,0,.35,1)
}
.how-steps.is-in .how-track-fill{
  --fill: 1
}
.how-copy{
  margin-top:22px
}
.how-copy h3{
  font-size:18px;
  font-weight:560;
  letter-spacing:-.02em
}
.how-copy p{
  max-width:340px;
  margin-top:8px;
  color:var(--text-2);
  font-size:15.5px;
  line-height:1.6
}
.how-copy a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--line-3);
  text-underline-offset:3px;
  transition:text-decoration-color .2s ease
}
.how-copy a:hover{
  text-decoration-color:var(--red)
}
@media(max-width:760px){
  .how-steps{
    --how-gap: 32px;
    grid-template-columns:1fr
  }
  .how-step{
    padding-left:54px
  }
  .how-node{
    position:absolute;
    top:-4px;
    left:0
  }
  .how-track{
    top:42px;
    bottom:calc(12px - var(--how-gap));
    left:16px;
    right:auto;
    width:2px;
    height:auto
  }
  .how-track-fill{
    transform:scaleY(var(--fill));
    transform-origin:top
  }
  .how-copy{
    margin-top:0
  }
}
.plans{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:16px;
  max-width:820px
}
.plan{
  display:flex;
  flex-direction:column;
  padding:28px;
  border-radius:var(--r-xl);
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-2)
}
.plan.is-featured{
  box-shadow:inset 0 0 0 1px var(--red-line)
}
.plan.is-sold-out{
  opacity:.6
}
.plan-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:28px
}
.plan-head h3{
  font-size:18px;
  font-weight:560;
  letter-spacing:-.02em
}
.plan-tag{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  background:var(--red-wash);
  color:var(--red-ink);
  font-size:13px;
  font-weight:540
}
.plan-price{
  display:flex;
  align-items:baseline;
  gap:2px;
  margin-top:18px
}
.plan-currency{
  align-self:flex-start;
  margin-top:8px;
  color:var(--text-2);
  font-size:24px;
  font-weight:500
}
.plan-amount{
  font-size:54px;
  font-weight:560;
  letter-spacing:-.045em
}
.plan-once{
  margin-left:8px;
  color:var(--text-3);
  font-size:15px
}
.plan-term{
  margin-top:2px;
  color:var(--text-2);
  font-size:15px
}
.plan-includes{
  display:grid;
  gap:12px;
  margin:26px 0 30px;
  padding:24px 0 0;
  border-top:1px solid var(--line);
  list-style:none
}
.plan-includes li{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text-2);
  font-size:15px
}
.plan-includes svg{
  flex:none;
  color:var(--red-bright)
}
.plan .btn{
  margin-top:auto
}
.plan-stock{
  margin-top:12px;
  color:var(--text-3);
  font-size:14px;
  text-align:center
}
.plan-stock.is-low{
  color:var(--amber)
}
.plan-skeleton{
  min-height:420px
}
.pay-methods{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:32px
}
.pay-methods-label{
  margin-right:4px;
  color:var(--text-3);
  font-size:14px
}
.pay-method{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 14px 0 9px;
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:14px;
  font-weight:500;
  box-shadow:inset 0 0 0 1px var(--line)
}
.pay-method.is-soon{
  opacity:.55
}
.pay-method small{
  color:var(--text-3);
  font-size:13px
}
.faq-grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,6vw,80px);
  align-items:start
}
.faq-intro>p{
  margin-top:14px;
  font-size:17px
}
.faq-discord{
  margin-top:24px
}
@media(max-width:860px){
  .faq-grid{
    grid-template-columns:1fr
  }
}
.how-section{
  padding-bottom:clamp(48px,6vw,80px)
}
.page-head,.legal-head{
  padding-top:calc(var(--nav-h) + 12px + clamp(48px,7vw,80px));
  padding-bottom:clamp(32px,4vw,48px)
}
.page-head h1,.legal-head h1{
  display:block;
  font-size:clamp(34px,4.4vw,52px);
  letter-spacing:-.045em;
  line-height:1.04
}
.page-head p,.legal-head p{
  max-width:520px;
  margin-top:14px;
  font-size:17px
}
.support-card{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:40px;
  padding:20px 20px 20px 22px
}
.support-icon{
  display:grid;
  flex:none;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:14px;
  background:#5865f2;
  color:#fff
}
.support-card div{
  flex:1;
  min-width:0
}
.support-card strong{
  color:var(--text);
  font-size:15.5px;
  font-weight:560
}
.support-card p{
  color:var(--text-3);
  font-size:14px
}
@media(max-width:560px){
  .support-card{
    flex-wrap:wrap
  }
  .support-card .btn{
    width:100%
  }
}
.legal-updated{
  display:inline-block;
  margin-top:18px;
  color:var(--text-4);
  font-size:13px
}
.legal-highlights{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:12px
}
.legal-highlight{
  padding:20px
}
.legal-highlight-index{
  display:block;
  color:var(--red-ink);
  font-size:14px;
  font-weight:560;
  font-variant-numeric:tabular-nums
}
.legal-highlight strong{
  display:block;
  margin-top:12px;
  color:var(--text);
  font-size:16px;
  font-weight:560;
  letter-spacing:-.015em
}
.legal-highlight p{
  margin-top:6px;
  color:var(--text-3);
  font-size:14px;
  line-height:1.55
}
.legal-body{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:clamp(32px,6vw,80px);
  align-items:start;
  margin-top:clamp(48px,6vw,72px)
}
.legal-toc{
  position:sticky;
  top:calc(var(--nav-h) + 12px + 28px);
  display:grid;
  gap:2px
}
.legal-toc a{
  position:relative;
  display:flex;
  align-items:center;
  height:36px;
  padding:0 14px;
  border-radius:10px;
  color:var(--text-3);
  font-size:14px;
  font-weight:500;
  isolation:isolate;
  transition:color .2s ease
}
.legal-toc a:hover,.legal-toc a.is-active{
  color:var(--text)
}
.legal-toc-pill{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--surface-2);
  box-shadow:inset 2px 0 0 var(--red),inset 0 0 0 1px var(--line)
}
.legal-sections{
  display:grid;
  gap:8px;
  max-width:680px
}
.legal-section{
  padding:28px 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:100px
}
.legal-section header{
  display:flex;
  align-items:baseline;
  gap:14px
}
.legal-section header span{
  color:var(--text-3);
  font-size:15px;
  font-weight:500;
  font-variant-numeric:tabular-nums
}
.legal-section h2{
  font-size:22px;
  letter-spacing:-.03em
}
.legal-section ul{
  display:grid;
  gap:12px;
  margin:18px 0 0;
  padding:0 0 0 30px;
  list-style:none
}
.legal-section li{
  position:relative;
  color:var(--text-2);
  font-size:15.5px;
  line-height:1.65
}
.legal-section li:before{
  content:"";
  position:absolute;
  left:-18px;
  top:.72em;
  width:6px;
  height:1.5px;
  border-radius:2px;
  background:var(--red)
}
.legal-closing{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:32px;
  padding:22px
}
.legal-closing strong{
  display:block;
  color:var(--text);
  font-size:15.5px;
  font-weight:560
}
.legal-closing p{
  margin-top:4px;
  color:var(--text-3);
  font-size:14px
}
.legal-closing p a{
  color:var(--text-2);
  text-decoration:underline;
  text-decoration-color:var(--line-3);
  text-underline-offset:3px
}
@media(max-width:860px){
  .legal-body{
    grid-template-columns:1fr
  }
  .legal-toc{
    position:static;
    display:flex;
    gap:4px;
    margin-inline:calc(var(--gutter) * -1);
    padding:0 var(--gutter) 4px;
    overflow-x:auto;
    scrollbar-width:none
  }
  .legal-toc::-webkit-scrollbar{
    display:none
  }
  .legal-toc a{
    flex:none;
    border-radius:999px
  }
  .legal-toc-pill{
    box-shadow:inset 0 0 0 1px var(--line-2)
  }
  .legal-closing{
    flex-direction:column;
    align-items:flex-start
  }
}
.not-found{
  display:grid;
  place-items:center
}
.not-found-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:calc(var(--nav-h) + 12px + 96px);
  text-align:center
}
.not-found-target{
  padding:18px 34px
}
.not-found-code{
  display:block;
  color:var(--text);
  font-size:clamp(64px,10vw,104px);
  font-weight:600;
  letter-spacing:-.06em;
  line-height:1
}
.not-found-inner h1{
  margin-top:64px;
  font-size:clamp(26px,3vw,34px);
  letter-spacing:-.04em
}
.not-found-inner p{
  margin-top:12px;
  font-size:16.5px
}
.not-found-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:28px
}
@font-face{
  font-family:Smallest Pixel-7;
  src:url(../SmallestPixel7.ttf) format("truetype");
  font-display:swap;
  font-style:normal;
  font-weight:400
}
:root{
  --bg: #080808;
  --bg-raised: #0c0c0b;
  --surface: #111110;
  --surface-2: #161615;
  --surface-3: #1d1c1b;
  --surface-4: #262524;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .11);
  --line-3: rgba(255, 255, 255, .18);
  --text: #f5f4f2;
  --text-2: #bdbab5;
  --text-3: #8d8a85;
  --text-4: #64625e;
  --red: #ffffff;
  --red-bright: #e8e8e8;
  --red-deep: #bdbdbd;
  --red-ink: #ffffff;
  --red-wash: rgba(255, 255, 255, .08);
  --red-line: rgba(255, 255, 255, .32);
  --green: #4fbf73;
  --green-wash: rgba(79, 191, 115, .12);
  --amber: #e6ad4f;
  --amber-wash: rgba(230, 173, 79, .12);
  --font: "Geist Variable", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono Variable", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --page: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  --nav-h: 60px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1 28.1%, 1.049 33.3%, 1.019 36.7%, .998 40.7%, .992 46%, 1.001 57.5%, 1);
  color-scheme:dark;
  font-synthesis:none
}
*,*:before,*:after{
  box-sizing:border-box
}
html{
  background:var(--bg);
  scrollbar-color:#2e2d2b var(--bg);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%
}
body{
  margin:0;
  min-width:320px;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip
}
#root{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column
}
h1,h2,h3,h4,p,figure,dl,dd{
  margin:0
}
h1,h2,h3,h4{
  color:var(--text);
  font-weight:560;
  letter-spacing:-.035em;
  line-height:1.08;
  text-wrap:balance
}
p{
  color:var(--text-2);
  text-wrap:pretty
}
a{
  color:inherit;
  text-decoration:none
}
button,input,select,textarea{
  font:inherit;
  color:inherit
}
button{
  cursor:pointer;
  background:none;
  border:0;
  padding:0
}
button:disabled{
  cursor:not-allowed
}
img,svg,canvas,video{
  display:block;
  max-width:100%
}
button,a,summary,label{
  -webkit-tap-highlight-color:transparent
}
:focus-visible{
  outline:2px solid var(--red-bright);
  outline-offset:3px
}
::selection{
  background:var(--red);
  color:#0a0a0a
}
#main-content:focus{
  outline:none
}
code{
  font-family:var(--mono);
  font-size:.9em
}
.visually-hidden{
  position:absolute!important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0
}
.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:300;
  padding:10px 16px;
  border-radius:999px;
  background:var(--text);
  color:var(--bg);
  font-size:14px;
  font-weight:560;
  transform:translateY(-160%);
  transition:transform .3s var(--ease-out)
}
.skip-link:focus{
  transform:translateY(0)
}
.container{
  width:min(100% - var(--gutter) * 2,var(--page));
  margin-inline:auto
}
.container-narrow{
  width:min(100% - var(--gutter) * 2,760px);
  margin-inline:auto
}
.tabular{
  font-variant-numeric:tabular-nums
}
html.lenis,html.lenis body{
  height:auto
}
.lenis.lenis-smooth{
  scroll-behavior:auto!important
}
.lenis.lenis-smooth [data-lenis-prevent]{
  overscroll-behavior:contain
}
.lenis.lenis-stopped{
  overflow:clip
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:0 20px;
  border-radius:999px;
  font-size:15px;
  font-weight:540;
  letter-spacing:-.01em;
  line-height:1;
  white-space:nowrap;
  -webkit-user-select:none;
  user-select:none;
  isolation:isolate;
  transition:background-color .2s ease,color .2s ease,box-shadow .24s ease,opacity .2s ease
}
.btn:not(.is-motion):active:not(:disabled){
  transform:scale(.965)
}
.btn:not(.is-motion){
  transition:transform .42s var(--ease-spring),background-color .2s ease,color .2s ease,box-shadow .24s ease
}
.btn:disabled{
  opacity:.45
}
.btn-primary{
  background:var(--red);
  color:#0a0a0a;
  box-shadow:inset 0 1px #fff3,inset 0 -1px #0000002e,0 1px 2px #00000080
}
.btn-primary:hover:not(:disabled){
  background:var(--red-bright)
}
.btn-secondary{
  background:var(--surface-2);
  color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line-2)
}
.btn-secondary:hover:not(:disabled){
  background:var(--surface-3);
  box-shadow:inset 0 0 0 1px var(--line-3)
}
.btn-ghost{
  color:var(--text-2)
}
.btn-ghost:hover:not(:disabled){
  color:var(--text);
  background:#ffffff0d
}
.btn-light{
  background:var(--text);
  color:#0b0b0b
}
.btn-light:hover:not(:disabled){
  background:#fff
}
.btn-sm{
  height:36px;
  padding:0 14px;
  font-size:14px
}
.btn-lg{
  height:50px;
  padding:0 24px;
  font-size:15.5px
}
.btn-block{
  width:100%
}
.btn-arrow{
  display:inline-block;
  transition:transform .42s var(--ease-spring)
}
.btn:hover:not(:disabled) .btn-arrow,a:hover>.btn-arrow{
  transform:translate(3px)
}
.icon-btn{
  display:inline-grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:999px;
  color:var(--text-2);
  transition:background-color .2s ease,color .2s ease,transform .42s var(--ease-spring)
}
.icon-btn:hover{
  color:var(--text);
  background:#ffffff0f
}
.icon-btn:active{
  transform:scale(.9)
}
.icon-btn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.field{
  display:grid;
  gap:8px
}
.field>label,.field-label{
  color:var(--text-2);
  font-size:13.5px;
  font-weight:520
}
.field small{
  color:var(--text-3);
  font-size:13px;
  line-height:1.5
}
.field small strong{
  color:var(--text-2);
  font-weight:560
}
.input,.field input:not([type=radio]):not([type=checkbox]){
  width:100%;
  height:48px;
  padding:0 16px;
  border:0;
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  font-size:15px;
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:box-shadow .22s ease,background-color .22s ease
}
.field input::placeholder{
  color:var(--text-4)
}
.field input:hover{
  box-shadow:inset 0 0 0 1px var(--line-3)
}
.field input:focus,.field input:focus-visible{
  outline:none;
  background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--red-line),0 0 0 4px var(--red-wash)
}
.password-input{
  position:relative
}
.password-input input{
  padding-right:52px!important
}
.password-toggle{
  position:absolute;
  top:50%;
  right:6px;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:10px;
  color:var(--text-3);
  transform:translateY(-50%);
  transition:color .18s ease,background-color .18s ease
}
.password-toggle:hover{
  color:var(--text);
  background:#ffffff0d
}
.password-toggle svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.control-input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none
}
.segmented{
  display:inline-flex;
  justify-self:start;
  gap:2px;
  padding:4px;
  border-radius:999px;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-2)
}
.segmented-option{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 16px 0 12px;
  border-radius:999px;
  color:var(--text-3);
  font-size:14px;
  font-weight:540;
  cursor:pointer;
  isolation:isolate;
  transition:color .22s ease
}
.segmented-option:hover,.segmented-option.is-selected{
  color:var(--text)
}
.segmented-option:has(.control-input:focus-visible){
  outline:2px solid var(--red-bright);
  outline-offset:2px
}
.segmented-option img{
  width:18px;
  height:18px
}
.segmented-pill{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--surface-3);
  box-shadow:inset 0 0 0 1px var(--line-2)
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:13px;
  font-weight:560;
  text-transform:capitalize
}
.badge:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}
.badge-pending,.badge-paid{
  background:var(--amber-wash);
  color:var(--amber)
}
.badge-pending:before,.badge-paid:before{
  animation:badge-pulse 1.4s ease-in-out infinite
}
.badge-fulfilled,.badge-active{
  background:var(--green-wash);
  color:var(--green)
}
.badge-failed,.badge-expired,.badge-inactive{
  background:var(--red-wash);
  color:var(--red-ink)
}
@keyframes badge-pulse{
  50%{
    opacity:.35
  }
}
.msg{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:12px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:14px;
  line-height:1.55;
  box-shadow:inset 0 0 0 1px var(--line)
}
.msg a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--line-3);
  text-underline-offset:3px
}
.msg-error{
  background:var(--red-wash);
  color:#ffffff;
  box-shadow:inset 0 0 0 1px #ffffff38
}
.msg-success{
  background:var(--green-wash);
  color:#b9ecc8;
  box-shadow:inset 0 0 0 1px #4fbf7338
}
.msg-info{
  background:var(--surface-2)
}
.spinner{
  display:inline-block;
  width:16px;
  height:16px;
  flex:none;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  opacity:.85;
  animation:spin .7s linear infinite
}
@keyframes spin{
  to{
    transform:rotate(360deg)
  }
}
.skeleton{
  display:block;
  border-radius:6px;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%) 0 0 / 200% 100%,var(--surface-2);
  animation:shimmer 1.4s linear infinite
}
@keyframes shimmer{
  0%{
    background-position:150% 0,0 0
  }
  to{
    background-position:-50% 0,0 0
  }
}
.copy-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:13px;
  font-weight:540;
  overflow:hidden;
  transition:background-color .2s ease,color .2s ease
}
.copy-button:hover{
  background:var(--surface-4);
  color:var(--text)
}
.copy-button.copied{
  background:var(--green-wash);
  color:var(--green)
}
.copy-button svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.card{
  position:relative;
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line)
}
.card-raised{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px #ffffff0a,0 24px 60px -24px #000000b3
}
.reveal-line{
  display:inline-block;
  overflow:clip;
  overflow-clip-margin:.12em;
  vertical-align:top;
  padding-bottom:.08em;
  margin-bottom:-.08em
}
.reveal-word{
  display:inline-block;
  will-change:transform
}
.odometer{
  display:inline-flex;
  line-height:1;
  font-variant-numeric:tabular-nums
}
.odometer-digit{
  position:relative;
  display:inline-block;
  height:1em;
  overflow:hidden
}
.odometer-sizer{
  visibility:hidden
}
.odometer-strip{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  flex-direction:column
}
.odometer-strip span{
  display:block;
  height:1em;
  line-height:1
}
.faq-list{
  border-top:1px solid var(--line)
}
.faq-item{
  border-bottom:1px solid var(--line)
}
.faq-item h3{
  font-size:inherit;
  letter-spacing:normal;
  line-height:inherit
}
.faq-question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  padding:22px 0;
  color:var(--text);
  font-size:17px;
  font-weight:520;
  letter-spacing:-.015em;
  text-align:left
}
.faq-icon{
  display:grid;
  flex:none;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--surface-2);
  color:var(--text-2);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background-color .25s ease,color .25s ease
}
.faq-question:hover .faq-icon{
  color:var(--text);
  background:var(--surface-3)
}
.faq-item.is-open .faq-icon{
  background:var(--red);
  color:#0a0a0a;
  box-shadow:none
}
.faq-answer{
  overflow:hidden
}
.faq-answer p{
  max-width:560px;
  padding:0 52px 24px 0;
  color:var(--text-2);
  font-size:16px
}
.esp-target{
  position:relative;
  display:inline-flex;
  padding:30px 40px
}
.esp-edge{
  position:absolute;
  background:#fff;
  box-shadow:0 0 0 1px #000
}
.esp-edge-top{
  top:0;
  left:0;
  right:0;
  height:1px
}
.esp-edge-right{
  top:0;
  right:0;
  bottom:0;
  width:1px
}
.esp-edge-bottom{
  left:0;
  right:0;
  bottom:0;
  height:1px
}
.esp-edge-left{
  top:0;
  left:0;
  bottom:0;
  width:1px
}
.esp-target-health{
  position:absolute;
  top:-1px;
  bottom:-1px;
  left:-8px;
  width:3px;
  background:#000
}
.esp-target-health span{
  position:absolute;
  top:1px;
  right:1px;
  bottom:1px;
  left:1px;
  background:#0f0;
  transform-origin:bottom
}
.esp-target-name{
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  margin-bottom:5px;
  color:#fff;
  font-family:Verdana,Geneva,sans-serif;
  font-size:12px;
  line-height:1;
  text-align:center;
  text-shadow:-1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000,-1px 0 0 #000,1px 0 0 #000,-1px 1px 0 #000,0 1px 0 #000,1px 1px 0 #000;
  transform-origin:bottom center
}
.esp-pixel{
  --u: var(--pixel-unit, 1px);
  position:absolute;
  font-family:Smallest Pixel-7,monospace;
  font-size:calc(var(--u) * 10);
  line-height:1;
  white-space:nowrap;
  -webkit-font-smoothing:none;
  font-smooth:never;
  text-shadow:calc(var(--u) * -1) calc(var(--u) * -1) 0 #000,0 calc(var(--u) * -1) 0 #000,var(--u) calc(var(--u) * -1) 0 #000,calc(var(--u) * -1) 0 0 #000,var(--u) 0 0 #000,calc(var(--u) * -1) var(--u) 0 #000,0 var(--u) 0 #000,var(--u) var(--u) 0 #000
}
.esp-target-top{
  top:0;
  right:100%;
  margin-right:15px;
  color:#d8c45f;
  transform-origin:right top
}
.esp-target-side{
  top:0;
  left:100%;
  margin-left:5px;
  color:#78c8ee;
  transform-origin:left top
}
.esp-target-bottom{
  top:100%;
  left:0;
  right:0;
  margin-top:5px;
  color:#fff;
  text-align:center;
  transform-origin:top center
}
.btn-glass{
  background:#ffffff14;
  color:#fff;
  box-shadow:inset 0 0 0 1px #ffffff24;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px)
}
.btn-glass:hover:not(:disabled){
  background:#ffffff24
}
.coin{
  flex:none;
  border-radius:50%
}
.coin-stack{
  display:inline-flex
}
.coin-stack .coin{
  box-shadow:0 0 0 2px var(--surface);
  transition:transform .42s var(--ease-spring)
}
.coin-stack .coin+.coin{
  margin-left:-6px
}
.pay-tile{
  flex:none;
  border-radius:5px;
  object-fit:cover
}
.pay-tile-key{
  display:inline-grid;
  place-items:center;
  background:#2b2416;
  overflow:hidden
}
.pay-tile-key img{
  width:82%;
  height:auto
}
.nav{
  position:fixed;
  top:12px;
  left:0;
  right:0;
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 12px;
  pointer-events:none
}
.nav-bar{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  height:var(--nav-h);
  padding:0 10px 0 12px;
  border-radius:18px;
  pointer-events:auto;
  transition:background-color .36s ease,box-shadow .36s ease,backdrop-filter .36s ease
}
.nav.is-scrolled .nav-bar{
  background:#111110b8;
  box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px #ffffff0a,0 18px 40px -18px #000c;
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5)
}
.nav-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:none;
  height:40px;
  padding-right:6px;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.03em
}
.nav-brand-mark{
  position:relative;
  display:grid;
  place-items:center;
  width:30px;
  height:30px
}
body.is-booting .nav-brand-mark img,body.boot-flying .nav-brand-mark img{
  opacity:0
}
.nav-links{
  position:absolute;
  left:50%;
  display:flex;
  align-items:center;
  gap:2px;
  transform:translate(-50%)
}
.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  color:var(--text-2);
  font-size:14px;
  font-weight:500;
  transition:color .2s ease
}
.nav-link:hover,.nav-link.is-active{
  color:var(--text)
}
.nav-link:focus-visible{
  outline-offset:0
}
.nav-link-label{
  position:relative;
  z-index:1
}
.nav-hover{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  border-radius:inherit;
  background:#ffffff12
}
.nav-active-dot{
  position:absolute;
  left:50%;
  bottom:3px;
  width:4px;
  height:4px;
  margin-left:-2px;
  border-radius:50%;
  background:var(--red)
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto
}
.nav-account{
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  color:var(--text-2);
  font-size:14px;
  font-weight:500;
  transition:color .2s ease,background-color .2s ease
}
.nav-account:hover,.nav-account.active{
  color:var(--text);
  background:#ffffff0f
}
.nav-cta{
  padding:0 14px 0 16px
}
.nav-toggle{
  position:relative;
  display:none;
  width:40px;
  height:40px;
  border-radius:12px;
  place-items:center;
  transition:background-color .2s ease
}
.nav-toggle:hover{
  background:#ffffff0f
}
.nav-toggle-line{
  position:absolute;
  left:12px;
  right:12px;
  top:50%;
  height:1.6px;
  margin-top:-.8px;
  border-radius:2px;
  background:var(--text)
}
.nav-sheet{
  width:100%;
  max-width:1188px;
  margin-top:8px;
  padding:10px;
  border-radius:20px;
  background:#111110f0;
  box-shadow:inset 0 0 0 1px var(--line-2),0 30px 60px -20px #000000d9;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  pointer-events:auto;
  transform-origin:top center
}
.nav-sheet ul{
  margin:0 0 10px;
  padding:0;
  list-style:none
}
.nav-sheet-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:52px;
  padding:0 14px;
  border-radius:12px;
  color:var(--text);
  font-size:17px;
  font-weight:520;
  letter-spacing:-.02em;
  transition:background-color .18s ease
}
.nav-sheet-link svg{
  color:var(--text-3)
}
.nav-sheet-link:hover,.nav-sheet-link:active{
  background:#ffffff0d
}
@media(max-width:860px){
  .nav-links,.nav-account{
    display:none
  }
  .nav-toggle{
    display:grid
  }
}
@media(max-width:420px){
  .nav-cta .btn-arrow{
    display:none
  }
  .nav-cta{
    padding:0 14px
  }
}
.nav-brand-mark{
  transition:transform .52s var(--ease-spring)
}
.nav-brand:hover .nav-brand-mark{
  transform:scale(.92)
}
.brand-esp{
  position:absolute;
  top:-4px;
  right:-4px;
  bottom:-4px;
  left:-4px;
  pointer-events:none
}
.brand-esp i{
  position:absolute;
  width:7px;
  height:7px;
  border:0 solid #fff;
  filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 .5px #000);
  opacity:0;
  transition:transform .42s var(--ease-spring),opacity .16s ease
}
.brand-esp .tl{
  top:0;
  left:0;
  border-top-width:1px;
  border-left-width:1px;
  transform:translate(-6px,-6px)
}
.brand-esp .tr{
  top:0;
  right:0;
  border-top-width:1px;
  border-right-width:1px;
  transform:translate(6px,-6px)
}
.brand-esp .br{
  right:0;
  bottom:0;
  border-right-width:1px;
  border-bottom-width:1px;
  transform:translate(6px,6px)
}
.brand-esp .bl{
  left:0;
  bottom:0;
  border-left-width:1px;
  border-bottom-width:1px;
  transform:translate(-6px,6px)
}
.brand-esp-health{
  position:absolute;
  top:0;
  bottom:0;
  left:-6px;
  width:2px;
  background:#0f0;
  box-shadow:0 0 0 1px #000;
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .5s var(--ease-spring) 80ms
}
.nav-brand:hover .brand-esp i,.nav-brand:focus-visible .brand-esp i{
  opacity:1;
  transform:translate(0)
}
.nav-brand:hover .brand-esp-health,.nav-brand:focus-visible .brand-esp-health{
  transform:scaleY(1)
}
button.nav-link{
  gap:4px;
  padding-right:10px
}
.nav-link.is-open{
  color:var(--text)
}
.nav-caret{
  position:relative;
  z-index:1;
  width:12px;
  height:12px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.7
}
.nav-progress{
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:1.5px;
  border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--red) 30%,var(--red-bright));
  transform-origin:left;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none
}
.nav.is-scrolled .nav-progress{
  opacity:1
}
.nav-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  border-radius:18px;
  background:#111110f5;
  box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px #ffffff0a,0 30px 70px -20px #000000e6;
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  overflow:hidden;
  transform-origin:top center
}
.nav-dropdown-arrow{
  position:absolute;
  top:0;
  left:-8px;
  z-index:1;
  width:16px;
  height:2px;
  border-radius:0 0 2px 2px;
  background:var(--red)
}
.nav-dropdown-content{
  position:absolute;
  top:0;
  left:0;
  width:max-content
}
.nav-dropdown-content>div{
  padding:8px
}
.menu-features{
  width:520px
}
.menu-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px
}
.menu-row{
  position:relative;
  display:grid;
  gap:2px;
  padding:11px 14px 12px;
  border-radius:12px;
  isolation:isolate
}
.menu-hover{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:-1;
  border-radius:inherit;
  background:#ffffff0e
}
.menu-row strong{
  color:var(--text);
  font-size:15px;
  font-weight:540;
  letter-spacing:-.01em
}
.menu-row span{
  color:var(--text-3);
  font-size:14px;
  line-height:1.45;
  transition:color .18s ease
}
.menu-row:hover span{
  color:var(--text-2)
}
.menu-row .menu-external{
  margin-left:6px;
  color:var(--text-3);
  font-size:13px
}
.menu-footer{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 6px 4px;
  padding:12px 8px 6px;
  border-top:1px solid var(--line);
  color:var(--text-2);
  font-size:14px;
  font-weight:500;
  transition:color .18s ease
}
.menu-footer:hover{
  color:var(--text)
}
.menu-footer svg{
  transition:transform .42s var(--ease-spring)
}
.menu-footer:hover svg{
  transform:translate(3px)
}
.menu-support{
  width:300px
}
.menu-legal{
  display:flex;
  gap:16px;
  margin:6px 6px 4px;
  padding:12px 8px 6px;
  border-top:1px solid var(--line)
}
.menu-legal a{
  color:var(--text-3);
  font-size:14px;
  transition:color .18s ease
}
.menu-legal a:hover{
  color:var(--text)
}
.page-shell{
  display:flex;
  flex:1;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh
}
.page-shell>main{
  flex:1
}
.route-fallback{
  flex:1;
  min-height:100vh
}
.footer{
  margin-top:clamp(80px,12vw,140px);
  padding:56px 0 28px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-raised),var(--bg))
}
.footer-inner{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);
  gap:48px
}
.footer-brand p{
  margin-top:12px;
  color:var(--text-3);
  font-size:14px
}
.footer-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.03em
}
.footer-discord{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  margin-top:20px;
  padding:0 16px 0 12px;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:14px;
  font-weight:520;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:color .2s ease,background-color .2s ease
}
.footer-discord:hover{
  color:var(--text);
  background:var(--surface-3)
}
.footer-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.footer-column h2{
  margin-bottom:14px;
  color:var(--text);
  font-size:13.5px;
  font-weight:560;
  letter-spacing:-.01em
}
.footer-column ul{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none
}
.footer-column a{
  color:var(--text-3);
  font-size:14px;
  transition:color .18s ease
}
.footer-column a:hover{
  color:var(--text)
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:56px;
  padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--text-4);
  font-size:13px
}
@media(max-width:760px){
  .footer-inner{
    grid-template-columns:1fr;
    gap:40px
  }
}
@media(max-width:520px){
  .footer-columns{
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:32px
  }
  .footer-bottom{
    flex-direction:column;
    gap:6px
  }
}