:root{
  --ruler-vermilion:#522B1E;
  --ruler-vermilion-dark:#381A11;
  --ruler-vermilion-light:#7A4332;
  --ruler-vermilion-fade:rgba(82,43,30,0.10);
  --ruler-vermilion-border:rgba(82,43,30,0.28);
  --ruler-blue:#D6E2EB;
  --ruler-blue-light:#F2F6F9;
  --ruler-blue-dark:#B4CDDE;
  --ruler-blue-fade:rgba(214,226,235,0.65);
  --ruler-ochre:#A3632B;
  --ruler-ochre-light:#FBEFD7;
  --ruler-card:#FFFFFF;
  --ink:#181F24;
  --mute:#333E46;
  --dim:#637480;
  --font-cn:"MuYaoRuanBi","FZLanTingHei-R-GBK","STZhongsong","PingFang SC","Microsoft YaHei","SimHei",sans-serif;
  --font-en:"JetBrains Mono","Consolas","Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{
  font-family:var(--font-cn);
  color:var(--ink);
  line-height:1.8;
  background-color:var(--ruler-blue-light);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(214,226,235,0.88) 0%, rgba(242,246,249,0.96) 75%),
    linear-gradient(135deg, rgba(255,255,255,0.7) 0%, transparent 45%, rgba(82,43,30,0.04) 60%, rgba(255,255,255,0.85) 100%),
    repeating-linear-gradient(90deg, rgba(82,43,30,0.04) 0px, rgba(82,43,30,0.04) 1px, transparent 1px, transparent 10px),
    repeating-linear-gradient(90deg, rgba(82,43,30,0.12) 0px, rgba(82,43,30,0.12) 1.5px, transparent 1.5px, transparent 50px),
    repeating-linear-gradient(0deg, rgba(163,99,43,0.03) 0px, rgba(163,99,43,0.03) 1px, transparent 1px, transparent 50px);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none;transition:.2s}img{display:block;max-width:100%;height:auto}
