:root {
  --bg: #03050a;
  --bg2: #060a12;
  --panel: rgba(11, 18, 31, .72);
  --panel-soft: rgba(255,255,255,.038);
  --line: rgba(132, 210, 255, .12);
  --line2: rgba(255,255,255,.09);
  --text: #f5f8ff;
  --muted: #8d98aa;
  --muted2: #566073;
  --cyan: #62e7ff;
  --blue: #4d8cff;
  --violet: #8b6cff;
  --pink: #ef74d5;
  --gold: #dfc06b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -15%, #12213e 0%, #070b14 30%, #03050a 68%, #020308 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
body::selection { background: rgba(98,231,255,.28); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, video { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }


/* =========================================================
   V2.1 · WebGL 流动光场
   - 自主缓慢流动
   - 鼠标附近产生排斥 / 涡旋 / 波纹形变
   - 鼠标速度越快，扰动越明显
   ========================================================= */
#flowCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  pointer-events: none;
  opacity: .92;
  filter: saturate(1.08) contrast(1.03);
}

#particleCanvas {
  z-index: -9;
  opacity: .34;
}

/* 页面局部增加一点“光穿过玻璃”的感觉，但不影响点击 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -7;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--cursor-x, 50%) var(--cursor-y, 35%),
      rgba(130, 230, 255, .028),
      transparent 23%),
    linear-gradient(115deg,
      transparent 0 35%,
      rgba(255,255,255,.012) 47%,
      transparent 58%);
  mix-blend-mode: screen;
  transition: background-position .12s linear;
}

#particleCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -9;
  pointer-events: none;
  opacity: .34;
}

.page-noise {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .025;
  background:
    repeating-radial-gradient(circle at 0 0, transparent 0, #fff 1px, transparent 2px);
  background-size: 8px 8px;
  mix-blend-mode: soft-light;
}

.cursor-light {
  position: fixed;
  width: 520px;
  height: 520px;
  left: 50%;
  top: 50%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(98,231,255,.085), rgba(139,108,255,.045) 34%, transparent 70%);
  filter: blur(14px);
  transition: opacity .2s ease;
}

.ambient {
  position: fixed;
  z-index: -8;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(110px);
}
.ambient-a {
  width: 600px; height: 600px; left: -240px; top: 5%;
  background: rgba(39,149,255,.16);
  animation: ambientA 14s ease-in-out infinite alternate;
}
.ambient-b {
  width: 680px; height: 680px; right: -300px; top: 28%;
  background: rgba(116,79,255,.14);
  animation: ambientB 18s ease-in-out infinite alternate;
}
.ambient-c {
  width: 520px; height: 520px; left: 35%; bottom: -300px;
  background: rgba(63,226,255,.08);
  animation: ambientC 17s ease-in-out infinite alternate;
}
@keyframes ambientA { to { transform: translate(210px, 170px) scale(1.15); } }
@keyframes ambientB { to { transform: translate(-190px, 200px) scale(.92); } }
@keyframes ambientC { to { transform: translate(120px,-160px) scale(1.18); } }

.container { width: min(1220px, calc(100% - 42px)); margin: 0 auto; }

.site-header {
  position: fixed;
  z-index: 1000;
  top: 14px;
  left: 0;
  width: 100%;
  padding: 0 18px;
}
.nav-shell {
  position: relative;
  height: 64px;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 10px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 18px;
  background: rgba(4,8,16,.62);
  border: 1px solid rgba(113,198,255,.13);
  box-shadow: 0 14px 40px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.045);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  overflow: hidden;
}
.nav-shell::after {
  content: "";
  position: absolute;
  left: -35%;
  bottom: -1px;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent);
  box-shadow: 0 0 14px rgba(98,231,255,.75);
  animation: navRail 6s linear infinite;
}
@keyframes navRail { to { left: 110%; } }

.brand { display:flex; align-items:center; gap:10px; position:relative; z-index:2; }
.brand-mark {
  width: 42px; height: 42px; overflow:hidden; border-radius: 12px;
  border: 1px solid rgba(98,231,255,.18);
  box-shadow: 0 0 22px rgba(66,177,255,.1);
}
.brand-mark img { width:100%; height:100%; object-fit:cover; }
.brand-name { font-size:18px; font-weight:800; letter-spacing:.2px; }

.nav-links { display:flex; align-items:center; gap:26px; color:#9aa6b9; font-size:13px; }
.nav-links a { transition: color .2s ease, transform .2s ease; }
.nav-links a:hover { color:#fff; transform:translateY(-1px); }

.nav-download {
  position: relative;
  min-width: 118px;
  padding: 9px 14px;
  display:flex; align-items:flex-end; justify-content:center; gap:7px;
  border-radius:12px;
  color:#061019;
  background: linear-gradient(135deg, #f8fbff, #8ceaff);
  font-size:13px; font-weight:850;
  overflow:hidden;
}
.nav-download small { font-size:9px; opacity:.6; margin-bottom:2px; }

.shine-button::after {
  content:"";
  position:absolute;
  top:-70%; left:-45%;
  width:30%; height:240%;
  transform:rotate(18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  filter:blur(2px);
  animation:buttonShine 4.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes buttonShine {
  0%, 62% { left:-45%; opacity:0; }
  72% { opacity:.9; }
  92%,100% { left:125%; opacity:0; }
}

.hero {
  position: relative;
  min-height: 100vh;
  display:grid;
  place-items:center;
  padding: 145px 0 100px;
  overflow:hidden;
}
.hero-grid {
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(95,174,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,174,255,.035) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image: radial-gradient(circle at 50% 42%, #000 0%, rgba(0,0,0,.9) 28%, transparent 72%);
  transform: perspective(1000px) rotateX(56deg) scale(1.35) translateY(16%);
  transform-origin:center bottom;
}
.hero::before {
  content:"";
  position:absolute;
  width:1000px; height:520px;
  left:50%; top:28%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse at 24% 52%, rgba(35,178,255,.18), transparent 42%),
    radial-gradient(ellipse at 76% 42%, rgba(122,78,255,.18), transparent 40%),
    radial-gradient(ellipse at 52% 80%, rgba(255,255,255,.055), transparent 48%);
  filter:blur(72px);
  animation:heroCloud 9s ease-in-out infinite alternate;
}
@keyframes heroCloud {
  from { transform:translate(-54%,-48%) scale(.96) rotate(-2deg); }
  to { transform:translate(-46%,-54%) scale(1.08) rotate(2deg); }
}
.hero::after {
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:760px; height:760px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(112,205,255,.05);
  box-shadow:
    0 0 0 90px rgba(93,154,255,.018),
    0 0 0 180px rgba(125,96,255,.012),
    inset 0 0 80px rgba(95,199,255,.02);
  animation:heroRing 10s ease-in-out infinite alternate;
}
@keyframes heroRing { to { transform:translate(-50%,-50%) scale(1.07) rotate(5deg); opacity:.7; } }

.hero-beam {
  position:absolute;
  height:1px;
  width:58vw;
  opacity:.55;
  background:linear-gradient(90deg, transparent, rgba(98,231,255,.6), rgba(139,108,255,.55), transparent);
  box-shadow:0 0 18px rgba(98,231,255,.2);
}
.beam-one { left:-25vw; top:38%; transform:rotate(14deg); animation:beamOne 8s ease-in-out infinite alternate; }
.beam-two { right:-30vw; top:61%; transform:rotate(-11deg); animation:beamTwo 10s ease-in-out infinite alternate; }
@keyframes beamOne { to { transform:translateX(24vw) rotate(8deg); opacity:.2; } }
@keyframes beamTwo { to { transform:translateX(-22vw) rotate(-6deg); opacity:.18; } }

.hero-content { position:relative; z-index:3; max-width:920px; text-align:center; }
.hero-badge {
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 14px;
  border-radius:999px;
  color:#a9b6c9; font-size:12px; letter-spacing:.6px;
  border:1px solid rgba(105,210,255,.12);
  background:rgba(7,14,27,.52);
  backdrop-filter:blur(14px);
  margin-bottom:24px;
}
.live-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 14px var(--cyan);
  animation:livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse { 50% { opacity:.35; box-shadow:0 0 4px var(--cyan); } }

.hero-logo {
  width:76px; height:76px;
  margin:0 auto 16px;
  overflow:hidden; border-radius:22px;
  border:1px solid rgba(98,231,255,.15);
  box-shadow:0 0 38px rgba(73,169,255,.12);
}
.hero-logo img { width:100%; height:100%; object-fit:cover; }

.hero-title {
  margin-bottom:12px;
  font-size:clamp(76px, 12vw, 145px);
  line-height:.9;
  letter-spacing:-8px;
  font-weight:900;
  color:transparent;
  background:
    linear-gradient(110deg,
      #fff 0%, #7993aa 18%, #fff 34%, #70e7ff 49%, #9784ff 62%, #fff 77%, #647386 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:titleFlow 7.5s ease-in-out infinite;
  filter:drop-shadow(0 10px 45px rgba(106,207,255,.08));
}
@keyframes titleFlow {
  0% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
.hero-slogan {
  margin-bottom:18px;
  font-size:clamp(24px,3vw,34px);
  font-weight:760;
  letter-spacing:-.6px;
}
.hero-description {
  max-width:720px;
  margin:0 auto 34px;
  color:var(--muted);
  line-height:1.9;
  font-size:15px;
}
.hero-actions { display:flex; justify-content:center; gap:13px; flex-wrap:wrap; margin-bottom:36px; }
.button {
  position:relative;
  min-height:50px;
  min-width:150px;
  padding:12px 20px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:3px;
  flex-direction:column;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:800; font-size:14px;
  transition:transform .16s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  overflow:hidden;
}
.button small { font-size:9px; font-weight:700; opacity:.58; }
.button.primary {
  color:#06101a;
  background:linear-gradient(135deg,#fff 0%,#a7edff 48%,#a8a1ff 100%);
  box-shadow:0 16px 44px rgba(93,201,255,.12);
}
.button.primary:hover { box-shadow:0 18px 55px rgba(93,201,255,.2); }
.button.secondary {
  color:#e8effa;
  background:rgba(255,255,255,.04);
  border-color:rgba(127,213,255,.13);
  backdrop-filter:blur(14px);
}
.button.secondary:hover { background:rgba(255,255,255,.07); border-color:rgba(127,213,255,.22); }
.button.large { min-width:270px; padding:14px 24px; }

.hero-stats {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:12px 18px;
  border:1px solid rgba(107,203,255,.08);
  border-radius:16px;
  background:rgba(4,9,18,.42);
  backdrop-filter:blur(16px);
}
.hero-stats div { min-width:78px; }
.hero-stats b { display:block; font-size:13px; margin-bottom:3px; }
.hero-stats span { color:#657086; font-size:9px; }
.hero-stats i { width:1px; height:24px; background:rgba(255,255,255,.07); }

.hero-scroll {
  position:absolute; z-index:4; bottom:26px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#526075; font-size:8px; letter-spacing:2px;
}
.hero-scroll i {
  width:1px; height:36px;
  background:linear-gradient(to bottom, var(--cyan), transparent);
  position:relative;
}
.hero-scroll i::after {
  content:"";
  position:absolute; left:-2px; top:0;
  width:5px; height:5px; border-radius:50%; background:#fff;
  box-shadow:0 0 10px var(--cyan);
  animation:scrollLight 1.8s linear infinite;
}
@keyframes scrollLight { to { top:100%; opacity:0; } }

.marquee-wrap {
  overflow:hidden;
  border-top:1px solid rgba(95,185,255,.07);
  border-bottom:1px solid rgba(95,185,255,.07);
  background:rgba(255,255,255,.015);
}
.marquee-track {
  width:max-content;
  display:flex;
  align-items:center;
  gap:24px;
  padding:13px 0;
  color:#4c596d;
  font-size:10px;
  font-weight:800;
  letter-spacing:2.2px;
  will-change:transform;
  animation:marqueeLoop 34s linear infinite;
}
.marquee-group {
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:24px;
}
.marquee-group i { color:#50698b; font-style:normal; }

/* 两个相同 group，中间 gap 为 24px。
   移动半个总宽度再补半个 gap，刚好落到第二组起点，首尾无缝。 */
