/* dz556 · 第九套：高对比编辑感（近黑 + 石灰白 + 电光青）
   前五站：柔和深色×4 + 浅色×1。此处走硬边、粗线、强对比，像技术手册／杂志内页。 */
:root{
  --bk:#0a0a0b; --bk-2:#141417; --bk-3:#1f1f24;
  --cy:#00d4c8; --cy-2:#5ce8de; --cy-dim:#00a89e;
  --lime:#c8f04a;
  --pw:#fcfcfa; --pw-2:#f2f2ee; --pw-3:#e6e6e0;
  --ln:#dcdcd4; --ln-d:#2e2e35;
  --tx:#0d0d0f; --tx-2:#55555e; --tx-3:#8a8a94; --tx-inv:#f2f2ee;
  --maxw:1180px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--pw);color:var(--tx);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
  font-size:15.5px;line-height:1.9;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 18px}}

/* 顶栏：黑底 + 粗下边 */
.topbar{background:var(--bk);border-bottom:3px solid var(--cy);position:sticky;top:0;z-index:60}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:800;color:#fff;letter-spacing:.4px}
.brand i{font-style:normal;background:var(--cy);color:var(--bk);font-size:12px;font-weight:900;
  padding:3px 8px;letter-spacing:1.4px}
.topnav{display:flex;gap:0;list-style:none;margin:0;padding:0}
.topnav a{color:#9a9aa4;font-size:14px;padding:8px 17px;border-left:1px solid var(--ln-d);transition:.16s}
.topnav li:last-child a{border-right:1px solid var(--ln-d)}
.topnav a:hover,.topnav a.on{color:var(--bk);background:var(--cy)}
@media(max-width:900px){.topnav{display:none}}

/* 首屏：黑底 + 网格线 + 左文右图 */
.hero{background:var(--bk);color:var(--tx-inv);padding:66px 0 70px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--ln-d) 1px,transparent 1px),linear-gradient(90deg,var(--ln-d) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(700px 380px at 26% 40%,#000,transparent 76%)}
.hero .wrap{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center;position:relative;z-index:2}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:34px}}
.tagline{display:inline-block;background:var(--cy);color:var(--bk);font-size:11px;font-weight:900;
  letter-spacing:2.4px;padding:5px 12px;margin-bottom:20px;text-transform:uppercase}
