@charset "utf-8";
/* ==========================================================================
   樱花漫画 · www.yhmhgw.com.cn
   视觉方向 B8「热血国漫」：正红底 + 米白结构 / 墨黑面板 / 明黄刻度
   渲染语言（第 18 种）「数据刻度板」：零描边、零外投影，用刻度尺与色块落差分区
   ========================================================================== */

:root{
  --red:      #c8102e;
  --red-d:    #980a22;
  --red-l:    #e04055;
  --cream:    #fff3e0;
  --cream-2:  #ffe7c9;
  --ink:      #14100c;
  --ink-2:    #2a2320;
  --yellow:   #ffdc2e;
  --yellow-d: #e0b800;
  --sans: "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC",system-ui,-apple-system,sans-serif;
  --mono: "Bahnschrift","DIN Alternate",Consolas,"Courier New",monospace;
  --tick-light: rgba(255,243,224,.40);
  --tick-dark:  rgba(20,16,12,.28);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--red);
  color:var(--cream);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.78;
  letter-spacing:.01em;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.3;font-weight:800}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 顶栏 ---------- */
.top{position:sticky;top:0;z-index:30;background:var(--red-d);
  box-shadow:0 4px 0 var(--yellow)}
.top__in{display:flex;align-items:center;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;order:1;flex:0 0 auto}
.brand img{width:42px;height:42px;border-radius:9px}
.brand b{font-size:21px;font-weight:800;color:var(--cream);letter-spacing:.04em}
.nav{order:2;flex:1 1 auto;display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.nav a{padding:8px 14px;border-radius:3px;font-size:16px;color:rgba(255,243,224,.86)}
.nav a:hover{background:rgba(20,16,12,.28);color:var(--cream)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--yellow);
  box-shadow:inset 0 -4px 0 var(--yellow)}
.burger{order:4;display:none;width:46px;height:44px;padding:0;
  background:var(--ink);border:0;border-radius:3px;cursor:pointer}
.burger span{display:block;width:22px;height:3px;margin:4px auto;background:var(--cream)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}

/* ---------- 按钮 ---------- */
.btn{display:inline-block;padding:14px 30px;border-radius:3px;font-size:18px;font-weight:800;
  background:var(--yellow);color:var(--ink);box-shadow:inset 0 -4px 0 var(--yellow-d)}
.btn:hover{background:#fff0a0}
.btn--sm{order:3;padding:10px 20px;font-size:16px;flex:0 0 auto}
.btn--ghost{background:transparent;color:var(--cream);
  box-shadow:inset 0 0 0 2px var(--cream)}
.btn--ghost:hover{background:rgba(20,16,12,.3)}
.btnbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:56px 0 62px;background:var(--red)}
.hero__in{display:grid;grid-template-columns:1.06fr .94fr;gap:42px;align-items:center}
.hero h1{font-size:42px;color:var(--cream);letter-spacing:.02em}
.lead{margin-top:18px;font-size:17px;color:rgba(255,243,224,.94);max-width:36em}
.hero .btnbar{margin-top:28px}
.hero__meta{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;background:var(--ink);border-radius:3px;overflow:hidden}
.hero__meta div{padding:14px 16px}
.hero__meta div + div{box-shadow:inset 1px 0 0 rgba(255,243,224,.14)}
.hero__meta b{display:block;font-size:26px;color:var(--yellow);font-family:var(--mono)}
.hero__meta span{font-size:14px;color:rgba(255,243,224,.72)}
.hero__shot{margin:0}
.hero__shot img{width:100%;height:auto;max-width:320px;margin:0 auto;border-radius:4px;
  box-shadow:0 0 0 4px var(--cream);position:relative;z-index:1}
.hero__shot figcaption{margin-top:14px;text-align:center;font-size:14px;
  color:rgba(255,243,224,.74)}
.hero::after{content:"";position:absolute;right:-8%;bottom:-14%;width:52%;height:74%;
  background:repeating-linear-gradient(90deg,rgba(20,16,12,.20) 0 2px,transparent 2px 16px);
  pointer-events:none}

