/* ============================================================
   迷电音播放器下载页 — 深空编辑排版风格
   底色 #05060d · 星光青 #9adfff · 淡紫 #b7a6ff · 冰蓝 #8be9fd
   锐角 · 噪点 · 编号排版 · 低饱和太空质感
   ============================================================ */

:root{
  --bg:#05060d;
  --bg2:#0a0c15;
  --ink:#eef1f7;
  --dim:#8b93a7;
  --acid:#9adfff;   /* 星光青 */
  --magenta:#b7a6ff; /* 淡紫 */
  --cyan:#8be9fd;
  --line:rgba(220,230,250,.15);
  --line-soft:rgba(220,230,250,.07);
  --disp:'Anton',Impact,'Arial Narrow','PingFang SC','Microsoft YaHei',sans-serif;
  --body:'Chakra Petch','PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'Chakra Petch',ui-monospace,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.loading *{visibility:hidden}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
section[id],.chip-check{scroll-margin-top:76px}

/* 全局噪点颗粒 */
body::after{
  content:"";position:fixed;inset:-50%;z-index:2000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,3%)}
}

.wrap{width:min(1240px,92%);margin:0 auto}
.wrap-narrow{width:min(860px,92%)}

/* ============ 顶部导航 ============ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(7,7,11,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  width:min(1240px,94%);margin:0 auto;height:60px;
  display:flex;align-items:center;gap:34px;
}
.logo{
  font-family:var(--disp);font-size:22px;letter-spacing:2px;
  display:flex;align-items:center;gap:9px;
}
.logo sup{font-size:9px;color:var(--acid)}
.logo-dot{width:9px;height:9px;border-radius:50%;background:var(--acid);box-shadow:0 0 10px rgba(154,223,255,.8)}
.nav{display:flex;gap:26px;margin-left:12px}
.nav-link{
  font-size:13px;letter-spacing:1px;color:var(--dim);
  padding:4px 0;position:relative;transition:color .2s;
}
.nav-link i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--acid);margin-right:5px}
.nav-link:hover{color:var(--ink)}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--acid);transition:width .25s;
}
.nav-link:hover::after{width:100%}
.header-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.ver-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--acid);
  border:1px solid rgba(154,223,255,.4);padding:3px 9px;
}
.nav-home{
  font-size:13px;letter-spacing:1px;color:var(--ink);
  border:1px solid var(--line);padding:6px 14px;transition:.2s;
}
.nav-home:hover{background:var(--ink);color:var(--bg)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;margin-left:auto;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}

/* ============ Hero ============ */
.hero{
  position:relative;min-height:100vh;overflow:hidden;
  display:flex;align-items:stretch;background:var(--bg);
}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero.no-webgl{
  background:
    radial-gradient(700px 420px at 72% 18%,rgba(139,233,253,.08),transparent 65%),
    radial-gradient(800px 600px at 18% 75%,rgba(154,223,255,.06),transparent 60%),
    radial-gradient(500px 380px at 40% 40%,rgba(183,166,255,.07),transparent 65%),
    var(--bg);
}
.hero-scanlines{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;
}
.hero-frame{
  position:relative;z-index:2;width:min(1240px,92%);margin:0 auto;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px 0 40px;
}
.hero-side-label{
  position:absolute;right:-8px;top:50%;transform:translateY(-50%) rotate(90deg);
  transform-origin:center;font-family:var(--mono);font-size:11px;letter-spacing:6px;
  color:var(--dim);white-space:nowrap;
}
.hero-kicker{
  font-family:var(--mono);font-size:13px;letter-spacing:3px;color:var(--acid);
  margin-bottom:46px;
}
.hero-kicker::before{content:"//";margin-right:10px;color:var(--magenta)}
.hero-title{
  font-family:var(--disp);text-transform:uppercase;
  font-size:clamp(54px,10vw,136px);line-height:1.16;letter-spacing:2px;
  margin-bottom:44px;
}
.t-line{display:block;font-weight:400}
/* 海报式错位：第二行右移，右侧留给星空与行星 */
.t-outline{
  margin-left:clamp(56px,11vw,190px);
}
.t-outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(190,215,255,.85);
  text-shadow:0 0 46px rgba(130,180,255,.28);
}
.t-sub{
  font-size:.3em;letter-spacing:8px;color:var(--dim);margin-top:30px;
  display:flex;align-items:center;gap:18px;
  margin-left:clamp(28px,5.5vw,95px);
}
.t-sub::after{content:"";flex:1;max-width:220px;height:2px;background:var(--acid)}
.hero-desc{color:var(--dim);max-width:540px;font-size:15px;margin-bottom:38px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}