@keyframes marqueeLoop {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(calc(-50% - 12px),0,0); }
}

.section { position:relative; padding:112px 0; }
.section-heading { max-width:780px; margin:0 auto 58px; text-align:center; }
.section-kicker {
  display:block;
  margin-bottom:14px;
  color:#6f819d;
  font-size:10px; font-weight:900; letter-spacing:2.6px;
}
.section-heading h2,
.music-copy h2,
.download-left h2,
.about-copy h2 {
  margin-bottom:17px;
  font-size:clamp(34px,5vw,54px);
  line-height:1.08;
  letter-spacing:-2px;
}
.section-heading p,
.music-copy > p,
.download-left > p,
.about-copy > p {
  color:var(--muted);
  line-height:1.85;
  font-size:14px;
}

.showcase-section::before {
  content:"";
  position:absolute;
  width:900px; height:400px; left:50%; top:52%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(69,145,255,.08), transparent 70%);
  filter:blur(60px);
  pointer-events:none;
}
.carousel { position:relative; perspective:1600px; }
.carousel-glow {
  position:absolute;
  width:76%; height:72%;
  left:50%; top:55%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(95,205,255,.12), rgba(122,79,255,.07) 40%, transparent 70%);
  filter:blur(80px);
}
.carousel-frame {
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(116,211,255,.14);
  background:rgba(5,9,17,.78);
  box-shadow:0 58px 130px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.04);
}
.carousel-frame::before {
  content:"";
  position:absolute;
  z-index:5;
  width:35%; height:1px;
  top:-1px; left:-35%;
  background:linear-gradient(90deg,transparent,var(--cyan),#b69cff,transparent);
  box-shadow:0 0 18px rgba(98,231,255,.65);
  animation:frameRail 5.5s linear infinite;
}
@keyframes frameRail { to { left:110%; } }

.carousel-topbar {
  height:62px;
  padding:0 18px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.065);
  background:rgba(255,255,255,.018);
}
.window-dots { display:flex; gap:7px; }
.window-dots i { width:8px; height:8px; border-radius:50%; background:#3f4858; }
.carousel-current { text-align:center; }
.carousel-current span { display:block; color:#53627a; font-size:8px; letter-spacing:2px; margin-bottom:3px; }
.carousel-current b { font-size:12px; }
.carousel-count { justify-self:end; color:#59657a; font-size:11px; }
.carousel-count span:first-child { color:#e5efff; font-size:18px; font-weight:800; }
.carousel-count em { margin:0 6px; font-style:normal; }

.carousel-viewport { position:relative; overflow:hidden; aspect-ratio: 16 / 9; background:#000; }
.carousel-track {
  height:100%;
  display:flex;
  transition:transform .72s cubic-bezier(.2,.75,.15,1);
  will-change:transform;
}
.slide {
  min-width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
}
.slide img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 6s ease;
}
.slide.active img { transform:scale(1.018); }
.slide::after {
  content:"";
  position:absolute; inset:0;
  box-shadow:inset 0 0 100px rgba(0,0,0,.22);
  pointer-events:none;
}
.carousel-shine {
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.035) 45%, transparent 56%);
  transform:translateX(-100%);
  animation:screenShine 8s ease-in-out infinite;
}
@keyframes screenShine {
  0%,68% { transform:translateX(-100%); }
  88%,100% { transform:translateX(100%); }
}
.carousel-arrow {
  position:absolute;
  top:50%;
  width:46px; height:64px;
  transform:translateY(-50%);
  border:none;
  color:#fff;
  font-size:34px;
  cursor:pointer;
  background:rgba(5,10,19,.48);
  border:1px solid rgba(136,214,255,.12);
  backdrop-filter:blur(14px);
  transition:background .2s ease, transform .2s ease, opacity .2s ease;
}
.carousel-arrow:hover { background:rgba(68,165,215,.18); }
.carousel-arrow.prev { left:14px; border-radius:12px 18px 18px 12px; }
.carousel-arrow.next { right:14px; border-radius:18px 12px 12px 18px; }

.carousel-footer {
  min-height:112px;
  padding:22px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  border-top:1px solid rgba(255,255,255,.065);
}
.carousel-copy { max-width:720px; }
.carousel-copy h3 { font-size:17px; margin-bottom:7px; }
.carousel-copy p { color:#738096; line-height:1.7; font-size:11px; }
.carousel-dots { display:flex; gap:8px; flex-shrink:0; }
.carousel-dots button {
  width:8px; height:8px; padding:0;
  border:none; border-radius:99px; cursor:pointer;
  background:#3f4858;
  transition:width .25s ease, background .25s ease, box-shadow .25s ease;
}
.carousel-dots button.active {
  width:28px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  box-shadow:0 0 12px rgba(98,231,255,.35);
}
.carousel-progress { height:2px; background:rgba(255,255,255,.04); }
.carousel-progress span {
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  box-shadow:0 0 10px rgba(98,231,255,.4);
}

.features-section { background:linear-gradient(to bottom, transparent, rgba(15,26,45,.22), transparent); }
.bento {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}
.feature-card, .update-card, .download-panel {
  position:relative;
  overflow:hidden;
}
.feature-card {
  min-height:260px;
  padding:26px;
  border-radius:20px;
  border:1px solid rgba(107,200,255,.095);
  background:linear-gradient(145deg, rgba(18,31,51,.62), rgba(6,11,21,.58));
  box-shadow:inset 0 1px rgba(255,255,255,.03);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.feature-card::before, .update-card::before, .download-panel::before {
  content:"";
  position:absolute;
  width:300px; height:300px;
  left:calc(var(--mouse-x,50%) - 150px);
  top:calc(var(--mouse-y,50%) - 150px);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle, rgba(102,218,255,.11), rgba(131,85,255,.035) 38%, transparent 70%);
  transition:opacity .22s ease;
}
.feature-card:hover::before, .update-card:hover::before, .download-panel:hover::before { opacity:1; }
.feature-card:hover {
  transform:translateY(-4px);
  border-color:rgba(108,216,255,.2);
  background:linear-gradient(145deg, rgba(21,37,61,.75), rgba(8,14,27,.66));
}
.feature-live { grid-column:span 7; }
.feature-music { grid-column:span 5; }
.feature-request { grid-column:span 5; }
.feature-card:nth-of-type(4) { grid-column:span 3; }
.feature-card:nth-of-type(5) { grid-column:span 4; }
.feature-style { grid-column:span 6; }
.feature-hotkey { grid-column:span 6; }

.feature-no {
  position:absolute; top:22px; right:24px;
  color:#41516a; font-size:10px; letter-spacing:1px;
}
.feature-icon {
  width:48px; height:48px;
  display:grid; place-items:center;
  margin-bottom:25px;
  border-radius:14px;
  color:#bceeff;
  font-size:11px; font-weight:900; letter-spacing:.7px;
  background:rgba(95,202,255,.065);
  border:1px solid rgba(95,202,255,.12);
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.feature-card h3 { font-size:19px; margin-bottom:11px; }
.feature-card p { max-width:560px; color:#7f8ba0; line-height:1.75; font-size:12px; }
.platform-row { display:flex; gap:8px; margin-top:25px; }
.platform-row span {
  padding:7px 10px; border-radius:9px;
  color:#88dff3; font-size:10px;
  border:1px solid rgba(90,202,230,.1);
  background:rgba(78,184,210,.055);
}
.data-flow {
  position:absolute; right:35px; bottom:34px;
  width:170px; height:38px;
  border-top:1px solid rgba(99,222,255,.14);
}
.data-flow i {
  position:absolute; top:-3px;
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 12px var(--cyan);
  animation:dataFlow 3s linear infinite;
}
.data-flow i:nth-child(2){animation-delay:1s}
.data-flow i:nth-child(3){animation-delay:2s}
@keyframes dataFlow { from{left:0;opacity:0} 10%{opacity:1} to{left:100%;opacity:0} }

.mini-spectrum {
  position:absolute; right:26px; bottom:28px;
  height:72px; display:flex; align-items:flex-end; gap:5px;
  opacity:.75;
}
.mini-spectrum i, .video-spectrum i {
  display:block;
  width:5px;
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(to top, #5879ff, #6ee9ff);
  box-shadow:0 0 8px rgba(98,231,255,.12);
  animation:spectrum 1.15s ease-in-out infinite alternate;
}
.mini-spectrum i:nth-child(2n), .video-spectrum i:nth-child(3n) { animation-delay:.15s; }
.mini-spectrum i:nth-child(3n), .video-spectrum i:nth-child(4n) { animation-delay:.28s; }
.mini-spectrum i:nth-child(4n), .video-spectrum i:nth-child(5n) { animation-delay:.42s; }
@keyframes spectrum {
  from { height:12px; opacity:.45; }
  to { height:64px; opacity:1; }
}
.request-line {
  position:absolute; left:26px; right:26px; bottom:28px;
  display:flex; align-items:center; gap:10px;
  color:#69758b; font-size:9px;
}
.request-line i {
  flex:1; height:1px; overflow:hidden;
  background:linear-gradient(90deg, transparent, rgba(98,231,255,.42), transparent);
  position:relative;
}
.request-line i::after {
  content:"";
  position:absolute; top:-2px; left:0;
  width:5px; height:5px; border-radius:50%; background:#fff;
  box-shadow:0 0 9px var(--cyan);
  animation:reqFlow 2.2s linear infinite;
}
.request-line i:nth-of-type(2)::after { animation-delay:.7s; }
@keyframes reqFlow { to{left:100%;opacity:0} }

.style-swatches { position:absolute; right:28px; bottom:26px; display:flex; gap:8px; }
.style-swatches i { width:32px; height:32px; border-radius:10px; border:1px solid rgba(255,255,255,.08); }
.style-swatches i:nth-child(1){background:linear-gradient(135deg,#742f45,#f07b9f)}
.style-swatches i:nth-child(2){background:linear-gradient(135deg,#ead8b4,#a98358)}
.style-swatches i:nth-child(3){background:linear-gradient(135deg,#f3f0ef,#cb9a9a)}
.style-swatches i:nth-child(4){background:linear-gradient(135deg,#07162c,#1ee5ff)}
.keys { position:absolute; right:26px; bottom:27px; display:flex; gap:7px; }
.keys kbd {
  min-width:42px; padding:8px 10px; text-align:center;
  border-radius:9px; color:#8a98ad; font-size:9px; font-family:inherit;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 -2px rgba(255,255,255,.025);
}

.music-section {
  overflow:hidden;
  background:
    linear-gradient(to bottom, transparent 0%, rgba(9,14,27,.7) 15%, rgba(6,10,18,.82) 50%, rgba(9,14,27,.6) 85%, transparent 100%);
}
.music-orb {
  position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none;
}
.music-orb-a { width:520px;height:520px;left:-220px;top:20%;background:rgba(44,193,255,.13); }
.music-orb-b { width:600px;height:600px;right:-260px;bottom:0;background:rgba(130,72,255,.12); }

.music-layout {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:52px;
  align-items:center;
}
.music-copy > p { max-width:500px; margin-bottom:32px; }
.music-feature-list { display:grid; gap:9px; }
.music-chip {
  position:relative;
  display:grid;
  grid-template-columns:34px auto;
  column-gap:12px;
  padding:14px 15px;
  border-radius:13px;
  border:1px solid rgba(104,201,255,.07);
  background:rgba(255,255,255,.018);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.music-chip:hover, .music-chip.active {
  transform:translateX(4px);
  border-color:rgba(104,201,255,.15);
  background:rgba(84,184,255,.04);
}
.music-chip span { grid-row:1 / 3; color:#4f617a; font-size:10px; padding-top:3px; }
.music-chip b { font-size:12px; margin-bottom:3px; }
.music-chip small { color:#657086; font-size:9px; }

.video-shell {
  position:relative;
  aspect-ratio:16/9;
  border-radius:22px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(105,209,255,.15);
  box-shadow:0 50px 110px rgba(0,0,0,.5);
}
.video-border {
  position:absolute; z-index:4; inset:-1px;
  border-radius:22px;
  pointer-events:none;
  background:conic-gradient(from 0deg, transparent, rgba(98,231,255,.7), transparent 16%, transparent 50%, rgba(139,108,255,.65), transparent 68%);
  opacity:.45;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:1px;
  mask-composite:exclude;
  -webkit-mask-composite:xor;
  animation:videoBorder 8s linear infinite;
}
@keyframes videoBorder { to { transform:rotate(360deg) scale(1.08); } }
.video-shell video { width:100%; height:100%; object-fit:cover; }
.video-vignette {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.5), transparent 30%, transparent 70%, rgba(0,0,0,.2));
  pointer-events:none;
}
.video-ui {
  position:absolute; z-index:3; left:18px; right:18px; top:16px;
  display:flex; align-items:center; justify-content:space-between;
  color:#d8e7f7; font-size:9px; font-weight:800; letter-spacing:1.2px;
}
.video-ui > div { display:flex; align-items:center; gap:7px; }
.video-live-dot { width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 11px var(--cyan); }
.video-ui button {
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:7px 10px;
  color:#cad8e8; background:rgba(4,8,14,.55);
  backdrop-filter:blur(12px);
  cursor:pointer; font-size:9px;
}
.video-spectrum {
  position:absolute; z-index:3;
  left:18px; right:18px; bottom:14px;
  height:24px;
  display:flex; align-items:flex-end; gap:3px;
  opacity:.5;
}
.video-spectrum i { width:3px; animation-duration:1s; }
.video-spectrum i:nth-child(odd) { animation-duration:1.35s; }
.video-spectrum i { --max:22px; }
.video-spectrum i { animation-name:videoSpec; }
@keyframes videoSpec { from{height:3px} to{height:22px} }

.updates-head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px;
  margin-bottom:34px;
}
.updates-head h2 { font-size:clamp(48px,8vw,86px); line-height:.95; letter-spacing:-5px; margin-bottom:10px; }
.updates-head p { color:#6f7b90; font-size:13px; }
.update-badge {
  padding:13px 15px; border-radius:14px;
  border:1px solid rgba(102,214,255,.1);
  background:rgba(255,255,255,.025);
  min-width:110px;
}
.update-badge span { display:block;color:#53627a;font-size:8px;letter-spacing:1.3px;margin-bottom:4px; }
.update-badge b { font-size:14px; }

.update-grid { display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:15px; }
.update-card {
  min-height:300px;
  padding:24px;
  border-radius:19px;
  border:1px solid rgba(103,197,255,.08);
  background:linear-gradient(145deg, rgba(16,27,45,.62), rgba(5,10,18,.58));
}
.update-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.update-card-head span { color:#6782a5; font-size:9px; letter-spacing:1.8px; font-weight:900; }
.update-card-head b { color:#b9c6d7; font-size:11px; }
.update-card ul { list-style:none; display:grid; gap:14px; }
.update-card li {
  position:relative; padding-left:15px;
  color:#7c899e; font-size:11px; line-height:1.75;
}
.update-card li::before {
  content:"";
  position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  box-shadow:0 0 8px rgba(98,231,255,.2);
}
.update-note {
  margin-top:15px; padding:16px 18px;
  border-radius:14px;
  display:flex; align-items:center; gap:18px;
  border:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.018);
}
.update-note span { color:#56657d; font-size:9px; font-weight:900; letter-spacing:1.5px; }
.update-note p { color:#69758a; font-size:10px; }

.download-panel {
  min-height:440px;
  padding:54px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  border-radius:28px;
  border:1px solid rgba(112,210,255,.13);
  background:
    radial-gradient(circle at 80% 50%, rgba(70,184,255,.08), transparent 36%),
    radial-gradient(circle at 92% 44%, rgba(128,82,255,.08), transparent 42%),
    rgba(8,14,25,.68);
  box-shadow:0 42px 100px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.04);
}
.download-rays {
  position:absolute; right:-20%; top:-55%;
  width:760px; height:760px;
  background:repeating-conic-gradient(from 0deg, rgba(98,231,255,.026) 0 5deg, transparent 5deg 14deg);
  border-radius:50%;
  animation:raysSpin 35s linear infinite;
  mask-image:radial-gradient(circle,black,transparent 68%);
}
@keyframes raysSpin { to{transform:rotate(360deg)} }
.download-left { position:relative; z-index:3; max-width:620px; }
.download-left > p { max-width:590px; margin-bottom:28px; }
.download-meta {
  display:flex; flex-wrap:wrap; gap:9px; margin-bottom:30px;
}
.download-meta div {
  min-width:120px;
  padding:10px 12px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
}
.download-meta span { display:block; color:#4f5d73; font-size:7px; letter-spacing:1.1px; margin-bottom:4px; }
.download-meta b { font-size:10px; }

.download-logo-wrap {
  position:relative; min-height:320px;
  display:grid; place-items:center;
}
.download-logo {
  position:relative; z-index:4;
  width:126px; height:126px;
  border-radius:34px; overflow:hidden;
  border:1px solid rgba(116,222,255,.18);
  box-shadow:0 25px 70px rgba(0,0,0,.42), 0 0 45px rgba(86,194,255,.1);
  animation:logoFloat 4.5s ease-in-out infinite;
}
.download-logo img { width:100%;height:100%;object-fit:cover; }
@keyframes logoFloat { 50%{transform:translateY(-10px) rotate(1.5deg)} }
.download-ring {
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(104,215,255,.08);
}
.ring-1 { width:220px;height:220px; animation:ringPulse 4s ease-in-out infinite; }
.ring-2 { width:300px;height:300px; border-style:dashed; animation:ringSpin 24s linear infinite; }
.ring-3 { width:380px;height:380px; opacity:.45; animation:ringSpin 34s linear infinite reverse; }
@keyframes ringPulse { 50%{transform:scale(1.08);opacity:.5} }
@keyframes ringSpin { to{transform:rotate(360deg)} }

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:start;
}
.about-copy > p { max-width:650px; }
.about-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.about-card {
  position:relative;
  min-height:130px;
  padding:20px;
  border-radius:17px;
  border:1px solid rgba(102,196,255,.075);
  background:rgba(255,255,255,.02);
}
.about-card span { display:block; color:#53627a; font-size:8px; letter-spacing:1.4px; margin-bottom:13px; }
.about-card b { font-size:13px; }
.copy-btn {
  position:absolute; right:14px; bottom:14px;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.025);
  color:#738097;
  border-radius:8px;
  padding:6px 9px;
  cursor:pointer; font-size:8px;
}
.copy-btn:hover { color:#fff; border-color:rgba(98,231,255,.15); }

footer {
  padding:38px 0;
  border-top:1px solid rgba(97,194,255,.065);
  background:rgba(1,3,7,.4);
}
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer-brand { display:flex; align-items:center; gap:10px; }
.footer-brand img { width:36px;height:36px;border-radius:10px; }
.footer-brand b { display:block;font-size:11px; }
.footer-brand span { display:block;color:#4c586c;font-size:8px;margin-top:2px; }
.footer-copy { color:#49556a;font-size:9px; }

.toast {
  position:fixed;
  z-index:1200;
  left:50%; bottom:28px;
  transform:translate(-50%,20px);
  padding:9px 14px;
  border-radius:10px;
  border:1px solid rgba(105,215,255,.15);
  color:#ccecff; background:rgba(5,12,22,.85);
  backdrop-filter:blur(18px);
  opacity:0; pointer-events:none;
  font-size:10px;
  transition:opacity .22s ease, transform .22s ease;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

.reveal {
  opacity:0;
  transform:translateY(24px) scale(.99);
  transition:opacity .75s ease, transform .75s cubic-bezier(.18,.75,.2,1);
}
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 1000px) {
  .nav-links { gap:16px; }
  .music-layout { grid-template-columns:1fr; }
  .music-copy { max-width:720px; }
  .feature-live,.feature-music,.feature-request,
  .feature-card:nth-of-type(4),.feature-card:nth-of-type(5),
  .feature-style,.feature-hotkey { grid-column:span 6; }
  .update-grid { grid-template-columns:1fr; }
  .download-panel { grid-template-columns:1fr; }
  .download-logo-wrap { min-height:270px; }
  .about-grid { grid-template-columns:1fr; gap:40px; }
}

@media (max-width: 760px) {
  .container { width:calc(100% - 28px); }
  .site-header { top:9px; padding:0 10px; }
  .nav-shell { height:58px; border-radius:15px; }
  .nav-links { display:none; }
  .brand-mark { width:36px;height:36px;border-radius:10px; }
  .nav-download { min-width:96px; padding:8px 10px; }
  .hero { min-height:auto; padding:125px 0 90px; }
  .hero-title { letter-spacing:-5px; }
  .hero-description { font-size:13px; }
  .hero-stats { gap:12px; flex-wrap:wrap; }
  .hero-stats i { display:none; }
  .section { padding:84px 0; }
  .section-heading { margin-bottom:42px; }
  .carousel-topbar { grid-template-columns:1fr auto; }
  .window-dots { display:none; }
  .carousel-current { text-align:left; }
  .carousel-viewport { aspect-ratio: 16/10; }
  .slide img { object-fit:cover; }
  .carousel-arrow { width:38px;height:54px;font-size:28px; }
  .carousel-footer { align-items:flex-start; flex-direction:column; min-height:140px; gap:18px; }
  .feature-live,.feature-music,.feature-request,
  .feature-card:nth-of-type(4),.feature-card:nth-of-type(5),
  .feature-style,.feature-hotkey { grid-column:span 12; }
  .feature-card { min-height:225px; }
  .data-flow,.style-swatches,.keys { opacity:.7; }
  .updates-head { align-items:flex-start; flex-direction:column; }
  .updates-head h2 { letter-spacing:-3px; }
  .download-panel { padding:34px 24px; }
  .download-logo-wrap { min-height:240px; }
  .ring-3 { width:310px;height:310px; }
  .about-cards { grid-template-columns:1fr; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
}

@media (max-width: 520px) {
  .hero-logo { width:64px;height:64px;border-radius:18px; }
  .hero-actions .button { width:100%; }
  .hero-stats { width:100%; }
  .hero-stats div { flex:1 1 40%; }
  .carousel-frame { border-radius:18px; }
  .carousel-topbar { height:56px; }
  .carousel-viewport { aspect-ratio: 16/11; }
  .carousel-current b { font-size:10px; }
  .carousel-copy p { font-size:10px; }
  .data-flow { display:none; }
  .music-copy h2,.section-heading h2,.download-left h2,.about-copy h2 { letter-spacing:-1.2px; }
  .download-meta div { flex:1 1 30%; min-width:90px; }
  .button.large { min-width:100%; width:100%; }
  .download-logo { width:105px;height:105px;border-radius:28px; }
  .ring-1{width:180px;height:180px}.ring-2{width:240px;height:240px}.ring-3{width:290px;height:290px}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  .reveal { opacity:1; transform:none; }
  #particleCanvas, #flowCanvas { display:none; }
}


/* V2.2：轮播箭头必须是真按钮，不再让拖拽层抢事件 */
.carousel-arrow {
  z-index: 12;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.carousel-arrow:active {
  transform: translateY(-50%) scale(.94);
}
.carousel-track {
  position: relative;
  z-index: 1;
}
.carousel-shine {
  z-index: 3;
}