/* ---------- 刻度缝（区块之间的分隔带） ---------- */
.seam{height:16px;background-color:var(--red-d);
  background-image:
    linear-gradient(90deg,transparent 0 30%,var(--yellow) 30% 36%,transparent 36%),
    repeating-linear-gradient(90deg,rgba(20,16,12,.62) 0 2px,transparent 2px 13px);
  background-size:100% 100%,13px 100%;
  background-repeat:no-repeat,repeat;
  animation:tickRun 9s linear infinite}
@keyframes tickRun{
  from{background-position:-40% 0,0 0}
  to{background-position:140% 0,0 0}
}

/* ---------- 通栏底色 ---------- */
.band{padding:66px 0}
.band--cream{background:var(--cream);color:var(--ink)}
.band--ink{background:var(--ink);color:var(--cream)}
.band--soft{background:var(--red-d)}

/* ---------- 标题与副题 ---------- */
h2{position:relative;font-size:29px;padding-bottom:16px;letter-spacing:.01em}
h2::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:6px;
  background-image:
    linear-gradient(90deg,var(--yellow) 0 42px,transparent 42px),
    repeating-linear-gradient(90deg,var(--tick-light) 0 2px,transparent 2px 9px);
  background-repeat:no-repeat,repeat;
  background-size:100% 100%,9px 100%}
.band--cream h2::after{
  background-image:
    linear-gradient(90deg,var(--yellow-d) 0 42px,transparent 42px),
    repeating-linear-gradient(90deg,var(--tick-dark) 0 2px,transparent 2px 9px)}
