.mapp {
  box-sizing: border-box;
  width: min(1240px, calc(100% - 32px));
  margin: clamp(32px, 6vw, 72px) auto;
  padding: clamp(16px, 3.8vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr);
  align-items: center;
  gap: clamp(22px, 4vw, 54px);
  color: #faf7ff;
  background: #17132d;
  border: 1px solid #382e56;
  border-radius: 16px;
  font-family: inherit;
  text-align: start;
}
.mapp *, .mapp *::before, .mapp *::after { box-sizing: border-box; }
.mapp [hidden] { display: none !important; }
.mapp__copy { min-width: 0; }
.mapp__icon { display: block; border-radius: 14px; margin: 0 0 18px; }
.mapp #mega-app-title {
  margin: 0;
  color: inherit;
  font-size: clamp(1.55rem, 3.1vw, 2.85rem);
  font-weight: 750;
  line-height: 1.13;
  letter-spacing: -.025em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.mapp__copy > p { margin: 16px 0 22px; max-width: 50ch; color: #ded4f1; line-height: 1.6; font-size: 1rem; }
.mapp__links { display: flex; flex-wrap: wrap; gap: 10px; }
.mapp .mapp__store {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #a997dc;
  border-radius: 9px;
  color: #221a39;
  background: #efe6ff;
  font-size: .94rem;
  font-weight: 750;
  text-decoration: none;
}
.mapp .mapp__store:hover { background: #fff; color: #221a39; }
.mapp .mapp__about { display: inline-block; margin-top: 15px; color: #e2ccff; text-decoration: underline; text-underline-offset: .2em; }
.mapp :is(a, button, select):focus-visible { outline: 2px solid #efceff; outline-offset: 3px; }
.mapp__figure { margin: 0; min-width: 0; }
.mapp__frame { aspect-ratio: 3 / 2; background: #f7eee4; overflow: hidden; border-radius: 12px; }
.mapp__frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mapp__controls { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 44px); gap: 6px; }
.mapp__controls :is(button, select) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid #675a84;
  border-radius: 8px;
  background: #292140;
  color: #f9f3ff;
  font: inherit;
}
.mapp__controls select { padding: 0 7px; font-size: .87rem; text-overflow: ellipsis; }
.mapp__controls button { display: grid; place-items: center; cursor: pointer; }
.mapp__controls button:hover { background: #463566; }
.mapp__controls svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mapp__controls .mapp__play, .mapp[data-paused] .mapp__pause { display: none; }
.mapp[data-paused] .mapp__play { display: block; }
.mapp__description { margin: 8px 0 0; color: #ded4f1; font-size: .86rem; line-height: 1.48; min-height: 3em; }
@media (max-width: 760px) {
  .mapp { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .mapp__description { min-height: 4.5em; }
}