@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/83afe278b6a6bb3c-s.p.0q-301v4kxxnr.woff2") format("woff2");
}

:root {
  --sds-fs-primary: 16px;
  --sds-fw-regular: 400;
  --sds-fw-medium: 500;
  --sds-fw-semi-bold: 600;
  --sds-ff-base: "Inter", system-ui, sans-serif;
  --sds-ff-heading: "Inter", system-ui, sans-serif;
  --sds-anim-transition-default: cubic-bezier(0.65, 0.05, 0.36, 1) 100ms;
  --sds-clr-gray-01: #161616;
  --sds-clr-gray-02: #1c1c1c;
  --sds-clr-gray-03: #232323;
  --sds-clr-gray-04: #282828;
  --sds-clr-gray-06: #343434;
  --sds-clr-gray-07: #3e3e3e;
  --sds-clr-gray-09: #707070;
  --sds-clr-gray-11: #a0a0a0;
  --sds-clr-gray-12: #ededed;
  --sds-clr-lilac-06: #392c72;
  --sds-clr-lilac-09: #6e56cf;
  --sds-clr-lilac-10: #7c66dc;
  --sds-clr-red-06: #671e22;
  --sds-clr-red-11: #ff6369;
  --sds-clr-white: #ffffff;
  --sds-clr-base-00: #000000;
  --sds-overlay-01: rgba(255, 255, 255, 0.1);
  --sds-input-color-border-error: var(--sds-clr-red-06);
  --sds-input-box-shadow-color-error: #481a1d;
  --popup--width: 360px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--sds-clr-gray-01);
  color: var(--sds-clr-gray-12);
  font-family: var(--sds-ff-base);
  font-size: var(--sds-fs-primary);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
}

button,
input {
  font-family: inherit;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

.wallet-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sds-clr-gray-01);
}
.wallet-preloader.is-done {
  display: none;
}
.PageLoader {
  --Loader-size: 2rem;
}

.wallet-app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.screen {
  display: none;
  flex: 1;
  width: 100%;
  padding: 1.5rem;
}
.screen.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.Heading {
  font-family: var(--sds-ff-heading);
  font-weight: var(--sds-fw-regular);
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--sds-clr-gray-12);
}
.Heading--lg {
  font-size: 3rem;
  line-height: 3.5rem;
}
.Heading--xs {
  font-size: 1.5rem;
  line-height: 2rem;
}
.Heading--w-semi-bold {
  font-weight: var(--sds-fw-semi-bold);
}

.Text {
  margin: 0;
  font-weight: var(--sds-fw-regular);
}
.Text--md {
  font-size: 1rem;
  line-height: 1.5rem;
}
.Text--sm {
  font-size: 0.875rem;
  line-height: 1.375rem;
}

.Button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--sds-ff-base);
  font-weight: var(--sds-fw-semi-bold);
  border: 1px solid transparent;
  cursor: pointer;
  transition: color var(--sds-anim-transition-default),
    background-color var(--sds-anim-transition-default),
    border-color var(--sds-anim-transition-default);
}
.Button--lg {
  height: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
}
.Button--sm {
  height: 1.625rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}
.Button--rounded {
  border-radius: 999px !important;
}
.Button--full-width {
  width: 100%;
}
.Button--secondary {
  color: var(--sds-clr-base-00);
  background: var(--sds-clr-gray-12);
  border-color: var(--sds-clr-gray-12);
}
.Button--secondary:hover {
  background: #7e7e7e;
  border-color: #7e7e7e;
}
.Button--tertiary {
  color: var(--sds-clr-gray-12);
  background: var(--sds-clr-gray-01);
  border-color: var(--sds-clr-gray-06);
}
.Button--tertiary:hover {
  background: var(--sds-clr-gray-04);
}
.Button:disabled {
  cursor: not-allowed;
  color: var(--sds-clr-gray-09);
  background: var(--sds-clr-gray-03);
  border-color: var(--sds-clr-gray-06);
}
.Button__icon {
  display: flex;
  align-items: center;
  line-height: 0;
}
.Button__icon svg {
  display: block;
  width: 1em;
  height: 1em;
}
.Button .Loader {
  --Loader-size: 0.875rem;
  --Loader-color: currentColor;
}
.Button.is-loading .Button__label {
  opacity: 1;
}