.sub{margin-top:14px;font-size:16px;color:rgba(255,243,224,.80)}
.band--cream .sub{color:#6b6154}
.sec__head{margin-bottom:34px}

/* ---------- 数据面板 ---------- */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:rgba(20,16,12,.16);border-radius:3px;overflow:hidden;margin-top:8px}
.band--ink .facts{background:rgba(255,243,224,.16)}
.fact{background:var(--cream);padding:22px 20px}
.band--cream .fact{background:#fffaf0}
.band--ink .fact{background:#1d1813}
.fact b{display:block;font-family:var(--mono);font-size:32px;color:var(--red-d);line-height:1.2}
.band--ink .fact b{color:var(--yellow)}
.fact p{margin-top:4px;font-size:15px;color:#6b6154}
.band--ink .fact p{color:rgba(255,243,224,.70)}
.fact .track{margin-top:14px;height:8px;background:rgba(20,16,12,.10);border-radius:0}
.band--ink .fact .track{background:rgba(255,243,224,.14)}
.fact .track i{display:block;height:8px;background:var(--red);transform-origin:left;
  animation:barGrow 1.2s cubic-bezier(.2,.8,.25,1) both}
.band--ink .fact .track i{background:var(--yellow)}
.fact .track i.w1{width:92%}.fact .track i.w2{width:78%}.fact .track i.w3{width:64%}
.fact .track i.w4{width:56%}.fact .track i.w5{width:71%}.fact .track i.w6{width:88%}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 横条图 ---------- */
.rows{margin-top:6px}
.row{display:grid;grid-template-columns:132px minmax(0,1fr) 72px;gap:16px;align-items:center;
  padding:11px 0;box-shadow:inset 0 -1px 0 rgba(255,243,224,.22)}
.row span{font-size:16px;font-weight:700}
.row em{font-style:normal;font-family:var(--mono);font-size:17px;text-align:right;
  color:rgba(255,243,224,.78)}
.band--ink .row{box-shadow:inset 0 -1px 0 rgba(255,243,224,.12)}
.band--ink .row em{color:rgba(255,243,224,.62)}
.bar{height:14px;background:rgba(20,16,12,.30);position:relative}
.bar i{display:block;height:14px;background:var(--cream);transform-origin:left;
  animation:barGrow 1.2s cubic-bezier(.2,.8,.25,1) both}
.bar i.y{background:var(--yellow)}

/* ---------- 卡片 ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:6px}
.card{background:var(--cream);color:var(--ink);border-radius:3px;padding:0 0 22px;
  overflow:hidden}
.card__tick{height:7px;background-color:var(--ink);
  background-image:repeating-linear-gradient(90deg,var(--yellow) 0 2px,transparent 2px 8px);
  background-size:8px 100%}
.card h3{margin:20px 22px 8px;font-size:20px}
.card p{margin:0 22px;font-size:15px;color:#5f574c}
.card .kv{margin:16px 22px 0}
.card .kv li{display:flex;justify-content:space-between;gap:12px;font-size:15px;
  padding:8px 0;box-shadow:inset 0 -1px 0 rgba(20,16,12,.10)}
.card .kv li b{font-family:var(--mono);color:var(--red-d)}
.card--ink{background:#1d1813;color:var(--cream)}
.card--ink h3{color:var(--cream)}
.card--ink p{color:rgba(255,243,224,.76)}
.card--ink .kv li{box-shadow:inset 0 -1px 0 rgba(255,243,224,.14)}
.card--ink .kv li b{color:var(--yellow)}

/* ---------- 图文两栏 ---------- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.split__list li{padding:13px 0;font-size:16px;box-shadow:inset 0 -1px 0 rgba(20,16,12,.10)}
.split__list li b{font-family:var(--mono);color:var(--red-d);margin-right:10px}
.split__list a{box-shadow:inset 0 -2px 0 var(--yellow-d)}
.split__list a:hover{color:var(--red-d)}
.band--ink .split__list a{box-shadow:inset 0 -2px 0 var(--yellow)}
.band--ink .split__list li{box-shadow:inset 0 -1px 0 rgba(255,243,224,.14)}
.band--ink .split__list li b{color:var(--yellow)}
.shot{margin:0;background:var(--cream);padding:10px;border-radius:4px}
.shot img{width:100%;height:auto;border-radius:2px}
.shot figcaption{margin-top:12px;font-size:14px;color:#5f574c;padding:0 2px}
.band--ink .shot figcaption{color:rgba(255,243,224,.72)}

/* ---------- 预览栅格 ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:6px}
.gallery .shot{background:var(--cream)}
.gallery .shot img{max-width:260px;margin:0 auto}

/* ---------- 入口卡 ---------- */
.entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:6px}
.entry{display:block;background:var(--cream);color:var(--ink);border-radius:3px;padding:26px 24px}
.entry:hover{background:#fff8ec}
.entry b{display:block;font-size:21px;font-weight:800;padding-bottom:12px;
  box-shadow:inset 0 -6px 0 var(--yellow)}
.entry p{margin-top:14px;font-size:15px;color:#5f574c}
.entry i{display:block;margin-top:16px;font-style:normal;font-size:14px;
  font-family:var(--mono);color:var(--red-d)}

/* ---------- 评价 ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:6px}
.quote{background:var(--cream);color:var(--ink);border-radius:3px;padding:24px 22px}
.quote p{font-size:16px}
.quote .meta{margin-top:16px;display:flex;justify-content:space-between;gap:12px;
  font-size:14px;color:#6b6154;box-shadow:inset 0 1px 0 rgba(20,16,12,.12);padding-top:12px}
.quote .meta b{font-family:var(--mono);color:var(--red-d)}

/* ---------- FAQ ---------- */
.faq{margin-top:6px}
.faq details{background:var(--cream);color:var(--ink);border-radius:3px;margin-bottom:12px;
  overflow:hidden}
.faq summary{cursor:pointer;padding:17px 22px;font-size:17px;font-weight:700;list-style:none;
  display:flex;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:attr(data-q);font-family:var(--mono);font-size:15px;
  color:var(--yellow-d);flex:0 0 auto;padding-top:3px}
.faq details[open] summary{box-shadow:inset 0 -7px 0 var(--yellow)}
.faq details p{padding:16px 22px 20px;font-size:16px;color:#4f483e}

/* ---------- CTA ---------- */
.cta{background:var(--ink);color:var(--cream);padding:62px 0}
.cta__in{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.cta .lead{color:rgba(255,243,224,.88)}
.cta .btn{margin-top:26px}
.cta__note{margin-top:16px;font-size:15px;color:rgba(255,243,224,.66)}

/* ---------- 页脚 ---------- */
.foot{background:#0b0806;color:rgba(255,243,224,.76);padding:48px 0 40px;font-size:15px}
.foot__in{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:30px}
.foot h4{margin:0 0 12px;font-size:16px;color:var(--cream)}
.foot li{padding:5px 0}
.foot a:hover{color:var(--yellow)}
.foot__brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.foot__brand img{width:38px;height:38px;border-radius:8px}
.foot__brand b{font-size:18px;color:var(--cream)}
.foot__dis{margin-top:26px;padding-top:18px;font-size:14px;line-height:1.75;
  box-shadow:inset 0 2px 0 var(--yellow);color:rgba(255,243,224,.70)}
.foot__cp{margin-top:14px;font-size:14px;font-family:var(--mono);color:rgba(255,243,224,.50)}

/* ---------- 内页 ---------- */
.crumb{font-size:14px;color:rgba(255,243,224,.78);margin-bottom:14px}
.crumb a{box-shadow:inset 0 -1px 0 rgba(255,243,224,.4)}
.page-hero{padding:52px 0 54px;background:var(--red)}
.page-hero h1{font-size:36px;color:var(--cream)}
.page-hero .lead{margin-top:16px}
.page-hero .chips{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.page-hero .chips span{font-size:14px;font-family:var(--mono);padding:6px 12px;
  background:rgba(20,16,12,.34);border-radius:3px;color:var(--cream)}
.steps{counter-reset:s;margin-top:6px}
.steps li{counter-increment:s;position:relative;padding:14px 0 14px 58px;font-size:16px;
  box-shadow:inset 0 -1px 0 rgba(20,16,12,.10)}
.band--ink .steps li{box-shadow:inset 0 -1px 0 rgba(255,243,224,.14)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:16px;
  font-family:var(--mono);font-size:15px;color:var(--ink);background:var(--yellow);
  padding:1px 7px;border-radius:2px}
.tips{margin-top:22px;padding:20px 22px;background:var(--cream);color:var(--ink);border-radius:3px}
.band--cream .tips{background:var(--cream-2)}
.tips b{display:block;margin-bottom:6px;font-size:16px}
.tips p{font-size:15px;color:#4f483e}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  body{font-size:16px}
  .hero{padding:42px 0 48px}
  .hero__in{grid-template-columns:1fr;gap:34px}
  .hero h1{font-size:34px}
  .hero__shot img{max-width:300px}
  .nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    background:var(--red-d);padding:12px 22px 20px;gap:2px;box-shadow:0 6px 0 var(--yellow)}
  .burger[aria-expanded="true"] ~ .nav{display:flex}
  .burger{display:block;order:4}
  .nav a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--yellow)}
  .top__in{position:relative}
  .hero__meta{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts,.cards,.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.cta__in{grid-template-columns:1fr;gap:30px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entries{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr 1fr}
  h2{font-size:26px}
  .page-hero h1{font-size:30px}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .band{padding:48px 0}
  .hero h1{font-size:28px}
  .hero__meta{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero__meta div{padding:11px 10px}
  .hero__meta b{font-size:21px}
  .hero__meta span{font-size:12px}
  .facts,.cards,.quotes,.gallery{grid-template-columns:1fr}
  .row{grid-template-columns:96px minmax(0,1fr) 60px;gap:10px}
  h2{font-size:23px}
  .page-hero h1{font-size:26px}
  .faq summary{font-size:16px}
  .foot__in{grid-template-columns:1fr}
  .btn{padding:13px 24px;font-size:17px}
  .btn--sm{padding:9px 14px;font-size:15px}
  .brand b{font-size:19px}
  .brand img{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  .seam{animation:none}
  .fact .track i,.bar i{animation:none}
}