/* 按钮 — 切角 + 硬阴影 */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:2px;
  padding:15px 34px;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,color .18s;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  border:none;
}
.btn b{font-weight:700}
.btn-acid{background:var(--acid);color:#08121a}
.btn-acid:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(154,223,255,.35);
}
.btn-line{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.btn-line:hover{color:var(--acid);box-shadow:inset 0 0 0 1.5px var(--acid);transform:translateY(-2px)}

.hero-bottom{
  margin-top:auto;padding-top:56px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);
}
.hero-platforms{display:flex;gap:12px;flex-wrap:wrap;padding-top:22px}
.platform-chip{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;letter-spacing:2px;
  color:var(--dim);background:rgba(11,11,18,.6);
  border:1px solid var(--line);padding:10px 18px;cursor:pointer;transition:.2s;
}
.chip-dot{width:7px;height:7px;border-radius:50%;background:var(--dim);transition:.2s}
.platform-chip:hover{color:var(--ink);border-color:var(--ink)}
.platform-chip.active{color:var(--acid);border-color:var(--acid)}
.platform-chip.active .chip-dot{background:var(--acid);box-shadow:0 0 8px var(--acid)}
.hero-scroll{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--dim);
}
.hero-scroll span{
  width:1px;height:44px;
  background:linear-gradient(180deg,var(--acid),transparent);
  animation:scrollBeam 1.8s ease-in-out infinite;
}
@keyframes scrollBeam{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ 跑马灯 ============ */
.ticker{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg2);overflow:hidden;padding:13px 0;
}
.ticker-track{
  display:flex;gap:34px;width:max-content;
  font-family:var(--disp);font-size:17px;letter-spacing:3px;text-transform:uppercase;
  animation:ticker 34s linear infinite;white-space:nowrap;color:rgba(220,230,250,.55);
}
.ticker-track b{color:var(--magenta);font-weight:400;opacity:.55}
.ticker-track span:nth-child(4n+3){color:var(--acid);opacity:.8}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ 区块通用 ============ */
.section{padding:110px 0;border-bottom:1px solid var(--line-soft)}
.sec-head{margin-bottom:56px;position:relative}
.sec-no{
  font-family:var(--disp);font-size:15px;color:var(--magenta);letter-spacing:2px;
  display:block;margin-bottom:10px;
}
.sec-no::before{content:"[";}
.sec-no::after{content:"]";}
.sec-title{
  font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,5.5vw,58px);letter-spacing:1px;line-height:1.1;
  display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;
}
.sec-en{font-size:.38em;letter-spacing:6px;color:var(--dim)}
.sec-note{color:var(--dim);font-size:14px;margin-top:12px;font-family:var(--mono);letter-spacing:1px}

/* ============ 01 平台介绍 ============ */
.intro-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:start}
.st-lead{font-size:clamp(20px,2.6vw,28px);line-height:1.5;margin-bottom:22px}
.st-lead b{color:var(--acid);font-family:var(--disp);font-weight:400;letter-spacing:1px}
.intro-statement p{color:var(--dim);font-size:15px;margin-bottom:14px}
.intro-statement .st-lead{color:var(--ink)}
.intro-stats{border-top:1px solid var(--line)}
.stat-line{
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.stat-num{
  font-family:var(--disp);font-size:clamp(38px,4.5vw,54px);color:var(--acid);
  min-width:150px;line-height:1;
}
.stat-unit{font-family:var(--disp);font-size:22px;color:var(--magenta)}
.stat-label{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--dim)}

/* ============ 02 功能 — 歌单式列表 ============ */
.tracklist{border-top:1px solid var(--line)}
.track{
  display:grid;grid-template-columns:90px 1fr auto;gap:26px;align-items:center;
  padding:30px 10px;border-bottom:1px solid var(--line);
  position:relative;transition:background .25s,padding-left .25s;
}
.track::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--acid);transform:scaleY(0);transition:transform .25s;
}
.track:hover{background:rgba(154,223,255,.04);padding-left:26px}
.track:hover::before{transform:scaleY(1)}
.track-no{
  font-family:var(--disp);font-size:30px;color:transparent;
  -webkit-text-stroke:1.3px var(--dim);transition:.25s;
}
.track:hover .track-no{-webkit-text-stroke:1.3px var(--acid);text-shadow:0 0 18px rgba(154,223,255,.35)}
.track-main h3{font-size:19px;letter-spacing:1px;margin-bottom:5px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.track-main h3 i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--magenta)}
.track-main p{color:var(--dim);font-size:14px}
.track-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--dim);
  border:1px solid var(--line);padding:5px 12px;transition:.25s;
}
.track:hover .track-tag{color:var(--acid);border-color:rgba(154,223,255,.45)}