.Card {
  width: 100%;
  background: var(--sds-clr-gray-01);
  border: 1px solid var(--sds-clr-gray-06);
  border-radius: 0.5rem;
  padding: 1.5rem;
}
.Card--primary {
  background: var(--sds-clr-gray-01);
}
.Card--secondary {
  background: var(--sds-clr-gray-03);
}
.Card .Card {
  margin: 0;
}

.Input {
  --Input-font-size: 0.75rem;
  --Input-line-height: 1.125rem;
  --Input-padding-vertical: 0.25rem;
  --Input-padding-horizontal: 0.625rem;
  --Input-border-radius: 0.25rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.Input--md {
  --Input-font-size: 0.875rem;
  --Input-line-height: 1.25rem;
  --Input-padding-vertical: 0.375rem;
  --Input-padding-horizontal: 0.75rem;
  --Input-border-radius: 0.375rem;
}
.Input__container {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--sds-clr-gray-01);
  border: 1px solid var(--sds-clr-gray-06);
  border-radius: var(--Input-border-radius);
  padding-left: var(--Input-padding-horizontal);
  padding-right: var(--Input-padding-horizontal);
}
.Input__container input {
  display: block;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--sds-clr-gray-12);
  font-size: var(--Input-font-size);
  line-height: var(--Input-line-height);
  padding-top: var(--Input-padding-vertical);
  padding-bottom: var(--Input-padding-vertical);
  outline: none;
}
.Input__container input::placeholder {
  color: var(--sds-clr-gray-11);
}
.Input__container:focus-within {
  border-color: var(--sds-clr-lilac-09);
}
.Input--error .Input__container {
  border-color: var(--sds-input-color-border-error);
}
.FieldNote {
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--sds-clr-gray-11);
}
.FieldNote--error {
  color: var(--sds-clr-red-11);
}

.Checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.Checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.Checkbox__box {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  border: 1px solid var(--sds-clr-gray-06);
  border-radius: 0.25rem;
  background: var(--sds-clr-gray-01);
  display: flex;
  align-items: center;
  justify-content: center;
}
.Checkbox input:checked + .Checkbox__box {
  background: var(--sds-clr-lilac-09);
  border-color: var(--sds-clr-lilac-09);
}
.Checkbox__box svg {
  display: none;
  width: 0.75rem;
  height: 0.75rem;
  stroke: #fff;
}
.Checkbox input:checked + .Checkbox__box svg {
  display: block;
}
.Checkbox__label {
  font-size: 0.75rem;
  line-height: 1.125rem;
  font-weight: var(--sds-fw-medium);
  color: var(--sds-clr-gray-11);
}
.Checkbox__label a {
  color: var(--sds-clr-gray-12);
  text-decoration: underline;
}

.Toggle {
  --Toggle-track-width: 1.75rem;
  --Toggle-track-height: 1rem;
  --Toggle-track-padding: 0.125rem;
  --Toggle-circle-size: 0.75rem;
  --Toggle-circle-offset: 0rem;
  display: flex;
  align-items: center;
}
.Toggle--md {
  --Toggle-track-width: 3rem;
  --Toggle-track-height: 1.625rem;
  --Toggle-circle-size: 1.375rem;
}
.Toggle__track {
  width: var(--Toggle-track-width);
  height: var(--Toggle-track-height);
  border-radius: 6.25rem;
  background-color: var(--sds-clr-gray-04);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.5s;
  padding: var(--Toggle-track-padding);
}
.Toggle__track__thumb {
  position: relative;
  width: var(--Toggle-circle-size);
  height: var(--Toggle-circle-size);
  border-radius: var(--Toggle-circle-size);
  background-color: var(--sds-clr-base-00);
  transition: transform 0.4s;
  transform: translateX(var(--Toggle-circle-offset));
  box-shadow: 0 0.0625rem 0.125rem 0.03125rem rgba(0, 0, 0, 0.08);
}
.Toggle__input {
  display: block;
  height: 0;
  width: 0;
}
.Toggle__input:checked ~ .Toggle__track {
  background-color: var(--sds-clr-lilac-09);
}
.Toggle--md .Toggle__input:checked ~ .Toggle__track .Toggle__track__thumb {
  --Toggle-circle-offset: 1.375rem;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.Loader {
  --Loader-color: var(--sds-clr-gray-11);
  --Loader-size: 1rem;
  position: relative;
  width: var(--Loader-size);
  height: var(--Loader-size);
  flex-shrink: 0;
}
.Loader div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: calc(var(--Loader-size) * 0.8);
  height: calc(var(--Loader-size) * 0.8);
  margin: calc(var(--Loader-size) * 0.1);
  border: calc(var(--Loader-size) * 0.1) solid var(--Loader-color);
  border-radius: 50%;
  animation: rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--Loader-color) transparent transparent transparent;
}
.Loader div:nth-child(1) { animation-delay: -0.45s; }
.Loader div:nth-child(2) { animation-delay: -0.3s; }
.Loader div:nth-child(3) { animation-delay: -0.15s; }

