/* NFON DS STYLES
----------------------- */
:root {
  --nds-base-0: #fff;
  --nds-base-10: #f3f6f8;
  --nds-base-20: #e6e9eb;
  --nds-base-30: #cdcfd1;
  --nds-base-40: #afb1b3;
  --nds-base-50: #969899;
  --nds-base-60: #78797a;
  --nds-base-70: #525354;
  --nds-base-80: #3e4040;
  --nds-base-90: #252626;
  --nds-base-100p: #000;
  --nds-brand-0: #e8e0ff;
  --nds-brand-10: #dacfff;
  --nds-brand-20: #cbbaff;
  --nds-brand-30: #b59eff;
  --nds-brand-40: #9f80ff;
  --nds-brand-50: #8c66ff;
  --nds-brand-60: #6e44eb;
  --nds-brand-70: #4615d6;
  --nds-brand-80p: #3200c8;
  --nds-brand-90: #260099;
  --nds-brand-100: #1b006b;
  --nds-accent-0: #8fffb9;
  --nds-accent-10: #5fff9b;
  --nds-accent-20: #00f58b;
  --nds-accent-30p: #00e682;
  --nds-accent-40: #00cc74;
  --nds-accent-50: #00b365;
  --nds-accent-60: #008c4f;
  --nds-accent-70: #005e35;
  --nds-accent-80: #004527;
  --nds-accent-90: #00331d;
  --nds-accent-100: #002616;
  --nds-bc-0: #b8fbff;
  --nds-bc-10: #99f9ff;
  --nds-bc-20p: #00f0ff;
  --nds-bc-30: #00dbeb;
  --nds-bc-40: #00c3d1;
  --nds-bc-50: #00abb8;
  --nds-bc-60: #008a94;
  --nds-bc-70: #00585e;
  --nds-bc-80: #004347;
  --nds-bc-90: #003236;
  --nds-bc-100: #002426;
  --nds-int-0: #ffe74d;
  --nds-int-10p: #ffdc00;
  --nds-int-20: #f0d000;
  --nds-int-30: #e0c200;
  --nds-int-40: #c4aa00;
  --nds-int-50: #ad9600;
  --nds-int-60: #887707;
  --nds-int-70: #574a00;
  --nds-int-80: #3b3300;
  --nds-int-90: #2e2800;
  --nds-int-100: #262100;
  --nds-cc-0p: #c8ff02;
  --nds-cc-10: #c0f502;
  --nds-cc-20: #b4e602;
  --nds-cc-30: #a8d406;
  --nds-cc-40: #98c202;
  --nds-cc-50: #8eb602;
  --nds-cc-60: #6f8e01;
  --nds-cc-70: #4c6101;
  --nds-cc-80: #3c4d01;
  --nds-cc-90: #303d01;
  --nds-cc-100: #242e00;
  --nds-enb-0: #ffe6e8;
  --nds-enb-10: #ffd9dd;
  --nds-enb-20: #ffc7cc;
  --nds-enb-30: #ff99a3;
  --nds-enb-40: #ff7d8a;
  --nds-enb-50p: #ff6473;
  --nds-enb-60: #c0535e;
  --nds-enb-70: #82333e;
  --nds-enb-80: #6e2b31;
  --nds-enb-90: #4d1e23;
  --nds-enb-100: #331417;
}

.nds-base-0 {
  background-color: var(--nds-base-0);
  color: var(--nds-base-100p);
}

.nds-base-10 {
  background-color: var(--nds-base-10);
  color: var(--nds-base-100p);
}

.nds-base-20 {
  background-color: var(--nds-base-20);
  color: var(--nds-base-100p);
}

.nds-base-30 {
  background-color: var(--nds-base-30);
  color: var(--nds-base-100p);
}

.nds-base-40 {
  background-color: var(--nds-base-40);
  color: var(--nds-base-100p);
}

.nds-base-50 {
  background-color: var(--nds-base-50);
  color: var(--nds-base-100p);
}

.nds-base-60 {
  background-color: var(--nds-base-60);
  color: var(--nds-base-100p);
}

.nds-base-70 {
  background-color: var(--nds-base-70);
  color: var(--nds-base-0);
}

.nds-base-80 {
  background-color: var(--nds-base-80);
  color: var(--nds-base-0);
}

.nds-base-90 {
  background-color: var(--nds-base-90);
  color: var(--nds-base-0);
}