/* ============ 03 下载 ============ */
/* 手机端引导弹窗 */
.mobile-mask{
  position:fixed;inset:0;z-index:3000;
  background:rgba(4,5,12,.85);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.mobile-mask[hidden]{display:none}
.mobile-box{
  width:min(420px,100%);background:var(--bg2);border:1px solid rgba(154,223,255,.4);
  padding:34px 28px;text-align:center;animation:panelIn .3s ease;
}
.mobile-box .mb-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:4px;color:var(--magenta);margin-bottom:12px;
}
.mobile-box h4{font-family:var(--disp);font-size:24px;letter-spacing:1px;font-weight:400;margin-bottom:12px}
.mobile-box .mb-desc{color:var(--dim);font-size:13.5px;margin-bottom:16px}
.mobile-box .cmd-box{justify-content:center;margin-bottom:22px}
.mb-close{width:100%;justify-content:center;padding:14px 20px}

.dl-list{border-top:1px solid var(--line)}
.dl-row{
  display:grid;grid-template-columns:70px 1fr auto;gap:30px;align-items:center;
  padding:38px 16px;border-bottom:1px solid var(--line);
  position:relative;transition:background .25s;
}
.dl-row:hover{background:var(--bg2)}
.dl-row.recommended{background:rgba(154,223,255,.05)}
.dl-row.recommended::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acid);
}
.dl-rec{
  position:absolute;top:14px;right:16px;
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  background:var(--acid);color:#08121a;padding:3px 10px;font-weight:700;
}
.dl-idx{font-family:var(--mono);font-size:13px;color:var(--dim);letter-spacing:1px}
.dl-info h3{
  font-family:var(--disp);font-weight:400;font-size:clamp(28px,4vw,44px);
  letter-spacing:2px;line-height:1.1;text-transform:uppercase;
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;transition:color .25s;
}
.dl-row:hover .dl-info h3{color:var(--acid)}
.dl-info h3 em{font-style:normal;font-family:var(--body);font-size:14px;letter-spacing:2px;color:var(--dim)}
.dl-sys{color:var(--dim);font-size:13.5px;margin-top:8px}
.dl-meta{color:#5d5d6e;font-family:var(--mono);font-size:12px;letter-spacing:1px;margin-top:3px}
.btn-dl{
  background:transparent;color:var(--ink);padding:16px 40px;
  box-shadow:inset 0 0 0 1.5px var(--line);font-size:16px;
}
.btn-dl:hover{
  background:var(--acid);color:#08121a;box-shadow:inset 0 0 0 1.5px var(--acid),0 8px 30px rgba(154,223,255,.3);
  transform:translateY(-2px);
}
.dl-help{margin-top:34px;color:var(--dim);font-size:14px}
.dl-help a{color:var(--acid);border-bottom:1px solid rgba(154,223,255,.35);padding-bottom:2px}
.dl-help a:hover{color:var(--magenta);border-color:rgba(183,166,255,.5)}

/* ============ 04 安装教程 ============ */
.tabs{display:flex;gap:0;margin-bottom:46px;border:1px solid var(--line);width:max-content}
.tab{
  font-family:var(--disp);font-size:16px;letter-spacing:3px;text-transform:uppercase;
  background:transparent;color:var(--dim);border:none;cursor:pointer;
  padding:14px 42px;transition:.2s;border-right:1px solid var(--line);
}
.tab:last-child{border-right:none}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--acid);color:#08121a}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:panelIn .35s ease}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.steps{border-top:1px solid var(--line)}
.step{
  display:grid;grid-template-columns:130px 1fr;gap:30px;
  padding:28px 10px;border-bottom:1px solid var(--line);transition:background .25s;
}
.step:hover{background:var(--bg2)}
.step-no{
  font-family:var(--mono);font-size:13px;letter-spacing:2px;color:var(--magenta);
  padding-top:4px;
}
.step-body h4{font-size:17px;letter-spacing:1px;margin-bottom:6px}
.step-body p{color:var(--dim);font-size:14px}
.step-body b{color:var(--acid);font-weight:600}
.step-body code{
  font-family:var(--mono);font-size:12.5px;color:var(--cyan);
  background:rgba(139,233,253,.07);padding:2px 8px;border:1px solid rgba(139,233,253,.22);
}
.cmd-box{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#040509;border:1px solid rgba(154,223,255,.3);
  padding:14px 18px;margin-top:14px;
}
.cmd-ps{color:var(--magenta);font-family:var(--mono);font-size:14px}
.cmd-box code{background:none;border:none;color:var(--acid);font-size:13.5px;padding:0}
.btn-copy{
  margin-left:auto;background:transparent;color:var(--acid);
  border:1px solid rgba(154,223,255,.45);font-family:var(--mono);font-size:11px;letter-spacing:2px;
  padding:6px 16px;cursor:pointer;transition:.2s;
}
.btn-copy:hover{background:var(--acid);color:#08121a}
.btn-copy.copied{background:var(--magenta);border-color:var(--magenta);color:#0a0a14}

.tip{
  display:flex;gap:14px;align-items:flex-start;
  border:1px dashed rgba(183,166,255,.4);background:rgba(183,166,255,.05);
  padding:16px 20px;margin-top:26px;font-size:14px;color:var(--dim);
}
.tip-mark{
  flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:var(--magenta);color:#0a0a14;font-weight:700;font-size:14px;
}

.chip-check{
  margin-top:40px;border:1px solid var(--line);background:var(--bg2);
  padding:30px 32px;
}
.chip-check h4{font-size:17px;letter-spacing:1px;margin-bottom:8px}
.chip-check h4::before{content:"?";font-family:var(--disp);color:var(--acid);margin-right:12px}
.chip-check p{color:var(--dim);font-size:14px;margin-bottom:18px}
.chip-tags{display:flex;gap:14px;flex-wrap:wrap}
.chip-tag{font-family:var(--mono);font-size:12px;letter-spacing:1px;padding:9px 16px}
.tag-intel{color:var(--cyan);border:1px solid rgba(139,233,253,.35)}
.tag-arm{color:var(--magenta);border:1px solid rgba(183,166,255,.35)}

/* ============ 05 FAQ ============ */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);transition:background .25s}
.faq-item.open{background:var(--bg2)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:none;border:none;color:var(--ink);
  font-size:16px;font-weight:600;letter-spacing:.5px;
  padding:22px 12px;cursor:pointer;text-align:left;
}
.faq-q:hover{color:var(--acid)}
.faq-x{
  flex:none;width:14px;height:14px;position:relative;transition:transform .3s;
}
.faq-x::before,.faq-x::after{
  content:"";position:absolute;background:var(--acid);
}
.faq-x::before{left:0;top:6px;width:14px;height:2px}
.faq-x::after{left:6px;top:0;width:2px;height:14px}
.faq-item.open .faq-x{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 12px 22px;color:var(--dim);font-size:14px}
.faq-a code{font-family:var(--mono);font-size:12px;color:var(--cyan)}

