@charset "utf-8";
/* 囧次元 · jiongcy.cn —— 赛博二次元 / 深紫黑底 + 荧光粉 · 电光青蓝
   渲染语言「载频矩阵」：切角卡 + 四角 HUD 直角角标 + 载频带 + 数据节点 */

:root{
  --bg:#08060F; --bg2:#100C1E; --card:#171232; --card2:#1E1840; --line:#2E2758;
  --pri:#FF2E93; --pri-d:#C01570; --pri-l:#3D1030;
  --aux:#2BD9FF; --aux-d:#0E8FB8; --aux-l:#0E2C3A;
  --dot:#B6FF3C;
  --txt:#EDE9FA; --txt2:#A79FD0; --txt3:#6E669B;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
  --wrap:1180px;
  --cut:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:16px/1.78 "Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
figcaption{margin:0}
a{color:var(--aux);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 14px}
h1,h2,h3{margin:0}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin:0 0 8px}
b,strong{color:var(--txt)}
code{font-family:var(--mono)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sec{padding:62px 0;border-top:1px solid var(--line)}
.sec--first{border-top:0}
.sec__hd{margin:0 0 26px}
.sub{margin:10px 0 0;color:var(--txt2);font-size:15px;max-width:78ch}

/* ── 通用面板：切角 + 四角 HUD 直角角标 ── */
.card,.matrix,.hero__art,.readings,.cache,.note{
  position:relative;background:var(--card);border:1px solid rgba(255,46,147,.26);
  clip-path:var(--cut);padding:24px;
}
.card::before,.matrix::before,.hero__art::before,.readings::before,.cache::before,.note::before{
  content:"";position:absolute;inset:7px;pointer-events:none;
  background:
    linear-gradient(var(--aux),var(--aux)) left top/18px 1px no-repeat,
    linear-gradient(var(--aux),var(--aux)) left top/1px 18px no-repeat,
    linear-gradient(var(--aux),var(--aux)) right top/18px 1px no-repeat,
    linear-gradient(var(--aux),var(--aux)) right top/1px 18px no-repeat,
    linear-gradient(var(--aux),var(--aux)) left bottom/18px 1px no-repeat,
    linear-gradient(var(--aux),var(--aux)) left bottom/1px 18px no-repeat,
    linear-gradient(var(--aux),var(--aux)) right bottom/18px 1px no-repeat,
    linear-gradient(var(--aux),var(--aux)) right bottom/1px 18px no-repeat;
}
.card::after,.matrix::after,.cache::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--pri),var(--aux),transparent);
}
.h3{margin:0 0 8px;font-size:18px;color:var(--txt)}

/* ── H2 装饰：主色方块 + 电光青渐隐横线 ── */
.h2{display:flex;align-items:center;gap:13px;font-size:clamp(22px,2.3vw,30px);line-height:1.32}
.h2::before{content:"";flex:0 0 auto;width:9px;height:9px;background:var(--pri)}
.h2::after{content:"";flex:1 1 auto;height:1px;min-width:30px;
  background:linear-gradient(90deg,rgba(43,217,255,.42),transparent)}

/* ── 载频带 ── */
.wave{display:flex;align-items:center;gap:16px;margin:40px 0}
.wave__band{flex:1 1 auto;height:10px;
  background:repeating-linear-gradient(90deg,var(--pri) 0 2px,transparent 2px 6px,var(--aux) 6px 8px,transparent 8px 14px);
  animation:pulseRun 7s linear infinite}
.wave__tag{flex:0 0 auto;font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--txt3);white-space:nowrap}

/* ── 数据节点编号 ── */
.node{position:relative;display:inline-block;padding-left:20px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--aux)}
.node::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-4.5px;
  border-radius:50%;background:var(--aux);box-shadow:0 0 0 3px rgba(43,217,255,.16);
  animation:nodeBlink 3.4s ease-in-out infinite}

