/* yingxiangmao.com — 暖纸底 + 柿色强调，与 zhuanpindou 同一套视觉语言 */

:root{
  --bg:#FBF8F2;          /* 暖纸底 */
  --ink:#221D15;         /* 近黑墨 */
  --ink-2:#453D30;       /* 正文墨 */
  --soft:#8B8070;        /* 弱化字 */
  --hair:#E7DFD0;        /* 发丝线 */
  --accent:#BC3F1E;      /* 柿色：唯一强调色 */
  --accent-ink:#96331A;
  --tint:#F4EEE1;        /* 浅陶底：结论框/表头 */
  --card:#FFFDF9;
  --m-red:#D6483C; --m-amber:#E09B23; --m-teal:#2E8C77;  /* 站名符号三色 */
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--ink-2);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16px;line-height:1.9;
  font-feature-settings:"kern";
}
::selection{background:#F3D9CB;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;}

/* .wrap 是新首页的容器；.topbar-inner / .post 是既有文章页沿用的同名容器 */
.wrap,.topbar-inner,.post{max-width:720px;margin:0 auto;padding:0 22px;}

/* ---- 站名符号：三个小方块（工具箱格子），全站唯一图形 ---- */
.mark{display:inline-flex;gap:5px;align-items:center;margin-right:10px;transform:translateY(-1px);}
.mark i{width:9px;height:9px;border-radius:2.5px;border:2.5px solid;}
.mark i:nth-child(1){border-color:var(--m-red);}
.mark i:nth-child(2){border-color:var(--m-amber);}
.mark i:nth-child(3){border-color:var(--m-teal);}

/* ================= 头部（header 新首页 / .topbar 既有页面） ================= */
header,.topbar{padding:26px 0 0;}
header .wrap,.topbar-inner{display:flex;align-items:baseline;gap:26px;flex-wrap:wrap;}
.site-name,.brand{
  display:inline-flex;align-items:baseline;
  font-weight:800;font-size:1.14rem;letter-spacing:.06em;color:var(--ink);
}
.site-name span,.brand span{color:var(--soft);font-weight:700;}
/* 只作用于头部里的导航：老文章页外层就是 <nav class="topbar">，不能用裸 nav 选择器 */
header nav,.topnav{display:flex;gap:22px;font-size:.9rem;color:var(--soft);margin-left:auto;}
header nav a,.topnav a{padding-bottom:2px;transition:color .15s;}
header nav a:hover,.topnav a:hover{color:var(--ink);}
header nav a.on,.topnav a.on{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--accent);}

/* ================= 首页 ================= */
.intro{padding:52px 0 8px;}
.intro h1{font-size:1.72rem;font-weight:900;line-height:1.45;color:var(--ink);letter-spacing:.01em;}
.intro .sub{color:var(--soft);font-size:.94rem;margin-top:10px;max-width:34em;}
.intro .apps{margin-top:20px;font-size:.93rem;color:var(--ink-2);
  border-top:1px solid var(--hair);padding-top:14px;}
.intro .apps b{color:var(--accent);font-weight:600;}
.intro .apps a{color:var(--accent);font-weight:600;}
.intro .apps a:hover{text-decoration:underline;text-underline-offset:4px;}

.list{padding:34px 0 64px;}
.list h2{font-size:.78rem;font-weight:700;color:var(--soft);letter-spacing:.32em;margin-bottom:14px;}
.list ul{list-style:none;}
.list li{display:flex;gap:20px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--hair);}
.list li:last-child{border-bottom:none;}
.d{color:var(--soft);font-size:.8rem;font-variant-numeric:tabular-nums;letter-spacing:.03em;flex:none;width:88px;}
.list li a{color:var(--ink);font-size:.96rem;line-height:1.65;transition:color .12s;}
.list li a:hover{color:var(--accent);}
.list li span.soon{color:var(--soft);font-size:.96rem;line-height:1.65;}

/* ================= 正文页（.post 既有页面与生成页共用，.doc 备用） ================= */
.post,.doc{padding-top:44px;padding-bottom:72px;}
.crumb,.crumbs{font-size:.8rem;color:var(--soft);letter-spacing:.04em;margin-bottom:20px;}
.crumb a:hover,.crumbs a:hover{color:var(--ink);}
.crumb span{margin:0 6px;}

.post-header h1,.post h1,.doc h1{
  font-size:1.62rem;font-weight:900;line-height:1.5;color:var(--ink);letter-spacing:.01em;
}
.post-header .meta,.meta{font-size:.8rem;color:var(--soft);margin:12px 0 30px;letter-spacing:.03em;}

.post h2,.doc h2{font-size:1.16rem;font-weight:800;color:var(--ink);margin:46px 0 14px;
  line-height:1.5;}
