* {
  box-sizing: border-box;
}

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.95), rgba(240, 244, 237, 0.88) 42%, #e8ede5 100%);
  color: #102326;
  font-family: system-ui, sans-serif;
  opacity: 1;
  transition: opacity 650ms ease;
}

body.page-leaving {
  opacity: 0;
}

button,
input {
  font: inherit;
}

.phone-shell {
  width: min(430px, 94vw, calc((100vh - 22px) * 0.6667));
  aspect-ratio: 2 / 3;
  padding: 10px;
  border-radius: 42px;
  background: linear-gradient(145deg, #222822, #0d100d);
  box-shadow:
    0 22px 54px rgba(35, 44, 33, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.template-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fffaf6;
  border-radius: 31px;
  animation: pageIn 420ms ease both;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.template-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

.splash-template {
  background: #fbf8f2;
}

.splash-hotspot {
  position: absolute;
  inset: 0;
  display: block;
}

.account-auth,
.account-close,
.account-auth button,
.account-auth input {
  position: absolute;
}

.account-close {
  left: 87.2%;
  top: 5.2%;
  width: 7%;
  height: 5%;
}

.account-auth {
  inset: 0;
  z-index: 2;
}

.account-auth input {
  left: 12.6%;
  width: 74.8%;
  height: 6.9%;
  border: 0;
  outline: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  opacity: 0;
}

.account-auth input:focus {
  outline: 0;
}

.account-email {
  top: 52.6%;
}

.account-password {
  top: 61.85%;
}

.account-auth button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.account-auth button:disabled {
  cursor: wait;
}

.auth-pending {
  cursor: wait;
}

.auth-pending .account-template {
  filter: saturate(0.96) brightness(0.98);
  transition: filter 180ms ease;
}

.account-eye {
  left: 75.4%;
  top: 62.7%;
  width: 7%;
  height: 4%;
  background: transparent;
}

.account-forgot {
  left: 66%;
  top: 69.3%;
  width: 18%;
  height: 3.2%;
}

.account-login {
  left: 16%;
  top: 72.8%;
  width: 68%;
  height: 5.6%;
}

.account-google {
  left: 16%;
  top: 82.7%;
  width: 68%;
  height: 4.8%;
}

.about-form,
.about-form button,
.about-field {
  position: absolute;
}

.about-form {
  inset: 0;
  z-index: 2;
}

.about-name,
.about-age,
.about-country,
.about-language {
  left: 23.6%;
  width: 55.7%;
  height: 4.4%;
}

.about-name {
  top: 52.9%;
}

.about-age {
  top: 60.7%;
}

.about-country {
  top: 68.4%;
}

.about-language {
  top: 76.1%;
}

.about-field {
  border: 0;
  outline: 0;
  border-radius: 9px;
  background: rgba(255, 253, 250, 0.985);
  color: #526550;
  caret-color: #55725a;
  font-size: clamp(13px, 2.25vmin, 17px);
  line-height: 1;
  padding: 0 8px;
}

.about-field::placeholder {
  color: rgba(93, 97, 92, 0.54);
}

.about-field:focus,
.about-field:not(:placeholder-shown) {
  background: rgba(255, 253, 250, 0.985);
}

.about-field:focus {
  box-shadow: none;
}

.about-age::-webkit-outer-spin-button,
.about-age::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.about-age {
  appearance: textfield;
}

.about-form button {
  border: 0;
  cursor: pointer;
  font-size: clamp(12px, 2.2vmin, 17px);
  font-weight: 750;
  background: transparent;
}

.about-continue {
  left: 18%;
  top: 85.3%;
  width: 64%;
  height: 5.5%;
}

.about-skip {
  left: 38%;
  top: 92.5%;
  width: 24%;
  height: 3.5%;
}

.experience-options,
.experience-options button {
  position: absolute;
}

.experience-options {
  inset: 0;
  z-index: 2;
}

.experience-options button {
  left: 17.2%;
  width: 65.6%;
  height: 6.15%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.experience-options button:nth-child(1) {
  top: 53.3%;
}

.experience-options button:nth-child(2) {
  top: 60.55%;
}

.experience-options button:nth-child(3) {
  top: 67.8%;
}

.experience-options button:nth-child(4) {
  top: 75.05%;
}

.experience-options button:nth-child(5) {
  top: 82.3%;
}

.experience-options button:nth-child(6) {
  top: 89.55%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}