:root{
  --yellow:#FFD400;
  --yellow-soft:#FFE65C;
  --ink:#111111;
  --paper:#FFFFFF;
  --red:#FF3B1F;
  --gap:22px;
  --border:4px solid #111111;
  --shadow:8px 8px 0 #111111;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--yellow);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 18px}

/* ---------- 顶部导航 ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--yellow);
  border-bottom:var(--border);
}
.nav-inner{
  display:flex;align-items:center;gap:16px;
  padding:12px 18px;max-width:1240px;margin:0 auto;
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{height:34px;width:auto;border:3px solid var(--ink);background:var(--paper)}
.brand-name{
  font-size:22px;font-weight:900;letter-spacing:-.5px;
  padding:2px 10px;background:var(--paper);border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);white-space:nowrap;
}
.nav-links{
  display:flex;flex-wrap:wrap;gap:6px;
  list-style:none;margin-left:auto;
}
.nav-links a{
  display:block;font-size:13px;font-weight:800;
  padding:6px 10px;background:var(--paper);
  border:2px solid var(--ink);white-space:nowrap;
  transition:transform .15s ease, background .15s ease;
}
.nav-links a:hover{background:var(--ink);color:var(--yellow);transform:translate(-2px,-2px)}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  padding:52px 0 70px;
  border-bottom:var(--border);
  overflow:hidden;
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:34px;align-items:center;
}
.hero-stack{position:relative}
.h1-frame{
  display:inline-block;
  background:var(--paper);
  border:var(--border);
  box-shadow:var(--shadow);
  padding:22px 26px;
  position:relative;
  z-index:2;
}
.hero h1{
  font-size:clamp(30px,4.6vw,54px);
  font-weight:900;
  line-height:1.12;
  letter-spacing:-1.5px;
  max-width:15em;
}
.hero h1 em{
  font-style:normal;background:var(--ink);color:var(--yellow);
  padding:0 8px;display:inline-block;
}
.hero-sub{
  margin-top:22px;font-size:16px;font-weight:700;
  max-width:34em;
  background:var(--yellow-soft);
  border:3px solid var(--ink);
  padding:10px 14px;
  display:inline-block;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:900;
  padding:13px 22px;
  border:var(--border);
  box-shadow:6px 6px 0 var(--ink);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
  text-align:center;
}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(6px,6px);box-shadow:none}
.btn-android{background:var(--ink);color:var(--yellow)}
.btn-ios{background:var(--paper);color:var(--ink)}
.btn small{display:block;font-size:11px;font-weight:700;letter-spacing:.5px}

/* 红色方块箭头 */
.hero-badge{
  position:absolute;right:6%;bottom:0;
  width:130px;height:130px;
  background:var(--red);
  border:var(--border);
  box-shadow:8px 8px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
  z-index:3;
}
.hero-badge span{
  font-size:64px;font-weight:900;color:var(--ink);line-height:1;
  transform:translateY(-4px);
}
.hero-visual{position:relative}
.hero-visual .shot{
  border:var(--border);box-shadow:var(--shadow);background:var(--paper);
  overflow:hidden;
}
.hero-visual .shot img{width:100%;object-fit:cover}
.hero-tag{
  position:absolute;left:-14px;top:16px;
  background:var(--ink);color:var(--yellow);
  font-size:13px;font-weight:900;padding:6px 12px;
  border:3px solid var(--paper);
}

/* ---------- 通用区块 ---------- */
section.block{
  padding:56px 0;
  border-bottom:var(--border);
}
.sec-head{
  display:flex;align-items:flex-end;gap:16px;
  flex-wrap:wrap;margin-bottom:28px;
}
.sec-num{
  font-size:14px;font-weight:900;
  background:var(--ink);color:var(--yellow);
  padding:4px 10px;letter-spacing:1px;
}
.sec-head h2{
  font-size:clamp(24px,3.4vw,38px);
  font-weight:900;letter-spacing:-1px;line-height:1.15;
}
.sec-head p{
  font-size:14px;font-weight:700;max-width:38em;
  border-left:6px solid var(--ink);padding-left:12px;
}

/* ---------- 卡片网格 ---------- */
.grid{display:grid;gap:var(--gap)}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.card{
  background:var(--paper);
  border:var(--border);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  transition:transform .15s ease;
  overflow:hidden;
}
.card:hover{transform:translate(-3px,-3px)}
.card .thumb{position:relative;border-bottom:var(--border);overflow:hidden;background:var(--yellow-soft)}
.card .thumb img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top}
.card-body{padding:14px 14px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{
  font-size:17px;font-weight:900;line-height:1.25;letter-spacing:-.3px;
}
.card-body p{font-size:13px;font-weight:500;color:#2b2b2b}
.card-meta{
  margin-top:auto;font-size:11px;font-weight:900;
  background:var(--yellow);border:2px solid var(--ink);
  padding:3px 8px;align-self:flex-start;
}
.chip{
  position:absolute;top:10px;left:10px;
  background:var(--red);color:#fff;
  font-size:11px;font-weight:900;
  padding:3px 9px;border:2px solid var(--ink);
}
.chip.dark{background:var(--ink);color:var(--yellow)}

/* ---------- 大图带文字 ---------- */
.feature-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gap);align-items:stretch;
}
.feature-row .pic{
  border:var(--border);box-shadow:var(--shadow);overflow:hidden;background:var(--paper);
}
.feature-row .pic img{width:100%;height:100%;object-fit:cover}
.feature-text{
  background:var(--paper);border:var(--border);box-shadow:var(--shadow);
  padding:26px;display:flex;flex-direction:column;justify-content:center;gap:14px;
}
.feature-text h3{font-size:22px;font-weight:900;line-height:1.25}
.feature-text p{font-size:14px}
.feature-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:4px}
.feature-list li{
  font-size:13px;font-weight:700;padding-left:26px;position:relative;
}
.feature-list li::before{
  content:"→";position:absolute;left:0;top:0;font-weight:900;
}