.nds-base-100p {
  background-color: var(--nds-base-100p);
  color: var(--nds-base-0);
}

.nds-brand-0 {
  background-color: var(--nds-brand-0);
  color: var(--nds-base-100p);
}

.nds-brand-10 {
  background-color: var(--nds-brand-10);
  color: var(--nds-base-100p);
}

.nds-brand-20 {
  background-color: var(--nds-brand-20);
  color: var(--nds-base-100p);
}

.nds-brand-30 {
  background-color: var(--nds-brand-30);
  color: var(--nds-base-100p);
}

.nds-brand-40 {
  background-color: var(--nds-brand-40);
  color: var(--nds-base-100p);
}

.nds-brand-50 {
  background-color: var(--nds-brand-50);
  color: var(--nds-base-100p);
}

.nds-brand-60 {
  background-color: var(--nds-brand-60);
  color: var(--nds-base-100p);
}

.nds-brand-70 {
  background-color: var(--nds-brand-70);
  color: var(--nds-base-0);
}

.nds-brand-80p {
  background-color: var(--nds-brand-80p);
  color: var(--nds-base-0);
}

.nds-brand-90 {
  background-color: var(--nds-brand-90);
  color: var(--nds-base-0);
}

.nds-brand-100 {
  background-color: var(--nds-brand-100);
  color: var(--nds-base-0);
}

.nds-accent-0 {
  background-color: var(--nds-accent-0);
  color: var(--nds-base-100p);
}

.nds-accent-10 {
  background-color: var(--nds-accent-10);
  color: var(--nds-base-100p);
}

.nds-accent-20 {
  background-color: var(--nds-accent-20);
  color: var(--nds-base-100p);
}

.nds-accent-30p {
  background-color: var(--nds-accent-30p);
  color: var(--nds-base-100p);
}

.nds-accent-40 {
  background-color: var(--nds-accent-40);
  color: var(--nds-base-100p);
}

.nds-accent-50 {
  background-color: var(--nds-accent-50);
  color: var(--nds-base-100p);
}

.nds-accent-60 {
  background-color: var(--nds-accent-60);
  color: var(--nds-base-100p);
}

.nds-accent-70 {
  background-color: var(--nds-accent-70);
  color: var(--nds-base-0);
}

.nds-accent-80 {
  background-color: var(--nds-accent-80);
  color: var(--nds-base-0);
}

.nds-accent-90 {
  background-color: var(--nds-accent-90);
  color: var(--nds-base-0);
}

.nds-accent-100 {
  background-color: var(--nds-accent-100);
  color: var(--nds-base-0);
}

.nds-bc-0 {
  background-color: var(--nds-bc-0);
  color: var(--nds-base-100p);
}

.nds-bc-10 {
  background-color: var(--nds-bc-10);
  color: var(--nds-base-100p);
}

.nds-bc-20p {
  background-color: var(--nds-bc-20p);
  color: var(--nds-base-100p);
}

.nds-bc-30 {
  background-color: var(--nds-bc-30);
  color: var(--nds-base-100p);
}

.nds-bc-40 {
  background-color: var(--nds-bc-40);
  color: var(--nds-base-100p);
}

.nds-bc-50 {
  background-color: var(--nds-bc-50);
  color: var(--nds-base-100p);
}

.nds-bc-60 {
  background-color: var(--nds-bc-60);
  color: var(--nds-base-100p);
}

.nds-bc-70 {
  background-color: var(--nds-bc-70);
  color: var(--nds-base-0);
}

.nds-bc-80 {
  background-color: var(--nds-bc-80);
  color: var(--nds-base-0);
}

.nds-bc-90 {
  background-color: var(--nds-bc-90);
  color: var(--nds-base-0);
}

.nds-bc-100 {
  background-color: var(--nds-bc-100);
  color: var(--nds-base-0);
}

.nds-int-0 {
  background-color: var(--nds-int-0);
  color: var(--nds-base-100p);
}

.nds-int-10p {
  background-color: var(--nds-int-10p);
  color: var(--nds-base-100p);
}

.nds-int-20 {
  background-color: var(--nds-int-20);
  color: var(--nds-base-100p);
}

.nds-int-30 {
  background-color: var(--nds-int-30);
  color: var(--nds-base-100p);
}

.nds-int-40 {
  background-color: var(--nds-int-40);
  color: var(--nds-base-100p);
}

