@font-face {
  font-family: "TikTok Sans";
  src: url("../main-frame/assets/fonts/TikTokSans-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
}

.mx-signature-flow {
  --mx-signature-scale: min(1, calc(100vw / 1440));
  --mx-signature-top: 0px;
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 900px;
  pointer-events: none;
}

.mx-signature-flow::before,
.mx-signature-flow::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.035);
  content: "";
  pointer-events: none;
}

.mx-signature-flow::before {
  left: var(--mx-frame-side-gutter);
  transform: translateX(-50%);
}

.mx-signature-flow::after {
  right: var(--mx-frame-side-gutter);
  transform: translateX(50%);
}

.mx-signature-flow__state {
  position: absolute;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: scale(var(--mx-signature-scale));
  transform-origin: center center;
  transition: opacity 0ms linear;
}

.mx-signature-flow__state.is-active {
  opacity: 1;
  visibility: visible;
}

.mx-signature-flow__state--1 {
  top: calc(var(--mx-signature-top) + 382.194px);
  left: calc(50% - 70px);
  width: 140px;
  height: 93.333px;
}

.mx-signature-flow__state--1-image {
  display: block;
  width: 140px;
  height: 93.333px;
}

.mx-signature-flow__state--5 {
  top: calc(var(--mx-signature-top) + 360.567px);
  left: calc(50% - 122.839px);
  width: 244px;
  height: 147px;
}

.mx-signature-flow__state--5-image {
  display: block;
  width: 244px;
  height: 147px;
}

.mx-signature-flow__text,
.mx-signature-flow__text-fragment {
  width: auto;
  height: 97px;
  color: #000;
  font-family: "TikTok Sans", Arial, sans-serif;
  font-size: 81.203px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.mx-signature-flow__text--2 {
  top: calc(var(--mx-signature-top) + 385.138px);
  left: calc(50% - 49px);
}

.mx-signature-flow__text--3 {
  top: calc(var(--mx-signature-top) + 385px);
  left: calc(50% - 128px);
  font-variation-settings: "CTGR" 0, "wdth" 100;
}

.mx-signature-flow__text--4 {
  top: calc(var(--mx-signature-top) + 385px);
  left: calc(50% - 91px);
  font-family: "Tiny5", sans-serif;
  font-weight: 400;
}

.mx-signature-flow__text--6 {
  top: calc(var(--mx-signature-top) + 385px);
  left: calc(50% - 108px);
}

.mx-signature-flow__text--7 {
  top: calc(var(--mx-signature-top) + 355.239px);
  left: calc(50% - 90px);
  height: 157px;
  font-family: "Zen Loop", sans-serif;
  font-size: 131.101px;
  font-weight: 400;
}

.mx-signature-flow__text--8,
.mx-signature-flow__text--9m,
.mx-signature-flow__text--10,
.mx-signature-flow__text--11mxu {
  top: calc(var(--mx-signature-top) + 385px);
  left: calc(50% - 100px);
}

.mx-signature-flow__text--9inf {
  top: calc(var(--mx-signature-top) + 385px);
  left: calc(50% - 30px);
}

.mx-signature-flow__text--9dash {
  top: calc(var(--mx-signature-top) + 385px);
  left: calc(50% + 46px);
}

.mx-signature-flow__text--11lt {
  top: calc(var(--mx-signature-top) + 386px);
  left: calc(50% + 55px);
  font-weight: 400;
}

.mx-signature-flow__text--name-progress {
  top: calc(var(--mx-signature-top) + 385px);
  left: 50%;
  width: 542px;
  margin-left: -271px;
  font-family: "TikTok Sans", Arial, sans-serif;
  font-weight: 500;
  text-align: center;
}