/* ── 按钮 ── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border:0;
  font:600 16px/1 inherit;background:var(--pri);color:#FFFFFF;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(43,217,255,.55);position:relative}
.btn::after{content:"";width:0;height:0;border-left:8px solid #fff;
  border-top:5px solid transparent;border-bottom:5px solid transparent}
.btn:hover{text-decoration:none;box-shadow:inset 0 0 0 1px rgba(43,217,255,.55),0 0 0 5px rgba(255,46,147,.22)}
.btn--sm{padding:9px 15px;font-size:14px}
.btn--ghost{background:transparent;color:var(--aux);box-shadow:inset 0 0 0 1px var(--aux)}
.btn--ghost::after{border-left-color:var(--aux)}
.btn--wide{width:100%;justify-content:center}

/* ── 顶栏（下载入口是 .top__in 的直接子元素，与 .nav 平级）── */
.top{position:sticky;top:0;z-index:30;background:rgba(8,6,15,.93);
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.top__in{max-width:var(--wrap);margin:0 auto;padding:11px 22px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand__logo{width:40px;height:40px;flex:0 0 auto}
.brand__txt{font-size:19px;font-weight:700;color:var(--txt);letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{padding:8px 13px;font-size:15px;color:var(--txt2)}
.nav a:hover{color:var(--txt);text-decoration:none}
.nav a[aria-current="page"]{color:var(--txt);background:var(--card);
  box-shadow:inset 0 -2px 0 var(--pri)}
.burger{display:none;margin-left:auto;width:40px;height:40px;padding:0;
  background:var(--card);border:1px solid var(--line);color:var(--txt);cursor:pointer}
.burger span{display:block;width:18px;height:2px;margin:3px auto;background:var(--txt)}
.top .btn{margin-left:auto}
.burger[aria-expanded="true"] ~ .nav{display:flex}

/* ── Hero ── */
.hero{padding:52px 0 46px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;left:-16%;top:-40%;width:132%;height:118%;
  background:radial-gradient(46% 52% at 22% 26%,rgba(255,46,147,.24),transparent 70%),
             radial-gradient(42% 46% at 86% 34%,rgba(43,217,255,.20),transparent 70%)}
.hero__in{position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:44px;align-items:center}
.hero__kicker{display:inline-block;margin:0 0 14px;padding:5px 12px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;color:var(--aux);
  border:1px solid rgba(43,217,255,.4);background:var(--aux-l)}
.hero h1{font-size:clamp(30px,3.9vw,50px);line-height:1.24;letter-spacing:.01em}
.hero h1 em{font-style:normal;color:var(--pri)}
.hero__lead{margin:18px 0 0;font-size:16.5px;color:var(--txt2);max-width:56ch}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:26px 0 0}
.cta-note{margin:16px 0 0;font-size:14px;color:var(--txt3)}
.hero__art{padding:18px;justify-self:center;width:100%;max-width:376px}
.hero__shot{width:100%;max-width:320px;margin:0 auto}
.hero__shot img{width:100%;height:auto}

/* ── 资源覆盖矩阵 ── */
.matrix{padding:26px}
.matrix__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin:0 0 20px}
.matrix__num{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--txt3)}
.matrix__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.matrix__cell{background:var(--card2);border:1px solid var(--line);padding:16px 16px 14px}
.matrix__cell b{display:block;font-size:17px;margin:0 0 6px}
.matrix__cell p{margin:0 0 10px;font-size:13.5px;color:var(--txt3)}
.matrix__bar{height:9px;background:#241D49}
.matrix__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pri),var(--aux))}
.matrix__val{margin:8px 0 0;font-family:var(--mono);font-size:13px;color:var(--aux)}