.nds-int-50 {
  background-color: var(--nds-int-50);
  color: var(--nds-base-100p);
}

.nds-int-60 {
  background-color: var(--nds-int-60);
  color: var(--nds-base-100p);
}

.nds-int-70 {
  background-color: var(--nds-int-70);
  color: var(--nds-base-0);
}

.nds-int-80 {
  background-color: var(--nds-int-80);
  color: var(--nds-base-0);
}

.nds-int-90 {
  background-color: var(--nds-int-90);
  color: var(--nds-base-0);
}

.nds-int-100 {
  background-color: var(--nds-int-100);
  color: var(--nds-base-0);
}

.nds-cc-0p {
  background-color: var(--nds-cc-0p);
  color: var(--nds-base-100p);
}

.nds-cc-10 {
  background-color: var(--nds-cc-10);
  color: var(--nds-base-100p);
}

.nds-cc-20 {
  background-color: var(--nds-cc-20);
  color: var(--nds-base-100p);
}

.nds-cc-30 {
  background-color: var(--nds-cc-30);
  color: var(--nds-base-100p);
}

.nds-cc-40 {
  background-color: var(--nds-cc-40);
  color: var(--nds-base-100p);
}

.nds-cc-50 {
  background-color: var(--nds-cc-50);
  color: var(--nds-base-100p);
}

.nds-cc-60 {
  background-color: var(--nds-cc-60);
  color: var(--nds-base-100p);
}

.nds-cc-70 {
  background-color: var(--nds-cc-70);
  color: var(--nds-base-0);
}

.nds-cc-80 {
  background-color: var(--nds-cc-80);
  color: var(--nds-base-0);
}

.nds-cc-90 {
  background-color: var(--nds-cc-90);
  color: var(--nds-base-0);
}

.nds-cc-100 {
  background-color: var(--nds-cc-100);
  color: var(--nds-base-0);
}

.nds-enb-0 {
  background-color: var(--nds-enb-0);
  color: var(--nds-base-100p);
}

.nds-enb-10 {
  background-color: var(--nds-enb-10);
  color: var(--nds-base-100p);
}

.nds-enb-20 {
  background-color: var(--nds-enb-20);
  color: var(--nds-base-100p);
}

.nds-enb-30 {
  background-color: var(--nds-enb-30);
  color: var(--nds-base-100p);
}

.nds-enb-40 {
  background-color: var(--nds-enb-40);
  color: var(--nds-base-100p);
}

.nds-enb-50p {
  background-color: var(--nds-enb-50p);
  color: var(--nds-base-100p);
}

.nds-enb-60 {
  background-color: var(--nds-enb-60);
  color: var(--nds-base-100p);
}

.nds-enb-70 {
  background-color: var(--nds-enb-70);
  color: var(--nds-base-0);
}

.nds-enb-80 {
  background-color: var(--nds-enb-80);
  color: var(--nds-base-0);
}

.nds-enb-90 {
  background-color: var(--nds-enb-90);
  color: var(--nds-base-0);
}

.nds-enb-100 {
  background-color: var(--nds-enb-100);
  color: var(--nds-base-0);
}

.pill.token li {
  flex: 0 1 auto;
  min-width: 0;
}
.pill li.system > div {
  background-color: var(--nds-brand-80p);
  color: var(--nds-base-0);
}
.pill li.mode > div {
  background-color: var(--nds-base-100p);
  color: var(--nds-base-0);
}
.pill li.category > div {
  background-color: var(--nds-accent-30p);
  color: var(--nds-base-100p);
}
.pill li.component > div {
  background-color: var(--nds-bc-20p);
  color: var(--nds-base-100p);
}

.text-fit-100 {
  width: 100ch;
}
@media (max-width: 1120px) {
  .text-fit-100 {
    width: auto;
  }
}

.token-showcase > div {
  background-color: var(--nds-base-10);
  color: var(--nds-base-100p);
}
.token-showcase > div:last-child {
  background-color: var(--nds-base-100p);
  color: var(--nds-base-0);
}

.component-showcase {
  background-color: var(--nds-base-10);
}

.asset.desktop {
  border-radius: 0cqi;
  left: 11.5%;
  top: 4.8%;
  width: 77%;
}
.asset.mobile {
  border-radius: 0.5cqi;
  left: 74%;
  top: 26.4%;
  width: 21%;
}/*# sourceMappingURL=nfon-styles.css.map */