* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #f9faf5;
}

body {
  display: block;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.frame340 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2843px;
  height: 1413px;
  background: #f9faf5;
  overflow: hidden;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  isolation: isolate;
}

.frame340 > :not(.mask-group) {
  z-index: 2;
}

.hello {
  position: absolute;
  width: 847px;
  height: 134px;
  left: 282px;
  top: 25px;
  font-family: "Patrick Hand SC", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 128px;
  line-height: 173px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000;
}

.made-by {
  position: absolute;
  width: 100%;
  height: 134px;
  left: 0;
  top: 1297px;
  font-family: "Patrick Hand SC", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
}

.brand {
  position: absolute;
  width: 287px;
  height: 134px;
  left: 562px;
  top: 256px;
  font-family: "Patrick Hand SC", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 128px;
  line-height: 173px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #000;
}

.mask-group {
  position: absolute;
  width: 3269px;
  height: 3269px;
  left: 1209px;
  top: -804px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.mask-group::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/static/landing/images/v1112_460.png");
  background-position: 581px 751px;
  background-repeat: no-repeat;
  background-size: 2703px 1519px;
  -webkit-mask-image: url("/static/img/animation_logo_AION.gif");
  mask-image: url("/static/img/animation_logo_AION.gif");
  -webkit-mask: url("/static/img/animation_logo_AION.gif") 0 0 / 3269px 3269px no-repeat;
  mask: url("/static/img/animation_logo_AION.gif") 0 0 / 3269px 3269px no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 3269px 3269px;
  mask-size: 3269px 3269px;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.mask-group__logo {
  position: absolute;
  width: 3269px;
  height: 3269px;
  left: 0;
  top: 0;
  object-fit: contain;
  display: none;
}

.mask-group__video {
  position: absolute;
  width: 2703px;
  height: 1519px;
  left: 581px;
  top: 751px;
  object-fit: cover;
  display: none;
}

.brand-logo {
  position: absolute;
  width: 141px;
  height: 141px;
  left: 453px;
  top: 256px;
  object-fit: contain;
  display: block;
}

.tagline {
  position: absolute;
  width: 847px;
  height: 65px;
  left: 282px;
  top: 397px;
  font-family: "Patrick Hand SC", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 64px;
  line-height: 87px;
  display: flex;
  align-items: center;
  text-align: center;
  color: rgba(0, 0, 0, 0.57);
}

.rectangle {
  position: absolute;
  background: #fbfbfb;
}

.landing-email-form {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.frame340 > .landing-email-form {
  z-index: 3;
}

.rectangle-597 {
  box-sizing: border-box;
  width: 94.02px;
  height: 134.94px;
  left: 1037px;
  top: 968px;
  background: #6b7747;
  border: 1px solid rgba(0, 0, 0, 0.59);
  border-radius: 0 0 46px 46px;
  transform: matrix(1, 0, 0.03, 1, 0, 0);
  cursor: pointer;
  z-index: 2;
}

.vector-1304 {
  position: absolute;
  width: 54.45px;
  height: 37.16px;
  left: 1058.44px;
  top: 1023.7px;
  transform: matrix(1, 0, 0.03, 1, 0, 0);
  z-index: 5;
}

.vector-1304 svg {
  width: 100%;
  height: 100%;
  display: block;
}

.vector-1304,
.icon-google,
.icon-yandex,
.google-text,
.yandex-text {
  pointer-events: none;
}

.rectangle-596 {
  box-sizing: border-box;
  width: 868px;
  height: 150px;
  left: 282px;
  top: 861px;
  border: 0.5px solid rgba(0, 0, 0, 0.59);
  border-radius: 35px;
  z-index: 0;
  pointer-events: none;
}

.rectangle-598 {
  width: 868px;
  height: 94px;
  left: 282px;
  top: 736px;
  border-radius: 35px;
}

.rectangle-599 {
  width: 868px;
  height: 94px;
  left: 282px;
  top: 632px;
  border-radius: 35px;
}

.email-placeholder {
  position: absolute;
  width: 720px;
  height: 150px;
  left: 325px;
  top: 861px;
  font-family: "Pridi", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 62px;
  display: flex;
  align-items: center;
  border: 0;
  outline: 0;
  background: transparent;
  z-index: 6;
  padding: 0;
  color: rgba(0, 0, 0, 0.18);
}

.email-placeholder::placeholder {
  color: rgba(0, 0, 0, 0.18);
}

.landing-email-form .email-placeholder {
  z-index: 20 !important;
}

.landing-email-form .rectangle-597 {
  z-index: 1 !important;
}

.auth-link,
.landing-email-form button {
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  pointer-events: auto;
}

.auth-link {
  z-index: 1;
  cursor: pointer;
}

.saved-account-card {
  position: absolute;
  width: var(--yandex-button-width, 868px);
  min-height: 92px;
  left: var(--yandex-button-left, 282px);
  top: calc(var(--yandex-button-top, 632px) - 112px);
  z-index: 6;
  display: none;
  align-items: center;
  gap: 22px;
  padding: 14px 28px;
  color: rgba(0, 0, 0, 0.72);
  background: rgba(251, 251, 251, 0.9);
  border: 0.5px solid rgba(0, 0, 0, 0.18);
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.saved-account-card.is-visible {
  display: flex;
}

.saved-account-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f8faf5;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0, 0, 0, 0.14);
  font-family: "Patrick Hand SC", cursive;
  font-size: 32px;
  line-height: 1;
  color: #6b7747;
}

.saved-account-avatar.has-image {
  color: transparent;
}

.saved-account-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.saved-account-label,
.saved-account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-account-label {
  font-family: "Pridi", serif;
  font-size: 24px;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.44);
}