.post h3,.doc h3{font-size:1.01rem;font-weight:700;color:var(--ink);margin:28px 0 8px;}
.post p,.doc p{margin-bottom:14px;font-size:.95rem;}
.post ul,.post ol,.doc ul,.doc ol{margin:0 0 14px 1.5em;font-size:.95rem;}
.post li,.doc li{margin-bottom:6px;}
.post li::marker,.doc li::marker{color:var(--soft);}
.post p a,.doc p a,.post li a,.doc li a{color:var(--accent);}
.post p a:hover,.doc p a:hover{text-decoration:underline;text-underline-offset:4px;}
.post strong,.doc strong{color:var(--ink);font-weight:700;}

.lead{font-size:1rem;color:var(--ink-2);margin-bottom:18px;}

/* 正文里的图片 */
.post img,.doc img{display:block;margin:18px 0;border-radius:10px;border:1px solid var(--hair);}

figure.cover{margin:18px 0 26px;}
figure.cover img{border-radius:10px;border:1px solid var(--hair);display:block;}

/* 一句话结论框 */
.tldr,.answer{background:var(--tint);border-radius:10px;padding:18px 22px;margin:26px 0 10px;
  font-size:.95rem;line-height:1.9;}
.tldr-t{display:block;font-size:.76rem;font-weight:800;letter-spacing:.28em;
  color:var(--accent-ink);margin-bottom:7px;}
.tldr ul{margin:10px 0 0 1.3em;}
.tldr li{margin-bottom:5px;}
.tldr p{margin-bottom:8px;}
.tldr p:last-child{margin-bottom:0;}

table{width:100%;border-collapse:collapse;font-size:.9rem;margin:10px 0 24px;}
th{font-size:.8rem;font-weight:700;color:var(--soft);letter-spacing:.06em;text-align:left;
  padding:8px 12px;border-bottom:2px solid var(--ink);}
td{padding:9px 12px;border-bottom:1px solid var(--hair);vertical-align:top;}
tr:last-child td{border-bottom:none;}
.table-wrap,.table-scroll{overflow-x:auto;}

/* 常见问题 */
.q{padding:13px 0;border-bottom:1px solid var(--hair);margin:0;font-size:.95rem;color:var(--ink);
  display:flex;gap:10px;}
.q::before{content:"Q";color:var(--accent);font-weight:800;flex:none;}
.q + p{margin:5px 0 14px 24px;font-size:.91rem;}

blockquote{margin:16px 0;padding:2px 0 2px 16px;border-left:2px solid var(--hair);
  color:var(--soft);font-size:.93rem;}
code{background:var(--tint);padding:1px 6px;border-radius:4px;font-size:.88em;}
pre{background:var(--tint);padding:14px 16px;border-radius:10px;overflow-x:auto;margin:0 0 18px;}
pre code{background:none;padding:0;}
hr,.hr{border:none;border-top:1px solid var(--hair);margin:30px 0;}

/* 文章列表里的作者名 */
.list li .au,.au{color:var(--soft);font-size:.86rem;flex:none;margin-right:14px;}
.list li .au:hover,.au:hover{color:var(--accent);}

/* 文末作者卡片 */
.author-card{display:flex;align-items:flex-start;gap:18px;margin-top:38px;padding:22px 24px;
  background:var(--card);border:1px solid var(--hair);border-radius:12px;}
.author-card img{width:64px;height:64px;border-radius:50%;flex:none;border:1px solid var(--hair);margin:0;}
.ac-body{min-width:0;}
.author-card p{margin:0;}
.ac-label{font-size:.7rem;font-weight:800;letter-spacing:.28em;color:var(--soft);}
.ac-name{margin-top:7px!important;font-size:1.02rem;font-weight:700;line-height:1.4;}
/* 正文里的 .post p a 是柿色，作者名要压过它 */
.author-card .ac-name a{color:var(--ink);}
.author-card .ac-name a:hover{color:var(--accent);}
.ac-desc{margin-top:5px!important;font-size:.9rem;color:var(--soft);line-height:1.75;}
.author-card .ac-more{display:inline-block;margin-top:10px;font-size:.85rem;color:var(--accent);}
.ac-more:hover{text-decoration:underline;text-underline-offset:4px;}

@media (max-width:560px){
  .author-card{gap:14px;padding:18px;}
  .author-card img{width:52px;height:52px;}
}

/* 作者页 */
.author-head{display:flex;align-items:center;gap:18px;padding:52px 0 8px;}
.author-head img{width:88px;height:88px;border-radius:50%;flex:none;border:1px solid var(--hair);}
.author-head h1{font-size:1.72rem;font-weight:900;color:var(--ink);line-height:1.4;}
.author-bio{padding:18px 0 0;}
.author-bio p{margin-bottom:14px;font-size:.95rem;color:var(--ink-2);}
.author-bio p:last-child{margin-bottom:0;}

