section[id] { scroll-margin-top: 105px; }

/* Use a familiar system sans for readable Chinese and Latin text. */
body, button, input, a { font-family: "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
body .brand, body .hero h1, body .section-heading h2, body .showcase-copy h2, body .contact-section h2, body .download-card h2, body .feature-card h3, body .tutorial-header h2 { font-family: "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif; letter-spacing: -.02em; }
.hero-cat { animation: hero-slow-float 10s ease-in-out infinite; will-change: transform; }
@keyframes hero-slow-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}


.hero-cat {
  border-radius: 0;
  -webkit-mask-image: radial-gradient(ellipse 72% 76% at 50% 52%, #000 59%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 76% at 50% 52%, #000 59%, transparent 100%);
}

.support-qr {
  width: 104px;
  height: 104px;
  object-fit: contain;
  flex: none;
  border: 5px solid #fff;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(48, 97, 170, .13);
}

.contact-card strong { display: block; }
.contact-card .copy-button { white-space: nowrap; }

.tutorial-header {
  padding: 34px 38px 24px;
  background: linear-gradient(130deg, #f4f9ff, #e2f1ff);
}

.tutorial-header h2 {
  margin: 0 0 10px;
  font-family: Georgia, "Songti SC", serif;
  font-size: 32px;
  color: #173568;
}

.tutorial-header p:last-child { margin: 0; color: #6d80a2; }

.tutorial-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 24px 38px;
}

.tutorial-steps > div {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 144px;
  padding: 16px;
  border: 1px solid #e1eaf6;
  border-radius: 8px;
  background: #fff;
}

.tutorial-steps b { color: #4b88e4; font-size: 18px; }
.tutorial-steps strong { color: #254878; font-size: 15px; }
.tutorial-steps span { color: #7284a3; line-height: 1.55; }

.modal-download {
  display: block;
  margin: 0 38px 34px;
  padding: 13px 18px;
  border-radius: 8px;
  background: #4a86ea;
  color: #fff;
  text-align: center;
  font-weight: 800;
}

.modal-download span { margin-left: 8px; font-size: 18px; }

:is(a, button):focus-visible { outline: 3px solid #205fc6; outline-offset: 3px; }

@media (max-width: 680px) {
  .contact-card { flex-wrap: wrap; }
  .contact-card .copy-button { margin-left: 0; }
  .tutorial-header { padding: 34px 25px 20px; }
  .tutorial-header h2 { font-size: 27px; }
  .tutorial-steps { grid-template-columns: 1fr; padding: 18px 25px; }
  .tutorial-steps > div { min-height: 0; }
  .modal-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
  .modal-download { margin: 0 25px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  /* Explicitly requested gentle hero motion; never shorten its loop duration. */
  .hero-cat { animation: hero-slow-float 10s ease-in-out infinite !important; }
}