.hero h1{font-size:clamp(31px,4.5vw,47px);line-height:1.18;margin:0 0 18px;font-weight:900;letter-spacing:-1.2px}
.hero h1 em{font-style:normal;color:var(--cy)}
.hero p{color:#a5a5b0;font-size:15.8px;line-height:1.95;margin:0 0 28px;max-width:33em}
.btns{display:flex;gap:0;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;padding:13px 28px;font-size:14.5px;font-weight:700;
  border:2px solid var(--cy);transition:.18s;letter-spacing:.3px}
.btn-a{background:var(--cy);color:var(--bk)}
.btn-a:hover{background:var(--cy-2);border-color:var(--cy-2)}
.btn-b{color:var(--cy);border-left:0}
.btn-b:hover{background:rgba(0,212,200,.14)}
@media(max-width:560px){.btn-b{border-left:2px solid var(--cy)}}
.hero-fig{margin:0}
.hero-fig img{width:100%;height:auto;display:block;border:3px solid var(--cy);
  box-shadow:16px 16px 0 rgba(0,212,200,.16)}

/* 数据条：黑底反白 */
.strip{background:var(--bk-2);border-bottom:1px solid var(--ln-d)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:700px){.strip .wrap{grid-template-columns:1fr 1fr}}
.strip div{padding:22px 20px;text-align:center;border-right:1px solid var(--ln-d)}
.strip div:last-child{border-right:0}
.strip b{display:block;font-size:26px;color:var(--cy);font-weight:900;font-variant-numeric:tabular-nums;line-height:1.15}
.strip span{font-size:12.5px;color:#7d7d88;letter-spacing:.4px}

/* 分区：粗线标题 */
.sec{padding:64px 0}
.sec.alt{background:var(--pw-2)}
.sec-head{margin-bottom:38px;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  border-bottom:3px solid var(--bk);padding-bottom:16px}
.sec-head .n{font-size:12px;font-weight:900;letter-spacing:2.4px;color:var(--cy-dim);
  font-variant-numeric:tabular-nums;padding-bottom:5px}
.sec-head h2{font-size:clamp(22px,2.9vw,30px);margin:0;font-weight:900;letter-spacing:-.6px;flex:1;line-height:1.3}
.sec-head p{color:var(--tx-2);margin:0;font-size:14.4px;width:100%}

.blocks{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){.blocks{grid-template-columns:1fr}}
.blk{background:#fff;border:2px solid var(--bk);padding:26px 28px 28px;position:relative;transition:.18s}
.blk:hover{box-shadow:8px 8px 0 var(--cy)}
.blk .k{position:absolute;top:-2px;right:-2px;background:var(--bk);color:var(--cy);
  font-size:11px;font-weight:900;letter-spacing:1.6px;padding:5px 11px}
.blk h3{margin:0 0 11px;font-size:17px;font-weight:800;letter-spacing:-.2px}
.blk p{margin:0 0 11px;color:var(--tx-2);font-size:14.4px;line-height:1.9}
.blk p:last-child{margin:0}
.blk ul{margin:0;padding-left:1.2em;color:var(--tx-2);font-size:14.2px}
.blk li{margin-bottom:6px}
.blk b{color:var(--tx)}

/* 概率表：等宽数字 + 斑马纹 */
.tbl{width:100%;border-collapse:collapse;font-size:14.6px;border:2px solid var(--bk);background:#fff}
.tbl th{background:var(--bk);color:var(--cy);font-weight:800;padding:12px 16px;text-align:left;
  font-size:13px;letter-spacing:1.2px}
.tbl td{padding:11px 16px;border-top:1px solid var(--ln)}
.tbl tr:nth-child(even) td{background:var(--pw-2)}
.tbl td:first-child{font-weight:700;white-space:nowrap}
.tbl td.num{font-variant-numeric:tabular-nums;color:var(--cy-dim);font-weight:700;text-align:right}

/* FAQ：H2 级问句（母站同款做法） */
.qh{border-top:2px solid var(--bk);padding-top:22px;margin-top:26px}
.qh:first-of-type{margin-top:0}
.qh h2{font-size:17.5px;font-weight:800;margin:0 0 11px;letter-spacing:-.2px;line-height:1.55}
.qh p{margin:0;color:var(--tx-2);font-size:14.6px;line-height:1.95;max-width:46em}

.cta{background:var(--bk);color:var(--tx-inv);padding:60px 0;text-align:center}
.cta .tagline{margin-bottom:18px}
.cta h2{font-size:clamp(21px,2.7vw,29px);margin:0 0 13px;font-weight:900;letter-spacing:-.5px}
.cta h2 em{font-style:normal;color:var(--cy)}
.cta p{color:#9a9aa4;margin:0 auto 26px;max-width:36em;font-size:14.8px}
.cta .btns{justify-content:center}

.foot{background:var(--bk);color:#8a8a94;padding:46px 0 0;font-size:14px;border-top:3px solid var(--cy)}
.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:32px}
@media(max-width:880px){.foot .cols{grid-template-columns:1fr 1fr}}
.foot h4{color:var(--cy);font-size:12px;margin:0 0 14px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:10px}
.foot a:hover{color:var(--cy-2)}
.foot .bot{border-top:1px solid var(--ln-d);padding:18px 0;text-align:center;font-size:13px;color:#63636d}
.foot .bot a{color:#63636d}
.foot .bot a:hover{color:var(--cy-2)}

/* 内页 */
.page-hd{background:var(--bk);color:var(--tx-inv);padding:42px 0 44px;border-bottom:3px solid var(--cy)}
.crumb{font-size:13px;color:#7d7d88;margin-bottom:14px}
.crumb a:hover{color:var(--cy)}
.crumb i{font-style:normal;margin:0 8px;color:#45454e}
.page-hd .tag{display:inline-block;background:var(--cy);color:var(--bk);padding:3px 11px;
  font-size:12px;font-weight:800;letter-spacing:1.2px;margin-bottom:13px}
.page-hd h1{font-size:clamp(23px,3.2vw,33px);line-height:1.38;margin:0;font-weight:900;letter-spacing:-.7px}
.page-hd .meta{margin-top:14px;color:#7d7d88;font-size:13.5px;display:flex;gap:20px;flex-wrap:wrap}
.shell{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:44px;max-width:var(--maxw);
  margin:0 auto;padding:44px 28px 64px;align-items:start}
@media(max-width:960px){.shell{grid-template-columns:1fr;gap:34px}}
.post{background:#fff;border:2px solid var(--bk);padding:34px 38px 38px;min-width:0}
@media(max-width:640px){.post{padding:22px 18px 28px;border-width:1px}}
.post .cover{margin:0 0 28px;border:2px solid var(--bk);overflow:hidden}
.post .cover img{width:100%;height:auto;display:block}
.post-body{font-size:16px;line-height:2.0;color:#1a1a1e}
.post-body>*:first-child{margin-top:0}
.post-body p{margin:0 0 19px}
.post-body h2{font-size:20px;font-weight:900;margin:36px 0 14px;letter-spacing:-.4px;line-height:1.45;
  border-top:2px solid var(--bk);padding-top:14px}
.post-body h3{font-size:17px;font-weight:800;margin:27px 0 11px;color:var(--cy-dim)}
.post-body ul,.post-body ol{margin:0 0 19px;padding-left:1.5em}
.post-body li{margin-bottom:8px}
.post-body img{max-width:100%;height:auto;display:block;margin:24px auto;border:1px solid var(--ln)}
.post-body figcaption{text-align:center;font-size:13px;color:var(--tx-3);margin-top:9px}
.post-body blockquote{margin:24px 0;padding:18px 22px;background:var(--bk);color:var(--tx-inv);font-size:15.5px}
.post-body blockquote p:last-child{margin:0}
.post-body a{color:var(--cy-dim);border-bottom:2px solid rgba(0,168,158,.3)}
.post-body a:hover{border-color:var(--cy-dim)}
.post-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14.8px;border:2px solid var(--bk)}
.post-body th,.post-body td{padding:10px 14px;text-align:left;border-top:1px solid var(--ln)}
.post-body th{background:var(--bk);color:var(--cy);font-weight:800}
.side{position:sticky;top:84px;display:flex;flex-direction:column;gap:18px}
@media(max-width:960px){.side{position:static}}
.box{background:#fff;border:2px solid var(--bk)}
.box-h{background:var(--bk);color:var(--cy);padding:12px 18px;font-size:12px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase}
.box-b{padding:16px 18px 18px}
.side .list{list-style:none;margin:0;padding:0}
.side .list li{padding:10px 0;border-bottom:1px solid var(--ln);font-size:14px;line-height:1.65}
.side .list li:last-child{border:0}
.side .list a:hover{color:var(--cy-dim)}
.side .cats{display:flex;flex-wrap:wrap;gap:7px}
.side .cats a{border:1.5px solid var(--bk);padding:4px 11px;font-size:12.5px;font-weight:600;transition:.16s}
.side .cats a:hover{background:var(--bk);color:var(--cy)}
.side-cta{background:var(--bk);color:var(--tx-inv);padding:24px;border:2px solid var(--cy)}
.side-cta b{display:block;color:var(--cy);font-size:15.5px;margin-bottom:9px;font-weight:800}
.side-cta p{margin:0 0 16px;font-size:13.6px;color:#9a9aa4;line-height:1.85}
.side-cta .btn{padding:9px 18px;font-size:13.5px}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
@media(max-width:640px){.post-nav{grid-template-columns:1fr}}
.post-nav a{background:#fff;border:2px solid var(--bk);padding:16px 18px;transition:.18s}
.post-nav a:hover{box-shadow:6px 6px 0 var(--cy)}
.post-nav small{color:var(--tx-3);font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;display:block;margin-bottom:7px}
.post-nav b{font-size:14.5px;font-weight:700;line-height:1.65;display:block}
.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:960px){.arch-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.arch-grid{grid-template-columns:1fr}}
.arch-card{background:#fff;border:2px solid var(--bk);display:flex;flex-direction:column;transition:.18s}
.arch-card:hover{box-shadow:8px 8px 0 var(--cy)}
.arch-card .thumb{aspect-ratio:16/10;background:var(--pw-3);overflow:hidden;border-bottom:2px solid var(--bk)}
.arch-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.arch-card .in{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.arch-card .cat{font-size:11px;color:var(--cy-dim);letter-spacing:1.6px;margin-bottom:9px;font-weight:900;text-transform:uppercase}
.arch-card h3{font-size:15.8px;font-weight:800;line-height:1.6;margin:0 0 10px}
.arch-card p{font-size:13.8px;color:var(--tx-2);line-height:1.85;margin:0 0 14px;flex:1}
.arch-card time{font-size:12.5px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.pager{display:flex;justify-content:center;gap:0;margin-top:34px;flex-wrap:wrap}
.pager a,.pager span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--bk);border-right-width:0;font-size:14px;padding:0 13px;font-variant-numeric:tabular-nums}
.pager a:last-child,.pager span:last-child{border-right-width:2px}
.pager .current{background:var(--bk);color:var(--cy)}
.pager a:hover{background:var(--cy);color:var(--bk)}
.empty{text-align:center;padding:70px 20px;color:var(--tx-2)}
.eyebrow{font-size:11px;letter-spacing:2.4px;color:var(--cy-dim);text-transform:uppercase;font-weight:800}