:root {
  --pink: #ed0067;
  --rose: #ad145a;
  --gold: #ffdc76;
  --cream: #fff4f8;
  color: #60233c;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--cream); }
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.mobile {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: min(100%, 750px);
  height: 100vh;
  height: 100dvh;
  min-height: 520px;
  container-type: inline-size;
  background: var(--cream);
}
.room {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.mobile::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, #fff3f890 0%, #fff4f842 25%, transparent 51%, #ffc6de35 78%, var(--cream) 99%);
  pointer-events: none;
}
.masthead {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: max(20px, env(safe-area-inset-top, 0px)) 5.8cqw 0;
}
.brand { display: flex; align-items: center; gap: 2.1cqw; min-width: 0; }
.brand-logo {
  width: clamp(46px, 13.5cqw, 86px);
  aspect-ratio: 1;
  border-radius: 17%;
  border: 1px solid #fff7fb;
  box-shadow: 0 2px 10px #93174420;
  object-fit: cover;
}
.brand-copy { display: grid; gap: .75cqw; min-width: 0; line-height: 1; }
.brand-copy strong { font-size: clamp(16px, 4.5cqw, 32px); font-weight: 900; }
.brand-copy small { font-size: clamp(8px, 2.1cqw, 15px); font-weight: 600; }
.badge {
  display: inline-block;
  padding: .4em .6em;
  vertical-align: middle;
  border-radius: 999px;
  color: #652d17;
  background: linear-gradient(105deg, #fff3b3, var(--gold));
  font-size: clamp(8px, 1.75cqw, 13px);
  font-weight: 800;
  white-space: nowrap;
}
.contacts { display: flex; gap: 2.35cqw; margin-top: .8cqw; }
.contacts button {
  display: grid;
  place-items: center;
  padding: 0;
  width: clamp(31px, 8.5cqw, 61px);
  aspect-ratio: 1.5;
  border: 1.5px solid white;
  border-radius: 999px;
  background: linear-gradient(#ffc7dd, var(--pink));
  box-shadow: 0 3px 8px #84113927;
}
.contacts img { width: 55%; height: 75%; object-fit: contain; }
.hero {
  position: absolute;
  z-index: 3;
  top: 10.8%;
  left: 4%;
  width: 92%;
  display: grid;
  justify-items: center;
  pointer-events: none;
}
.headline { position: relative; width: 93.6%; aspect-ratio: 646 / 235; margin: 0; }
.headline img { position: absolute; inset: -3.15% -1.16%; width: 102.32%; height: 106.3%; }
.headline-copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  white-space: pre-line;
  text-align: center;
  font: 900 clamp(25px, 10.2cqw, 78px) / 1.1 "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: var(--rose);
  background: linear-gradient(115deg, var(--pink) 12%, #ff7aa9 49%, var(--rose) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.headline-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .5cqw;
  font: 950 clamp(20px, 8.6cqw, 64px) / .92 "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: #fff1f8;
  -webkit-text-stroke: .035em var(--rose);
  paint-order: stroke fill;
  text-shadow: 0 .035em var(--rose), .035em .075em #9d245f4d;
  transform: skewX(-6deg);
}
.headline-art__row {
  display: flex;
  align-items: baseline;
  gap: .2cqw;
  white-space: nowrap;
}
.headline-art__row--lower { margin-inline-start: 15cqw; }
.headline-art__lead { font-size: 1.62em; }
.headline-art__large { font-size: 1.23em; }
.headline-art__accent {
  color: var(--pink);
  -webkit-text-stroke-color: #ffdaeb;
  text-shadow: 0 .05em var(--rose), .035em .085em #9d245f40;
}
.headline-art__row--lower .headline-art__accent { font-size: 1.13em; }
.headline-art__app { font-size: .94em; letter-spacing: -.055em; }
.ribbon { position: relative; width: 57.2%; aspect-ratio: 395 / 81; }
.ribbon img { display: block; width: 100%; height: 100%; }
.ribbon span {
  display: grid;
  place-content: center;
  position: absolute;
  inset: 9% 8% 10% 16%;
  text-align: center;
  font: 800 clamp(11px, 3.65cqw, 26px) / 1.1 "Songti SC", "Noto Serif CJK SC", "Microsoft YaHei", serif;
  letter-spacing: .05em;
  overflow-wrap: anywhere;
  color: #fff8fb;
  text-shadow: 0 .07em .13em #aa164e99;
  transform: rotate(-2.8deg);
}
.visual { position: absolute; z-index: 2; inset: 22% 0 0; overflow: hidden; touch-action: pan-y; }
.scene {
  position: absolute;
  top: calc(24.3cqw - 22dvh + var(--y, 0cqw));
  left: var(--x, 0cqw);
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .48s ease;
  user-select: none;
  pointer-events: none;
}
.scene.is-active { opacity: 1; }
.scene.is-custom { top: auto; bottom: calc(12% - var(--y, 0cqw)); max-height: 90%; object-fit: contain; object-position: center bottom; }
.install {
  position: absolute;
  z-index: 5;
  inset: auto 0 0;
  padding: 12px 4.7cqw max(10px, env(safe-area-inset-bottom, 0px));
  background: transparent;
}
.downloads { display: flex; gap: 3.2cqw; }
.downloads button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 58px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  color: #fff8fb;
  font-size: clamp(15px, 4.7cqw, 34px);
  font-weight: 900;
  border: 1px solid #ffbad6;
  border-radius: clamp(11px, 2.4cqw, 20px);
  background: linear-gradient(105deg, #ff4c78eb, color-mix(in srgb, var(--pink) 94%, transparent));
  box-shadow: 0 4px 14px #b8195535, inset 0 1px #ffffff45;
}
.downloads button[data-link="ios"] {
  color: #73133e;
  border-color: #b7537c;
  background: #fff5fa70;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: inset 0 1px #ffffff70;
}
/* .downloads button::after {
  content: "";
  flex: 0 0 1.05em;
  height: 1.05em;
  background: currentColor;
  mask: url("assets/download.svg") center / contain no-repeat;
} */
dialog { width: min(calc(100% - 36px), 390px); border: 1px solid #fff; border-radius: 20px; padding: 22px; background: var(--cream); color: #60233c; box-shadow: 0 10px 48px #4d112f44; }
dialog::backdrop { background: #39152666; }
dialog h2 { margin: 0 0 12px; font-size: 21px; }
dialog p { white-space: pre-line; line-height: 1.65; }
dialog button { color: white; background: var(--rose); border: 0; border-radius: 999px; padding: 9px 20px; }
#preview-status { max-width: 480px; margin: 20vh auto; padding: 24px; text-align: center; }
@media (max-height: 700px) {
  .masthead { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  .hero { top: 10%; }
  .install { padding-top: 7px; }
  .downloads button { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .scene { transition: none; } }