/* huimelo.com — 读数台
   骨架参考：kriptoarena.com（超薄快讯条 → 报头内嵌读数排 → 整条实心导航带 → 拼图首屏），配色与字体全部重做。
   配色：石墨 + 覆盆子。 */

:root{
  --paper:#f3f2f0;
  --paper-2:#e9e7e6;
  --paper-3:#dedbdb;
  --card:#ffffff;
  --ink:#1a181c;
  --ink-2:#4b464f;
  --ink-3:#726c76;
  --rule:#d4d0d3;
  --rule-2:#bcb6bb;
  --band:#221f26;
  --band-2:#332e38;
  --rasp:#b52456;
  --rasp-deep:#88183f;
  --rasp-wash:#fbe9ef;
  --up:#146b4f;
  --up-wash:#e5efeb;
  --down:#a3282c;
  --down-wash:#f7e8e7;
  --gold:#f0b90b;
  --gold-ink:#12161c;
  --sans:"Familjen Grotesk","PingFang SC","Microsoft YaHei","Noto Sans SC",-apple-system,"Segoe UI",sans-serif;
  --num:"DM Mono",ui-monospace,Consolas,"Cascadia Mono",monospace;
  --wrap:1180px;
  --gap:26px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.78;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rasp-deep);text-decoration:none;border-bottom:1px solid rgba(181,36,86,.32)}
