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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
  background: #1e1f22;
}

.download-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  min-height: min(100vh, 100dvh);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  background: #1e1f22;
}

.download-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: min(100vh, 100dvh);
  padding: 24px 16px;
}

.download-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 28px 36px;
  width: max-content;
  max-width: min(960px, 96vw);
  margin: 0 auto;
}

.download-brand-column {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
  gap: 0;
  margin-top: -8px;
  min-width: 120px;
}

.account-picker-brand-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: -8px;
}

.account-picker-brand-title {
  margin: 0;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}

/* Match desktop AccountPickerBabuleh spacing. */
.account-picker-babuleh {
  margin-bottom: -16px;
  transform: translateY(-36px);
}

/* —— XempjqCat inline (from desktop/src/ui/XempjqCat.css) —— */

@property --xempjq-swing-amp {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.xempjq-cat {
  --xempjq-scale: 0.42;
  --xempjq-hang: 20rem;
  --xempjq-hang-pad: 10rem;
  --xempjq-cat-h: 280px;
  --xempjq-artboard-h: calc(var(--xempjq-hang-pad) + var(--xempjq-hang) + var(--xempjq-cat-h));
  --xempjq-swing-amp: 1;
  --xempjq-cat-shadow:
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.14))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.2))
    drop-shadow(0 22px 42px rgba(0, 0, 0, 0.16));
  transition: --xempjq-swing-amp 1.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  width: calc(90px * var(--xempjq-scale));
  height: calc(var(--xempjq-artboard-h) * var(--xempjq-scale));
  overflow: visible;
  pointer-events: none;
}

.xempjq-cat--inline {
  --xempjq-scale: 0.58;
  --xempjq-hang: 3.25rem;
  --xempjq-hang-pad: 2.25rem;
  width: calc(120px * var(--xempjq-scale));
  height: calc((var(--xempjq-hang-pad) + var(--xempjq-hang) + var(--xempjq-cat-h)) * var(--xempjq-scale));
  overflow: visible;
}

.xempjq-cat--inline .all::before {
  visibility: hidden;
}

.xempjq-cat--inline .yarn,
.xempjq-cat--inline .cat-wrap {
  filter: var(--xempjq-cat-shadow);
}

.xempjq-cat__window-string {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  pointer-events: none;
  z-index: 3;
}

.xempjq-cat__stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 90px;
  height: var(--xempjq-artboard-h);
  margin-left: -45px;
  transform: scale(var(--xempjq-scale));
  transform-origin: top center;
}

.xempjq-cat--active {
  --xempjq-swing-amp: 1;
}

.xempjq-cat--active .yarn,
.xempjq-cat--active .all::before,
.xempjq-cat--active .cat-wrap {
  filter: none;
}

.xempjq-cat--inline.xempjq-cat--active .yarn,
.xempjq-cat--inline.xempjq-cat--active .cat-wrap {
  filter: var(--xempjq-cat-shadow);
}

.xempjq-cat .all-wrap {
  animation: xempjq-bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
}

.xempjq-cat .all {
  top: var(--xempjq-hang-pad);
  left: calc(50% - 2.5rem);
  position: absolute;
  width: 5rem;
  height: 5rem;
  transform-origin: center calc(-1 * var(--xempjq-hang));
  animation: xempjq-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
}

.xempjq-cat .all::before {
  height: var(--xempjq-hang);
  width: 2px;
  background-color: #db242a;
  left: calc(50% - 1px);
  bottom: var(--xempjq-hang);
}

.xempjq-cat .yarn {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #db242a;
  box-shadow:
    inset -6px -8px 14px rgba(110, 10, 14, 0.45),
    inset 5px 6px 12px rgba(255, 180, 182, 0.28),
    0 4px 10px rgba(0, 0, 0, 0.18);
  z-index: 1;
}

.xempjq-cat .yarn__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  overflow: visible;
}

.xempjq-cat .yarn__texture *::before,
.xempjq-cat .yarn__texture *::after {
  content: none;
  display: none;
}

.xempjq-cat .yarn::before,
.xempjq-cat .yarn::after {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  top: -1px;
  z-index: 2;
}

.xempjq-cat .yarn::before {
  left: calc(50% + 7px);
  background-color: #a2afe3;
}

