/* Windows 离线版：让粒子成为主视觉，内容保持轻量 */
.download-body {
  min-height: 100dvh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  background: #080a09;
  color: #f3f3ec;
}

.download-canvas,
.download-atmosphere {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.download-canvas { z-index: 0; }

.download-atmosphere {
  z-index: 1;
  background: linear-gradient(90deg, rgba(8, 10, 9, .88) 0%, rgba(8, 10, 9, .69) 33%, rgba(8, 10, 9, .23) 58%, rgba(8, 10, 9, .04) 100%),
    radial-gradient(ellipse at 72% 52%, transparent 17%, rgba(8, 10, 9, .34) 82%);
}

.download-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.download-shell {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(100% - clamp(36px, 7vw, 112px), 1380px);
  min-height: 100dvh;
  margin: 0 auto;
}

.download-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 92px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(236, 243, 225, .14);
  flex-shrink: 0;
}

.download-head .head-brand { gap: 13px; }
.download-head .head-logo { width: 42px; height: 42px; border: 1px solid rgba(200, 242, 60, .38); }
.download-head .head-name { font-size: .96rem; letter-spacing: .015em; }
.download-head .head-slogan { font-size: .67rem; color: rgba(235, 236, 224, .48); }

.download-back {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 11px 16px;
  border: 1px solid rgba(236, 243, 225, .2);
  border-radius: 2px;
  color: #d8dcd1;
  background: rgba(8, 10, 9, .32);
  font-family: var(--font);
  font-size: .79rem;
  letter-spacing: .02em;
  transition: border-color .2s, background .2s, transform .2s;
}

.download-back span { color: var(--lime); font-size: 1.1rem; line-height: 1; }
.download-back:hover { color: #fff; border-color: var(--lime); background: rgba(200, 242, 60, .08); transform: translateX(-2px); }
.download-back:focus-visible,
.download-link:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }

.download-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .86fr);
  flex: 1;
  align-items: center;
  gap: clamp(38px, 5vw, 86px);
  min-height: 0;
  width: 100%;
  padding: clamp(35px, 5vh, 70px) 0 clamp(42px, 6vh, 75px);
}

.download-hero {
  position: relative;
  z-index: 1;
  width: min(100%, 680px);
  margin: -2vh 0 0;
  text-align: left;
  animation: downloadFadeUp .8s cubic-bezier(.22, 1, .36, 1) both;
}

.download-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(29px, 5vh, 52px);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  white-space: nowrap;
}

.download-live-dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(200, 242, 60, .09), 0 0 14px rgba(200, 242, 60, .75);
}

.download-eyebrow__line { width: 31px; height: 1px; background: rgba(200, 242, 60, .52); }

.download-title {
  display: block;
  margin: 0;
  color: #f4f3ec;
  font-family: var(--font);
  font-size: clamp(4.1rem, 6.3vw, 7.2rem);
  font-weight: 700;
  letter-spacing: -.075em;
  line-height: 1.13;
  text-align: left;
}

.download-title > span { display: block; white-space: nowrap; }
.download-title__accent { position: relative; color: var(--lime); }
.download-title__period { color: #f4f3ec; }
.download-title__accent::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 12%;
  bottom: -.11em;
  height: .067em;
  border-radius: 100%;
  background: var(--lime);
  transform: rotate(-2deg);
  opacity: .8;
}

.download-edition {
  margin: clamp(29px, 4.5vh, 50px) 0 13px;
  color: #f2f4eb;
  font-size: clamp(.97rem, 1.35vw, 1.13rem);
  font-weight: 600;
  letter-spacing: .02em;
}

.download-edition span { padding: 0 10px; color: var(--lime); font-family: var(--font-mono); }

.download-description {
  max-width: 33ch;
  margin: 0;
  color: rgba(231, 235, 222, .64);
  font-size: clamp(.9rem, 1.25vw, 1.04rem);
  line-height: 1.95;
}

.download-actions {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0 40px;
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(38px, 7vh, 73px);
  border-top: 1px solid rgba(229, 238, 213, .28);
}

.download-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-width: 154px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(229, 238, 213, .18);
  color: #f3f5ed;
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: color .2s, border-color .2s;
}

.download-link__arrow { color: var(--lime); font-size: 1.4rem; font-weight: 400; line-height: 1; transition: transform .2s; }
.download-link:hover { color: var(--lime); border-color: var(--lime); }
.download-link:hover .download-link__arrow { transform: translate(3px, -3px); }
.download-link.is-placeholder { color: rgba(231, 235, 222, .38); cursor: default; }
.download-link small { color: rgba(231, 235, 222, .38); font-size: .72rem; font-weight: 400; }

.example-panel {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 26px 29px 23px;
  overflow: hidden;
  border: 1px solid rgba(205, 239, 161, .3);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(10, 17, 13, .56), rgba(7, 12, 10, .62));
  box-shadow: 0 22px 80px rgba(0, 0, 0, .19), inset 0 1px 0 rgba(255, 255, 255, .045);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: downloadFadeUp .85s .15s both;
}