a:hover{color:var(--rasp);border-bottom-color:var(--rasp)}
h1,h2,h3,h4{line-height:1.32;margin:0;font-weight:650;letter-spacing:-.01em}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.35em}
li{margin:0 0 .42em}
hr{border:0;border-top:1px solid var(--rule);margin:2.2rem 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.mono{font-family:var(--num)}
.muted{color:var(--ink-3)}
.up{color:var(--up)}
.down{color:var(--down)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;background:var(--band);color:#fff;padding:10px 14px;z-index:60}
.skip-link:focus{inset-inline-start:0}

/* ---------- 顶部超薄条 ---------- */
.topline{background:var(--band);color:#cfc9d2;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.09)}
.topline-in{max-width:var(--wrap);margin:0 auto;padding:6px 22px;display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.topline b{color:#fff;font-weight:600}
.topline a{color:#e4dfe7;border-bottom-color:rgba(255,255,255,.28)}
.topline a:hover{color:#fff;border-bottom-color:#fff}

/* ---------- 报头 + 读数排 ---------- */
.masthead{background:var(--band);color:#fff}
.masthead-in{max-width:var(--wrap);margin:0 auto;padding:16px 22px 18px;display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.wordmark{display:flex;align-items:center;gap:11px;border:0;color:#fff}
.wordmark:hover{color:#fff}
.wordmark-mark{width:34px;height:34px;flex:0 0 34px}
.wordmark-txt{font-size:25px;font-weight:700;letter-spacing:.13em;line-height:1}
.wordmark-sub{display:block;font-size:11px;letter-spacing:.34em;color:#a49dab;margin-top:5px;font-weight:400}
.readout{display:flex;gap:0;border:1px solid rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.readout-item{padding:7px 15px;min-width:104px;border-inline-start:1px solid rgba(255,255,255,.12)}
.readout-item:first-child{border-inline-start:0}
.readout-key{display:block;font-size:10.5px;letter-spacing:.16em;color:#a49dab}
.readout-val{display:block;font-family:var(--num);font-size:15px;color:#fff;margin-top:2px}
.readout-delta{display:block;font-family:var(--num);font-size:11.5px;margin-top:1px;color:#a49dab}
.readout-delta.up{color:#5fc79f}
.readout-delta.down{color:#ec8079}

/* ---------- 导航实心带 ---------- */
.nav{background:var(--band-2);border-top:1px solid rgba(255,255,255,.08);border-bottom:2px solid var(--rasp);position:relative}
.nav::after{content:"";position:absolute;inset-inline:0;bottom:2px;height:8px;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(181,36,86,.9) 0 1px,transparent 1px 13px)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 22px;display:flex;gap:2px;flex-wrap:wrap}
.nav-link{display:block;padding:12px 16px;color:#e2dde6;font-size:15px;border:0;letter-spacing:.02em}
.nav-link:hover{background:rgba(255,255,255,.09);color:#fff}
.nav-link.is-current{background:var(--rasp);color:#fff}
.nav-langs{margin-inline-start:auto;display:flex;gap:2px}
.nav-lang{display:block;padding:12px 14px;color:#a49dab;font-size:14px;border:0;letter-spacing:.02em}
.nav-lang:hover{background:rgba(255,255,255,.09);color:#fff}

/* ---------- 首屏拼图 ---------- */
.hero{padding:28px 0 6px}
.hero-grid{display:grid;grid-template-columns:1.62fr 1fr;gap:var(--gap);align-items:start}
.lede{background:var(--card);border:1px solid var(--rule);padding:30px 32px 26px 52px;position:relative;box-shadow:4px 4px 0 rgba(34,31,38,.06)}
.lede::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:28px;
  background-color:var(--paper-2);border-inline-end:1px solid var(--rule);
  background-image:repeating-linear-gradient(180deg,var(--rule-2) 0 1px,transparent 1px 19px)}
.lede-kicker{font-family:var(--num);font-size:12px;letter-spacing:.2em;color:var(--rasp-deep);margin-bottom:12px}
.lede-title{font-size:34px;line-height:1.24;margin-bottom:14px}
.lede-sub{font-size:17.5px;color:var(--ink-2);margin-bottom:18px}
.lede-points{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.lede-points li{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);margin:0;font-size:15.5px}
.lede-points b{font-family:var(--num);color:var(--rasp-deep);flex:0 0 34px;font-weight:500}

.invite{background:var(--band);color:#fff;border:1px solid var(--band);padding:22px 22px 18px;box-shadow:4px 4px 0 rgba(34,31,38,.18)}
.invite-head{font-size:13px;letter-spacing:.14em;color:#a49dab;margin-bottom:12px}
.invite-code{display:flex;align-items:center;gap:12px;background:var(--gold);color:var(--gold-ink);padding:13px 16px;border-radius:2px}
.invite-code span{font-family:var(--num);font-size:27px;font-weight:500;letter-spacing:.09em;line-height:1}
.invite-copy{margin-inline-start:auto;background:var(--gold-ink);color:var(--gold);border:0;border-radius:2px;padding:9px 14px;font-family:var(--sans);font-size:14px;cursor:pointer;min-height:44px}
.invite-copy:hover{background:#000}
.invite-cta{display:block;text-align:center;margin:15px 0 0;background:var(--rasp);color:#fff;
  border:0;border-bottom:3px solid var(--rasp-deep);padding:15px 16px;font-size:16.5px;font-weight:650;
  line-height:1.4;letter-spacing:.01em;min-height:52px}
.invite-cta:hover{background:var(--rasp-deep);color:#fff;border-bottom-color:#5d0f2c}
.invite-cta b{display:block;font-weight:650}
.invite-cta span{display:block;font-size:12.5px;font-weight:400;color:#f4cfda;margin-top:3px;letter-spacing:.02em}
.invite-note{font-size:15px;color:#e6e1e9;margin:14px 0 0}
.invite-fine{font-size:12.5px;color:#9b949f;margin:9px 0 0;line-height:1.62}

.pick{margin-top:var(--gap);background:var(--rasp-wash);border:1px solid #eccdd8;border-inline-start:4px solid var(--rasp);padding:18px 22px}
.pick-tag{font-size:12px;letter-spacing:.16em;color:var(--rasp-deep);font-family:var(--num)}
.pick-title{font-size:20px;margin:7px 0 6px}
.pick-desc{font-size:15.5px;color:var(--ink-2);margin:0}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:var(--gap)}
.tile{background:var(--card);border:1px solid var(--rule);padding:18px 18px 16px;box-shadow:4px 4px 0 rgba(34,31,38,.05);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.tile:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(181,36,86,.16);border-color:var(--rule-2)}
.tile-num{font-family:var(--num);font-size:12px;color:var(--rasp-deep);letter-spacing:.14em}
.tile-title{font-size:17px;margin:8px 0 6px}
.tile-desc{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.66}

/* ---------- 通用分区 ---------- */
.sec{padding:34px 0 10px}
.sec-head{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:20px;flex-wrap:wrap}
.sec-title{font-size:21px}
.sec-note{font-size:14px;color:var(--ink-3);margin:0}
.cnt{font-family:var(--num);font-size:13px;color:var(--ink-3);margin-inline-start:auto}
.list{list-style:none;margin:0;padding:0}
.list-item{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid var(--rule);transition:background .14s ease}
.list-item:hover{background:linear-gradient(90deg,rgba(181,36,86,.05),transparent 62%)}
.list-idx{font-family:var(--num);font-size:13px;color:var(--rule-2);flex:0 0 34px;padding-top:4px}
.list-body{flex:1 1 auto;min-width:0}
.list-title{font-size:17.5px;margin:0 0 5px}
.list-desc{font-size:15px;color:var(--ink-2);margin:0 0 6px;line-height:1.68}
.list-meta{font-family:var(--num);font-size:12.5px;color:var(--ink-3)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.badge{display:inline-block;font-family:var(--num);font-size:11.5px;letter-spacing:.1em;padding:2px 8px;border:1px solid var(--rule-2);color:var(--ink-3)}
.taglist{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 4px;padding:0;list-style:none}
.taglist li{margin:0}
.tag{display:inline-block;font-size:13.5px;padding:4px 11px;background:var(--paper-2);border:1px solid var(--rule);color:var(--ink-2)}
.tag:hover{background:var(--rasp-wash);border-color:var(--rasp);color:var(--rasp-deep)}

/* ---------- 面包屑 ---------- */
.crumb{font-size:13.5px;color:var(--ink-3);padding:18px 0 0}
.crumb a{color:var(--ink-2);border-bottom-color:var(--rule-2)}
.crumb-sep{padding:0 7px;color:var(--rule-2)}

/* ---------- 文章 ---------- */
.art{max-width:790px;margin:0 auto;padding:8px 0 30px}
.art-head{border-bottom:2px solid var(--ink);padding-bottom:18px;margin-bottom:24px}
.art-kicker{font-family:var(--num);font-size:12px;letter-spacing:.18em;color:var(--rasp-deep);margin-bottom:10px}
.art-title{font-size:32px;line-height:1.26;margin-bottom:12px}
.art-meta{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--num);font-size:12.5px;color:var(--ink-3)}
.art-meta-item{white-space:nowrap}
.art-cover{margin:0 0 26px}
.art-body h2{font-size:24px;margin:2.1em 0 .7em;padding-bottom:7px;border-bottom:1px solid var(--rule)}
.art-body h3{font-size:19px;margin:1.7em 0 .55em;color:var(--ink)}
.toc{background:var(--paper-2);border:1px solid var(--rule);padding:18px 22px;margin:0 0 26px}
.toc-title{font-size:14px;letter-spacing:.12em;color:var(--ink-3);margin-bottom:9px;font-family:var(--num)}
.toc-list{list-style:none;margin:0;padding:0;columns:2;column-gap:26px}
.toc-list li{margin:0 0 6px;font-size:15px;break-inside:avoid}
.answer{background:var(--card);border:1px solid var(--rule);border-inline-start:4px solid var(--rasp);padding:16px 20px;margin:0 0 1.3em}
.answer-title{font-size:13px;letter-spacing:.14em;color:var(--rasp-deep);font-family:var(--num);margin-bottom:7px}
.answer p:last-child{margin-bottom:0}
.callout{border:1px solid var(--rule);background:var(--paper-2);padding:15px 19px;margin:1.5em 0}
.callout p:last-child{margin-bottom:0}
.callout-warn{background:var(--down-wash);border-color:#e3c3c1}
.callout-note{background:var(--up-wash);border-color:#c5d8d1}
.figure{margin:1.8em 0}
.figcap{font-size:13.5px;color:var(--ink-3);margin-top:8px;line-height:1.6}
.tbl-wrap{overflow-x:auto;margin:1.6em 0}
.tbl{border-collapse:collapse;width:100%;font-size:15px}
.tbl th,.tbl td{border:1px solid var(--rule);padding:9px 12px;text-align:left;vertical-align:top}
.tbl th{background:var(--paper-2);font-weight:600}
.faq{margin:1.8em 0 0}
.faq-q{font-size:18px;margin:1.5em 0 .4em}
.faq-a{margin:0 0 .9em}
.related{margin-top:36px;border-top:2px solid var(--ink);padding-top:16px}
.related-title{font-size:15px;letter-spacing:.1em;font-family:var(--num);color:var(--ink-3);margin-bottom:10px}
.disc{font-size:13.5px;color:var(--ink-3);background:var(--paper-2);border:1px solid var(--rule);padding:11px 15px;margin:1.2em 0;line-height:1.66}
.fn{font-size:13px;color:var(--ink-3);margin-top:2em;line-height:1.66}

/* ---------- 工具 ---------- */
.tool{background:var(--band);color:#fff;border:1px solid var(--band);padding:26px 28px 22px;margin:0 0 26px}
.tool-panel{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
.tool-out{text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);padding:22px 18px}
.tool-big{font-family:var(--num);font-size:46px;line-height:1.1;color:#fff;display:block}
.tool-big.up{color:#5fc79f}
.tool-big.down{color:#ec8079}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tool-stamp{font-family:var(--num);font-size:12px;color:#8d8694;margin:14px 0 0;line-height:1.6;word-break:break-all}
.tool-unit{font-size:13px;letter-spacing:.14em;color:#a49dab;display:block;margin-top:8px}
.tool-row{margin:0 0 16px}
.tool-label{display:block;font-size:13.5px;color:#cfc9d2;margin-bottom:7px}
.tool-input{width:100%;background:#191720;border:1px solid rgba(255,255,255,.2);color:#fff;font-family:var(--num);font-size:17px;padding:10px 12px;border-radius:2px;min-height:44px}
.tool-slider{width:100%;accent-color:var(--rasp);min-height:44px}
.tool-hint{font-size:13px;color:#9b949f;margin:0;line-height:1.62}
.tool-src{font-size:12.5px;color:#9b949f;border-top:1px solid rgba(255,255,255,.13);margin-top:18px;padding-top:12px;line-height:1.62}
.tool-src a{color:#e4dfe7;border-bottom-color:rgba(255,255,255,.3)}
.guide{border:1px solid var(--rule);background:var(--card);padding:0 20px}
.guide[open]{padding-bottom:12px}
.guide-sum{cursor:pointer;padding:14px 0;font-size:16px;font-weight:600;list-style:none}
.guide-sum::-webkit-details-marker{display:none}
.guide h3{font-size:17px;margin:1.4em 0 .45em}

/* ---------- 页脚 ---------- */
.foot{background:var(--band);color:#b7b0bd;margin-top:46px;font-size:14.5px}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:34px 22px 26px}
.foot-brand{color:#fff;font-size:18px;letter-spacing:.13em;margin-bottom:6px}
.foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:26px;margin:22px 0 0}
.foot-col p{margin:0 0 .6em;line-height:1.72}
.foot-h{color:#fff;font-size:13px;letter-spacing:.13em;margin-bottom:9px;font-family:var(--num)}
.foot-link{display:block;color:#b7b0bd;border:0;padding:3px 0;font-size:14.5px}
.foot-link:hover{color:#fff}
.foot-legal{border-top:1px solid rgba(255,255,255,.13);margin-top:24px;padding-top:16px;font-size:13.5px;line-height:1.72;color:#9b949f}
.foot-legal a{color:#cfc9d2;border-bottom-color:rgba(255,255,255,.26)}
.foot-count{font-family:var(--num);font-size:12.5px;color:#8d8694;margin-top:10px}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding:70px 0 40px}
.notfound h1{font-size:40px;margin-bottom:14px}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .tool-panel{grid-template-columns:1fr}
  .tool-grid{grid-template-columns:1fr}
  .readout{display:none}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .wrap{padding:0 16px}
  .topline-in{padding:6px 16px;font-size:12px}
  .masthead-in{padding:14px 16px 15px}
  .nav-in{padding:0 8px}
  .nav-link{padding:11px 11px;font-size:14.5px}
  .lede{padding:22px 18px 20px}
  .lede-title{font-size:26px}
  .art-title{font-size:25px}
  .art-body h2{font-size:21px}
  .tiles{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
  .toc-list{columns:1}
  .invite-code span{font-size:23px}
  .tool-big{font-size:38px}
  .tool{padding:20px 18px 18px}
}

/* ---------- 细节 ---------- */
::selection{background:var(--rasp);color:#fff}
:focus-visible{outline:2px solid var(--rasp);outline-offset:2px}
.mono,.readout-val,.readout-delta,.list-meta,.tool-big,.invite-code span,.lede-points b,.list-idx{font-variant-numeric:tabular-nums}
.sec-head{position:relative}
.sec-head::after{content:"";position:absolute;inset-inline-start:0;bottom:-2px;width:64px;height:2px;background:var(--rasp)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:640px){
  .lede{padding:22px 18px 20px 38px}
  .lede::before{width:20px}
}