@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/roboto-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/roboto-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/roboto-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("../assets/fonts/noto-sc-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("../assets/fonts/noto-sc-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("../assets/fonts/roboto-mono-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --device-w: 434px;
  --device-h: 743px;
  --purple: #743a94;
  --purple-btn: #703c91;
  --purple-label: #6b3c8c;
  --gold: #f2aa3c;
  --ink: #232326;
  --muted: #6e6e75;
  --line: #e2e2e8;
  --blue: #2f5ba8;
}

* { box-sizing: border-box; }

html {
  height: 100%;
  background: #fff;
  /* 固定浅色配色，避免浏览器深色模式/自动深色把页面边缘反色成黑边 */
  color-scheme: light;
}

body {
  margin: 0;
  min-height: 100vh;
  height: 100dvh;
  padding: 24px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ink);
  font-family: "Roboto", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 2px solid #8b5bb0;
  outline-offset: 2px;
}

.pi {
  position: relative;
  display: inline-block;
  width: 1em;
  height: .88em;
  flex: 0 0 auto;
  color: inherit;
}
.pi > i {
  position: absolute;
  display: block;
  background: currentColor;
  border-radius: .05em;
}
.pi > i:nth-child(1) {
  left: .02em;
  right: .02em;
  top: .30em;
  height: .115em;
}
.pi > i:nth-child(1)::before,
.pi > i:nth-child(1)::after {
  content: "";
  position: absolute;
  width: .115em;
  height: .31em;
  background: currentColor;
  border-radius: .05em;
}
.pi > i:nth-child(1)::before { left: 0; top: 0; }
.pi > i:nth-child(1)::after { right: 0; top: -.16em; }
.pi > i:nth-child(2),
.pi > i:nth-child(3) {
  top: .415em;
  width: .115em;
  height: .465em;
  border-radius: .03em;
}
.pi > i:nth-child(2) { left: .34em; }
.pi > i:nth-child(3) { left: .57em; }
.pi > i:nth-child(2)::before,
.pi > i:nth-child(3)::before {
  content: "";
  position: absolute;
  left: .005em;
  top: -.27em;
  width: .105em;
  height: .115em;
  border-radius: .02em;
  background: currentColor;
}

.pi-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 134px;
  height: 134px;
  flex: 0 0 auto;
  border: 9px solid #f4af4d;
  border-radius: 50%;
  background: #fff;
  color: #f4af4d;
}
.pi-logo .pi {
  width: 72px;
  height: 71px;
  font-size: 72px;
}

.pi-logo .pi > i:nth-child(1) {
  left: 11px;
  right: 11px;
  top: 15px;
  height: 12px;
  border-radius: 2px;
}
.pi-logo .pi > i:nth-child(1)::before {
  left: -11px;
  top: 0;
  width: 11px;
  height: 19px;
  border-radius: 2px 0 7px 7px;
}
.pi-logo .pi > i:nth-child(1)::after {
  right: -11px;
  top: -6px;
  width: 11px;
  height: 17px;
  border-radius: 7px 7px 0 2px;
}

.pi-logo .pi > i:nth-child(2),
.pi-logo .pi > i:nth-child(3) {
  top: 27px;
  width: 11px;
  height: 44px;
  border-radius: 2px;
}
.pi-logo .pi > i:nth-child(2) { left: 20px; }
.pi-logo .pi > i:nth-child(3) { left: 41px; }

.pi-logo .pi > i:nth-child(2)::before,
.pi-logo .pi > i:nth-child(3)::before {
  left: 0;
  top: -27px;
  width: 11px;
  height: 10px;
  border-radius: 2.5px;
}

.coin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  border: .095em solid currentColor;
  border-radius: 50%;
  color: inherit;
  flex: 0 0 auto;
}
.coin .pi { font-size: .64em; }

.chev {
  position: relative;
  display: block;
  width: 1em;
  height: 1em;
  font-size: 12px;
  color: inherit;
  flex: 0 0 auto;
}
.chev::before {
  content: "";
  position: absolute;
  left: .12em;
  top: .02em;
  width: .58em;
  height: .58em;
  border-right: .18em solid currentColor;
  border-bottom: .18em solid currentColor;
  border-radius: 0 0 .04em 0;
}
.chev--down::before { transform: rotate(45deg); }
.chev--right::before { transform: rotate(-45deg); }

.ar-back {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
  color: inherit;
  flex: 0 0 auto;
}
.ar-back::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  border-radius: 2px;
}
.ar-back::after {
  content: "";
  position: absolute;
  left: .5px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: translateY(-50%) rotate(45deg);
}

.xmark {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  color: inherit;
}
.xmark::before,
.xmark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 1.7px;
  background: currentColor;
  border-radius: 2px;
}
.xmark::before { transform: translate(-50%, -50%) rotate(45deg); }
.xmark::after { transform: translate(-50%, -50%) rotate(-45deg); }

.help-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1.6px solid #5f5f5f;
  border-radius: 50%;
  color: #3a3a3d;
  font-size: 21px;
  line-height: 1;
  font-weight: 500;
}
.help-dot::before {
  content: "?";
  transform: translateY(.5px);
}

.wallet-glyph {
  position: relative;
  display: block;
  width: 1em;
  height: .9em;
  font-size: 28px;
  color: inherit;
  flex: 0 0 auto;
}
.wallet-glyph::before {
  content: "";
  position: absolute;
  left: 0;
  top: .01em;
  width: .90em;
  height: .87em;
  border: .078em solid currentColor;
  border-radius: .16em;
}
.wallet-glyph::after {
  content: "";
  position: absolute;
  left: .10em;
  top: .175em;
  width: .53em;
  height: .08em;
  background: currentColor;
  border-radius: .04em;
}
.wallet-glyph > .pi {
  position: absolute;
  left: .17em;
  top: .335em;
  font-size: .40em;
}
.wallet-glyph > b {
  position: absolute;
  right: -.01em;
  top: .40em;
  width: .31em;
  height: .31em;
  border: .09em solid currentColor;
  border-radius: 50%;
}

.idglyph {
  position: relative;
  display: block;
  width: 1em;
  height: .88em;
  font-size: 31px;
  color: inherit;
  flex: 0 0 auto;
}
.idglyph::before {
  content: "";
  position: absolute;
  left: 0;
  top: .02em;
  width: .93em;
  height: .74em;
  border: .07em solid currentColor;
  border-radius: .10em;
}
.idglyph .id-ava {
  position: absolute;
  left: .10em;
  top: .17em;
  width: .15em;
  height: .15em;
  border-radius: 50%;
  background: currentColor;
}
.idglyph .id-ava::after {
  content: "";
  position: absolute;
  left: -.045em;
  top: .175em;
  width: .24em;
  height: .16em;
  border-radius: .12em .12em 0 0;
  background: currentColor;
}
.idglyph .id-lines {
  position: absolute;
  left: .32em;
  top: .19em;
  width: .35em;
  height: .055em;
  border-radius: .03em;
  background: currentColor;
  box-shadow: 0 .115em 0 0 currentColor, 0 .23em 0 0 currentColor;
}
.idglyph .id-badge {
  position: absolute;
  right: -.02em;
  bottom: -.02em;
  width: .36em;
  height: .36em;
  border: .07em solid currentColor;
  border-radius: 50%;
  background: #713d92;
  display: flex;
  align-items: center;
  justify-content: center;
}
.idglyph .id-badge .pi { font-size: .19em; position: relative; top: .015em; }

.kyc-hero .idglyph .id-badge { background: var(--purple); }

.house-glyph {
  position: relative;
  display: block;
  width: 1.08em;
  height: 1.105em;
  font-size: 36px;
  color: inherit;
  flex: 0 0 auto;
}
.house-glyph::before {
  content: "";
  position: absolute;
  left: 14.6%;
  top: 15.5%;
  width: 70.7%;
  height: 69%;
  border-top: .09em solid currentColor;
  border-left: .09em solid currentColor;
  border-radius: .02em;
  transform: rotate(45deg);
}
.house-glyph::after {
  content: "";
  position: absolute;
  left: 9.8%;
  bottom: 0;
  width: 78%;
  height: 50%;
  border-left: .09em solid currentColor;
  border-right: .09em solid currentColor;
  border-bottom: .09em solid currentColor;
  border-radius: 0 0 .055em .055em;
}
.house-glyph > .pi {
  position: absolute;
  left: 50%;
  top: 34.3%;
  width: 1.16em;
  height: 1.3em;
  margin-left: -.58em;
  font-size: .40em;
}

.house-glyph > .pi::before,
.house-glyph > .pi::after {
  content: "";
  position: absolute;
  top: .37em;
  width: .46em;
  height: .17em;
  background: currentColor;
  border-radius: .05em;
}
.house-glyph > .pi::before { left: -.74em; }
.house-glyph > .pi::after { left: 1.40em; }

.house-glyph > .pi > i:nth-child(1) {
  left: 0;
  right: 0;
  top: .40em;
  height: .20em;
  border-radius: .06em;
}
.house-glyph > .pi > i:nth-child(1)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: .16em;
  height: .30em;
  background: currentColor;
  border-radius: .06em;
}
.house-glyph > .pi > i:nth-child(1)::after {
  content: "";
  position: absolute;
  right: 0;
  top: -.07em;
  width: .16em;
  height: .27em;
  background: currentColor;
  border-radius: .06em;
}
.house-glyph > .pi > i:nth-child(2),
.house-glyph > .pi > i:nth-child(3) {
  top: .63em;
  width: .17em;
  height: .69em;
  border-radius: .06em;
}
.house-glyph > .pi > i:nth-child(2) { left: .35em; }
.house-glyph > .pi > i:nth-child(3) { left: .68em; }
.house-glyph > .pi > i:nth-child(2)::before,
.house-glyph > .pi > i:nth-child(3)::before {
  content: "";
  position: absolute;
  left: 0;
  top: -.49em;
  width: .18em;
  height: .17em;
  border-radius: .05em;
  background: currentColor;
}

.share-glyph {
  position: relative;
  display: block;
  width: 30px;
  height: 25px;
  color: inherit;
  background: currentColor;
  clip-path: polygon(
    1.2px 23.5px, 0.9px 21px, 1.2px 18.5px, 2.1px 16.2px, 3.2px 14.2px,
    4.6px 12.2px, 6.3px 10.2px, 8.4px 8.5px, 10.8px 7px, 13.3px 5.5px,
    15.6px 4.2px, 16.1px 2.4px, 16.5px 0.2px, 19.4px 2px, 22.2px 4.2px,
    25px 6.6px, 27.2px 8.6px, 28.4px 10.2px, 28.8px 11.4px,
    26.2px 13.2px, 23.6px 15.1px, 21px 17px, 18.6px 19.4px,
    16.7px 20.4px, 16.3px 18.9px, 16.1px 16.8px, 15.9px 15.2px,
    14.8px 16.2px, 13.4px 17.4px, 11.5px 18.2px, 9px 18.8px, 6.8px 19.5px,
    5px 20.6px, 3.5px 21.6px
  );
}
.share-glyph i { display: none; }
.share-glyph .sh-head {
  display: block;
  position: absolute;
  left: 8.35px;
  top: 14.8px;
  width: 8.5px;
  height: 2.2px;
  border-radius: 1.1px;
  background: currentColor;
  transform: rotate(-27deg);
  z-index: 1;
}
.share-glyph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f6f6f6;
  clip-path: polygon(
    5.2px 20.4px, 5.6px 16.8px, 6.6px 14.6px, 7.8px 12.6px, 9.4px 10.5px,
    11.4px 8.7px, 13.7px 7.1px, 16px 5.6px, 18px 4.2px, 19.3px 2.8px,
    21.6px 5.8px, 23.7px 8px, 25.1px 9.5px, 25.9px 10.4px,
    24px 12.4px, 22px 14.1px, 20.2px 15.3px, 18.2px 14.8px,
    16.4px 15.8px, 14.8px 17px, 12.8px 17.8px, 10.4px 18.2px, 8px 18.8px,
    6.2px 19.6px
  );
}

.device {
  position: relative;
  width: var(--device-w);
  height: var(--device-h);
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 0;
  background: #fff;
  transform-origin: center center;
}

.app {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-size: 15px;
  -webkit-user-select: none;
  user-select: none;
}