.saved-account-name {
  font-family: "Patrick Hand", cursive;
  font-size: 38px;
  line-height: 1.08;
  color: #000;
}

.icon-google,
.icon-yandex {
  position: absolute;
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
}

.icon-google {
  left: 313px;
  top: 747px;
}

.icon-yandex {
  left: 313px;
  top: 643px;
}

.google-text,
.yandex-text {
  position: absolute;
  width: 439px;
  height: 37px;
  font-family: "Pridi", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 32px;
  line-height: 50px;
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.36);
}

.google-text {
  left: 410px;
  top: 765px;
}

.yandex-text {
  left: 410px;
  top: 661px;
}

.change-log-box {
  position: absolute;
  width: 556px;
  height: 269px;
  left: 1356px;
  top: 54px;
  background: rgba(217, 217, 217, 0.12);
  border-radius: 36px;
}

.change-log-title {
  position: absolute;
  width: 257px;
  height: 36px;
  left: 1505px;
  top: 67px;
  font-family: "Patrick Hand", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 64px;
  line-height: 87px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000;
}

.change-log-item {
  position: absolute;
  background: rgba(107, 119, 71, 0.51);
  border-radius: 22px;
}

.change-log-item-1 {
  width: 515px;
  height: 55px;
  left: 1379px;
  top: 142px;
}

.change-log-item-2 {
  width: 514px;
  height: 55px;
  left: 1377px;
  top: 210px;
}

.change-log-item-text {
  position: absolute;
  font-family: "Patrick Hand", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 54px;
  display: flex;
  align-items: center;
  color: #fff;
}

.change-log-item-text-1 {
  width: 474px;
  height: 37px;
  left: 1420px;
  top: 151px;
}

.change-log-item-text-2 {
  width: 473px;
  height: 37px;
  left: 1418px;
  top: 219px;
}

.frame340 {
  width: var(--stage-width, 2843px);
  height: var(--stage-height, 1413px);
}

.hello {
  width: var(--hello-width, 847px);
  height: var(--hello-height, 134px);
  left: var(--hello-left, 282px);
  top: var(--hello-top, 25px);
  font-size: var(--hello-font, 128px);
  line-height: var(--hello-line, 173px);
}

.made-by {
  width: var(--made-by-width, 2843px);
  height: var(--made-by-height, 134px);
  left: var(--made-by-left, 0px);
  top: var(--made-by-top, 1297px);
  font-size: var(--made-by-font, 48px);
  line-height: var(--made-by-line, 65px);
}

.brand {
  width: var(--brand-width, 287px);
  height: var(--brand-height, 134px);
  left: var(--brand-left, 562px);
  top: var(--brand-top, 256px);
  font-size: var(--brand-font, 128px);
  line-height: var(--brand-line, 173px);
}

.brand-logo {
  width: var(--brand-logo-width, 141px);
  height: var(--brand-logo-height, 141px);
  left: var(--brand-logo-left, 453px);
  top: var(--brand-logo-top, 256px);
}

.tagline {
  width: var(--tagline-width, 847px);
  height: var(--tagline-height, 65px);
  left: var(--tagline-left, 282px);
  top: var(--tagline-top, 397px);
  font-size: var(--tagline-font, 64px);
  line-height: var(--tagline-line, 87px);
}