.xempjq-cat .yarn::after {
  right: calc(50% + 7px);
  background-color: #d5e8f8;
}

.xempjq-cat .cat-wrap {
  position: absolute;
  top: 0;
  left: calc(50% - 45px);
  width: 90px;
  height: 130px;
  animation: xempjq-reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
  transform-origin: top center;
}

.xempjq-cat .cat {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: xempjq-swing 7s 0.2s infinite both;
  transform-origin: top center;
}

.xempjq-cat .cat-upper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top center;
  z-index: 1;
}

.xempjq-cat .cat-upper .cat-leg {
  position: absolute;
  width: 20px;
  height: 100%;
  background-color: white;
  z-index: -1;
  background-image: linear-gradient(to right, #d5e8f8, #d5e8f8 20%, #8b9bd9);
}

.xempjq-cat .cat-upper .cat-leg:nth-child(1) {
  border-top-left-radius: 100px;
  left: 10px;
}

.xempjq-cat .cat-upper .cat-leg:nth-child(1)::after {
  left: 50%;
}

.xempjq-cat .cat-upper .cat-leg:nth-child(2) {
  border-top-left-radius: 0;
  border-top-right-radius: 100px;
  right: 10px;
}

.xempjq-cat .cat-upper .cat-leg:nth-child(2)::after {
  right: 50%;
}

.xempjq-cat .cat-lower-wrap {
  height: 90%;
  width: 75px;
  position: absolute;
  top: 100%;
  left: calc(50% - 37.5px);
  animation: xempjq-reverse-swing 7s 0.2s infinite both;
  transform-origin: top center;
}

.xempjq-cat .cat-lower {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: xempjq-swing 7s 0.5s infinite both;
  transform-origin: top center;
}

.xempjq-cat .cat-lower::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background-image: radial-gradient(circle at 10px 50px, white, white 40%, #d5e8f8 65%, #8b9bd9);
  z-index: 1;
}

.xempjq-cat .cat-lower .cat-leg,
.xempjq-cat .cat-lower .cat-paw {
  z-index: -1;
  position: absolute;
  height: 20px;
  width: 20px;
  animation: xempjq-swing-leg 7s 0.3s infinite both;
  z-index: 1;
  transform-origin: top center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-image: linear-gradient(to right, white, #d5e8f8, #8b9bd9);
}

.xempjq-cat .cat-lower > .cat-leg {
  bottom: 20px;
}

.xempjq-cat .cat-lower > .cat-leg .cat-leg {
  top: 25%;
}

.xempjq-cat .cat-lower > .cat-leg + .cat-leg {
  right: 0;
}

.xempjq-cat .cat-lower .cat-paw {
  top: 50%;
  border-radius: 50%;
  background-color: #fff;
}

.xempjq-cat .cat-lower .cat-tail {
  position: absolute;
  height: 15px;
  width: 10px;
  animation: xempjq-swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
  transform-origin: top center;
  z-index: 0;
  background-image: linear-gradient(to right, white, #d5e8f8, #8b9bd9);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.xempjq-cat .cat-lower .cat-tail > .cat-tail {
  top: 50%;
}

.xempjq-cat .cat-lower > .cat-tail {
  left: calc(50% - 5px);
  top: 95%;
}

.xempjq-cat .cat-head {
  width: 120px;
  height: 120px;
  left: calc(50% - 60px);
  top: calc(100% - 58px);
}

.xempjq-cat .cat-head__shape {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle at 10px 10px, white, white 40%, #d5e8f8 65%, #8b9bd9);
  -webkit-mask-image: var(--cat-head-mask);
  mask-image: var(--cat-head-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.xempjq-cat .cat-head__eyes {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
  animation: xempjq-face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
}

.xempjq-cat .cat-head__eyes path {
  position: static;
}

.xempjq-cat .cat-head__eye {
  fill: #4b4d75;
  transform-box: fill-box;
  transform-origin: center;
  animation: xempjq-blink 2.8s linear infinite;
  animation-timing-function: linear;
}

.xempjq-cat .cat-head__eyes *::before,
.xempjq-cat .cat-head__eyes *::after {
  content: none;
  display: none;
}

.xempjq-cat *,
.xempjq-cat *::before,
.xempjq-cat *::after {
  box-sizing: border-box;
  position: relative;
  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  animation-fill-mode: both;
}

.xempjq-cat *::before,
.xempjq-cat *::after {
  content: "";
  display: block;
}

@keyframes xempjq-bob {
  0% { transform: translateY(calc(0.4rem * var(--xempjq-swing-amp))); }
  6.25% { transform: translateY(calc(-0.4rem * var(--xempjq-swing-amp))); }
  12.5% { transform: translateY(calc(0.4rem * var(--xempjq-swing-amp))); }
  18.75% { transform: translateY(calc(-0.4rem * var(--xempjq-swing-amp))); }
  25% { transform: translateY(calc(0.4rem * var(--xempjq-swing-amp))); }
  31.25% { transform: translateY(calc(-0.4rem * var(--xempjq-swing-amp))); }
  37.5% { transform: translateY(calc(0.4rem * var(--xempjq-swing-amp))); }
  43.75% { transform: translateY(calc(-0.4rem * var(--xempjq-swing-amp))); }
  50% { transform: translateY(calc(0.4rem * var(--xempjq-swing-amp))); }
  56.25% { transform: translateY(calc(-0.4rem * var(--xempjq-swing-amp))); }
  62.5% { transform: translateY(calc(0.4rem * var(--xempjq-swing-amp))); }
  68.75% { transform: translateY(calc(-0.4rem * var(--xempjq-swing-amp))); }
  75% { transform: translateY(calc(0.4rem * var(--xempjq-swing-amp))); }
  81.25% { transform: translateY(calc(-0.4rem * var(--xempjq-swing-amp))); }
  87.5% { transform: translateY(calc(0.4rem * var(--xempjq-swing-amp))); }
  93.75% { transform: translateY(calc(-0.4rem * var(--xempjq-swing-amp))); }
  100% { transform: translateY(calc(0.4rem * var(--xempjq-swing-amp))); }
}

@keyframes xempjq-swing {
  0% { transform: rotate(calc(1.2deg * var(--xempjq-swing-amp))); }
  12.5% { transform: rotate(calc(-2.4deg * var(--xempjq-swing-amp))); }
  25% { transform: rotate(calc(2.4deg * var(--xempjq-swing-amp))); }
  37.5% { transform: rotate(calc(-3.6deg * var(--xempjq-swing-amp))); }
  50% { transform: rotate(calc(5.5deg * var(--xempjq-swing-amp))); }
  62.5% { transform: rotate(calc(-5.5deg * var(--xempjq-swing-amp))); }
  75% { transform: rotate(calc(3.6deg * var(--xempjq-swing-amp))); }
  87.5% { transform: rotate(calc(-2.4deg * var(--xempjq-swing-amp))); }
  100% { transform: rotate(calc(1.2deg * var(--xempjq-swing-amp))); }
}

@keyframes xempjq-reverse-swing {
  0% { transform: rotate(calc(-1.2deg * var(--xempjq-swing-amp))); }
  12.5% { transform: rotate(calc(2.4deg * var(--xempjq-swing-amp))); }
  25% { transform: rotate(calc(-2.4deg * var(--xempjq-swing-amp))); }
  37.5% { transform: rotate(calc(3.6deg * var(--xempjq-swing-amp))); }
  50% { transform: rotate(calc(-5.5deg * var(--xempjq-swing-amp))); }
  62.5% { transform: rotate(calc(5.5deg * var(--xempjq-swing-amp))); }
  75% { transform: rotate(calc(-3.6deg * var(--xempjq-swing-amp))); }
  87.5% { transform: rotate(calc(2.4deg * var(--xempjq-swing-amp))); }
  100% { transform: rotate(calc(-1.2deg * var(--xempjq-swing-amp))); }
}

@keyframes xempjq-swing-leg {
  0% { transform: rotate(calc(0.12deg * var(--xempjq-swing-amp))); }
  12.5% { transform: rotate(calc(-0.24deg * var(--xempjq-swing-amp))); }
  25% { transform: rotate(calc(0.24deg * var(--xempjq-swing-amp))); }
  37.5% { transform: rotate(calc(-0.36deg * var(--xempjq-swing-amp))); }
  50% { transform: rotate(calc(0.55deg * var(--xempjq-swing-amp))); }
  62.5% { transform: rotate(calc(-0.55deg * var(--xempjq-swing-amp))); }
  75% { transform: rotate(calc(0.36deg * var(--xempjq-swing-amp))); }
  87.5% { transform: rotate(calc(-0.24deg * var(--xempjq-swing-amp))); }
  100% { transform: rotate(calc(0.12deg * var(--xempjq-swing-amp))); }
}

@keyframes xempjq-swing-tail {
  0% { transform: rotate(calc(-0.5deg * var(--xempjq-swing-amp))); }
  12.5% { transform: rotate(calc(1deg * var(--xempjq-swing-amp))); }
  25% { transform: rotate(calc(-1deg * var(--xempjq-swing-amp))); }
  37.5% { transform: rotate(calc(1.5deg * var(--xempjq-swing-amp))); }
  50% { transform: rotate(calc(-2.2deg * var(--xempjq-swing-amp))); }
  62.5% { transform: rotate(calc(2.2deg * var(--xempjq-swing-amp))); }
  75% { transform: rotate(calc(-1.5deg * var(--xempjq-swing-amp))); }
  87.5% { transform: rotate(calc(1deg * var(--xempjq-swing-amp))); }
  100% { transform: rotate(calc(-0.5deg * var(--xempjq-swing-amp))); }
}

@keyframes xempjq-face {
  0% { transform: translateX(calc(-0.6px * var(--xempjq-swing-amp))); }
  12.5% { transform: translateX(calc(1.2px * var(--xempjq-swing-amp))); }
  25% { transform: translateX(calc(-1.2px * var(--xempjq-swing-amp))); }
  37.5% { transform: translateX(calc(1.8px * var(--xempjq-swing-amp))); }
  50% { transform: translateX(calc(-2.8px * var(--xempjq-swing-amp))); }
  62.5% { transform: translateX(calc(2.8px * var(--xempjq-swing-amp))); }
  75% { transform: translateX(calc(-1.8px * var(--xempjq-swing-amp))); }
  87.5% { transform: translateX(calc(1.2px * var(--xempjq-swing-amp))); }
  100% { transform: translateX(calc(-0.6px * var(--xempjq-swing-amp))); }
}

@keyframes xempjq-blink {
  0%,
  82%,
  100% {
    transform: scaleY(1);
  }
  85%,
  88% {
    transform: scaleY(0.08);
  }
}

.download-side {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: center;
  align-self: center;
  gap: 14px;
  max-width: min(420px, 92vw);
}

.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: min(280px, 88vw);
  padding: 0 22px;
  border: none;
  border-radius: 8px;
  background: color-mix(in srgb, #5865f2 88%, #404eed);
  color: #fff;
  font: 500 14px/1.2 Roboto, system-ui, sans-serif;
  text-decoration: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    opacity 160ms ease;
}

.download-btn:hover,
.download-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
  background: color-mix(in srgb, #5865f2 96%, #6b77ff);
  outline: none;
}

.download-btn[aria-disabled="true"] {
  opacity: 0.72;
  pointer-events: none;
  cursor: default;
  transform: none;
}

.download-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: #b5bac1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

.download-meta-sep {
  opacity: 0.7;
}

.download-pop {
  transform: scale(0);
  transform-origin: center;
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--download-pop-index, 0) * 40ms);
}

.download-pop.is-visible {
  transform: scale(1);
}

@media (max-width: 720px) {
  .download-brand-column {
    margin-top: 0;
    width: 100%;
  }

  .download-row {
    gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .download-pop {
    transform: scale(1);
    transition: none;
  }

  .xempjq-cat .all-wrap,
  .xempjq-cat .all,
  .xempjq-cat .cat-wrap,
  .xempjq-cat .cat,
  .xempjq-cat .cat-lower-wrap,
  .xempjq-cat .cat-lower,
  .xempjq-cat .cat-lower .cat-leg,
  .xempjq-cat .cat-lower .cat-paw,
  .xempjq-cat .cat-lower .cat-tail,
  .xempjq-cat .cat-head__eyes,
  .xempjq-cat .cat-head__eye {
    animation: none !important;
  }
}