:root {
  color-scheme: light;
  --ink: #17313b;
  --muted: #5b727b;
  --teal: #087d7d;
  --teal-dark: #056768;
  --surface: #ffffff;
  --line: #dce9e9;
  --page: #f2f8f7;
  --target-ring: #46a9a3;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  min-width: 320px;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 87% 5%, #d7f1ed 0, transparent 25rem),
    linear-gradient(180deg, #f9fcfc 0, var(--page) 100%);
}

.page-shell {
  width: min(100%, 620px);
  margin: 0 auto;
  padding:
    max(28px, env(safe-area-inset-top))
    20px
    max(30px, env(safe-area-inset-bottom));
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 650; letter-spacing: .2px; }
.brand img {
  display: block;
  background: transparent;
  box-shadow: none;
}

.hero { padding: 52px 4px 30px; }
.eyebrow { margin: 0 0 10px; color: var(--teal); font-size: 12px; font-weight: 700; letter-spacing: 1.3px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 14px; font-size: clamp(34px, 9vw, 44px); line-height: 1.13; letter-spacing: -.8px; }
.intro { margin-bottom: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }

.platforms > h2 { margin-bottom: 16px; }
.platforms { display: grid; gap: 14px; }

.download-card,
.steps,
.notice {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 15px 40px rgba(33, 83, 87, .08);
}

.download-card {
  scroll-margin: 24px;
  padding: 22px;
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 0 14px;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.download-card:target,
.download-card.is-targeted {
  border-color: var(--target-ring);
  background: #f8fdfc;
  box-shadow:
    0 0 0 3px rgba(70, 169, 163, .18),
    0 15px 40px rgba(33, 83, 87, .11);
}

.platform-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  color: var(--teal-dark);
  background: #e2f4f0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -.4px;
}

.android-mark { font-size: 20px; }
.ios-mark { font-size: 14px; letter-spacing: 0; }
.platform-copy { min-width: 0; align-self: center; }
.platform-name { margin-bottom: 3px; font-size: 18px; font-weight: 650; line-height: 1.4; }
.version { margin: 0 0 2px; font-size: 14px; font-weight: 650; line-height: 1.5; }
.version span { color: #91a5aa; padding: 0 3px; }
.meta { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.download-button {
  grid-column: 1 / -1;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 18px;
  border: 1px solid var(--teal);
  border-radius: 14px;
  color: var(--teal-dark);
  background: #f4fbfa;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
.download-button:hover,
.download-button:focus-visible {
  border-color: var(--teal-dark);
  background: #e8f5f3;
  outline: none;
}
.download-button:active { transform: translateY(1px); }

.steps { margin-top: 18px; padding: 22px; }
h2 { margin-bottom: 17px; font-size: 18px; letter-spacing: -.1px; }
ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 17px; }
li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--teal-dark); background: #e8f5f3; font-size: 12px; font-weight: 700; }
li p { margin: 1px 0 0; color: #405d65; font-size: 14px; line-height: 1.6; }

.notice { margin-top: 18px; padding: 15px 17px; background: #fdfefd; box-shadow: none; }
.notice p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
footer { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; padding: 28px 0 2px; color: #71878d; font-size: 13px; }
footer a { color: #4e6c73; text-decoration: none; }
footer a:active, footer a:hover { color: var(--teal-dark); text-decoration: underline; }

@media (min-width: 560px) {
  .page-shell { padding-left: 28px; padding-right: 28px; }
  .hero { padding-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .download-card,
  .download-button {
    transition: none;
  }
}