/* ---------- 截图墙 ---------- */
.wall{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:12px;
}
.wall figure{
  background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  overflow:hidden;
}
.wall img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top}
.wall figcaption{
  font-size:10px;font-weight:800;padding:5px 6px;background:var(--yellow-soft);
  border-top:2px solid var(--ink);line-height:1.3;
  min-height:2.6em;
}

/* ---------- 教程步骤 ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.step{
  background:var(--paper);border:var(--border);box-shadow:var(--shadow);
  padding:22px;position:relative;
}
.step .no{
  position:absolute;top:-18px;left:18px;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--yellow);font-weight:900;font-size:18px;
  border:3px solid var(--yellow);
}
.step h3{margin-top:14px;font-size:18px;font-weight:900}
.step p{font-size:13px;margin-top:8px}

/* ---------- 滚动评论特效 ---------- */
.marquee{
  overflow:hidden;border-top:var(--border);border-bottom:var(--border);
  background:var(--ink);padding:14px 0;
}
.marquee-track{
  display:flex;gap:16px;width:max-content;
  animation:slide 34s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.comment{
  background:var(--yellow);border:3px solid var(--paper);
  padding:10px 16px;font-size:13px;font-weight:700;white-space:nowrap;
  color:var(--ink);
}
.comment b{font-weight:900}
.comment.alt{background:var(--paper);border-color:var(--yellow)}

/* ---------- 排行榜 ---------- */
.rank-list{list-style:none;display:flex;flex-direction:column;gap:14px;counter-reset:rk}
.rank-item{
  display:grid;grid-template-columns:64px minmax(0,1fr) 120px;
  align-items:center;gap:16px;
  background:var(--paper);border:var(--border);box-shadow:6px 6px 0 var(--ink);
  padding:12px 16px;
}
.rank-item::before{
  counter-increment:rk;content:counter(rk,decimal-leading-zero);
  font-size:26px;font-weight:900;text-align:center;
  background:var(--ink);color:var(--yellow);padding:6px 0;
}
.rank-item .r-title{font-size:16px;font-weight:900}
.rank-item .r-title small{
  display:block;font-size:12px;font-weight:600;color:#3a3a3a;margin-top:2px;
}
.rank-item .r-tag{
  font-size:12px;font-weight:900;text-align:center;
  background:var(--yellow);border:2px solid var(--ink);padding:5px 6px;
}
.rank-item:nth-child(-n+3)::before{background:var(--red);color:#fff}

/* ---------- 问答 ---------- */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.faq-item{
  background:var(--paper);border:var(--border);box-shadow:var(--shadow);padding:20px 22px;
}
.faq-item h3{font-size:16px;font-weight:900;margin-bottom:8px}
.faq-item p{font-size:13px;color:#2b2b2b}

/* ---------- 四格补充区 ---------- */
.quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.quad-card{
  background:var(--paper);border:var(--border);box-shadow:var(--shadow);
  padding:18px;display:flex;flex-direction:column;gap:10px;
}
.quad-card .qicon{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--yellow);border:3px solid var(--ink);font-size:20px;font-weight:900;
}
.quad-card h3{font-size:16px;font-weight:900;line-height:1.25}
.quad-card p{font-size:13px;color:#2b2b2b}

/* ---------- 底部 ---------- */
.site-footer{
  background:var(--ink);color:#c9c0a3;
  padding:34px 0 26px;font-size:12px;
}
.footer-inner{max-width:1240px;margin:0 auto;padding:0 18px;display:flex;flex-direction:column;gap:10px}
.site-footer a{color:#e8e0c4;border-bottom:1px dotted #6d6852}
.site-footer a:hover{color:var(--yellow)}
.footer-time{color:#8e886f;font-size:11px}
.footer-search{margin-top:6px;line-height:2}
.footer-search span{
  display:inline-block;margin:0 8px 6px 0;padding:2px 8px;
  border:1px solid #4a4636;color:#a89f83;font-size:11px;
}

/* ---------- 弹窗 ---------- */
.modal-mask{
  position:fixed;inset:0;background:rgba(17,17,17,.72);
  display:none;align-items:center;justify-content:center;z-index:99;padding:18px;
}
.modal-mask.open{display:flex}
.modal{
  background:var(--yellow);border:var(--border);box-shadow:12px 12px 0 #000;
  max-width:460px;width:100%;padding:26px;
}
.modal h3{font-size:17px;font-weight:900;line-height:1.4;margin-bottom:14px}
.modal .url-box{
  background:var(--paper);border:3px solid var(--ink);
  padding:10px 12px;font-size:13px;font-weight:700;word-break:break-all;
}
.modal .copy-btn{
  margin-top:14px;width:100%;
  background:var(--ink);color:var(--yellow);
  border:3px solid var(--ink);padding:12px;font-weight:900;font-size:15px;
  cursor:pointer;box-shadow:5px 5px 0 var(--red);
}
.modal .copy-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--red)}
.modal .close-btn{
  margin-top:12px;width:100%;background:transparent;
  border:3px solid var(--ink);padding:9px;font-weight:900;font-size:13px;cursor:pointer;
}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quad{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px}
  .hero-badge{width:104px;height:104px}
  .hero-badge span{font-size:50px}
}
@media (max-width:768px){
  :root{--gap:16px;--border:3px solid #111111;--shadow:5px 5px 0 #111111}
  .nav-inner{padding:10px 14px;gap:10px}
  .brand img{height:28px}
  .brand-name{font-size:17px;padding:2px 7px}
  .nav-links{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .nav-links a{font-size:12px;padding:5px 8px;border-width:2px}
  .hero{padding:34px 0 46px}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual{order:-1;max-width:340px}
  .hero h1{font-size:clamp(26px,7.4vw,38px);letter-spacing:-1px}
  .h1-frame{padding:16px 16px}
  .hero-badge{width:80px;height:80px;right:0;bottom:-10px;box-shadow:5px 5px 0 #111}
  .hero-badge span{font-size:38px}
  .hero-sub{font-size:14px}
  .btn{flex:1 1 46%;justify-content:center;padding:12px 10px;font-size:14px;box-shadow:4px 4px 0 #111}
  .grid-4,.grid-3,.grid-2,.quad,.steps,.faq{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feature-row{grid-template-columns:minmax(0,1fr)}
  .rank-item{grid-template-columns:46px minmax(0,1fr);gap:10px;padding:10px 12px}
  .rank-item::before{font-size:18px}
  .rank-item .r-tag{grid-column:1 / -1;justify-self:start}
  .sec-head h2{font-size:24px}
  section.block{padding:38px 0}
}
@media (max-width:460px){
  .grid-4,.grid-3,.grid-2,.quad,.steps,.faq{grid-template-columns:minmax(0,1fr)}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btn{flex:1 1 100%}
}