/* ── 读数组 ── */
.readings{padding:26px}
.readings__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 30px}
.reading{position:relative}
.reading__hd{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
.reading__hd h3{margin:0;font-size:16px}
.reading__num{margin-left:auto;font-family:var(--mono);font-size:17px;color:var(--dot)}
.reading__bar{height:12px;background:#241D49}
.reading__bar i{display:block;height:100%}
.reading p{margin:8px 0 0;font-size:13.5px;color:var(--txt3)}
.f-pri i{background:linear-gradient(90deg,var(--pri-d),var(--pri))}
.f-aux i{background:linear-gradient(90deg,var(--aux-d),var(--aux))}
.f-dot i{background:linear-gradient(90deg,#6f9b1d,var(--dot))}
.f-vio i{background:linear-gradient(90deg,#5C3AC4,#9B6BFF)}

/* ── 找内容四道关卡 ── */
.funnel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.funnel__i{position:relative;padding-top:4px}
.funnel__i:not(:last-child)::after{content:"";position:absolute;right:-11px;top:12px;
  width:7px;height:7px;border-top:2px solid var(--aux);border-right:2px solid var(--aux);
  transform:rotate(45deg)}
.funnel__i h3{margin:10px 0 6px;font-size:17px}
.funnel__i p{margin:0;font-size:14px;color:var(--txt2)}

/* ── 离线专块 ── */
.cache{padding:26px}
.cache__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cache__col{background:var(--card2);border:1px solid var(--line);padding:18px}
.cache__col h3{margin:10px 0 8px;font-size:17px}
.cache__col p{margin:0;font-size:14px;color:var(--txt2)}
.cache__li{list-style:none;margin:12px 0 0;padding:0}
.cache__li li{position:relative;padding-left:18px;font-size:14px;color:var(--txt2)}
.cache__li li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--dot)}
.off{color:var(--pri)}
.keep{color:var(--dot)}

/* ── 预览栅格 ── */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1010px;margin:0 auto}
.shot{max-width:300px;margin:0 auto;width:100%}
.shot img{width:100%;height:auto;border:0;box-shadow:0 0 0 4px rgba(255,46,147,.16)}
.shot figcaption{margin:12px 0 0;font-size:13.5px;color:var(--txt3);text-align:center}

/* ── 评分与评价 ── */
.score{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center;
  background:var(--card);border:1px solid var(--line);padding:24px}
.score__num{font-family:var(--mono);font-size:52px;line-height:1;color:var(--dot)}
.score__stars{letter-spacing:.16em;color:var(--dot);font-size:17px;margin:8px 0 6px}
.score p{margin:0;font-size:13.5px;color:var(--txt3)}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0 0}
.quote{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--aux);
  padding:18px 20px}
.quote p{margin:0;font-size:14.5px;color:var(--txt2)}
.quote b{display:block;margin:12px 0 0;font-size:13px;color:var(--txt3);font-weight:400}

/* ── FAQ（首页用 .faq 包裹，内页把 .faq-d 直接放在正文里）── */
.faq{max-width:920px;margin:0 auto}
.faq details,.faq-d{background:var(--card);border:1px solid var(--line);margin:0 0 10px;padding:0}
.faq summary,.faq-d summary{list-style:none;cursor:pointer;padding:15px 20px;font-size:16px;color:var(--txt);
  display:flex;gap:12px;align-items:baseline}
.faq summary::-webkit-details-marker,.faq-d summary::-webkit-details-marker{display:none}
.faq summary::before,.faq-d summary::before{content:"+";flex:0 0 auto;font-family:var(--mono);color:var(--pri)}
.faq details[open] summary::before,.faq-d[open] summary::before{content:"-"}
.faq details[open] summary,.faq-d[open] summary{color:var(--aux)}
.faq__a{padding:0 20px 16px 44px;font-size:14.8px;color:var(--txt2)}
.faq__a p{margin:0}
.faq__a p + p{margin:10px 0 0}

/* ── 入口卡 ── */
.entries{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
.entry{display:block;text-decoration:none;padding:22px}
.entry:hover{text-decoration:none;border-color:var(--pri)}
.entry em{display:inline-block;font-style:normal;font-family:var(--mono);font-size:12px;
  letter-spacing:.16em;color:var(--dot);margin:0 0 10px}
.entry h3{margin:0 0 8px;font-size:18px;color:var(--txt)}
.entry p{margin:0;font-size:14px;color:var(--txt2)}
.entry u{display:inline-block;margin:12px 0 0;font-size:13.5px;color:var(--aux);text-decoration:none}

/* ── CTA ── */
.cta{background:linear-gradient(112deg,var(--pri-d) 0%,var(--pri) 46%,var(--aux-d) 100%);
  padding:52px 0}
.cta__in{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.cta h2{margin:0;font-size:clamp(21px,2.2vw,29px);color:#FFFFFF}
.cta p{margin:8px 0 0;color:rgba(255,255,255,.86);font-size:14.5px;max-width:52ch}
.cta .btn{margin-left:auto;background:#0B0718;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.cta .btn::after{border-left-color:var(--dot)}

/* ── 页脚 ── */
.foot{background:var(--bg2);border-top:1px solid var(--line);padding:44px 0 26px}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
.foot h3{margin:0 0 14px;font-size:15px;color:var(--txt);letter-spacing:.06em}
.foot__col a{display:block;font-size:14px;color:var(--txt2);padding:5px 0}
.foot__col p{font-size:14px;color:var(--txt2);margin:0 0 12px}
.foot .btn{display:inline-flex;color:#FFFFFF;padding:12px 20px}
.foot__bot{margin:32px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;color:var(--txt3)}
.foot__bot p{margin:0 0 8px}

/* ── 内页横幅与正文 ── */
.page-hero{padding:48px 0 40px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(56% 78% at 78% 26%,rgba(255,46,147,.26),transparent 72%),
             radial-gradient(48% 66% at 96% 82%,rgba(43,217,255,.22),transparent 74%)}
.crumb{position:relative;margin:0 0 14px;font-size:13.5px;color:var(--txt3)}
.crumb a{color:var(--txt3)}
.page-hero h1{position:relative;font-size:clamp(27px,3.3vw,42px);line-height:1.26}
.page-hero__lead{position:relative;margin:18px 0 0;font-size:16.5px;color:var(--txt2);max-width:62ch}
.page-hero__act{position:relative;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:14px}
.prose{max-width:900px;margin:0 auto;padding:52px 22px}
.prose h2{margin:44px 0 10px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:26px 0 8px;font-size:18.5px;color:var(--txt)}
.prose p,.prose li{color:var(--txt2)}
.prose strong{color:var(--txt)}
.block{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--pri);
  padding:20px 22px;margin:0 0 18px}
.block .h3{margin-top:0}
.steps{list-style:none;margin:16px 0;padding:0;counter-reset:s}
.steps li{position:relative;padding-left:44px;margin:0 0 14px;color:var(--txt2)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:2px;width:30px;height:30px;line-height:30px;text-align:center;
  font-family:var(--mono);font-size:13px;color:var(--aux);background:var(--aux-l);
  border:1px solid rgba(43,217,255,.4)}
.tbl-cap{margin:18px 0 10px;font-size:14px;color:var(--txt3)}
.tbl-scroll{overflow-x:auto;margin:0 0 20px}
table{width:100%;min-width:560px;border-collapse:collapse;font-size:14.5px}
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);color:var(--txt2)}
th{background:var(--card);color:var(--txt);font-weight:600;white-space:nowrap}
tbody tr:hover td{background:rgba(43,217,255,.05)}
.fig{margin:22px 0;max-width:300px}
.fig img{width:100%;height:auto;border:0;box-shadow:0 0 0 4px rgba(43,217,255,.16)}
.fig figcaption{margin:12px 0 0;font-size:13.5px;color:var(--txt3)}
.xentry{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:26px 0 0}
.xentry a{display:block;padding:18px 20px;background:var(--card);border:1px solid var(--line);
  text-decoration:none;border-left:3px solid var(--aux)}
.xentry a:hover{border-left-color:var(--pri)}
.xentry b{display:block;font-size:16px;color:var(--txt);margin:0 0 6px}
.xentry span{font-size:13.5px;color:var(--txt2)}

/* ── 动效（纯 CSS，与滚动位置无关）── */
@keyframes slotIn{from{clip-path:inset(0 0 100% 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes pulseRun{to{background-position:140px 0}}
@keyframes nodeBlink{0%,100%{box-shadow:0 0 0 3px rgba(43,217,255,.16)}
  50%{box-shadow:0 0 0 7px rgba(255,46,147,.16)}}
.slot{animation:slotIn .62s cubic-bezier(.2,.7,.3,1) both}
.slot.d1{animation-delay:.07s}
.slot.d2{animation-delay:.14s}
.slot.d3{animation-delay:.21s}
@media (prefers-reduced-motion:reduce){
  .slot,.wave__band,.node::before{animation:none}
  .slot{clip-path:none;opacity:1}
}

/* ── 断点 ── */
@media (max-width:1100px){
  /* 1024×768 这一档仍是双栏，Hero 高度由竖屏截图（比例 2.0）决定：
     不收内边距与图位宽度就会越过一屏（实测 hero 高 776 + 顶栏 66 = 842 > 768）。 */
  .hero{padding:40px 0 36px}
  .hero__shot{max-width:286px}
}
@media (max-width:980px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .matrix__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cache__grid{grid-template-columns:minmax(0,1fr)}
  .funnel{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .funnel__i:nth-child(2n)::after{display:none}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px}
  .quotes{grid-template-columns:minmax(0,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
  .cta .btn{margin-left:0}
  .burger{display:block}
  .nav{display:none;order:3;flex:0 0 100%;margin-left:0;padding:6px 0 10px}
  .top .btn{margin-left:auto}
  .readings__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .sec{padding:44px 0}
  .wrap{padding:0 16px}
  .top__in{padding:10px 16px;gap:10px}
  .hero{padding:38px 0 34px}
  .hero__art{max-width:100%;padding:14px}
  .hero__shot{max-width:320px}
  .matrix{padding:18px}
  .matrix__row{grid-template-columns:minmax(0,1fr)}
  .funnel{grid-template-columns:minmax(0,1fr)}
  .funnel__i::after{display:none}
  .shots{grid-template-columns:minmax(0,1fr)}
  .shot{max-width:300px}
  .score{grid-template-columns:minmax(0,1fr);gap:14px}
  .score__num{font-size:42px}
  .prose{padding:38px 16px}
  .faq summary,.faq-d summary{font-size:15px;padding:13px 16px}
  .faq__a{padding:0 16px 14px 40px}
  .foot__grid{grid-template-columns:minmax(0,1fr)}
  .btn{padding:12px 18px;font-size:15px}
  .page-hero{padding:34px 0 30px}
  .fig{max-width:320px}
}