:root {
  color: #171715;
  background: #f3f3ef;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #f3f3ef; }
body { min-width: 320px; margin: 0; color: #171715; background: #f3f3ef; }
a { color: inherit; text-decoration: none; }
::selection { color: #fff; background: #171715; }
:focus-visible { outline: 2px solid #171715; outline-offset: 5px; }

.download-page {
  min-height: 100dvh;
  padding: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-rows: auto 1fr;
}

.brand {
  width: max-content;
  display: flex;
  align-items: baseline;
  gap: 11px;
  line-height: 1;
}

.brand span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .16em;
}

.brand small {
  color: #62625d;
  font-size: 11px;
  letter-spacing: .08em;
}

.download-content {
  width: min(100%, 760px);
  margin: auto;
  padding: clamp(56px, 10vh, 110px) 0 clamp(80px, 13vh, 148px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

h1 {
  margin: 0 0 clamp(48px, 7vh, 72px);
  color: #121210;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(58px, 8vw, 108px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.primary-download {
  width: min(100%, 360px);
  min-height: 64px;
  padding: 18px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #171715;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .02em;
  box-shadow: 0 16px 36px rgba(23, 23, 21, .14);
  transition: transform .24s cubic-bezier(.2,.75,.25,1), background-color .24s ease, box-shadow .24s ease;
}

.primary-download:hover {
  transform: translateY(-2px);
  background: #292925;
  box-shadow: 0 20px 44px rgba(23, 23, 21, .2);
}

.primary-download:active { transform: translateY(0) scale(.99); }

.release-info {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px;
  color: #70706a;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.release-info i {
  width: 2px;
  height: 2px;
  background: #a5a59f;
  border-radius: 50%;
}

@media (max-width: 560px) {
  .download-page { padding: 24px 20px; }
  .brand { gap: 9px; }
  .download-content { padding-top: 64px; padding-bottom: 108px; }
  h1 {
    max-width: 5em;
    margin-bottom: 44px;
    font-size: clamp(54px, 17vw, 72px);
    line-height: 1.08;
  }
  .primary-download { width: 100%; }
  .release-info { max-width: 300px; line-height: 1.7; }
}

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