:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #19253c;
  background: #fcfcff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  --body: #4b5b71;
  --accent: #3156a7;
  --line: #dbe3f0;
  --ink: #243b5c;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
p, figure { margin: 0; }
.wrap { width: min(1184px, calc(100% - 96px)); margin-inline: auto; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
:focus-visible { outline: 3px solid #4269bc; outline-offset: 5px; }
.skip { position: fixed; top: 12px; left: 12px; transform: translateY(-200%); padding: .65em 1em; background: #fff; z-index: 5; }
.skip:focus { transform: none; }
.bar, .footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bar { min-height: 86px; border-bottom: 1px solid #e9edf6; }
.brand, .bar nav, .footer nav { display: flex; align-items: center; }
.brand { gap: 10px; font-size: 20px; font-weight: 730; letter-spacing: -.03em; white-space: nowrap; text-decoration: none; }
.bar nav, .footer nav { gap: 26px; color: var(--body); font-size: 14px; }
.bar nav a, .footer nav a { text-decoration: none; }
.bar nav a:hover, .footer nav a:hover { color: var(--accent); }
.language { border: 1px solid var(--line); padding: 7px 13px; border-radius: 999px; white-space: nowrap; }
.hero { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); align-items: center; gap: clamp(32px, 5.2vw, 84px); padding: clamp(52px, 7.6vw, 112px) 0 clamp(65px, 9vw, 132px); }
.tag { color: var(--accent); font-size: 14px; font-weight: 710; margin: 0 0 17px; }
.hero h1 {
  font-size: clamp(41px, 5.1vw, 78px);
  line-height: 1.055;
  letter-spacing: -.067em;
  margin: 0;
}
.hero h1 span { color: var(--accent); }
:lang(zh-Hans) .hero h1 {
  font-size: clamp(38px, 4.9vw, 69px);
  line-height: 1.13;
  letter-spacing: -.071em;
}
.lede { color: var(--body); font-size: clamp(16px, 1.55vw, 19px); line-height: 1.7; max-width: 28em; margin: 23px 0 27px; }
.hero-actions { display: flex; gap: 15px 21px; flex-wrap: wrap; align-items: center; }
.download { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--ink); color: white; padding: 13px 17px; min-height: 48px; border-radius: 13px; text-decoration: none; font-size: 14px; font-weight: 670; box-shadow: 0 7px 15px #142b551c; transition: background .2s, transform .2s, box-shadow .2s; }
.download:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 11px 22px #142b552c; }
.download span { font-size: 17px; line-height: 1; }
.explore { color: var(--accent); font-size: 14px; font-weight: 650; text-decoration: none; }
.explore span { display: inline-block; margin-left: 3px; transition: transform .2s ease; }
.explore:hover span { transform: translateY(3px); }
.requirement { margin-top: 14px; font-size: 13px; color: var(--body); }
.showcase { position: relative; border: 0; min-width: 0; padding: 0; margin: 0; }
.scene {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  aspect-ratio: 1.11;
  overflow: hidden;
  border: 1px solid #dce6f6;
  border-radius: clamp(24px, 3vw, 44px);
  background: radial-gradient(ellipse at 83% 17%, #e7f5ee 0%, transparent 46%),
              radial-gradient(ellipse at 15% 88%, #ece9ff 0%, transparent 60%),
              linear-gradient(135deg, #edf4ff, #dbe7fc);
}
.scene::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  background: radial-gradient(circle, #718db91f 1px, transparent 1px) 0 0 / 17px 17px;
  mask-image: radial-gradient(ellipse at 55% 35%, #000, transparent 80%);
}
.scene-ring, .scene-ring::after {
  position: absolute;
  z-index: -1;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid #ffffffaa;
  border-radius: 50%;
}
.scene-ring { top: 4%; left: 8%; transform: scaleY(.84) rotate(-17deg); }
.scene-ring::after { content: ""; width: 109%; top: -5%; left: -5%; }
.screen { grid-area: 1/1; width: 77%; transition: opacity .28s ease, transform .34s ease, visibility .28s; }
.screen img { width: 100%; border-radius: clamp(13px, 1.7vw, 22px); box-shadow: 0 22px 40px #29467531, 0 0 0 1px #fff8; }
.screen-date { width: 64%; }
#preview-month:not(:checked) ~ .scene .screen-month,
#preview-date:not(:checked) ~ .scene .screen-date { visibility: hidden; opacity: 0; transform: translateY(8px) scale(.98); }
.date-tile { position: absolute; right: 6%; bottom: 8%; display: grid; place-content: center; width: clamp(53px, 7vw, 90px); aspect-ratio: 1; text-align: center; border-radius: 25%; border: 1px solid #fff; background: linear-gradient(145deg,#fff,#f0ecff); box-shadow: 0 10px 24px #546fa632; color: #454b82; transform: rotate(8deg); animation: tile-drift 2.2s ease-in-out .25s both; transition: opacity .25s, visibility .25s; }
.date-tile span { font-size: clamp(9px, 1vw, 12px); font-weight: 700; letter-spacing: .04em; }
.date-tile strong { font-size: clamp(22px, 3vw, 39px); line-height: 1; letter-spacing: -.05em; }
#preview-date:checked ~ .scene .date-tile { opacity: 0; visibility: hidden; }
.spark { position: absolute; display: block; color: #617cc1; aspect-ratio: 1; }
.spark::before, .spark::after { content: ""; position: absolute; background: currentColor; border-radius: 50%; }
.spark::before { inset: 0 44%; }
.spark::after { inset: 44% 0; }
.spark-large { width: clamp(16px, 3vw, 28px); top: 9%; right: 9%; transform: rotate(13deg); }
.spark-small { width: clamp(11px, 2vw, 18px); bottom: 12%; left: 7%; transform: rotate(-15deg); color: #798cce; }
@keyframes tile-drift {
  0%, 100% { transform: translateY(0) rotate(8deg); }
  55% { transform: translateY(-7px) rotate(3deg); }
}
.preview-controls { display: flex; justify-content: center; gap: 4px; width: fit-content; padding: 4px; margin: 15px auto 0; border: 1px solid var(--line); border-radius: 999px; background: #f3f6fd; }
.preview-controls label { position: relative; padding: 6px 13px; border-radius: 999px; color: var(--body); font-size: 13px; font-weight: 640; cursor: pointer; transition: background .2s, color .2s; }
.preview-controls label:hover { color: var(--accent); }
#preview-month:checked ~ .preview-controls label[for=preview-month],
#preview-date:checked ~ .preview-controls label[for=preview-date] { color: var(--ink); background: white; box-shadow: 0 1px 4px #44598a22; }
#preview-month:focus-visible ~ .preview-controls label[for=preview-month],
#preview-date:focus-visible ~ .preview-controls label[for=preview-date] { outline: 3px solid #4269bc; outline-offset: 1px; }
.features { scroll-margin-top: 33px; }
.section-heading { margin-bottom: clamp(26px, 5vw, 56px); text-align: center; }
.section-heading .tag { margin-bottom: 10px; }
h2 { margin: 0; font-size: clamp(31px, 4.5vw, 59px); line-height: 1.11; letter-spacing: -.057em; }
:lang(zh-Hans) h2 { line-height: 1.19; }
.feature-grid { display: grid; grid-template-columns: 1.13fr 1fr; gap: 24px; }
.feature { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid #e0e7f0; border-radius: clamp(22px, 2.5vw, 33px); }
.mint { background: radial-gradient(ellipse at 80% 80%, #dceee5, transparent 65%), #f5faf7; }
.blue { background: radial-gradient(ellipse at 30% 90%, #dce7fc, transparent 69%), #f6f8fe; }
.violet { grid-column: 1/-1; grid-template-columns: minmax(0,.76fr) minmax(0,1.44fr); grid-template-rows: auto; align-items: center; background: radial-gradient(ellipse at 84% 28%,#eee7fa,transparent 65%), #faf7fb; }
.feature-copy { padding: clamp(26px, 3.35vw, 45px) clamp(24px, 3.5vw, 46px) 20px; }
h3 { margin: 0 0 10px; font-size: clamp(24px, 2.9vw, 38px); line-height: 1.14; letter-spacing: -.045em; }
.feature p { color: var(--body); font-size: 16px; max-width: 37em; }
.feature figure { align-self: end; margin: 0 30px 30px; }
.feature figure img { margin-inline: auto; border-radius: 17px; width: auto; max-height: 340px; object-fit: contain; transition: transform .32s ease; }
.violet .feature-copy { padding-bottom: clamp(26px, 3.35vw, 45px); }
.violet figure { margin: 31px 30px 31px 0; }
.violet figure img { width: 100%; max-height: none; }
@media (hover: hover) {
  .feature:hover figure img { transform: translateY(-5px); }
}
.faq { padding: clamp(62px, 9vw, 124px) 0 clamp(58px, 8vw, 104px); display: grid; grid-template-columns: .7fr 1.3fr; gap: 34px; }
.faq h2 { font-size: clamp(31px, 3.4vw, 45px); }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; gap: 15px; padding: 16px 0; font-weight: 650; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; align-self: center; color: var(--accent); font-size: 19px; font-weight: 450; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { margin: 0 0 16px; color: var(--body); font-size: 15px; }
.closing { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: clamp(24px, 4vw, 42px); border: 1px solid #e0e7f5; border-radius: 25px; background: linear-gradient(115deg,#f1f6ff,#f4effb); }
.closing h2 { font-size: clamp(24px, 3vw, 37px); }
.closing .requirement { margin-top: 6px; }
.closing .download { margin-inline-start: auto; }
.footer { border-top: 1px solid var(--line); margin-top: 62px; padding: 21px 0 28px; font-size: 13px; color: var(--body); }
@media (max-width: 1020px) {
  .wrap { width: calc(100% - 54px); }
  .hero { gap: 34px; }
  .hero h1 { letter-spacing: -.056em; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 36px); }
  .bar { min-height: 68px; }
  .bar nav { gap: 14px; }
  .bar .jump { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 47px 0 68px; }
  .hero h1 { font-size: clamp(42px, 9.4vw, 66px); }
  :lang(zh-Hans) .hero h1 { font-size: clamp(36px, 9vw, 62px); }
  .showcase { width: min(100%, 550px); justify-self: center; }
  .lede { margin: 17px 0 21px; }
  .feature-grid, .violet, .faq { grid-template-columns: minmax(0, 1fr); }
  .feature-grid { gap: 15px; }
  .feature figure, .violet figure { margin: 0 18px 19px; }
  .feature figure img { max-height: 295px; }
  .faq { gap: 19px; padding-block: 64px; }
  .closing .download { margin-inline-start: 0; }
  .footer { margin-top: 44px; }
}
@media (max-width: 420px) {
  .hero-actions { column-gap: 13px; }
  .download { padding-inline: 12px; }
  .footer { align-items: flex-start; flex-direction: column; gap: 10px; }
  .footer nav { flex-wrap: wrap; gap: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.footer nav { flex-wrap: wrap; gap: 9px 22px; }
.document { max-width: 760px; padding-block: clamp(38px, 7vw, 92px) 14px; overflow-wrap: anywhere; }
.document h1 { margin: 0 0 20px; font-size: clamp(32px, 6vw, 58px); line-height: 1.12; letter-spacing: -.05em; }
.document h2, .document h3 { margin: 1.6em 0 .5em; font-size: clamp(20px, 3vw, 26px); letter-spacing: -.02em; }
.document p, .document li { color: var(--body); }
.document p + p { margin-top: .75em; }
.document a { color: var(--accent); text-underline-offset: 3px; }
.document .lede { max-width: none; margin: 15px 0; }
.document .meta { font-size: 14px; }
.document hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }
.document ul { padding-left: 1.35em; }
.document li + li { margin-top: .45em; }
.document pre { padding: clamp(13px, 3vw, 24px); border: 1px solid var(--line); border-radius: 16px; background: #f4f6fc; white-space: pre-wrap; font-size: .875rem; }
.document [id] { scroll-margin-top: 24px; }
@media (max-width: 760px) {
  .footer { align-items: flex-start; flex-direction: column; gap: 12px; }
}