.mask-group {
  width: var(--mask-width, 3269px);
  height: var(--mask-height, 3269px);
  left: var(--mask-left, 1209px);
  top: var(--mask-top, -804px);
}

.mask-group::before {
  background-position: var(--mask-bgX, 581px) var(--mask-bgY, 751px);
  background-size: var(--mask-bgW, 2703px) var(--mask-bgH, 1519px);
  -webkit-mask: url("/static/img/animation_logo_AION.gif") 0 0 / var(--mask-width, 3269px) var(--mask-height, 3269px) no-repeat;
  mask: url("/static/img/animation_logo_AION.gif") 0 0 / var(--mask-width, 3269px) var(--mask-height, 3269px) no-repeat;
  -webkit-mask-size: var(--mask-width, 3269px) var(--mask-height, 3269px);
  mask-size: var(--mask-width, 3269px) var(--mask-height, 3269px);
}

.rectangle-599 {
  width: var(--yandex-button-width, 868px);
  height: var(--yandex-button-height, 94px);
  left: var(--yandex-button-left, 282px);
  top: var(--yandex-button-top, 632px);
  border-radius: var(--yandex-button-radius, 35px);
}

.rectangle-598 {
  width: var(--google-button-width, 868px);
  height: var(--google-button-height, 94px);
  left: var(--google-button-left, 282px);
  top: var(--google-button-top, 736px);
  border-radius: var(--google-button-radius, 35px);
}

.icon-yandex {
  width: var(--yandex-icon-width, 72px);
  height: var(--yandex-icon-height, 72px);
  left: var(--yandex-icon-left, 313px);
  top: var(--yandex-icon-top, 643px);
}

.icon-google {
  width: var(--google-icon-width, 72px);
  height: var(--google-icon-height, 72px);
  left: var(--google-icon-left, 313px);
  top: var(--google-icon-top, 747px);
}

.yandex-text {
  width: var(--yandex-text-width, 439px);
  height: var(--yandex-text-height, 37px);
  left: var(--yandex-text-left, 410px);
  top: var(--yandex-text-top, 661px);
  font-size: var(--yandex-text-font, 32px);
  line-height: var(--yandex-text-line, 50px);
}

.google-text {
  width: var(--google-text-width, 439px);
  height: var(--google-text-height, 37px);
  left: var(--google-text-left, 410px);
  top: var(--google-text-top, 765px);
  font-size: var(--google-text-font, 32px);
  line-height: var(--google-text-line, 50px);
}

.rectangle-596 {
  width: var(--email-box-width, 868px);
  height: var(--email-box-height, 150px);
  left: var(--email-box-left, 282px);
  top: var(--email-box-top, 861px);
  border-radius: var(--email-box-radius, 35px);
}

.rectangle-597 {
  width: var(--send-button-width, 94.02px);
  height: var(--send-button-height, 134.94px);
  left: var(--send-button-left, 1037px);
  top: var(--send-button-top, 968px);
}

.vector-1304 {
  width: var(--arrow-width, 54.45px);
  height: var(--arrow-height, 37.16px);
  left: var(--arrow-left, 1058.44px);
  top: var(--arrow-top, 1023.7px);
}

.email-placeholder {
  width: var(--email-text-width, 781px);
  height: var(--email-box-height, 150px);
  left: var(--email-text-left, 325px);
  top: var(--email-box-top, 861px);
  font-size: var(--email-text-font, 40px);
  line-height: var(--email-text-line, 62px);
}

.change-log-box {
  width: var(--change-box-width, 556px);
  height: var(--change-box-height, 269px);
  left: var(--change-box-left, 1356px);
  top: var(--change-box-top, 54px);
  border: var(--change-box-border, 0px) solid #000;
  border-radius: var(--change-box-radius, 36px);
}

.change-log-title {
  width: var(--change-title-width, 257px);
  height: var(--change-title-height, 36px);
  left: var(--change-title-left, 1505px);
  top: var(--change-title-top, 67px);
  font-size: var(--change-title-font, 64px);
  line-height: var(--change-title-line, 87px);
}

.change-log-list {
  --change-list-offset: clamp(88px, calc(var(--change-box-height, 269px) * 0.267), 215px);
  --change-list-bottom: clamp(20px, calc(var(--change-box-height, 269px) * 0.05), 40px);

  position: absolute;
  width: calc(var(--change-box-width, 556px) - 46px);
  height: calc(var(--change-box-height, 269px) - var(--change-list-offset) - var(--change-list-bottom));
  left: calc(var(--change-box-left, 1356px) + 23px);
  top: calc(var(--change-box-top, 54px) + var(--change-list-offset));
  display: flex;
  flex-direction: column;
  gap: max(13px, calc(var(--change-box-height, 269px) * 0.022));
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 14px 0 0;
  scrollbar-color: rgba(107, 119, 71, 0.72) rgba(217, 217, 217, 0.28);
  scrollbar-width: thin;
}