.example-panel__head { margin-bottom: 20px; }
.example-panel__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 13px;
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: .61rem;
  letter-spacing: .15em;
}
.example-panel__eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px rgba(200, 242, 60, .6); }
.example-panel__head h2 { margin: 0; color: #f6f6ee; font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 700; letter-spacing: -.035em; }
.example-panel__head h2 span { color: var(--lime); }
.example-panel__head > p:last-child { margin: 7px 0 0; color: rgba(237, 242, 228, .68); font-size: .77rem; }

.example-tabs {
  display: flex;
  gap: 25px;
  border-bottom: 1px solid rgba(231, 241, 217, .19);
}
.example-tab {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 0 0 13px;
  border: 0;
  background: none;
  color: rgba(238, 243, 231, .53);
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s;
}
.example-tab span { font-family: var(--font-mono); font-size: .59rem; font-weight: 500; }
.example-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.example-tab:hover,
.example-tab.is-active { color: #f8f9f0; }
.example-tab.is-active::after { background: var(--lime); }
.example-tab:focus-visible,
.example-track:focus-visible,
.example-player input:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.example-tracks { padding-top: 5px; }
.example-tracks[hidden] { display: none !important; }
.example-tracks__label {
  margin: 11px 0 5px;
  color: rgba(231, 241, 216, .39);
  font-family: var(--font-mono);
  font-size: .59rem;
  letter-spacing: .14em;
}
.example-track {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 4px 7px;
  border: 0;
  border-bottom: 1px solid rgba(232, 240, 219, .1);
  border-radius: 4px;
  background: transparent;
  color: rgba(245, 247, 238, .93);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: color .18s, background .18s;
}
.example-track:hover,
.example-track.is-active { color: #fff; background: rgba(200, 242, 60, .075); }
.example-track:disabled { opacity: .38; cursor: not-allowed; }
.example-track__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(200, 242, 60, .47);
  border-radius: 50%;
  color: var(--lime);
  font-size: .55rem;
  line-height: 1;
  text-indent: 1px;
}
.example-track.is-playing .example-track__icon { background: var(--lime); color: #10150c; font-size: .68rem; text-indent: 0; }
.example-track__name { flex: 1; min-width: 0; font-size: .83rem; font-weight: 600; }
.example-track__hint { color: rgba(235, 243, 224, .52); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .05em; }
.example-track.is-active .example-track__hint { color: var(--lime); }

.example-player { padding-top: 17px; }
.example-player__info { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #f2f5e9; font-size: .73rem; }
.example-player__info span:last-child { color: rgba(234, 242, 222, .52); font-family: var(--font-mono); font-size: .64rem; white-space: nowrap; }
.example-player input[type="range"] { display: block; width: 100%; height: 15px; margin: 10px 0 0; padding: 0; accent-color: var(--lime); cursor: pointer; background: transparent; }
.example-player input[type="range"]:disabled { opacity: .4; cursor: default; }
.example-player > p { margin: 5px 0 0; color: rgba(233, 241, 220, .38); font-size: .67rem; }

@media (max-width: 980px) {
  .download-main { grid-template-columns: 1fr; gap: 50px; }
  .download-hero { width: min(100%, 680px); margin: 0; }
  .example-panel { width: min(100%, 680px); }
}

@media (max-width: 720px) {
  .download-shell { width: min(100% - 36px, 560px); }
  .download-head { min-height: 78px; padding: 14px 0; }
  .download-head .head-logo { width: 38px; height: 38px; }
  .download-head .head-slogan { display: none; }
  .download-back { padding: 9px 11px; font-size: .72rem; }
  .download-main { align-items: flex-start; gap: 48px; padding: clamp(64px, 12vh, 108px) 0 80px; }
  .download-hero { margin: 0; }
  .download-eyebrow { margin-bottom: 31px; font-size: .61rem; gap: 8px; }
  .download-title { font-size: clamp(3.4rem, 12vw, 5.4rem); }
  .download-edition { margin-top: 32px; }
  .download-description { max-width: 35ch; }
  .download-atmosphere {
    background: linear-gradient(180deg, rgba(8, 10, 9, .8) 0%, rgba(8, 10, 9, .68) 44%, rgba(8, 10, 9, .16) 100%),
      linear-gradient(90deg, rgba(8, 10, 9, .4), transparent 85%);
  }
  .example-panel { padding: 23px 20px 20px; border-radius: 18px; }
}

@media (max-width: 430px) {
  .download-head .head-name { font-size: .79rem; }
  .download-head .head-brand { gap: 9px; }
  .download-title { font-size: clamp(3.25rem, 12vw, 3.85rem); }
  .download-eyebrow__line { width: 18px; }
  .download-actions { width: 100%; gap: 0 20px; }
  .download-link { min-width: 0; flex: 1; gap: 10px; font-size: .88rem; }
  .example-panel { padding: 21px 16px 19px; }
  .example-panel__head { margin-bottom: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .download-hero { animation: none !important; }
  .example-panel { animation: none !important; }
  .download-back,
  .download-link,
  .download-link__arrow { transition: none !important; }
}