:root {
  --orange: #ff7300;
  --orange-dark: #d95f00;
  --carousel-arrow-hover: #ff933a;
  --brown: #9f4d18;
  --brown-dark: #54270f;
  --text: #713915;
  --muted: #bd8667;
  --cream: #fff7df;
  --cream-deep: #ffe9b7;
  --pink: #fff4f2;
  --lavender: #f8f5ff;
  --blue-mist: #f4f8fd;
  --line: rgba(190, 115, 69, 0.18);
  --paper: #ffffff;
  --dialog-backdrop: rgba(0, 0, 0, 0.40);
  --header-height: 72px;
  --page-width: 1200px;
  --display-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  color-scheme: light;
  font-family: var(--display-font);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 0;
  scroll-behavior: smooth;
  overflow-anchor: none;
}

body {
  min-width: 0;
  margin: 0;
  overflow-anchor: none;
  color: var(--text);
  background: #fffaf7;
  font-family: var(--display-font);
  -webkit-font-smoothing: antialiased;
}

body.dialog-open {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid rgba(42, 112, 230, 0.42);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  background: #222;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

.page-shell {
  width: min(var(--page-width), calc(100% - 48px));
  margin-inline: auto;
}

.section-anchor {
  scroll-margin-top: calc(var(--header-height) + 18px);
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: var(--header-height);
  border: 0;
  background: transparent;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.site-header.is-scrolled {
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #16110d;
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}

.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav-link,
.footer-links button {
  padding: 0;
  border: 0;
  color: #7b4322;
  background: transparent;
  font-size: 15px;
  cursor: pointer;
}

.nav-link:hover,
.footer-links a:hover,
.footer-links button:hover {
  color: var(--orange);
}

.header-download {
  min-height: 44px;
  padding: 0 20px;
  border: 2px solid #ef8e37;
  border-radius: 12px;
  color: #d8670d;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.header-download.is-prominent {
  border-color: var(--orange);
  color: #fff;
  background: var(--orange);
  box-shadow: 0 10px 24px rgba(255, 115, 0, 0.24);
}

.header-download:not(:disabled):hover {
  border-color: #ef8e37;
  color: #d8670d;
  background: #fff2e7;
  box-shadow: none;
}

.header-download:disabled,
.primary-button:disabled,
.secondary-download:disabled,
.mac-chip-action:disabled,
.character-download-card button:disabled {
  border-color: #d9d2cc;
  color: #9d9792;
  background: #eeeae7;
  box-shadow: none;
  cursor: not-allowed;
}

.mobile-menu-trigger {
  min-width: 94px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid #f0a35f;
  border-radius: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--brown);
  background: #fff9f2;
  font-weight: 700;
  cursor: pointer;
}

.mobile-menu-trigger svg {
  width: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.hero {
  min-height: calc(100svh - var(--header-height));
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 25%, rgba(255, 226, 119, 0.32), transparent 23%),
    linear-gradient(180deg, #fff9e3 0%, #fffdf0 72%, #fff4d2 100%);
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 220, 126, 0.18);
  pointer-events: none;
}

.hero-blob-left {
  width: 570px;
  height: 340px;
  top: -205px;
  left: -90px;
}

.hero-blob-right {
  width: 380px;
  height: 380px;
  top: 20px;
  right: -290px;
}

.hero-layout {
  min-height: 820px;
  padding-block: 78px 150px;
  display: grid;
  grid-template-columns: minmax(410px, 0.85fr) minmax(560px, 1.15fr);
  align-items: center;
  gap: 42px;
}

.hero-copy {
  position: relative;
  z-index: 3;
}

.hero-copy h1,
.section-heading h2,
.download-banner h2 {
  margin: 0;
  color: var(--brown-dark);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.hero-copy h1 {
  font-size: clamp(46px, 4.3vw, 68px);
  line-height: 1.32;
  white-space: nowrap;
  text-shadow:
    0 3px 0 #fff,
    3px 0 0 #fff,
    -3px 0 0 #fff;
}

.hero-copy h1 span,
.section-heading h2 span {
  color: var(--orange);
}

.hero-copy > p {
  margin: 36px 0 0;
  color: #9f5d35;
  font-size: 18px;
  font-weight: 650;
  line-height: 2;
}

.hero-download {
  margin-top: 48px;
}

.hero-primary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.primary-button {
  min-height: 68px;
  padding: 0 30px;
  border: 0;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  background: var(--orange);
  box-shadow: 0 13px 28px rgba(255, 115, 0, 0.23);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.primary-button:not(:disabled):hover {
  background: var(--orange-dark);
  box-shadow: 0 16px 32px rgba(255, 115, 0, 0.3);
  transform: translateY(-2px);
}

.platform-icon {
  font-size: 28px;
  line-height: 1;
}

.other-version-toggle {
  margin-top: 18px;
  padding: 4px 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #477bb8;
  background: transparent;
  cursor: pointer;
}

.other-version-toggle svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 160ms ease;
}

.other-version-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.other-version-panel {
  margin-top: 12px;
}

.secondary-download {
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid #ef9b53;
  border-radius: 9px;
  color: #bd5e16;
  background: rgba(255, 255, 255, 0.86);
  font-weight: 700;
  cursor: pointer;
}

.download-meta {
  margin: 15px 0 0;
  color: #a87d63;
  font-size: 13px;
}

.download-status {
  min-height: 20px;
  margin-top: 9px;
  color: #aa2d1d;
  font-size: 13px;
}

.retry-button {
  margin-top: 3px;
  padding: 3px 0;
  border: 0;
  color: #1d64aa;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.hero-art {
  min-width: 0;
  position: relative;
  z-index: 2;
  align-self: end;
  margin-right: -135px;
  padding-top: 34px;
}

.hero-device {
  width: min(760px, 100%);
  margin-left: auto;
}

.hero-pet,
.hero-person {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.hero-pet-top {
  width: 102px;
  top: -3px;
  left: 24%;
}

.hero-pet-left {
  width: 126px;
  bottom: 4%;
  left: -2%;
}

.hero-pet-right {
  width: 104px;
  right: 2%;
  bottom: 8%;
}

.hero-pet-bottom {
  width: 135px;
  left: -21%;
  bottom: -3%;
}

.hero-person {
  width: 198px;
  right: -2%;
  bottom: 1%;
}

.hero-desk {
  height: 116px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 3px solid rgba(225, 171, 85, 0.42);
  background:
    linear-gradient(rgba(255, 255, 255, 0.16), transparent),
    repeating-linear-gradient(92deg, rgba(216, 160, 74, 0.06) 0 2px, transparent 2px 84px),
    #ffe1a3;
}

.tutorial-section,
.characters-section,
.features-section,
.faq-section {
  padding-block: 112px;
}

.tutorial-section {
  background: var(--lavender);
}

.section-heading > p {
  margin: 0 0 16px;
  color: #c3977e;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.section-heading h2 {
  font-size: clamp(38px, 3.7vw, 54px);
  line-height: 1.35;
}

.centered-heading {
  text-align: center;
}

.tutorial-list {
  margin: 64px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  list-style: none;
}

.tutorial-step {
  min-width: 0;
  position: relative;
  text-align: center;
}

.tutorial-step:not(:last-child)::after {
  content: "";
  width: calc(100% - 48px);
  position: absolute;
  z-index: 0;
  top: 34px;
  left: calc(50% + 46px);
  border-top: 3px dashed rgba(210, 177, 245, 0.7);
}

.step-number {
  width: 68px;
  height: 68px;
  position: relative;
  z-index: 1;
  margin: 0 auto 34px;
  border: 4px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--orange);
  box-shadow: 0 7px 16px rgba(255, 115, 0, 0.16);
  font-size: 32px;
  font-weight: 900;
}

.tutorial-card {
  aspect-ratio: 1.26 / 1;
  border: 8px solid #fff;
  border-radius: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
}

.tutorial-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tutorial-step h3 {
  margin: 28px 0 9px;
  color: #954816;
  font-size: 28px;
}

.tutorial-step p {
  margin: 0;
  color: #bc8767;
  font-size: 16px;
}

.section-action {
  margin-top: 60px;
  text-align: center;
}

.compact-button {
  min-height: 58px;
  padding-inline: 26px;
  font-size: 17px;
}

.characters-section {
  background: #fff9f8;
}

.characters-section .section-heading > p {
  margin-top: 14px;
  color: #c99f8a;
}

.character-carousel-shell {
  min-width: 0;
  margin-top: 66px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 22px;
}

.character-carousel {
  min-width: 0;
  padding: 8px 4px 18px;
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.character-carousel::-webkit-scrollbar {
  display: none;
}

.character-card {
  flex: 0 0 176px;
  height: 232px;
  margin: 0;
  border: 8px solid #fff;
  border-radius: 23px;
  display: grid;
  place-items: center;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 8px 20px rgba(114, 74, 49, 0.06);
}

.character-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.character-lavender { background: #eee7ff; }
.character-yellow { background: #ffe6a7; }
.character-pink { background: #ffe8e7; }

.carousel-arrow {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--orange);
  box-shadow: 0 7px 18px rgba(255, 115, 0, 0.2);
  cursor: pointer;
}

.carousel-arrow svg {
  width: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.carousel-arrow:not(:disabled):hover {
  background: var(--carousel-arrow-hover);
}

.carousel-arrow:disabled {
  opacity: 1;
  background: #ffc084;
  cursor: not-allowed;
}

.character-download-card {
  padding: 57px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: #99521e;
  background: #fff8ef;
  font-family: "Kingnam Maiyuan", sans-serif;
  text-align: center;
}

.character-download-card span {
  display: block;
  margin-top: 4px;
  color: rgba(153, 82, 30, 0.7);
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
}

.hero-copy-mobile-text {
  display: none;
}

.character-download-card strong {
  display: block;
  font-size: 22px;
  font-weight: 400;
  line-height: 26px;
  white-space: nowrap;
}

.character-download-card button {
  width: 90px;
  height: 36px;
  min-height: 0;
  margin-top: 20px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: transparent url("homepage-v3/figma/character-download-button.svg") center / 100% 100% no-repeat;
  font: 400 16px/36px "Kingnam Maiyuan", sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.features-section {
  background: var(--blue-mist);
}

.features-heading {
  margin-left: 90px;
}

.feature-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 86px;
}

.feature-item {
  min-width: 0;
  min-height: 300px;
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(180px, 1.1fr);
  align-items: center;
  gap: 24px;
}

.feature-item img {
  width: min(280px, 100%);
  justify-self: center;
}

.feature-copy > span {
  display: inline-block;
  margin-bottom: 13px;
  padding: 5px 14px;
  border-radius: 999px;
  color: #ff8c2b;
  background: #ffebe7;
  font-size: 15px;
  font-weight: 800;
}

.feature-copy h3 {
  margin: 0;
  color: #a34d16;
  font-size: 29px;
  line-height: 1.35;
}

.feature-copy p {
  margin: 13px 0 0;
  color: #c18b6d;
  font-size: 16px;
  line-height: 1.6;
}

.feature-reminder {
  grid-column: 1 / -1;
  grid-template-columns: minmax(220px, 0.8fr) minmax(220px, 0.55fr) minmax(260px, 1fr);
  justify-self: center;
  width: min(920px, 100%);
}

.reminder-bubbles {
  display: grid;
  gap: 12px;
}

.reminder-bubbles span {
  width: max-content;
  max-width: 100%;
  padding: 9px 15px;
  border: 2px solid #d7ae8c;
  border-radius: 18px;
  color: #aa6a3f;
  background: #fff;
  font-size: 14px;
}

.reminder-bubbles span:nth-child(2) { margin-left: 42px; }
.reminder-bubbles span:nth-child(3) { margin-left: 5px; }

.download-banner {
  min-height: 330px;
  padding: 58px 0 0;
  position: relative;
  overflow: hidden;
  background: #fff0c9 url("homepage-v3/cta-decor-left.webp") center bottom / cover no-repeat;
}

.download-banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.download-banner h2 {
  font-size: clamp(38px, 3.6vw, 54px);
}

.download-banner p {
  margin: 13px 0 24px;
  color: #b77b51;
  font-size: 17px;
}

.download-banner .download-status {
  margin-inline: auto;
}

.download-banner-pets {
  width: 90px;
  position: absolute;
  top: 118px;
  left: calc(50% + 185px);
}

.faq-section {
  background: #fffaf8;
}

.faq-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  gap: 86px;
}

.faq-intro {
  text-align: center;
}

.faq-intro .section-heading h2 {
  font-size: 54px;
}

.faq-intro > img {
  width: 150px;
  margin: 28px auto 0;
}

.faq-list {
  display: grid;
  gap: 20px;
}

.faq-item {
  border: 2px solid #f1dfd4;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.faq-question {
  width: 100%;
  min-height: 82px;
  padding: 0 24px;
  border: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
  color: #8f4a1f;
  background: transparent;
  text-align: left;
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
}

.faq-index {
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.faq-icon {
  width: 32px;
  height: 32px;
  display: block;
}

.faq-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.faq-icon-close,
.faq-question[aria-expanded="true"] .faq-icon-add {
  display: none !important;
}

.faq-question[aria-expanded="true"] .faq-icon-close {
  display: block !important;
}

.faq-answer {
  padding: 0 78px 24px;
  border-top: 1px solid #f3e5dc;
  color: #b47d5c;
  font-size: 17px;
  line-height: 1.8;
}

.faq-answer:empty {
  min-height: 1px;
  padding-block: 0;
  border-top-color: transparent;
}

.site-footer {
  min-height: 172px;
  padding-block: 40px;
  background: #fff7d5;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
}

.footer-brand img {
  width: 44px;
  height: 44px;
  border-radius: 9px;
}

.footer-content {
  text-align: right;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 28px;
}

.footer-links a,
.footer-links button {
  color: #8e5632;
  font-size: 14px;
}

.footer-content > p {
  margin: 24px 0 0;
  color: #bd8b69;
  font-size: 13px;
}

.dialog-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  padding: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: var(--dialog-backdrop);
}

.dialog-backdrop.is-open {
  display: flex;
}

.wechat-dialog,
.mac-chip-dialog,
.manual-copy-dialog,
.mobile-menu-panel {
  width: min(520px, 100%);
  position: relative;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(38, 22, 11, 0.26);
}

.wechat-dialog,
.manual-copy-dialog {
  padding: 36px;
  text-align: center;
}

.dialog-close {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #885638;
  background: #fff2e7;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.wechat-dialog > .dialog-close,
.mac-chip-dialog > .dialog-close,
.manual-copy-dialog > .dialog-close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
}

.wechat-dialog h2,
.mac-chip-dialog h2,
.manual-copy-dialog h2,
.mobile-menu-head h2 {
  margin: 0;
  color: #5b2c13;
  font-size: 26px;
}

.wechat-dialog > p,
.manual-copy-dialog > p {
  margin: 12px 0 20px;
  color: #9b755e;
  line-height: 1.65;
}

.wechat-qr {
  min-height: 260px;
  display: grid;
  place-items: center;
}

.wechat-qr img {
  width: 260px;
  height: 260px;
  object-fit: contain;
}

.wechat-dialog small {
  display: block;
  margin-top: 14px;
  color: #a88672;
}

.mac-chip-dialog {
  width: min(690px, 100%);
  min-height: 528px;
  border-radius: 40px;
  overflow: hidden;
}

.mac-chip-content {
  padding: 40px 36px 18px;
}

.mac-chip-content h2 {
  margin-bottom: 9px;
  text-align: center;
}

.mac-modal-title-art {
  width: 276px;
  height: 32px;
  margin: 0 auto 16px;
  object-fit: contain;
}

.mac-chip-content > p {
  margin: 0 0 30px;
  color: var(--figma-brown);
  font-family: "Kingnam Maiyuan", sans-serif;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}

.mac-chip-dialog-close {
  width: 32px;
  height: 32px;
  position: absolute;
  z-index: 2;
  top: 30px;
  right: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.mac-chip-dialog-close img {
  width: 32px;
  height: 32px;
}

.mac-chip-dialog-close:focus-visible {
  outline: 2px solid var(--figma-orange);
  outline-offset: 3px;
  border-radius: 50%;
}

.mac-chip-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.mac-chip-action {
  width: 100%;
  min-height: 88px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  display: block;
  background: transparent;
  cursor: pointer;
}

.mac-chip-action > img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.mac-chip-action-primary {
  background: transparent;
}

.mac-chip-action-secondary {
  background: transparent;
}

.mac-chip-action strong { font-size: 20px; font-weight: 400; }
.mac-chip-action span { color: rgba(153, 82, 30, 0.62); font-size: 16px; }

.mac-chip-guide {
  width: calc(100% - 72px);
  height: auto;
  aspect-ratio: 618 / 249;
  margin: 0 auto 35px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #f4f5f6;
}

.mac-chip-guide img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.manual-copy-dialog input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 2px solid #edc4a9;
  border-radius: 10px;
  color: #6e3b1f;
  background: #fffaf7;
  text-align: center;
}

.mobile-menu-panel {
  align-self: flex-start;
  margin-top: 64px;
  padding: 24px;
}

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu-panel nav {
  margin-top: 18px;
  display: grid;
  gap: 8px;
}

.mobile-menu-panel nav > a,
.mobile-menu-panel nav > button {
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  color: #76401f;
  background: #fff8ef;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}

.toast {
  width: max-content;
  max-width: min(520px, calc(100% - 32px));
  position: fixed;
  z-index: 150;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 13px 18px;
  border-radius: 10px;
  color: #fff;
  background: rgba(48, 36, 27, 0.94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
}

.image-fallback {
  padding: 16px;
  place-self: center;
  color: #9b7660;
  text-align: center;
  font-size: 14px;
}

@media (max-width: 1120px) {
  .hero-layout {
    grid-template-columns: minmax(360px, 0.85fr) minmax(480px, 1.15fr);
    gap: 12px;
  }

  .hero-art {
    margin-right: -90px;
  }

  .hero-person {
    width: 165px;
  }

  .feature-grid {
    gap-inline: 30px;
  }
}

@media (max-width: 900px) {
  :root { --header-height: 68px; }

  .desktop-nav { gap: 20px; }

  .hero-layout {
    min-height: auto;
    padding-block: 66px 132px;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-copy > p { margin-inline: auto; }
  .hero-primary-actions { justify-content: center; }
  .hero-art { width: min(650px, 90%); margin: 42px auto 0; }
  .hero-pet-bottom { left: -7%; }
  .hero-person { right: -5%; }

  .tutorial-list { gap: 20px; }
  .tutorial-step h3 { font-size: 22px; }

  .feature-grid { grid-template-columns: 1fr; }
  .feature-reminder { grid-column: auto; }

  .faq-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 760px) {
  :root { --header-height: 64px; }

  .page-shell { width: min(100% - 32px, var(--page-width)); }
  .desktop-nav { display: none; }
  .mobile-menu-trigger { display: inline-flex; }
  .brand { font-size: 18px; }
  .brand-logo { width: 38px; height: 38px; }

  .hero-layout { padding-block: 52px 94px; }
  .hero-copy h1 { font-size: clamp(36px, 10.5vw, 48px); line-height: 1.35; white-space: normal; }
  .hero-copy > p { margin-top: 24px; font-size: 15px; line-height: 1.8; }
  .hero-copy > p br { display: none; }
  .hero-download { margin-top: 34px; }
  .hero-primary-actions { display: grid; }
  .primary-button { width: 100%; min-height: 58px; padding-inline: 20px; font-size: 17px; }
  .other-version-toggle { margin-top: 14px; }
  .other-version-panel { text-align: center; }
  .hero-art { width: 105%; margin-top: 42px; }
  .hero-pet-left { width: 82px; left: -3%; }
  .hero-pet-right { width: 72px; right: 1%; }
  .hero-pet-top { width: 72px; }
  .hero-pet-bottom { width: 88px; left: -2%; }
  .hero-person { width: 116px; right: -3%; }
  .hero-desk { height: 78px; }

  .tutorial-section,
  .characters-section,
  .features-section,
  .faq-section { padding-block: 76px; }

  .section-heading > p { margin-bottom: 10px; font-size: 15px; }
  .section-heading h2 { font-size: clamp(30px, 8vw, 40px); }
  .tutorial-list { margin-top: 48px; grid-template-columns: 1fr; gap: 40px; }
  .tutorial-step { display: grid; grid-template-columns: 54px minmax(0, 1fr); grid-template-areas: "number title" "line card" "line copy"; column-gap: 18px; text-align: left; }
  .tutorial-step:not(:last-child)::after { width: 0; height: calc(100% + 40px); top: 54px; left: 27px; border-top: 0; border-left: 3px dashed rgba(210, 177, 245, 0.7); }
  .step-number { grid-area: number; width: 54px; height: 54px; margin: 0; font-size: 25px; }
  .tutorial-card { grid-area: card; margin-top: 14px; }
  .tutorial-step h3 { grid-area: title; align-self: center; margin: 0; font-size: 22px; }
  .tutorial-step p { grid-area: copy; margin-top: 12px; font-size: 14px; }
  .section-action { margin-top: 48px; }

  .character-carousel-shell { margin-top: 42px; display: block; }
  .carousel-arrow { display: none; }
  .character-carousel { width: calc(100% + 12px); padding-right: 36px; }
  .character-card { flex-basis: min(45vw, 168px); height: 220px; }

  .features-heading { margin-left: 0; text-align: center; }
  .feature-grid { margin-top: 40px; gap: 28px; }
  .feature-item,
  .feature-reminder { width: 100%; min-height: 0; padding: 24px; border-radius: 22px; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; background: rgba(255, 255, 255, 0.64); }
  .feature-item img { width: 128px; grid-row: 1; }
  .feature-item .feature-copy { grid-row: 1; }
  .feature-click .feature-copy,
  .feature-nap .feature-copy { grid-column: 2; }
  .feature-click img,
  .feature-nap img { grid-column: 1; }
  .feature-copy > span { margin-bottom: 8px; padding: 4px 10px; font-size: 12px; }
  .feature-copy h3 { font-size: 20px; }
  .feature-copy p { margin-top: 7px; font-size: 13px; }
  .reminder-bubbles { grid-column: 1 / -1; }
  .reminder-bubbles span:nth-child(n) { margin-left: 0; font-size: 12px; }

  .download-banner { min-height: 360px; padding-top: 54px; background-size: auto 100%; }
  .download-banner h2 { font-size: 34px; }
  .download-banner p { font-size: 14px; line-height: 1.7; }
  .download-banner .compact-button { width: auto; }
  .download-banner-pets { width: 74px; top: 170px; left: calc(50% + 102px); }

  .faq-layout { grid-template-columns: 1fr; gap: 34px; }
  .faq-intro { display: grid; grid-template-columns: 1fr 110px; align-items: end; text-align: left; }
  .faq-intro > img { width: 100px; margin: 0; }
  .faq-intro .section-heading h2 { font-size: 40px; }
  .faq-question { min-height: 72px; padding-inline: 16px; grid-template-columns: 34px minmax(0, 1fr) 26px; gap: 8px; font-size: 16px; }
  .faq-answer { padding-inline: 58px 18px; font-size: 15px; }

  .site-footer { padding-block: 34px; }
  .footer-inner { display: block; }
  .footer-content { margin-top: 28px; text-align: left; }
  .footer-links { justify-content: flex-start; gap: 16px 22px; }
  .footer-content > p { line-height: 1.7; }

  .dialog-backdrop { padding: 16px; }
  .wechat-dialog,
  .manual-copy-dialog { padding: 34px 20px 24px; }
  .mac-chip-content { padding: 42px 20px 24px; }
  .mac-chip-actions { grid-template-columns: 1fr; }
  .mac-chip-guide { padding: 18px 16px 20px; }
}

@media (max-width: 380px) {
  .page-shell { width: min(100% - 24px, var(--page-width)); }
  .mobile-menu-trigger { min-width: 82px; padding-inline: 11px; }
  .hero-copy h1 { font-size: 34px; white-space: normal; }
  .feature-item,
  .feature-reminder { padding: 18px; grid-template-columns: 104px minmax(0, 1fr); }
  .feature-item img { width: 104px; }
  .feature-copy h3 { font-size: 18px; }
  .character-card { flex-basis: 150px; height: 206px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Figma 510:16745 - join-community dialog. */
.wechat-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 440px;
  max-width: none;
  height: 520px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 40px;
  box-shadow: none;
  transform: translate(-50%, -50%);
  transform-origin: center;
  text-align: center;
}

.wechat-dialog-close {
  position: absolute;
  z-index: 2;
  top: 29px;
  right: 30px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
}

.wechat-dialog-close img {
  width: 32px;
  height: 32px;
}

.wechat-dialog-title {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 140px;
  height: 34px;
  transform: translateX(-50%);
}

.wechat-dialog-title span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 140px;
  height: 12px;
  background: #fff2b8;
}

.wechat-dialog-title img {
  position: relative;
  z-index: 1;
  width: 127px;
  height: 28px;
  margin: 0 auto;
}

.wechat-dialog .wechat-dialog-subtitle {
  position: absolute;
  top: 88px;
  left: 0;
  width: 100%;
  margin: 0;
  color: #99521e;
  font-family: "Kingnam Maiyuan", sans-serif;
  font-size: 20px;
  line-height: 20px;
}

.wechat-dialog .wechat-qr {
  position: absolute;
  top: 148px;
  left: 80px;
  width: 280px;
  height: 280px;
  min-height: 0;
  padding: 11px 7px 10px;
  border: 7.467px solid #fff0d3;
  border-radius: 26.133px;
  background: #fff;
}

.wechat-dialog .wechat-qr > img {
  width: 252px;
  height: 244px;
  object-fit: fill;
}

.wechat-dialog .wechat-dialog-hint {
  position: absolute;
  top: 448px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin: 0;
  color: #99521e;
  transform: translateX(-50%);
  font-family: "Kingnam Maiyuan", sans-serif;
  font-size: 24px;
  line-height: 32px;
  white-space: nowrap;
}

.wechat-dialog-hint img {
  width: 32px;
  height: 32px;
}

@media (max-width: 500px) {
  .wechat-dialog {
    transform: translate(-50%, -50%) scale(min(calc((100vw - 32px) / 440px), calc((100vh - 32px) / 520px)));
  }
}

/* Figma fidelity layer: desktop 1920px canvas and mobile 750px canvas. */
@font-face {
  font-family: "Kingnam Maiyuan";
  src: url("homepage-v3/kingnam-maiyuan.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --figma-brown: #99521e;
  --figma-orange: #ff7300;
  --figma-scale: min(1px, calc(100vw / 1920));
  --display-font: "Kingnam Maiyuan", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-family: var(--display-font);
}

@media (min-width: 761px) {
  body {
    background: #fff8dc url("homepage-v3/figma/hero-background-20260831-195538.jpg") center -80px / 100% auto no-repeat;
  }
}

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

.site-header {
  height: 72px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.site-header.is-scrolled {
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.header-inner {
  width: min(1200px, calc(100% - 48px));
}

.brand,
.footer-brand {
  display: block;
  line-height: 0;
}

.brand picture,
.brand picture img {
  display: block;
  width: 135px;
  height: 42px;
}

.desktop-nav {
  width: auto;
  display: grid;
  grid-template-columns: 58px 58px 58px minmax(176px, max-content);
  align-items: center;
  column-gap: 56px;
}

.nav-link {
  color: var(--figma-brown);
  font-family: "Kingnam Maiyuan", sans-serif;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

.header-download {
  width: auto;
  min-height: 44px;
  padding: 0 20px;
  border: 2px solid #ff6f00;
  border-radius: 12px;
  color: #ff6f00;
  background: #fff;
  box-shadow: none;
  font-family: "Kingnam Maiyuan", sans-serif;
  font-size: 20px;
  font-weight: 400;
  white-space: nowrap;
}

.header-download.is-prominent {
  border-color: var(--figma-orange);
  background: var(--figma-orange);
}

.mobile-menu-trigger,
.mobile-platform-note,
.mobile-bottom-cta,
.mobile-hero-art,
.tutorial-mobile-step-art,
.feature-mobile-content,
.mobile-character {
  display: none;
}

.hero {
  width: 100%;
  height: max(0px, calc(min(968px, 50.4167vw) - 80px));
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
  background: transparent;
}

.hero-blob {
  display: none;
}

.hero-desk {
  width: min(1896px, 98.75%);
  height: min(188px, 9.7917vw);
  position: absolute;
  z-index: 1;
  top: max(0px, calc(min(851px, 44.3229vw) - 152px));
  right: auto;
  bottom: auto;
  left: 50%;
  display: block;
  border: 0;
  background: url("homepage-v3/figma/hero-desk.webp") center / 100% 100% no-repeat;
  transform: translateX(-50%);
}

.hero-layout {
  width: min(1920px, 100%);
  min-height: 0;
  height: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: 14.4792% 31.25% 1.7708% 48.5833% 3.9167%;
  align-items: start;
  gap: 0;
  position: relative;
  left: clamp(-80px, -4.1667vw, 0px);
}

.hero-copy {
  grid-column: 2;
  margin-top: max(0px, calc(min(188px, 9.7917vw) - 72px));
  text-align: left;
}

.hero-title-art,
.hero-title-art img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-copy > p {
  width: min(582px, 30.3125vw);
  max-width: 100%;
  margin: min(37px, 1.9271vw) 0 0 min(6px, 0.3125vw);
  color: var(--figma-brown);
  font-family: "Kingnam Maiyuan", sans-serif;
  font-size: min(24px, 1.25vw);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.hero-download {
  min-height: 224px;
  position: relative;
  margin-top: min(90px, 4.6875vw);
  margin-left: min(6px, 0.3125vw);
}

.hero-download.is-other-version-expanded,
.hero-download.is-all-versions {
  margin-top: min(40px, 2.0833vw);
}

.hero-primary-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.primary-button,
.secondary-download,
.figma-image-button {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: block;
  background: transparent;
  box-shadow: none;
  line-height: 0;
  cursor: pointer;
}

.primary-button:hover,
.secondary-download:hover,
.figma-image-button:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.primary-button img,
.secondary-download img {
  width: min(400px, 20.8333vw);
  height: min(100px, 5.2083vw);
}

.primary-button:disabled,
.secondary-download:disabled,
.figma-image-button:disabled {
  opacity: 0.52;
  background: transparent;
}

.other-version-toggle {
  position: absolute;
  top: min(36px, 1.875vw);
  left: min(450px, 23.4375vw);
  margin: 0;
  color: #99521e;
  font-family: "PingFang SC", sans-serif;
  font-size: min(20px, 1.0417vw);
  white-space: nowrap;
}

.other-version-toggle svg {
  width: min(20px, 1.0417vw);
}

.other-version-panel {
  margin-top: 24px;
}

.download-meta,
.download-status,
.retry-button {
  display: none;
}

.hero-art {
  grid-column: 4;
  width: 100%;
  margin: max(0px, calc(min(252.88px, 13.1708vw) - 72px)) 0 0;
  padding: 0;
  position: relative;
  align-self: start;
}

.hero-device {
  width: 100%;
  margin: 0;
}

.hero-pet,
.hero-person {
  height: auto;
}

.hero-pet-top {
  width: 15.472%;
  top: -18.64%;
  left: 12.736%;
}

.hero-pet-left {
  width: 21.132%;
  top: calc(68.94% + min(20px, 1.0417vw));
  bottom: auto;
  left: -31.698%;
  right: auto;
}

.hero-pet-right {
  width: 21.132%;
  top: calc(68.94% + min(20px, 1.0417vw));
  bottom: auto;
  left: -58.679%;
  right: auto;
}

.hero-pet-bottom {
  width: 29.811%;
  top: 18.492%;
  bottom: auto;
  left: 35.094%;
}

.hero-person {
  display: none;
}

.tutorial-section,
.characters-section,
.features-section,
.download-banner,
.faq-section,
.site-footer {
  width: 100%;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.tutorial-section { height: min(1036px, 53.9583vw); background: #f9f6ff; }
.characters-section { height: min(684px, 35.625vw); background: #fff7f7; }
.features-section { height: min(1250px, 65.1042vw); background: #f7fbff; }
.download-banner { height: min(330px, 17.1875vw); min-height: 0; background: #fff0c9 url("homepage-v3/cta-decor-left.webp") center / 100% 100% no-repeat; }
.faq-section { min-height: min(668px, 34.7917vw); height: auto; background: #fffaf7; overflow-anchor: none; }
.site-footer { min-height: 0; height: min(158px, 8.2292vw); background: #fff8d9; }

.tutorial-section > .page-shell,
.characters-section > .page-shell,
.features-section > .page-shell,
.download-banner > .page-shell {
  width: min(1920px, 100%);
  height: 100%;
  position: relative;
}

.faq-section > .page-shell {
  width: min(1920px, 100%);
  height: auto;
  min-height: inherit;
  position: relative;
}

.section-title-art {
  position: absolute;
  display: block;
  line-height: 0;
}

.section-title-art img,
.faq-title-art img,
.cta-title-art {
  width: 100%;
  height: auto;
}

.tutorial-title-art {
  width: 41.3021%;
  top: 10.6178%;
  left: 29.2188%;
}

.tutorial-list {
  width: 65.4167%;
  height: 40.2509%;
  position: absolute;
  top: 36.3899%;
  left: 17.2917%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.707%;
}

.tutorial-step {
  min-width: 0;
  height: 100%;
  position: relative;
  display: block;
  text-align: center;
}

.tutorial-step:not(:last-child)::after {
  width: 84.343%;
  top: -66px;
  left: calc(50% + 45px);
}

.step-number {
  width: 70px;
  height: 70px;
  position: absolute;
  top: -101px;
  left: calc(50% - 35px);
  margin: 0;
  border-width: 4px;
  font-family: "Kingnam Maiyuan", sans-serif;
  font-size: 36px;
}

.tutorial-card {
  width: 100%;
  height: auto;
  aspect-ratio: 792 / 630;
  position: relative;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.tutorial-card > img:not(.tutorial-decor) {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tutorial-step h3 {
  margin: 16px 0 0;
  color: var(--figma-brown);
  font-family: "Kingnam Maiyuan", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.tutorial-step p {
  margin: 16px 0 0;
  color: rgba(153, 82, 30, 0.7);
  font-family: "Kingnam Maiyuan", sans-serif;
  font-size: 16px;
  line-height: 1;
}

.tutorial-card > .tutorial-decor {
  position: absolute;
  z-index: 2;
  height: auto;
  pointer-events: none;
}

.tutorial-card > .tutorial-decor-left {
  width: 24.4949%;
  top: -10.5333%;
  left: -4.0404%;
}

.tutorial-card > .tutorial-decor-right {
  width: 22.4747%;
  right: -10.8586%;
  bottom: -5.3968%;
}

.section-action {
  position: absolute;
  top: 82.6255%;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

.tutorial-download-button img {
  width: min(222px, 11.5625vw);
}

.characters-title-art {
  width: 35.4688%;
  top: 18.7135%;
  left: 32.0313%;
}

.character-carousel-shell {
  width: 66.6667%;
  height: 232px;
  position: absolute;
  top: 47.3684%;
  left: 16.7188%;
  margin: 0;
  display: grid;
  grid-template-columns: 48px 24px minmax(0, 1fr) 24px 48px;
  gap: 0;
}

.character-carousel {
  grid-column: 3;
  width: 100%;
  height: 232px;
  padding: 0;
  gap: 16px;
}

.character-card {
  flex: 0 0 176px;
  height: 232px;
  padding: 0;
  border: 6px solid #fff;
  border-radius: 24px;
  box-shadow: none;
}

.character-card img {
  width: 160px;
  height: 190px;
  object-fit: contain;
}

.character-lavender { background: #f2e9ff; }
.character-yellow { background: #ffeabc; }
.character-pink { background: #ffecec; }

.carousel-arrow {
  width: 48px;
  height: 48px;
  align-self: center;
  box-shadow: none;
}

.carousel-arrow-left { grid-column: 1; }
.carousel-arrow-right { grid-column: 5; }
.character-download-card {
  padding: 57px 16px 0;
  display: flex;
}

.features-title-art {
  width: 32.9688%;
  top: 10.24%;
  left: 18.5417%;
}

.feature-grid {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  margin: 0;
  display: block;
}

.feature-item {
  min-height: 0;
  position: absolute;
  display: block;
}

.feature-desktop-art {
  display: none;
}

.feature-click { width: 27.0208%; aspect-ratio: 518.8 / 240; left: 18.6458%; top: 28.48%; }
.feature-keyboard { width: 28.1771%; aspect-ratio: 541 / 240; left: 53.6458%; top: 22.4%; }
.feature-quiet { width: 27.0313%; aspect-ratio: 519 / 240; left: 53.6458%; top: 48.16%; }
.feature-nap { width: 27.0208%; aspect-ratio: 518.8 / 240; left: 18.6458%; top: 62.08%; }
.feature-reminder { width: 24.9479%; aspect-ratio: 479 / 289; left: 51.25%; top: 70%; }

.feature-mobile-content {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.feature-character-animation,
.feature-copy-art,
.feature-reminder-bubbles,
.reminder-bubble {
  position: absolute;
}

.feature-character-animation,
.feature-copy-art > img,
.reminder-bubble {
  height: auto;
  max-width: none;
}

.feature-copy-art {
  display: block;
  line-height: 0;
}

.feature-copy-art > img {
  width: 100%;
}

.feature-click .feature-character-animation { width: 46.2616%; top: 0; left: 53.7384%; }
.feature-click .feature-copy-art { width: 44.1403%; top: 25.6667%; left: 0; }
.feature-keyboard .feature-character-animation { width: 44.3623%; top: 0; left: 0; }
.feature-keyboard .feature-copy-art { width: 46.3956%; top: 24.6667%; left: 53.2348%; }
.feature-quiet .feature-character-animation { width: 46.2428%; top: 0; left: 0; }
.feature-quiet .feature-copy-art { width: 44.1233%; top: 24.6667%; left: 55.4913%; }
.feature-nap .feature-character-animation { width: 46.2616%; top: 0; left: 53.7384%; }
.feature-nap .feature-copy-art { width: 37.9722%; top: 25.6667%; left: 0; }
.feature-reminder .feature-character-animation { width: 50.1044%; top: 16.955%; left: 9.6033%; }
.feature-reminder .feature-copy-art { width: 29.8539%; top: 37.4394%; left: 69.7286%; }

.feature-reminder-bubbles {
  inset: 0;
  pointer-events: none;
}

.feature-reminder .reminder-bubble-todo { width: 46.5553%; top: 0; left: 5.6367%; }
.feature-reminder .reminder-bubble-break { width: 20.4593%; top: 14.1869%; left: 41.3361%; }
.feature-reminder .reminder-bubble-water { width: 10.6472%; top: 47.0588%; left: 0; }
.mobile-reminder-bubble { display: none; }

.download-banner-content {
  text-align: left;
}

.cta-title-art {
  width: 26.8229%;
  position: absolute;
  top: 18.1818%;
  left: 36.9271%;
}

.download-banner p {
  width: max-content;
  position: absolute;
  top: 41.2121%;
  left: 50%;
  margin: 0;
  color: rgba(153, 82, 30, 0.7);
  font-family: "Kingnam Maiyuan", sans-serif;
  font-size: min(24px, 1.25vw);
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.cta-download-actions {
  position: absolute;
  top: 64.2424%;
  left: 50%;
  display: flex;
  gap: min(20px, 1.0417vw);
  transform: translateX(-50%);
}

.cta-download-button img { width: min(268px, 13.9583vw); }
.download-banner-cat { width: 6.7708%; position: absolute; top: 52.7273%; left: 28.5417%; }
.download-banner-pets { width: 6.7708%; top: 53.3333%; left: 64.5833%; }

.faq-layout {
  display: block;
  overflow-anchor: none;
}

.faq-intro {
  width: 243px;
  height: 230px;
  position: absolute;
  top: min(157px, 8.1771vw);
  left: 18.5417%;
  text-align: left;
}

.faq-title-art {
  width: 225px;
  position: absolute;
  top: 127px;
  left: 0;
}

.faq-pet-art {
  width: 170px !important;
  position: absolute;
  top: 0;
  left: 104px;
  margin: 0 !important;
}

.faq-list {
  width: 48.9583%;
  position: relative;
  margin-left: 37.4479%;
  padding-block: min(136px, 7.0833vw);
  display: grid;
  gap: 20px;
  overflow-anchor: none;
}

.faq-item {
  border: 2px solid #f1dfd4;
  border-radius: 12px;
  overflow-anchor: none;
}

.faq-question {
  min-height: 80px;
  padding: 0 28px 0 38px;
  grid-template-columns: 44px minmax(0, 1fr) 32px;
  color: var(--figma-brown);
  font-family: "Kingnam Maiyuan", sans-serif;
  font-size: 24px;
  font-weight: 400;
}

.faq-index { color: var(--figma-orange); }
.faq-icon { width: 32px; height: 32px; }

.faq-answer {
  min-height: 88px;
  padding: 25px 58px 25px 82px;
  color: rgba(153, 82, 30, 0.7);
  font-family: "Kingnam Maiyuan", sans-serif;
  font-size: 24px;
  line-height: 1.6;
}

.faq-answer:empty { min-height: 0; }

.footer-inner {
  width: min(1206px, calc(100% - 48px));
  height: 100%;
  padding: 0;
}

.footer-brand-group {
  width: 357px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.footer-brand img { width: 135px; height: 42px; }
.footer-content { min-height: 81px; padding-top: 13px; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; }
.footer-links { gap: 28px; }
.footer-links a,
.footer-links button,
.footer-copyright {
  font-family: "Kingnam Maiyuan", sans-serif;
}

.footer-copyright {
  width: 357px;
  margin: 0;
  color: rgba(153, 82, 30, 0.6);
  font-size: 16px;
  line-height: normal;
  text-align: right;
  white-space: nowrap;
}

@media (min-width: 761px) and (max-width: 1400px) {
  .step-number { width: 52px; height: 52px; top: -76px; left: calc(50% - 26px); font-size: 28px; }
  .tutorial-step:not(:last-child)::after { top: -51px; left: calc(50% + 34px); }
  .tutorial-card { height: auto; }
  .tutorial-step h3 { margin-top: 10px; font-size: 18px; }
  .tutorial-step p { margin-top: 10px; font-size: 12px; }
  .character-carousel-shell { height: auto; }
  .character-carousel { height: auto; }
  .character-card { flex-basis: 13.75vw; height: 18.125vw; }
}

@media (max-width: 760px) {
  :root { --header-height: 16vw; }

  button:focus-visible { outline: 0; }

  body {
    padding-top: var(--header-height);
    padding-bottom: 18.6667vw;
  }

  .site-header {
    height: 16vw;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background: #fff8d9;
  }

  .site-header.is-scrolled {
    background: #fff8d9;
    box-shadow: none;
  }

  .header-inner {
    width: 100%;
    padding: 0 5.3333vw 0 4vw;
  }

  .brand picture,
  .brand picture img {
    width: 24.9333vw;
    height: auto;
  }

  .desktop-nav { display: none; }

  .mobile-menu-trigger {
    width: 21.3333vw;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    display: block;
    background: transparent;
    line-height: 0;
  }

  .mobile-menu-trigger img { width: 100%; height: auto; }

  .hero {
    height: 106.7187vw;
    min-height: 0;
    overflow: hidden;
    background: #fff8d9;
  }

  .hero > .hero-desk { display: none; }

  .hero-layout {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    left: 0;
  }

  .hero-copy {
    width: 100%;
    margin: 0;
    position: static;
    text-align: center;
  }

  .hero-title-art {
    width: 81.0667%;
    position: absolute;
    top: 4%;
    left: 9.8667%;
  }

  .hero-copy > p {
    width: 77.3333%;
    max-width: none;
    position: absolute;
    top: 12.25%;
    left: 11.3333%;
    margin: 0;
    color: var(--figma-brown);
    font-size: 3.2vw;
    line-height: 2;
    text-align: center;
    white-space: normal;
  }

  .hero-copy > p br { display: block; }
  .hero-copy-desktop-text { display: none; }
  .hero-copy-mobile-text { display: inline; }

  .mobile-platform-note {
    width: 72%;
    height: 13.25%;
    position: absolute;
    z-index: 5;
    top: 29%;
    left: 14%;
    border: 2px solid rgba(153, 82, 30, 0.12);
    border-radius: 3.2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2vw;
    color: rgba(153, 82, 30, 0.75);
    background: rgba(255, 255, 255, 0.92);
    font-family: "Kingnam Maiyuan", sans-serif;
    font-size: 3.2vw;
  }

  .mobile-platform-note strong { font-weight: 400; }
  .mobile-platform-note span { color: var(--figma-orange); }
  .mobile-platform-note small { font-size: 2.6667vw; }

  .hero-download { display: none; }

  .hero-art {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: auto;
    top: 0;
    left: 0;
    margin: 0;
    pointer-events: none;
  }

  .hero-art > .hero-device,
  .hero-art > .hero-pet,
  .hero-art > .hero-person { display: none; }

  .mobile-hero-art {
    max-width: none;
    position: absolute;
    display: block;
  }

  .mobile-hero-desk { z-index: 1; top: 97.2vw; left: 2.1333vw; width: 96vw; height: 9.6vw; }
  .mobile-hero-device { z-index: 2; top: 51.9093vw; left: 10vw; width: 80vw; height: 51.0173vw; }
  .mobile-hero-laptop-dog { z-index: 3; top: 42.4vw; left: 20.1893vw; width: 12.3773vw; height: 12.3773vw; }
  .mobile-hero-desktop-cat { z-index: 3; top: 61.344vw; left: 38.076vw; width: 23.8491vw; height: 23.8491vw; }
  .mobile-hero-person { z-index: 3; top: 77.6vw; left: 66.9333vw; width: 25.3333vw; height: 25.3333vw; }
  .mobile-hero-left-pet { z-index: 3; top: 86.9333vw; left: 9.4667vw; width: 16vw; height: 16vw; }
  .mobile-hero-stars { z-index: 6; top: 38.9333vw; left: 80.5333vw; width: 7.6vw; height: 5.3333vw; }

  .mobile-hero-person > img,
  .mobile-hero-left-pet > img {
    max-width: none;
    position: absolute;
  }

  .mobile-hero-person > img,
  .mobile-hero-left-pet > img { top: 0; left: 0; width: 100%; height: 100%; }

  .tutorial-section { height: 193.3333vw; }
  .characters-section { height: 94.8vw; }
  .features-section { height: 173.3333vw; }
  .download-banner { display: none; }
  .faq-section { min-height: 0; height: auto; }
  .site-footer { height: 28.8vw; }

  .tutorial-title-art {
    width: 70.1333%;
    top: 3.4483%;
    left: 14.8%;
  }

  .tutorial-list {
    width: 86.4%;
    height: auto;
    top: 12.4138%;
    bottom: 50px;
    left: 6.8%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 2.069%;
  }

  .tutorial-step {
    height: 100%;
    display: block;
  }

  .tutorial-step:not(:last-child)::after {
    display: none;
  }

  .tutorial-mobile-step-art {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }

  .tutorial-step > :not(.tutorial-mobile-step-art) { display: none; }
  .tutorial-decor,
  .section-action { display: none; }

  .characters-title-art {
    width: 74.8%;
    top: 7.0323%;
    left: 12.4%;
  }

  .character-carousel-shell {
    width: 89.3333%;
    height: 67.5105%;
    top: 25.3165%;
    left: 5.3333%;
    display: block;
  }

  .character-carousel-shell::after {
    content: "";
    width: 8vw;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 247, 247, 0), #fff7f7);
  }

  .carousel-arrow { display: none; }

  .character-carousel {
    width: 100%;
    height: 100%;
    padding: 0 6.6667vw 0 0;
    display: grid;
    grid-template-rows: repeat(2, 30.9333vw);
    grid-template-columns: repeat(13, 23.4667vw);
    grid-auto-flow: row;
    gap: 2.1333vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .character-card:nth-child(-n + 6),
  .character-card:nth-child(n + 13):nth-child(-n + 18) { grid-row: 1; }

  .character-card:nth-child(n + 7):nth-child(-n + 12),
  .character-card:nth-child(n + 19):nth-child(-n + 24) { grid-row: 2; }

  .character-card {
    width: 23.4667vw;
    height: 30.9333vw;
    min-height: 0;
    flex: none;
    padding: 0;
    border: 1.0667vw solid #fff;
    border-radius: 3.2vw;
  }

  .character-card img { width: 21.3333vw; height: 25.3333vw; }

  .character-download-card {
    grid-row: 1;
    grid-column: -2 / -1;
    padding: 7.6vw 2.1333vw 0;
    display: flex;
  }

  .character-download-card strong {
    font-size: 2.9333vw;
    line-height: 3.4667vw;
  }

  .character-download-card span {
    margin-top: 0.5333vw;
    font-size: 2.1333vw;
    line-height: 2.6667vw;
  }

  .character-download-card button {
    width: 12vw;
    height: 4.8vw;
    margin-top: 2.6667vw;
    border-radius: 1.3333vw;
    font-size: 2.1333vw;
    line-height: 4.8vw;
  }

  .features-title-art {
    width: 56.2667%;
    top: 3.8462%;
    left: 21.7333%;
  }

  .feature-grid {
    width: 86.6667%;
    height: 82.3077%;
    top: 14.6154%;
    left: 6.6667%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 3.2vw 4vw;
  }

  .feature-item,
  .feature-reminder {
    width: auto;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    position: static;
    padding: 0;
    border-radius: 0;
    display: block;
    background: transparent;
  }

  .feature-reminder {
    width: 61.3333vw;
    height: 32vw;
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1 / -1;
    justify-self: center;
    align-self: start;
    margin-top: 12.0958vw;
    transform: translateX(0.9333vw);
  }
  .feature-nap { grid-column: 1; grid-row: 2; }
  .feature-quiet { grid-column: 2; grid-row: 2; }
  .feature-reminder { grid-row: 3; }
  .feature-desktop-art,
  .desktop-reminder-bubble { display: none; }

  .feature-reminder-bubbles,
  .mobile-reminder-bubble { display: block; }

  .feature-reminder .mobile-reminder-bubble-todo {
    width: 29.7333vw;
    height: 5.2vw;
    top: -3.6vw;
    left: -1.2vw;
  }

  .feature-reminder .mobile-reminder-bubble-break {
    width: 13.0667vw;
    height: 14.4vw;
    top: 1.0667vw;
    left: 23.8667vw;
  }

  .feature-reminder .mobile-reminder-bubble-water {
    width: 6.8vw;
    height: 12vw;
    top: 11.6vw;
    left: -6.1333vw;
  }

  .feature-mobile-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
  }

  .feature-mobile-content > .feature-character-animation {
    width: 32vw;
    height: 32vw;
    position: static;
    margin: 0 auto;
  }

  .feature-mobile-content > .feature-copy-art {
    height: 15.0667vw;
    position: static;
    margin-top: 1.2vw;
  }

  .feature-click .feature-copy-art { width: 26.5333vw; }
  .feature-keyboard .feature-copy-art { width: 33.4667vw; }
  .feature-quiet .feature-copy-art { width: 26.6667vw; }
  .feature-nap .feature-copy-art { width: 26.2667vw; }

  .feature-mobile-content > .feature-copy-art > img {
    width: 100%;
    height: auto;
  }

  .feature-reminder .feature-mobile-content {
    position: relative;
    display: block;
  }

  .feature-reminder .feature-mobile-content > .feature-character-animation {
    width: 32vw;
    height: 32vw;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }

  .feature-reminder .feature-mobile-content > .feature-copy-art {
    width: 16.6667vw;
    height: 15.0667vw;
    position: absolute;
    top: 7.8933vw;
    left: 44.4vw;
    margin: 0;
  }

  .feature-copy > span {
    margin: 0 0 1.2vw;
    padding: 0.8vw 2vw;
    font-family: "Kingnam Maiyuan", sans-serif;
    font-size: 2.4vw;
  }

  .feature-copy h3 {
    font-family: "Kingnam Maiyuan", sans-serif;
    font-size: 3.7333vw;
    font-weight: 400;
  }

  .feature-copy p {
    margin-top: 1.2vw;
    font-family: "Kingnam Maiyuan", sans-serif;
    font-size: 2.4vw;
  }

  .faq-title-art {
    width: 18.6667vw;
    position: absolute;
    top: 6.6667vw;
    left: calc(50% - 9.3333vw);
  }

  .faq-layout {
    min-height: 0;
    padding-bottom: 6.6667vw;
  }

  .faq-intro {
    width: 100%;
    height: 24vw;
    position: relative;
    top: 0;
    left: 0;
    display: block;
  }

  .faq-pet-art { display: none !important; }

  .faq-list {
    width: 88%;
    margin-left: 6%;
    padding-block: 0;
    gap: 2.6667vw;
  }

  .faq-question {
    min-height: calc(10.6667vw - 2px);
    padding: 0 3.2vw;
    grid-template-columns: 3.8667vw minmax(0, 1fr) 4.8vw;
    gap: 2.5333vw;
    font-size: 3.4667vw;
    line-height: 1;
    letter-spacing: 0.2773vw;
  }

  .faq-item {
    border-width: 1px;
    border-color: #f2ddd1;
    border-radius: 2.4vw;
  }

  .faq-icon { width: 4.8vw; height: 4.8vw; }

  .faq-answer {
    min-height: 13.3333vw;
    position: relative;
    padding: 2.6667vw 3.2vw 2.1333vw;
    border-top: 0;
    color: rgba(153, 82, 30, 0.6);
    font-size: 3.2vw;
    line-height: 4.2667vw;
    letter-spacing: 0.256vw;
  }

  .faq-answer::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc(3.2vw - 1px);
    left: calc(3.2vw - 1px);
    border-top: 0.2227vw solid rgba(242, 221, 209, 0.5);
  }

  .footer-inner {
    width: 100%;
    padding: 3.6vw 6vw;
    display: flex;
    flex-direction: column;
  }

  .footer-brand-group { width: auto; order: 2; display: block; }
  .footer-brand { display: none; }
  .footer-content { min-height: 0; margin: 0; padding: 0; order: 1; display: block; text-align: center; }
  .footer-links { justify-content: center; gap: 4vw; }
  .footer-links a,
  .footer-links button { font-size: 2.6667vw; }
  .footer-copyright { width: auto; margin-top: 3.2vw; font-size: 2.4vw; line-height: 1.6; text-align: center; white-space: normal; }

  .mobile-bottom-cta {
    width: 100%;
    height: 18.6667vw;
    position: fixed;
    z-index: 50;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 2.8vw 9.3333vw;
    display: block;
    background: #fff;
  }

  .mobile-bottom-cta button,
  .mobile-bottom-cta img { width: 100%; }

  .mobile-menu-backdrop {
    padding: 0;
    align-items: flex-start;
    justify-content: flex-end;
    background: transparent;
    overflow: visible;
  }

  .mobile-menu-panel {
    width: 68.2667vw;
    height: 68.2667vw;
    position: absolute;
    top: 15.3333vw;
    right: 5.3333vw;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .mobile-menu-visual { width: 100%; height: 100%; }

  .mobile-menu-close {
    width: 8vw;
    height: 8vw;
    position: fixed;
    top: 3.8vw;
    right: 7.5vw;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
  }

  .mobile-menu-panel nav {
    position: absolute;
    inset: 0;
    margin: 0;
    display: block;
  }

  .mobile-menu-panel nav > a,
  .mobile-menu-panel nav > button {
    position: absolute;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .mobile-menu-panel nav > :nth-child(1) { top: 7%; left: 5%; width: 90%; height: 18%; }
  .mobile-menu-panel nav > :nth-child(2) { top: 25%; left: 5%; width: 90%; height: 18%; }
  .mobile-menu-panel nav > :nth-child(3) { top: 43%; left: 5%; width: 90%; height: 18%; }
  .mobile-menu-panel nav > :nth-child(4) { top: 63.5%; left: 6%; width: 88%; height: 15%; }
  .mobile-menu-panel nav > :nth-child(5) { top: 82%; left: 24%; width: 23%; height: 12%; }
  .mobile-menu-panel nav > :nth-child(6) { top: 82%; left: 54%; width: 23%; height: 12%; }

  .dialog-backdrop:not(.mobile-menu-backdrop) { padding: 4vw; }
  .mac-chip-dialog { transform: none; }
}