.tippy-box[data-animation=fade][data-state=hidden] {
    opacity:0
}

[data-tippy-root] {
    max-width:calc(100vw - 10px)
}

.tippy-box {
    position: relative;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    outline: 0;
    transition-property:transform, visibility, opacity
}

.tippy-box[data-placement^=top] > .tippy-arrow {
    bottom:0
}

.tippy-box[data-placement^=top] > .tippy-arrow:before {
    bottom: -7px;
    left: 0;
    border-width: 8px 8px 0;
    border-top-color: initial;
    transform-origin:center top
}

.tippy-box[data-placement^=bottom] > .tippy-arrow {
    top:0
}

.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
    top: -7px;
    left: 0;
    border-width: 0 8px 8px;
    border-bottom-color: initial;
    transform-origin:center bottom
}

.tippy-box[data-placement^=left] > .tippy-arrow {
    right:0
}

.tippy-box[data-placement^=left] > .tippy-arrow:before {
    border-width: 8px 0 8px 8px;
    border-left-color: initial;
    right: -7px;
    transform-origin:center left
}

.tippy-box[data-placement^=right] > .tippy-arrow {
    left:0
}

.tippy-box[data-placement^=right] > .tippy-arrow:before {
    left: -7px;
    border-width: 8px 8px 8px 0;
    border-right-color: initial;
    transform-origin:center right
}

.tippy-box[data-inertia][data-state=visible] {
    transition-timing-function:cubic-bezier(.54, 1.5, .38, 1.11)
}

.tippy-arrow {
    width: 16px;
    height: 16px;
    color:#333
}

.tippy-arrow:before {
    content: "";
    position: absolute;
    border-color: transparent;
    border-style:solid
}

.tippy-content {
    position: relative;
    padding: 5px 9px;
    z-index: 1
}
/*# sourceMappingURL=2.2c2c17a8.chunk.css.map */
@import "mixins";

.links {
  --gutter: 10px;
}

/* tutorial */
.tutorial {
  border-bottom: 1px solid var(--menu-border);

  &.tutorial_white a {
    color: #ffffff;

    @media (max-height: 501px) {
      color: var(--menu-text);
    }
  }
}

/* community */
.community {
  margin: var(--gutter) 0;
}

/* item */
.link {
  @include flex(flex-start);

  gap: 4px;
  color: var(--menu-text);
  font-size: var(--font-size-small);
  line-height: 1;
  opacity: 0.75;
  padding: var(--gutter) 0;
  transition: opacity var(--transition);
  width: 100%;

  &:hover {
    opacity: 1;
  }
}
.css-vubbuv {
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    fill: currentcolor;
    flex-shrink: 0;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.5rem;
  }
  @use "sass:color";
@import "mixins";

.chainfilter,
.chainfilter__out {
  .header {
    padding-block: var(--grid-gap);

    &.swap {
      padding-top: 0px;
    }

    h1 {
      margin-bottom: 12px;
    }

    .pills {
      @include flex(flex-start);
      gap: 0.4rem;
      flex-wrap: wrap;
    }

    .button {
      @include flex(center);
      gap: 0.5rem;
      min-width: 4rem;
      border: var(--border-width) solid var(--card-border);
      border-radius: 1rem;
      padding: 0.1rem 1rem;
      color: var(--text-muted);
      box-shadow: inset 0px 0px 0 0.5px var(--card-border);
      transition: all 0.1s;
      opacity: 0.75;

      img {
        height: 1rem;
      }

      &:hover {
        color: var(--text);
        border-color: var(--button-default-text);
        box-shadow: inset 0px 0px 0 0.5px var(--button-default-text);
        opacity: 1;
      }
    }

    .all {
      margin-right: 0.75rem;
    }

    .active {
      background-color: var(--button-primary-bg);
      border: var(--border-width) solid var(--button-primary-bg);
      color: var(--button-primary-text);
      opacity: 1;
      box-shadow: none;

      &:hover {
        cursor: default;
        border-color: var(--button-primary-bg);
        color: var(--button-primary-text);
        box-shadow: none;
      }
    }
  }
}