.change-log-list::-webkit-scrollbar {
  width: 18px;
}

.change-log-list::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.28);
  border-radius: 999px;
}

.change-log-list::-webkit-scrollbar-thumb {
  background: rgba(107, 119, 71, 0.72);
  border: 4px solid rgba(217, 217, 217, 0.28);
  border-radius: 999px;
}

.change-log-link {
  flex: 0 0 auto;
  min-height: clamp(55px, calc(var(--change-box-height, 269px) * 0.205), 165px);
  padding: 0 clamp(22px, calc(var(--change-box-width, 556px) * 0.074), 80px);
  background: rgba(107, 119, 71, 0.51);
  border-radius: clamp(22px, calc(var(--change-box-width, 556px) * 0.057), 62px);
  font-family: "Patrick Hand", cursive;
  font-size: clamp(40px, calc(var(--change-box-width, 556px) * 0.059), 64px);
  font-weight: 400;
  line-height: 1.25;
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
}

.change-log-link:hover {
  background: rgba(107, 119, 71, 0.66);
}

.change-log-item-1 {
  width: var(--change-item-1-width, 515px);
  height: var(--change-item-1-height, 55px);
  left: var(--change-item-1-left, 1379px);
  top: var(--change-item-1-top, 142px);
  border-radius: var(--change-item-1-radius, 22px);
}

.change-log-item-2 {
  width: var(--change-item-2-width, 514px);
  height: var(--change-item-2-height, 55px);
  left: var(--change-item-2-left, 1377px);
  top: var(--change-item-2-top, 210px);
  border-radius: var(--change-item-2-radius, 22px);
}

.change-log-item-text-1 {
  width: var(--change-text-1-width, 474px);
  height: var(--change-text-1-height, 37px);
  left: var(--change-text-1-left, 1420px);
  top: var(--change-text-1-top, 151px);
  font-size: var(--change-text-1-font, 40px);
  line-height: var(--change-text-1-line, 54px);
}

.change-log-item-text-2 {
  width: var(--change-text-2-width, 473px);
  height: var(--change-text-2-height, 37px);
  left: var(--change-text-2-left, 1418px);
  top: var(--change-text-2-top, 219px);
  font-size: var(--change-text-2-font, 40px);
  line-height: var(--change-text-2-line, 54px);
}

.landing-email-form .rectangle-596 {
  z-index: 30 !important;
  pointer-events: none;
}

.landing-email-form .rectangle-597 {
  z-index: 10 !important;
}

.landing-email-form .email-placeholder {
  z-index: 40 !important;
  pointer-events: auto;
}

.landing-email-form .vector-1304 {
  z-index: 50 !important;
}

@media (prefers-color-scheme: dark) {
  html,
  body,
  .frame340 {
    background: #252624;
  }

  .hello,
  .brand,
  .change-log-title {
    color: #c2c0b6;
  }

  .made-by,
  .tagline {
    color: rgba(194, 192, 182, 0.42);
  }

  .rectangle {
    background: #2f302e;
  }

  .rectangle-596 {
    border-color: rgba(194, 192, 182, 0.28);
  }

  .rectangle-597 {
    background: #6b7747;
    border-color: rgba(194, 192, 182, 0.2);
  }

  .email-placeholder {
    color: rgba(194, 192, 182, 0.72);
  }

  .email-placeholder::placeholder {
    color: rgba(194, 192, 182, 0.44);
  }

  .google-text,
  .yandex-text {
    color: rgba(194, 192, 182, 0.52);
  }

  .change-log-box {
    background: rgba(194, 192, 182, 0.08);
    border-color: rgba(194, 192, 182, 0.22);
  }

  .saved-account-card {
    color: rgba(194, 192, 182, 0.72);
    background: rgba(47, 48, 46, 0.9);
    border-color: rgba(194, 192, 182, 0.18);
  }

  .saved-account-avatar {
    background-color: #252624;
    border-color: rgba(194, 192, 182, 0.18);
  }

  .saved-account-label {
    color: rgba(194, 192, 182, 0.5);
  }

  .saved-account-name {
    color: #c2c0b6;
  }
}