/* 下载页样式：外壳（topbar、页脚、主题变量、基础排版）来自 styles.css，
   这里只负责下载区的布局与观感，全部走主题变量，白天/暗夜自动切换。 */

/* 全页共享视口高度；内容不足一屏时居中，窄屏、短窗口和文字放大时自然撑开。 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.dl-page {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding-block: clamp(20px, 4svh, 64px) clamp(24px, 4svh, 48px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 50% 38% at 75% 25%, #c0a6fa14, transparent 75%);
}

html[data-theme="light"] .dl-page {
  background:
    radial-gradient(ellipse 50% 38% at 75% 25%, #6f4fc310, transparent 75%);
}

.dl-hero {
  position: relative;
  animation: dl-copy-arrive .75s .08s both;
}

.dl-mark {
  position: absolute;
  top: -4%;
  right: -5%;
  width: min(44vw, 620px);
  opacity: .045;
  transform: rotate(-4deg);
  pointer-events: none;
  animation: dl-mark-arrive 1.2s cubic-bezier(.2,.75,.25,1) both;
}

.dl-mark img { display: block; width: 100%; }

html[data-theme="light"] .dl-mark {
  opacity: .07;
  filter: invert(1);
}

.dl-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .12em;
}

.dl-eyebrow span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px #c0a6faa6;
}

.dl-hero h1 {
  max-width: 820px;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(36px, min(6.2vw, 7.5svh), 86px);
  font-weight: 580;
  line-height: 1.08;
  letter-spacing: clamp(-4px, -.055em, -1.5px);
}

.dl-word { white-space: nowrap; }

.dl-lede {
  margin: clamp(14px, 2.4svh, 28px) 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}

.dl-downloads {
  margin-top: clamp(24px, 6svh, 72px);
  animation: dl-downloads-arrive .8s .2s both;
}

.dl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.dl-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}

.dl-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.dl-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 22px;
  min-height: clamp(72px, 11svh, 106px);
  border-bottom: 1px solid var(--line);
}

.dl-symbol {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  opacity: .88;
}

.dl-symbol svg { width: 28px; height: 28px; fill: currentColor; }

.dl-copy h3 {
  margin: 0 0 7px;
  font-size: 20px;
  font-weight: 570;
  letter-spacing: -.03em;
}

.dl-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* 按钮观感与首页 .btn 一致：暗夜紫底深字，白天紫底白字。 */
.dl-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 146px;
  padding: 13px 18px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--accent);
  color: #21172f;
  font-size: 13px;
  font-weight: 650;
  transition: color .2s, background .2s, transform .2s;
}

.dl-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s;
}

.dl-action:not(.is-loading):hover {
  background: #d2befc;
  transform: translateY(-2px);
}

.dl-action:not(.is-loading):hover svg { transform: translateY(2px); }

.dl-action.is-loading {
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
  pointer-events: none;
}

.dl-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

html[data-theme="light"] .dl-action:not(.is-loading) {
  background: #6f4fc3;
  color: #fff;
}

html[data-theme="light"] .dl-action:not(.is-loading):hover {
  background: #6042b1;
}

@keyframes dl-copy-arrive {
  from { opacity: 0; transform: translateY(18px); }
}

@keyframes dl-downloads-arrive {
  from { opacity: 0; transform: translateY(24px); }
}

@keyframes dl-mark-arrive {
  from { opacity: 0; transform: rotate(-8deg) scale(.95); }
}

@media (max-width: 720px) {
  .dl-mark { top: 0; right: -24%; width: 88vw; }
  .dl-lede { max-width: 31em; }
  .dl-downloads { margin-top: clamp(24px, 5svh, 42px); }
  .dl-row { grid-template-columns: 48px 1fr; gap: 12px; padding: clamp(14px, 2svh, 23px) 0; }
  .dl-action { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 430px) {
  .dl-head { align-items: flex-start; gap: 12px; }
  .dl-head p { max-width: 150px; text-align: right; line-height: 1.5; }
  .dl-hero h1 { font-size: clamp(34px, min(10vw, 6svh), 43px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}