/* 本站小程序：二维码卡片 */
.apps-box{margin-top:40px;padding-top:24px;border-top:1px solid var(--hair);}
.apps-box h2{font-size:.76rem;font-weight:800;letter-spacing:.28em;color:var(--soft);margin:0 0 16px;}
.app-list{display:flex;flex-wrap:wrap;gap:26px;}
/* 首页顶部那一组：紧跟简介，不要重复的标题和分隔线 */
.apps-box.home{margin-top:16px;padding-top:0;border-top:none;}
.apps-box.home .app{width:150px;}
.apps-box.home .app img{width:116px;height:116px;}
.app{display:flex;flex-direction:column;align-items:center;text-align:center;width:150px;}
.app img{width:132px;height:132px;display:block;border-radius:10px;border:1px solid var(--hair);background:#fff;padding:6px;margin:0;}
.app b{margin-top:9px;font-size:.93rem;color:var(--ink);}
.app span{margin-top:2px;font-size:.8rem;color:var(--soft);line-height:1.6;}

/* 继续阅读 */
.post-more,.rel{margin-top:34px;background:var(--card);border:1px solid var(--hair);
  border-radius:10px;padding:16px 20px;}
.post-more h2,.rel b{display:block;font-size:.76rem;font-weight:800;letter-spacing:.28em;
  color:var(--soft);margin:0 0 8px;}
.more-item{display:block;padding:6px 0;border-bottom:1px solid var(--hair);}
.more-item:last-child{border-bottom:none;}
.more-item strong{display:block;font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.6;}
.more-item span{display:block;font-size:.85rem;color:var(--soft);line-height:1.6;}
.more-item:hover strong{color:var(--accent);}

/* ================= 页脚 ================= */
footer,.site-footer{border-top:1px solid var(--hair);padding:22px 0 40px;
  font-size:.82rem;color:var(--soft);}
footer .wrap{display:flex;flex-direction:column;gap:5px;}
.site-footer{max-width:720px;margin:0 auto;padding-left:22px;padding-right:22px;
  display:flex;flex-direction:column;gap:5px;}
footer a,.site-footer a{color:var(--soft);}
footer a:hover,.site-footer a:hover{color:var(--ink);}

@media (max-width:560px){
  .intro h1{font-size:1.4rem;}
  .post-header h1,.post h1,.doc h1{font-size:1.34rem;}
  .d{width:auto;}
  .list li{flex-wrap:wrap;gap:6px 14px;}
  header nav,.topnav{margin-left:0;gap:18px;}
}

/* ================= zhuanpindou 页面用到的类（两站共用同一份样式表） ================= */

/* 珠环符号：三个空心圆，拼豆站的站名图形 */
.beads{display:inline-flex;gap:5px;align-items:center;margin-right:10px;transform:translateY(-1px);}
.beads i{width:9px;height:9px;border-radius:50%;border:2.5px solid;}
.beads i:nth-child(1){border-color:var(--m-red);}
.beads i:nth-child(2){border-color:var(--m-amber);}
.beads i:nth-child(3){border-color:var(--m-teal);}

/* 常见问题（.q 的另一种写法） */
.faq-item{padding:13px 0;border-bottom:1px solid var(--hair);margin:0;}
.faq-item:last-of-type{border-bottom:none;}
.faq-item b{display:flex;gap:10px;font-size:.95rem;color:var(--ink);}
.faq-item b::before{content:"Q";color:var(--accent);font-weight:800;flex:none;}
.faq-item p{margin:5px 0 0 24px;font-size:.91rem;}

/* 定义列表：产品页的参数说明 */
.doc dl,.post dl{margin:4px 0 18px;border-left:2px solid var(--hair);padding-left:16px;}
.doc dt,.post dt{font-weight:700;font-size:.88rem;color:var(--ink);margin-top:11px;}
.doc dd,.post dd{margin-top:2px;font-size:.93rem;}
.doc dd a,.post dd a{color:var(--accent);}

/* 正文里的强调链接 */
.inline-link{color:var(--accent);}
.inline-link:hover{text-decoration:underline;text-underline-offset:4px;}

/* 页脚补充说明 */
.note{font-size:.81rem;color:var(--soft);margin-top:36px;padding:14px 0 0;
  border-top:1px solid var(--hair);line-height:1.8;}

/* 相关阅读列表（.post-more 的另一种写法） */
.rel ul{list-style:none;margin:0;}
.rel li{margin:0;padding:4px 0;font-size:.92rem;}
.rel a{color:var(--ink);}
.rel a:hover{color:var(--accent);}