.chainfilter {
  .header {
    padding: var(--grid-gap);
    background-color: var(--card-bg);
    border: var(--border-width) solid var(--card-border);
    border-bottom: none;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);

    h1 {
      margin-bottom: 16px;
    }
  }

  .content {
    padding: var(--grid-gap);
    background-color: var(--card-bg-muted);
    border: var(--border-width) solid var(--card-border);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  }
}
html {
    box-sizing: border-box;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  body {
    background: var(--bg);
    color: var(--text);
    font-family: Gotham;
    font-feature-settings: "tnum";
    font-size: var(--font-size);
    font-weight: var(--normal);
    line-height: 1.5;
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: var(--bold);
    margin: 0;
  }
  
  pre {
    font-family: var(--font-family-monospace);
    margin: 0;
  }
  
  p,
  ul,
  ol,
  dl,
  dt,
  dd {
    margin: 0;
  }
  
  ul {
    list-style: none;
    padding: 0;
  }
  
  dl {
    display: grid;
    gap: 16px;
  }
  
  dt {
    grid-column-start: 1;
    font-weight: var(--bold);
  }
  
  dd {
    grid-column-start: 2;
    text-align: right;
  }
  
  strong {
    font-weight: var(--bold);
  }
  
  small {
    font-size: 80%;
  }
  
  a {
    color: var(--link);
    text-decoration: none;
    background-color: transparent;
  
    &:hover {
      text-decoration: underline;
    }
  }
  
  img {
    vertical-align: middle;
    border-style: none;
  }
  
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th {
    font-size: var(--font-size-small);
    font-weight: var(--bold);
    padding-top: 0;
    text-align: left;
  }
  
  button,
  input,
  textarea,
  select {
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border: 0;
    outline: 0;
    margin: 0;
    padding: 0;
    white-space: pre;
  }
  
  button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  
    cursor: pointer;
    font-weight: var(--bold);
  }
  
  input,
  textarea,
  select {
    background: var(--input-bg);
    font-weight: var(--normal);
  }
  
  input,
  textarea {
    width: 100%;
  }
  
  textarea {
    resize: none;
  }
  
  select {
    cursor: pointer;
  }
  
  :disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  
  ::placeholder {
    color: var(--input-border);
  }
  
  ::-webkit-scrollbar {
    display: none;
  }
  
  code {
    color: var(--danger);
    background-color: var(--card-bg-muted);
    padding: 0.2rem 0.4rem;
    border-radius: 0.2rem;
  }
  @import "mixins";

  .page {
    overflow-y: auto;
    // padding here to position progress bar
  
    @include desktop {
      padding: 32px var(--main-padding-horizontal);
    }
  
    @include mobile {
      padding: 28px var(--main-padding-horizontal);
    }
  
    @media (max-width: 600px) {
      padding: 28px 0;
    }
  
    &.banner {
      padding-top: 82px;
    }
  }
  
  .grid {
    display: grid;
  
    @include desktop {
      gap: 18px;
    }
  
    @include mobile {
      gap: 16px;
    }
  }
  
  .sub {
    padding: unset;
    margin-top: 20px;
  }
  
  .invisible {
    padding: unset;
    width: auto;
    overflow-y: scroll;
  }
  
  .header {
    @include flex(space-between);
    margin-right: 24px;
  
    @include desktop {
      --font-size-page-title: 36px;
    }
  
    @include mobile {
      --font-size-page-title: 28px;
    }
  
    @media (max-width: 600px) {
      padding: 0 var(--main-padding-horizontal);
    }
  
    .titleWrapper {
      @include flex(center);
      gap: 12px;
  
      svg:hover {
        cursor: pointer;
      }
    }
  }
  
  .title {
    font-size: var(--font-size-page-title);
  }
  
  .sub {
    .header {
      @include mobile {
        display: grid;
        gap: 8px;
      }
    }
  
    .title {
      font-size: 24px;
    }
  }
  
  @include desktop {
    .small {
      gap: 36px;
  
      .header {
        padding-bottom: 18px;
      }
  
      .main {
        margin: 0 auto;
        width: var(--max-width-small);
        max-width: 100%;
      }
    }
  }
  
  .main {
    overflow: hidden;
  }
  html {
    box-sizing: border-box;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  body {
    background: var(--bg);
    color: var(--text);
    font-family: Gotham;
    font-feature-settings: "tnum";
    font-size: var(--font-size);
    font-weight: var(--normal);
    line-height: 1.5;
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: var(--bold);
    margin: 0;
  }
  
  pre {
    font-family: var(--font-family-monospace);
    margin: 0;
  }
  
  p,
  ul,
  ol,
  dl,
  dt,
  dd {
    margin: 0;
  }
  
  ul {
    list-style: none;
    padding: 0;
  }
  
  dl {
    display: grid;
    gap: 16px;
  }
  
  dt {
    grid-column-start: 1;
    font-weight: var(--bold);
  }
  
  dd {
    grid-column-start: 2;
    text-align: right;
  }
  
  strong {
    font-weight: var(--bold);
  }
  
  small {
    font-size: 80%;
  }
  
  a {
    color: var(--link);
    text-decoration: none;
    background-color: transparent;
  
    &:hover {
      text-decoration: underline;
    }
  }
  
  img {
    vertical-align: middle;
    border-style: none;
  }
  
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th {
    font-size: var(--font-size-small);
    font-weight: var(--bold);
    padding-top: 0;
    text-align: left;
  }
  
  button,
  input,
  textarea,
  select {
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border: 0;
    outline: 0;
    margin: 0;
    padding: 0;
    white-space: pre;
  }
  
  button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  
    cursor: pointer;
    font-weight: var(--bold);
  }
  
  input,
  textarea,
  select {
    background: var(--input-bg);
    font-weight: var(--normal);
  }
  
  input,
  textarea {
    width: 100%;
  }
  
  textarea {
    resize: none;
  }
  
  select {
    cursor: pointer;
  }
  
  :disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  
  ::placeholder {
    color: var(--input-border);
  }
  
  ::-webkit-scrollbar {
    display: none;
  }
  
  code {
    color: var(--danger);
    background-color: var(--card-bg-muted);
    padding: 0.2rem 0.4rem;
    border-radius: 0.2rem;
  }
  .css-1kemp7z {
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    fill: currentcolor;
    flex-shrink: 0;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.5rem;
    color: rgb(237, 108, 2);
  }