@font-face {
  font-family: FsSinclair-Bold;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/FSSinclairBold.otf) format('opentype');
}
@font-face {
  font-family: FsSinclair-Medium;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/FSSinclairMedium.otf) format('opentype');
}
@font-face {
  font-family: FsSinclair-Regular;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/FSSinclairRegular.otf) format('opentype');
}
.font-fsm {
  font-family: FsSinclair-Medium;
}
.font-fsb {
  font-family: FsSinclair-Bold;
}
body,
html {
  margin: 0;
  padding: 0;
  background: #222;
  color: #fff;
  font-family: FsSinclair-Regular, Helvetica, Arial, sans-serif;
  font-size: 20px;
  overflow: hidden;
}
main {
  background: #111;
  transform-origin: top left;
  position: fixed;
  left: 50%;
}
body,
html {
  background: #000;
}
button {
  font-family: FsSinclair-Regular, Helvetica, Arial, sans-serif;
  font-size: 16px;
  user-select: none;
}
.bold {
  font-weight: 600;
}
.pos-rel {
  position: relative;
}
.noselect,
.noselect > * {
  user-select: none;
}
.nopointer {
  pointer-events: none;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap,
.wrap {
  flex-wrap: wrap;
}
::placeholder {
  color: #fff;
  opacity: 0.5;
}
.text-shadow {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5647058824));
}
.filter-outline {
  filter: drop-shadow(2px 4px 0 #000);
}
.filter-outline-sm {
  filter: drop-shadow(2px 2px 0 #000);
}
.dcon-tooltip .tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.dcon-tooltip {
  z-index: 2000;
  pointer-events: none;
}
.dcon-tooltip .tooltip-inner {
  font-size: 14px;
  font-family: inherit;
  line-height: 20px;
  background: var(--color-darkest);
  padding: 4px 12px;
  max-width: 250px;
  position: relative;
  margin: 6px;
  font-weight: 600;
}
.dcon-tooltip .tooltip-arrow {
  display: none;
}
.brightness-hover:hover {
  filter: brightness(1.1);
}
.dcon-modal {
  position: relative;
  background: var(--color-brightest);
  padding: 15px;
  margin: 50px;
}
.dcon-modal-bg {
  background: rgba(0, 0, 0, 0.4509803922);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.dcon-modal-container-inner {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  z-index: 2;
}
.dcon-modal-container,
.dcon-modal-container-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 1000;
}
.btn {
  color: #fff;
  margin: 0;
  padding: 0;
  border: none;
  outline: 0;
  cursor: pointer;
  background: 0 0;
}
.bg-stripes {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    #fff 3px,
    #fff 6px
  );
}
.bg-stripes-hover:hover {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    #fff 3px,
    #fff 6px
  );
}
.opa-01 {
  opacity: 0.1;
}
.opa-02 {
  opacity: 0.2;
}
.opa-03 {
  opacity: 0.3;
}
.opa-04 {
  opacity: 0.4;
}
.opa-05 {
  opacity: 0.5;
}
.opa-06 {
  opacity: 0.6;
}
.opa-07 {
  opacity: 0.7;
}
.opa-08 {
  opacity: 0.8;
}
.opa-09 {
  opacity: 0.9;
}
.opa-1 {
  opacity: 1;
}
.opa-01-hover:hover {
  opacity: 0.1;
}
.opa-02-hover:hover {
  opacity: 0.2;
}
.opa-03-hover:hover {
  opacity: 0.3;
}
.opa-04-hover:hover {
  opacity: 0.4;
}
.opa-05-hover:hover {
  opacity: 0.5;
}
.opa-06-hover:hover {
  opacity: 0.6;
}
.opa-07-hover:hover {
  opacity: 0.7;
}
.opa-08-hover:hover {
  opacity: 0.8;
}
.opa-09-hover:hover {
  opacity: 0.9;
}
.opa-1-hover:hover {
  opacity: 1;
}
.opa-01-selected.selected {
  opacity: 0.1;
}
.opa-02-selected.selected {
  opacity: 0.2;
}
.opa-03-selected.selected {
  opacity: 0.3;
}
.opa-04-selected.selected {
  opacity: 0.4;
}
.opa-05-selected.selected {
  opacity: 0.5;
}
.opa-06-selected.selected {
  opacity: 0.6;
}
.opa-07-selected.selected {
  opacity: 0.7;
}
.opa-08-selected.selected {
  opacity: 0.8;
}
.opa-09-selected.selected {
  opacity: 0.9;
}
.opa-1-selected.selected {
  opacity: 1;
}
button > * {
  user-select: none;
}
button.btn-striped,
button.btn-striped-inverted {
  position: relative;
}
button.btn-striped::after {
  content: '';
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    #fff 3px,
    #fff 6px
  );
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
}
button.btn-striped-inverted::after {
  content: '';
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    #fff 3px,
    #fff 6px
  );
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  mix-blend-mode: normal;
  filter: invert(1);
}
.cursor-pointer {
  cursor: pointer;
}
input,
textarea {
  background: 0 0;
  color: inherit;
  border: none;
  outline: 0;
  font-size: inherit;
  font-family: inherit;
  padding: 10px;
}
type-out {
  display: contents;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
select option {
  background: #111 !important;
  border: none;
}
.dropdown-menu {
  border: none;
  margin: 0;
  min-width: unset;
  box-shadow: none;
  padding: 0;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  text-align: left;
  list-style: none;
  background-clip: padding-box;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type='range'] {
    overflow: hidden;
    width: 400px;
    -webkit-appearance: none;
    background-color: var(--color-gray);
  }
  input[type='range']::-webkit-slider-runnable-track {
    height: 10px;
    -webkit-appearance: none;
    color: #13bba4;
    margin-top: -1px;
  }
  input[type='range']::-webkit-slider-thumb {
    width: 0;
    -webkit-appearance: none;
    height: 0;
    background: #434343;
    box-shadow: -400px 0 0 400px #fff;
  }
}
input[type='range']::-moz-range-progress {
  background-color: #fff;
}
input[type='range']::-moz-range-track {
  background-color: var(--color-gray);
}
input[type='range']::-ms-fill-lower {
  background-color: #fff;
}
input[type='range']::-ms-fill-upper {
  background-color: var(--color-gray);
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: rgba(0, 0, 0, 0.1607843137);
}
::-webkit-scrollbar-thumb {
  background: var(--color-gray);
}
::-webkit-scrollbar-thumb:hover {
  background: #fff;
}
::-webkit-scrollbar-thumb:active {
  background: var(--color-primary);
}
.sliced-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  transform-origin: 0 100%;
  transform: skew(-45deg);
  z-index: -1;
}
.hue-rotate {
  animation: hue-rotate-animation 5s infinite linear;
}
@keyframes hue-rotate-animation {
  0% {
    filter: hue-rotate(0);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
.json-container .json-node {
  margin-left: 20px;
}
.json-container .json-value[json-data-type='string'] {
  color: var(--color-green);
}
.json-container .json-value[json-data-type='number'] {
  color: var(--color-blue);
}
.json-container .json-value[json-data-type='boolean'] {
  color: var(--color-primary);
}
@keyframes opacity-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacity-pulse2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes order-lights {
  from {
    offset-distance: 0;
  }
  to {
    offset-distance: 100%;
  }
}
@keyframes stripes-scroll {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 10000px;
  }
}
@keyframes bug-hole-light {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
  90% {
    box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}
@keyframes gold-background-size {
  0% {
    background-size: 70% 100%;
  }
  50% {
    background-size: 220% 100%;
  }
  100% {
    background-size: 70% 100%;
  }
}
@keyframes background-zoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.pulse-effect.pulse-animate:after {
  animation: live-pulse 2s infinite;
}
.pulse-effect:after {
  content: '';
  position: absolute;
  box-shadow: 0 0 0 transparent;
  opacity: 0.5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 4px;
  height: 4px;
}
@keyframes glitchIn {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
    clip-path: inset(50% 50% 50% 50%);
  }
  5% {
    transform: translate(-8px, 4px) scale(1.1);
    clip-path: inset(30% 40% 20% 30%);
    opacity: 1;
  }
  10% {
    transform: translate(6px, -6px) scale(0.9);
    clip-path: inset(15% 25% 20% 35%);
  }
  15% {
    transform: translate(-4px, 8px) scale(1.05);
    clip-path: inset(25% 20% 30% 25%);
  }
  20% {
    transform: translate(5px, -8px) scale(1.02);
    clip-path: inset(20% 30% 10% 40%);
  }
  25% {
    transform: translate(-6px, 6px) scale(0.98);
    clip-path: inset(10% 40% 30% 20%);
  }
  30% {
    transform: translate(8px, -4px) scale(1.03);
    clip-path: inset(35% 15% 20% 25%);
  }
  35% {
    transform: translate(-5px, 5px) scale(1.1);
    clip-path: inset(20% 30% 25% 15%);
  }
  40% {
    transform: translate(4px, -8px) scale(0.95);
    clip-path: inset(25% 35% 15% 30%);
  }
  45% {
    transform: translate(-8px, 4px) scale(1.07);
    clip-path: inset(10% 20% 35% 25%);
  }
  50% {
    transform: translate(0, 0) scale(1);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  55% {
    transform: translate(3px, -3px) scale(1.02);
    clip-path: inset(10% 10% 5% 15%);
  }
  60% {
    transform: translate(-3px, 3px) scale(0.98);
    clip-path: inset(5% 20% 10% 10%);
  }
  65% {
    transform: translate(4px, -4px) scale(1.01);
    clip-path: inset(10% 5% 10% 20%);
  }
  70% {
    transform: translate(-4px, 4px) scale(0.99);
    clip-path: inset(5% 10% 15% 5%);
  }
  75% {
    transform: translate(2px, -2px) scale(1);
    clip-path: inset(10% 10% 10% 10%);
  }
  80% {
    transform: translate(-2px, 2px) scale(1);
    clip-path: inset(5% 5% 5% 5%);
  }
  90% {
    transform: translate(0, 0) scale(1);
    clip-path: inset(0 0 0 0);
  }
  100% {
    transform: translate(0, 0) scale(1);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes glitchIn2 {
  0% {
    transform: none;
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  10% {
    transform: skew(5deg) translate(-5px, -2px);
    clip-path: inset(10% 0 85% 0);
    opacity: 0.8;
  }
  20% {
    transform: skew(-5deg) translate(5px, 2px);
    clip-path: inset(80% 0 10% 0);
    opacity: 0.6;
  }
  30% {
    transform: scale(1.02) skew(3deg);
    clip-path: inset(30% 0 50% 0);
    opacity: 1;
  }
  40% {
    transform: translate(10px, -10px);
    clip-path: inset(50% 0 20% 0);
    opacity: 0.7;
  }
  50% {
    transform: none;
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  60% {
    transform: skew(-3deg) scale(0.98);
    clip-path: inset(60% 0 30% 0);
    opacity: 0.9;
  }
  70% {
    transform: translate(-10px, 5px) skew(5deg);
    clip-path: inset(10% 0 80% 0);
    opacity: 0.6;
  }
  80% {
    transform: none;
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  90% {
    transform: translate(5px, -5px) skew(-2deg);
    clip-path: inset(20% 0 60% 0);
    opacity: 0.8;
  }
  100% {
    transform: none;
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes glitchOut {
  0% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  3% {
    clip-path: inset(5% 15% 10% 5%);
  }
  6% {
    clip-path: inset(25% 10% 5% 15%);
  }
  9% {
    clip-path: inset(15% 25% 20% 0);
  }
  12% {
    clip-path: inset(35% 5% 25% 20%);
  }
  15% {
    clip-path: inset(10% 30% 15% 10%);
  }
  18% {
    clip-path: inset(40% 10% 30% 15%);
  }
  21% {
    clip-path: inset(20% 5% 10% 35%);
  }
  24% {
    clip-path: inset(50% 15% 20% 0);
  }
  27% {
    clip-path: inset(15% 20% 15% 25%);
  }
  30% {
    clip-path: inset(45% 0 10% 10%);
  }
  33% {
    clip-path: inset(35% 10% 15% 30%);
  }
  36% {
    clip-path: inset(60% 25% 20% 5%);
  }
  39% {
    clip-path: inset(20% 10% 50% 10%);
  }
  42% {
    clip-path: inset(70% 15% 10% 20%);
  }
  45% {
    clip-path: inset(50% 30% 25% 0);
  }
  48% {
    clip-path: inset(30% 5% 40% 15%);
  }
  51% {
    clip-path: inset(85% 10% 5% 25%);
  }
  55% {
    clip-path: inset(20% 40% 20% 10%);
  }
  60% {
    clip-path: inset(75% 15% 15% 30%);
  }
  65% {
    clip-path: inset(10% 50% 10% 0);
  }
  70% {
    clip-path: inset(90% 10% 5% 10%);
  }
  75% {
    clip-path: inset(50% 0 45% 5%);
  }
  80% {
    clip-path: inset(95% 20% 5% 30%);
  }
  85% {
    clip-path: inset(60% 10% 30% 15%);
  }
  90% {
    clip-path: inset(90% 90% 90% 90%);
  }
  100% {
    clip-path: inset(100% 100% 100% 100%);
    opacity: 0;
  }
}
@keyframes staticShift {
  0% {
    background-position: 100px 100px;
  }
  10% {
    background-position: -80px 60px;
  }
  20% {
    background-position: 40px -70px;
  }
  30% {
    background-position: -100px -100px;
  }
  40% {
    background-position: 60px 30px;
  }
  50% {
    background-position: -50px -50px;
  }
  60% {
    background-position: 20px 80px;
  }
  70% {
    background-position: -30px -60px;
  }
  80% {
    background-position: 90px -40px;
  }
  90% {
    background-position: -70px 70px;
  }
  100% {
    background-position: -100px -100px;
  }
}
@keyframes linesMove {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: 1000px;
  }
}
@keyframes filterSaturationInputBox {
  0% {
    filter: saturate(1);
  }
  50% {
    filter: saturate(10);
  }
  100% {
    filter: saturate(1);
  }
}
@keyframes glitchReveal {
  0% {
    clip-path: inset(100% 0 0 0);
  }
  10% {
    clip-path: inset(80% 0 20% 0);
  }
  15% {
    clip-path: inset(60% 0 40% 0);
  }
  20% {
    clip-path: inset(85% 0 15% 0);
  }
  25% {
    clip-path: inset(50% 0 50% 0);
  }
  30% {
    clip-path: inset(100% 0 0 0);
  }
  40% {
    clip-path: inset(30% 0 70% 0);
  }
  50% {
    clip-path: inset(70% 0 30% 0);
  }
  60% {
    clip-path: inset(20% 0 80% 0);
  }
  70% {
    clip-path: inset(10% 0 90% 0);
  }
  80% {
    clip-path: inset(40% 0 60% 0);
  }
  90% {
    clip-path: inset(10% 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}