.passphrase,
.phone-input,
.picker__input {
  -webkit-user-select: text;
  user-select: text;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.screen.is-active { display: flex; }

@keyframes screen-in-forward {
  from { transform: translateX(26%); }
  to   { transform: none; }
}
@keyframes screen-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.app:not(.is-booting)[data-nav-dir="forward"] .screen.is-active {
  animation: screen-in-forward .3s cubic-bezier(.24, .72, .3, 1) both;
}
.app:not(.is-booting)[data-nav-dir="fade"] .screen.is-active {
  animation: screen-fade .18s ease both;
}

.screen.is-leaving {
  display: flex;
  pointer-events: none;
}

@keyframes screen-out-forward {
  from { transform: none; }
  to   { transform: translateX(-16%); }
}
@keyframes screen-out-back {
  from { transform: none; }
  to   { transform: translateX(100%); }
}
@keyframes screen-out-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.app:not(.is-booting)[data-nav-dir="forward"] .screen.is-leaving {
  animation: screen-out-forward .3s cubic-bezier(.24, .72, .3, 1) both;
}
.app:not(.is-booting)[data-nav-dir="back"] .screen.is-leaving {
  animation: screen-out-back .26s cubic-bezier(.24, .72, .3, 1) both;
}
.app:not(.is-booting)[data-nav-dir="fade"] .screen.is-leaving {
  animation: screen-out-fade .18s ease both;
}

.body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.body::-webkit-scrollbar { width: 0; height: 0; }

.icon-20 { width: 20px; height: 20px; display: block; }
.icon-18 { width: 18px; height: 18px; display: block; }

.appbar--image {
  position: relative;
  flex: 0 0 56px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  background: #713d92;
  z-index: 6;
}

.appbar--home { box-shadow: 0 1px 0 #713d92; }
.appbar--kyc { box-shadow: 0 1px 2px rgba(44, 20, 62, .28); }
.appbar--wallet { box-shadow: 0 1px 2px rgba(44, 20, 62, .22); }

.appbar__back {
  position: absolute;
  left: 19px;
  top: calc(50% - 4.5px);
  transform: translateY(-50%);
  color: #fff;
  z-index: 3;
  pointer-events: none;
}

.appbar__chev {
  position: absolute;
  right: 20px;
  top: calc(50% - 4.5px);
  transform: translateY(-50%);
  font-size: 15px;
  color: #fff;
  z-index: 3;
  pointer-events: none;
}

.appbar__center {
  position: absolute;
  left: 50%;
  top: calc(50% - 4.5px);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

.appbar--home .appbar__center { gap: 15px; left: calc(50% + 3px); }
.appbar--home .appbar__coin { position: relative; top: -1.5px; }

.appbar__title {
  font-size: 17.4px;
  line-height: 21px;
  font-weight: 500;
  letter-spacing: .25px;
  color: #fff;
}

.appbar__coin { font-size: 25px; color: #c68a76; border-width: 2px; }
.appbar__coin .pi { width: 15px; height: 15px; font-size: 15px; }
.appbar__coin .pi > i:nth-child(1) { left: 1px; right: 1px; top: 4px; height: 3.2px; border-radius: 1.4px; }
.appbar__coin .pi > i:nth-child(1)::before { display: none; }
.appbar__coin .pi > i:nth-child(1)::after { right: 0; top: -3px; width: 2.2px; height: 6.2px; border-radius: 1.1px; }
.appbar__coin .pi > i:nth-child(2),
.appbar__coin .pi > i:nth-child(3) { top: 6.5px; width: 3px; height: 7px; border-radius: 1.2px; }
.appbar__coin .pi > i:nth-child(2) { left: 4px; }
.appbar__coin .pi > i:nth-child(3) { left: 8px; }
.appbar__coin .pi > i:nth-child(2)::before,
.appbar__coin .pi > i:nth-child(3)::before { left: 0; top: -5.5px; width: 3px; height: 2.6px; border-radius: 1.1px; }
.appbar__badge { display: flex; align-items: center; color: #e0a15c; }
.appbar__badge .wallet-glyph { font-size: 30px; }
.appbar__badge .idglyph { font-size: 31px; }

.appbar__hit {
  position: absolute;
  top: 0;
  width: 56px;
  height: 56px;
  background: transparent;
  z-index: 2;
}
.appbar__hit--start { left: 0; }
.appbar__hit--end { right: 0; }
.appbar__hit:active { background: rgba(255, 255, 255, .10); }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 8px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.2;
  transition: transform .12s ease, background-color .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.985); }
.btn[disabled] {
  pointer-events: none;
  opacity: .82;
}

.btn--primary {
  background: var(--purple-btn);
  color: #fff;
}
.btn--primary:active { background: #633481; }

.btn--outline {
  background: #fff;
  color: var(--purple);
  border: 1.5px solid #d5c6df;
}

.page-title {
  margin: 0;
  text-align: center;
  font-size: 29px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #161619;
}

.page-sub {
  margin: 4px auto 0;
  max-width: 390px;
  text-align: center;
  font-size: 15px;
  line-height: 26px;
  font-weight: 400;
  color: #3f3f45;
}

.login {
  height: 100%;
  padding: 67px 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  overflow-y: auto;
}

.login__logo {
  width: 134px;
  height: 134px;
  display: flex;
  flex: 0 0 auto;
}

.login__title {
  margin: 30px 0 0;
  text-align: center;
  font-size: 30px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: .1px;
  color: #38383b;
  transform: translateY(1px);
}

.login__easy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  left: 2px;
}

.help-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 35px;
  vertical-align: middle;
  border-radius: 50%;
  transform: translateY(4px);
}
.help-inline .help-dot { font-size: 21px; }

.help-inline--small {
  width: 33px;
  height: 33px;
  transform: none;
}
.help-inline--small .help-dot { font-size: 19px; border-width: 1.5px; }

.login__verify {
  margin: 84px 0 0;
  transform: translate(1px, 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 33px;
  font-size: 17.5px;
  line-height: 22px;
  font-weight: 400;
  color: #424246;
  text-align: center;
}
.login__verify > span { transform: translateY(2px); }

.login__actions {
  width: 100%;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 29px;
  flex: 0 0 auto;
}

.login__btn {
  height: 58px;
  border: 1px solid #343438;
  border-radius: 6px;
  background: #fff;
  color: #111114;
  font-size: 23.2px;
  font-weight: 500;
  padding-top: 5px;
}
.login__btn:active { background: #f5f5f7; }

.login__btn[disabled] {
  background: #f1f1f3;
  border-color: #dcdce1;
  color: #a6a6ac;
  opacity: 1;
  cursor: default;
}

.login__footer {
  width: 100%;
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

.login__version {
  font-size: 15.7px;
  line-height: 16px;
  color: #adadb1;
  transform: translate(1px, -1px);
}

.login__links {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  line-height: 19px;
  color: #2f5ba8;
}
.login__links button {
  color: #2f5ba8;
  font-size: 17px;
  line-height: 19px;
}
.login__dash { color: #9a9a9e; }

.body--home {
  background: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
}

.wallet-banner {
  width: calc(100% - 40px);
  height: 46px;
  margin: 37px auto 0;
  padding: 0 8px 0 13px;
  border: 1.5px solid var(--purple);
  border-radius: 10px;
  background: #fff;
  display: none;
  align-items: center;
  gap: 4px;
  text-align: left;
  flex: 0 0 auto;
}
.wallet-banner:active { background: #faf7fc; }

.screen[data-route="home"].sheet-open .wallet-banner { display: flex; }

.wallet-banner__ic {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #6b3a8c;
}
.wallet-banner__ic .wallet-glyph { font-size: 36px; }

.wallet-banner > span:nth-child(2) {
  flex: 1;
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: .18px;
  color: #1f1f22;
  white-space: nowrap;
}

.wallet-banner__chev {
  font-size: 20px;
  color: #47474d;
  flex: 0 0 auto;
}

.home-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, 84px);
  justify-content: space-between;
  align-content: space-between;
  row-gap: 31px;
  padding: 30px max(20px, calc((100% - 342px) / 2)) 40px max(20px, calc((100% - 346px) / 2));
}

.tile {
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: transparent;
  padding: 0;
}

.tile__img {
  position: relative;
  width: 84px;
  height: 84px;
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #8a8093, 0 1.5px 2.5px rgba(86, 66, 100, .07);
  transition: transform .12s ease;
  transform-origin: 50% 50%;
}
.tile:active .tile__img { transform: scale(.96); }

.tile:nth-child(-n+3) .tile__img { translate: 0 2px; }
.tile:nth-child(n+7):nth-child(-n+9) .tile__img { translate: 0 -1px; }
.tile:nth-child(n+10) .tile__img { translate: 0 -2px; }

.tile__label {
  font-size: 16.3px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: .4px;
  color: #6c6176;
  white-space: nowrap;
  text-align: center;
}

.tabbar {
  flex: 0 0 83px;
  height: 83px;
  border-top: 1px solid #ececf0;
  background: #fff;
  display: flex;
  align-items: stretch;
  padding: 0;
  z-index: 4;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
  color: #3c3c40;
  transition: opacity .12s ease;
}
.tab:active { opacity: .62; }

.tab__icon {
  height: 30px;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab__icon > span { transform: translateY(3px); }
.tab > span:last-child { transform: translate(1px, 1px); }
.tab:last-child .tab__icon > span { transform: translate(-1px, 3px); }
.tab--active { color: #62407c; font-weight: 500; }

.tab-house {
  position: relative;
  display: block;
  width: 18px;
  height: 22px;
}
.tab-house::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #63357f;
  clip-path: polygon(50% 0, 100% 36%, 100% 100%, 0 100%, 0 36%);
}
.tab-house > i {
  position: absolute;
  left: 6.5px;
  top: 9px;
  width: 5px;
  height: 5.5px;
  background: #fff;
  border-radius: .5px;
  clip-path: polygon(0 0, 100% 0, 100% 24%, 64% 24%, 64% 100%, 42% 100%, 42% 24%, 24% 24%, 24% 100%, 0 100%);
}

.tab-apps {
  position: relative;
  display: block;
  width: 21px;
  height: 21px;
  color: #454547;
}
.tab-apps > i {
  position: absolute;
  width: 9.4px;
  height: 9.4px;
  border: 1.8px solid currentColor;
  border-radius: 1.6px;
}
.tab-apps > i:nth-child(1) { left: 0; top: 0; }
.tab-apps > i:nth-child(2) { left: 0; bottom: 0; }
.tab-apps > i:nth-child(3) { right: 0; bottom: 0; }
.tab-apps > b {
  position: absolute;
  right: 0;
  top: 0;
  width: 9.4px;
  height: 9.4px;
}
.tab-apps > b::before,
.tab-apps > b::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.tab-apps > b::before { left: 50%; top: 50%; width: 9.4px; height: 1.9px; transform: translate(-50%, -50%); }
.tab-apps > b::after { top: 50%; left: 50%; height: 9.4px; width: 1.9px; transform: translate(-50%, -50%); }

.tab-serv {
  position: relative;
  display: block;
  width: 21px;
  height: 21px;
  color: #333335;
}
.tab-serv > i {
  position: absolute;
  left: 2px;
  width: 17px;
  height: 2.4px;
  background: currentColor;
  border-radius: 1.2px;
}
.tab-serv > i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6.5px;
  height: 6.5px;
  border-top: 2.4px solid currentColor;
  border-right: 2.4px solid currentColor;
  border-radius: 1px;
}
.tab-serv > i:nth-child(1) { top: 3.5px; left: 2px; }
.tab-serv > i:nth-child(1)::after { right: -2.5px; transform: translateY(-50%) rotate(45deg); }
.tab-serv > i:nth-child(2) { top: 13px; left: 6px; }
.tab-serv > i:nth-child(2)::after { left: -2.5px; transform: translateY(-50%) rotate(-135deg); }

.sheet {
  position: absolute;
  inset: 56px 0 0 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3px 37px 0 40px;
  background: rgba(0, 0, 0, .52);
}
.sheet.is-open { display: flex; }

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes sheet-up {
  from { transform: translateY(28px); opacity: .55; }
  to   { transform: none; opacity: 1; }
}
@keyframes sheet-down {
  from { transform: none; opacity: 1; }
  to   { transform: translateY(20px); opacity: 0; }
}

.sheet.is-open { animation: fade-in .2s ease both; }
.sheet.is-open .sheet__card { animation: sheet-up .28s cubic-bezier(.22, .8, .3, 1) both; }
.sheet.is-closing { animation: fade-out .16s ease both; }
.sheet.is-closing .sheet__card { animation: sheet-down .16s ease both; }

.sheet__card {
  position: relative;
  width: 100%;
  max-width: 357px;
  min-height: 497px;
  padding: 78px 24px 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sheet__close {
  position: absolute;
  top: 26px;
  right: 24px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #56565b;
  border-radius: 50%;
}
.sheet__close:active { background: #f3f1f5; }

.sheet__icon {
  width: 109px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 34px;
  transform: translateY(3px);
  color: #6f408e;
}
.sheet__icon .wallet-glyph {
  font-size: 109px;
  width: 1em;
  height: .88em;
}

.sheet__icon .wallet-glyph::before {
  left: 0;
  top: 0;
  width: .872em;
  height: .752em;
  border: .064em solid currentColor;
  border-radius: .16em;
}

.sheet__icon .wallet-glyph::after {
  left: .156em;
  top: .138em;
  width: .82em;
  height: .064em;
  border-radius: .034em;
}

.sheet__icon .wallet-glyph > b {
  right: 0;
  top: .312em;
  width: .358em;
  height: .358em;
  border: .102em solid currentColor;
}

.sheet__icon .wallet-glyph > .pi {
  left: 19px;
  top: 33px;
  width: 39px;
  height: 39px;
  font-size: 39px;
}

.sheet__icon .wallet-glyph > .pi > i:nth-child(1) {
  left: 3px;
  right: 2px;
  top: 8px;
  height: 7px;
  border-radius: 1.5px;
}
.sheet__icon .wallet-glyph > .pi > i:nth-child(1)::before {
  left: -3px;
  top: 0;
  width: 6px;
  height: 13px;
  border-radius: 1.5px;
}
.sheet__icon .wallet-glyph > .pi > i:nth-child(1)::after {
  right: -1px;
  top: -4px;
  width: 6px;
  height: 12px;
  border-radius: 1.5px;
}

.sheet__icon .wallet-glyph > .pi > i:nth-child(2),
.sheet__icon .wallet-glyph > .pi > i:nth-child(3) {
  top: 15px;
  width: 6px;
  height: 24px;
  border-radius: 1.5px;
}
.sheet__icon .wallet-glyph > .pi > i:nth-child(2) { left: 11px; }
.sheet__icon .wallet-glyph > .pi > i:nth-child(3) { left: 21px; }

.sheet__icon .wallet-glyph > .pi > i:nth-child(2)::before,
.sheet__icon .wallet-glyph > .pi > i:nth-child(3)::before {
  left: .5px;
  top: -15px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
}

.sheet__close .xmark { width: 17px; height: 17px; }
.sheet__close .xmark::before,
.sheet__close .xmark::after { width: 16.5px; height: 1.7px; }

.sheet__title {
  margin: 0;
  text-align: center;
  font-size: 30.7px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: .55px;
  color: #202024;
  transform: translate(2px, 3px);
}

.sheet__text {
  margin: 27px auto 0;
  max-width: 300px;
  text-align: center;
  font-size: 17.5px;
  line-height: 25px;
  font-weight: 400;
  color: #2e2e32;
  transform: translateY(0);
}

.sheet__btn {
  height: 55px;
  padding-top: 4px;
  font-size: 17.5px;
  font-weight: 500;
  border-radius: 9px;
  flex: 0 0 auto;
}
.sheet__card .btn--primary { margin-top: 36px; }
.sheet__btn + .sheet__btn { margin-top: 14px; }

.wallet-create {
  padding: 21px 20px 40px;
  text-align: center;
  background: #fff;
}

.wallet-create .page-title,
.unlock .page-title {
  color: #18181b;
}

.wallet-create .page-title { letter-spacing: 1px; transform: translate(2px, 1px); }

.wallet-create .page-sub {
  max-width: 394px;
  margin-top: 8px;
  font-size: 17.5px;
  line-height: 25px;
}

.illo-wallet {
  position: relative;
  display: block;
  width: 117px;
  height: 146px;
  margin: 9px auto 0;
  transform: translateX(-1px);
}

.wallet-create__actions {
  margin-top: 23px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(1px, 1px);
}

.wallet-create__actions .btn {
  height: 56px;
  border-radius: 9px;
  font-size: 18px;
  font-weight: 500;
}

.link-btn {
  margin-top: 19px;
  padding: 2px 8px;
  font-size: 21.2px;
  line-height: 26px;
  font-weight: 500;
  color: #1d1bc6;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.unlock {
  padding: 21px 37px 30px 39px;
  background: #fff;
}

.unlock .page-title {
  margin-bottom: 36px;
}

.passphrase {
  display: block;
  width: 100%;
  height: 285px;
  padding: 20px 32px;
  border: 1px solid #cfcfd6;
  border-radius: 17px;
  background: #fff;
  color: #2e2e32;
  font-family: "Roboto Mono", "Courier New", monospace;
  font-size: 22.5px;
  line-height: 22px;
  font-weight: 400;
  resize: none;
  outline: none;
}
.passphrase::placeholder { color: #c3c3c8; opacity: 1; }
.passphrase:focus { border-color: #9e7bb6; }

@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.passphrase.is-error {
  border-color: #c0453b;
  box-shadow: 0 0 0 3px rgba(192, 69, 59, .10);
  animation: field-shake .22s ease;
}
.passphrase.is-error:focus-visible { outline: none; }

.unlock__primary {
  height: 55px;
  margin-top: 40px;
  padding-top: 3px;
  border-radius: 9px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .1px;
}

.unlock__disabled {
  height: 56px;
  margin-top: 19px;
  border-radius: 9px;
  border: 1px solid #bdbdc2;
  background: #fff;
  color: #b8b8bc;
  font-size: 18px;
  font-weight: 500;
  cursor: default;
}
.unlock__disabled[disabled] { opacity: 1; }
.unlock__disabled:active { transform: none; }

.legal {
  margin: 40px 0 0;
  font-size: 20.4px;
  line-height: 29px;
  font-weight: 400;
  color: #3f3f45;
  text-align: left;
}

.legal--unlock {
  /* 韩文说明比原英文长，按内容撑开，避免被固定高度裁掉 */
  height: auto;
  overflow: visible;
}

.register {
  padding: 23px 20px 0;
  background: #fff;
}

.register__logo {
  display: flex;
  width: 135px;
  height: 135px;
  margin: 23px auto 0;
  transform: translateY(-2px);
}
.register__logo .pi { font-size: 79px; }

.register__title-row {
  margin: 29px 0 53px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transform: translate(1px, -2px);
}

.register__title-row h1 {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: .9px;
  color: #1d1d20;
  white-space: nowrap;
  transform: translateY(-1px);
}

.help-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.help-btn .help-dot { font-size: 20px; }

.field-label {
  display: block;
  margin: 0 0 10px 0;
  font-size: 18px;
  line-height: 20px;
  font-weight: 500;
  color: #242427;
  position: relative;
  top: -1px;
}

.select {
  width: 100%;
  height: 47px;
  margin: 0 0 33px;
  padding: 0 0 0 12px;
  border: 1px solid #cfcfd4;
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 400;
  color: #232326;
  text-align: left;
}

.select__tail {
  width: 48px;
  height: 100%;
  margin-left: auto;
  border-left: 1px solid #d9d9dd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.select__divider { display: none; }
.select__chev { font-size: 18px; color: #c2c2c7; }

.select__value {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.select:focus-visible {
  outline: none;
  border-color: #9e7bb6;
  box-shadow: 0 0 0 2px rgba(158, 123, 182, .22);
}

.select + .field-label { margin-bottom: 10px; }

.phone-row {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 0;
  background: #fff;
  display: flex;
  align-items: stretch;
  overflow: visible;
}

.phone-prefix {
  flex: 0 0 auto;
  min-width: 33px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0;
  margin-right: 10px;
  white-space: nowrap;
  font-size: 20px;
  line-height: 48px;
  color: #232326;
}
.phone-prefix.has-raster-prefix {
  color: transparent;
  background: transparent url("../assets/img/register-prefix.png") 0 18px / 24px 15px no-repeat;
}

.phone-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  border: 1px solid #cfcfd4;
  border-radius: 4px;
  outline: 0;
  padding: 0 12px;
  background: #fff;
  font-family: inherit;
  font-size: 17px;
  color: #232326;
}
.phone-input.is-error {
  border-color: #c0453b;
  box-shadow: 0 0 0 3px rgba(192, 69, 59, .10);
  animation: field-shake .22s ease;
}
.phone-input.is-error:focus-visible { outline: none; }

.register__submit {
  height: 56px;
  margin-top: 48px;
  padding-top: 4px;
  border-radius: 8px;
  font-size: 17.5px;
  font-weight: 500;
}

.legal--register {
  margin: 54px 0 0;
  padding: 0;
  font-size: 17.5px;
  line-height: 26px;
  color: #3f3f45;
}

.body--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding-top: 6px;
  background: #fff;
  overflow: hidden;
}

.loader {
  position: relative;
  width: 78px;
  height: 78px;
  display: block;
  animation: pi-spin 1s linear infinite;
}
.loader::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    #f7f1fa 0deg,
    #e9dcf0 45deg,
    #d6c0e3 95deg,
    #bb98d0 145deg,
    #9c6bbb 195deg,
    #7d42a3 245deg,
    #652490 290deg,
    #551573 320deg,
    #4b0e5f 335deg,
    rgba(75, 14, 95, 0) 335deg,
    rgba(75, 14, 95, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 17px), #000 calc(100% - 16px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 17px), #000 calc(100% - 16px));
}
.loader > i {
  position: absolute;
  left: 42px;
  top: 62px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #4b0e5f;
}

.loading-text {
  margin: 0;
  font-size: 21px;
  line-height: 24px;
  font-weight: 400;
  color: #3b2544;
  transform: translateY(5px);
}

@keyframes pi-spin {
  to { transform: rotate(360deg); }
}

.kyc-hero {
  position: relative;
  flex: 0 0 180px;
  height: 180px;
  overflow: hidden;
  background: #fff;
}

.kyc-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 136px;
  background: var(--purple);
}

.kyc-hero__bulge {
  position: absolute;
  left: 0;
  top: 88px;
  width: 100%;
  height: 92px;
  border-radius: 50%;
  background: var(--purple);
}

.kyc-hero__bar {
  position: relative;
  z-index: 3;
  height: 56px;
  flex: 0 0 56px;
  background: transparent;
  box-shadow: none;
}

.kyc-hero__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 51px;
  margin: 0;
  z-index: 2;
  text-align: center;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 27px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-indent: 3px;
  color: #f2b05e;
}

.kyc-hero__sub {
  position: absolute;
  left: 0;
  right: 0;
  top: 114px;
  margin: 0;
  z-index: 2;
  text-align: center;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 14.5px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: .8px;
  color: #ecdcef;
}

.kyc-hero__deco {
  position: absolute;
  left: -11px;
  top: 92px;
  width: 34px;
  height: 38px;
  border: 2px solid rgba(231, 211, 240, .34);
  border-radius: 6px;
  transform: rotate(7deg);
  z-index: 2;
}
.kyc-hero__deco::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(231, 211, 240, .40);
}

.kyc-hit {
  position: absolute;
  top: 0;
  width: 56px;
  height: 56px;
  background: transparent;
  z-index: 4;
}
.kyc-hit--start { left: 0; }
.kyc-hit--end { right: 0; }
.kyc-hit:active { background: rgba(255, 255, 255, .10); }

.body--needs {
  padding: 71px 20px 40px;
  background: #fff;
  text-align: center;
}

.illo-id {
  position: relative;
  width: 242px;
  height: 176px;
  display: block;
  margin: 0 auto;
  transform: translateY(0);
  background: #ead8f3;
  border-radius: 3px;
}

.needs-title {
  margin: 61px 0 0;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 28px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #111114;
  -webkit-text-stroke: .45px #111114;
  transform: translateX(2.5px);
}

.needs-text {
  margin: 34px auto 0;
  max-width: 360px;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 16.8px;
  line-height: 25px;
  font-weight: 400;
  color: #26262a;
  transform: translateX(1.5px);
}

.needs-btn {
  height: 50px;
  margin-top: 144px;
  border-radius: 9px;
  font-size: 17px;
}

.screen--dim { background: #4c4c4c; }

.body--dim {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: #4c4c4c;
  overflow: hidden;
}

.dim-card {
  width: 100%;
  min-height: 404px;
  padding: 19px 24px 0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .26);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(0);
}

.dim-card h2 {
  width: 100%;
  margin: 0;
  font-size: 22.5px;
  line-height: 27px;
  letter-spacing: .25px;
  font-weight: 700;
  color: #1f1f22;
  transform: translateY(2px);
}

.dim-card p {
  width: 100%;
  margin: 22px 0 0;
  font-size: 22.5px;
  line-height: 27.3px;
  letter-spacing: .2px;
  font-weight: 700;
  color: #1f1f22;
  transform: translateY(5px);
}

.dim-card .dim-card__note {
  margin-top: 23px;
  max-width: 380px;
  font-size: 17px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
  color: #707074;
  transform: translateY(7px);
}

.dim-card .btn {
  position: relative;
  top: 1px;
}

.btn--compact {
  width: 203px;
  height: 60px;
  margin-top: 33px;
  border-radius: 6px;
  background: #561a70;
  font-size: 18px;
  font-weight: 500;
  flex: 0 0 auto;
}

.screen--browser { background: #fff; }

.browser-bar {
  position: relative;
  flex: 0 0 57px;
  height: 57px;
  overflow: hidden;
  background: var(--purple);
  box-shadow: 0 1px 0 rgba(112, 61, 146, .75), 0 2px 0 rgba(112, 61, 146, .22);
  z-index: 6;
}

.browser-back {
  position: absolute;
  left: 26px;
  top: 22.5px;
  width: 18px;
  transform: translateY(-50%);
  color: #fff;
  z-index: 3;
  pointer-events: none;
}
.browser-back::before {
  height: 1.7px;
  margin-top: -.85px;
  border-radius: 1px;
}
.browser-back::after {
  left: .4px;
  width: 10px;
  height: 10px;
  border-left: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  border-radius: .5px;
}

.browser-url {
  position: absolute;
  left: 84px;
  top: 7px;
  width: 264px;
  height: 33px;
  padding: 0 5px 0 12px;
  border-radius: 16.5px;
  background: #fbfafb;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
  pointer-events: none;
}

.browser-url__coin {
  font-size: 21px;
  color: #d9bb90;
  border-width: 1.5px;
}
.browser-url__coin .pi {
  position: absolute;
  left: 3.4px;
  top: 4.8px;
  width: 12px;
  height: 11.5px;
  font-size: 0;
}
.browser-url__coin .pi > i:nth-child(1) {
  left: .4px;
  right: 0;
  top: 2.9px;
  height: 1.5px;
  border-radius: .75px;
}
.browser-url__coin .pi > i:nth-child(1)::before {
  left: 0;
  top: 0;
  width: 1.2px;
  height: 2.6px;
  border-radius: .6px;
}
.browser-url__coin .pi > i:nth-child(1)::after {
  right: 0;
  top: -.7px;
  width: 1.2px;
  height: 2.4px;
  border-radius: .6px;
}
.browser-url__coin .pi > i:nth-child(2),
.browser-url__coin .pi > i:nth-child(3) {
  top: 4.2px;
  width: 1.4px;
  height: 5.6px;
  border-radius: .7px;
}
.browser-url__coin .pi > i:nth-child(2) { left: 2.9px; }
.browser-url__coin .pi > i:nth-child(3) { left: 6.5px; }
.browser-url__coin .pi > i:nth-child(2)::before,
.browser-url__coin .pi > i:nth-child(3)::before {
  left: 0;
  top: -2.5px;
  width: 1.4px;
  height: 1.4px;
  border-radius: .45px;
}

.browser-url__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16.5px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: .1px;
  color: #232326;
  white-space: nowrap;
}

.browser-reload {
  position: relative;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  margin-right: 2px;
}
.browser-reload::before,
.browser-reload::after {
  content: "";
  position: absolute;
  inset: 1.3px;
  border: 2.1px solid #cecdd3;
  border-radius: 50%;
}
.browser-reload::before { clip-path: inset(0 0 46% 0); }
.browser-reload::after { clip-path: inset(56% 0 0 0); }
.browser-reload i {
  position: absolute;
  width: 6px;
  height: 7.5px;
  background: #cecdd3;
}
.browser-reload i:first-child {
  left: 1px;
  top: 3.5px;
  clip-path: polygon(0 32%, 100% 0, 88% 100%);
  transform: rotate(-14deg);
}
.browser-reload i:last-child {
  right: .5px;
  bottom: 1.5px;
  clip-path: polygon(100% 48%, 0 0, 12% 100%);
  transform: rotate(-6deg);
}

.browser-cancel {
  position: absolute;
  right: 9px;
  top: 23px;
  transform: translateY(-50%);
  color: #f7eff8;
  font-size: 16.5px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: .2px;
  z-index: 3;
  pointer-events: none;
}

.browser-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, .92);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 7;
}

@keyframes browser-load {
  0%   { transform: scaleX(0); opacity: 1; }
  55%  { transform: scaleX(.62); opacity: 1; }
  85%  { transform: scaleX(.94); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

.screen--browser.is-reloading .browser-progress {
  animation: browser-load .8s cubic-bezier(.3, .6, .3, 1) both;
}

.browser-hit {
  position: absolute;
  top: 0;
  height: 100%;
  background: transparent;
  z-index: 2;
}
.browser-hit:active { background: rgba(255, 255, 255, .09); }
.browser-hit--back { left: 0; width: 12.903%; }
.browser-hit--cancel { right: 0; width: 15.668%; }
.browser-hit--reload {
  top: 14.035%;
  left: 69.2%;
  width: 9%;
  height: 71.93%;
  border-radius: 21px;
}

.browser-body {
  padding: 14px 20px 0;
  background: #fff;
}

.browser-sec { width: 100%; }

.sec-head {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sec-head h2 {
  margin: 0;
  font-size: 24.6px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: .45px;
  color: #202023;
  transform: translate(-.3px, 1.2px);
}

.browser-body > .browser-sec:nth-child(2) .sec-head h2 {
  font-size: 24.2px;
  color: #1e1e21;
}

.browser-body > .browser-sec:nth-child(2) .sec-head { transform: translateY(-8px); }

.sec-link {
  margin-right: 16px;
  padding: 0 0 0 10px;
  height: 30px;
  display: flex;
  align-items: center;
  color: #3d62a4;
  font-size: 15.2px;
  line-height: 18px;
  font-weight: 500;
  transition: color .15s ease, opacity .15s ease;
}
.sec-link.is-disabled {
  color: #b6b6bb;
  pointer-events: none;
}

.url-tile-wrap {
  margin-top: 20px;
  padding-left: 7px;
}

.url-tile {
  width: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.url-tile__img {
  position: relative;
  width: 87px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 19px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #e4e2e9, 0 2px 7px rgba(86, 66, 100, .11);
  color: #6b4d85;
  translate: 0 1px;
  transition: transform .12s ease;
}
.url-tile:active .url-tile__img { transform: scale(.96); }
.url-tile__img .house-glyph { font-size: 38px; transform: translateY(2px); }

.url-tile__label {
  font-size: 14.8px;
  line-height: 18px;
  font-weight: 400;
  color: #2e2e32;
  text-shadow: 0 0 .6px rgba(40, 40, 44, .45);
}

@keyframes url-tile-out {
  to { opacity: 0; transform: scale(.9); }
}

.url-tile-wrap.is-clearing .url-tile {
  animation: url-tile-out .16s ease both;
}
.url-tile-wrap.is-cleared .url-tile { display: none; }

.url-empty {
  display: none;
  margin: 16px 0 0;
  padding-left: 6px;
  font-size: 14.5px;
  line-height: 20px;
  color: #8a8a90;
}
.url-tile-wrap.is-cleared .url-empty { display: block; }

.browser-sec + .browser-sec { margin-top: 18px; }

.more-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, 82px);
  column-gap: 16px;
  row-gap: 18px;
  justify-content: center;
}

.more-tile {
  width: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}

.more-tile__img {
  position: relative;
  width: 82px;
  height: 82px;
  display: block;
  overflow: hidden;
  border-radius: 17px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #e8e6ee, 0 2px 6px rgba(86, 66, 100, .10);
  transition: transform .12s ease;
}
.more-tile:active .more-tile__img { transform: scale(.96); }
.more-tile:nth-child(4n+1) .more-tile__img,
.more-tile:nth-child(4n+2) .more-tile__img,
.more-tile:nth-child(4n+3) .more-tile__img { translate: -2px 1.5px; }
.more-tile:nth-child(4n) .more-tile__img { translate: -1px 1.5px; }

.more-tile > span:last-child {
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
  color: #2e2e32;
  white-space: nowrap;
  transform: translateY(-.4px);
}

.browser-foot {
  flex: 0 0 139px;
  height: 139px;
  padding: 0 0 24px;
  border-top: 0;
  background: #f6f6f6;
  box-shadow: 0 -6px 10px rgba(70, 60, 82, .05);
  display: flex;
  align-items: stretch;
  z-index: 4;
}

.foot-btn {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #242428;
  font-size: 15px;
  line-height: 18px;
  font-weight: 500;
  transition: opacity .12s ease;
}
.foot-btn:active { opacity: .62; }
.foot-ico { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.foot-ico--home {
  width: 35px;
  height: 34px;
  color: #756485;
  transform: translate(2px, 0);
}
.foot-ico--home .house-glyph { font-size: 22.5px; transform: translate(-1.3px, -3.8px); }
.foot-ico--share {
  width: 39px;
  height: 34px;
  color: #212124;
}
.foot-ico--share .share-glyph { transform: translate(.5px, -3.5px); }
.foot-btn > span:last-child { display: block; transform: translateY(2px); }
.foot-btn--share { color: #2e2e30; }
.foot-btn--share > span:last-child { transform: translate(-2px, 12px); }
.foot-btn--active { color: #645178; }

.screen--browser .more-tile__img .ti { color: #6c4b87; }
.screen--browser .more-tile__img .ti--appstudio { transform: translate(-50%, -50%) scale(1); }
.screen--browser .as-coin {
  border-width: 2.2px;
  border-color: #5c5365;
}
.screen--browser .as-coin .pi {
  left: 2.1px;
  top: 3.6px;
  width: 11px;
  height: 10px;
}
.screen--browser .as-coin .pi > i:nth-child(1) {
  left: 0;
  right: 0;
  top: 0;
  height: 2.2px;
  border-radius: 1.1px;
}
.screen--browser .as-coin .pi > i:nth-child(2),
.screen--browser .as-coin .pi > i:nth-child(3) {
  top: 2.5px;
  width: 2.4px;
  height: 6.4px;
  border-radius: 1.15px;
}
.screen--browser .as-coin .pi > i:nth-child(2) { left: 2.5px; }
.screen--browser .as-coin .pi > i:nth-child(3) { left: 6.2px; }
.screen--browser .as-coin .pi > i:nth-child(2)::before,
.screen--browser .as-coin .pi > i:nth-child(3)::before {
  content: "";
  position: absolute;
  left: .1px;
  top: -3.1px;
  width: 2.2px;
  height: 2px;
  border-radius: .9px;
  background: currentColor;
}
.screen--browser::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #201f28;
  z-index: 90;
  pointer-events: none;
}

.picker {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: none;
  background: rgba(0, 0, 0, .44);
}

.picker.is-open {
  display: flex;
  align-items: flex-end;
  animation: fade-in .18s ease both;
}

.picker__sheet {
  width: 100%;
  height: 74%;
  background: #fff;
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sheet-up .26s cubic-bezier(.22, .8, .3, 1) both;
}

.picker.is-closing { animation: fade-out .16s ease both; pointer-events: none; }
.picker.is-closing .picker__sheet { animation: sheet-down .16s ease both; }

.picker__head {
  position: relative;
  flex: 0 0 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ececf0;
}

.picker__title {
  margin: 0;
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  color: #202024;
}

.picker__close {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #3a3a3f;
}
.picker__close:active { background: #f3f1f5; }
.picker__close .xmark { width: 16px; height: 16px; }
.picker__close .xmark::before,
.picker__close .xmark::after { width: 14px; height: 1.6px; }

.picker__search {
  flex: 0 0 auto;
  padding: 10px 16px;
}

.picker__input {
  width: 100%;
  height: 38px;
  border: 1px solid #dcdce2;
  border-radius: 9px;
  background: #f6f6f8;
  padding: 0 12px;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  color: #232326;
}
.picker__input:focus { border-color: #9e7bb6; background: #fff; }
.picker__input:focus-visible { outline: none; }
.picker__input::placeholder { color: #9a9aa0; }

.picker__list {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 0 16px;
  scrollbar-width: thin;
}

.picker__item {
  width: 100%;
  height: 48px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-size: 15.5px;
  line-height: 20px;
  color: #232326;
}
.picker__item:active { background: #f7f4fa; }

.picker__name { flex: 1 1 auto; min-width: 0; }

.picker__dial {
  flex: 0 0 auto;
  font-size: 14.5px;
  color: #8a8a90;
}

.picker__check {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--purple);
  opacity: 0;
}
.picker__check::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 9px;
  height: 5px;
  border-left: 2.1px solid currentColor;
  border-bottom: 2.1px solid currentColor;
  border-radius: 0 0 0 1px;
  transform: rotate(-45deg);
}

.picker__item.is-selected .picker__name { color: var(--purple-label); font-weight: 500; }
.picker__item.is-selected .picker__check { opacity: 1; }

.picker__empty {
  display: none;
  padding: 26px 0 6px;
  text-align: center;
  font-size: 14.5px;
  color: #8a8a90;
}
.picker__empty.is-visible { display: block; }

.toast {
  position: absolute;
  left: 50%;
  bottom: 100px;
  z-index: 90;
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 18px;
  background: rgba(29, 27, 34, .93);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ti {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  color: #6a3a87;
}

.ti--fireside { width: 84px; height: 84px; }
.ti--fireside .fl {
  position: absolute;
  left: 24px;
  top: 16px;
  width: 38px;
  height: 54px;
  background: currentColor;
  clip-path: path("M18.2 0.7 C18.37 0.88 18.87 1.38 19.2 1.8 C19.53 2.22 19.87 2.73 20.2 3.2 C20.53 3.67 20.9 4.13 21.2 4.6 C21.5 5.07 21.56 5.5 22 6 C22.44 6.5 23.36 7.07 23.85 7.6 C24.34 8.13 24.62 8.65 24.95 9.2 C25.28 9.75 25.57 10.33 25.85 10.9 C26.13 11.47 26.42 12.05 26.65 12.6 C26.88 13.15 27.1 13.7 27.25 14.2 C27.4 14.7 27.48 14.97 27.55 15.6 C27.62 16.23 27.63 17.1 27.65 18 C27.67 18.9 27.65 20 27.65 21 C27.65 22 27.62 23.08 27.65 24 C27.68 24.92 27.68 25.77 27.85 26.5 C28.02 27.23 28.46 27.93 28.65 28.4 C28.84 28.87 28.94 29.15 29 29.3 C29.17 29.17 29.65 28.82 30 28.5 C30.35 28.18 30.77 27.77 31.1 27.4 C31.43 27.03 31.77 26.67 32 26.3 C32.23 25.93 32.3 25.58 32.5 25.2 C32.7 24.82 33 24.38 33.2 24 C33.4 23.62 33.62 23.08 33.7 22.9 C33.77 22.98 33.98 23.12 34.1 23.4 C34.22 23.68 34.3 24.22 34.4 24.6 C34.5 24.98 34.52 25.32 34.7 25.7 C34.88 26.08 35.33 26.45 35.5 26.9 C35.67 27.35 35.67 27.72 35.7 28.4 C35.73 29.08 35.7 30.07 35.7 31 C35.7 31.93 35.72 33 35.7 34 C35.68 35 35.65 36.08 35.6 37 C35.55 37.92 35.57 38.58 35.4 39.5 C35.23 40.42 34.83 41.83 34.6 42.5 C34.37 43.17 34.17 43.17 34 43.5 C33.83 43.83 33.77 44.17 33.6 44.5 C33.43 44.83 33.17 45.17 33 45.5 C32.83 45.83 32.8 46.17 32.6 46.5 C32.4 46.83 32.13 47.17 31.8 47.5 C31.47 47.83 30.97 48.17 30.6 48.5 C30.23 48.83 30.07 49.17 29.6 49.5 C29.13 49.83 28.47 50.17 27.8 50.5 C27.13 50.83 26.3 51.17 25.6 51.5 C24.9 51.83 24.72 52.18 23.6 52.5 C22.48 52.82 20.53 53.4 18.9 53.4 C17.27 53.4 14.98 52.82 13.8 52.5 C12.62 52.18 12.63 51.83 11.8 51.5 C10.97 51.17 9.63 50.83 8.8 50.5 C7.97 50.17 7.3 49.83 6.8 49.5 C6.3 49.17 6.12 48.83 5.8 48.5 C5.48 48.17 5.22 47.83 4.9 47.5 C4.58 47.17 4.23 46.83 3.9 46.5 C3.57 46.17 3.07 45.83 2.9 45.5 C2.73 45.17 3.03 44.83 2.9 44.5 C2.77 44.17 2.42 43.83 2.1 43.5 C1.78 43.17 1.18 42.83 1 42.5 C0.82 42.17 1.17 41.83 1 41.5 C0.83 41.17 0.17 41.25 0 40.5 C-0.17 39.75 0 38.17 0 37 C0 35.83 -0.01 34.5 0 33.5 C0.01 32.5 0.05 31.63 0.05 31 C0.05 30.37 -0.09 30.13 0 29.7 C0.09 29.27 0.42 28.87 0.6 28.4 C0.78 27.93 0.88 27.38 1.1 26.9 C1.32 26.42 1.62 25.9 1.9 25.5 C2.18 25.1 2.48 24.92 2.8 24.5 C3.12 24.08 3.55 23.42 3.8 23 C4.05 22.58 4.12 22.33 4.3 22 C4.48 21.67 4.63 21.28 4.9 21 C5.17 20.72 5.43 20.57 5.9 20.3 C6.37 20.03 7.2 19.72 7.7 19.4 C8.2 19.08 8.53 18.73 8.9 18.4 C9.27 18.07 9.57 17.73 9.9 17.4 C10.23 17.07 10.57 16.73 10.9 16.4 C11.23 16.07 11.57 15.73 11.9 15.4 C12.23 15.07 12.57 14.73 12.9 14.4 C13.23 14.07 13.58 13.73 13.9 13.4 C14.22 13.07 14.58 12.73 14.8 12.4 C15.02 12.07 15.03 11.73 15.2 11.4 C15.37 11.07 15.7 10.73 15.8 10.4 C15.9 10.07 15.65 9.73 15.8 9.4 C15.95 9.07 16.55 8.73 16.7 8.4 C16.85 8.07 16.7 7.73 16.7 7.4 C16.7 7.07 16.7 6.73 16.7 6.4 C16.7 6.07 16.68 5.73 16.7 5.4 C16.72 5.07 16.63 4.73 16.8 4.4 C16.97 4.07 17.55 3.73 17.7 3.4 C17.85 3.07 17.72 2.73 17.7 2.4 C17.68 2.07 17.52 1.68 17.6 1.4 C17.68 1.12 18.1 0.82 18.2 0.7 Z");
}
.ti--fireside .bub {
  position: absolute;
  left: 34px;
  top: 44.6px;
  width: 15.6px;
  height: 14.2px;
  background: #fff;
  border-radius: 3px;
}
.ti--fireside .bub::before {
  content: "";
  position: absolute;
  left: 2.6px;
  top: 6px;
  width: 2.2px;
  height: 2.4px;
  border-radius: 50%;
  background: #75757d;
  box-shadow: 4px 0 0 #75757d, 8px 0 0 #75757d;
}
.ti--fireside .bub::after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: -3px;
  width: 4.6px;
  height: 3px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 62% 100%);
}

.ti--wallet { width: 84px; height: 84px; }
.ti--wallet .wallet-glyph {
  position: absolute;
  left: 16px;
  top: 19px;
  width: 53px;
  height: 47px;
  font-size: 53px;
  transform: none;
}
.ti--wallet .wallet-glyph::before {
  left: -1px;
  top: 0;
  width: 44.9px;
  height: 38.9px;
  border: 4.6px solid currentColor;
  border-radius: 10px 6px 8px 8px;
}
.ti--wallet .wallet-glyph::after { display: none; }
.ti--wallet .wallet-glyph > .lip {
  position: absolute;
  left: 7.7px;
  top: 7.8px;
  width: 40.8px;
  height: 3.2px;
  border-radius: 1.6px;
  background: currentColor;
}
.ti--wallet .wallet-glyph > .ch {
  position: absolute;
  left: 41.5px;
  top: -0.5px;
  width: 13px;
  height: 12px;
  background: #fff;
  clip-path: polygon(0.5px 0.5px, 2.3px 1.5px, 3.3px 2.5px, 4.3px 3.5px, 6.5px 4.5px, 6.5px 12px, 13px 12px, 13px 0.5px);
}
.ti--wallet .wallet-glyph > .cm {
  position: absolute;
  left: 40px;
  top: 2px;
  width: 12px;
  height: 10.5px;
  background: currentColor;
  clip-path: polygon(2.2px 2px, 7.3px 2px, 8px 3px, 8px 5px, 9px 6px, 9.2px 7px, 10px 8px, 10.8px 9px, 9px 9.6px, 5.3px 5.8px);
}
.ti--wallet .wallet-glyph > b {
  box-sizing: border-box;
  left: 32.2px;
  top: 16.7px;
  width: 17.6px;
  height: 18px;
  border: 5.8px solid currentColor;
  border-radius: 10px 0 0 10px;
  background: #fff;
}
.ti--wallet .wallet-glyph > .pi {
  left: 10px;
  top: 17px;
  width: 18px;
  height: 17px;
  font-size: 18px;
}
.ti--wallet .wallet-glyph > .pi > i:nth-child(1) {
  left: -0.2px;
  right: 0.6px;
  top: 3.7px;
  height: 3px;
  border-radius: 1px;
}
.ti--wallet .wallet-glyph > .pi > i:nth-child(1)::before {
  left: 0;
  top: 0.9px;
  width: 3px;
  height: 4px;
  border-radius: 1px;
}
.ti--wallet .wallet-glyph > .pi > i:nth-child(1)::after {
  right: 0;
  top: -1.9px;
  width: 2px;
  height: 3px;
  border-radius: 1px;
}
.ti--wallet .wallet-glyph > .pi > i:nth-child(2),
.ti--wallet .wallet-glyph > .pi > i:nth-child(3) {
  top: 7px;
  width: 2.8px;
  height: 9.5px;
  border-radius: 1px;
}
.ti--wallet .wallet-glyph > .pi > i:nth-child(2) { left: 4px; }
.ti--wallet .wallet-glyph > .pi > i:nth-child(3) { left: 9px; }
.ti--wallet .wallet-glyph > .pi > i:nth-child(2)::before {
  left: 1.4px;
  top: -7.5px;
  width: 1.8px;
  height: 2.2px;
  border-radius: 1px;
}
.ti--wallet .wallet-glyph > .pi > i:nth-child(3)::before {
  left: 0.2px;
  top: -7.5px;
  width: 2.6px;
  height: 2.2px;
  border-radius: 1px;
}

.ti--brainstorm { width: 84px; height: 84px; }
.bs-bulb {
  position: absolute;
  left: 26.6px;
  top: 28px;
  width: 31.2px;
  height: 30.2px;
  border: 3.6px solid currentColor;
  border-radius: 50%;
  background: #fff;
}
.bs-mask {
  position: absolute;
  left: 38.2px;
  top: 52.5px;
  width: 7.6px;
  height: 6.5px;
  background: #fff;
}
.bs-neck {
  position: absolute;
  left: 34.4px;
  top: 55.5px;
  width: 15px;
  height: 12.4px;
  border: 3.8px solid currentColor;
  border-top: 0;
  border-radius: 0 0 6.5px 6.5px;
  background: transparent;
}
.ti--brainstorm > .pi {
  position: absolute;
  left: 35px;
  top: 36px;
  width: 13px;
  height: 15px;
  font-size: 14px;
  transform: none;
}
.ti--brainstorm > .pi > i:nth-child(1) {
  left: 0.2px;
  right: -0.6px;
  top: 4px;
  height: 2.8px;
  border-radius: 1px;
}
.ti--brainstorm > .pi > i:nth-child(1)::before {
  left: 0;
  top: 2.6px;
  width: 2px;
  height: 2.4px;
  border-radius: 1px;
}
.ti--brainstorm > .pi > i:nth-child(1)::after {
  right: -0.5px;
  top: -1.2px;
  width: 2px;
  height: 2.4px;
  border-radius: 1px;
}
.ti--brainstorm > .pi > i:nth-child(2),
.ti--brainstorm > .pi > i:nth-child(3) {
  top: 7px;
  width: 2px;
  height: 7.5px;
  border-radius: 1px;
}
.ti--brainstorm > .pi > i:nth-child(2) { left: 4px; }
.ti--brainstorm > .pi > i:nth-child(3) { left: 8px; }
.ti--brainstorm > .pi > i:nth-child(2)::before,
.ti--brainstorm > .pi > i:nth-child(3)::before {
  left: 0;
  top: -6.5px;
  width: 2px;
  height: 2.2px;
  border-radius: 1px;
}
.bs-r {
  position: absolute;
  width: 5.6px;
  height: 2.8px;
  border-radius: 1.4px;
  background: currentColor;
}
.bs-r.r1 { left: 22.5px; top: 27px; transform: rotate(45deg); }
.bs-r.r2 { left: 56.6px; top: 27px; transform: rotate(-45deg); }
.bs-r.r3 { left: 16.6px; top: 40.8px; width: 5px; }
.bs-r.r4 { left: 63px; top: 41.4px; width: 5px; }
.bs-r.r5 { left: 22.2px; top: 57.9px; width: 5px; transform: rotate(-45deg); }
.bs-r.r6 { left: 56.5px; top: 57.9px; width: 5px; transform: rotate(45deg); }
.bs-r.r7 { left: 41.2px; top: 17.8px; width: 3.2px; height: 4.2px; }
.bs-r.r8 { display: none; }

.ti--mine {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mine-ring {
  width: 52px;
  height: 52px;
  border: 4.5px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.mine-ring .pi {
  width: 28px;
  height: 27px;
  font-size: 28px;
  transform: none;
}
.mine-ring .pi > i:nth-child(1) {
  left: 0;
  width: 26.5px;
  top: 5px;
  height: 4.6px;
  border-radius: 1.4px;
}
.mine-ring .pi > i:nth-child(1)::before {
  left: 0;
  top: 3.4px;
  width: 3.8px;
  height: 4px;
  border-radius: 1.4px;
}
.mine-ring .pi > i:nth-child(1)::after {
  left: 23px;
  top: -2.5px;
  width: 3.5px;
  height: 5px;
  border-radius: 2px 2px 1.2px 1.2px;
}
.mine-ring .pi > i:nth-child(2),
.mine-ring .pi > i:nth-child(3) {
  top: 9px;
  width: 4.5px;
  height: 17.5px;
  border-radius: 1.2px;
}
.mine-ring .pi > i:nth-child(2) { left: 7px; }
.mine-ring .pi > i:nth-child(3) { left: 15px; }
.mine-ring .pi > i:nth-child(2)::before,
.mine-ring .pi > i:nth-child(3)::before {
  left: 0;
  top: -9.7px;
  width: 4.5px;
  height: 3.8px;
  border-radius: 1.2px;
}

.ti--blockchain { width: 84px; height: 84px; }
.bc-bar {
  position: absolute;
  top: 50%;
  height: 3.5px;
  margin-top: -1.75px;
  border-radius: 1.75px;
  background: currentColor;
}
.bc-bar--l { left: 13px; width: 21px; }
.bc-bar--r { left: 54px; width: 21px; }
.bc-c {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border: 2.5px solid currentColor;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.bc-c--l { left: -12px; }
.bc-c--m { left: 26px; }
.bc-c--r { left: 66px; }
.bc-c .pi {
  width: 16px;
  height: 16px;
  font-size: 16px;
}
.bc-c .pi > i:nth-child(1) {
  left: 0;
  right: 0;
  top: 3px;
  height: 2.8px;
  border-radius: 1px;
}
.bc-c .pi > i:nth-child(1)::before {
  left: 0;
  top: 2.8px;
  width: 2.2px;
  height: 3.4px;
  border-radius: 1px;
}
.bc-c .pi > i:nth-child(1)::after {
  right: 0;
  top: -1.5px;
  width: 2.2px;
  height: 2.6px;
  border-radius: 1px;
}
.bc-c .pi > i:nth-child(2),
.bc-c .pi > i:nth-child(3) {
  top: 5.8px;
  width: 3px;
  height: 9.2px;
  border-radius: 1px;
}
.bc-c .pi > i:nth-child(2) { left: 3.5px; }
.bc-c .pi > i:nth-child(3) { left: 8.5px; }
.bc-c .pi > i:nth-child(2)::before,
.bc-c .pi > i:nth-child(3)::before {
  left: 0.2px;
  top: -5.8px;
  width: 2.8px;
  height: 2.6px;
  border-radius: 1px;
}

.ti--develop { width: 84px; height: 84px; }
.dv-mon {
  position: absolute;
  left: 16px;
  top: 18px;
  width: 52px;
  height: 39.5px;
  border: 4.6px solid currentColor;
  border-bottom-width: 9.5px;
  border-radius: 4.5px;
  background: #fff;
}
.dv-mon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7.5px;
  width: 4.4px;
  height: 4px;
  margin-left: -2.2px;
  border-radius: 1.4px;
  background: #fff;
}
.dv-code {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: currentColor;
  line-height: 1;
}
.dv-code > i {
  font-style: normal;
  font-size: 21px;
  font-weight: 700;
  transform: translateY(-1.5px) scaleX(.78);
}
.dv-code .pi {
  width: 14.5px;
  height: 15px;
  font-size: 16px;
}
.dv-code .pi > i:nth-child(1) {
  left: 0;
  right: 0;
  top: 3px;
  height: 2.6px;
  border-radius: 1px;
}
.dv-code .pi > i:nth-child(1)::before {
  left: 0;
  top: 2.6px;
  width: 2.2px;
  height: 2.4px;
  border-radius: 1px;
}
.dv-code .pi > i:nth-child(1)::after {
  right: 0;
  top: -1.5px;
  width: 2px;
  height: 2.4px;
  border-radius: 1px;
}
.dv-code .pi > i:nth-child(2),
.dv-code .pi > i:nth-child(3) {
  top: 5px;
  width: 2.6px;
  height: 9px;
  border-radius: 1px;
}
.dv-code .pi > i:nth-child(2) { left: 4px; }
.dv-code .pi > i:nth-child(3) { left: 8px; width: 2.2px; }
.dv-code .pi > i:nth-child(2)::before,
.dv-code .pi > i:nth-child(3)::before {
  left: 0;
  top: -5px;
  width: 2.6px;
  height: 2px;
  border-radius: 1px;
}
.dv-neck {
  position: absolute;
  left: 38px;
  top: 58px;
  width: 9px;
  height: 4.5px;
  background: currentColor;
}
.dv-base {
  position: absolute;
  left: 32px;
  top: 62px;
  width: 21px;
  height: 4.5px;
  border-radius: 2.25px;
  background: currentColor;
}

.ti--kyc { width: 84px; height: 84px; }
.kc-card {
  position: absolute;
  left: 16px;
  top: 24px;
  width: 54px;
  height: 37px;
  border: 3.4px solid currentColor;
  border-radius: 5px;
  background: #fff;
}
.kc-ava {
  position: absolute;
  left: 5.5px;
  top: 4px;
  width: 10.8px;
  height: 10.8px;
  border-radius: 50%;
  background: currentColor;
}
.kc-ava::after {
  content: "";
  position: absolute;
  left: -1.5px;
  top: 12.9px;
  width: 14.5px;
  height: 10px;
  border-radius: 7.25px 7.25px 0 0;
  background: currentColor;
}
.kc-l {
  position: absolute;
  left: 22.6px;
  height: 3.1px;
  border-radius: 1.5px;
  background: currentColor;
}
.kc-l1 { top: 5.6px; width: 21.2px; }
.kc-l2 { top: 13.6px; width: 9.6px; }
.kc-l3 { top: 21.6px; width: 6px; }
.kc-badge {
  position: absolute;
  left: 49.5px;
  top: 40.5px;
  width: 26px;
  height: 26px;
  border: 2.9px solid currentColor;
  border-radius: 50%;
  background: #fff;
  color: currentColor;
}
.kc-badge .pi {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 26px;
  height: 26px;
  font-size: 0;
}
.kc-badge .pi > i:nth-child(1) {
  left: 6.8px;
  right: 6.8px;
  top: 9.6px;
  height: 2.9px;
  border-radius: 1.3px;
}
.kc-badge .pi > i:nth-child(1)::before {
  content: "";
  left: 0;
  top: 1.6px;
  width: 1.7px;
  height: 2.4px;
  border-radius: 1px;
  background: currentColor;
}
.kc-badge .pi > i:nth-child(1)::after,
.kc-badge .pi > i:nth-child(2)::before,
.kc-badge .pi > i:nth-child(3)::before { content: none; }
.kc-badge .pi > i:nth-child(2),
.kc-badge .pi > i:nth-child(3) {
  top: 6.6px;
  width: 1.9px;
  border-radius: .95px;
}
.kc-badge .pi > i:nth-child(2) { left: 10.6px; height: 13.4px; }
.kc-badge .pi > i:nth-child(3) { left: 14.4px; height: 13.9px; }

.ti--chat { width: 84px; height: 84px; }
.ch-bub {
  position: absolute;
  left: 16px;
  top: 17px;
  width: 53px;
  height: 43px;
  border: 4px solid currentColor;
  border-radius: 7.5px 7.5px 0 7.5px;
  background: #fff;
  color: currentColor;
}
.ch-bub::before {
  content: "";
  position: absolute;
  left: 38.5px;
  top: 34px;
  width: 6.5px;
  height: 4.6px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.ch-bub .pi {
  position: absolute;
  left: 11px;
  top: 7px;
  width: 22px;
  height: 23px;
  font-size: 23px;
  transform: none;
}
.ch-bub .pi > i:nth-child(1) {
  left: .7px;
  right: .5px;
  top: 5px;
  height: 3px;
  border-radius: 1.2px;
}
.ch-bub .pi > i:nth-child(1)::before {
  left: 0;
  top: 2.2px;
  width: 3.2px;
  height: 3.7px;
  border-radius: 1.2px;
}
.ch-bub .pi > i:nth-child(1)::after {
  right: -.8px;
  top: -3px;
  width: 3.6px;
  height: 3.6px;
  border-radius: 1.2px;
}
.ch-bub .pi > i:nth-child(2),
.ch-bub .pi > i:nth-child(3) {
  top: 8px;
  width: 3px;
  height: 14.3px;
  border-radius: 1.2px;
}
.ch-bub .pi > i:nth-child(2) { left: 7px; }
.ch-bub .pi > i:nth-child(3) { left: 13px; width: 3.8px; }
.ch-bub .pi > i:nth-child(2)::before,
.ch-bub .pi > i:nth-child(3)::before {
  left: 0;
  top: -8px;
  width: 3px;
  height: 3px;
  border-radius: 1.2px;
}
.ch-bub .pi > i:nth-child(3)::before { width: 3.8px; }
.ch-bub::after {
  content: "";
  position: absolute;
  left: 38.5px;
  top: 37.5px;
  width: 10.8px;
  height: 8.3px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 88% 100%, 60% 100%, 42% 66%, 6% 22%);
}

.ti--profiles { width: 84px; height: 84px; }
.pf-outer {
  position: absolute;
  left: 20.2px;
  top: 19.7px;
  width: 44.4px;
  height: 44.9px;
  border: 2.8px solid currentColor;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}
.pf-head {
  position: absolute;
  left: 50%;
  top: 5.4px;
  width: 19px;
  height: 19px;
  margin-left: -9px;
  border: 3px solid currentColor;
  border-radius: 50%;
  background: #fff;
}
.pf-body {
  position: absolute;
  left: 50%;
  top: 22.55px;
  width: 31.6px;
  height: 28px;
  margin-left: -15.8px;
  border: 2.8px solid currentColor;
  border-radius: 50%;
  background: #fff;
}
.pf-pi {
  position: absolute;
  left: 50%;
  bottom: 2.1px;
  transform: translateX(-50%);
  width: 10.8px;
  height: 11px;
  font-size: 11px;
}
.pf-pi > i:nth-child(1) {
  left: 0;
  right: 0;
  top: 1.8px;
  height: 2.2px;
  border-radius: 1.1px;
}
.pf-pi > i:nth-child(1)::before,
.pf-pi > i:nth-child(1)::after { display: none; }
.pf-pi > i:nth-child(2),
.pf-pi > i:nth-child(3) {
  top: 3.8px;
  width: 2.3px;
  height: 7.4px;
  border-radius: 1.15px;
}
.pf-pi > i:nth-child(2) { left: 3.1px; }
.pf-pi > i:nth-child(3) { left: 6.4px; }
.pf-pi > i:nth-child(2)::before,
.pf-pi > i:nth-child(3)::before {
  left: 0;
  top: -4px;
  width: 2.3px;
  height: 2.2px;
  border-radius: 1.15px;
}

.ti--domains { width: 84px; height: 84px; }
.dm-win {
  position: absolute;
  left: 17.7px;
  top: 23.2px;
  width: 45.6px;
  height: 37.4px;
  border: 3px solid currentColor;
  border-radius: 5.5px;
  background: #fff;
}
.dm-text {
  position: absolute;
  left: 5.2px;
  top: 2.2px;
  font-size: 23.2px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -.5px;
  color: currentColor;
}
.dm-cur {
  position: absolute;
  left: 0;
  top: 0;
  width: 84px;
  height: 84px;
  background: #fff;
  clip-path: polygon(48.2px 46px, 56px 46.2px, 66px 47.3px, 69.5px 52px, 64.5px 58px, 58.5px 64.5px, 52px 64.2px, 46.2px 58.2px);
  z-index: 2;
}
.dm-cur::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(48.5px 46.2px, 66.8px 53px, 59.8px 55.2px, 55px 64px);
}

.ti--appstudio { width: 60px; height: 56px; }
.as-coin {
  position: absolute;
  left: 9px;
  top: 7.9px;
  width: 19.7px;
  height: 19.5px;
  border: 1.8px solid #6d6275;
  border-radius: 50%;
  color: currentColor;
}
.as-coin .pi {
  position: absolute;
  left: 2.6px;
  top: 4.4px;
  width: 10px;
  height: 10px;
  font-size: 0;
  transform: none;
}
.as-coin .pi > i:nth-child(1) {
  left: 1.2px;
  right: -1px;
  top: 0;
  height: 1.8px;
  border-radius: .9px;
}
.as-coin .pi > i:nth-child(1)::before,
.as-coin .pi > i:nth-child(1)::after,
.as-coin .pi > i:nth-child(2)::before,
.as-coin .pi > i:nth-child(3)::before { content: none; }
.as-coin .pi > i:nth-child(2),
.as-coin .pi > i:nth-child(3) {
  top: 2.4px;
  width: 1.8px;
  height: 5.6px;
  border-radius: .9px;
}
.as-coin .pi > i:nth-child(2) { left: 3.4px; }
.as-coin .pi > i:nth-child(3) { left: 6.8px; }
.as-sp {
  position: absolute;
  background: currentColor;
  clip-path: polygon(50% 0, 66% 34%, 100% 50%, 66% 66%, 50% 100%, 34% 66%, 0 50%, 34% 34%);
}
.as-sp1 { left: 35px; top: 7px; width: 17.5px; height: 18px; }
.as-sp2 { left: 12.6px; top: 32px; width: 17px; height: 17px; }
.as-ai {
  position: absolute;
  right: 7.6px;
  bottom: 4.6px;
  font-size: 16.4px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .2px;
  color: currentColor;
}

.ti--launchpad { width: 84px; height: 84px; }
.lp-c {
  position: absolute;
  border: 3.2px solid currentColor;
  border-radius: 50%;
  background: #fff;
}
.lp-c1 { left: 10.2px; top: 16.6px; width: 16.2px; height: 15.7px; border-width: 3.3px; }
.lp-c2 { left: 34.4px; top: 10.8px; width: 15.1px; height: 15.4px; }
.lp-c3 { left: 58.5px; top: 26.3px; width: 15.5px; height: 15.2px; }
.lp-a {
  position: absolute;
  width: 2.3px;
  background: currentColor;
  border-radius: 1.15px;
}
.lp-a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6.4px;
  width: 11.6px;
  height: 6.7px;
  margin-left: -5.8px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.lp-a1 { left: 16.4px; top: 42.6px; width: 4px; height: 9.2px; }
.lp-a2 { left: 41.05px; top: 36.8px; height: 14.8px; }
.lp-a3 { left: 65.15px; top: 50.6px; width: 2.2px; height: 6.2px; }
.lp-coin {
  position: absolute;
  left: 12.6px;
  top: 51.6px;
  width: 58.2px;
  height: 58.2px;
  border: 4.2px solid currentColor;
  border-radius: 50%;
  background: #fff;
  color: currentColor;
}
.lp-coin .pi {
  position: absolute;
  left: 8.75px;
  top: 7.4px;
  width: 29.6px;
  height: 20px;
  font-size: 0;
  transform: none;
}
.lp-coin .pi > i:nth-child(1) {
  left: 1.15px;
  right: -1px;
  top: 8.8px;
  height: 5px;
  border-radius: 2.2px;
}
.lp-coin .pi > i:nth-child(1)::before {
  left: -0.1px;
  top: 4.4px;
  width: 4.6px;
  height: 4px;
  border-radius: 0.8px;
}
.lp-coin .pi > i:nth-child(1)::after {
  right: -0.85px;
  top: -3.4px;
  width: 5.2px;
  height: 8px;
  border-radius: 2px;
}
.lp-coin .pi > i:nth-child(2),
.lp-coin .pi > i:nth-child(3) {
  top: 12.8px;
  width: 4.9px;
  height: 8.2px;
  border-radius: 1.4px;
}
.lp-coin .pi > i:nth-child(2) { left: 8.7px; }
.lp-coin .pi > i:nth-child(3) { left: 17.7px; }
.lp-coin .pi > i:nth-child(2)::before,
.lp-coin .pi > i:nth-child(3)::before {
  left: 0;
  top: -11px;
  width: 4px;
  height: 4px;
  border-radius: 1.3px;
}

.more-tile__img .ti { transform: translate(-50%, -50%) scale(.95); }

.iw-halo {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 80px;
  height: 80px;
  margin-left: -31px;
  border: 1.7px solid #d3c2e2;
  border-radius: 50%;
  background: #fff;
}
.iw-coin {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 62px;
  height: 62px;
  margin-left: -22px;
  border: 7px solid #efac4e;
  border-radius: 50%;
  background: #fffdf9;
  color: #efac4e;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-6deg);
}
.iw-coin .pi { font-size: 34px; }
.iw-back {
  position: absolute;
  left: 14px;
  top: 68px;
  width: 96px;
  height: 60px;
  border: 1.5px solid #b6a4c7;
  border-radius: 8px;
  background: #fff;
  transform: rotate(-8deg);
  box-shadow: 2px 3px 0 rgba(128, 100, 150, .10);
}
.iw-back::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 58px;
  height: 14px;
  border-radius: 2px;
  background: repeating-linear-gradient(180deg, rgba(191, 173, 208, 0) 0 3px, #c3b3d2 3px 4.2px);
  transform: rotate(-1deg);
}
.iw-body {
  position: absolute;
  left: 9.5px;
  top: 70px;
  width: 98px;
  height: 60px;
  border: 1.7px solid #a08ab6;
  border-radius: 9px;
  background: #fff;
  transform: rotate(-10deg);
  box-shadow: 3px 5px 0 -1px rgba(171, 143, 196, .42);
  z-index: 1;
}
.iw-body::before {
  content: "";
  position: absolute;
  right: 19px;
  top: 5px;
  bottom: 5px;
  width: 12px;
  border-left: 1.3px solid #ccbcd9;
  border-radius: 0 5px 5px 0;
}
.iw-strap {
  position: absolute;
  right: 1px;
  top: 78px;
  width: 10px;
  height: 64px;
  border: 1.2px solid #a489bb;
  border-radius: 6px;
  background: linear-gradient(90deg, #d4bce4, #bda2d4);
  transform: rotate(-10deg);
  z-index: 2;
}
.iw-btn {
  position: absolute;
  left: 77px;
  top: 91px;
  width: 31px;
  height: 19px;
  border: 1.5px solid #ab96ba;
  border-radius: 11px 14px 14px 11px;
  background: #fbf6fd;
  transform: rotate(-14deg);
  z-index: 3;
}
.iw-btn::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 6px;
  height: 8px;
  margin-top: -4px;
  border: 1.2px solid #a08cae;
  border-radius: 50%;
  background: #fff;
}

.idc {
  position: absolute;
  left: 17px;
  top: 17px;
  width: 203px;
  height: 141px;
  background: #fff;
  border: 1.7px solid #7e6293;
  border-radius: 23px;
  box-shadow: 3px 4px 0 rgba(126, 95, 146, .22);
}
.idc-head {
  position: absolute;
  left: 16px;
  top: 17px;
  font-size: 13.5px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: .25px;
  color: #5b4670;
}
.idc-rule {
  position: absolute;
  left: 16px;
  right: 13px;
  top: 35px;
  height: 2.2px;
  border-radius: 2px;
  background: #6c4f80;
}
.idc-photo {
  position: absolute;
  left: 13px;
  top: 42px;
  width: 77px;
  height: 88px;
  border-radius: 19px;
  background: #e6d3f1;
  border: 1.5px solid #bda8ce;
  overflow: hidden;
}
.idc-shirt {
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 78px;
  height: 46px;
  margin-left: -39px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: #fdfafd;
  border: 1.5px solid #9b7fae;
  z-index: 1;
}
.idc-shirt::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -17px;
  width: 15px;
  height: 19px;
  margin-left: -7.5px;
  background: #fbf4fa;
  border-left: 1.4px solid #9b7fae;
  border-right: 1.4px solid #9b7fae;
  z-index: -1;
}
.idc-face {
  position: absolute;
  left: 50%;
  top: 15px;
  width: 42px;
  height: 51px;
  margin-left: -21px;
  background: #fbf4fa;
  border: 1.5px solid #9b7fae;
  border-radius: 46% 46% 44% 44% / 50% 50% 46% 46%;
  z-index: 1;
}
.idc-face::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 35px;
  width: 9px;
  height: 1.4px;
  margin-left: -4.5px;
  border-radius: 1px;
  background: #96799f;
  box-shadow: 0 3px 0 -0.4px #c7aed3;
}
.idc-hair {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 45px;
  height: 22px;
  margin-left: -22.5px;
  background: linear-gradient(115deg, #c6a3db 0%, #e3cbf0 45%, #d0afdf 100%);
  border: 1.4px solid #9b7fae;
  border-radius: 52% 58% 40% 34% / 96% 92% 12% 10%;
  transform: rotate(-3deg);
  z-index: 2;
}
.idc-hair::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 2px;
  width: 21px;
  height: 13px;
  border-radius: 60% 40% 60% 40% / 70% 60% 40% 30%;
  border-top: 1.3px solid #b895cf;
  transform: rotate(-18deg);
}
.idc-eyes {
  position: absolute;
  left: 50%;
  top: 38px;
  width: 27px;
  height: 10px;
  margin-left: -13.5px;
  z-index: 3;
}
.idc-eyes::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 7px;
  height: 1.6px;
  border-radius: 1px;
  background: #8b6f99;
  box-shadow: 16px 0 0 0 #8b6f99;
  transform: rotate(4deg);
}
.idc-eyes::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 5px;
  height: 2px;
  border-radius: 50%;
  background: #6f5482;
  box-shadow: 16px 0 0 0 #6f5482;
}
.idc-fields {
  position: absolute;
  left: 88px;
  top: 45px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fld { display: flex; flex-direction: column; gap: 1px; }
.fld > i {
  font-style: normal;
  font-size: 4.2px;
  line-height: 5px;
  letter-spacing: .1px;
  color: #ab97b9;
}
.fld > b {
  font-size: 7.6px;
  line-height: 9px;
  font-weight: 500;
  letter-spacing: .1px;
  color: #4a3959;
}
.idc-code {
  position: absolute;
  left: 152px;
  top: 46px;
  font-size: 7.6px;
  line-height: 9px;
  font-weight: 500;
  color: #4a3959;
  letter-spacing: .2px;
}
.idc-snap {
  position: absolute;
  left: 152px;
  top: 74px;
  width: 38px;
  height: 51px;
  border-radius: 10px;
  background: linear-gradient(155deg, #eee0f6, #cdb2e2);
  border: 1.3px solid #b49bc8;
}

.appbar--image > .appbar__back,
.appbar--image > .appbar__chev,
.appbar--image > .appbar__center { visibility: hidden; }

.appbar--home {
  background: #713d92 url("../assets/img/appbar-home.png") 0 0 / 434px 56px no-repeat;
  box-shadow: none;
}
.screen[data-route="wallet-create"] .appbar--wallet {
  background-image: url("../assets/img/appbar-wallet.png");
  background-repeat: no-repeat;
  background-size: 434px 56px;
  box-shadow: none;
}
.screen[data-route="wallet-unlock"] .appbar--wallet {
  box-shadow: none;
  background-color: #713d92;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 5px),
    linear-gradient(to bottom, #713d92 0 88%, #6a427e 100%);
  background-repeat: no-repeat;
  background-size: auto, auto;
}
/* #wallet-unlock 顶栏完全用 CSS 绘制：返回箭头、钱包图标、标题、π 硬币、下拉箭头 */
.screen[data-route="wallet-unlock"] .appbar--image > .appbar__back,
.screen[data-route="wallet-unlock"] .appbar--image > .appbar__chev,
.screen[data-route="wallet-unlock"] .appbar--image > .appbar__center { visibility: visible; }

.screen[data-route="wallet-unlock"] .appbar__back {
  left: 25px;
  top: calc(50% - 5.5px);
  width: 19px;
}
.screen[data-route="wallet-unlock"] .appbar__back::after {
  left: 2.1px;
  width: 10px;
  height: 10px;
}

.screen[data-route="wallet-unlock"] .appbar__chev {
  right: 21.5px;
  top: calc(50% - 6px);
  font-size: 22px;
}
.screen[data-route="wallet-unlock"] .appbar__chev::before {
  border-right-width: 1.6px;
  border-bottom-width: 1.6px;
}

.screen[data-route="wallet-unlock"] .appbar__center {
  gap: 0;
  left: calc(50% - 1px);
  top: calc(50% - 5.8px);
}
.screen[data-route="wallet-unlock"] .appbar__badge {
  position: relative;
  top: -1.4px;
  left: 1px;
  margin-right: 20px;
  color: #efb391;
}
.screen[data-route="wallet-unlock"] .appbar__badge .wallet-glyph { font-size: 30px; }
.screen[data-route="wallet-unlock"] .appbar__badge .wallet-glyph::before {
  left: 0;
  top: .01em;
  width: .90em;
  height: .87em;
  border-width: .095em;
  border-radius: .16em;
}
.screen[data-route="wallet-unlock"] .appbar__badge .wallet-glyph::after {
  left: .17em;
  top: .16em;
  width: .70em;
  height: .09em;
  border-radius: .045em;
}
.screen[data-route="wallet-unlock"] .appbar__badge .wallet-glyph > .pi {
  left: 4.8px;
  top: 8.55px;
  font-size: .35em;
}
.screen[data-route="wallet-unlock"] .appbar__badge .wallet-glyph > .pi > i:nth-child(1) { height: .19em; }
.screen[data-route="wallet-unlock"] .appbar__badge .wallet-glyph > .pi > i:nth-child(2),
.screen[data-route="wallet-unlock"] .appbar__badge .wallet-glyph > .pi > i:nth-child(3) { width: .16em; height: .60em; }
.screen[data-route="wallet-unlock"] .appbar__badge .wallet-glyph > b {
  right: -.05em;
  top: .343em;
  width: .46em;
  height: .46em;
  border-width: .17em;
}
.screen[data-route="wallet-unlock"] .appbar__title {
  position: relative;
  top: 1px;
  margin-right: 12px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.6px;
}
.screen[data-route="wallet-unlock"] .appbar__coin {
  position: relative;
  top: 1px;
  left: 1px;
  font-size: 27px;
  color: #f0b09c;
}
.screen[data-route="wallet-unlock"] .appbar__coin .pi { width: 15.5px; height: 15.5px; font-size: 15.5px; }
.screen[data-route="wallet-unlock"] .appbar__coin .pi > i:nth-child(1) { top: 4.3px; height: 3.4px; }
.screen[data-route="wallet-unlock"] .appbar__coin .pi > i:nth-child(1)::after { top: -3.2px; width: 2.3px; height: 6.5px; }
.screen[data-route="wallet-unlock"] .appbar__coin .pi > i:nth-child(2),
.screen[data-route="wallet-unlock"] .appbar__coin .pi > i:nth-child(3) { top: 6.9px; width: 3.1px; height: 7.4px; }
.screen[data-route="wallet-unlock"] .appbar__coin .pi > i:nth-child(2) { left: 4.2px; }
.screen[data-route="wallet-unlock"] .appbar__coin .pi > i:nth-child(3) { left: 8.4px; }
.screen[data-route="wallet-unlock"] .appbar__coin .pi > i:nth-child(2)::before,
.screen[data-route="wallet-unlock"] .appbar__coin .pi > i:nth-child(3)::before { top: -5.8px; width: 3.1px; height: 2.7px; }
.screen[data-route="kyc-login"] .appbar--kyc {
  background-image: url("../assets/img/appbar-kyc.png");
  background-repeat: no-repeat;
  background-size: 434px 56px;
  box-shadow: none;
}
.screen[data-route="kyc-unavailable"] .appbar--kyc {
  background-image: url("../assets/img/appbar-kyc2.png");
  background-repeat: no-repeat;
  background-size: 434px 56px;
  box-shadow: none;
}

.kyc-hero {
  background: #fff url("../assets/img/kyc-hero.png") 0 0 / 434px 180px no-repeat;
}
.kyc-hero::before,
.kyc-hero__bulge,
.kyc-hero__deco { display: none; }
.kyc-hero__bar {
  background: transparent;
  box-shadow: none;
}
.kyc-hero__bar > .appbar__back,
.kyc-hero__bar > .appbar__chev,
.kyc-hero__bar > .appbar__center { visibility: hidden; }
.kyc-hero__title,
.kyc-hero__sub { opacity: 0; }

.login__logo,
.register__logo {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
}
.login__logo {
  background-image: url("../assets/img/pi-logo.png");
  background-size: 134px 134px;
}
.login__logo > .pi { display: none; }
.register__logo {
  background-image: url("../assets/img/pi-logo-register.png");
  background-size: 135px 135px;
}
.register__logo > .pi { display: none; }

.help-dot {
  border: 0;
  color: transparent;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
}
.help-dot::before { content: none; }
.login__easy .help-dot {
  background-image: url("../assets/img/help-title.png");
  background-size: 36px 35px;
}
.login__verify .help-dot {
  background-image: url("../assets/img/help-verify.png");
  background-size: 36px 36px;
}
.help-btn .help-dot {
  background-image: url("../assets/img/help-register.png");
  background-size: 34px 34px;
}

.login__verify .help-inline {
  position: relative;
}
.login__verify .help-inline .help-dot {
  background-image: none;
}
.login__verify .help-inline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  background: transparent url("../assets/img/help-verify.png") 0 0 / 36px 36px no-repeat;
  pointer-events: none;
}

.home-grid {
  padding: 30px 43px 40px;
}
.tile__img {
  border-radius: 0;
  overflow: visible;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 84px 84px;
  box-shadow: none;
}
.tile__img > .ti { display: none; }
.tile:nth-child(1) .tile__img { background-image: url("../assets/img/tile-fireside.png"); }
.tile:nth-child(2) .tile__img { background-image: url("../assets/img/tile-wallet.png"); }
.tile:nth-child(3) .tile__img { background-image: url("../assets/img/tile-brainstorm.png"); }
.tile:nth-child(4) .tile__img { background-image: url("../assets/img/tile-mine.png"); }
.tile:nth-child(5) .tile__img { background-image: url("../assets/img/tile-blockchain.png"); }
.tile:nth-child(6) .tile__img { background-image: url("../assets/img/tile-develop.png"); }
.tile:nth-child(7) .tile__img { background-image: url("../assets/img/tile-kyc.png"); }
.tile:nth-child(8) .tile__img { background-image: url("../assets/img/tile-chat.png"); }
.tile:nth-child(9) .tile__img { background-image: url("../assets/img/tile-profiles.png"); }
.tile:nth-child(10) .tile__img { background-image: url("../assets/img/tile-domains.png"); }
.tile:nth-child(11) .tile__img { background-image: url("../assets/img/tile-appstudio.png"); }
.tile:nth-child(12) .tile__img { background-image: url("../assets/img/tile-launchpad.png"); }
.tile__label { font-size: 17px; font-weight: 400; }
.tile:nth-child(n+4) .tile__label { transform: translateY(-1px); }

.tab__icon > span {
  width: 30px !important;
  height: 30px !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
}
.tab__icon > span::before,
.tab__icon > span::after,
.tab__icon > span > i,
.tab__icon > span > b { display: none !important; }
.tabbar .tab:nth-child(1) { flex: 0 0 144px; }
.tabbar .tab:nth-child(2) { flex: 0 0 144px; margin-left: 1px; }
.tabbar .tab:nth-child(3) { flex: 0 0 144px; }
.tab:nth-child(1) .tab__icon > span {
  background-image: url("../assets/img/foot-home-tab.png");
  transform: translate(0, 2px) !important;
}
.tab:nth-child(2) .tab__icon > span {
  background-image: url("../assets/img/foot-apps-tab.png");
  transform: translate(0, 2px) !important;
}
.tab:nth-child(3) .tab__icon > span {
  background-image: url("../assets/img/foot-services-tab.png");
  transform: translate(0, 2px) !important;
}
.tab:not(.tab--active) { color: #8e8e93; }
.tab > span:last-child { transform: translate(1px, 0) !important; }

.illo-wallet {
  background: transparent url("../assets/img/illo-wallet.png") 0 0 / 117px 146px no-repeat;
}
.illo-wallet > * { display: none; }

@media (max-width: 640px) {
  body {
    height: 100dvh;
    min-height: 0;
    padding: 0;
    background: #fff;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
  }
  .device {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    transform: none !important;
  }
  .login { padding-left: 20px; padding-right: 20px; }
  .home-grid {
    grid-template-columns: repeat(3, 84px);
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 12px;
  }
  .more-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 376px;
    margin-left: auto;
    margin-right: auto;
  }
  .more-tile, .more-tile__img { width: 100%; }
  .more-tile__img { height: auto; aspect-ratio: 82 / 80; }
  .sheet { padding-left: 20px; padding-right: 20px; }
}

/* ===== 提交成功页 ===== */
.screen[data-route="wallet-success"] .appbar--wallet {
  box-shadow: none;
  background-color: #713d92;
}
.screen[data-route="wallet-success"] .appbar--image > .appbar__center { visibility: visible; }

.success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 39px 40px;
  background: #fff;
  text-align: center;
}

.success__mark {
  position: relative;
  width: 78px;
  height: 78px;
  margin-bottom: 28px;
  border-radius: 50%;
  background: rgba(80, 160, 110, .12);
}

.success__mark::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 21px;
  width: 20px;
  height: 35px;
  border: solid #4c9e6b;
  border-width: 0 5px 5px 0;
  border-radius: 2px;
  transform: rotate(45deg);
}

.success .page-title { margin-bottom: 12px; }

.success__sub { margin: 0; }

.success__btn {
  width: 100%;
  height: 55px;
  margin-top: 44px;
  border-radius: 9px;
  font-size: 18px;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}