/* ============ 页脚 ============ */
.site-footer{padding:80px 0 44px;background:var(--bg2)}
.footer-big{
  font-family:var(--disp);font-size:clamp(70px,14vw,180px);line-height:.9;
  color:transparent;-webkit-text-stroke:2px rgba(242,242,236,.22);
  letter-spacing:4px;margin-bottom:36px;transition:.4s;
}
.footer-big:hover{-webkit-text-stroke:2px var(--acid);text-shadow:0 0 40px rgba(154,223,255,.22)}
.footer-big em{font-style:normal;-webkit-text-stroke:0;color:var(--acid);font-size:.3em;vertical-align:super}
.footer-row{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:26px;margin-bottom:30px;
}
.footer-row p{color:var(--dim);font-size:14px}
.footer-links{display:flex;gap:26px;flex-wrap:wrap}
.footer-links a{color:var(--dim);font-size:14px;transition:.2s}
.footer-links a:hover{color:var(--acid)}
.footer-copy{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:#55555f;font-size:12.5px;font-family:var(--mono);letter-spacing:1px;
}
.footer-slogan{color:var(--magenta);opacity:.85}

/* ============ 滚动进入动画 ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}

/* ============ 响应式 ============ */
@media (max-width:1024px){
  .intro-grid{grid-template-columns:1fr;gap:50px}
  .hero-side-label{display:none}
}
@media (max-width:768px){
  .section{padding:80px 0}
  .nav{
    position:fixed;top:60px;left:0;right:0;flex-direction:column;gap:0;align-items:stretch;
    background:rgba(7,7,11,.97);border-bottom:1px solid var(--line);
    padding:8px 0 14px;transform:translateY(-130%);transition:transform .3s ease;
    margin-left:0;
  }
  .nav.open{transform:none}
  .nav-link{padding:13px 26px}
  .nav-link::after{display:none}
  .nav-toggle{display:block}
  .ver-tag{display:none}
  .track{grid-template-columns:56px 1fr;gap:18px}
  .track-tag{display:none}
  .dl-row{grid-template-columns:1fr;gap:16px;padding:30px 12px}
  .dl-idx{order:-1}
  .btn-dl{justify-content:center}
  .step{grid-template-columns:1fr;gap:8px}
  .tabs{width:100%}
  .tab{flex:1;padding:14px 10px}
  .hero-frame{padding-top:110px}
  .stat-num{min-width:110px}
  .stat-label{margin-left:0;width:100%}
}
@media (max-width:420px){
  .btn{padding:14px 24px;font-size:14px}
  .footer-copy{flex-direction:column}
}