.w{max-width:1200px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--font-en);letter-spacing:.02em}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 24px;font-size:14.5px;font-weight:700;
  border:2px solid var(--ruler-vermilion);color:var(--ruler-vermilion);
  background:var(--ruler-card);border-radius:3px;
  box-shadow:0 3px 0 var(--ruler-vermilion-dark);
  position:relative;
}
.btn:hover{background:var(--ruler-vermilion);color:#fff;transform:translateY(-1px);box-shadow:0 4px 0 var(--ruler-vermilion-dark)}
.btn.k{background:var(--ruler-vermilion);color:#fff;border-color:var(--ruler-vermilion);box-shadow:0 3px 0 var(--ruler-vermilion-dark)}
.btn.k:hover{background:var(--ruler-vermilion-light)}
.btn.blue{background:var(--ruler-blue);color:var(--ruler-vermilion-dark);border-color:var(--ruler-vermilion);box-shadow:0 3px 0 var(--ruler-vermilion-dark)}
.btn.blue:hover{background:var(--ruler-blue-dark)}
.btn.sm{padding:7px 16px;font-size:13px}
.acts{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}

/* 顶部极小字关键词条 */
.top-seo-bar{
  background:var(--ruler-vermilion-dark);color:var(--ruler-blue);
  font-size:12px;padding:6px 0;border-bottom:1px solid rgba(214,226,235,0.25);
}
.top-seo-bar .w{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.top-seo-bar .kw-items{display:flex;gap:14px;flex-wrap:wrap}
.top-seo-bar a{color:var(--ruler-blue);opacity:.95}
.top-seo-bar a:hover{opacity:1;color:#fff;text-decoration:underline}

/* 顶部全局导航栏（Sticky Header） */
.nv{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.96);backdrop-filter:blur(10px);border-bottom:2px solid var(--ruler-vermilion);box-shadow:0 4px 16px rgba(56,26,17,0.08)}
.nv .w{display:flex;align-items:center;justify-content:space-between;height:68px;gap:14px}
.nv .logo-box{display:flex;align-items:center;gap:10px}
.nv .logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:19px;color:var(--ruler-vermilion)}
.nv .logo img{width:34px;height:34px;border-radius:3px;border:1px solid var(--ruler-vermilion)}
.nv .brand-tag{
  font-size:11px;background:var(--ruler-blue);color:var(--ruler-vermilion-dark);
  padding:2px 8px;border-radius:2px;font-weight:700;border:1px solid var(--ruler-blue-dark);
}
.nv nav{display:flex;gap:12px;flex-wrap:wrap}
.nv nav a{font-size:14px;color:var(--ink);font-weight:600;padding:4px 8px;border-radius:3px}
.nv nav a:hover,.nv nav a.on{background:var(--ruler-vermilion-fade);color:var(--ruler-vermilion)}
.nv nav a.highlight{color:var(--ruler-vermilion);font-weight:700;text-decoration:underline}
.nv .nv-acts{display:flex;gap:10px;align-items:center}

/* 首屏 Hero：年代尺刻度体系与轻量性能指标 */
.hero-sec{padding:48px 0 40px}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero-tagline{display:inline-flex;align-items:center;gap:8px;background:var(--ruler-blue);border:1px solid var(--ruler-blue-dark);padding:4px 12px;border-radius:3px;font-size:12.5px;color:var(--ruler-vermilion-dark);font-weight:700;margin-bottom:12px}
.hero h1{font-size:38px;line-height:1.24;font-weight:900;color:var(--ruler-vermilion-dark);letter-spacing:.02em}
.hero h1 span.accent{display:block;font-size:26px;color:var(--ruler-vermilion);margin-top:6px;font-weight:700}
.hero .guide-note{font-size:15px;color:var(--mute);margin-top:14px;max-width:560px;line-height:1.75}
.hero-capsules{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.hero-capsule{font-size:12.5px;background:#fff;border:1px solid var(--ruler-vermilion-border);padding:4px 12px;border-radius:3px;color:var(--ruler-vermilion);font-weight:600}
.hero-meta{margin-top:18px;font-size:12.5px;color:var(--dim);display:flex;gap:16px;align-items:center}
.hero-meta time{font-weight:700;color:var(--ruler-vermilion)}

/* 右侧年代尺与打卡格示意墙 */
.ruler-wall{
  background:var(--ruler-card);
  border:2px solid var(--ruler-vermilion);
  border-radius:6px;
  padding:24px;
  box-shadow:0 8px 24px rgba(82,43,30,0.12);
  position:relative;
}
.ruler-wall::before{
  content:"CHRONOLOGY RULER // 年代尺刻度系统";
  position:absolute;top:-12px;left:20px;
  background:var(--ruler-vermilion-dark);color:var(--ruler-blue);
  font-size:10px;font-weight:700;padding:2px 10px;border-radius:2px;letter-spacing:1px;font-family:var(--font-en);
}
.ruler-header-info{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed var(--ruler-vermilion-border);padding-bottom:12px;margin-bottom:16px}
.ruler-header-info .meta-tag{font-size:12px;color:var(--ruler-vermilion);font-weight:700}
.ruler-header-info .spec-id{font-family:var(--font-en);font-size:12px;color:var(--dim);background:var(--ruler-blue-light);padding:2px 8px;border-radius:2px;border:1px solid var(--ruler-blue-dark)}

/* 年代尺刻度轴线 */
.ruler-axis{
  position:relative;height:36px;background:var(--ruler-blue-light);border:1px solid var(--ruler-blue-dark);
  border-radius:4px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;
}
.ruler-axis::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:8px;
  background-image:repeating-linear-gradient(90deg, var(--ruler-vermilion) 0px, var(--ruler-vermilion) 1px, transparent 1px, transparent 10px);
}
.ruler-axis span{font-family:var(--font-en);font-size:11px;font-weight:700;color:var(--ruler-vermilion-dark);z-index:2}

/* 打卡格网格 */
.punch-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:8px;margin-bottom:16px}
.punch-cell{
  background:var(--ruler-blue-light);border:1px solid var(--ruler-blue-dark);
  border-radius:3px;padding:8px 4px;text-align:center;font-size:11.5px;color:var(--mute);
  transition:.2s;
}
.punch-cell:hover{border-color:var(--ruler-vermilion);background:#fff;transform:translateY(-1px)}
.punch-cell.done{background:var(--ruler-blue);border-color:var(--ruler-vermilion);color:var(--ruler-vermilion-dark);font-weight:700}
.punch-cell.today{background:var(--ruler-vermilion);border-color:var(--ruler-vermilion-dark);color:#fff;font-weight:800}

/* 性能参数条 */
.ruler-stats{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;
  background:var(--ruler-blue-light);padding:12px;border-radius:4px;border:1px solid var(--ruler-blue-dark);
}
.ruler-stat-it{text-align:center}
.ruler-stat-lbl{font-size:11px;color:var(--dim)}
.ruler-stat-val{font-size:15px;font-weight:800;color:var(--ruler-vermilion-dark);margin-top:2px}

/* 通用区块与标题 */
.sec{padding:54px 0}
.sec-alt{background:rgba(214,226,235,0.40);border-top:1px solid var(--ruler-vermilion-border);border-bottom:1px solid var(--ruler-vermilion-border)}
.sec-dark{background:var(--ruler-vermilion-dark);color:var(--ruler-blue);border-top:2px solid #200e08;border-bottom:2px solid #200e08}
.sec-dark h2{color:#fff}
.sec-dark p.sec-desc{color:var(--ruler-blue)}
.sec-head{margin-bottom:34px;text-align:center}
.sec-tag{
  display:inline-block;font-size:11.5px;font-weight:700;
  color:var(--ruler-vermilion-dark);background:var(--ruler-blue);
  padding:3px 12px;border-radius:2px;margin-bottom:8px;border:1px solid var(--ruler-blue-dark);
  letter-spacing:1px;text-transform:uppercase;font-family:var(--font-en);
}
.sec-dark .sec-tag{background:var(--ruler-blue-dark);color:var(--ruler-vermilion-dark);border:none}
.sec-head h2{font-size:28px;font-weight:900;color:var(--ruler-vermilion-dark);letter-spacing:.02em}
.sec-head p.sec-desc{font-size:14.5px;color:var(--mute);margin-top:8px;max-width:720px;margin-left:auto;margin-right:auto}

/* 年代分期标记条 */
.epoch-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:2px;
  background:var(--ruler-blue);
  color:var(--ruler-vermilion-dark);
  border:1px solid var(--ruler-blue-dark);
  margin-bottom:8px;
}
.epoch-tag span.loc{color:var(--dim);font-weight:normal;border-left:1px solid var(--ruler-vermilion-border);padding-left:6px;margin-left:4px}

/* 特色横条区（4条横条 + 2张补充图文卡） */
.feat-list{display:grid;gap:16px;margin-bottom:28px}
.feat-strip{
  background:var(--ruler-card);border:1.5px solid var(--ruler-vermilion-border);border-radius:4px;
  padding:20px 24px;display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:center;
  box-shadow:0 3px 10px rgba(82,43,30,0.04);transition:.2s;
}
.feat-strip:hover{border-color:var(--ruler-vermilion);box-shadow:0 6px 18px rgba(82,43,30,0.08);transform:translateX(3px)}
.feat-strip .f-left{border-right:1px dashed var(--ruler-vermilion-border);padding-right:20px}
.feat-strip .f-num{font-family:var(--font-en);font-size:12px;font-weight:700;color:var(--ruler-ochre);letter-spacing:1px}
.feat-strip .f-left h3{font-size:18px;font-weight:800;color:var(--ruler-vermilion-dark);margin-top:2px}
.feat-strip .f-right p{font-size:14px;color:var(--mute);line-height:1.75}
.feat-strip .f-right .kw-tag{display:inline-block;font-size:11px;background:var(--ruler-blue-light);color:var(--ruler-vermilion);padding:1px 6px;border-radius:2px;margin-top:6px;border:1px solid var(--ruler-blue-dark);margin-right:6px}

.card-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.plaque-img-card{
  background:var(--ruler-card);border:2px solid var(--ruler-vermilion);border-radius:4px;
  overflow:hidden;box-shadow:0 6px 18px rgba(82,43,30,0.06);
}
.plaque-img-card img{width:100%;height:220px;object-fit:cover;border-bottom:1.5px solid var(--ruler-vermilion-border)}
.plaque-img-card .card-body{padding:18px 20px}
.plaque-img-card h3{font-size:17px;font-weight:800;color:var(--ruler-vermilion-dark);margin-bottom:6px}
.plaque-img-card p{font-size:13.5px;color:var(--mute);line-height:1.7}

/* 4步安装卡片 */
.step-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:18px}
.step-card{
  background:var(--ruler-card);border:1.5px solid var(--ruler-vermilion-border);border-radius:4px;
  padding:22px 18px;position:relative;box-shadow:0 4px 12px rgba(82,43,30,0.04);
}
.step-card:hover{border-color:var(--ruler-vermilion);box-shadow:0 6px 16px rgba(82,43,30,0.09)}
.step-card .step-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.step-card .step-idx{
  width:32px;height:32px;border-radius:2px;background:var(--ruler-vermilion);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--font-en);font-size:15px;
}
.step-card .step-pill{font-size:10.5px;color:var(--dim);background:var(--ruler-blue-light);padding:2px 6px;border-radius:2px;border:1px solid var(--ruler-blue-dark)}
.step-card h3{font-size:16px;font-weight:800;color:var(--ruler-vermilion-dark);margin-bottom:8px}
.step-card p{font-size:13px;color:var(--mute);line-height:1.65}

/* 对照清单（深色大卡，三列表格） */
.table-card{
  background:var(--ruler-vermilion-dark);border:2px solid var(--ruler-ochre);border-radius:6px;
  padding:28px;box-shadow:0 12px 32px rgba(0,0,0,0.3);overflow-x:auto;
}
.table-card h3{color:#fff;font-size:20px;font-weight:800;margin-bottom:6px}
.table-card p.sub{color:var(--ruler-blue);font-size:13.5px;margin-bottom:20px}
.chk-table{width:100%;border-collapse:collapse;text-align:left;font-size:13.5px;min-width:680px}
.chk-table th{background:rgba(163,99,43,0.35);color:#fff;padding:12px 14px;border-bottom:2px solid var(--ruler-ochre);font-weight:700}
.chk-table td{padding:14px;border-bottom:1px solid rgba(214,226,235,0.18);color:#d9e6f0;line-height:1.65}
.chk-table tr:hover td{background:rgba(255,255,255,0.04)}
.chk-table .tag-bad{background:#d9534f;color:#fff;font-size:11px;padding:2px 8px;border-radius:2px;font-weight:700}
.chk-table .tag-good{background:var(--ruler-ochre);color:#fff;font-size:11px;padding:2px 8px;border-radius:2px;font-weight:700}

/* 4岗位场景气泡卡 */
.scene-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:18px}
.scene-card{
  background:var(--ruler-card);border:1.5px solid var(--ruler-vermilion-border);border-radius:4px;
  padding:20px 18px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 4px 14px rgba(82,43,30,0.05);
}
.scene-card:hover{border-color:var(--ruler-vermilion)}
.scene-card .role-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.scene-card .role-avatar{width:36px;height:36px;border-radius:3px;background:var(--ruler-blue);color:var(--ruler-vermilion-dark);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;border:1px solid var(--ruler-blue-dark)}
.scene-card .role-name{font-size:15px;font-weight:800;color:var(--ruler-vermilion-dark)}
.scene-card .role-sub{font-size:11px;color:var(--dim)}
.scene-card p.bubble{background:var(--ruler-blue-light);border:1px solid var(--ruler-blue-dark);padding:10px 12px;border-radius:3px;font-size:12.5px;color:var(--mute);line-height:1.65;margin-bottom:12px;position:relative}
.scene-card .core-action{font-size:12px;font-weight:700;color:var(--ruler-vermilion-dark);border-top:1px dashed var(--ruler-vermilion-border);padding-top:10px;display:flex;align-items:center;gap:4px}

/* 3列短卡小技巧 */
.tips-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}
.tip-card{
  background:var(--ruler-card);border:1.5px solid var(--ruler-vermilion-border);border-radius:4px;
  padding:22px 20px;box-shadow:0 4px 12px rgba(82,43,30,0.04);
}
.tip-card:hover{border-color:var(--ruler-vermilion)}
.tip-card .tip-tag{font-size:11px;background:var(--ruler-vermilion-fade);color:var(--ruler-vermilion);font-weight:700;padding:2px 8px;border-radius:2px;display:inline-block;margin-bottom:8px}
.tip-card h3{font-size:16.5px;font-weight:800;color:var(--ruler-vermilion-dark);margin-bottom:8px}
.tip-card p{font-size:13.5px;color:var(--mute);line-height:1.7}

/* 卡点笔记（失败现象 + 处理顺序） */
.trouble-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}
.trouble-card{
  background:var(--ruler-card);border:2px solid var(--ruler-vermilion);border-radius:4px;
  padding:22px 20px;box-shadow:0 4px 16px rgba(82,43,30,0.06);
}
.trouble-fail{background:#fff1f0;border-left:3px solid #f5222d;padding:8px 12px;border-radius:2px;margin-bottom:14px}
.trouble-fail .label{font-size:11px;font-weight:800;color:#cf1322;text-transform:uppercase}
.trouble-fail h3{font-size:14.5px;font-weight:800;color:#820014;margin-top:2px}
.trouble-order .label{font-size:11.5px;font-weight:800;color:var(--ruler-vermilion-dark);margin-bottom:6px}
.trouble-order ol{padding-left:18px;font-size:13px;color:var(--mute);line-height:1.7}
.trouble-order li{margin-bottom:4px}

/* FAQ 8条手风琴 */
.faq-box{max-width:920px;margin:0 auto;display:grid;gap:12px}
details.faq-item{
  background:var(--ruler-card);border:1.5px solid var(--ruler-vermilion-border);border-radius:4px;
  box-shadow:0 2px 8px rgba(82,43,30,0.04);transition:.2s;
}
details.faq-item[open]{border-color:var(--ruler-vermilion);box-shadow:0 4px 14px rgba(82,43,30,0.09)}
summary.faq-q{
  padding:16px 20px;font-size:15.5px;font-weight:800;color:var(--ruler-vermilion-dark);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
}
summary.faq-q::-webkit-details-marker{display:none}
summary.faq-q::after{content:"+";font-family:var(--font-en);font-size:18px;font-weight:700;color:var(--ruler-vermilion)}
details.faq-item[open] summary.faq-q::after{content:"−";color:var(--ruler-vermilion-dark)}
.faq-a{padding:0 20px 18px;font-size:14px;color:var(--mute);line-height:1.75;border-top:1px dashed var(--ruler-vermilion-fade);padding-top:12px}

/* 资讯 8条带日期 */
.news-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px}
.news-item{
  background:var(--ruler-card);border:1.5px solid var(--ruler-vermilion-border);border-radius:4px;
  padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.news-item:hover{border-color:var(--ruler-vermilion);transform:translateX(3px)}
.news-title{font-size:14.5px;font-weight:700;color:var(--ruler-vermilion-dark)}
.news-date{font-family:var(--font-en);font-size:12px;color:var(--dim);white-space:nowrap;background:var(--ruler-blue-light);padding:3px 8px;border-radius:2px;border:1px solid var(--ruler-blue-dark)}

/* 收尾 CTA */
.cta-sec{background:var(--ruler-vermilion-dark);color:#fff;padding:48px 0;text-align:center;border-top:2px solid #200e08}
.cta-sec h2{font-size:26px;font-weight:900;margin-bottom:10px;letter-spacing:.02em}
.cta-sec p{font-size:15px;color:var(--ruler-blue);max-width:640px;margin:0 auto 22px}

/* 全局页脚 Footer */
.ft{background:#200e08;color:#c8d7e3;padding:48px 0 28px;font-size:13px;border-top:3px solid var(--ruler-ochre)}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
.ft-brand h3{font-size:18px;font-weight:900;color:#fff;margin-bottom:8px}
.ft-brand p{color:#9fb5c7;line-height:1.65;font-size:12.5px}
.ft-col h4{font-size:14.5px;font-weight:800;color:#fff;margin-bottom:12px;border-left:3px solid var(--ruler-ochre);padding-left:8px}
.ft-col ul{list-style:none;display:grid;gap:8px}
.ft-col a{color:#c8d7e3}
.ft-col a:hover{color:#fff;text-decoration:underline}
.ft-btm{border-top:1px solid rgba(214,226,235,0.15);padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:#7e95a8}

/* 响应式断点适配 */
@media (max-width:992px){
  .hero{grid-template-columns:1fr;gap:30px}
  .feat-strip{grid-template-columns:1fr}
  .feat-strip .f-left{border-right:none;border-bottom:1px dashed var(--ruler-vermilion-border);padding-right:0;padding-bottom:10px}
  .step-grid,.scene-grid{grid-template-columns:repeat(2, 1fr)}
  .tips-grid,.trouble-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .step-grid,.scene-grid,.card-grid-2{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr}
  .hero h1{font-size:28px}
  .hero h1 span.accent{font-size:20px}
  .nv nav{display:none}
}