.Welcome__column {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.Welcome__centered-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.Welcome__centered-screen img {
  width: 44px;
  height: 48px;
  display: block;
}
.Welcome__heading {
  font-size: 2.5rem;
  line-height: 3rem !important;
  text-align: center;
  max-width: 30rem;
}
.Welcome__row-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.Welcome__row-screen .Button {
  width: 20rem;
  max-width: 100%;
}

.Onboarding {
  --Onboarding-layout-width: 28rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: var(--Onboarding-layout-width);
  max-width: 100%;
  color: var(--sds-clr-gray-12);
}
.Onboarding__card__wrapper {
  width: var(--Onboarding-layout-width);
  max-width: 100%;
}
.Onboarding__card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.Onboarding__card__text {
  color: var(--sds-clr-gray-11);
  margin-bottom: 2rem;
}
.Onboarding__card__text p {
  margin: 0 0 0.25rem;
}

.PasswordForm,
.RecoverAccount {
  width: 100%;
  max-width: 28rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.PasswordForm__subheading {
  color: var(--sds-clr-gray-11);
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  line-height: 1.375rem;
}
.PasswordForm__form-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.PasswordForm__tos {
  margin-top: 1rem;
}
.OnboardingButtons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1.5rem;
}
.OnboardingButtons .Button:last-child {
  min-width: 7rem;
}

.RecoverAccount {
  align-items: center;
  height: 100%;
}
.RecoverAccount .Card--secondary > .Card--primary {
  padding: 1.5rem;
}
.RecoverAccount__mnemonic-wrapper {
  overflow: auto;
  height: 15.375rem;
  scrollbar-width: thin;
}
.RecoverAccount__mnemonic-input {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem 1rem;
  padding: 0.1875rem 0.375rem;
  position: relative;
}
.RecoverAccount__phrase-input {
  position: relative;
  align-items: center;
  display: flex;
  gap: 0.5rem;
  width: 9.5625rem;
}
.RecoverAccount__phrase-input__number {
  color: var(--sds-clr-gray-11);
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-left: 0.625rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
.RecoverAccount__phrase-input .Input__container {
  padding-left: 1.875rem;
  padding-right: 0;
}
.RecoverAccount__phrase-input .Input__container input {
  width: 8.125rem;
}
.RecoverAccount__mnemonic-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.RecoverAccount__mnemonic-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.RecoverAccount__phrase-toggle {
  align-items: center;
  display: flex;
  font-size: 0.875rem;
  gap: 0.75rem;
  color: var(--sds-clr-gray-12);
}
.RecoverAccount__mnemonic__text-toggle {
  display: flex;
  align-items: center;
}
.RecoverAccount__mnemonic__text-toggle .Button {
  gap: 0.25rem;
}
.RecoverAccount .Toggle__input {
  display: block;
  height: 0;
  width: 0;
}
.RecoverAccount__import {
  margin-top: 1rem;
  width: 100%;
}
.RecoverAccount__error {
  color: var(--sds-clr-red-11);
  font-size: 0.75rem;
  text-align: center;
  min-height: 1.125rem;
}

@media (max-width: 420px) {
  .Welcome__row-screen .Button {
    width: 100%;
  }
  .Onboarding,
  .Onboarding__card__wrapper {
    width: 100%;
  }
}