/* ============ 成语查询网站样式 ============ */
/* 设计规范见 docs/design-spec.md */
:root {
--primary: #C82423; /* 暗红，主强调色 */
--primary-dark: #A81D1C;
--primary-soft: #FBEfEA; /* 浅红底（按钮hover/浅红边框） */
--ink: #222222; /* 正文 */
--ink-soft: #666666; /* 次要文字 */
--ink-faint: #999999; /* 辅助文字 */
--bg: #F8F5EE; /* 米浅米色底 */
--card: #FFFFFF;
--border: #EAE5DA;
--gold: #B98A3B;
--radius: 12px;
--shadow: 0 1px 2px rgba(34,34,34,.04), 0 4px 14px rgba(34,34,34,.05);
--font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
--font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* ===== 站群视觉模板（通过 html[data-template="..."] 切换配色）===== */
html[data-template="green"] {
--primary: #2E7D5B;
--primary-dark: #1F5C42;
--primary-soft: #EAF4EF;
--gold: #8B6F2E;
}
html[data-template="blue"] {
--primary: #2B5EA7;
--primary-dark: #1E4578;
--primary-soft: #EAF1F9;
--gold: #7A6A2E;
}
html[data-template="dark"] {
--primary: #C82423;
--primary-dark: #A81D1C;
--primary-soft: #3A2422;
--ink: #E8E4DE;
--ink-soft: #B5AEA6;
--ink-faint: #8A857E;
--bg: #1E1C1A;
--card: #282522;
--border: #3A3531;
--gold: #C89A4B;
}
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
color: var(--ink);
background: var(--bg);
line-height: 1.75;
font-size: 16px;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
/* width:100% 不能省。
* 有十套视觉模板（crayon / luxe / gothic / wabi / cyber / morandi / industrial /
* botanical / y2k / guochao）把 body 设成 display:flex; flex-direction:column，
* 为了把页脚压到底（main { flex: 1 0 auto }）。
* 在 flex 容器里，子项的 width:auto 不是「占满一行」，而是收缩到内容宽度；
* 交叉轴上的 margin:auto 又会让 align-self:stretch 失效 —— 两条叠一起，
* 容器宽度就由页面内容反过来决定：
* 成语首页 / 成语列表 → 多列网格把内容撑到 1080，看不出问题；
* 汉字 / 词语 / 英汉的首页与列表 → 内容窄，整页缩成 400 多像素一条。
* 所以这里显式给 100%，让 flex 与非 flex 父级下表现一致。 */
.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
/* ============ 顶部导航 ============ */
.site-header {
position: sticky; top: 0; z-index: 100;
background: #fff;
border-bottom: 1px solid var(--border);
}
.header-inner {
display: flex; align-items: center; gap: 24px;
min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px;
}
.logo {
font-family: var(--font-serif);
font-size: 24px; font-weight: 700; color: var(--primary);
white-space: nowrap;
}
.logo:hover { color: var(--primary-dark); }
.nav { display: flex; gap: 8px; }
.nav a {
color: var(--ink-soft); font-size: 15px; letter-spacing: .5px;
padding: 7px 14px; border-radius: 8px;
}
.nav a:hover { color: var(--primary); background: var(--primary-soft); }
/* 搜索框 */
.search-box { position: relative; margin-left: auto; display: flex; flex: 1 1 260px; max-width: 420px; }
.search-box input {
flex: 1; height: 42px; padding: 0 16px;
border: 1px solid var(--border); border-radius: 999px 0 0 999px;
font-size: 15px; outline: none; background: #fff; min-width: 0;
}
.search-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(200,36,35,.12); }
.search-box button {
height: 42px; padding: 0 22px; border: none;
background: var(--primary); color: #fff; font-size: 15px;
border-radius: 0 999px 999px 0; cursor: pointer;
transition: background .15s;
}
.search-box button:hover { background: var(--primary-dark); }
/* 联想下拉 */
.suggest {
position: absolute; top: 50px; left: 0; right: 0;
background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); overflow: hidden; z-index: 200;
}
.suggest a {
display: flex; justify-content: space-between; gap: 12px;
padding: 10px 14px; border-bottom: 1px solid var(--border);
color: var(--ink); font-size: 15px;
}
.suggest a:last-child { border-bottom: none; }
.suggest a:hover, .suggest a.active { background: var(--primary-soft); }
.suggest .s-pinyin { color: var(--ink-faint); font-size: 13px; }
/* ============ 首页 hero ============ */
.hero { text-align: center; padding: 48px 0 24px; }
.hero h1 {
font-family: var(--font-serif); font-size: 34px; font-weight: 700;
color: var(--ink); margin-bottom: 8px;
}
.hero-sub { color: var(--ink-soft); font-size: 16px; margin-bottom: 24px; }
.hero-sub strong { color: var(--primary); }
.hero-search { display: flex; max-width: 560px; margin: 0 auto; }
.hero-search input {
flex: 1; height: 50px; padding: 0 18px; font-size: 16px;
border: 1px solid var(--border); border-radius: var(--radius) 0 0 var(--radius);
outline: none; min-width: 0;
}
.hero-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(176,58,46,.12); }
.hero-search button {
height: 50px; padding: 0 28px; border: none; font-size: 16px;
background: var(--primary); color: #fff; border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer;
}
.hero-search button:hover { background: var(--primary-dark); }
/* ============ 卡片 ============ */
.card {
background: var(--card); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 24px 28px; margin-bottom: 20px;
}
.card h2 {
position: relative;
font-size: 20px; font-weight: 700; color: var(--ink);
padding-bottom: 10px; margin-bottom: 18px; line-height: 1.4;
}
/* 板块标题：细红色短下划线（替代旧竖线前缀） */
.card h2::after {
content: '';
position: absolute; left: 0; bottom: 0;
width: 40px; height: 3px; border-radius: 2px;
background: var(--primary);
}
/* ============ 拼音索引 ============ */
.letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.letter {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 10px 4px; border: 1px solid var(--border); border-radius: 8px;
color: var(--primary); font-size: 18px; font-weight: 700; background: #fff;
transition: all .15s;
}
.letter small { color: var(--ink-faint); font-size: 11px; font-weight: 400; }
.letter:hover { border-color: var(--primary); background: var(--primary-soft); }
.letter.empty { color: var(--ink-faint); pointer-events: none; }
/* ============ 热门成语 ============ */
.hot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.hot-item {
display: flex; flex-direction: column; gap: 4px;
padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px;
background: #fff; transition: all .15s;
}
.hot-item:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); }
.hot-word { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--ink); }
.hot-pinyin { font-size: 13px; color: var(--gold); }
.hot-expl { font-size: 13px; color: var(--ink-soft); }
/* ============ 面包屑 ============ */
.breadcrumb { padding: 16px 0 4px; font-size: 13px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li { color: var(--ink-faint); }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--ink-faint); }
/* ============ 详情页 ============ */
.detail-head { text-align: center; padding: 30px 0 12px; }
.detail-head h1 {
font-family: var(--font-serif); font-size: 44px; font-weight: 700;
color: var(--ink); margin-bottom: 8px; letter-spacing: 4px;
}
.detail-head .head-sub {
display: flex; align-items: center; justify-content: center; gap: 14px;
flex-wrap: wrap;
}
.pinyin { font-size: 18px; color: var(--ink-soft); letter-spacing: 3px; display: inline-flex; align-items: center; gap: 6px; }
/* 发音播放按钮（英汉词典） */
.pron-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
border: 1.5px solid var(--primary); background: var(--primary-soft);
color: var(--primary); font-size: 12px; font-weight: 700;
cursor: pointer; letter-spacing: 0; flex: none;
transition: background .15s, color .15s, transform .1s;
}
.pron-btn:hover { background: var(--primary); color: #fff; }
.pron-btn:active { transform: scale(.92); }
.pron-btn.playing { background: var(--primary); color: #fff; animation: pron-pulse 1s infinite; }
@keyframes pron-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 200), .4); }
50% { box-shadow: 0 0 0 6px rgba(var(--primary-rgb, 200), 0); }
}
/* 属性标签（红底白字圆角 badge） */
.tags {
display: flex; flex-wrap: wrap; gap: 12px;
justify-content: center; padding: 18px 0 8px;
}
.tag {
display: inline-flex; align-items: center; gap: 6px;
background: var(--primary); color: #fff; border-radius: 999px;
padding: 5px 16px; font-size: 14px; line-height: 1.5;
}
.tag-label { color: rgba(255,255,255,.82); font-size: 12px; }
.tag-value { color: #fff; font-weight: 600; font-size: 14px; }
.explanation { font-size: 18px; line-height: 1.9; }
.story { font-size: 15px; line-height: 1.9; color: var(--ink); }
/* 字段列表 */
.fields { display: flex; flex-direction: column; gap: 16px; }
.field { display: grid; grid-template-columns: 68px 1fr; gap: 14px; }
.field dt {
font-weight: 700; color: var(--primary); font-size: 15px;
padding-top: 2px;
}
.field dd { color: var(--ink); font-size: 15px; line-height: 1.75; }
.field dd.quote {
color: var(--ink-soft); background: var(--bg);
padding: 12px 16px; border-left: 3px solid var(--border); border-radius: 6px;
line-height: 1.75;
}
/* 近反义词 */
.syn-ant { margin-bottom: 12px; }
.syn-ant > strong { display: inline-block; width: 64px; color: var(--primary); font-size: 15px; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 8px; vertical-align: top; }
.chip {
padding: 4px 14px; background: var(--primary-soft); color: var(--primary);
border-radius: 999px; font-size: 14px; border: 1px solid transparent;
}
a.chip:hover { border-color: var(--primary); background: #fff; }
.chip.plain { background: #fff; border: 1px solid var(--border); color: var(--ink-soft); }
/* 带拼音的词条胶囊 */
.chip.chip-py {
display: inline-flex; flex-direction: column; align-items: center;
padding: 4px 14px 5px; line-height: 1.25; gap: 1px;
}
.chip-py .cp-word { font-size: 14px; font-weight: 600; color: var(--primary); }
.chip-py .cp-py { font-size: 11px; color: var(--ink-soft); font-weight: 400; letter-spacing: .2px; }
a.chip-py:hover .cp-word { color: var(--primary); }
/* 国语辞典（词语详情页：多义项 + 例证 + 近反义） */
.dict-revised { display: flex; flex-direction: column; gap: 18px; }
.dr-item { padding-bottom: 16px; border-bottom: 1px dashed var(--border); }
.dr-item:last-child { border-bottom: none; padding-bottom: 0; }
.dr-def { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dr-num {
color: #fff; background: var(--primary); font-size: 13px; font-weight: 700;
width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
align-items: center; justify-content: center; flex-shrink: 0;
}
.dr-text { font-size: 15px; line-height: 1.75; color: var(--ink); font-weight: 600; }
.dr-type {
font-size: 12px; color: var(--primary); background: var(--primary-soft);
padding: 1px 8px; border-radius: 4px; flex-shrink: 0;
}
.dr-quotes { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.dr-quote {
color: var(--ink-soft); background: var(--bg); font-size: 14px; line-height: 1.7;
padding: 8px 14px; border-left: 3px solid var(--border); border-radius: 4px;
}
.dr-examples { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.dr-example { font-size: 14px; line-height: 1.7; color: var(--ink-soft); padding-left: 14px; }
.dr-rel { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.dr-syn, .dr-ant { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dr-label {
font-size: 12px; color: var(--primary); border: 1px solid var(--primary);
border-radius: 4px; padding: 0 6px; flex-shrink: 0; line-height: 1.6;
}
.dr-link {
font-size: 14px; color: var(--primary); text-decoration: none;
border-bottom: 1px solid transparent;
}
.dr-link:hover { border-bottom-color: var(--primary); }
.dr-link.plain { color: var(--ink-soft); pointer-events: none; }
/* 分字组词 */
.char-groups { display: flex; flex-direction: column; gap: 14px; }
.cg-row { display: flex; align-items: flex-start; gap: 14px; }
.cg-head {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px;
background: var(--primary-soft); color: var(--primary);
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700;
}
.cg-row .chips { padding-top: 6px; }
/* 分字组词 tab 切换 */
.char-tabs { display: flex; gap: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.char-tabs .tab {
width: 40px; height: 40px; padding: 0; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 700; color: var(--ink-soft);
background: var(--bg); border: 1px solid var(--border);
border-bottom: none; margin-bottom: -1px; cursor: pointer;
transition: all .15s;
}
.char-tabs .tab:hover { color: var(--primary); border-color: var(--primary); }
.char-tabs .tab.active {
color: var(--primary); background: var(--primary-soft);
border-color: var(--primary); border-bottom-color: var(--primary-soft);
}
.char-tabs + .tab-panel { padding-top: 4px; }
/* 字典：义项列表 */
.sense-list { display: flex; flex-direction: column; gap: 14px; }
.sense { display: flex; flex-direction: column; gap: 4px; }
.sense-head { display: flex; align-items: center; gap: 10px; }
.sense-num {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
background: var(--primary-soft); color: var(--primary);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
}
.sense-title { font-weight: 700; color: var(--ink); font-size: 15px; }
.sense-pos {
display: inline-block; padding: 1px 10px; border-radius: 999px;
background: var(--primary-soft); color: var(--primary);
font-size: 12px; font-weight: 600; line-height: 1.6;
}
/* 双语例句 */
.example-list { display: flex; flex-direction: column; gap: 14px; }
.example { padding: 12px 16px; background: var(--bg); border-radius: 8px; border-left: 3px solid var(--border); }
.example-en { font-size: 15px; color: var(--ink); line-height: 1.7; font-weight: 500; }
.example-cn { font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin-top: 4px; }
.sense-body { font-size: 15px; color: var(--ink); line-height: 1.8; white-space: pre-line; }
/* 田字格汉字图（伪静态 SVG） */
.grid-figure {
display: flex; justify-content: center; align-items: center;
margin: 4px 0 20px; padding: 4px;
}
.grid-img {
max-width: 100%; height: auto;
border-radius: 10px;
}
/* 趣味延伸 */
.highlight { background: var(--primary-soft); }
.highlight p { margin-bottom: 6px; font-size: 15px; }
.highlight p:last-child { margin-bottom: 0; }
.gold { color: var(--gold); margin-right: 8px; }
.xhy-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.xhy-list li { font-size: 15px; line-height: 1.7; color: var(--ink); padding-left: 18px; position: relative; }
.xhy-list li::before { content: '◆'; position: absolute; left: 0; top: 0; color: var(--gold); font-size: 11px; }
/* 字义分解（等宽卡片网格：PC 一行4个，移动一行2个） */
.char-decompose {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
align-items: start;
}
.char-decompose > .char-item { min-width: 0; }
.char-item {
display: flex; flex-direction: column; gap: 10px;
background: #fff; border: 1px solid var(--border); border-radius: 12px;
padding: 16px 18px;
}
.char-glyph {
align-self: flex-start;
width: 54px; height: 54px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-serif); font-size: 34px; font-weight: 700; color: var(--ink);
border: 1.5px dashed var(--primary); border-radius: 10px;
background: var(--primary-soft);
}
.char-meta { min-width: 0; }
.char-pron { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; line-height: 1.7; }
.char-extra {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
margin-bottom: 6px;
}
.char-extra-item {
font-size: 12px; color: var(--gold);
background: #fbf6ec; border: 1px solid #ecdfc5; border-radius: 4px;
padding: 1px 7px; line-height: 1.6;
}
.char-extra-sep { color: var(--ink-faint); font-size: 12px; }
.char-shape { font-size: 13px; color: var(--ink-faint); margin-bottom: 6px; line-height: 1.7; }
.char-senses { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.char-sense { display: flex; gap: 8px; }
.char-sense.extra { display: none; }
.char-item.expanded .char-sense.extra { display: flex; }
.sn-num { flex: 0 0 auto; color: var(--primary); font-size: 14px; font-weight: 700; line-height: 1.75; }
.sn-body { flex: 1; min-width: 0; }
.sn-title { color: var(--ink); font-size: 15px; }
.sn-text { color: var(--ink-soft); font-size: 13px; display: block; line-height: 1.75; margin-top: 2px; }
.expand-sense {
align-self: flex-start;
margin-top: 6px; padding: 6px 16px; font-size: 13px;
color: var(--primary); background: #fff; border: 1px solid var(--primary);
border-radius: 999px; cursor: pointer;
transition: background .15s, color .15s;
}
.expand-sense:hover { background: var(--primary-soft); color: var(--primary-dark); }
.expand-sense:active { background: var(--primary); color: #fff; }
/* 接龙 tab */
.tabs { display: flex; gap: 8px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.tab {
padding: 9px 18px; background: none; border: none; cursor: pointer;
font-size: 15px; color: var(--ink-soft); border-bottom: 2px solid transparent;
margin-bottom: -1px; transition: color .15s;
}
.tab:hover { color: var(--primary); }
.tab.active { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); }
/* 成语接龙链 */
.jielong-chain {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px;
}
.jielong-node {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 10px 14px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
transition: all .15s; min-width: 82px;
}
.jielong-node:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); }
.jielong-node.current { border-color: var(--primary); background: var(--primary-soft); }
.jielong-node .jw { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--ink); }
.jielong-node.current .jw { color: var(--primary); }
.jielong-node .jp { font-size: 12px; color: var(--ink-faint); }
.jielong-arrow { color: #d5cfc4; font-size: 16px; font-weight: 400; }
.btn-regen {
padding: 7px 20px; font-size: 14px; cursor: pointer;
color: var(--primary); background: #fff; border: 1px solid var(--primary); border-radius: 999px;
transition: background .15s, color .15s;
}
.btn-regen:hover { background: var(--primary-soft); color: var(--primary-dark); }
.btn-regen:active { background: var(--primary); color: #fff; }
.btn-regen:disabled { opacity: .55; cursor: default; }
/* 相关成语 */
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.related-item {
display: flex; flex-direction: column; gap: 5px;
padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
transition: all .15s;
}
.related-item:hover {
border-color: var(--primary); box-shadow: var(--shadow);
transform: translateY(-2px);
}
.related-item .rw { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--ink); }
.related-item .rw-py { font-size: 12px; color: var(--ink-soft); letter-spacing: .2px; }
.related-item small { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
/* ============ 列表页 ============ */
.list-head { padding: 24px 0 8px; }
.list-head h1 { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.muted { color: var(--ink-soft); font-size: 14px; }
.result-list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.result-item {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.result-item:last-child { border-bottom: none; }
.result-item:hover { background: var(--primary-soft); }
.result-item .rw { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.result-item .rp { font-size: 13px; color: var(--gold); }
.result-item .re { font-size: 14px; color: var(--ink-soft); flex: 1 1 100%; }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 20px 0; }
.pager a {
padding: 6px 16px; border: 1px solid var(--border); border-radius: 6px;
color: var(--primary); background: #fff;
}
.pager a:hover { border-color: var(--primary); background: var(--primary-soft); }
.pager span { color: var(--ink-soft); font-size: 14px; }
/* ============ 空状态 / 404 ============ */
.empty { padding: 24px; color: var(--ink-soft); text-align: center; }
.not-found { text-align: center; padding: 60px 16px; }
.not-found h1 { font-family: var(--font-serif); font-size: 64px; color: var(--border); }
.not-found p { color: var(--ink-soft); margin: 12px 0 20px; }
.not-found .hero-search { margin-bottom: 20px; }
.back a { color: var(--primary); }
/* ============ 页脚 ============ */
.site-footer { background: var(--ink); color: #bdb8b0; margin-top: 40px; }
.footer-inner {
padding: 20px 16px; text-align: center;
display: flex; flex-direction: column; gap: 8px;
}
.footer-nav { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.footer-nav a { color: #d8d3cc; font-size: 14px; }
.footer-nav a:hover { color: #fff; }
/* 「本站还收录」：比页脚导航更弱的一层，只做可见性，不抢导航位置 */
.footer-hub {
display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
align-items: baseline; margin-top: 14px; padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer-hub .fh-label { font-size: 12px; color: #7d7873; }
.footer-hub a { font-size: 13px; color: #a8a29b; }
.footer-hub a:hover { color: #d8d3cc; }
.copyright { font-size: 13px; color: #8f8a83; }
/* ============ 响应式 ============ */
@media (max-width: 640px) {
.header-inner { gap: 12px; }
.nav { display: none; }
.search-box { flex-basis: 100%; max-width: none; order: 3; }
.detail-head h1 { font-size: 34px; letter-spacing: 2px; }
.hero h1 { font-size: 28px; }
.field { grid-template-columns: 1fr; gap: 4px; }
.field dt { padding-top: 0; }
.card { padding: 20px 18px; }
/* 移动端：字义分解 / 相关成语 一行2个 */
.char-decompose { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (min-width: 1024px) {
.container { padding: 0 24px; }
}
/* ====================================================================
站群视觉模板：新中式雅致书卷风（scroll）
仿古籍宣纸阅读界面，温润高级，国风不廉价
宣纸米黄底、墨红主色、墨棕辅助、思源宋体标题 / 思源楷体正文
==================================================================== */
html[data-template="scroll"] {
--primary: #7C2C24; /* 墨红 */
--primary-dark: #5E1F18;
--primary-soft: #F3E9DE; /* 淡墨暖棕底 */
--ink: #2C241C; /* 正文墨色 */
--ink-soft: #776B5D; /* 次要文字 */
--ink-faint: #A4967F; /* 辅助文字 */
--bg: #F7F3E9; /* 宣纸米黄 */
--card: #FFFBF4; /* 卡片笺纸 */
--border: #E4DCCB; /* 淡墨线 */
--gold: #A9712F; /* 古铜金（朱砂印章辅助） */
--radius: 10px;
--shadow: 0 1px 2px rgba(60,45,30,.05), 0 6px 18px rgba(90,68,40,.06);
--font-sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
/* 书卷专用字体（楷体正文） */
--font-kai: "KaiTi", "STKaiti", "FangSong", "STFangsong", "Noto Serif SC", serif;
}
html[data-template="scroll"] body {
font-family: var(--font-serif);
color: var(--ink);
/* 宣纸肌理：细腻竖纹 + 轻微噪点渐变 */
background-color: var(--bg);
background-image:
radial-gradient(circle at 12% 8%, rgba(122,44,36,.035) 0, transparent 32%),
radial-gradient(circle at 88% 22%, rgba(169,113,47,.028) 0, transparent 28%),
radial-gradient(circle at 18% 78%, rgba(122,44,36,.025) 0, transparent 30%),
radial-gradient(circle at 80% 90%, rgba(169,113,47,.03) 0, transparent 26%),
repeating-linear-gradient(90deg, rgba(120,100,70,.012) 0 1px, transparent 1px 3px);
line-height: 1.85;
letter-spacing: .02em;
}
/* 顶部导航：浅木纹质感（横向木纹纹理） */
html[data-template="scroll"] .site-header {
background:
linear-gradient(rgba(255,251,244,.88), rgba(255,251,244,.88)),
repeating-linear-gradient(0deg, rgba(122,68,40,.06) 0 1px, rgba(255,251,244,0) 1px 4px),
repeating-linear-gradient(90deg, rgba(122,68,40,.018) 0 2px, transparent 2px 9px);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 rgba(122,44,36,.08);
}
html[data-template="scroll"] .logo {
font-family: var(--font-serif);
font-size: 25px;
letter-spacing: 2px;
color: var(--primary);
}
html[data-template="scroll"] .nav a {
font-family: var(--font-serif);
color: var(--ink-soft);
letter-spacing: 1px;
}
html[data-template="scroll"] .nav a:hover {
color: var(--primary);
background: var(--primary-soft);
}
html[data-template="scroll"] .search-box input,
html[data-template="scroll"] .hero-search input {
background: #FFFDF8;
border-color: var(--border);
}
html[data-template="scroll"] .search-box input:focus,
html[data-template="scroll"] .hero-search input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(124,44,36,.10);
}
html[data-template="scroll"] .search-box button,
html[data-template="scroll"] .hero-search button {
background: var(--primary);
color: #FFFDF6;
font-family: var(--font-serif);
letter-spacing: 1px;
}
html[data-template="scroll"] .search-box button:hover,
html[data-template="scroll"] .hero-search button:hover {
background: var(--primary-dark);
}
/* 卡片：仿古籍笺纸（微暖白 + 淡墨描边 + 柔和暖光） */
html[data-template="scroll"] .card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
html[data-template="scroll"] .card h2 {
font-family: var(--font-serif);
font-size: 21px;
font-weight: 700;
color: var(--ink);
letter-spacing: 1px;
}
/* 板块标题：毛笔小字 + 细墨线 */
html[data-template="scroll"] .card h2::after {
content: '';
position: absolute; left: 0; bottom: 0;
width: 48px; height: 2px;
background: linear-gradient(90deg, var(--primary), rgba(124,44,36,0));
}
/* 详情页头部：书法大字 */
html[data-template="scroll"] .detail-head {
padding: 34px 0 14px;
}
html[data-template="scroll"] .detail-head h1 {
font-family: var(--font-serif);
font-size: 48px;
font-weight: 700;
color: var(--ink);
letter-spacing: 6px;
text-shadow: 0 1px 0 rgba(255,251,244,.8);
}
html[data-template="scroll"] .pinyin {
font-family: var(--font-serif);
color: var(--ink-soft);
letter-spacing: 4px;
}
/* 属性标签：仿古印章样式 */
html[data-template="scroll"] .tag {
background: linear-gradient(135deg, #8A3528, #7C2C24);
color: #FBF3E3;
border-radius: 6px;
padding: 6px 16px;
font-family: var(--font-serif);
font-size: 14px;
letter-spacing: 1px;
box-shadow: inset 0 0 0 1px rgba(255,251,244,.18), 0 2px 4px rgba(90,40,28,.14);
/* 印章式圆角（略方，似朱砂印） */
}
html[data-template="scroll"] .tag-label {
color: rgba(251,243,227,.72);
font-size: 12px;
letter-spacing: .5px;
}
html[data-template="scroll"] .tag-value {
color: #FBF3E3;
font-weight: 600;
}
/* 释义正文：楷体，书卷感 */
html[data-template="scroll"] .explanation {
font-family: var(--font-kai);
font-size: 18px;
line-height: 2;
color: var(--ink);
}
html[data-template="scroll"] .story {
font-family: var(--font-kai);
font-size: 15px;
line-height: 2;
}
html[data-template="scroll"] .field dd {
font-family: var(--font-serif);
color: var(--ink);
}
html[data-template="scroll"] .field dd.quote {
background: #FAF4E9;
border-left: 3px solid var(--primary);
color: var(--ink-soft);
font-family: var(--font-kai);
}
html[data-template="scroll"] .field dt {
color: var(--primary);
font-family: var(--font-serif);
}
/* 近反义词 chips */
html[data-template="scroll"] .chip {
background: var(--primary-soft);
color: var(--primary);
font-family: var(--font-serif);
}
html[data-template="scroll"] a.chip:hover {
border-color: var(--primary);
background: #fff;
}
/* 趣味延伸 */
html[data-template="scroll"] .highlight {
background: var(--primary-soft);
}
html[data-template="scroll"] .gold {
color: var(--gold);
}
/* 字义分解：仿古籍笺纸卡片（边角淡墨晕染） */
html[data-template="scroll"] .char-item {
background:
radial-gradient(circle at 100% 0, rgba(124,44,36,.045) 0, transparent 46%),
radial-gradient(circle at 0 100%, rgba(169,113,47,.04) 0, transparent 42%),
#FFFDF7;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow);
position: relative;
min-width: 0;
overflow-wrap: break-word;
}
/* 笺纸四角淡墨点 */
html[data-template="scroll"] .char-item::before {
content: '';
position: absolute; inset: 0;
border-radius: 8px;
background:
radial-gradient(circle at 0 0, rgba(124,44,36,.08) 0, transparent 18%),
radial-gradient(circle at 100% 100%, rgba(124,44,36,.07) 0, transparent 18%);
pointer-events: none;
}
html[data-template="scroll"] .char-glyph {
border: 1px solid rgba(124,44,36,.35);
border-radius: 6px;
background: var(--primary-soft);
color: var(--primary);
font-family: var(--font-serif);
box-shadow: inset 0 0 0 3px #FFFDF7;
}
html[data-template="scroll"] .char-extra-item {
color: var(--gold);
background: #FBF5E8;
border: 1px solid #EADCC0;
font-family: var(--font-serif);
}
html[data-template="scroll"] .sn-num {
color: var(--primary);
font-family: var(--font-serif);
}
html[data-template="scroll"] .sn-text {
font-family: var(--font-serif);
}
html[data-template="scroll"] .expand-sense {
font-family: var(--font-serif);
border-color: var(--primary);
color: var(--primary);
border-radius: 6px;
}
html[data-template="scroll"] .expand-sense:hover {
background: var(--primary-soft);
color: var(--primary-dark);
}
html[data-template="scroll"] .expand-sense:active {
background: var(--primary);
color: #FFFDF6;
}
/* 接龙 tab */
html[data-template="scroll"] .tab {
font-family: var(--font-serif);
color: var(--ink-soft);
border-bottom: 2px solid transparent;
}
html[data-template="scroll"] .tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
/* 成语接龙：卷轴式 + 毛笔笔锋箭头 */
html[data-template="scroll"] .jielong-node {
background: #FFFDF7;
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 1px 2px rgba(90,68,40,.06);
}
html[data-template="scroll"] .jielong-node .jw {
font-family: var(--font-serif);
color: var(--ink);
}
html[data-template="scroll"] .jielong-node.current {
border-color: var(--primary);
background: var(--primary-soft);
}
html[data-template="scroll"] .jielong-node.current .jw {
color: var(--primary);
}
/* 毛笔笔锋箭头：用渐变的墨迹箭头符号 */
html[data-template="scroll"] .jielong-arrow {
color: var(--primary);
font-family: var(--font-serif);
opacity: .55;
font-size: 15px;
}
html[data-template="scroll"] .btn-regen {
font-family: var(--font-serif);
border-color: var(--primary);
color: var(--primary);
border-radius: 6px;
}
html[data-template="scroll"] .btn-regen:hover {
background: var(--primary-soft);
color: var(--primary-dark);
}
/* 相关成语：笺纸小卡片，hover 浮现淡朱砂印章 */
html[data-template="scroll"] .related-item {
background: #FFFDF7;
border: 1px solid var(--border);
border-radius: 8px;
position: relative;
transition: transform .15s, border-color .15s, box-shadow .15s;
}
html[data-template="scroll"] .related-item:hover {
border-color: rgba(124,44,36,.5);
box-shadow: 0 4px 16px rgba(90,68,40,.10);
transform: translateY(-2px);
}
/* hover 浮现淡朱砂印章 */
html[data-template="scroll"] .related-item::after {
content: '';
position: absolute; right: 10px; bottom: 10px;
width: 16px; height: 16px;
border: 1.5px solid rgba(124,44,36,.45);
border-radius: 3px;
opacity: 0;
transform: scale(.7) rotate(-6deg);
transition: opacity .18s, transform .18s;
}
html[data-template="scroll"] .related-item:hover::after {
opacity: .55;
transform: scale(1) rotate(-6deg);
}
html[data-template="scroll"] .related-item .rw {
font-family: var(--font-serif);
}
/* 热门成语（首页） */
html[data-template="scroll"] .hot-item {
background: #FFFDF7;
border: 1px solid var(--border);
border-radius: 8px;
}
html[data-template="scroll"] .hot-item:hover {
border-color: rgba(124,44,36,.5);
box-shadow: var(--shadow);
}
html[data-template="scroll"] .hot-word {
font-family: var(--font-serif);
}
html[data-template="scroll"] .hot-pinyin {
color: var(--gold);
}
/* 拼音索引字母 */
html[data-template="scroll"] .letter {
font-family: var(--font-serif);
border-color: var(--border);
color: var(--primary);
}
html[data-template="scroll"] .letter:hover {
border-color: var(--primary);
background: var(--primary-soft);
}
/* 首页 hero */
html[data-template="scroll"] .hero h1 {
font-family: var(--font-serif);
letter-spacing: 3px;
}
/* 列表页 */
html[data-template="scroll"] .result-list {
background: var(--card);
border: 1px solid var(--border);
}
html[data-template="scroll"] .result-item .rw {
font-family: var(--font-serif);
color: var(--primary);
}
html[data-template="scroll"] .result-item .rp {
color: var(--gold);
}
/* 页脚：暖木深色 */
html[data-template="scroll"] .site-footer {
background: #2C241C;
color: #C8BEA8;
}
html[data-template="scroll"] .copyright {
color: #9B9077;
font-family: var(--font-serif);
}
/* 焦点可见 */
html[data-template="scroll"] a:focus-visible,
html[data-template="scroll"] button:focus-visible,
html[data-template="scroll"] input:focus-visible {
outline-color: var(--primary);
}
/* ============================================================
暗黑极简静谧阅读风（night）—— 夜间护眼深色主题
琥珀金 #f59e0b 主色，低对比度、弱光晕、极简克制
============================================================ */
html[data-template="night"] {
--primary: #F59E0B; /* 暖琥珀金 */
--primary-dark: #D97706;
--primary-soft: #2A2317; /* 暗金底（按钮hover/淡金边框） */
--ink: #E5E7EB; /* 正文 */
--ink-soft: #9CA3AF; /* 次要文字 */
--ink-faint: #6B7280; /* 辅助文字 */
--bg: #12161D; /* 页面深底 */
--card: #1B212B; /* 卡片深色 */
--border: #2A313C; /* 极简分隔线 */
--gold: #F59E0B;
--radius: 12px;
--shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.35);
--font-sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
}
html[data-template="night"] body {
font-family: var(--font-sans);
color: var(--ink);
background-color: var(--bg);
/* 低噪点深色肌理 + 微弱径向光晕 */
background-image:
radial-gradient(circle at 50% -10%, rgba(245,158,11,.04) 0, transparent 42%),
radial-gradient(circle at 88% 30%, rgba(245,158,11,.022) 0, transparent 30%),
radial-gradient(circle at 12% 80%, rgba(120,140,170,.03) 0, transparent 34%);
line-height: 1.75;
letter-spacing: .01em;
}
/* 链接色 */
html[data-template="night"] a { color: var(--primary); }
html[data-template="night"] a:hover { color: var(--primary-dark); }
/* 顶部导航：深色悬浮 + 弱发光下边界 */
html[data-template="night"] .site-header {
background: rgba(18,22,29,.86);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 rgba(245,158,11,.06), 0 6px 18px rgba(0,0,0,.28);
}
html[data-template="night"] .logo {
color: var(--primary);
letter-spacing: 1px;
}
html[data-template="night"] .nav a {
color: var(--ink-soft);
}
html[data-template="night"] .nav a:hover {
color: var(--primary);
background: var(--primary-soft);
}
/* 搜索框：弱发光 */
html[data-template="night"] .search-box input,
html[data-template="night"] .hero-search input {
background: var(--card);
border-color: var(--border);
color: var(--ink);
}
html[data-template="night"] .search-box input::placeholder,
html[data-template="night"] .hero-search input::placeholder {
color: var(--ink-faint);
}
html[data-template="night"] .search-box input:focus,
html[data-template="night"] .hero-search input:focus {
border-color: rgba(245,158,11,.6);
box-shadow: 0 0 0 3px rgba(245,158,11,.12), 0 0 12px rgba(245,158,11,.12);
}
html[data-template="night"] .search-box button,
html[data-template="night"] .hero-search button {
background: var(--primary);
color: #1B1204;
font-weight: 600;
}
html[data-template="night"] .search-box button:hover,
html[data-template="night"] .hero-search button:hover {
background: var(--primary-dark);
}
/* 联想下拉 */
html[data-template="night"] .suggest {
background: var(--card);
border-color: var(--border);
box-shadow: var(--shadow);
}
html[data-template="night"] .suggest a {
color: var(--ink);
border-bottom-color: var(--border);
}
html[data-template="night"] .suggest a:hover,
html[data-template="night"] .suggest a.active {
background: var(--primary-soft);
}
html[data-template="night"] .suggest .s-pinyin { color: var(--ink-faint); }
/* 卡片：深色 + 细发光轮廓 + 微弱内发光 */
html[data-template="night"] .card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.02);
}
html[data-template="night"] .card h2 {
color: var(--ink);
font-weight: 700;
}
/* 板块标题：金色文字 + 细发光横线 */
html[data-template="night"] .card h2::after {
content: '';
position: absolute; left: 0; bottom: 0;
width: 48px; height: 2px;
background: linear-gradient(90deg, var(--primary), rgba(245,158,11,0));
box-shadow: 0 0 10px rgba(245,158,11,.7), 0 0 20px rgba(245,158,11,.35);
}
/* 详情页头部：暖金色主标题 */
html[data-template="night"] .detail-head {
padding: 32px 0 14px;
}
html[data-template="night"] .detail-head h1 {
color: var(--primary);
font-weight: 700;
letter-spacing: 3px;
text-shadow: 0 0 22px rgba(245,158,11,.22);
}
html[data-template="night"] .pinyin {
color: var(--ink-soft);
letter-spacing: 3px;
}
/* 属性标签：深色底 + 金色描边 */
html[data-template="night"] .tag {
background: var(--card);
color: var(--ink);
border: 1px solid rgba(245,158,11,.38);
border-radius: 8px;
padding: 6px 16px;
box-shadow: inset 0 0 0 1px rgba(245,158,11,.06);
}
html[data-template="night"] .tag-label {
color: var(--ink-faint);
}
html[data-template="night"] .tag-value {
color: var(--primary);
font-weight: 600;
}
/* 释义正文 */
html[data-template="night"] .explanation {
color: var(--ink);
}
html[data-template="night"] .story {
color: var(--ink);
}
html[data-template="night"] .field dt {
color: var(--primary);
}
html[data-template="night"] .field dd {
color: var(--ink);
}
html[data-template="night"] .field dd.quote {
background: #161C25;
border-left: 3px solid var(--primary);
color: var(--ink-soft);
}
/* 近反义词 chips */
html[data-template="night"] .chip {
background: var(--primary-soft);
color: var(--primary);
border-color: rgba(245,158,11,.22);
}
html[data-template="night"] a.chip:hover {
border-color: var(--primary);
background: #241B0E;
}
html[data-template="night"] .chip.plain {
background: var(--card);
border-color: var(--border);
color: var(--ink-soft);
}
/* 趣味延伸 */
html[data-template="night"] .highlight {
background: var(--primary-soft);
}
html[data-template="night"] .gold { color: var(--gold); }
/* 字义分解卡片：深色 + 琥珀色柔光边框 */
html[data-template="night"] .char-item {
background: var(--card);
border: 1px solid rgba(245,158,11,.18);
border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(245,158,11,.03);
min-width: 0;
overflow-wrap: break-word;
}
html[data-template="night"] .char-glyph {
background: #141A22;
border: 1px solid rgba(245,158,11,.28);
color: var(--primary);
box-shadow: 0 0 12px rgba(245,158,11,.08);
}
html[data-template="night"] .char-pron { color: var(--ink-soft); }
html[data-template="night"] .char-extra-item {
color: var(--gold);
background: #221A0C;
border: 1px solid rgba(245,158,11,.22);
}
html[data-template="night"] .char-shape { color: var(--ink-soft); }
html[data-template="night"] .sn-num { color: var(--primary); }
html[data-template="night"] .sn-title { color: var(--ink); }
html[data-template="night"] .sn-text { color: #AEB4BC; }
html[data-template="night"] .expand-sense {
border-color: rgba(245,158,11,.5);
color: var(--primary);
border-radius: 8px;
}
html[data-template="night"] .expand-sense:hover {
background: var(--primary-soft);
color: var(--primary);
}
html[data-template="night"] .expand-sense:active {
background: var(--primary);
color: #1B1204;
}
/* 接龙 tab */
html[data-template="night"] .tab {
color: var(--ink-soft);
border-bottom: 2px solid transparent;
}
html[data-template="night"] .tab:hover { color: var(--primary); }
html[data-template="night"] .tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
/* 成语接龙：暗色胶囊卡片 + 暖金箭头 */
html[data-template="night"] .jielong-node {
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
html[data-template="night"] .jielong-node:hover {
border-color: rgba(245,158,11,.5);
box-shadow: 0 0 14px rgba(245,158,11,.10);
}
html[data-template="night"] .jielong-node .jw { color: var(--ink); }
html[data-template="night"] .jielong-node.current {
border-color: rgba(245,158,11,.55);
background: #241B0E;
}
html[data-template="night"] .jielong-node.current .jw { color: var(--primary); }
html[data-template="night"] .jielong-node .jp { color: var(--ink-faint); }
html[data-template="night"] .jielong-arrow {
color: var(--primary);
opacity: .6;
}
html[data-template="night"] .btn-regen {
border-color: rgba(245,158,11,.5);
color: var(--primary);
border-radius: 8px;
}
html[data-template="night"] .btn-regen:hover {
background: var(--primary-soft);
color: var(--primary);
}
/* 相关成语：深色卡片，hover 边框微光提亮 */
html[data-template="night"] .related-item {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
transition: transform .15s, border-color .15s, box-shadow .15s;
}
html[data-template="night"] .related-item:hover {
border-color: rgba(245,158,11,.55);
box-shadow: 0 0 18px rgba(245,158,11,.14), 0 6px 18px rgba(0,0,0,.35);
transform: translateY(-2px);
}
html[data-template="night"] .related-item .rw { color: var(--ink); }
html[data-template="night"] .related-item small { color: var(--ink-soft); }
/* 首页 hero */
html[data-template="night"] .hero h1 {
color: var(--ink);
}
html[data-template="night"] .hero-sub { color: var(--ink-soft); }
html[data-template="night"] .hero-sub strong { color: var(--primary); }
/* 拼音索引字母 */
html[data-template="night"] .letter {
background: var(--card);
border-color: var(--border);
color: var(--ink);
}
html[data-template="night"] .letter small { color: var(--ink-faint); }
html[data-template="night"] .letter:hover {
border-color: rgba(245,158,11,.55);
color: var(--primary);
background: var(--primary-soft);
}
html[data-template="night"] .letter.empty { color: var(--ink-faint); }
/* 热门成语（首页） */
html[data-template="night"] .hot-item {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
}
html[data-template="night"] .hot-item:hover {
border-color: rgba(245,158,11,.5);
box-shadow: 0 0 14px rgba(245,158,11,.10);
transform: translateY(-1px);
}
html[data-template="night"] .hot-word { color: var(--ink); }
html[data-template="night"] .hot-pinyin { color: var(--gold); }
/* 列表页 */
html[data-template="night"] .result-list {
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
html[data-template="night"] .result-item {
border-bottom-color: var(--border);
}
html[data-template="night"] .result-item:hover { background: var(--primary-soft); }
html[data-template="night"] .result-item .rw { color: var(--primary); }
html[data-template="night"] .result-item .rp { color: var(--gold); }
html[data-template="night"] .result-item .re { color: var(--ink-soft); }
/* 页脚：更深的底 */
html[data-template="night"] .site-footer {
background: #0D1116;
border-top: 1px solid var(--border);
}
html[data-template="night"] .copyright {
color: var(--ink-faint);
}
/* 焦点可见 */
html[data-template="night"] a:focus-visible,
html[data-template="night"] button:focus-visible,
html[data-template="night"] input:focus-visible {
outline-color: var(--primary);
}
/* ============================================================
活泼柔和轻孟菲斯风（memphis）—— 面向学生/小学生群体
珊瑚橘 #f27166 主色，马卡龙柔和配色，圆润泡泡感，低刺激
============================================================ */
html[data-template="memphis"] {
--primary: #F27166; /* 珊瑚橘 */
--primary-dark: #E05A4D;
--primary-soft: #FDECE8; /* 浅橘底 */
--ink: #2D2D2D; /* 正文 */
--ink-soft: #787878; /* 次要文字 */
--ink-faint: #A9A9A9; /* 辅助文字 */
--bg: #FFFBF8; /* 页面奶白底 */
--card: #FFFFFF;
--border: #F1E6DF; /* 柔和暖边 */
--gold: #58A6FF; /* 浅蓝（辅助点缀） */
--radius: 18px; /* 超大圆角 */
--shadow: 0 2px 6px rgba(242,113,102,.08), 0 10px 28px rgba(242,113,102,.10);
--font-sans: "ZCOOL KuaiLe", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-serif: "ZCOOL KuaiLe", "Source Han Serif SC", "Songti SC", serif;
/* 浅绿辅助色变量 */
--accent-green: #94D890;
--accent-blue: #58A6FF;
}
html[data-template="memphis"] body {
font-family: var(--font-sans);
color: var(--ink);
background-color: var(--bg);
/* 柔和几何点缀：低饱和淡色块 + 圆点肌理 */
background-image:
radial-gradient(circle at 8% 6%, rgba(88,166,255,.06) 0, transparent 24%),
radial-gradient(circle at 92% 18%, rgba(242,113,102,.07) 0, transparent 26%),
radial-gradient(circle at 14% 84%, rgba(148,216,144,.07) 0, transparent 26%),
radial-gradient(circle at 84% 88%, rgba(242,113,102,.05) 0, transparent 24%),
radial-gradient(circle at 50% 50%, rgba(88,166,255,.02) 0, transparent 40%);
line-height: 1.8;
}
/* 链接 */
html[data-template="memphis"] a { color: var(--primary); }
html[data-template="memphis"] a:hover { color: var(--primary-dark); }
/* 顶部导航：圆角 + 柔和 */
html[data-template="memphis"] .site-header {
background: rgba(255,251,248,.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--border);
box-shadow: 0 2px 14px rgba(242,113,102,.08);
}
html[data-template="memphis"] .logo {
color: var(--primary);
letter-spacing: 1px;
}
html[data-template="memphis"] .nav a {
color: var(--ink-soft);
border-radius: 999px;
letter-spacing: .5px;
}
html[data-template="memphis"] .nav a:hover {
color: var(--primary);
background: var(--primary-soft);
}
/* 搜索框：可爱圆角 */
html[data-template="memphis"] .search-box input,
html[data-template="memphis"] .hero-search input {
background: #fff;
border-color: var(--border);
border-radius: 999px;
color: var(--ink);
}
html[data-template="memphis"] .search-box input:focus,
html[data-template="memphis"] .hero-search input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(242,113,102,.12);
}
html[data-template="memphis"] .search-box button,
html[data-template="memphis"] .hero-search button {
background: var(--primary);
color: #fff;
border-radius: 999px;
font-weight: 600;
}
html[data-template="memphis"] .search-box button:hover,
html[data-template="memphis"] .hero-search button:hover {
background: var(--primary-dark);
}
/* 联想下拉 */
html[data-template="memphis"] .suggest {
background: #fff;
border-color: var(--border);
border-radius: 16px;
box-shadow: var(--shadow);
}
html[data-template="memphis"] .suggest a {
color: var(--ink);
border-bottom-color: var(--border);
}
html[data-template="memphis"] .suggest a:hover,
html[data-template="memphis"] .suggest a.active {
background: var(--primary-soft);
}
html[data-template="memphis"] .suggest .s-pinyin { color: var(--ink-faint); }
/* 卡片：超大圆角 + 软阴影泡泡感 */
html[data-template="memphis"] .card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
html[data-template="memphis"] .card h2 {
color: var(--ink);
font-weight: 700;
letter-spacing: .5px;
}
/* 板块标题：前面配小圆形装饰点 */
html[data-template="memphis"] .card h2::before {
content: '';
display: inline-block;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--primary);
margin-right: 10px;
vertical-align: -1px;
box-shadow: 0 0 0 4px rgba(242,113,102,.14);
}
/* 详情页头部：粗圆体大字 */
html[data-template="memphis"] .detail-head {
padding: 34px 0 14px;
}
html[data-template="memphis"] .detail-head h1 {
color: var(--ink);
font-weight: 700;
letter-spacing: 3px;
}
html[data-template="memphis"] .pinyin {
color: var(--ink-soft);
letter-spacing: 3px;
}
/* 属性标签：彩色圆角泡泡标签 */
html[data-template="memphis"] .tag {
background: #fff;
color: var(--ink);
border: 1px solid var(--border);
border-radius: 999px;
padding: 6px 16px;
box-shadow: 0 2px 6px rgba(242,113,102,.08);
}
html[data-template="memphis"] .tag:nth-child(3n+1) { border-color: rgba(242,113,102,.30); background: #FFF4F1; }
html[data-template="memphis"] .tag:nth-child(3n+2) { border-color: rgba(88,166,255,.30); background: #F1F7FF; }
html[data-template="memphis"] .tag:nth-child(3n) { border-color: rgba(148,216,144,.35); background: #F3FAF2; }
html[data-template="memphis"] .tag-label {
color: var(--ink-faint);
}
html[data-template="memphis"] .tag-value {
color: var(--primary);
font-weight: 700;
}
/* 释义正文 */
html[data-template="memphis"] .explanation { color: var(--ink); }
html[data-template="memphis"] .story { color: var(--ink); }
html[data-template="memphis"] .field dt { color: var(--primary); }
html[data-template="memphis"] .field dd { color: var(--ink); }
html[data-template="memphis"] .field dd.quote {
background: #FFF7F4;
border-left: 3px solid var(--primary);
color: var(--ink-soft);
}
/* 近反义词 chips：彩色圆角 */
html[data-template="memphis"] .chip {
background: var(--primary-soft);
color: var(--primary);
border-radius: 999px;
border-color: rgba(242,113,102,.22);
}
html[data-template="memphis"] a.chip:hover {
border-color: var(--primary);
background: #FFE8E3;
}
html[data-template="memphis"] .chip.plain {
background: #fff;
border-color: var(--border);
color: var(--ink-soft);
}
/* 趣味延伸 */
html[data-template="memphis"] .highlight { background: var(--primary-soft); }
html[data-template="memphis"] .gold { color: var(--gold); }
/* 字义分解卡片：超大圆角 + 角落淡彩小弧线 */
html[data-template="memphis"] .char-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 22px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
min-width: 0;
overflow-wrap: break-word;
}
/* 角落淡彩色小弧线装饰 */
html[data-template="memphis"] .char-item::before {
content: '';
position: absolute; top: -22px; right: -22px;
width: 56px; height: 56px;
border-radius: 50%;
border: 6px solid rgba(88,166,255,.12);
pointer-events: none;
}
html[data-template="memphis"] .char-item::after {
content: '';
position: absolute; bottom: -18px; left: -18px;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(148,216,144,.14);
pointer-events: none;
}
html[data-template="memphis"] .char-glyph {
background: #FFF3F0;
border: 2px solid rgba(242,113,102,.28);
border-radius: 14px;
color: var(--primary);
}
html[data-template="memphis"] .char-pron { color: var(--ink-soft); }
html[data-template="memphis"] .char-extra-item {
color: var(--accent-blue);
background: #F1F7FF;
border: 1px solid rgba(88,166,255,.25);
border-radius: 999px;
}
html[data-template="memphis"] .char-shape { color: var(--ink-faint); }
html[data-template="memphis"] .sn-num { color: var(--primary); }
html[data-template="memphis"] .sn-title { color: var(--ink); }
html[data-template="memphis"] .sn-text { color: var(--ink-soft); }
html[data-template="memphis"] .expand-sense {
border-color: rgba(242,113,102,.5);
color: var(--primary);
border-radius: 999px;
}
html[data-template="memphis"] .expand-sense:hover {
background: var(--primary-soft);
color: var(--primary-dark);
}
html[data-template="memphis"] .expand-sense:active {
background: var(--primary);
color: #fff;
}
/* 接龙 tab */
html[data-template="memphis"] .tab {
color: var(--ink-soft);
border-bottom: 2px solid transparent;
}
html[data-template="memphis"] .tab:hover { color: var(--primary); }
html[data-template="memphis"] .tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
/* 成语接龙：彩色圆角胶囊卡片 + 圆润箭头 */
html[data-template="memphis"] .jielong-node {
background: #fff;
border: 1px solid var(--border);
border-radius: 999px;
box-shadow: 0 2px 6px rgba(242,113,102,.08);
}
html[data-template="memphis"] .jielong-node:hover {
border-color: var(--primary);
box-shadow: 0 4px 12px rgba(242,113,102,.14);
transform: translateY(-1px);
}
html[data-template="memphis"] .jielong-node .jw { color: var(--ink); }
html[data-template="memphis"] .jielong-node.current {
border-color: var(--primary);
background: var(--primary-soft);
}
html[data-template="memphis"] .jielong-node.current .jw { color: var(--primary); }
html[data-template="memphis"] .jielong-node .jp { color: var(--ink-faint); }
html[data-template="memphis"] .jielong-arrow {
color: var(--primary);
opacity: .6;
font-size: 16px;
}
html[data-template="memphis"] .btn-regen {
border-color: rgba(242,113,102,.5);
color: var(--primary);
border-radius: 999px;
}
html[data-template="memphis"] .btn-regen:hover {
background: var(--primary-soft);
color: var(--primary-dark);
}
/* 相关成语：圆角卡片，hover 淡彩色底 */
html[data-template="memphis"] .related-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
}
html[data-template="memphis"] .related-item:hover {
background: #FFF4F1;
border-color: rgba(242,113,102,.35);
box-shadow: 0 6px 16px rgba(242,113,102,.12);
transform: translateY(-2px);
}
html[data-template="memphis"] .related-item .rw { color: var(--ink); }
html[data-template="memphis"] .related-item small { color: var(--ink-soft); }
/* 首页 hero */
html[data-template="memphis"] .hero h1 { color: var(--ink); }
html[data-template="memphis"] .hero-sub { color: var(--ink-soft); }
html[data-template="memphis"] .hero-sub strong { color: var(--primary); }
/* 拼音索引字母：彩色圆角格 */
html[data-template="memphis"] .letter {
background: #fff;
border-color: var(--border);
border-radius: 14px;
color: var(--ink);
}
html[data-template="memphis"] .letter small { color: var(--ink-faint); }
html[data-template="memphis"] .letter:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-soft);
}
html[data-template="memphis"] .letter.empty { color: var(--ink-faint); }
/* 热门成语（首页） */
html[data-template="memphis"] .hot-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
}
html[data-template="memphis"] .hot-item:hover {
border-color: rgba(242,113,102,.35);
background: #FFF4F1;
box-shadow: 0 6px 16px rgba(242,113,102,.12);
transform: translateY(-1px);
}
html[data-template="memphis"] .hot-word { color: var(--ink); }
html[data-template="memphis"] .hot-pinyin { color: var(--accent-blue); }
/* 列表页 */
html[data-template="memphis"] .result-list {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
html[data-template="memphis"] .result-item { border-bottom-color: var(--border); }
html[data-template="memphis"] .result-item:hover { background: var(--primary-soft); }
html[data-template="memphis"] .result-item .rw { color: var(--primary); }
html[data-template="memphis"] .result-item .rp { color: var(--accent-blue); }
html[data-template="memphis"] .result-item .re { color: var(--ink-soft); }
/* 页脚 */
html[data-template="memphis"] .site-footer {
background: #2D2D2D;
color: #D8D2CE;
}
html[data-template="memphis"] .copyright { color: #A9A29D; }
/* 焦点可见 */
html[data-template="memphis"] a:focus-visible,
html[data-template="memphis"] button:focus-visible,
html[data-template="memphis"] input:focus-visible {
outline-color: var(--primary);
}
/* ============================================================
日系清新动漫风（anime）—— 治愈校园二次元轻质感
浅紫蓝 #7289da 主色 + 淡樱粉 #ffb8c2 辅助，低饱和柔和，克制不花哨
============================================================ */
html[data-template="anime"] {
--primary: #7289DA; /* 浅紫蓝 */
--primary-dark: #5B6FC4;
--primary-soft: #EEF1FC; /* 淡紫蓝底 */
--ink: #2B2B2B; /* 正文 */
--ink-soft: #777777; /* 次要文字 */
--ink-faint: #A8A8B8; /* 辅助文字 */
--bg: #F8FAFF; /* 页面淡蓝白底 */
--card: #FFFFFF;
--border: #E8ECF7; /* 淡蓝灰边 */
--gold: #FFB8C2; /* 淡樱粉（辅助点缀） */
--radius: 20px; /* 云朵大圆角 */
--shadow: 0 2px 8px rgba(114,137,218,.08), 0 12px 32px rgba(114,137,218,.10);
--font-sans: "Alibaba PuHuiTi", "Alibaba PuHuiTi 2.0", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-serif: "Alibaba PuHuiTi", "Source Han Serif SC", "Songti SC", serif;
/* 淡樱粉辅助色变量 */
--accent-pink: #FFB8C2;
--accent-blue: #7289DA;
}
html[data-template="anime"] body {
font-family: var(--font-sans);
color: var(--ink);
background-color: var(--bg);
/* 柔和水彩噪点 + 柔和渐变光晕 + 淡樱花暗纹 */
background-image:
radial-gradient(circle at 12% 4%, rgba(255,184,194,.10) 0, transparent 26%),
radial-gradient(circle at 90% 12%, rgba(114,137,218,.09) 0, transparent 28%),
radial-gradient(circle at 8% 86%, rgba(114,137,218,.08) 0, transparent 26%),
radial-gradient(circle at 88% 90%, rgba(255,184,194,.09) 0, transparent 24%),
radial-gradient(circle at 50% 50%, rgba(255,255,255,.4) 0, transparent 50%);
line-height: 1.8;
letter-spacing: .01em;
}
/* 链接 */
html[data-template="anime"] a { color: var(--primary); }
html[data-template="anime"] a:hover { color: var(--primary-dark); }
/* 顶部导航：圆润圆角 + 柔和渐变 */
html[data-template="anime"] .site-header {
background: rgba(248,250,255,.88);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
box-shadow: 0 2px 16px rgba(114,137,218,.08);
}
html[data-template="anime"] .logo {
color: var(--primary);
letter-spacing: 1px;
}
html[data-template="anime"] .nav a {
color: var(--ink-soft);
border-radius: 999px;
letter-spacing: .5px;
}
html[data-template="anime"] .nav a:hover {
color: var(--primary);
background: var(--primary-soft);
}
/* 搜索框：柔和渐变 */
html[data-template="anime"] .search-box input,
html[data-template="anime"] .hero-search input {
background: #fff;
border-color: var(--border);
border-radius: 999px;
color: var(--ink);
}
html[data-template="anime"] .search-box input:focus,
html[data-template="anime"] .hero-search input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(114,137,218,.12);
}
html[data-template="anime"] .search-box button,
html[data-template="anime"] .hero-search button {
background: linear-gradient(135deg, #8496E4, #7289DA);
color: #fff;
border-radius: 999px;
font-weight: 600;
}
html[data-template="anime"] .search-box button:hover,
html[data-template="anime"] .hero-search button:hover {
background: linear-gradient(135deg, #7289DA, #5B6FC4);
}
/* 联想下拉 */
html[data-template="anime"] .suggest {
background: #fff;
border-color: var(--border);
border-radius: 18px;
box-shadow: var(--shadow);
}
html[data-template="anime"] .suggest a {
color: var(--ink);
border-bottom-color: var(--border);
}
html[data-template="anime"] .suggest a:hover,
html[data-template="anime"] .suggest a.active {
background: var(--primary-soft);
}
html[data-template="anime"] .suggest .s-pinyin { color: var(--ink-faint); }
/* 卡片：云朵大圆角 + 软阴影 */
html[data-template="anime"] .card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
html[data-template="anime"] .card h2 {
color: var(--ink);
font-weight: 700;
letter-spacing: .5px;
}
/* 板块标题：前方配小小书本简绘图标（CSS 绘制，避免 emoji 字体缺失变方块） */
html[data-template="anime"] .card h2 {
position: relative;
padding-left: 36px;
}
html[data-template="anime"] .card h2::before {
content: '';
position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
width: 22px; height: 17px;
border-radius: 3px;
background: linear-gradient(135deg, #8496E4, #7289DA);
box-shadow: 0 2px 5px rgba(114,137,218,.30);
}
/* 书脊中线 */
html[data-template="anime"] .card h2::after {
content: '';
position: absolute; left: 5px; top: 50%;
transform: translateY(-50%);
width: 2px; height: 11px;
border-radius: 1px;
background: #fff;
}
/* 详情页头部：大字圆润标题 */
html[data-template="anime"] .detail-head {
padding: 34px 0 14px;
}
html[data-template="anime"] .detail-head h1 {
color: var(--ink);
font-weight: 700;
letter-spacing: 3px;
}
html[data-template="anime"] .pinyin {
color: var(--ink-soft);
letter-spacing: 3px;
}
/* 属性标签：淡渐变胶囊圆角标签 */
html[data-template="anime"] .tag {
background: #fff;
color: var(--ink);
border: 1px solid var(--border);
border-radius: 999px;
padding: 6px 16px;
box-shadow: 0 2px 8px rgba(114,137,218,.08);
}
html[data-template="anime"] .tag:nth-child(3n+1) { border-color: rgba(114,137,218,.28); background: linear-gradient(135deg, #F2F5FF, #FBFBFE); }
html[data-template="anime"] .tag:nth-child(3n+2) { border-color: rgba(255,184,194,.35); background: linear-gradient(135deg, #FFF4F6, #FFFBFB); }
html[data-template="anime"] .tag:nth-child(3n) { border-color: rgba(114,137,218,.20); background: linear-gradient(135deg, #F7F9FF, #FDFDFF); }
html[data-template="anime"] .tag-label {
color: var(--ink-faint);
}
html[data-template="anime"] .tag-value {
color: var(--primary);
font-weight: 700;
}
/* 释义正文 */
html[data-template="anime"] .explanation { color: var(--ink); }
html[data-template="anime"] .story { color: var(--ink); }
html[data-template="anime"] .field dt { color: var(--primary); }
html[data-template="anime"] .field dd { color: var(--ink); }
html[data-template="anime"] .field dd.quote {
background: #F6F8FF;
border-left: 3px solid var(--primary);
color: var(--ink-soft);
}
/* 近反义词 chips：淡渐变胶囊 */
html[data-template="anime"] .chip {
background: var(--primary-soft);
color: var(--primary);
border-radius: 999px;
border-color: rgba(114,137,218,.22);
}
html[data-template="anime"] a.chip:hover {
border-color: var(--primary);
background: #E6EBFC;
}
html[data-template="anime"] .chip.plain {
background: #fff;
border-color: var(--border);
color: var(--ink-soft);
}
/* 趣味延伸 */
html[data-template="anime"] .highlight { background: var(--primary-soft); }
html[data-template="anime"] .gold { color: var(--accent-pink); }
/* 字义分解卡片：超大圆角 + 角落淡色小装饰 */
html[data-template="anime"] .char-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 24px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
min-width: 0;
overflow-wrap: break-word;
}
/* 角落淡色小装饰（迷你书卷/云朵弧线） */
html[data-template="anime"] .char-item::before {
content: '';
position: absolute; top: -24px; right: -24px;
width: 60px; height: 60px;
border-radius: 50%;
border: 7px solid rgba(114,137,218,.10);
pointer-events: none;
}
html[data-template="anime"] .char-item::after {
content: '';
position: absolute; bottom: -16px; left: -16px;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,184,194,.16);
pointer-events: none;
}
html[data-template="anime"] .char-glyph {
background: #F2F5FF;
border: 2px solid rgba(114,137,218,.28);
border-radius: 14px;
color: var(--primary);
}
html[data-template="anime"] .char-pron { color: var(--ink-soft); }
html[data-template="anime"] .char-extra-item {
color: var(--primary);
background: #F2F5FF;
border: 1px solid rgba(114,137,218,.22);
border-radius: 999px;
}
html[data-template="anime"] .char-shape { color: var(--ink-faint); }
html[data-template="anime"] .sn-num { color: var(--primary); }
html[data-template="anime"] .sn-title { color: var(--ink); }
html[data-template="anime"] .sn-text { color: var(--ink-soft); }
html[data-template="anime"] .expand-sense {
border-color: rgba(114,137,218,.5);
color: var(--primary);
border-radius: 999px;
}
html[data-template="anime"] .expand-sense:hover {
background: var(--primary-soft);
color: var(--primary-dark);
}
html[data-template="anime"] .expand-sense:active {
background: var(--primary);
color: #fff;
}
/* 接龙 tab */
html[data-template="anime"] .tab {
color: var(--ink-soft);
border-bottom: 2px solid transparent;
}
html[data-template="anime"] .tab:hover { color: var(--primary); }
html[data-template="anime"] .tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
/* 成语接龙：柔和圆角卡片 + 弧形圆润箭头 */
html[data-template="anime"] .jielong-node {
background: #fff;
border: 1px solid var(--border);
border-radius: 999px;
box-shadow: 0 2px 8px rgba(114,137,218,.08);
}
html[data-template="anime"] .jielong-node:hover {
border-color: var(--primary);
box-shadow: 0 4px 14px rgba(114,137,218,.14);
transform: translateY(-1px);
}
html[data-template="anime"] .jielong-node .jw { color: var(--ink); }
html[data-template="anime"] .jielong-node.current {
border-color: var(--primary);
background: var(--primary-soft);
}
html[data-template="anime"] .jielong-node.current .jw { color: var(--primary); }
html[data-template="anime"] .jielong-node .jp { color: var(--ink-faint); }
html[data-template="anime"] .jielong-arrow {
color: var(--primary);
opacity: .6;
font-size: 16px;
}
html[data-template="anime"] .btn-regen {
border-color: rgba(114,137,218,.5);
color: var(--primary);
border-radius: 999px;
}
html[data-template="anime"] .btn-regen:hover {
background: var(--primary-soft);
color: var(--primary-dark);
}
/* 相关成语：网格卡片，hover 轻微上浮 + 淡粉紫底色 */
html[data-template="anime"] .related-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 18px;
transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
}
html[data-template="anime"] .related-item:hover {
background: #F6F8FF;
border-color: rgba(114,137,218,.35);
box-shadow: 0 8px 20px rgba(114,137,218,.14);
transform: translateY(-2px);
}
html[data-template="anime"] .related-item .rw { color: var(--ink); }
html[data-template="anime"] .related-item small { color: var(--ink-soft); }
/* 首页 hero */
html[data-template="anime"] .hero h1 { color: var(--ink); }
html[data-template="anime"] .hero-sub { color: var(--ink-soft); }
html[data-template="anime"] .hero-sub strong { color: var(--primary); }
/* 拼音索引字母 */
html[data-template="anime"] .letter {
background: #fff;
border-color: var(--border);
border-radius: 14px;
color: var(--ink);
}
html[data-template="anime"] .letter small { color: var(--ink-faint); }
html[data-template="anime"] .letter:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-soft);
}
html[data-template="anime"] .letter.empty { color: var(--ink-faint); }
/* 热门成语（首页） */
html[data-template="anime"] .hot-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 18px;
}
html[data-template="anime"] .hot-item:hover {
border-color: rgba(114,137,218,.35);
background: #F6F8FF;
box-shadow: 0 8px 20px rgba(114,137,218,.14);
transform: translateY(-1px);
}
html[data-template="anime"] .hot-word { color: var(--ink); }
html[data-template="anime"] .hot-pinyin { color: var(--accent-pink); }
/* 列表页 */
html[data-template="anime"] .result-list {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
html[data-template="anime"] .result-item { border-bottom-color: var(--border); }
html[data-template="anime"] .result-item:hover { background: var(--primary-soft); }
html[data-template="anime"] .result-item .rw { color: var(--primary); }
html[data-template="anime"] .result-item .rp { color: var(--accent-pink); }
html[data-template="anime"] .result-item .re { color: var(--ink-soft); }
/* 页脚 */
html[data-template="anime"] .site-footer {
background: #2B2B2B;
color: #D8D5DC;
}
html[data-template="anime"] .copyright { color: #A8A5AD; }
/* 焦点可见 */
html[data-template="anime"] a:focus-visible,
html[data-template="anime"] button:focus-visible,
html[data-template="anime"] input:focus-visible {
outline-color: var(--primary);
}
/* ============================================================
极简杂志版式风（magazine）—— 现代杂志排版，强版式留白
黑色 #222 主色 + 暗红 #b84040 点缀，扁平无阴影，靠排版制造层次
============================================================ */
html[data-template="magazine"] {
--primary: #222222; /* 黑色（主色/正文强调） */
--primary-dark: #000000;
--primary-soft: #F3F1ED; /* 浅灰底（hover） */
--ink: #222222; /* 正文 */
--ink-soft: #666666; /* 次要文字 */
--ink-faint: #999999; /* 辅助文字 */
--bg: #FCFCFB; /* 页面底 */
--card: #FFFFFF;
--border: #E8E6E1; /* 细线 */
--gold: #B84040; /* 暗红点缀 */
--radius: 0px; /* 直角，杂志利落感 */
--shadow: none; /* 几乎无阴影，扁平干净 */
--font-sans: "Inter", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", serif;
/* 点缀暗红 */
--accent-red: #B84040;
}
html[data-template="magazine"] body {
font-family: var(--font-sans);
color: var(--ink);
background-color: var(--bg);
line-height: 1.75;
letter-spacing: .01em;
}
/* 链接：黑 + 暗红 hover */
html[data-template="magazine"] a { color: var(--ink); }
html[data-template="magazine"] a:hover { color: var(--accent-red); }
/* 顶部导航：极简文字导航，无多余装饰 */
html[data-template="magazine"] .site-header {
background: #FCFCFB;
border-bottom: 1px solid var(--ink);
box-shadow: none;
}
html[data-template="magazine"] .logo {
color: var(--ink);
font-family: var(--font-serif);
font-weight: 700;
letter-spacing: 1px;
}
html[data-template="magazine"] .nav a {
color: var(--ink-soft);
border-radius: 0;
letter-spacing: .5px;
}
html[data-template="magazine"] .nav a:hover {
color: var(--accent-red);
background: none;
text-decoration: underline;
text-underline-offset: 4px;
}
/* 搜索框：极简，粗下边框 */
html[data-template="magazine"] .search-box input,
html[data-template="magazine"] .hero-search input {
background: #fff;
border: 1px solid var(--ink);
border-radius: 0;
color: var(--ink);
}
html[data-template="magazine"] .search-box input:focus,
html[data-template="magazine"] .hero-search input:focus {
border-color: var(--ink);
box-shadow: none;
border-width: 2px;
}
html[data-template="magazine"] .search-box button,
html[data-template="magazine"] .hero-search button {
background: var(--ink);
color: #fff;
border-radius: 0;
font-weight: 600;
letter-spacing: 1px;
}
html[data-template="magazine"] .search-box button:hover,
html[data-template="magazine"] .hero-search button:hover {
background: var(--accent-red);
}
/* 联想下拉 */
html[data-template="magazine"] .suggest {
background: #fff;
border: 1px solid var(--ink);
border-radius: 0;
box-shadow: none;
}
html[data-template="magazine"] .suggest a {
color: var(--ink);
border-bottom-color: var(--border);
}
html[data-template="magazine"] .suggest a:hover,
html[data-template="magazine"] .suggest a.active {
background: var(--primary-soft);
}
html[data-template="magazine"] .suggest .s-pinyin { color: var(--ink-faint); }
/* 卡片：直角 + 无阴影 + 细线 */
html[data-template="magazine"] .card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 0;
box-shadow: none;
}
html[data-template="magazine"] .card h2 {
color: var(--ink);
font-family: var(--font-serif);
font-weight: 700;
font-size: 24px;
letter-spacing: 1px;
padding-bottom: 10px;
}
/* 板块标题：大号粗标题 + 粗横线 */
html[data-template="magazine"] .card h2::after {
content: '';
position: absolute; left: 0; bottom: 0;
width: 100%; height: 3px;
background: var(--ink);
}
html[data-template="magazine"] .card h2::before {
content: '';
position: absolute; left: 0; bottom: -6px;
width: 64px; height: 3px;
background: var(--accent-red);
z-index: 1;
}
/* 详情页头部：超大号主标题 + 强视觉重心，拼音放侧边 */
html[data-template="magazine"] .detail-head {
position: relative;
text-align: left;
padding: 44px 0 18px;
border-bottom: 1px solid var(--ink);
}
html[data-template="magazine"] .detail-head h1 {
font-family: var(--font-serif);
font-size: 64px;
font-weight: 700;
color: var(--ink);
letter-spacing: 4px;
line-height: 1.1;
margin-bottom: 8px;
}
html[data-template="magazine"] .pinyin {
display: inline-block;
font-family: "Inter", var(--font-sans);
font-size: 15px;
color: var(--ink-faint);
letter-spacing: 3px;
text-transform: lowercase;
margin-top: 4px;
}
html[data-template="magazine"] .head-sub {
display: flex;
align-items: baseline;
gap: 16px;
}
/* 属性标签：极简文字胶囊，暗红描边 */
html[data-template="magazine"] .tag {
background: #fff;
color: var(--ink);
border: 1px solid var(--border);
border-radius: 0;
padding: 4px 12px;
box-shadow: none;
}
html[data-template="magazine"] .tag-label {
color: var(--ink-faint);
}
html[data-template="magazine"] .tag-value {
color: var(--accent-red);
font-weight: 600;
}
/* 释义正文 */
html[data-template="magazine"] .explanation {
font-family: var(--font-serif);
font-size: 19px;
color: var(--ink);
line-height: 1.9;
}
html[data-template="magazine"] .story { color: var(--ink); }
html[data-template="magazine"] .field dt {
color: var(--ink);
font-weight: 700;
}
html[data-template="magazine"] .field dd { color: var(--ink-soft); }
html[data-template="magazine"] .field dd.quote {
background: var(--primary-soft);
border-left: 3px solid var(--accent-red);
color: var(--ink-soft);
border-radius: 0;
}
/* 近反义词 chips：直角 */
html[data-template="magazine"] .chip {
background: #fff;
color: var(--ink);
border: 1px solid var(--border);
border-radius: 0;
}
html[data-template="magazine"] a.chip:hover {
border-color: var(--accent-red);
background: var(--primary-soft);
color: var(--accent-red);
}
html[data-template="magazine"] .chip.plain {
background: #fff;
border-color: var(--border);
color: var(--ink-soft);
}
/* 趣味延伸 */
html[data-template="magazine"] .highlight { background: var(--primary-soft); }
html[data-template="magazine"] .gold { color: var(--accent-red); }
/* 字义分解：四个卡片错落对齐（非严格均分，用交错偏移制造不对称） */
html[data-template="magazine"] .char-decompose {
grid-template-columns: repeat(4, 1fr);
gap: 18px;
align-items: start;
}
html[data-template="magazine"] .char-item {
background: #fff;
border: 1px solid var(--border);
border-top: 3px solid var(--ink);
border-radius: 0;
box-shadow: none;
min-width: 0;
overflow-wrap: break-word;
}
/* 错落：偶数卡片略微下移，制造不对称杂志感 */
html[data-template="magazine"] .char-item:nth-child(even) {
margin-top: 12px;
border-top-color: var(--accent-red);
}
html[data-template="magazine"] .char-glyph {
background: #fff;
border: none;
border-bottom: 2px solid var(--accent-red);
border-radius: 0;
color: var(--ink);
font-family: var(--font-serif);
}
html[data-template="magazine"] .char-pron { color: var(--ink-soft); }
html[data-template="magazine"] .char-extra-item {
color: var(--accent-red);
background: #fff;
border: 1px solid var(--border);
border-radius: 0;
}
html[data-template="magazine"] .char-shape { color: var(--ink-faint); }
html[data-template="magazine"] .sn-num { color: var(--accent-red); font-weight: 700; }
html[data-template="magazine"] .sn-title { color: var(--ink); }
html[data-template="magazine"] .sn-text { color: var(--ink-soft); }
html[data-template="magazine"] .expand-sense {
border: 1px solid var(--ink);
color: var(--ink);
border-radius: 0;
}
html[data-template="magazine"] .expand-sense:hover {
background: var(--ink);
color: #fff;
}
html[data-template="magazine"] .expand-sense:active {
background: var(--accent-red);
border-color: var(--accent-red);
color: #fff;
}
/* 接龙 tab */
html[data-template="magazine"] .tab {
color: var(--ink-soft);
border-bottom: 2px solid transparent;
border-radius: 0;
}
html[data-template="magazine"] .tab:hover { color: var(--accent-red); }
html[data-template="magazine"] .tab.active {
color: var(--ink);
border-bottom-color: var(--ink);
font-weight: 700;
}
/* 成语接龙：横向排布 + 细线条箭头 */
html[data-template="magazine"] .jielong-node {
background: #fff;
border: 1px solid var(--border);
border-radius: 0;
box-shadow: none;
}
html[data-template="magazine"] .jielong-node:hover {
border-color: var(--accent-red);
box-shadow: none;
}
html[data-template="magazine"] .jielong-node .jw { color: var(--ink); }
html[data-template="magazine"] .jielong-node.current {
border-color: var(--ink);
background: var(--primary-soft);
}
html[data-template="magazine"] .jielong-node.current .jw { color: var(--accent-red); }
html[data-template="magazine"] .jielong-node .jp { color: var(--ink-faint); }
html[data-template="magazine"] .jielong-arrow {
color: var(--ink);
opacity: .4;
font-weight: 300;
}
html[data-template="magazine"] .btn-regen {
border: 1px solid var(--ink);
color: var(--ink);
border-radius: 0;
}
html[data-template="magazine"] .btn-regen:hover {
background: var(--ink);
color: #fff;
}
/* 相关成语：网格简约卡片，hover 仅文字变色 */
html[data-template="magazine"] .related-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 0;
transition: border-color .15s;
}
html[data-template="magazine"] .related-item:hover {
border-color: var(--accent-red);
background: #fff;
box-shadow: none;
transform: none;
}
html[data-template="magazine"] .related-item:hover .rw {
color: var(--accent-red);
}
html[data-template="magazine"] .related-item .rw {
color: var(--ink);
font-family: var(--font-serif);
transition: color .15s;
}
html[data-template="magazine"] .related-item small { color: var(--ink-faint); }
/* 首页 hero */
html[data-template="magazine"] .hero {
text-align: left;
padding: 64px 0 32px;
}
html[data-template="magazine"] .hero h1 {
font-family: var(--font-serif);
font-size: 48px;
font-weight: 700;
color: var(--ink);
letter-spacing: 2px;
}
html[data-template="magazine"] .hero-sub { color: var(--ink-soft); }
html[data-template="magazine"] .hero-sub strong { color: var(--accent-red); }
/* 拼音索引字母：直角简约 */
html[data-template="magazine"] .letter {
background: #fff;
border: 1px solid var(--border);
border-radius: 0;
color: var(--ink);
}
html[data-template="magazine"] .letter small { color: var(--ink-faint); }
html[data-template="magazine"] .letter:hover {
border-color: var(--ink);
color: var(--accent-red);
background: var(--primary-soft);
}
html[data-template="magazine"] .letter.empty { color: var(--ink-faint); }
/* 热门成语（首页） */
html[data-template="magazine"] .hot-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 0;
transition: border-color .15s;
}
html[data-template="magazine"] .hot-item:hover {
border-color: var(--accent-red);
background: #fff;
box-shadow: none;
transform: none;
}
html[data-template="magazine"] .hot-item:hover .hot-word { color: var(--accent-red); }
html[data-template="magazine"] .hot-word {
color: var(--ink);
font-family: var(--font-serif);
transition: color .15s;
}
html[data-template="magazine"] .hot-pinyin { color: var(--ink-faint); }
/* 列表页 */
html[data-template="magazine"] .result-list {
background: #fff;
border: 1px solid var(--border);
border-radius: 0;
box-shadow: none;
}
html[data-template="magazine"] .result-item { border-bottom-color: var(--border); }
html[data-template="magazine"] .result-item:hover { background: var(--primary-soft); }
html[data-template="magazine"] .result-item .rw { color: var(--ink); font-family: var(--font-serif); }
html[data-template="magazine"] .result-item .rp { color: var(--accent-red); }
html[data-template="magazine"] .result-item .re { color: var(--ink-soft); }
/* 页脚：粗上分割线 */
html[data-template="magazine"] .site-footer {
background: #FCFCFB;
border-top: 3px solid var(--ink);
color: var(--ink-soft);
}
html[data-template="magazine"] .copyright { color: var(--ink-faint); }
/* 焦点可见 */
html[data-template="magazine"] a:focus-visible,
html[data-template="magazine"] button:focus-visible,
html[data-template="magazine"] input:focus-visible {
outline-color: var(--ink);
}
/* 移动端：字义分解恢复一行2个（覆盖 magazine 的 4 列 + 错落偏移） */
@media (max-width: 640px) {
html[data-template="magazine"] .char-decompose {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
html[data-template="magazine"] .char-item:nth-child(even) {
margin-top: 0;
}
html[data-template="magazine"] .detail-head h1 {
font-size: 42px;
}
}
/* ============================================================
轻粘土 3D 可爱风（clay）—— 软 Q 粘土质感，低 poly 柔和立体，儿童向
底色 #fff9f0 / 卡片 #fff / 主色暖橘 #f49c66 / 辅助浅青 #74b9ff
软粘土圆角 + 轻微 3D 隆起 + 柔和环境光 + 细微颗粒肌理
字体：阿里普惠体粗圆（标题）/ 阿里普惠常规（正文）
============================================================ */
html[data-template="clay"] {
--primary: #F49C66; /* 暖橘（主色） */
--primary-dark: #E8844A;
--primary-soft: #FFF1E6; /* 暖橘淡底 */
--ink: #5A4636; /* 正文（暖棕，柔和不刺眼） */
--ink-soft: #8A7666; /* 次要文字 */
--ink-faint: #B7A795; /* 辅助文字 */
--bg: #FFF9F0; /* 奶油暖白底 */
--card: #FFFFFF;
--border: #F0E4D6; /* 暖米边 */
--gold: #F4B87A; /* 蜜橘金点缀 */
--radius: 26px; /* 软粘土大圆角 */
/* 柔和软阴影：低饱和、大范围、无刺眼高光 */
--shadow: 0 2px 6px rgba(244,156,102,.08), 0 14px 34px rgba(214,164,120,.14);
--font-sans: "Alibaba PuHuiTi", "Alibaba PuHuiTi 2.0", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-serif: "Alibaba PuHuiTi", "Alibaba PuHuiTi 2.0", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-round: "Alibaba PuHuiTi", "Alibaba PuHuiTi 2.0", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
/* 辅助浅青 */
--accent-blue: #74B9FF;
--accent-blue-soft: #EAF5FF;
--accent-pink: #FFB4C4;
--accent-mint: #9BE3C6;
--accent-lemon: #FFD98A;
}
html[data-template="clay"] body {
font-family: var(--font-sans);
color: var(--ink);
background-color: var(--bg);
/* 柔和包围光 + 马卡龙色晕 + 细微颗粒肌理 */
background-image:
radial-gradient(circle at 8% 2%, rgba(255,184,150,.22) 0, transparent 30%),
radial-gradient(circle at 94% 8%, rgba(116,185,255,.20) 0, transparent 30%),
radial-gradient(circle at 6% 92%, rgba(155,227,198,.18) 0, transparent 28%),
radial-gradient(circle at 92% 96%, rgba(255,217,138,.20) 0, transparent 26%),
radial-gradient(circle at 50% 50%, rgba(255,255,255,.5) 0, transparent 60%);
line-height: 1.85;
letter-spacing: .02em;
}
/* 链接 */
html[data-template="clay"] a { color: var(--primary); }
html[data-template="clay"] a:hover { color: var(--primary-dark); }
/* 顶部导航：圆润 3D 质感导航栏 */
html[data-template="clay"] .site-header {
background: rgba(255,255,255,.82);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 2px solid rgba(244,156,102,.14);
box-shadow: 0 4px 18px rgba(214,164,120,.10);
}
html[data-template="clay"] .logo {
color: var(--primary-dark);
font-weight: 800;
letter-spacing: 1px;
text-shadow: 0 2px 0 rgba(255,255,255,.6);
}
html[data-template="clay"] .nav a {
color: var(--ink-soft);
border-radius: 999px;
font-weight: 600;
letter-spacing: .5px;
}
html[data-template="clay"] .nav a:hover {
color: var(--primary-dark);
background: var(--primary-soft);
}
/* 搜索框：软胶囊 */
html[data-template="clay"] .search-box input,
html[data-template="clay"] .hero-search input {
background: #fff;
border: 2px solid var(--border);
border-radius: 999px;
color: var(--ink);
}
html[data-template="clay"] .search-box input:focus,
html[data-template="clay"] .hero-search input:focus {
border-color: var(--accent-blue);
box-shadow: 0 0 0 5px rgba(116,185,255,.18);
}
html[data-template="clay"] .search-box button,
html[data-template="clay"] .hero-search button {
background: linear-gradient(180deg, #FFB27E, #F49C66);
color: #fff;
border-radius: 999px;
font-weight: 700;
box-shadow: 0 4px 10px rgba(244,156,102,.32), inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-template="clay"] .search-box button:hover,
html[data-template="clay"] .hero-search button:hover {
background: linear-gradient(180deg, #F49C66, #E8844A);
}
/* 联想下拉 */
html[data-template="clay"] .suggest {
background: #fff;
border-color: var(--border);
border-radius: 20px;
box-shadow: var(--shadow);
}
html[data-template="clay"] .suggest a {
color: var(--ink);
border-bottom-color: var(--border);
}
html[data-template="clay"] .suggest a:hover,
html[data-template="clay"] .suggest a.active {
background: var(--primary-soft);
}
html[data-template="clay"] .suggest .s-pinyin { color: var(--ink-faint); }
/* 卡片：凸起软粘土卡片（柔 3D 隆起 + 软阴影） */
html[data-template="clay"] .card {
background: var(--card);
border: 2px solid #fff;
border-radius: var(--radius);
box-shadow:
0 2px 6px rgba(244,156,102,.06),
0 18px 40px rgba(214,164,120,.14),
inset 0 1px 0 #fff;
}
html[data-template="clay"] .card h2 {
color: var(--ink);
font-weight: 800;
letter-spacing: 1px;
}
/* 板块标题：搭配迷你粘土小图标（左侧软球 + 弧线） */
html[data-template="clay"] .card h2 {
position: relative;
padding-left: 34px;
}
html[data-template="clay"] .card h2::before {
content: '';
position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
width: 22px; height: 22px;
border-radius: 50%;
background: radial-gradient(circle at 32% 28%, #FFC79A, #F49C66);
box-shadow:
inset -3px -4px 5px rgba(210,110,55,.35),
inset 3px 4px 5px rgba(255,255,255,.5),
0 3px 6px rgba(244,156,102,.28);
}
html[data-template="clay"] .card h2::after {
content: '';
position: absolute; left: 0; bottom: 2px;
width: 46px; height: 8px; border-radius: 999px;
background: linear-gradient(90deg, var(--primary), var(--accent-lemon));
opacity: .85;
box-shadow: 0 2px 5px rgba(244,156,102,.18);
}
/* 详情页头部：柔和立体文字效果 */
html[data-template="clay"] .detail-head {
padding: 36px 0 16px;
}
html[data-template="clay"] .detail-head h1 {
font-family: var(--font-round);
color: var(--primary-dark);
font-weight: 800;
letter-spacing: 6px;
text-shadow:
0 1px 0 #fff,
0 3px 0 rgba(244,156,102,.18),
0 6px 14px rgba(214,164,120,.20);
}
html[data-template="clay"] .pinyin {
color: var(--accent-blue);
font-weight: 600;
letter-spacing: 4px;
}
/* 属性标签：泡泡样式圆润标签（马卡龙多色轮转） */
html[data-template="clay"] .tag {
background: #fff;
color: var(--ink);
border: 2px solid var(--border);
border-radius: 999px;
padding: 7px 18px;
box-shadow: 0 4px 10px rgba(214,164,120,.12), inset 0 1px 0 #fff;
}
html[data-template="clay"] .tag:nth-child(3n+1) { border-color: rgba(244,156,102,.35); background: linear-gradient(180deg, #FFF5EC, #FFEFE2); }
html[data-template="clay"] .tag:nth-child(3n+2) { border-color: rgba(116,185,255,.35); background: linear-gradient(180deg, #F0F8FF, #E7F4FF); }
html[data-template="clay"] .tag:nth-child(3n) { border-color: rgba(155,227,198,.40); background: linear-gradient(180deg, #F2FBF7, #E9F9F1); }
html[data-template="clay"] .tag-label {
color: var(--ink-faint);
font-weight: 600;
}
html[data-template="clay"] .tag-value {
color: var(--ink);
font-weight: 800;
}
/* 释义正文 */
html[data-template="clay"] .explanation { color: var(--ink); font-weight: 500; }
html[data-template="clay"] .story { color: var(--ink); }
html[data-template="clay"] .field dt { color: var(--primary-dark); font-weight: 800; }
html[data-template="clay"] .field dd { color: var(--ink); }
html[data-template="clay"] .field dd.quote {
background: #FFF8F0;
border-left: 4px solid var(--primary);
border-radius: 6px 16px 16px 6px;
color: var(--ink-soft);
}
/* 近反义词 chips：软胶囊 */
html[data-template="clay"] .chip {
background: var(--primary-soft);
color: var(--primary-dark);
border-radius: 999px;
border: 2px solid rgba(244,156,102,.22);
font-weight: 600;
}
html[data-template="clay"] a.chip:hover {
border-color: var(--primary);
background: #FFF0E3;
}
html[data-template="clay"] .chip.plain {
background: #fff;
border-color: var(--border);
color: var(--ink-soft);
}
/* 趣味延伸：浅青底 + 马卡龙点缀 */
html[data-template="clay"] .highlight { background: var(--accent-blue-soft); }
html[data-template="clay"] .gold { color: var(--gold); }
html[data-template="clay"] .xhy-list li::before { color: var(--gold); }
/* 字义分解卡片：凸起软卡片 + 角落粘土圆点装饰 */
html[data-template="clay"] .char-item {
background: #fff;
border: 2px solid #fff;
border-radius: 24px;
box-shadow:
0 2px 6px rgba(244,156,102,.06),
0 14px 30px rgba(214,164,120,.12),
inset 0 1px 0 #fff;
position: relative;
overflow: hidden;
min-width: 0;
overflow-wrap: break-word;
}
/* 角落低 poly 粘土小圆球装饰 */
html[data-template="clay"] .char-item::before {
content: '';
position: absolute; top: -20px; right: -20px;
width: 54px; height: 54px;
border-radius: 50%;
background: radial-gradient(circle at 32% 28%, #BFE0FF, #74B9FF);
box-shadow: inset -4px -5px 6px rgba(60,120,190,.30), inset 4px 5px 6px rgba(255,255,255,.45);
pointer-events: none;
}
html[data-template="clay"] .char-item::after {
content: '';
position: absolute; bottom: -14px; left: -14px;
width: 34px; height: 34px;
border-radius: 50%;
background: radial-gradient(circle at 32% 28%, #FFCFA6, #F49C66);
box-shadow: inset -3px -4px 5px rgba(210,110,55,.35), inset 3px 4px 5px rgba(255,255,255,.5);
pointer-events: none;
}
html[data-template="clay"] .char-glyph {
background: var(--primary-soft);
border: 2px solid rgba(244,156,102,.30);
border-radius: 16px;
color: var(--primary-dark);
box-shadow: inset 0 2px 4px rgba(244,156,102,.14);
}
html[data-template="clay"] .char-pron { color: var(--ink-soft); }
html[data-template="clay"] .char-extra-item {
color: var(--primary-dark);
background: var(--primary-soft);
border: 1px solid rgba(244,156,102,.22);
border-radius: 999px;
}
html[data-template="clay"] .char-shape { color: var(--ink-faint); }
html[data-template="clay"] .sn-num { color: var(--primary); font-weight: 800; }
html[data-template="clay"] .sn-title { color: var(--ink); }
html[data-template="clay"] .sn-text { color: var(--ink-soft); }
html[data-template="clay"] .expand-sense {
border: 2px solid var(--accent-blue);
color: var(--accent-blue);
border-radius: 999px;
font-weight: 600;
}
html[data-template="clay"] .expand-sense:hover {
background: var(--accent-blue-soft);
color: #4A9AE0;
}
html[data-template="clay"] .expand-sense:active {
background: var(--accent-blue);
color: #fff;
}
/* 接龙 tab */
html[data-template="clay"] .tab {
color: var(--ink-soft);
border-bottom: 3px solid transparent;
font-weight: 600;
}
html[data-template="clay"] .tab:hover { color: var(--primary-dark); }
html[data-template="clay"] .tab.active {
color: var(--primary-dark);
border-bottom-color: var(--primary);
}
/* 成语接龙：软胶囊卡片 + 圆润箭头 */
html[data-template="clay"] .jielong-node {
background: #fff;
border: 2px solid var(--border);
border-radius: 999px;
box-shadow: 0 4px 10px rgba(214,164,120,.12), inset 0 1px 0 #fff;
transition: all .16s;
}
html[data-template="clay"] .jielong-node:hover {
border-color: var(--primary);
box-shadow: 0 8px 18px rgba(244,156,102,.22);
transform: translateY(-2px);
}
html[data-template="clay"] .jielong-node .jw { color: var(--ink); font-weight: 700; }
html[data-template="clay"] .jielong-node.current {
border-color: var(--primary);
background: var(--primary-soft);
}
html[data-template="clay"] .jielong-node.current .jw { color: var(--primary-dark); }
html[data-template="clay"] .jielong-node .jp { color: var(--ink-faint); }
html[data-template="clay"] .jielong-arrow {
color: var(--accent-blue);
opacity: .7;
font-size: 16px;
font-weight: 700;
}
html[data-template="clay"] .btn-regen {
border: 2px solid var(--primary);
color: var(--primary-dark);
border-radius: 999px;
font-weight: 600;
}
html[data-template="clay"] .btn-regen:hover {
background: var(--primary-soft);
color: var(--primary-dark);
}
/* 相关成语：3D 软卡片，hover 微微上浮 */
html[data-template="clay"] .related-item {
background: #fff;
border: 2px solid #fff;
border-radius: 22px;
box-shadow: 0 2px 6px rgba(244,156,102,.06), 0 12px 28px rgba(214,164,120,.12), inset 0 1px 0 #fff;
transition: transform .16s, box-shadow .16s, border-color .16s;
}
html[data-template="clay"] .related-item:hover {
border-color: rgba(244,156,102,.35);
box-shadow: 0 14px 32px rgba(244,156,102,.22), inset 0 1px 0 #fff;
transform: translateY(-4px);
}
html[data-template="clay"] .related-item .rw { color: var(--ink); font-weight: 800; }
html[data-template="clay"] .related-item small { color: var(--ink-soft); }
/* 首页 hero */
html[data-template="clay"] .hero h1 {
font-family: var(--font-round);
color: var(--primary-dark);
text-shadow: 0 2px 0 rgba(255,255,255,.7), 0 4px 10px rgba(244,156,102,.16);
}
html[data-template="clay"] .hero-sub { color: var(--ink-soft); }
html[data-template="clay"] .hero-sub strong { color: var(--primary-dark); }
/* 拼音索引字母 */
html[data-template="clay"] .letter {
background: #fff;
border: 2px solid var(--border);
border-radius: 18px;
color: var(--ink);
box-shadow: 0 3px 8px rgba(214,164,120,.10);
}
html[data-template="clay"] .letter small { color: var(--ink-faint); }
html[data-template="clay"] .letter:hover {
border-color: var(--accent-blue);
color: var(--accent-blue);
background: var(--accent-blue-soft);
}
html[data-template="clay"] .letter.empty { color: var(--ink-faint); }
/* 热门成语（首页） */
html[data-template="clay"] .hot-item {
background: #fff;
border: 2px solid #fff;
border-radius: 20px;
box-shadow: 0 2px 6px rgba(244,156,102,.06), 0 12px 26px rgba(214,164,120,.12);
}
html[data-template="clay"] .hot-item:hover {
border-color: rgba(244,156,102,.35);
box-shadow: 0 12px 28px rgba(244,156,102,.20);
transform: translateY(-2px);
}
html[data-template="clay"] .hot-word { color: var(--ink); font-weight: 800; }
html[data-template="clay"] .hot-pinyin { color: var(--accent-blue); }
/* 列表页 */
html[data-template="clay"] .result-list {
background: #fff;
border: 2px solid #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
html[data-template="clay"] .result-item { border-bottom-color: var(--border); }
html[data-template="clay"] .result-item:hover { background: var(--primary-soft); }
html[data-template="clay"] .result-item .rw { color: var(--primary-dark); }
html[data-template="clay"] .result-item .rp { color: var(--accent-blue); }
html[data-template="clay"] .result-item .re { color: var(--ink-soft); }
/* 页脚 */
html[data-template="clay"] .site-footer {
background: #5A4636;
color: #F3E7DA;
}
html[data-template="clay"] .copyright { color: #DCC7B1; }
/* 焦点可见 */
html[data-template="clay"] a:focus-visible,
html[data-template="clay"] button:focus-visible,
html[data-template="clay"] input:focus-visible {
outline-color: var(--accent-blue);
}
/* 移动端：字义分解 / 相关成语恢复一行2个 */
@media (max-width: 640px) {
html[data-template="clay"] .char-decompose {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
html[data-template="clay"] .related-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
html[data-template="clay"] .detail-head h1 {
font-size: 38px;
letter-spacing: 4px;
}
}
/* 无障碍：减少动画 */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* 焦点可见 */
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 2px solid var(--primary); outline-offset: 2px;
}
/* ====================================================================
标签聚合页 / 标签总览页（template/tag.php、template/tag_index.php）
约定见 docs/tag-system-spec.md §9：
· 只新增结构类（.tag-*），不改 .chips / .chip 的圆角、底色、内边距
· 颜色一律走 CSS 变量，不引入新色值
结构类：.tag-head .tag-count .tag-lead .tag-page .tag-groups .tag-grp
.tag-grp-head .tag-intro .tag-rel .tag-pager .tag-cls*
==================================================================== */
/* ---- 标题 + 计数条 ---- */
.tag-head { padding-bottom: 4px; }
.tag-count { font-variant-numeric: tabular-nums; }
/* ---- 一句话导语（列表上方，只占一行） ---- */
.tag-lead {
font-size: 15px; line-height: 1.75; color: var(--ink-soft);
margin: 4px 0 16px;
}
.tag-lead strong { color: var(--primary); font-weight: 700; }
/* ---- 胶囊区：整页容器 + 分组块 ---- */
.tag-page { padding: 18px 20px; }
.tag-groups { display: flex; flex-direction: column; gap: 18px; }
/* .chips 是 inline-flex，分组内需要撑满容器才能整齐换行 */
.tag-groups > .chips,
.tag-cls > .chips {
display: flex; flex-wrap: wrap; gap: 8px;
width: 100%; min-width: 0;
}
.tag-grp {
content-visibility: auto; /* 几千个胶囊时，视口外的分组跳过渲染 */
contain-intrinsic-size: auto 300px;
}
/* 分组标题：压掉 .card h2 的 20px + 红下划线；spec §9 要求 ≥14px，避免与胶囊混同 */
.card .tag-grp-head {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
font-size: 14px; font-weight: 700; color: var(--ink-soft);
padding: 0; margin: 0 0 8px; line-height: 1.5;
}
.card .tag-grp-head::after { display: none; }
.tag-grp-head small { font-size: 12px; font-weight: 400; color: var(--ink-soft); }
.tag-grp-label {
font-size: 14px; font-weight: 700; color: var(--ink-soft);
margin: 4px 0 8px;
}
/* 长标签名不撑破布局（不改 .chip 的圆角/底色/内边距，只约束换行） */
.tag-page .chip,
.tag-cls .chip,
.tag-groups .chip {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
/* 胶囊内的命中数（参考 .letter small 的写法） */
.tag-chip { display: inline-flex; align-items: baseline; gap: 6px; }
.tag-chip small {
font-size: 11px; font-weight: 400; color: var(--ink-soft); letter-spacing: 0;
flex: 0 0 auto; white-space: nowrap; /* 标签名换行时，命中数不被挤断 */
}
a.tag-chip:hover small { color: var(--primary-dark); }
.tag-chip-cnt { font-size: 11px; font-weight: 400; color: var(--ink-soft); margin-left: 6px; }
/* ---- 正文补充文案（列表下方，段数按 cnt 分档） ---- */
.tag-intro p {
font-size: 15px; line-height: 1.85; color: var(--ink);
margin-bottom: 12px;
}
.tag-intro p:last-child { margin-bottom: 0; }
.tag-intro a { color: var(--primary); }
.tag-intro a:hover { color: var(--primary-dark); text-decoration: underline; }
/* ---- 同类标签 / 换个角度找 ---- */
.tag-rel .chips { margin-top: 2px; }
.tag-rel-sub {
display: block; margin-top: 4px;
font-size: 13px; font-weight: 400; color: var(--ink-soft);
}
/* ---- 分页器：数字位 + 省略号（沿用 .pager 的布局与 .pager a 外观） ---- */
.tag-pager { flex-wrap: wrap; row-gap: 10px; }
.pager a.pg-num,
.pager .pg-num {
min-width: 36px; text-align: center;
padding: 4px 10px; font-size: 14px;
}
.pager .pg-gap { color: var(--ink-soft); font-size: 14px; padding: 0 2px; }
.pager .pg-num.cur {
background: var(--primary-soft); color: var(--primary);
border: 1px solid var(--primary); border-radius: 6px;
font-weight: 700; padding: 4px 10px; min-width: 36px; text-align: center;
}
.pager .pg-prev.disabled,
.pager .pg-next.disabled {
color: var(--ink-soft); font-size: 14px;
border: 1px dashed var(--border); border-radius: 6px;
padding: 4px 12px;
}
/* ---- 标签总览 / 分类页 ---- */
.tag-cls { content-visibility: auto; contain-intrinsic-size: auto 240px; }
.tag-cls-head {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
margin-bottom: 10px;
}
.card .tag-cls-title {
font-size: 18px; font-weight: 700; color: var(--ink);
padding-bottom: 0; margin: 0;
}
.card .tag-cls-title::after { display: none; }
.tag-cls-more { margin-left: auto; font-size: 13px; color: var(--primary); }
.tag-cls-more:hover { color: var(--primary-dark); }
.tag-cls-intro {
font-size: 14px; line-height: 1.8; color: var(--ink-soft);
margin: 0 0 12px;
}
/* ---- 深色 / 高饱和模板：胶囊文字对比度（实测 < 4.5:1，用 --ink 兜到 AA） ----
只改文字颜色，不动 .chip 的圆角/底色/内边距；也不影响详情页既有 .chip 外观。 */
html[data-template="dark"] .tag-page .chip,
html[data-template="memphis"] .tag-page .chip,
html[data-template="anime"] .tag-page .chip,
html[data-template="clay"] .tag-page .chip,
html[data-template="green"] .tag-page .chip,
html[data-template="dark"] .tag-cls .chip,
html[data-template="memphis"] .tag-cls .chip,
html[data-template="anime"] .tag-cls .chip,
html[data-template="clay"] .tag-cls .chip,
html[data-template="green"] .tag-cls .chip {
color: var(--ink);
}
html[data-template="dark"] .tag-cls .chip.plain,
html[data-template="memphis"] .tag-cls .chip.plain,
html[data-template="anime"] .tag-cls .chip.plain,
html[data-template="clay"] .tag-cls .chip.plain,
html[data-template="green"] .tag-cls .chip.plain {
color: var(--ink-soft);
}
/* ---- 响应式：375 / 768 / 1280 三档（只调间距，不改 .chip 内边距） ---- */
@media (max-width: 420px) {
.tag-page { padding: 14px; }
.tag-groups { gap: 14px; }
.tag-groups > .chips,
.tag-cls > .chips { gap: 6px; }
.tag-lead { font-size: 14px; }
.tag-intro p { font-size: 14px; line-height: 1.8; }
.card .tag-cls-title { font-size: 16px; }
.tag-cls-more { margin-left: 0; }
.tag-pager { gap: 8px; }
.pager a.pg-num, .pager .pg-num { min-width: 30px; padding: 4px 8px; font-size: 13px; }
}
@media (min-width: 768px) {
.tag-groups > .chips,
.tag-cls > .chips { gap: 9px; }
}
@media (min-width: 1280px) {
.tag-groups { gap: 20px; }
.tag-groups > .chips,
.tag-cls > .chips { gap: 10px; }
}
/* ===== 字典扩充内容：详细解释 / 康熙字典 / 说文解字（数据源 hgcha） ===== */
.sense-detail {
padding: 0 0 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.sense-detail:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.sense-detail .sense-head { margin-bottom: 8px; }
.sense-line {
font-size: 15px;
line-height: 1.85;
color: var(--ink);
margin: 0 0 6px;
}
.sense-line:last-child { margin-bottom: 0; }
.sense-line.sense-attr {
color: var(--ink-soft);
font-size: 14px;
padding-left: 26px;
position: relative;
}
.attr-tag {
position: absolute;
left: 0;
top: 0;
color: var(--primary);
font-size: 12px;
font-weight: 700;
line-height: 1.9;
}
.sub-h {
font-size: 15px;
font-weight: 700;
color: var(--ink);
margin: 18px 0 10px;
padding-left: 10px;
border-left: 3px solid var(--primary);
line-height: 1.4;
}
.card > .sub-h:first-of-type { margin-top: 4px; }
.classic p {
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.95;
color: var(--ink);
margin: 0 0 8px;
text-align: justify;
}
.classic p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
.sense-line { font-size: 14px; line-height: 1.8; }
.classic p { font-size: 14px; line-height: 1.9; }
.sense-line.sense-attr { padding-left: 22px; }
}
/* 造句列表（扩充数据） */
.zju-list {
margin: 0;
padding-left: 22px;
display: flex;
flex-direction: column;
gap: 10px;
}
.zju-list li {
font-size: 15px;
line-height: 1.85;
color: var(--ink);
}
.zju-list li::marker { color: var(--primary); font-weight: 700; }
@media (max-width: 640px) {
.zju-list { padding-left: 18px; gap: 8px; }
.zju-list li { font-size: 14px; line-height: 1.8; }
}
/* 字谜（扩充数据） */
.miyu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.miyu-list li { display: flex; flex-direction: column; gap: 3px; padding-left: 12px; border-left: 2px solid var(--border); }
.miyu-q { font-size: 15px; color: var(--ink); line-height: 1.7; }
.miyu-a { font-size: 14px; color: var(--primary); font-weight: 700; }
.miyu-n { font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
@media (max-width: 640px) {
.miyu-q { font-size: 14px; }
.miyu-n { font-size: 12.5px; }
}
/* 组词页（.zuci-*） */
.zuci-sum { margin: 0; font-size: 14.5px; line-height: 1.95; color: var(--ink-soft); }
.zuci-sum strong { color: var(--primary); font-weight: 700; }
.zuci-more { margin: 12px 0 0; }
.btn-more {
display: inline-block;
padding: 7px 14px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--primary-soft);
color: var(--primary-dark);
font-size: 14px;
text-decoration: none;
transition: background .18s, border-color .18s;
}
.btn-more:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
/* 组词页的 chip 可能同时是链接，保证可点区域与文字颜色一致 */
a.chip.chip-py { text-decoration: none; }
a.chip.chip-py:hover { border-color: var(--primary); }
@media (max-width: 640px) {
.zuci-sum { font-size: 13.5px; line-height: 1.85; }
.btn-more { font-size: 13px; padding: 6px 12px; }
}
/* ============ SEO 结构补充（面包屑语义 / 列表页导语 / 相关索引 / 字符网格） ============ */
/* 视觉隐藏但保留给读屏与爬虫的标题 */
.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;
}
/* 列表页 H1 下面的一句导语：补充关键词密度，也提高搜索结果摘要匹配率 */
.list-desc {
margin: 8px 0 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-soft);
}
.list-desc a { color: var(--primary); }
/* 相关索引：列表页底部的交叉入口 */
.related-index { margin-top: 22px; }
.related-index .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.related-index .chip.chip-py {
display: inline-flex; flex-direction: column; align-items: flex-start;
}
/* 首字 / 尾字枢纽页的字符网格：3,600+ 个格子用 grid 才不会挤成一条 */
.char-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: 8px;
width: 100%;
}
.char-grid .chip {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 6px 4px; border-radius: 10px; line-height: 1.2; gap: 2px;
text-decoration: none;
}
.char-grid .cp-word { font-size: 17px; font-weight: 700; }
.char-grid .cp-py { font-size: 11px; color: var(--ink-faint); font-weight: 400; }
@media (max-width: 640px) {
.char-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.char-grid .cp-word { font-size: 15px; }
.list-desc { font-size: 13.5px; }
}
/* 拼音索引页：每个字母一块，标题 + 条数 + 示例成语 */
.letter-block-list { display: grid; gap: 4px; margin-top: 12px; }
.letter-block { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.letter-block:last-child { border-bottom: none; }
.letter-block h3 {
margin: 0; font-size: 15.5px; font-weight: 700; display: flex;
align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.letter-block h3 a { color: var(--primary); text-decoration: none; }
.letter-block h3 a:hover { text-decoration: underline; }
.letter-block .lb-cnt { font-size: 12px; color: var(--ink-faint); font-weight: 400; }
.letter-block .lb-ex { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.75; }
@media (max-width: 640px) {
.letter-block h3 { font-size: 14.5px; }
.letter-block .lb-ex { font-size: 13px; }
}
/* 标签分类页：胶囊列表前的标题 */
.tag-list-title { margin: 4px 0 4px; font-size: 17px; }
/* ============ 英汉词条页：扩展内容（例句元信息 / 词源·构词拆解 / 助记） ============ */
/* 板块标题下的一行小字：例句条数 / 来源标注。字号取设计规范「弱化 12px」，
颜色用 --ink 而非 --ink-faint/--ink-soft：10 套视觉模板下 12px 小字只有 --ink
能稳定满足 4.5:1（--ink-faint 在白底仅 2.85:1），层级靠字号与字重区分 */
.sec-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
margin: -6px 0 14px; /* 抵掉 .card h2 的 18px 下间距，贴近标题 */
font-size: 12px;
line-height: 1.6;
color: var(--ink);
}
.sec-meta .meta-count { font-weight: 700; } /* 条数用字重区分，不靠颜色 */
.sec-meta .meta-src { overflow-wrap: anywhere; }
/* 词源 / 助记正文：与释义同字阶（15px），行高放宽到 1.9 便于长段落阅读 */
.etym-text {
font-size: 15px;
line-height: 1.9;
color: var(--ink);
overflow-wrap: anywhere; /* 长英文单词/连字符词不撑破卡片 */
}
/* 构词拆解小表：固定列宽 + 任意断行，375px 也不产生横向滚动 */
.etym-parts { width: 100%; }
.parts-table {
width: 100%;
table-layout: fixed; /* 关键：列宽按百分比分配，内容再长也不撑宽 */
border-collapse: collapse;
font-size: 14px;
line-height: 1.7;
border-top: 1px solid var(--border);
}
.parts-table .col-part { width: 22%; }
.parts-table .col-gloss { width: 30%; }
.parts-table .col-note { width: 48%; }
.parts-table th,
.parts-table td {
padding: 8px 12px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--border);
overflow-wrap: anywhere;
word-break: break-word;
}
.parts-table thead th {
padding: 6px 12px;
font-size: 12px;
font-weight: 700;
color: var(--ink); /* 表头文字用 --ink：--ink-soft 在 clay/memphis/anime 下不足 4.5:1 */
background: var(--primary-soft);
white-space: nowrap;
}
.parts-table tbody tr:last-child th,
.parts-table tbody tr:last-child td { border-bottom: 0; }
/* 词缀做成小胶囊：仍用主色域的浅底，但文字用 --ink 保证对比度（--primary 在浅色模板下只有 2:1） */
.part-affix {
display: inline-block;
padding: 0 8px;
border-radius: 4px;
background: var(--primary-soft);
color: var(--ink);
font-weight: 700;
letter-spacing: .2px;
overflow-wrap: anywhere;
}
.part-gloss { font-weight: 600; color: var(--ink); }
/* 助记块：浅底 + 金色左竖条（与例句的灰色竖条区分，且标题已明示用途，不靠颜色传义） */
.mnemonic {
padding: 14px 16px;
background: var(--bg);
border-left: 3px solid var(--gold);
border-radius: 8px;
}
.mnemonic-text {
font-size: 15px;
line-height: 1.9;
color: var(--ink);
overflow-wrap: anywhere;
}
/* 老结构里长英文例句同样需要断行保护 */
.example-en,
.example-cn { overflow-wrap: anywhere; }
/* 拼写变体例句的来源标注：贴在该条例句下方，用虚线分隔（形状区分，不靠颜色）。
只标「同词异拼」这类容易让人以为句子配错词的来源，普通来源仍在标题下聚合显示 */
.example-src {
margin-top: 8px;
padding-top: 6px;
border-top: 1px dashed var(--border);
font-size: 12px;
line-height: 1.6;
color: var(--ink);
overflow-wrap: anywhere;
}
@media (max-width: 640px) {
.etym-text,
.mnemonic-text { font-size: 14px; line-height: 1.85; }
.mnemonic { padding: 12px 14px; }
}
@media (max-width: 420px) {
.parts-table { font-size: 13px; }
.parts-table th,
.parts-table td { padding: 7px 8px; }
.parts-table thead th { padding: 6px 8px; font-size: 11.5px; }
.sec-meta { gap: 2px 10px; }
}
/* ============ 友情链接（首页底部，一行一个） ============ */
.friend-links .fl-list { list-style: none; margin: 0; padding: 0; }
.friend-links .fl-list li {
padding: 7px 0; border-bottom: 1px dashed rgba(0, 0, 0, .07);
font-size: 14px; line-height: 1.6;
}
.friend-links .fl-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.friend-links .fl-list a { color: #5b6167; }
.friend-links .fl-list a:hover { color: #c0392b; }
/* ============================================================================
视觉模板：大胆拼色编辑（editorial）
----------------------------------------------------------------------------
定位：高对比色块 + 撞色标题 + 杂志拼贴感。四色制（宝蓝 / 番茄红 / 明黄 / 黑），
米白纸底；纯色块 + 细黑描边 + 硬投影，全站取消圆角与柔光阴影。
实现约定：
1. 整块作用域限于 html[data-template="editorial"]，不改基础样式表，
站点切回其它模板时视觉完全复原；
2. 详情页（article.detail）是主战场 —— 板块编号、拼色卡片矩阵、胶囊接龙、
错位叠压的相关成语都在这里；
3. 其余页面靠色板与通用卡片规则跟随，不单独重排，保证不缺角；
4. 断点写在块尾，且同样带 html[data-template] 前缀 —— 本块在文件末尾，
若不带前缀会盖掉前面 @media 里的移动端规则。
==========================================================================*/
html[data-template="editorial"] {
/* —— 四色制 —— */
--ed-blue: #1B3FE8; /* 宝蓝：主导航、编号、主链接 */
--ed-red: #F03A17; /* 番茄红：强调、引文边条、页脚顶线 */
--ed-yellow: #FFD400; /* 明黄：标题底块、标签、荧光笔 */
--ed-ink: #111111; /* 墨黑：描边、硬投影、反白块 */
--ed-bg: #FAF6EA; /* 米白纸底 */
--ed-num: Inter, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
/* —— 覆写基础色板：未单独处理的页面跟着换装 —— */
--primary: #1B3FE8;
--primary-dark: #1229A8;
--primary-soft: #E3E9FF;
--ink: #111111;
--ink-soft: #4A4A4A;
/* 辅助文字不能再浅：#767676 落在米白纸上只有 4.2:1，正文级字号达不到 4.5 */
--ink-faint: #5F5F5F;
--bg: #FAF6EA;
--card: #FFFFFF;
--border: #111111;
/* --gold 是「次级强调色」，全站多用于浅底上的文字（拼音、出处标记、小标签）。
这里不能直接给番茄红 #F03A17 —— 它在白底只有 3.95:1。深一档，同色系。
大色块填充一律用 --ed-red，两者分工明确。 */
--gold: #C22A0D;
--radius: 0px;
--shadow: 4px 4px 0 #111111;
/* 编辑风不用宋体：标题与正文同族，只靠字重与字号拉层级 */
--font-serif: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
--font-sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}
html[data-template="editorial"] body {
background: var(--ed-bg);
color: var(--ed-ink);
-webkit-font-smoothing: antialiased;
}
/* ---------- 顶部：横向色块分区的导航 ---------- */
html[data-template="editorial"] .site-header {
background: #fff;
border-bottom: 3px solid var(--ed-ink);
}
html[data-template="editorial"] .header-inner { min-height: 72px; gap: 18px; }
html[data-template="editorial"] .logo {
background: var(--ed-ink); color: #fff;
font-family: var(--font-sans);
font-weight: 900; font-size: 19px; letter-spacing: .05em;
padding: 9px 14px;
}
html[data-template="editorial"] .logo:hover { color: var(--ed-yellow); }
/* 导航项本身就是色块，靠负右边距拼成一条连续色带 */
html[data-template="editorial"] .nav { gap: 0; }
html[data-template="editorial"] .nav a {
display: inline-flex; align-items: center;
padding: 9px 18px; margin-right: -2px;
font-size: 14px; font-weight: 800; letter-spacing: .05em;
color: #fff; background: var(--ed-blue);
border: 2px solid var(--ed-ink); border-radius: 0;
transition: transform .12s ease, background .12s ease, color .12s ease;
}
html[data-template="editorial"] .nav a:nth-child(2) { background: var(--ed-red); color: var(--ed-ink); }
html[data-template="editorial"] .nav a:nth-child(3) { background: var(--ed-yellow); color: var(--ed-ink); }
html[data-template="editorial"] .nav a:nth-child(4) { background: var(--ed-ink); color: #fff; }
html[data-template="editorial"] .nav a:hover {
background: var(--ed-ink); color: var(--ed-yellow);
transform: translateY(-2px);
}
html[data-template="editorial"] .search-box input {
border: 2px solid var(--ed-ink); border-right: 0; border-radius: 0;
font-weight: 600;
}
html[data-template="editorial"] .search-box button {
border: 2px solid var(--ed-ink); border-radius: 0;
background: var(--ed-yellow); color: var(--ed-ink);
font-weight: 900; letter-spacing: .1em;
transition: background .12s ease, color .12s ease;
}
html[data-template="editorial"] .search-box button:hover { background: var(--ed-red); color: #fff; }
/* ---------- 面包屑：斜杠分隔 ---------- */
html[data-template="editorial"] .breadcrumb {
padding-top: 20px; font-size: 13px; font-weight: 700;
}
html[data-template="editorial"] .breadcrumb a {
color: var(--ed-ink);
border-bottom: 2px solid var(--ed-yellow);
}
html[data-template="editorial"] .breadcrumb a:hover { color: var(--ed-blue); border-bottom-color: var(--ed-blue); }
html[data-template="editorial"] .breadcrumb li + li::before {
content: "/"; color: var(--ed-ink); font-weight: 900; margin-right: 6px;
}
/* ---------- 标题区：超大粗体 + 黄底块 + 宝蓝硬投影 ---------- */
html[data-template="editorial"] .detail-head { text-align: left; padding: 26px 0 6px; }
html[data-template="editorial"] .detail-head h1 {
display: inline-block; max-width: 100%;
font-family: var(--font-sans);
font-size: clamp(46px, 7.4vw, 100px);
font-weight: 900; line-height: 1.05; letter-spacing: -.015em;
color: var(--ed-ink); background: var(--ed-yellow);
padding: .04em .16em .1em;
border: 3px solid var(--ed-ink);
box-shadow: 12px 12px 0 var(--ed-blue);
transform: rotate(-1.1deg);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
overflow-wrap: anywhere;
}
html[data-template="editorial"] .detail-head .head-sub {
justify-content: flex-start; margin-top: 22px;
}
html[data-template="editorial"] .detail-head .pinyin {
background: #fff; border: 2px solid var(--ed-ink); border-radius: 999px;
padding: 4px 16px; font-size: 16px; font-weight: 800;
letter-spacing: 2px; color: var(--ed-ink);
}
/* 田字格：白卡纸 + 红硬投影，轻微倾斜像贴上去的 */
html[data-template="editorial"] .grid-figure { justify-content: flex-start; margin: 22px 0 10px; }
html[data-template="editorial"] .grid-img {
border: 3px solid var(--ed-ink); border-radius: 0;
padding: 6px; background: #fff;
box-shadow: 8px 8px 0 var(--ed-red);
transform: rotate(.8deg);
}
/* ---------- 属性标签：小色块胶囊，三色轮转 ---------- */
html[data-template="editorial"] .tags {
justify-content: flex-start; gap: 10px; padding: 18px 0 4px;
}
html[data-template="editorial"] .tag {
background: #fff; color: var(--ed-ink);
border: 2px solid var(--ed-ink); border-radius: 999px;
padding: 4px 14px; gap: 7px;
}
html[data-template="editorial"] .tag-label {
/* 不用半透明：58% 的墨黑压在明黄块上只有 3.2:1，小字读不清 */
color: var(--ed-ink);
font-size: 11px; font-weight: 800; letter-spacing: .1em;
}
html[data-template="editorial"] .tag-value {
color: var(--ed-ink); font-weight: 800; font-size: 13px;
}
html[data-template="editorial"] .tag:nth-child(3n+1) { background: var(--ed-yellow); }
html[data-template="editorial"] .tag:nth-child(3n) { background: var(--ed-blue); }
html[data-template="editorial"] .tag:nth-child(3n) .tag-label,
html[data-template="editorial"] .tag:nth-child(3n) .tag-value { color: #fff; }
/* ---------- 卡片：白底 + 细黑描边 + 硬投影，零圆角 ---------- */
html[data-template="editorial"] .detail { counter-reset: ed-sec; }
html[data-template="editorial"] .detail .card {
background: #fff;
border: 2px solid var(--ed-ink); border-radius: 0;
box-shadow: 6px 6px 0 var(--ed-ink);
padding: 24px 26px 26px; margin-bottom: 26px;
}
/* 板块标题：大号黑体 + 左侧彩色编号（取消基础样式里的细红下划线） */
html[data-template="editorial"] .detail .card h2 {
counter-increment: ed-sec;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
font-size: clamp(21px, 2.3vw, 28px); font-weight: 900;
letter-spacing: -.01em; color: var(--ed-ink);
padding-bottom: 0; margin-bottom: 20px; line-height: 1.25;
}
html[data-template="editorial"] .detail .card h2::after { display: none; }
html[data-template="editorial"] .detail .card h2::before {
content: counter(ed-sec, decimal-leading-zero);
flex: none;
font-family: var(--ed-num); font-variant-numeric: tabular-nums;
font-size: 14px; font-weight: 800; letter-spacing: .06em;
color: #fff; background: var(--ed-blue);
padding: 6px 9px; border: 2px solid var(--ed-ink);
}
/* 编号颜色按板块轮转，让整页有颜色节奏而不是一条灰线到底。
番茄红底上必须用墨黑字：白字在这块红上只有 3.9:1，14px 达不到 4.5。 */
html[data-template="editorial"] .detail > section:nth-of-type(3n+1) h2::before { background: var(--ed-blue); color: #fff; }
html[data-template="editorial"] .detail > section:nth-of-type(3n+2) h2::before { background: var(--ed-red); color: var(--ed-ink); }
html[data-template="editorial"] .detail > section:nth-of-type(3n) h2::before { background: var(--ed-yellow); color: var(--ed-ink); }
html[data-template="editorial"] .detail .explanation {
font-size: 19px; line-height: 1.95; font-weight: 500;
}
html[data-template="editorial"] .detail .story { font-size: 16px; line-height: 1.95; }
/* ---------- 详细解释：虚线分隔 + 黄底黑框的字段标签 ---------- */
html[data-template="editorial"] .detail .fields { gap: 0; }
html[data-template="editorial"] .detail .field {
grid-template-columns: 88px 1fr; gap: 16px; align-items: start;
padding: 14px 0; border-top: 1px dashed rgba(17, 17, 17, .22);
}
html[data-template="editorial"] .detail .field:first-child { border-top: 0; padding-top: 0; }
html[data-template="editorial"] .detail .field dt {
justify-self: start;
font-size: 12px; font-weight: 800; letter-spacing: .08em;
color: var(--ed-ink); background: var(--ed-yellow);
border: 2px solid var(--ed-ink); padding: 3px 9px;
text-align: center; transform: rotate(-1.2deg);
}
html[data-template="editorial"] .detail .field dd { font-size: 16px; line-height: 1.85; color: var(--ed-ink); }
/* 例句与出处：黄纸块 + 四边黑框（不用单侧彩色竖线——那是模板化 UI 的常见套路，
杂志里引文靠底色和框读出来就够了）。
引文收窄到 42em：整宽时一行 55 个汉字，读起来要来回找行首。 */
html[data-template="editorial"] .detail .field dd.quote {
background: #FFF7C9; border: 2px solid var(--ed-ink);
border-radius: 0; padding: 10px 14px; color: var(--ed-ink);
max-width: 42em;
}
/* ---------- 造句：黑底黄字的数字序号 ---------- */
html[data-template="editorial"] .detail .zju-list {
list-style: none; counter-reset: ed-zju;
display: flex; flex-direction: column; gap: 14px;
}
html[data-template="editorial"] .detail .zju-list li {
counter-increment: ed-zju; position: relative; padding-left: 42px;
font-size: 15px; line-height: 1.85; color: var(--ed-ink);
}
html[data-template="editorial"] .detail .zju-list li::before {
content: counter(ed-zju, decimal-leading-zero);
position: absolute; left: 0; top: 3px;
font-family: var(--ed-num); font-variant-numeric: tabular-nums;
font-size: 12px; font-weight: 800;
background: var(--ed-ink); color: var(--ed-yellow);
padding: 3px 5px;
}
/* ---------- 近反义词：黑底黄字小标签 + 拼色胶囊 ---------- */
html[data-template="editorial"] .detail .syn-ant > strong {
width: auto; display: inline-block; vertical-align: middle;
margin-right: 10px;
background: var(--ed-ink); color: var(--ed-yellow);
font-size: 12px; font-weight: 800; letter-spacing: .1em;
padding: 4px 10px;
}
/* 胶囊不按 nth-child 随机轮转 —— 颜色要承载含义，不能是撒糖纸。
近义词一组明黄、反义词一组白，色只在「同一组」内统一。 */
html[data-template="editorial"] .detail .chip {
border: 2px solid var(--ed-ink); border-radius: 999px;
background: #fff; color: var(--ed-ink);
font-weight: 700; padding: 3px 13px;
}
html[data-template="editorial"] .detail .syn-ant:nth-of-type(1) .chip { background: var(--ed-yellow); }
html[data-template="editorial"] .detail .syn-ant:nth-of-type(2) .chip { background: #fff; }
html[data-template="editorial"] .detail a.chip:hover {
background: var(--ed-ink); color: var(--ed-yellow); border-color: var(--ed-ink);
}
/* ---------- 趣味延伸：整块明黄 ---------- */
html[data-template="editorial"] .detail .card.highlight { background: var(--ed-yellow); }
html[data-template="editorial"] .detail .card.highlight p { font-size: 16px; }
html[data-template="editorial"] .detail .card.highlight .gold {
background: var(--ed-ink); color: var(--ed-yellow);
font-size: 12px; font-weight: 800; letter-spacing: .1em;
padding: 3px 9px; margin-right: 10px;
}
html[data-template="editorial"] .detail .card.highlight .xhy-list li::before { color: var(--ed-ink); }
/* ---------- 字义分解：拼色卡片矩阵，单字顶格超大字 ----------
四列时每栏正文只有 13 字宽、字号被迫压到 13px —— 放大模块却缩小正文，
是全页最伤可读性的一处。改两列：栏宽 500px，正文 15px 一行约 30 字，
四张卡等高成矩阵（矮卡由 flex 撑开，空释义在卡内垂直居中）。 */
html[data-template="editorial"] .detail .char-decompose {
grid-template-columns: repeat(2, 1fr);
gap: 18px; align-items: stretch;
}
html[data-template="editorial"] .detail .char-item {
background: #fff; border: 2px solid var(--ed-ink); border-radius: 0;
box-shadow: 5px 5px 0 var(--ed-ink);
padding: 0; gap: 0; overflow: hidden;
}
html[data-template="editorial"] .detail .char-meta {
padding: 16px 18px 18px; flex: 1 1 auto;
display: flex; flex-direction: column;
}
html[data-template="editorial"] .detail .char-senses { flex: 1 1 auto; }
/* 没有义项的字（如「石」）把提示语放在卡中央，避免底部挂一大块空白 */
html[data-template="editorial"] .detail .char-item:not(:has(.char-senses)) .char-meta { justify-content: center; }
html[data-template="editorial"] .detail .sn-title { font-size: 16px; }
html[data-template="editorial"] .detail .sn-text { font-size: 15px; line-height: 1.85; }
html[data-template="editorial"] .detail .sn-num { font-size: 15px; }
html[data-template="editorial"] .detail .char-shape { font-size: 14px; }
html[data-template="editorial"] .detail .char-glyph {
align-self: stretch; width: auto; height: auto;
padding: 16px 8px 14px;
border: 0; border-bottom: 2px solid var(--ed-ink); border-radius: 0;
background: var(--ed-blue); color: #fff;
font-family: var(--font-sans);
/* 两列后色带近 480px 宽，62px 的字只占 13%，色带反而成了主角，单字降级成标签。
提到 92px 才压得住这条色带。 */
font-size: 92px; font-weight: 900; line-height: 1;
justify-content: center; letter-spacing: 0;
}
html[data-template="editorial"] .detail .char-glyph a { color: inherit; border-bottom: 3px solid rgba(255, 255, 255, .55); }
html[data-template="editorial"] .detail .char-glyph a:hover { border-bottom-color: var(--ed-yellow); }
html[data-template="editorial"] .detail .char-item:nth-child(4n+1) .char-glyph { background: var(--ed-blue); color: #fff; }
html[data-template="editorial"] .detail .char-item:nth-child(4n+2) .char-glyph { background: var(--ed-red); color: #fff; }
html[data-template="editorial"] .detail .char-item:nth-child(4n+3) .char-glyph { background: var(--ed-yellow); color: var(--ed-ink); }
html[data-template="editorial"] .detail .char-item:nth-child(4n+4) .char-glyph { background: var(--ed-ink); color: #fff; }
html[data-template="editorial"] .detail .char-item:nth-child(4n+3) .char-glyph a { border-bottom-color: rgba(17, 17, 17, .35); }
html[data-template="editorial"] .detail .char-pron { font-weight: 700; color: var(--ed-ink); font-size: 14px; }
/* 基础样式里这枚小标签是番茄红字压米色底（3.66:1），改成黑字白底细黑框 */
html[data-template="editorial"] .detail .char-extra-item {
color: var(--ed-ink); background: #fff;
border: 2px solid var(--ed-ink); border-radius: 0;
font-weight: 700; padding: 0 6px;
}
html[data-template="editorial"] .detail .char-extra-sep { color: var(--ed-ink); }
/* 「展开全部释义」按钮：基础样式是蓝色描边胶囊，与黑框方角语言不一致 */
html[data-template="editorial"] .detail .expand-sense {
background: #fff; color: var(--ed-ink);
border: 2px solid var(--ed-ink); border-radius: 0;
font-weight: 800; padding: 5px 14px;
box-shadow: 3px 3px 0 var(--ed-ink);
transition: background .12s ease, transform .1s ease, box-shadow .1s ease;
}
html[data-template="editorial"] .detail .expand-sense:hover { background: var(--ed-yellow); color: var(--ed-ink); }
html[data-template="editorial"] .detail .expand-sense:active {
background: var(--ed-ink); color: var(--ed-yellow);
box-shadow: none; transform: translate(3px, 3px);
}
/* ---------- 成语接龙：横向彩色胶囊 + 黑粗线小三角箭头 ---------- */
html[data-template="editorial"] .detail .jielong-chain { gap: 0; row-gap: 14px; }
html[data-template="editorial"] .detail .jielong-node {
flex-direction: row; align-items: baseline; gap: 7px;
min-width: 0; padding: 8px 15px;
/* 箭头挂在自己左边：换行时箭头跟着节点走，不会有一枚箭头孤零零留在行尾 */
position: relative; margin-left: 30px;
background: #fff; border: 2px solid var(--ed-ink); border-radius: 999px;
transition: background .12s ease, border-color .12s ease;
}
html[data-template="editorial"] .detail .jielong-node:first-of-type { margin-left: 0; }
html[data-template="editorial"] .detail .jielong-node .jw {
font-family: var(--font-sans); font-size: 15px; font-weight: 900; color: var(--ed-ink);
}
html[data-template="editorial"] .detail .jielong-node .jp {
/* 拼音压在日本黄 / 浅蓝底上，62% 的墨黑只有 3.7:1，要压到 78% 才够 */
font-size: 11px; color: rgba(17, 17, 17, .78);
}
html[data-template="editorial"] .detail .jielong-node:nth-of-type(4n+1) { background: var(--ed-yellow); }
html[data-template="editorial"] .detail .jielong-node:nth-of-type(4n+3) { background: var(--ed-yellow); }
/* 当前条目压在其它之上，必须写在该组规则之后 */
html[data-template="editorial"] .detail .jielong-node.current {
background: var(--ed-ink); border-color: var(--ed-ink);
}
html[data-template="editorial"] .detail .jielong-node.current .jw { color: var(--ed-yellow); }
html[data-template="editorial"] .detail .jielong-node.current .jp { color: rgba(255, 255, 255, .7); }
html[data-template="editorial"] .detail .jielong-node:hover {
background: var(--ed-blue); border-color: var(--ed-ink);
box-shadow: none; transform: none;
}
html[data-template="editorial"] .detail .jielong-node:hover .jw { color: #fff; }
html[data-template="editorial"] .detail .jielong-node:hover .jp { color: rgba(255, 255, 255, .88); }
/* 箭头：停用模板里的「→」字符，改用节点左侧的黑粗线 + 小三角。
这样箭头与它指向的那个节点绑在一起，多行折行时仍然「谁指向谁」清楚。 */
html[data-template="editorial"] .detail .jielong-arrow { display: none; }
html[data-template="editorial"] .detail .jielong-node:not(:first-of-type)::before,
html[data-template="editorial"] .detail .jielong-node:not(:first-of-type)::after {
content: ''; position: absolute; top: 50%;
}
html[data-template="editorial"] .detail .jielong-node:not(:first-of-type)::before {
left: -22px; margin-top: -1.5px;
width: 14px; height: 3px; background: var(--ed-ink);
}
html[data-template="editorial"] .detail .jielong-node:not(:first-of-type)::after {
left: -8px; margin-top: -5px;
border-left: 8px solid var(--ed-ink);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
/* 折行处：JS 量出「与上一个节点不在同一行」的节点，藏掉它左侧的箭头，
否则那枚箭头会指向左边的空白，读起来像断头。 */
html[data-template="editorial"] .detail .jielong-node.is-jl-wrap::before,
html[data-template="editorial"] .detail .jielong-node.is-jl-wrap::after { display: none; }
html[data-template="editorial"] .detail .tabs { border-bottom: 0; gap: 8px; margin-bottom: 18px; }
html[data-template="editorial"] .detail .tab {
background: #fff; border: 2px solid var(--ed-ink); border-radius: 0;
color: var(--ed-ink); font-weight: 800; padding: 7px 15px; margin-bottom: 0;
}
html[data-template="editorial"] .detail .tab:hover { background: var(--ed-yellow); color: var(--ed-ink); }
html[data-template="editorial"] .detail .tab.active {
background: var(--ed-ink); color: var(--ed-yellow); border-bottom-color: var(--ed-ink);
}
html[data-template="editorial"] .detail .btn-regen {
background: #fff; color: var(--ed-ink);
border: 2px solid var(--ed-ink); border-radius: 0;
font-weight: 800; letter-spacing: .04em;
box-shadow: 3px 3px 0 var(--ed-ink);
transition: background .12s ease, transform .1s ease, box-shadow .1s ease;
}
html[data-template="editorial"] .detail .btn-regen:hover { background: var(--ed-yellow); color: var(--ed-ink); }
html[data-template="editorial"] .detail .btn-regen:active {
background: var(--ed-ink); color: var(--ed-yellow);
box-shadow: none; transform: translate(3px, 3px);
}
/* ---------- 相关成语：不规则网格 + 真实错位叠压 ---------- */
html[data-template="editorial"] .detail .related-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px 14px; align-items: start;
}
html[data-template="editorial"] .detail .related-item {
background: #fff; border: 2px solid var(--ed-ink); border-radius: 0;
box-shadow: 4px 4px 0 var(--ed-ink);
padding: 14px 16px; gap: 4px;
transform: rotate(-.6deg);
transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
/* 配色周期必须与列数（4）互质，否则 4n+k 恰好等于列号 —— 整列同色，
12 张卡会排成三条竖色带，看起来是「贴了三条色纸」而不是拼色网格。
改用 5：落点依次是第 1、2、3、4、1… 列，列内颜色才交错。 */
html[data-template="editorial"] .detail .related-item:nth-child(5n+1) { background: var(--ed-yellow); }
html[data-template="editorial"] .detail .related-item:nth-child(5n+3) {
background: var(--ed-blue); transform: rotate(.9deg);
}
html[data-template="editorial"] .detail .related-item:nth-child(5n+3) .rw,
html[data-template="editorial"] .detail .related-item:nth-child(5n+3) small,
html[data-template="editorial"] .detail .related-item:nth-child(5n+3) .rw-py { color: #fff; }
html[data-template="editorial"] .detail .related-item:nth-child(4n+3) { transform: rotate(-1.3deg); }
html[data-template="editorial"] .detail .related-item:nth-child(4n) { transform: rotate(1.1deg); }
/* 错位叠压用「与 4 互质的周期」做，才不会被 4 列列宽吃掉：
4n+k 只等于列号，整列一起上移等于没移；3n 的落点会绕着列走，列内才有交错。
位移控制在 20px 以内 —— 卡片下内边距 14px，压到的只是边线，不会盖住正文。 */
html[data-template="editorial"] .detail .related-item:nth-child(3n+2) { margin-top: 16px; }
html[data-template="editorial"] .detail .related-item:nth-child(3n) {
margin-top: -20px; z-index: 2;
}
html[data-template="editorial"] .detail .related-item:nth-child(7n+4) {
margin-top: -26px; z-index: 3;
}
html[data-template="editorial"] .detail .related-item .rw {
font-family: var(--font-sans); font-size: 17px; font-weight: 900; color: var(--ed-ink);
}
/* 悬停统一回正并压到最上层，避免错位后点不准 */
html[data-template="editorial"] .detail .related-item:hover {
background: var(--ed-ink); border-color: var(--ed-ink);
box-shadow: 6px 6px 0 var(--ed-yellow);
transform: rotate(0deg) translateY(-3px);
z-index: 9;
}
html[data-template="editorial"] .detail .related-item:hover .rw,
html[data-template="editorial"] .detail .related-item:hover small,
html[data-template="editorial"] .detail .related-item:hover .rw-py { color: #fff; }
/* 板块形态节奏：相关成语整块吃黑，所属标签整块吃黄 ——
避免整页 7 个盒子同宽同高同白底，让视线在收尾处有两次换挡。 */
html[data-template="editorial"] .detail > section:has(.related-grid) {
background: var(--ed-ink); box-shadow: 6px 6px 0 var(--ed-yellow);
}
html[data-template="editorial"] .detail > section:has(.related-grid) h2 { color: #fff; }
/* 黑底上的卡片：黑投影看不见，换成白投影才立得起来 */
html[data-template="editorial"] .detail > section:has(.related-grid) .related-item {
box-shadow: 4px 4px 0 rgba(255, 255, 255, .9);
}
html[data-template="editorial"] .detail > section:has(.related-grid) .related-item:hover {
box-shadow: 6px 6px 0 var(--ed-yellow);
}
html[data-template="editorial"] .detail > section:has(.tags-of-idiom) {
background: var(--ed-yellow);
}
html[data-template="editorial"] .detail > section:has(.tags-of-idiom) .chip { background: #fff; }
html[data-template="editorial"] .detail > section:has(.tags-of-idiom) a.chip:hover {
background: var(--ed-ink); color: var(--ed-yellow);
}
/* ---------- 首页首屏：让落地页与详情页说的是同一种语言 ---------- */
html[data-template="editorial"] .hero { text-align: left; padding: 40px 0 22px; }
html[data-template="editorial"] .hero h1 {
display: inline-block; max-width: 100%;
font-family: var(--font-sans);
font-size: clamp(30px, 4.2vw, 52px); font-weight: 900;
letter-spacing: -.01em; line-height: 1.1;
color: var(--ed-ink); background: var(--ed-yellow);
border: 3px solid var(--ed-ink); padding: .05em .18em .1em;
box-shadow: 9px 9px 0 var(--ed-blue);
transform: rotate(-.8deg);
}
html[data-template="editorial"] .hero-sub { font-size: 16px; margin: 18px 0 20px; }
html[data-template="editorial"] .hero-sub strong {
color: var(--ed-ink); background: var(--ed-yellow);
padding: 0 4px;
}
html[data-template="editorial"] .hero-search { margin: 0; max-width: 640px; }
html[data-template="editorial"] .hero-search input {
border: 2px solid var(--ed-ink); border-right: 0; border-radius: 0;
font-weight: 600;
}
html[data-template="editorial"] .hero-search input:focus { box-shadow: none; }
html[data-template="editorial"] .hero-search button {
background: var(--ed-yellow); color: var(--ed-ink);
border: 2px solid var(--ed-ink); border-radius: 0;
font-weight: 900; letter-spacing: .1em;
}
html[data-template="editorial"] .hero-search button:hover { background: var(--ed-red); color: var(--ed-ink); }
/* 属性胶囊条与第一张卡之间只剩 4px，读起来像「胶囊压在白卡上沿」 */
html[data-template="editorial"] .detail .tags { margin-bottom: 20px; }
/* 首页热门成语卡、站内各类胶囊：基础样式还是 8px 圆角 + 1px 细边 + 无投影的旧系统，
是首页面积最大的模块，不接管的话一致性只维持到首屏。 */
html[data-template="editorial"] .hot-item {
border: 2px solid var(--ed-ink); border-radius: 0;
box-shadow: 3px 3px 0 var(--ed-ink);
padding: 12px 14px;
}
html[data-template="editorial"] .hot-item:hover {
background: var(--ed-yellow); border-color: var(--ed-ink);
box-shadow: 3px 3px 0 var(--ed-ink);
}
html[data-template="editorial"] .hot-word { font-family: var(--font-sans); font-weight: 900; }
html[data-template="editorial"] .chip {
border: 2px solid var(--ed-ink); border-radius: 999px;
background: #fff; color: var(--ed-ink); font-weight: 700;
}
html[data-template="editorial"] a.chip:hover {
background: var(--ed-ink); color: var(--ed-yellow); border-color: var(--ed-ink);
}
/* ---------- 其余页面：跟随色板与描边，不单独重排 ---------- */
html[data-template="editorial"] .card {
border: 2px solid var(--ed-ink); border-radius: 0;
box-shadow: 5px 5px 0 var(--ed-ink);
}
html[data-template="editorial"] .result-list {
border: 2px solid var(--ed-ink); border-radius: 0;
box-shadow: 5px 5px 0 var(--ed-ink);
}
/* 标签页导语：整宽时一行 65 个汉字，收窄到与详情页引文同一个阅读宽度 */
html[data-template="editorial"] .tag-lead,
html[data-template="editorial"] .tag-intro p { max-width: 42em; }
html[data-template="editorial"] .tag-lead { font-size: 16px; line-height: 1.9; }
/* 非详情页的板块标题：去掉基础样式那条细下划线，换成左侧彩色小方块，
与详情页的编号装饰同语言（详情页由上面的 counter 规则接管）。 */
html[data-template="editorial"] .card h2::after { display: none; }
html[data-template="editorial"] .card h2::before {
content: ''; display: inline-block;
width: 13px; height: 13px; margin-right: 10px;
background: var(--ed-blue); border: 2px solid var(--ed-ink);
vertical-align: -2px;
}
html[data-template="editorial"] .card h2 { font-weight: 900; }
/* 拼音字母格：并入同一套描边语言 */
html[data-template="editorial"] .letter {
border: 2px solid var(--ed-ink); border-radius: 0;
box-shadow: 3px 3px 0 var(--ed-ink);
}
html[data-template="editorial"] .letter:hover { background: var(--ed-yellow); border-color: var(--ed-ink); }
/* ---------- 页脚：黑底 + 番茄红顶线 ---------- */
html[data-template="editorial"] .site-footer {
background: var(--ed-ink); border-top: 4px solid var(--ed-red); margin-top: 48px;
}
html[data-template="editorial"] .footer-nav a { color: #fff; font-weight: 700; }
html[data-template="editorial"] .footer-nav a:hover { color: var(--ed-yellow); }
html[data-template="editorial"] .copyright { color: rgba(255, 255, 255, .55); }
/* ============================================================================
editorial 动效（三处）
1. 主操作反馈：按钮按下统一 translate(3px,3px) + 收回硬投影，见上面各 :active；
2. 状态切换来路：接龙「顺接 / 逆接」切换时，面板从左侧淡入；
3. 首次进入出场：标题先落，拼音与属性标签跟上，板块按阅读顺序逐块「贴」上来。
—— 底层的 prefers-reduced-motion 规则（见上文 *）会把这三处一起关掉。
==========================================================================*/
@keyframes ed-paste {
from { opacity: 0; transform: translateY(16px) rotate(-1.2deg); }
to { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes ed-title-in {
from { opacity: 0; transform: rotate(-1.1deg) translateY(-12px); }
to { opacity: 1; transform: rotate(-1.1deg) translateY(0); }
}
@keyframes ed-fade-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ed-panel-in {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
html[data-template="editorial"] .detail-head h1 {
animation: ed-title-in .34s cubic-bezier(.22, .8, .24, 1) both;
}
html[data-template="editorial"] .detail-head .head-sub {
animation: ed-fade-up .28s ease-out .08s both;
}
html[data-template="editorial"] .grid-figure {
animation: ed-fade-up .30s ease-out .04s both;
}
html[data-template="editorial"] .tags {
animation: ed-fade-up .28s ease-out .12s both;
}
html[data-template="editorial"] .detail .card {
animation: ed-paste .34s cubic-bezier(.22, .8, .24, 1) both;
}
/* 按阅读顺序错开。步长压到 45ms 一轮：第一屏在 300ms 内到位，
不会被「整页先空一下」的观感拖累；折叠线下的几块本来就看不见。 */
html[data-template="editorial"] .detail > section:nth-of-type(1) { animation-delay: .06s; }
html[data-template="editorial"] .detail > section:nth-of-type(2) { animation-delay: .11s; }
html[data-template="editorial"] .detail > section:nth-of-type(3) { animation-delay: .16s; }
html[data-template="editorial"] .detail > section:nth-of-type(4) { animation-delay: .21s; }
html[data-template="editorial"] .detail > section:nth-of-type(5) { animation-delay: .26s; }
html[data-template="editorial"] .detail > section:nth-of-type(6) { animation-delay: .31s; }
html[data-template="editorial"] .detail > section:nth-of-type(7) { animation-delay: .36s; }
html[data-template="editorial"] .detail > section:nth-of-type(n+8) { animation-delay: .41s; }
/* 切换顺接 / 逆接：面板从左侧进场，指明「换到旁边那一组」 */
html[data-template="editorial"] .detail .tab-panel:not([hidden]) {
animation: ed-panel-in .22s ease-out;
}
/* ============ editorial 响应式（置于块尾，故必须带 html[data-template] 前缀） ============ */
@media (max-width: 900px) {
html[data-template="editorial"] .detail .char-decompose { grid-template-columns: repeat(2, 1fr); }
html[data-template="editorial"] .detail .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
html[data-template="editorial"] .detail-head { padding-top: 18px; }
html[data-template="editorial"] .detail-head h1 {
font-size: clamp(30px, 9.6vw, 46px);
letter-spacing: -.01em;
box-shadow: 6px 6px 0 var(--ed-blue);
transform: rotate(-.8deg);
}
html[data-template="editorial"] .detail .card {
padding: 18px 16px 20px; box-shadow: 4px 4px 0 var(--ed-ink);
}
html[data-template="editorial"] .detail .field { grid-template-columns: 1fr; gap: 8px; }
html[data-template="editorial"] .detail .char-decompose,
html[data-template="editorial"] .detail .related-grid { grid-template-columns: 1fr; }
/* 单列下错位会顶到相邻卡片，回正并取消负边距（:nth-child(n) 是为压过上面的 3n/4n 规则） */
html[data-template="editorial"] .detail .related-item:nth-child(n) {
transform: none; margin-top: 0; z-index: auto;
}
/* 窄屏接龙改为纵向，箭头随之朝下，间距由节点自身的上外边距统一控制 */
html[data-template="editorial"] .detail .jielong-chain {
flex-direction: column; align-items: flex-start; row-gap: 0;
}
html[data-template="editorial"] .detail .jielong-node { margin-left: 0; margin-top: 30px; }
html[data-template="editorial"] .detail .jielong-node:first-of-type { margin-top: 0; }
html[data-template="editorial"] .detail .jielong-node:not(:first-of-type)::before {
left: 22px; top: -18px; margin-top: 0;
width: 3px; height: 12px;
}
html[data-template="editorial"] .detail .jielong-node:not(:first-of-type)::after {
left: 17.5px; top: -8px; margin-top: 0;
border: 0;
border-top: 8px solid var(--ed-ink);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
html[data-template="editorial"] .detail .char-glyph { font-size: 52px; padding: 12px 6px 10px; }
html[data-template="editorial"] .grid-img { box-shadow: 5px 5px 0 var(--ed-red); }
}
/* ============================================================================
* 视觉模板：高饱和糖果撞色（html[data-template="candy"]）
* ----------------------------------------------------------------------------
* 定位：小学生成语 / 趣味学习 / 成语闯关频道。整套语言是「彩色糖纸 + 深可可字」：
*
* 1. 四个糖色只当底。高饱和色上放白字会掉到 3:1 以下（柠檬黄配白字只有
* 1.3:1），所以文字一律用深可可 --cw-ink；白字只出现在深一档的草莓红
* #D6214F 上（5.6:1）——导航第 4 项、当前接龙节点、换一组按钮三处。
* 2. 形状 = 大圆角 + 白圈 + 同色系软投影（贴纸/糖果）。不画黑描边、不用
* 硬位移阴影：那是 editorial 的语法，两个模板必须一眼分得开。
* 3. 撞色靠周期错开。卡片网格多数是 4 列，配色若用 4n+k 会整数排成竖色带
* （editorial 踩过两次），这里一律用 5 或 3，字义分解改用 2×2 棋盘。
* ==========================================================================*/
html[data-template="candy"] {
/* ---- 糖纸四色：只做底 ---- */
--cw-lemon: #FFD93B;
--cw-straw: #FF5D7E;
--cw-lake: #35C4E8;
--cw-grass: #7BDA6B;
/* ---- 同色浅底：大面积分组用，正文仍是深可可 ---- */
--cw-lemon-l: #FFF6D1;
--cw-straw-l: #FFE9EE;
--cw-lake-l: #E6F7FD;
--cw-grass-l: #EAFBE4;
/* ---- 深一档：投影、箭头、需要白字时的底 ---- */
--cw-lemon-d: #E09A00;
--cw-straw-d: #D6214F;
--cw-lake-d: #0E86B8;
--cw-grass-d: #2E9B3E;
/* ---- 纸、字、线 ---- */
--cw-paper: #FFF9EC;
--cw-ink: #2B2118;
--cw-ink-soft: #5B4A3F;
--cw-ink-faint: #6E5A4C;
--cw-line: #F3E4CE;
/* ---- 接管基础变量，全站色板一次换掉 ---- */
--primary: #D6214F;
--primary-dark: #B21440;
--primary-soft: #FFF0F4;
--ink: #2B2118;
--ink-soft: #5B4A3F;
--ink-faint: #6E5A4C;
--bg: #FFF9EC;
--card: #FFFFFF;
--border: #F3E4CE;
--gold: #A85B00; /* 首页拼音等 13px 小字，白底 5.1:1 */
--radius: 20px;
--shadow: 0 6px 18px rgba(120, 80, 40, .10);
/* 「圆润粗」的字：本机没有阿里普惠体，按 普惠体 → 苹方 → 思源黑 回落，
字重推到 900、字距小幅放开补圆体的呼吸感（见交付说明）。 */
--font-sans: "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "PingFang SC",
"Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
--font-serif: "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "PingFang SC",
"Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
/* ---------- 顶部：胶囊导航 + 贴纸式搜索框 ---------- */
html[data-template="candy"] .site-header {
background-color: #FFFDF6;
background-image: linear-gradient(90deg, var(--cw-lemon), var(--cw-straw), var(--cw-lake), var(--cw-grass));
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 5px;
border-bottom: 0;
box-shadow: 0 4px 14px rgba(120, 80, 40, .06);
}
html[data-template="candy"] .header-inner { gap: 14px; min-height: 68px; }
html[data-template="candy"] .logo {
font-family: var(--font-sans); font-size: 22px; font-weight: 900;
letter-spacing: .01em; color: var(--cw-ink);
background: var(--cw-lemon); border-radius: 999px; padding: 3px 16px;
box-shadow: 0 3px 0 var(--cw-lemon-d);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
}
html[data-template="candy"] .logo:hover {
color: var(--cw-ink); background: #FFE467;
transform: translateY(-2px); box-shadow: 0 5px 0 var(--cw-lemon-d);
}
/* 导航：四色胶囊轮转。颜色跟位置绑定，全站一致，所以不随页面乱换。 */
html[data-template="candy"] .nav { gap: 8px; flex-wrap: wrap; }
html[data-template="candy"] .nav a {
padding: 7px 18px; border: 2px solid #fff; border-radius: 999px;
color: var(--cw-ink); font-size: 15px; font-weight: 800; letter-spacing: .01em;
background: #fff; box-shadow: 0 3px 0 rgba(43, 33, 24, .08);
transition: transform .16s, box-shadow .16s, background .16s;
}
html[data-template="candy"] .nav a:nth-child(4n+1) { background: var(--cw-lemon); box-shadow: 0 3px 0 var(--cw-lemon-d); }
html[data-template="candy"] .nav a:nth-child(4n+2) { background: var(--cw-lake); box-shadow: 0 3px 0 var(--cw-lake-d); }
html[data-template="candy"] .nav a:nth-child(4n+3) { background: var(--cw-grass); box-shadow: 0 3px 0 var(--cw-grass-d); }
html[data-template="candy"] .nav a:nth-child(4n+4) { background: var(--cw-straw); box-shadow: 0 3px 0 var(--cw-straw-d); }
html[data-template="candy"] .nav a:hover { color: var(--cw-ink); transform: translateY(-2px); }
html[data-template="candy"] .nav a:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(43, 33, 24, .1); }
/* 搜索框：一圈四色渐变当「贴纸边」，输入区白底，按钮是草莓糖 */
html[data-template="candy"] .search-box {
align-items: center; gap: 4px; padding: 4px; border-radius: 999px;
background: linear-gradient(90deg, var(--cw-lemon), var(--cw-straw) 34%, var(--cw-lake) 68%, var(--cw-grass));
box-shadow: 0 4px 12px rgba(120, 80, 40, .10);
}
html[data-template="candy"] .search-box input {
height: 38px; padding: 0 16px; border: 0; border-radius: 999px 0 0 999px;
background: #fff; font-size: 15px;
}
html[data-template="candy"] .search-box input:focus { box-shadow: none; }
html[data-template="candy"] .search-box button {
height: 38px; padding: 0 20px; border: 0; border-radius: 999px;
background: var(--cw-straw-d); color: #fff; font-size: 15px; font-weight: 800;
transition: transform .14s, background .14s;
}
html[data-template="candy"] .search-box button:hover { background: #B21440; }
html[data-template="candy"] .search-box button:active { transform: translateY(1px); }
html[data-template="candy"] .suggest {
top: 54px; border: 2px solid var(--cw-line); border-radius: 20px;
box-shadow: 0 12px 26px rgba(120, 80, 40, .16);
}
html[data-template="candy"] .suggest a { border-bottom: 1px dashed var(--cw-line); }
html[data-template="candy"] .suggest a:hover,
html[data-template="candy"] .suggest a.active { background: var(--cw-lemon-l); }
/* ---------- 面包屑 ---------- */
html[data-template="candy"] .breadcrumb { padding: 18px 0 2px; font-size: 13px; }
html[data-template="candy"] .breadcrumb a { color: var(--cw-straw-d); font-weight: 700; }
html[data-template="candy"] .breadcrumb li + li::before { content: '›'; color: #C7B49B; margin-right: 6px; }
/* ---------- 标题区：马克笔高亮 + 星星贴纸 ---------- */
html[data-template="candy"] .detail-head { position: relative; padding: 22px 0 4px; }
html[data-template="candy"] .detail-head h1 {
display: inline-block; position: relative; z-index: 0;
font-family: var(--font-sans);
font-size: clamp(46px, 6.9vw, 88px); font-weight: 900;
line-height: 1.16; letter-spacing: .015em; color: var(--cw-ink);
padding: 0 .1em;
}
/* 马克笔：只压在字的下半部，比整块色底更像「划重点」，也不会抢字形 */
html[data-template="candy"] .detail-head h1::before {
content: ''; position: absolute; z-index: -1;
left: -.04em; right: -.04em; bottom: .1em; height: .42em;
background: linear-gradient(90deg, #FFD93B, #FFE98C);
border-radius: 999px; transform: rotate(-1.3deg);
}
html[data-template="candy"] .detail-head .pinyin {
font-size: 15px; color: var(--cw-ink-faint); letter-spacing: .18em;
}
/* 星星与圆点放在拼音那一行，不放在标题两侧：标题长度从 2 字到 12 字不等，
按百分比贴边的装饰在长标题上会压住字（实测「捉奸见双，抓贼见赃」）。
拼音行永远是居中的一小截，两侧的留白稳定。 */
html[data-template="candy"] .detail-head .head-sub::before {
content: ''; flex: 0 0 auto;
width: 17px; height: 17px; background: var(--cw-straw);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
transform: rotate(12deg) translateY(1px);
}
html[data-template="candy"] .detail-head .head-sub::after {
content: ''; flex: 0 0 auto;
width: 11px; height: 11px; border-radius: 50%; background: var(--cw-lake);
box-shadow: 6px 8px 0 -3px var(--cw-grass);
}
/* 田字格：白卡纸托底，圆角收大 */
html[data-template="candy"] .grid-figure { margin: 10px 0 16px; }
html[data-template="candy"] .grid-img {
background: #fff; padding: 10px; border-radius: 24px;
box-shadow: 0 6px 0 -1px var(--cw-lemon-l), 0 14px 26px rgba(120, 80, 40, .10);
}
/* ---------- 属性标签：彩色泡泡 ---------- */
html[data-template="candy"] .tags { gap: 10px; padding: 14px 0 6px; margin-bottom: 20px; }
html[data-template="candy"] .tag {
padding: 7px 16px; border: 2px solid #fff; border-radius: 999px;
background: var(--cw-lemon); box-shadow: 0 3px 0 rgba(43, 33, 24, .10);
}
/* 标签名和值都压深：12px 小字压在草莓红上，灰一档就掉到 4.5:1 以下，
所以两者只靠字号和字重区分，不靠颜色深浅。 */
html[data-template="candy"] .tag-label { color: var(--cw-ink); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
html[data-template="candy"] .tag-value { color: var(--cw-ink); font-size: 14px; font-weight: 800; }
html[data-template="candy"] .tag:nth-child(4n+1) { background: var(--cw-lemon); }
html[data-template="candy"] .tag:nth-child(4n+2) { background: var(--cw-lake); }
html[data-template="candy"] .tag:nth-child(4n+3) { background: var(--cw-grass); }
html[data-template="candy"] .tag:nth-child(4n+4) { background: var(--cw-straw); }
/* ---------- 卡片与板块标题：圆形编号 ---------- */
html[data-template="candy"] .card {
padding: 26px 28px; border: 2px solid var(--cw-line); border-radius: 24px;
box-shadow: 0 6px 18px rgba(120, 80, 40, .09);
}
html[data-template="candy"] .detail { counter-reset: cw-sec; }
html[data-template="candy"] .detail .card h2 {
display: flex; align-items: center; gap: 12px;
font-family: var(--font-sans); font-size: 23px; font-weight: 900;
letter-spacing: .01em; line-height: 1.35; padding-bottom: 0; margin-bottom: 18px;
}
html[data-template="candy"] .detail .card h2::after { display: none; }
html[data-template="candy"] .detail .card h2::before {
counter-increment: cw-sec; content: counter(cw-sec);
flex: 0 0 auto; width: 38px; height: 38px; box-sizing: border-box;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-sans); font-size: 17px; font-weight: 900;
color: var(--cw-ink); background: var(--cw-lemon);
border: 3px solid #fff; border-radius: 50%;
box-shadow: 0 3px 0 rgba(43, 33, 24, .12);
}
html[data-template="candy"] .detail > section:nth-of-type(4n+1) h2::before { background: var(--cw-lemon); }
html[data-template="candy"] .detail > section:nth-of-type(4n+2) h2::before { background: var(--cw-lake); }
html[data-template="candy"] .detail > section:nth-of-type(4n+3) h2::before { background: var(--cw-grass); }
html[data-template="candy"] .detail > section:nth-of-type(4n+4) h2::before { background: var(--cw-straw); }
/* ---------- 释义：逐行荧光笔 ----------
* 早先写成「色块 + 圆角 + 内阴影」，读起来像卡里又套了一张卡，也和上下白卡
* 抢层级。改成按行高的条纹渐变：每行只染下 44%，是真的荧光笔，不是容器。 */
html[data-template="candy"] .detail .explanation {
font-size: 17px; line-height: 1.95; color: var(--cw-ink);
/* 整段宽度会画出一条比句子长三倍的黄条，读起来像下划线丢了头。
收到文字宽度，荧光笔就停在最后一个字上。 */
width: fit-content; max-width: 100%;
background-image: linear-gradient(180deg, transparent 46%, #FFEFB3 46%, #FFEFB3 100%);
background-size: 100% 1.95em;
background-repeat: repeat-y;
}
html[data-template="candy"] .detail .story { font-size: 16px; line-height: 1.95; }
/* ---------- 详细解释：圆角字段标签 + 虚线分隔 ---------- */
/* 字段列表整体收到 46em：引文块若只收窄自己、虚线还横贯整卡，
右侧会留一块「被截断」的空白，看起来像没做完。 */
html[data-template="candy"] .detail .fields { gap: 0; max-width: 46em; }
html[data-template="candy"] .detail .field {
grid-template-columns: 66px 1fr; gap: 16px;
padding: 13px 0; border-bottom: 2px dashed var(--cw-line);
}
html[data-template="candy"] .detail .field:first-child { padding-top: 0; }
html[data-template="candy"] .detail .field:last-child { border-bottom: 0; padding-bottom: 0; }
html[data-template="candy"] .detail .field dt {
align-self: start; margin-top: 3px; padding: 2px 0;
text-align: center; color: var(--cw-ink);
font-size: 13px; font-weight: 800; line-height: 1.8;
background: var(--cw-lemon); border-radius: 999px;
box-shadow: 0 2px 0 rgba(43, 33, 24, .10);
}
html[data-template="candy"] .detail .field dd { font-size: 16px; line-height: 1.85; color: var(--cw-ink); }
html[data-template="candy"] .detail .field dd.quote {
max-width: 100%;
background: var(--cw-lake-l); border: 0; border-radius: 16px;
padding: 14px 18px; color: var(--cw-ink);
}
/* ---------- 造句：糖果圆号 ---------- */
html[data-template="candy"] .detail .zju-list { padding-left: 0; list-style: none; gap: 12px; counter-reset: cw-zju; }
html[data-template="candy"] .detail .zju-list li { position: relative; padding-left: 38px; max-width: 40em; font-size: 15px; line-height: 1.85; }
html[data-template="candy"] .detail .zju-list li::before {
counter-increment: cw-zju; content: counter(cw-zju);
position: absolute; left: 0; top: 2px;
width: 26px; height: 26px; box-sizing: border-box;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 900; color: var(--cw-ink);
background: var(--cw-grass); border: 2px solid #fff; border-radius: 50%;
box-shadow: 0 2px 0 rgba(43, 33, 24, .10);
}
/* ---------- 近反义词：颜色承载含义（近=青草、反=草莓） ---------- */
html[data-template="candy"] .detail .syn-ant > strong {
width: auto; margin-right: 10px; padding: 3px 14px;
border-radius: 999px; background: var(--cw-grass);
color: var(--cw-ink); font-size: 14px; font-weight: 800; vertical-align: 3px;
}
html[data-template="candy"] .detail .syn-ant:nth-of-type(2) > strong { background: var(--cw-straw); }
html[data-template="candy"] .detail .chip {
border: 2px solid #fff; border-radius: 999px; background: #fff;
color: var(--cw-ink); font-weight: 700;
box-shadow: 0 3px 0 rgba(43, 33, 24, .10);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, background .18s;
}
html[data-template="candy"] .detail .syn-ant:nth-of-type(1) .chip { background: var(--cw-grass-l); }
html[data-template="candy"] .detail .syn-ant:nth-of-type(2) .chip { background: var(--cw-straw-l); }
html[data-template="candy"] .detail a.chip:hover {
background: var(--cw-lemon); color: var(--cw-ink); border-color: #fff;
transform: translateY(-2px); box-shadow: 0 5px 0 rgba(43, 33, 24, .12);
}
html[data-template="candy"] .detail a.chip:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(43, 33, 24, .12); }
/* ---------- 趣味延伸：不整块填色（全页只剩它是粉的会显得像漏改），换成粉虚线描边 ---------- */
html[data-template="candy"] .detail .card.highlight { background: #fff; border: 3px dashed #FFC2CF; }
html[data-template="candy"] .detail .card.highlight .gold {
margin-right: 8px; padding: 1px 10px; border-radius: 999px;
background: var(--cw-straw); color: var(--cw-ink); font-size: 13px;
}
/* ---------- 字义分解：2×2 糖果卡，单字居中超大 ----------
* 四列时每格只有 240px，释义正文会被压到一行 8 个字；2×2 每格 500px，
* 四张卡仍是「四张不同糖果色」，字才有位置放大。配色按 4n 走棋盘：
* 行1 黄|湖蓝，行2 青草|草莓，相邻行列都不同色，不会连成竖色带。 */
html[data-template="candy"] .detail .char-decompose {
grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: stretch;
}
html[data-template="candy"] .detail .char-item {
gap: 12px; padding: 20px 22px 22px;
background: var(--cw-lemon); border: 3px solid #fff; border-radius: 26px;
box-shadow: 0 8px 0 rgba(43, 33, 24, .10), 0 14px 24px rgba(120, 80, 40, .10);
}
html[data-template="candy"] .detail .char-item:nth-of-type(4n+2) { background: var(--cw-lake); }
html[data-template="candy"] .detail .char-item:nth-of-type(4n+3) { background: var(--cw-grass); }
html[data-template="candy"] .detail .char-item:nth-of-type(4n+4) { background: var(--cw-straw); }
html[data-template="candy"] .detail .char-glyph {
align-self: center; width: 104px; height: 104px; margin: 2px auto 6px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-sans); font-size: 62px; font-weight: 900; line-height: 1;
color: var(--cw-ink); background: rgba(255, 255, 255, .93);
border: 0; border-radius: 30px;
box-shadow: 0 6px 0 rgba(43, 33, 24, .12), inset 0 0 0 3px rgba(255, 255, 255, .9);
}
html[data-template="candy"] .detail .char-glyph a { color: var(--cw-ink); }
html[data-template="candy"] .detail .char-meta { display: flex; flex-direction: column; flex: 1 1 auto; }
html[data-template="candy"] .detail .char-pron { font-size: 14px; font-weight: 600; color: var(--cw-ink); }
/* 属性行改成一行小字（原来是 12px 白胶囊，一行三个「卡里套胶囊」） */
html[data-template="candy"] .detail .char-extra { gap: 4px; margin-bottom: 8px; }
html[data-template="candy"] .detail .char-extra-item {
padding: 0; border: 0; border-radius: 0; background: none;
color: var(--cw-ink); font-size: 13px; font-weight: 600;
}
html[data-template="candy"] .detail .char-extra-sep { color: rgba(43, 33, 24, .40); }
html[data-template="candy"] .detail .char-shape { font-size: 13px; color: var(--cw-ink); }
/* 释义与上面的读音/属性之间拉一条虚线：卡里信息多，读者需要一眼分开「这字是谁」和「它什么意思」 */
html[data-template="candy"] .detail .char-senses {
gap: 11px; flex: 1 1 auto;
border-top: 1px dashed rgba(43, 33, 24, .22); padding-top: 11px;
}
html[data-template="candy"] .detail .sn-num { color: var(--cw-ink); font-weight: 900; }
html[data-template="candy"] .detail .sn-title { color: var(--cw-ink); font-size: 15px; font-weight: 800; }
html[data-template="candy"] .detail .sn-text { color: var(--cw-ink); font-size: 15px; line-height: 1.85; }
html[data-template="candy"] .detail .expand-sense {
align-self: center; margin-top: 8px; padding: 7px 18px;
border: 0; border-radius: 999px; background: #fff; color: var(--cw-straw-d);
font-size: 13px; font-weight: 800; box-shadow: 0 3px 0 rgba(43, 33, 24, .12);
transition: transform .16s, box-shadow .16s;
}
html[data-template="candy"] .detail .expand-sense:hover { background: #fff; color: var(--cw-straw-d); transform: translateY(-1px); }
html[data-template="candy"] .detail .expand-sense:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(43, 33, 24, .12); }
/* ---------- 成语接龙：糖果胶囊 + 圆角 chevron ---------- */
html[data-template="candy"] .detail .tabs { gap: 10px; margin-bottom: 20px; border-bottom: 0; }
html[data-template="candy"] .detail .tab {
margin-bottom: 0; padding: 9px 20px; border: 0; border-radius: 999px;
background: #fff; color: var(--cw-ink-soft);
font-size: 14px; font-weight: 800;
box-shadow: 0 3px 0 rgba(43, 33, 24, .10);
transition: transform .16s, box-shadow .16s, background .16s, color .16s;
}
html[data-template="candy"] .detail .tab:hover { color: var(--cw-ink); background: #fff; transform: translateY(-1px); }
html[data-template="candy"] .detail .tab.active {
background: var(--cw-lemon); color: var(--cw-ink);
box-shadow: 0 4px 0 var(--cw-lemon-d); transform: translateY(-1px);
}
html[data-template="candy"] .detail .tab:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cw-lemon-d); }
html[data-template="candy"] .detail .jielong-chain { gap: 10px; align-items: center; }
html[data-template="candy"] .detail .jielong-node {
position: relative; margin-left: 32px;
flex-direction: column; align-items: center; gap: 1px;
padding: 8px 15px; min-width: 0;
background: var(--cw-lemon-l); border: 2px solid #fff; border-radius: 999px;
box-shadow: 0 3px 0 rgba(43, 33, 24, .10);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, background .18s;
}
html[data-template="candy"] .detail .jielong-node:first-of-type { margin-left: 0; }
/* 白卡上的白胶囊会糊成一片，所以节点直接给糖纸色；当前成语单独一色 */
html[data-template="candy"] .detail .jielong-node:nth-of-type(3n+1) { background: var(--cw-lemon); }
html[data-template="candy"] .detail .jielong-node:nth-of-type(3n+2) { background: var(--cw-lake); }
html[data-template="candy"] .detail .jielong-node:nth-of-type(3n) { background: var(--cw-grass); }
html[data-template="candy"] .detail .jielong-node:hover {
transform: translateY(-3px); border-color: #fff;
box-shadow: 0 6px 0 rgba(43, 33, 24, .14);
}
html[data-template="candy"] .detail .jielong-node:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(43, 33, 24, .14); }
html[data-template="candy"] .detail .jielong-node .jw { font-size: 16px; font-weight: 800; color: var(--cw-ink); letter-spacing: .02em; }
/* 拼音压在湖水蓝上时 11px 的浅灰只有 3.2:1，所以这里也用深色，
层级靠字号（11px vs 16px）和字重（400 vs 800）拉开。 */
html[data-template="candy"] .detail .jielong-node .jp { font-size: 11px; color: #3A2C22; letter-spacing: .02em; }
/* 当前成语：唯一允许白字的地方（深草莓 5.6:1） */
html[data-template="candy"] .detail .jielong-node.current {
background: var(--cw-straw-d); border-color: #fff; box-shadow: 0 3px 0 #A50F36;
}
html[data-template="candy"] .detail .jielong-node.current .jw { color: #fff; }
html[data-template="candy"] .detail .jielong-node.current .jp { color: #FFEFF3; }
/* 箭头画在节点左侧：链条折行时行尾不会悬空，折行处由 app.js 打 is-jl-wrap 藏掉 */
html[data-template="candy"] .detail .jielong-arrow { display: none; }
html[data-template="candy"] .detail .jielong-node:not(:first-of-type)::before {
content: ''; position: absolute; left: -23px; top: 50%;
width: 13px; height: 13px; margin-top: -11px;
border-top: 3.5px solid var(--cw-lake-d); border-right: 3.5px solid var(--cw-lake-d);
border-radius: 4px; transform: rotate(45deg);
}
html[data-template="candy"] .detail .jielong-node:nth-of-type(4n+1)::before { border-color: var(--cw-lemon-d) var(--cw-lemon-d) transparent transparent; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(4n+2)::before { border-color: var(--cw-straw-d) var(--cw-straw-d) transparent transparent; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(4n+3)::before { border-color: var(--cw-lake-d) var(--cw-lake-d) transparent transparent; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(4n+4)::before { border-color: var(--cw-grass-d) var(--cw-grass-d) transparent transparent; }
html[data-template="candy"] .detail .jielong-node.is-jl-wrap::before { display: none; }
html[data-template="candy"] .detail .btn-regen {
padding: 10px 24px; border: 0; border-radius: 999px;
background: var(--cw-straw-d); color: #fff; font-size: 14px; font-weight: 800;
box-shadow: 0 4px 0 #A50F36;
transition: transform .16s, box-shadow .16s, background .16s;
}
html[data-template="candy"] .detail .btn-regen:hover { background: #B21440; color: #fff; transform: translateY(-1px); box-shadow: 0 5px 0 #A50F36; }
html[data-template="candy"] .detail .btn-regen:active { transform: translateY(3px); box-shadow: 0 1px 0 #A50F36; }
html[data-template="candy"] .detail .btn-regen:disabled { opacity: .62; transform: none; box-shadow: 0 4px 0 #A50F36; }
/* ---------- 相关成语：4 列矩阵 + 上浮 ---------- */
html[data-template="candy"] .detail .related-grid { gap: 16px; }
html[data-template="candy"] .detail .related-item {
padding: 16px 18px; border: 2px solid var(--cw-line); border-radius: 22px;
background: #fff; box-shadow: 0 4px 0 rgba(43, 33, 24, .10);
transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
}
html[data-template="candy"] .detail .related-item:hover {
transform: translateY(-4px);
box-shadow: 0 9px 0 rgba(43, 33, 24, .12), 0 14px 26px rgba(120, 80, 40, .12);
}
/* 周期 5 与 4 列互质：颜色横向游走，不会排成三根竖色带。只染 5 分之 2，
12 张里 9 张满色会把这一块喊得比字义卡还响。 */
html[data-template="candy"] .detail .related-item:nth-of-type(5n+1) { background: var(--cw-lemon); border-color: #fff; }
html[data-template="candy"] .detail .related-item:nth-of-type(5n+4) { background: var(--cw-lake); border-color: #fff; }
html[data-template="candy"] .detail .related-item .rw { font-family: var(--font-sans); font-size: 17px; font-weight: 900; color: var(--cw-ink); }
html[data-template="candy"] .detail .related-item small { color: var(--cw-ink); }
/* 板块容器统一白卡：一会儿白一会儿浅粉一会儿薄荷，宽度和底色来回跳，
读起来像三个模板拼起来。颜色全部交给卡片内部承担。 */
html[data-template="candy"] .detail > section:has(.tags-of-idiom) .chip { background: #fff; }
/* ---------- 首页：落地页跟详情页说同一种语言 ---------- */
html[data-template="candy"] .hero { position: relative; padding: 42px 0 20px; }
html[data-template="candy"] .hero h1 {
display: inline-block; position: relative; z-index: 0;
font-family: var(--font-sans); font-size: clamp(30px, 4.4vw, 54px); font-weight: 900;
letter-spacing: .02em; color: var(--cw-ink); margin-bottom: 12px;
}
html[data-template="candy"] .hero h1::after {
content: ''; position: absolute; z-index: -1;
left: -.1em; right: -.1em; bottom: .08em; height: .38em;
background: var(--cw-lemon); border-radius: 999px; transform: rotate(-1.2deg);
}
html[data-template="candy"] .hero-sub { margin: 16px 0 22px; font-size: 16px; color: var(--cw-ink-soft); }
html[data-template="candy"] .hero-sub strong {
padding: 1px 8px; border-radius: 8px; background: var(--cw-lemon); color: var(--cw-ink);
}
html[data-template="candy"] .hero-search {
max-width: 640px; padding: 5px; gap: 5px; align-items: center; border-radius: 999px;
background: linear-gradient(90deg, var(--cw-lemon), var(--cw-straw) 34%, var(--cw-lake) 68%, var(--cw-grass));
box-shadow: 0 8px 22px rgba(120, 80, 40, .12);
}
html[data-template="candy"] .hero-search input {
height: 46px; padding: 0 20px; border: 0; border-radius: 999px; font-size: 15px;
}
html[data-template="candy"] .hero-search input:focus { box-shadow: none; }
html[data-template="candy"] .hero-search button {
height: 46px; padding: 0 26px; border-radius: 999px;
background: var(--cw-straw-d); color: #fff; font-size: 16px; font-weight: 900;
transition: transform .14s, background .14s;
}
html[data-template="candy"] .hero-search button:hover { background: #B21440; }
html[data-template="candy"] .hero-search button:active { transform: translateY(2px); }
/* 首屏也撒一把糖：位置固定在 hero 两侧，窄屏收起免得压住标题 */
@media (min-width: 900px) {
html[data-template="candy"] .hero::before {
content: ''; position: absolute; left: 11%; top: 62px;
width: 14px; height: 14px; border-radius: 50%; background: var(--cw-grass);
box-shadow: 16px 30px 0 -4px var(--cw-lemon), 42px 6px 0 -5px var(--cw-straw);
}
html[data-template="candy"] .hero::after {
content: ''; position: absolute; right: 12%; top: 48px;
width: 30px; height: 30px; background: var(--cw-lake);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
transform: rotate(-12deg);
}
}
/* 26 个字母同时上四色会变成一堵彩票墙，所以字母格保持白卡，只在指到时上色 */
html[data-template="candy"] .letter {
border: 2px solid #fff; border-radius: 18px; background: #fff;
color: var(--cw-ink); font-weight: 900;
box-shadow: 0 3px 0 rgba(43, 33, 24, .10);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, background .18s;
}
html[data-template="candy"] .letter:hover {
background: var(--cw-lemon); border-color: #fff; color: var(--cw-ink);
transform: translateY(-3px); box-shadow: 0 6px 0 var(--cw-lemon-d);
}
html[data-template="candy"] .letter.empty { color: var(--cw-ink-faint); }
html[data-template="candy"] .letter small { color: var(--cw-ink-faint); }
/* 首页四张大白卡会连成一片，隔块换浅奶油，节奏才出来 */
html[data-template="candy"] main > section.card:nth-of-type(2n) {
background: #FFFBEF; border-color: #F7EAD6;
}
/* 热门卡：1080px 下 hot-grid 正好 4 列，配色同样用周期 5 */
html[data-template="candy"] .hot-item {
padding: 15px 17px; border: 2px solid var(--cw-line); border-radius: 20px; background: #fff;
box-shadow: 0 4px 0 rgba(43, 33, 24, .10);
transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, background .2s;
}
html[data-template="candy"] .hot-item:hover {
background: #fff; border-color: var(--cw-lemon-d);
transform: translateY(-4px); box-shadow: 0 9px 0 rgba(43, 33, 24, .12);
}/* 热门卡 20 张：只染 5 分之 2 的满色，其余白卡。全是浅糖色会整体发灰，
全是满色又排成色卡墙。 */
html[data-template="candy"] .hot-item:nth-of-type(5n+1) { background: var(--cw-lemon); border-color: #fff; }
html[data-template="candy"] .hot-item:nth-of-type(5n+4) { background: var(--cw-lake); border-color: #fff; }
html[data-template="candy"] .hot-word { font-family: var(--font-sans); font-size: 18px; font-weight: 900; color: var(--cw-ink); }
/* 糖纸上只有深可可字能稳定过 4.5:1：--gold 压在湖水蓝上只剩 2.5:1 */
html[data-template="candy"] .hot-pinyin { color: var(--cw-ink); font-size: 13px; font-weight: 600; }
html[data-template="candy"] .hot-expl { color: var(--cw-ink); font-size: 13px; }
/* 全站胶囊：白底 + 暖描边（白底白卡会互相吞掉），指到变柠檬糖 */
html[data-template="candy"] .chip {
border: 2px solid var(--cw-line); border-radius: 999px; background: #fff;
color: var(--cw-ink); font-weight: 700;
box-shadow: 0 3px 0 rgba(43, 33, 24, .07);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, background .18s, border-color .18s;
}
html[data-template="candy"] a.chip:hover {
background: var(--cw-lemon); color: var(--cw-ink); border-color: #fff;
transform: translateY(-2px); box-shadow: 0 5px 0 rgba(43, 33, 24, .12);
}
html[data-template="candy"] .chip small { margin-left: 5px; font-size: 11px; color: var(--cw-ink-faint); }
/* 主色 #D6214F 压在浅草莓底上只剩 4.33:1，深一档才够 */
html[data-template="candy"] .chip-py .cp-word { color: var(--primary-dark); }
html[data-template="candy"] .chip .cp-py { color: var(--cw-ink-faint); }
/* 首页四个入口胶囊是并列关系、没有先后，四色刚好一一对应，不是随机撒糖 */
html[data-template="candy"] .chips .chip-py:nth-of-type(4n+1) { background: var(--cw-lemon-l); border-color: #FFE9A8; }
html[data-template="candy"] .chips .chip-py:nth-of-type(4n+2) { background: var(--cw-lake-l); border-color: #BEE9F7; }
html[data-template="candy"] .chips .chip-py:nth-of-type(4n+3) { background: var(--cw-grass-l); border-color: #C6EFB9; }
html[data-template="candy"] .chips .chip-py:nth-of-type(4n+4) { background: var(--cw-straw-l); border-color: #FFC9D5; }
/* ---------- 其余页面：只跟随色板与圆角 ---------- */
html[data-template="candy"] .card h2::after { display: none; }
html[data-template="candy"] .card h2::before {
content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 10px;
background: var(--cw-lake); border-radius: 50%;
box-shadow: 0 0 0 3px #fff; vertical-align: 1px;
}
html[data-template="candy"] .card h2 { font-weight: 900; }
html[data-template="candy"] .result-list { border-radius: 24px; }
/* 列表页：标题跟着详情页走 900 字重，条目分隔从细实线换虚线，和详情页同一套 */
html[data-template="candy"] .list-head h1 { font-size: 30px; font-weight: 900; letter-spacing: .01em; line-height: 1.35; }
html[data-template="candy"] .result-item { border-bottom: 2px dashed var(--cw-line); }
html[data-template="candy"] .result-item:last-child { border-bottom: 0; }
html[data-template="candy"] .result-item .rw { font-weight: 900; }
html[data-template="candy"] .tag-lead,
html[data-template="candy"] .tag-intro p,
html[data-template="candy"] .list-desc { max-width: 42em; }
html[data-template="candy"] .tag-lead { font-size: 16px; line-height: 1.9; }
html[data-template="candy"] .muted { color: var(--cw-ink-soft); }
/* ---------- 页脚：奶油底 + 四色缎带 ---------- */
html[data-template="candy"] .site-footer {
margin-top: 44px; padding-top: 8px;
background-color: #FFF1DC; color: var(--cw-ink-soft);
background-image: linear-gradient(90deg, var(--cw-lemon), var(--cw-straw), var(--cw-lake), var(--cw-grass));
background-repeat: no-repeat; background-position: top; background-size: 100% 6px;
}
html[data-template="candy"] .footer-nav a { color: var(--cw-ink); font-weight: 800; }
html[data-template="candy"] .footer-nav a:hover { color: var(--cw-straw-d); }
html[data-template="candy"] .copyright { color: var(--cw-ink-faint); }
/* ============================================================================
* candy 动效（三处基本动效 + 按压反馈）
* ----------------------------------------------------------------------------
* 手感取「回弹」（橡皮球，300/8）：候选元素是给小学生用的，弹性比顺滑更有
* 反馈感。所有入场动画用 backwards 而不是 both —— 关键帧末帧已是正常状态，
* 用 both 会让动画的 transform 一直压住 :hover，鼠标移上去反而不动。
* ==========================================================================*/
@keyframes cw-pop {
0% { opacity: 0; transform: translateY(10px) scale(.94); }
60% { opacity: 1; transform: translateY(0) scale(1.015); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cw-title-in {
0% { opacity: 0; transform: translateY(-10px) scale(.96); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cw-panel-next {
from { opacity: 0; transform: translateX(14px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes cw-panel-prev {
from { opacity: 0; transform: translateX(-14px); }
to { opacity: 1; transform: translateX(0); }
}
/* ① 首屏出场：标题先到，卡片按阅读顺序跟上（间隔 35ms，总长 < 0.4s） */
html[data-template="candy"] .detail-head h1 { animation: cw-title-in .34s cubic-bezier(.34, 1.56, .64, 1) backwards; }
html[data-template="candy"] .detail .card { animation: cw-pop .4s cubic-bezier(.34, 1.56, .64, 1) backwards; }
html[data-template="candy"] .detail > section:nth-of-type(1) { animation-delay: .05s; }
html[data-template="candy"] .detail > section:nth-of-type(2) { animation-delay: .085s; }
html[data-template="candy"] .detail > section:nth-of-type(3) { animation-delay: .12s; }
html[data-template="candy"] .detail > section:nth-of-type(4) { animation-delay: .155s; }
html[data-template="candy"] .detail > section:nth-of-type(5) { animation-delay: .19s; }
html[data-template="candy"] .detail > section:nth-of-type(6) { animation-delay: .225s; }
html[data-template="candy"] .detail > section:nth-of-type(7) { animation-delay: .26s; }
html[data-template="candy"] .detail > section:nth-of-type(n+8) { animation-delay: .3s; }
/* ② 切换的来路：顺接从右来、逆接从左来，方向跟选项位置一致 */
html[data-template="candy"] .detail .tab-panel:not([hidden]) { animation: cw-panel-next .24s ease-out; }
html[data-template="candy"] .detail #tab-prev:not([hidden]) { animation-name: cw-panel-prev; }
/* ③ 换一组接龙：新节点逐个弹入，像糖豆落进罐子（innerHTML 重建后自动重播） */
html[data-template="candy"] .detail .jielong-node { animation: cw-pop .32s cubic-bezier(.34, 1.56, .64, 1) backwards; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(2) { animation-delay: .04s; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(3) { animation-delay: .08s; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(4) { animation-delay: .12s; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(5) { animation-delay: .16s; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(6) { animation-delay: .2s; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(7) { animation-delay: .24s; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(8) { animation-delay: .28s; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(n+9) { animation-delay: .32s; }
html[data-template="candy"] .detail .related-item { animation: cw-pop .36s cubic-bezier(.34, 1.56, .64, 1) backwards; }
html[data-template="candy"] .detail .related-item:nth-of-type(5n+2) { animation-delay: .03s; }
html[data-template="candy"] .detail .related-item:nth-of-type(5n+4) { animation-delay: .06s; }
html[data-template="candy"] .detail .related-item:nth-of-type(5n) { animation-delay: .09s; }
/* ---------- candy 响应式（块尾，必须带 html[data-template] 前缀） ---------- */
@media (max-width: 900px) {
html[data-template="candy"] .header-inner { gap: 10px; }
html[data-template="candy"] .detail-head h1 { font-size: clamp(34px, 8vw, 56px); }
html[data-template="candy"] .detail .card h2 { font-size: 21px; }
}
@media (max-width: 640px) {
html[data-template="candy"] .header-inner { min-height: 58px; }
html[data-template="candy"] .logo { font-size: 19px; padding: 3px 13px; }
/* 基础样式在 ≤640 把整条导航 display:none 掉了，手机上就只剩 logo 和搜索框。
这里把它放回来：跟 logo 同一行、横向可滑，不占第三行高度。 */
html[data-template="candy"] .nav {
display: flex; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0;
gap: 6px; padding: 2px 0; overflow-x: auto;
scrollbar-width: none; -ms-overflow-style: none;
}
html[data-template="candy"] .nav::-webkit-scrollbar { display: none; }
html[data-template="candy"] .nav a { flex: 0 0 auto; padding: 5px 12px; font-size: 13.5px; }
html[data-template="candy"] .detail .card { padding: 20px 18px; border-radius: 20px; }
html[data-template="candy"] .detail .card h2 { font-size: 19px; gap: 9px; }
html[data-template="candy"] .detail .card h2::before { width: 32px; height: 32px; font-size: 15px; }
/* 六个属性胶囊在 390px 上排三行，压到两行以内，别把正文顶下去 */
html[data-template="candy"] .detail .tags { gap: 7px; }
html[data-template="candy"] .tag { padding: 5px 12px; gap: 5px; }
html[data-template="candy"] .tag-label { font-size: 11px; }
html[data-template="candy"] .tag-value { font-size: 13px; }
/* 手机上四张糖果卡竖排：2 列时每格只剩 160px，单字和释义都放不下 */
html[data-template="candy"] .detail .char-decompose { grid-template-columns: 1fr; gap: 14px; }
html[data-template="candy"] .detail .char-glyph { width: 92px; height: 92px; font-size: 54px; border-radius: 26px; }
html[data-template="candy"] .detail .related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
html[data-template="candy"] .detail .field { grid-template-columns: 58px 1fr; gap: 12px; }
/* 接龙改竖排：横向胶囊在 375px 里一条只能放两个，折行后箭头会指到空白 */
html[data-template="candy"] .detail .jielong-chain { flex-direction: column; align-items: flex-start; row-gap: 0; }
html[data-template="candy"] .detail .jielong-node { margin-left: 0; margin-top: 22px; padding: 7px 14px; }
html[data-template="candy"] .detail .jielong-node:not(:first-of-type)::before {
left: 24px; top: -14px; margin-top: 0;
width: 9px; height: 9px; transform: rotate(135deg);
}
html[data-template="candy"] .hero h1 { font-size: 30px; }
html[data-template="candy"] .hero-search input { height: 42px; font-size: 14px; }
html[data-template="candy"] .hero-search button { height: 42px; padding: 0 18px; font-size: 15px; }
}
/* ============================================================================
* 视觉模板：极简留白拼贴（html[data-template="minimal"]）
* ----------------------------------------------------------------------------
* 北极星：一册展览图录。留白是结构，不是没填满；色块是标点，不是装饰。
*
* 三条硬规则，整块样式都靠它们自洽：
* 1. 颜色只出现在六个固定位置 —— 标题色标、板块编号、字义卡角标、
* 相关卡底条、接龙当前项、页脚标记。其余部分全黑白灰。
* 这是「少量色块」的执行方式：不是把彩色调淡，而是把彩色收进少数锚点。
* 2. 一律方角、1px 描边、零投影。圆角加阴影会立刻把极简变回普通卡片站。
* 3. 标题思源宋体、正文思源黑体、编号 Inter + tabular-nums。
* 三种字各司其职，字号阶梯拉开：108 / 27 / 17 / 13 / 11。
* ==========================================================================*/
html[data-template="minimal"] {
/* ---- 三个强调色：只做色块，不做大面积文字色 ---- */
--mn-cobalt: #1B3BDB; /* 钴蓝 */
--mn-verm: #C22F12; /* 朱红，白底 5.7:1，可承载 13px 小字 */
--mn-yellow: #FFD400; /* 明黄，白底 1.3:1，只做色块，绝不做字色 */
/* ---- 黑白灰纸面 ---- */
--mn-ink: #111111;
--mn-ink-2: #4A4A46;
--mn-ink-3: #63635E; /* 11px 小字，压在 #F4F4F1 上是 5.3:1 */
--mn-paper: #F4F4F1;
--mn-line: #E5E5E0; /* 卡片描边：看得见但不抢戏 */
--mn-line-2: #CFCFC8; /* 结构线：网格、分隔、标签之间的竖线 */
--mn-num: Inter, "SF Pro Display", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
/* ---- 接管基础变量 ---- */
--primary: #C22F12;
--primary-dark: #9E2510;
--primary-soft: #FBEEE9;
--ink: #111111;
--ink-soft: #4A4A46;
--ink-faint: #63635E;
--bg: #F4F4F1;
--card: #FFFFFF;
--border: #E5E5E0;
--gold: #A8451F; /* 首页 13px 拼音等小字，白底 5.9:1 */
--radius: 0px;
--shadow: none;
--font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
"Microsoft YaHei", "Segoe UI", sans-serif;
--font-serif: "Source Han Serif SC", "Source Han Serif SC Heavy",
"Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}
/* ---------- 顶部：一行文字，一条底线 ---------- */
html[data-template="minimal"] .site-header {
background: var(--mn-paper);
border-bottom: 1px solid var(--mn-line-2);
box-shadow: none;
}
html[data-template="minimal"] .header-inner { gap: 30px; min-height: 74px; }
html[data-template="minimal"] .logo {
font-family: var(--font-serif); font-size: 21px; font-weight: 900;
letter-spacing: .1em; color: var(--mn-ink); background: none;
padding: 0; border-radius: 0;
}
html[data-template="minimal"] .logo:hover { color: var(--mn-ink); }
/* 站名尾巴上一枚明黄小方块：全站唯一的「品牌记号」 */
html[data-template="minimal"] .logo::after {
content: ''; display: inline-block;
width: 7px; height: 7px; margin-left: 7px;
background: var(--mn-yellow); vertical-align: baseline;
transform: translateY(-9px);
}
html[data-template="minimal"] .nav { gap: 28px; flex-wrap: wrap; }
html[data-template="minimal"] .nav a {
position: relative; padding: 4px 0;
background: none; border: 0; border-radius: 0;
color: var(--mn-ink-2); font-size: 14px; font-weight: 500; letter-spacing: .06em;
transition: color .16s;
}
/* 下划线从 0 长到 100%：文字导航唯一允许的动作 */
html[data-template="minimal"] .nav a::after {
content: ''; position: absolute; left: 0; bottom: -1px;
width: 0; height: 2px; background: var(--mn-ink);
transition: width .2s cubic-bezier(.4, 0, .2, 1);
}
html[data-template="minimal"] .nav a:hover { color: var(--mn-ink); }
html[data-template="minimal"] .nav a:hover::after { width: 100%; }
/* 搜索框：没有框，只有一条底线 */
html[data-template="minimal"] .search-box {
align-items: center; gap: 0; padding: 0;
background: none; border: 0; border-bottom: 1px solid var(--mn-ink);
border-radius: 0; box-shadow: none;
}
html[data-template="minimal"] .search-box input {
height: 34px; padding: 0 4px; background: none; border: 0;
border-radius: 0; font-size: 14px; color: var(--mn-ink);
}
html[data-template="minimal"] .search-box input:focus { box-shadow: none; }
html[data-template="minimal"] .search-box button {
height: 34px; padding: 0 0 0 16px; background: none; border: 0;
border-radius: 0; color: var(--mn-ink);
font-size: 13px; font-weight: 700; letter-spacing: .12em;
transition: color .16s;
}
html[data-template="minimal"] .search-box button:hover { background: none; color: var(--mn-verm); }
html[data-template="minimal"] .suggest {
top: 40px; background: #fff; border: 1px solid var(--mn-ink);
border-radius: 0; box-shadow: 6px 6px 0 rgba(17, 17, 17, .08);
}
html[data-template="minimal"] .suggest a { border-bottom: 1px solid var(--mn-line); }
html[data-template="minimal"] .suggest a:hover,
html[data-template="minimal"] .suggest a.active { background: var(--mn-paper); }
/* ---------- 面包屑 ---------- */
html[data-template="minimal"] .breadcrumb {
padding: 30px 0 0; font-size: 12px; letter-spacing: .04em; color: var(--mn-ink-3);
}
html[data-template="minimal"] .breadcrumb a { color: var(--mn-ink-3); transition: color .16s; }
html[data-template="minimal"] .breadcrumb a:hover { color: var(--mn-verm); }
html[data-template="minimal"] .breadcrumb li + li::before {
content: '/'; color: var(--mn-line-2); margin: 0 9px;
}
/* ---------- 标题区：靠字号和一条色标立住 ---------- */
/* 对开版面：左边超大标题，右边田字格图版。这一栏是整页最像「图录」的地方，
也是唯一一处标题不孤零零地看着右边一片空白。 */
html[data-template="minimal"] .detail {
display: grid; grid-template-columns: minmax(0, 1fr) 380px;
column-gap: 56px; align-items: start;
}
html[data-template="minimal"] .detail > .detail-head {
position: relative; grid-column: 1; grid-row: 1;
text-align: left; padding: 30px 0 12px;
}
html[data-template="minimal"] .detail > .grid-figure {
grid-column: 2; grid-row: 1; justify-content: flex-end;
align-self: start; margin: 0; padding: 36px 0 12px;
}
/* 所有板块必须横跨两栏，否则会被排进右侧 380px 的图版栏里 */
html[data-template="minimal"] .detail > section { grid-column: 1 / -1; }
/* 开篇标记：标题上方一小段朱红横线，替代「大标题配一个大色块」的常见做法 */
html[data-template="minimal"] .detail-head::before {
content: ''; display: block; width: 44px; height: 3px;
margin-bottom: 26px; background: var(--mn-verm);
}
html[data-template="minimal"] .detail-head h1 {
position: relative; display: inline-block; z-index: 0;
margin: 0 0 14px; padding: 0 .06em .3em 0;
font-family: var(--font-serif); font-size: clamp(52px, 7.4vw, 104px);
font-weight: 900; line-height: 1.04; letter-spacing: -.01em;
color: var(--mn-ink);
overflow-wrap: anywhere;
}
/* 钴蓝色块压在标题左下角、首字的下沿。
曾经贴 right: 0，长标题（「捉奸见双，抓贼见赃」）换行后色块会飘到第二行
右边的空处，跟字脱开；锚死左边就不会。 */
html[data-template="minimal"] .detail-head h1::after {
content: ''; position: absolute; left: 0; bottom: .05em;
width: 1.35em; height: .13em; background: var(--mn-cobalt);
}
html[data-template="minimal"] .detail-head .head-sub { gap: 0; justify-content: flex-start; }
html[data-template="minimal"] .detail-head .head-sub::before,
html[data-template="minimal"] .detail-head .head-sub::after { display: none; }
html[data-template="minimal"] .detail-head .pinyin {
display: inline-block; padding-right: 12px;
background: none; font-family: var(--mn-num);
font-size: 12px; font-weight: 500; letter-spacing: .32em;
text-transform: uppercase; color: var(--mn-ink-3);
}
/* 属性标签：小号文字 + 竖线分隔，不是徽章。
标签名压到 10.5px 并抬起半个字，值 15px —— 让「组合 / abac式」只能读成一对。 */
html[data-template="minimal"] .detail > .tags {
grid-column: 1 / -1; grid-row: 2;
justify-content: flex-start; gap: 0;
margin: 0 0 26px; padding: 20px 0 0;
border: 0; border-top: 1px solid var(--mn-line-2);
background: none;
}
html[data-template="minimal"] .tag {
display: inline-flex; align-items: baseline; gap: 8px;
padding: 0 16px; background: none; border: 0; border-radius: 0;
border-right: 1px solid var(--mn-line-2);
}
html[data-template="minimal"] .tag:first-child { padding-left: 0; }
html[data-template="minimal"] .tag:last-child { border-right: 0; }
html[data-template="minimal"] .tag-label {
position: relative; top: -.08em;
font-size: 10.5px; font-weight: 500; letter-spacing: .18em;
color: var(--mn-ink-3);
}
html[data-template="minimal"] .tag-value {
font-size: 15px; font-weight: 600; color: var(--mn-ink);
}
/* 田字格：当作一张图版，靠 1px 描边站在纸上 */
html[data-template="minimal"] .grid-img {
border: 1px solid var(--mn-line); border-radius: 0;
background: #fff; padding: 6px;
}
/* ---------- 板块容器：白纸、1px 边、无圆角无影 ---------- */
html[data-template="minimal"] .detail { counter-reset: mn-sec; }
html[data-template="minimal"] .detail > section.card,
html[data-template="minimal"] .detail .card {
position: relative;
background: var(--mn-card); border: 1px solid var(--mn-line);
border-radius: 0; box-shadow: none;
padding: 44px 48px 48px; margin-bottom: 28px;
}
html[data-template="minimal"] .detail .card.highlight {
background: var(--mn-card); border-color: var(--mn-line);
}
/* 板块标题：编号 + 小方块 + 大号黑体，取消旧的下划线 */
html[data-template="minimal"] .detail > section { counter-increment: mn-sec; }
html[data-template="minimal"] .detail .card h2 {
display: flex; align-items: center; gap: 11px;
margin: 0 0 26px; padding: 0; border: 0;
font-family: var(--font-sans); font-size: 26px; font-weight: 800;
line-height: 1.3; letter-spacing: -.01em; color: var(--mn-ink);
}
html[data-template="minimal"] .detail .card h2::after {
content: counter(mn-sec, decimal-leading-zero);
order: -1; display: inline-block; position: static;
width: auto; height: auto; border: 0; border-radius: 0;
background: none; font-family: var(--mn-num);
font-size: 11px; font-weight: 600; letter-spacing: .1em;
color: var(--mn-ink-3); font-variant-numeric: tabular-nums;
}
html[data-template="minimal"] .detail .card h2::before {
content: ''; flex: 0 0 auto; width: 13px; height: 13px;
background: var(--mn-cobalt); border-radius: 0;
}
html[data-template="minimal"] .detail > section:nth-of-type(3n+2) h2::before { background: var(--mn-verm); }
html[data-template="minimal"] .detail > section:nth-of-type(3n) h2::before { background: var(--mn-yellow); }
/* ---------- 释义：首字下沉，朱红 ---------- */
html[data-template="minimal"] .detail .explanation {
margin: 0; padding: 0; max-width: 33em;
background: none; border: 0; border-radius: 0; box-shadow: none;
font-size: 19px; line-height: 2.0; letter-spacing: .01em;
color: var(--mn-ink);
}
/* 首字下沉是这页唯一的「朱红文字」，等于把重点词标在了段落入口 */
html[data-template="minimal"] .detail .explanation::first-letter {
float: left; padding: .1em .18em 0 0;
font-family: var(--font-serif); font-size: 3.1em; line-height: .86;
font-weight: 900; color: var(--mn-verm);
}
/* ---------- 字段列表：横向分隔线代替虚线 ---------- */
html[data-template="minimal"] .detail .fields { gap: 0; }
html[data-template="minimal"] .detail .field {
grid-template-columns: 88px 1fr; gap: 0 26px;
padding: 18px 0; border-top: 1px solid var(--mn-line);
}
html[data-template="minimal"] .detail .field:first-child { border-top: 0; padding-top: 0; }
html[data-template="minimal"] .detail .field dt {
padding-top: 4px; font-size: 11px; font-weight: 600;
letter-spacing: .16em; color: var(--mn-ink-3);
}
html[data-template="minimal"] .detail .field dd {
max-width: 42em; font-size: 16px; line-height: 1.9; color: var(--mn-ink);
}
/* 引文：不画线不垫色，整段凹进 1.4em。极简的「分区」靠位移，不靠框 */
html[data-template="minimal"] .detail .field dd.quote {
max-width: 34em; margin: 0; padding: 0 0 0 1.4em;
background: none; border: 0; border-radius: 0;
font-size: 15px; line-height: 1.95; color: var(--mn-ink-2);
}
/* ---------- 造句：编号用 Inter 站左栏 ---------- */
html[data-template="minimal"] .detail .zju-list { list-style: none; counter-reset: mn-zju; }
html[data-template="minimal"] .detail .zju-list li {
counter-increment: mn-zju; position: relative;
max-width: 32em; padding: 0 0 0 42px; margin-bottom: 14px;
font-size: 16px; line-height: 1.9; color: var(--mn-ink);
}
html[data-template="minimal"] .detail .zju-list li:last-child { margin-bottom: 0; }
html[data-template="minimal"] .detail .zju-list li::before {
content: counter(mn-zju, decimal-leading-zero);
position: absolute; left: 0; top: .28em;
font-family: var(--mn-num); font-size: 12px; font-weight: 600;
letter-spacing: .06em; color: var(--mn-cobalt);
font-variant-numeric: tabular-nums;
}
html[data-template="minimal"] .detail .story {
max-width: 34em; font-size: 16.5px; line-height: 2.05; color: var(--mn-ink);
}
/* ---------- 近反义词 ---------- */
html[data-template="minimal"] .detail .syn-ant { margin-bottom: 18px; }
html[data-template="minimal"] .detail .syn-ant:last-child { margin-bottom: 0; }
html[data-template="minimal"] .detail .syn-ant > strong {
width: 76px; font-size: 11px; font-weight: 600;
letter-spacing: .16em; color: var(--mn-ink-3);
vertical-align: middle;
}
html[data-template="minimal"] .detail .chip,
html[data-template="minimal"] .chip {
padding: 5px 13px; background: #fff; color: var(--mn-ink);
border: 1px solid var(--mn-line-2); border-radius: 0;
font-size: 14px; font-weight: 500;
transition: background .16s, color .16s, border-color .16s;
}
html[data-template="minimal"] a.chip:hover,
html[data-template="minimal"] .detail a.chip:hover {
background: var(--mn-ink); color: #fff; border-color: var(--mn-ink);
}
html[data-template="minimal"] .chip.plain { color: var(--mn-ink-3); background: none; }
/* ---------- 趣味延伸 ---------- */
html[data-template="minimal"] .detail .highlight p { font-size: 15.5px; line-height: 1.9; color: var(--mn-ink-2); }
html[data-template="minimal"] .detail .gold {
margin-right: 10px; padding: 2px 0 2px 0;
color: var(--mn-verm); font-size: 11px; font-weight: 700;
letter-spacing: .16em; vertical-align: 2px;
background: none;
}
html[data-template="minimal"] .detail .xhy-list li { font-size: 15.5px; line-height: 1.9; color: var(--mn-ink-2); }
/* ---------- 字义分解：字在左、义在右，左上角一枚色块当序号 ---------- */
html[data-template="minimal"] .detail .char-decompose {
grid-template-columns: repeat(2, 1fr); gap: 18px;
/* 不拉平：两张卡内容长度差一倍，stretch 会把短的那张拽出一条空白边框 */
align-items: start;
}
html[data-template="minimal"] .detail .char-item {
position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr);
column-gap: 20px; row-gap: 0; align-items: start;
padding: 30px 26px 26px; background: #fff;
border: 1px solid var(--mn-line); border-radius: 0;
}
/* 四个角标四色轮转，等于告诉读者「这是第几个字」 */
html[data-template="minimal"] .detail .char-item::before {
content: ''; position: absolute; left: -1px; top: -1px;
width: 22px; height: 22px; background: var(--mn-cobalt);
}
html[data-template="minimal"] .detail .char-item:nth-child(4n+2)::before { background: var(--mn-verm); }
html[data-template="minimal"] .detail .char-item:nth-child(4n+3)::before { background: var(--mn-yellow); }
html[data-template="minimal"] .detail .char-item:nth-child(4n)::before { background: var(--mn-ink); }
html[data-template="minimal"] .detail .char-glyph {
width: auto; height: auto; align-self: start;
display: block; padding: 10px 0 0;
font-family: var(--font-serif); font-size: 84px; font-weight: 900;
line-height: 1; text-align: left; letter-spacing: -.02em; color: var(--mn-ink);
background: none; border: 0; border-radius: 0;
}
html[data-template="minimal"] .detail .char-meta { padding-top: 6px; min-width: 0; }
html[data-template="minimal"] .detail .char-pron {
margin-bottom: 9px; font-family: var(--mn-num);
font-size: 11.5px; letter-spacing: .1em; color: var(--mn-ink-3);
}
html[data-template="minimal"] .detail .char-extra { gap: 4px; margin-bottom: 8px; }
html[data-template="minimal"] .detail .char-extra-item {
padding: 0; background: none; border: 0; border-radius: 0;
font-size: 11px; letter-spacing: .06em; color: var(--mn-ink-3);
}
html[data-template="minimal"] .detail .char-extra-sep { color: var(--mn-line-2); }
html[data-template="minimal"] .detail .char-shape { margin-bottom: 0; font-size: 13px; line-height: 1.7; color: var(--mn-ink-3); }
html[data-template="minimal"] .detail .char-senses {
gap: 9px; margin-top: 12px; padding-top: 13px;
border-top: 1px solid var(--mn-line);
}
html[data-template="minimal"] .detail .sn-num {
font-family: var(--mn-num); font-size: 11px; font-weight: 600;
line-height: 1.95; color: var(--mn-ink-3);
}
html[data-template="minimal"] .detail .sn-title { font-size: 15px; font-weight: 700; color: var(--mn-ink); }
html[data-template="minimal"] .detail .sn-text {
margin-top: 3px; font-size: 14px; line-height: 1.9; color: var(--mn-ink-2);
}
html[data-template="minimal"] .detail .expand-sense {
align-self: flex-start; margin-top: 14px;
padding: 0 0 3px; background: none; border: 0;
border-bottom: 1px solid var(--mn-ink); border-radius: 0;
color: var(--mn-ink); font-size: 12px; letter-spacing: .06em;
transition: color .16s, border-color .16s;
}
html[data-template="minimal"] .detail .expand-sense:hover {
background: none; color: var(--mn-verm); border-bottom-color: var(--mn-verm);
}
/* ---------- 接龙：一条极简列表，细黑箭头串起来 ---------- */
html[data-template="minimal"] .detail .tabs {
gap: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--mn-line);
}
html[data-template="minimal"] .detail .tab {
padding: 0 0 12px; margin-bottom: -1px;
background: none; border: 0; border-bottom: 2px solid transparent;
border-radius: 0; color: var(--mn-ink-3);
font-size: 14px; font-weight: 500; letter-spacing: .04em;
transition: color .16s;
}
html[data-template="minimal"] .detail .tab:hover { color: var(--mn-ink); }
html[data-template="minimal"] .detail .tab.active {
color: var(--mn-ink); font-weight: 700; border-bottom-color: var(--mn-ink);
}
html[data-template="minimal"] .detail .jielong-chain {
gap: 0; row-gap: 12px; align-items: flex-start; margin-bottom: 20px;
}
html[data-template="minimal"] .detail .jielong-node {
position: relative; display: flex; flex-direction: column; align-items: flex-start;
gap: 3px; min-width: 0; margin-left: 20px; padding: 5px 2px 5px 28px;
background: none; border: 0; border-radius: 0; box-shadow: none;
color: var(--mn-ink); line-height: 1.4; transition: color .16s;
}
html[data-template="minimal"] .detail .jielong-node:first-of-type { margin-left: 0; padding-left: 0; }
html[data-template="minimal"] .detail .jielong-node .jw {
font-family: var(--font-serif); font-size: 17px; font-weight: 700; letter-spacing: .02em;
}
html[data-template="minimal"] .detail .jielong-node .jp {
font-family: var(--mn-num); font-size: 10.5px; font-weight: 400;
letter-spacing: .04em; color: var(--mn-ink-3);
}
html[data-template="minimal"] .detail .jielong-node:hover {
background: none; border: 0; box-shadow: none; transform: none; color: var(--mn-verm);
}
html[data-template="minimal"] .detail .jielong-node.current { background: none; border: 0; color: var(--mn-verm); }
/* 当前成语压一道明黄粗下划线：不盖字形，是唯一一处「你在这里」 */
html[data-template="minimal"] .detail .jielong-node.current .jw {
text-decoration: underline;
text-decoration-color: var(--mn-yellow);
text-decoration-thickness: 4px;
text-underline-offset: 4px;
}
html[data-template="minimal"] .detail .jielong-arrow { display: none; }
/* 箭头对准成语那一行的中线（padding 5px + 半行 12px），不是整个节点的中线 */
html[data-template="minimal"] .detail .jielong-node:not(:first-of-type)::before {
content: ''; position: absolute; left: 0; top: 17px;
width: 13px; height: 1px; background: var(--mn-ink-2);
}
html[data-template="minimal"] .detail .jielong-node:not(:first-of-type)::after {
content: ''; position: absolute; left: 13px; top: 14px;
border-left: 6px solid var(--mn-ink-2);
border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
/* 折行后行首那颗的箭头会指向左边空白，由 app.js 打标记藏掉 */
html[data-template="minimal"] .detail .jielong-node.is-jl-wrap::before,
html[data-template="minimal"] .detail .jielong-node.is-jl-wrap::after { display: none; }
html[data-template="minimal"] .detail .btn-regen {
margin-top: 4px; padding: 9px 20px;
background: none; border: 1px solid var(--mn-ink); border-radius: 0;
color: var(--mn-ink); font-size: 13px; font-weight: 600; letter-spacing: .08em;
transition: background .16s, color .16s;
}
html[data-template="minimal"] .detail .btn-regen:hover { background: var(--mn-ink); color: #fff; }
html[data-template="minimal"] .detail .btn-regen:disabled { opacity: .5; }
/* ---------- 相关成语：网格卡 + 底边窄色块 ---------- */
html[data-template="minimal"] .detail .related-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
html[data-template="minimal"] .detail .related-item {
position: relative; display: flex; flex-direction: column; gap: 4px;
padding: 18px 17px 21px; background: #fff;
border: 1px solid var(--mn-line); border-radius: 0;
transition: border-color .18s;
}
html[data-template="minimal"] .detail .related-item:hover {
background: #fff; border-color: var(--mn-ink); box-shadow: none; transform: none;
}
/* 底条只给 5 分之 3 的卡片。没分到的卡片干脆不画 —— 一排灰条会把「克制」变成「没做完」。
周期 5 与 4 列互质，颜色才会横向游走而不是排成竖带。 */
html[data-template="minimal"] .detail .related-item::after {
content: ''; position: absolute; left: 17px; bottom: 11px;
width: 22px; height: 3px; display: none;
transition: width .22s cubic-bezier(.4, 0, .2, 1), background .18s;
}
html[data-template="minimal"] .detail .related-item:nth-child(5n+1)::after { display: block; background: var(--mn-cobalt); }
html[data-template="minimal"] .detail .related-item:nth-child(5n+3)::after { display: block; background: var(--mn-verm); }
html[data-template="minimal"] .detail .related-item:nth-child(5n)::after { display: block; background: var(--mn-yellow); }
html[data-template="minimal"] .detail .related-item:hover::after { width: 44px; }
html[data-template="minimal"] .detail .related-item .rw {
font-family: var(--font-serif); font-size: 17px; font-weight: 700;
letter-spacing: .02em; color: var(--mn-ink);
}
html[data-template="minimal"] .detail .related-item .rp,
html[data-template="minimal"] .detail .related-item small {
font-family: var(--mn-num); font-size: 11px; letter-spacing: .04em;
color: var(--mn-ink-3);
}
/* ---------- 列表页（拼音索引 / 标签 / 搜索）：条目当图录条目排 ---------- */
/* 导语撑满整页时一行 71 字，读不到底；收到 46em */
html[data-template="minimal"] .list-desc { max-width: 46em; }
html[data-template="minimal"] .list-desc a { color: var(--mn-verm); text-decoration: underline; text-underline-offset: 2px; }
html[data-template="minimal"] .result-list { border: 1px solid var(--mn-line); box-shadow: none; border-radius: 0; }
html[data-template="minimal"] .result-item { padding: 17px 22px; gap: 5px 12px; }
/* 每一条都是朱红的话，「朱红 = 重点」就不成立了；链接身份交给宋体与字重 */
html[data-template="minimal"] .result-item .rw {
font-family: var(--font-serif); font-size: 18px; font-weight: 700;
letter-spacing: .02em; color: var(--mn-ink);
}
html[data-template="minimal"] .result-item .rp {
font-family: var(--mn-num); font-size: 12px; letter-spacing: .06em; color: var(--mn-ink-3);
}
html[data-template="minimal"] .result-item .re {
flex: 1 1 100%; font-size: 13.5px; line-height: 1.75; color: var(--mn-ink-2);
}
html[data-template="minimal"] .result-item:hover { background: var(--mn-paper); }
html[data-template="minimal"] .result-item:hover .rw { color: var(--mn-verm); }
/* 所属标签：一组方框，指到就整块反黑 */
html[data-template="minimal"] .detail .tags-of-idiom .chip {
padding: 6px 14px; font-size: 13.5px;
}
/* ---------- 页脚 ---------- */
html[data-template="minimal"] .site-footer {
margin-top: 56px; padding: 34px 0 46px;
background: none; border-top: 1px solid var(--mn-line-2);
color: var(--mn-ink-3); font-size: 12.5px; letter-spacing: .02em;
}
/* 基础页脚是深底浅字，这三处必须逐个改回深字，否则在灰白底上几乎看不见 */
html[data-template="minimal"] .copyright { color: var(--mn-ink-3); font-size: 12.5px; }
html[data-template="minimal"] .footer-inner {
align-items: flex-start; padding: 0 16px; text-align: left; gap: 10px;
}
html[data-template="minimal"] .footer-nav { justify-content: flex-start; gap: 18px; }
html[data-template="minimal"] .footer-nav a { color: var(--mn-ink-2); font-size: 13px; }
html[data-template="minimal"] .footer-nav a:hover { color: var(--mn-verm); }
html[data-template="minimal"] .site-footer .container { position: relative; }
html[data-template="minimal"] .site-footer .container::before {
content: ''; display: block; width: 34px; height: 3px;
margin-bottom: 18px; background: var(--mn-yellow);
}
/* ---------- 首页：同一套语法，更大的留白 ----------
hero 做对开两栏：左边标题 + 搜索，右边一条窄边注（收录量 / 查询方式）。
只靠缩小标题来「填满」会让大标题失重；右栏有字，右下的空白才读得成留白。 */
html[data-template="minimal"] .hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 216px;
column-gap: 56px;
text-align: left; padding: 64px 0 44px;
}
html[data-template="minimal"] .hero h1 {
position: relative; grid-column: 1; grid-row: 1;
justify-self: start; align-self: start;
margin: 0 0 10px;
font-family: var(--font-serif); font-size: clamp(44px, 6vw, 84px);
font-weight: 900; line-height: 1.08; letter-spacing: -.01em; color: var(--mn-ink);
}
html[data-template="minimal"] .hero h1::after {
content: ''; position: absolute; left: 0; bottom: -.2em;
width: 100%; height: 4px; background: var(--mn-cobalt);
}
/* 边注：跨标题与搜索两行，靠 1px 竖线立在右栏；末端一小段朱红标出「注记到此为止」 */
html[data-template="minimal"] .hero-sub {
grid-column: 2; grid-row: 1 / span 2;
align-self: stretch; position: relative;
margin: 0; padding: 8px 0 0 20px;
border-left: 1px solid var(--mn-line-2);
font-size: 12px; line-height: 2.1; color: var(--mn-ink-3);
/* 中文默认任意字间可断，"拼音" 会被拆成 "拼｜音"。keep-all 只在空格与
斜杠处断行，断点落在「·」和「/」上，读起来仍是一组词。 */
word-break: keep-all; overflow-wrap: anywhere;
text-wrap: pretty;
}
html[data-template="minimal"] .hero-sub::after {
content: ''; position: absolute; left: -1px; bottom: 2px;
width: 1px; height: 30px; background: var(--mn-verm);
}
html[data-template="minimal"] .hero-sub strong {
font-family: var(--mn-num); font-weight: 700; color: var(--mn-verm);
font-variant-numeric: tabular-nums;
}
/* 底线画在输入框上、按钮 align-self 到底，两者底边才咬得住。
线画在容器上时按钮会浮在线条上方（flex stretch 与固定高度打架）。 */
html[data-template="minimal"] .hero-search {
grid-column: 1; grid-row: 2; justify-self: start; align-self: end;
width: 100%; max-width: 520px; margin: 26px 0 0; gap: 0; align-items: flex-end;
border-bottom: 0;
}
html[data-template="minimal"] .hero-search input {
flex: 1; height: 50px; padding: 0 4px; min-width: 0;
background: none; border: 0; border-bottom: 2px solid var(--mn-ink);
border-radius: 0; font-size: 16px; color: var(--mn-ink);
}
html[data-template="minimal"] .hero-search input:focus { box-shadow: none; }
html[data-template="minimal"] .hero-search button {
height: 50px; padding: 0 24px; background: var(--mn-ink); border: 0;
border-radius: 0; color: #fff;
font-size: 14px; font-weight: 600; letter-spacing: .12em;
transition: background .16s;
}
html[data-template="minimal"] .hero-search button:hover { background: var(--mn-verm); }
/* 首页所有白卡与详情页同一语法 */
html[data-template="minimal"] .card {
background: var(--mn-card); border: 1px solid var(--mn-line);
border-radius: 0; box-shadow: none; padding: 32px 36px; margin-bottom: 20px;
}
html[data-template="minimal"] .card h2 {
padding-bottom: 0; margin-bottom: 22px;
font-size: 22px; font-weight: 800; letter-spacing: -.01em;
}
html[data-template="minimal"] .card h2::after { display: none; }
html[data-template="minimal"] .muted { font-size: 14.5px; line-height: 1.9; color: var(--mn-ink-2); max-width: 40em; }
html[data-template="minimal"] .muted a { color: var(--mn-verm); }
/* 26 个字母格：方框，只有 hover 才反黑，绝不上色 */
/* 26 个字母排成正好两行，比 11+11+4 的残行整齐 */
html[data-template="minimal"] .letters { grid-template-columns: repeat(13, 1fr); gap: 10px; }
html[data-template="minimal"] .letter {
padding: 12px 4px; background: #fff;
border: 1px solid var(--mn-line); border-radius: 0;
color: var(--mn-ink); font-family: var(--mn-num);
font-size: 17px; font-weight: 600; letter-spacing: .04em;
transition: background .16s, color .16s, border-color .16s;
}
html[data-template="minimal"] .letter small {
color: var(--mn-ink-3); font-size: 10.5px; font-weight: 400; letter-spacing: 0;
}
html[data-template="minimal"] .letter:hover {
background: var(--mn-ink); border-color: var(--mn-ink); color: #fff;
}
html[data-template="minimal"] .letter:hover small { color: rgba(255, 255, 255, .72); }
html[data-template="minimal"] .letter.empty { color: var(--mn-line-2); }
html[data-template="minimal"] .letter.empty:hover { background: #fff; border-color: var(--mn-line); color: var(--mn-line-2); }
/* 热门成语卡：底边窄色块，周期 5 与 4 列互质 */
html[data-template="minimal"] .hot-item {
position: relative; gap: 5px; padding: 16px 16px 24px;
background: #fff; border: 1px solid var(--mn-line); border-radius: 0;
transition: border-color .18s;
}
html[data-template="minimal"] .hot-item:hover {
background: #fff; border-color: var(--mn-ink); box-shadow: none; transform: none;
}
html[data-template="minimal"] .hot-item::after {
content: ''; position: absolute; left: 16px; bottom: 10px;
width: 22px; height: 3px; display: none;
transition: width .22s cubic-bezier(.4, 0, .2, 1), background .18s;
}
html[data-template="minimal"] .hot-item:nth-child(5n+1)::after { display: block; background: var(--mn-cobalt); }
html[data-template="minimal"] .hot-item:nth-child(5n+3)::after { display: block; background: var(--mn-verm); }
html[data-template="minimal"] .hot-item:nth-child(5n)::after { display: block; background: var(--mn-yellow); }
html[data-template="minimal"] .hot-item:hover::after { width: 44px; }
html[data-template="minimal"] .hot-word {
font-family: var(--font-serif); font-size: 18px; font-weight: 700;
letter-spacing: .02em; color: var(--mn-ink);
}
html[data-template="minimal"] .hot-pinyin {
margin-top: 1px; font-family: var(--mn-num);
font-size: 11px; letter-spacing: .06em; color: var(--mn-ink-3);
}
html[data-template="minimal"] .hot-expl {
margin-top: 5px; font-size: 13px; line-height: 1.75; color: var(--mn-ink-2);
}
/* 「换几种查法」：竖线分隔的文字组，不用方框 ——
四个宽窄不一的方框摆在这块版面上像一张没对齐的表格，而这个模板里
所有并列项（属性、标签）本来就是「小字 + 竖线」，这里沿用同一语法。 */
html[data-template="minimal"] .chips:has(.chip-py) { gap: 0; row-gap: 16px; margin-top: 24px; }
html[data-template="minimal"] .chips { gap: 10px; }
html[data-template="minimal"] .chip-py {
display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px;
padding: 1px 22px; text-align: left;
background: none; border: 0; border-left: 1px solid var(--mn-line-2);
border-radius: 0;
}
html[data-template="minimal"] .chip-py:first-child { padding-left: 0; border-left: 0; }
html[data-template="minimal"] .chip-py .cp-word { font-size: 15px; font-weight: 600; color: var(--mn-ink); }
html[data-template="minimal"] .chip-py .cp-py { font-size: 11.5px; color: var(--mn-ink-3); letter-spacing: .02em; }
/* 悬停不整块反色：只给标题压一道明黄，跟「你在这里」同一套记号 */
html[data-template="minimal"] a.chip-py:hover { background: none; color: var(--mn-ink); }
html[data-template="minimal"] a.chip-py:hover .cp-word { box-shadow: inset 0 -.55em 0 var(--mn-yellow); }
html[data-template="minimal"] .chip small {
margin-left: 6px; color: var(--mn-ink-3);
font-family: var(--mn-num); font-size: 11px;
}
/* ---------- 动效：只做「入场轻推」一种 ---------- */
@keyframes mn-rise {
from { opacity: 0; transform: translateY(9px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes mn-ink {
from { opacity: 0; }
to { opacity: 1; }
}
html[data-template="minimal"] .detail-head h1,
html[data-template="minimal"] .hero h1 {
animation: mn-rise .5s cubic-bezier(.22, .8, .24, 1) backwards;
}
html[data-template="minimal"] .detail > section {
animation: mn-rise .46s cubic-bezier(.22, .8, .24, 1) backwards;
}
html[data-template="minimal"] .detail > section:nth-of-type(1) { animation-delay: .05s; }
html[data-template="minimal"] .detail > section:nth-of-type(2) { animation-delay: .09s; }
html[data-template="minimal"] .detail > section:nth-of-type(3) { animation-delay: .13s; }
html[data-template="minimal"] .detail > section:nth-of-type(4) { animation-delay: .17s; }
html[data-template="minimal"] .detail > section:nth-of-type(5) { animation-delay: .2s; }
html[data-template="minimal"] .detail > section:nth-of-type(6) { animation-delay: .23s; }
html[data-template="minimal"] .detail > section:nth-of-type(7) { animation-delay: .26s; }
html[data-template="minimal"] .detail > section:nth-of-type(n+8) { animation-delay: .29s; }
html[data-template="minimal"] .detail .tab-panel:not([hidden]) { animation: mn-ink .2s ease-out; }
/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
html[data-template="minimal"] .detail .related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
/* 对开版面在 860 以下撑不开：380px 的图版栏会把标题挤成一列两个字 */
html[data-template="minimal"] .detail { display: block; }
html[data-template="minimal"] .detail > .grid-figure {
justify-content: flex-start; padding: 0 0 26px;
}
html[data-template="minimal"] .detail .char-decompose { grid-template-columns: 1fr; }
html[data-template="minimal"] .detail .related-grid { grid-template-columns: repeat(2, 1fr); }
html[data-template="minimal"] .detail > section.card,
html[data-template="minimal"] .detail .card { padding: 30px 26px 32px; }
}
@media (max-width: 640px) {
html[data-template="minimal"] .header-inner { min-height: 60px; gap: 16px; }
html[data-template="minimal"] .logo { font-size: 18px; letter-spacing: .06em; }
html[data-template="minimal"] .logo::after { width: 5px; height: 5px; margin-left: 5px; transform: translateY(-7px); }
/* 基础样式在手机上把导航整条藏了；极简模板只需要三个字，横滑也放得下 */
html[data-template="minimal"] .nav {
display: flex; gap: 16px; flex-wrap: nowrap;
overflow-x: auto; scrollbar-width: none;
}
html[data-template="minimal"] .nav::-webkit-scrollbar { display: none; }
html[data-template="minimal"] .nav a { flex: 0 0 auto; font-size: 13px; letter-spacing: .02em; }
html[data-template="minimal"] .search-box { border-bottom-width: 1px; }
html[data-template="minimal"] .search-box input { height: 30px; font-size: 13px; }
html[data-template="minimal"] .search-box button { height: 30px; padding-left: 10px; font-size: 12px; }
html[data-template="minimal"] .breadcrumb { padding-top: 22px; }
html[data-template="minimal"] .detail-head { padding: 22px 0 26px; margin-bottom: 22px; }
html[data-template="minimal"] .detail-head::before { margin-bottom: 20px; width: 34px; height: 2px; }
html[data-template="minimal"] .detail-head h1 { font-size: clamp(36px, 12vw, 52px); margin-bottom: 12px; }
html[data-template="minimal"] .detail-head .pinyin { font-size: 11px; letter-spacing: .24em; }
/* 属性标签改两列：六个属性竖排会吃掉 145px，两列只要 90px */
html[data-template="minimal"] .detail > .tags {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 9px 12px; margin-top: 0; padding-top: 18px;
}
html[data-template="minimal"] .tag { padding: 0; border-right: 0; gap: 7px; }
html[data-template="minimal"] .tag-label { min-width: 4.4em; }
html[data-template="minimal"] .detail > section.card,
html[data-template="minimal"] .detail .card { padding: 24px 18px 26px; margin-bottom: 16px; }
html[data-template="minimal"] .detail .card h2 { font-size: 21px; gap: 9px; margin-bottom: 20px; }
html[data-template="minimal"] .detail .explanation { font-size: 17px; line-height: 1.95; }
/* 小屏上首字下沉会占掉两行半，改成首字加粗标红，不下沉 */
html[data-template="minimal"] .detail .explanation::first-letter {
float: none; padding: 0 .22em 0 0; font-size: 1.05em; color: var(--mn-verm);
font-weight: 900;
}
html[data-template="minimal"] .detail .field { grid-template-columns: 1fr; gap: 5px; padding: 14px 0; }
html[data-template="minimal"] .detail .field dt { padding-top: 0; }
html[data-template="minimal"] .detail .field dd { font-size: 15px; }
html[data-template="minimal"] .detail .field dd.quote { padding-left: 15px; font-size: 14.5px; }
html[data-template="minimal"] .detail .zju-list li { padding-left: 34px; font-size: 15px; }
html[data-template="minimal"] .detail .story { font-size: 15.5px; }
html[data-template="minimal"] .detail .syn-ant > strong { display: block; width: auto; margin-bottom: 8px; }
/* 字义卡改单列：字在上、义在下，两栏在 390px 里会把释义压成每行 8 个字 */
html[data-template="minimal"] .detail .char-item {
grid-template-columns: 1fr; column-gap: 0;
padding: 30px 20px 24px;
}
html[data-template="minimal"] .detail .char-glyph { font-size: 76px; padding-bottom: 10px; }
html[data-template="minimal"] .detail .char-item::before { width: 18px; height: 18px; }
html[data-template="minimal"] .detail .sn-text { font-size: 14px; }
/* 接龙竖排：横向一条只放得下两个，折行后箭头会指到空白 */
html[data-template="minimal"] .detail .jielong-chain {
flex-direction: column; align-items: flex-start; row-gap: 0;
}
html[data-template="minimal"] .detail .jielong-node {
margin-left: 0; margin-top: 34px; padding-left: 0;
}
html[data-template="minimal"] .detail .jielong-node:first-of-type { margin-top: 0; }
html[data-template="minimal"] .detail .jielong-node:not(:first-of-type)::before {
left: 4px; top: -21px; width: 1px; height: 15px;
}
html[data-template="minimal"] .detail .jielong-node:not(:first-of-type)::after {
left: 0; top: -9px; border: 0;
border-top: 7px solid var(--mn-ink-2);
border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
}
html[data-template="minimal"] .detail .related-grid { gap: 10px; }
html[data-template="minimal"] .detail .related-item { padding: 14px 14px 22px; }
html[data-template="minimal"] .detail .related-item::after { left: 14px; bottom: 9px; width: 18px; }
/* hero 在窄屏必须退回单列：两栏时左列只剩 118px，标题会被挤成一个字一行 */
html[data-template="minimal"] .hero {
display: block; padding: 34px 0 26px;
}
html[data-template="minimal"] .hero h1 { font-size: clamp(38px, 11.4vw, 56px); }
html[data-template="minimal"] .hero-sub {
margin: 22px 0 0; padding: 0 0 0 14px;
border-left: 2px solid var(--mn-line-2);
font-size: 12px; line-height: 1.95;
}
html[data-template="minimal"] .hero-sub::after { display: none; }
html[data-template="minimal"] .hero-search { width: 100%; max-width: none; margin-top: 24px; flex-wrap: nowrap; }
/* 按钮外框要和「输入框 44 + 底线 2」一样高，底边才咬得住；
nowrap 防止「查成语」在 390px 里折成两行 */
html[data-template="minimal"] .hero-search input { height: 44px; font-size: 15px; }
html[data-template="minimal"] .hero-search button {
height: 46px; padding: 0 16px; font-size: 13px;
flex: 0 0 auto; white-space: nowrap;
}
html[data-template="minimal"] .card { padding: 24px 18px; }
html[data-template="minimal"] .letters { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
}
/* ============================================================================
* 视觉模板：水彩诗词意境（html[data-template="shuicai"]）
* ----------------------------------------------------------------------------
* 北极星：一册翻旧了的诗词绘本辞典。纸先于界面 —— 先有纸，再有字，最后才有框。
*
* 三条硬规则：
* 1. 纸是底，不是背景图。底色只做三件事：极淡的帘纹、四角几乎看不见的晕染、
* 标题区一层远山。任何一处的浓度都必须低到「说得出是什么，但看不清笔触」。
* 2. 朱砂是印泥，不是按钮色。全页只有三处朱砂：标题下的拼音索引线、属性印章、
* 当前接龙项。其余强调交给赭石（重点词）与青绿（装饰）。
* 3. 线条细到 1px、圆角压到 2–3px、投影只在笺纸上留一点点。圆角和厚阴影会
* 立刻把「水彩」变成「卡片」。
* ==========================================================================*/
html[data-template="shuicai"] {
/* ---- 纸与墨 ---- */
--sc-paper: #F6F1E6; /* 宣纸米白，整页底 */
--sc-paper-2: #FBF7EE; /* 笺纸，卡片面 */
--sc-ink: #33322E; /* 淡墨主文 */
--sc-ink-2: #585650;
--sc-ink-3: #615E56; /* 小字，压在 #F6F1E6 上 6.1:1 */
--sc-line: #DED5C4;
--sc-line-2: #C8BCA4;
/* ---- 三色 ---- */
--sc-green: #5F8272; /* 青绿：远山、竹叶 */
--sc-green-deep: #46665A;
--sc-green-soft: #E3EBE4;
--sc-ochre: #A9765A; /* 浅赭石：重点词、引文 */
--sc-ochre-ink: #8A5F42; /* 赭石的小字版：11–13px 用它才过 4.5:1 */
--sc-ochre-soft: #F1E5D7;
--sc-cinnabar: #B23A28; /* 朱砂：印泥、只做点 */
--sc-cinnabar-2: #C24A32;
--sc-cinnabar-soft: #F5E3DC;
--sc-serif: "Source Han Serif SC", "Source Han Serif SC Heavy", "Noto Serif SC",
"Songti SC", "STSong", "SimSun", "Times New Roman", serif;
--sc-sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC",
"Microsoft YaHei", "Segoe UI", sans-serif;
/* ---- 接管基础变量 ---- */
--primary: #B23A28;
--primary-dark: #91301F;
--primary-soft: #F5E3DC;
--ink: #33322E;
--ink-soft: #585650;
--ink-faint: #6F6C62;
--bg: #F6F1E6;
--card: #FBF7EE;
--border: #DED5C4;
--gold: #8E6446;
--radius: 3px;
--shadow: 0 1px 2px rgba(74, 62, 44, .04);
--font-sans: var(--sc-sans);
--font-serif: var(--sc-serif);
}
/* ---------- 纸：帘纹 + 四角晕染 ---------- */
html[data-template="shuicai"] body {
background-color: var(--sc-paper);
background-image:
/* 只在四角留一点色：整页泛绿会把宣纸压成灰纸 */
radial-gradient(820px 420px at 4% -6%, rgba(95, 130, 114, .07), transparent 64%),
radial-gradient(680px 380px at 96% -2%, rgba(169, 118, 90, .055), transparent 66%),
radial-gradient(900px 560px at 50% 104%, rgba(95, 130, 114, .05), transparent 72%),
/* 宣纸帘纹：竖纹，1px 一走，密度按 4px 才不显格 */
repeating-linear-gradient(90deg, rgba(120, 105, 80, .03) 0 1px, transparent 1px 4px);
background-attachment: fixed, fixed, fixed, scroll;
background-repeat: no-repeat, no-repeat, no-repeat, repeat;
color: var(--sc-ink);
font-family: var(--sc-sans);
line-height: 1.85;
}
html[data-template="shuicai"] a { color: var(--sc-ink); }
html[data-template="shuicai"] a:hover { color: var(--sc-cinnabar); }
/* ---------- 顶部：一条浅灰细线收住 ---------- */
html[data-template="shuicai"] .site-header {
background: #F6F1E6;
border-bottom: 1px solid var(--sc-line-2);
box-shadow: none;
}
html[data-template="shuicai"] .header-inner { gap: 26px; min-height: 68px; }
html[data-template="shuicai"] .logo {
font-family: var(--sc-serif); font-size: 20px; font-weight: 700;
letter-spacing: .18em; color: var(--sc-ink);
background: none; padding: 0; border-radius: 0;
}
html[data-template="shuicai"] .logo:hover { color: var(--sc-ink); }
/* 导航项之间一根浅灰竖线：像目录里隔开条目的那道铅线 */
html[data-template="shuicai"] .nav { gap: 0; flex-wrap: wrap; }
html[data-template="shuicai"] .nav a {
position: relative; padding: 4px 16px;
background: none; border: 0; border-radius: 0;
color: var(--sc-ink-2); font-size: 14px; letter-spacing: .1em;
transition: color .18s;
}
html[data-template="shuicai"] .nav a + a { box-shadow: inset 1px 0 0 rgba(51, 50, 46, .12); }
html[data-template="shuicai"] .nav a:hover { color: var(--sc-cinnabar); }
html[data-template="shuicai"] .search-box {
align-items: center; gap: 0; max-width: 320px; padding: 0 0 0 14px;
background: rgba(255, 253, 247, .6);
border: 1px solid var(--sc-line); border-radius: 2px; box-shadow: none;
}
html[data-template="shuicai"] .search-box input {
height: 32px; padding: 0 6px; background: none; border: 0;
border-radius: 0; font-size: 13.5px; color: var(--sc-ink);
}
html[data-template="shuicai"] .search-box input::placeholder { color: var(--sc-ink-3); }
html[data-template="shuicai"] .search-box input:focus { box-shadow: none; }
html[data-template="shuicai"] .search-box button {
height: 32px; padding: 0 14px; background: none; border: 0; border-radius: 0;
color: var(--sc-ink-2); font-size: 12.5px; letter-spacing: .14em;
transition: color .18s;
}
html[data-template="shuicai"] .search-box button:hover { background: none; color: var(--sc-cinnabar); }
html[data-template="shuicai"] .suggest {
top: 38px; background: #FCF9F1;
border: 1px solid var(--sc-line-2); border-radius: 2px;
box-shadow: 0 6px 22px rgba(74, 62, 44, .10);
}
html[data-template="shuicai"] .suggest a { border-bottom: 1px solid var(--sc-line); color: var(--sc-ink); }
html[data-template="shuicai"] .suggest a:hover,
html[data-template="shuicai"] .suggest a.active { background: rgba(95, 130, 114, .07); }
/* ---------- 面包屑：小字，斜线分隔 ---------- */
html[data-template="shuicai"] .breadcrumb {
padding: 26px 0 0; font-size: 12px; letter-spacing: .08em; color: var(--sc-ink-3);
}
html[data-template="shuicai"] .breadcrumb a { color: var(--sc-ink-3); }
html[data-template="shuicai"] .breadcrumb a:hover { color: var(--sc-cinnabar); }
html[data-template="shuicai"] .breadcrumb li + li::before {
content: '·'; color: var(--sc-line-2); margin: 0 10px;
}
/* ---------- 标题区：远山压在字后，晕染托住 ---------- */
html[data-template="shuicai"] .detail > .detail-head {
position: relative; text-align: center;
margin: 0; padding: 58px 16px 34px;
background: none;
}
/* 右上角两只飞鸟：两笔细线，不填色 */
html[data-template="shuicai"] .detail > .detail-head::after {
content: ''; position: absolute; right: 6%; top: 46px;
width: 46px; height: 26px; opacity: .5;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 28'%3E%3Cpath d='M2 12 C7 7 11 7 14 11 C17 7 21 7 26 13' stroke='%23585650' fill='none' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M28 21 C31 18 34 18 36 21 C38 18 41 18 44 21' stroke='%23585650' fill='none' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-template="shuicai"] .detail-head h1 {
position: relative; display: inline-block; margin: 0 0 6px;
font-family: var(--sc-serif);
font-size: clamp(52px, 6.6vw, 92px); font-weight: 700;
line-height: 1.16; letter-spacing: .1em;
color: var(--sc-ink);
/* 长标题（七字以上）在窄屏必须能断，否则会把容器撑破 */
overflow-wrap: anywhere;
text-shadow: 0 1px 0 rgba(255, 253, 246, .8);
animation: sc-rise .62s cubic-bezier(.22, .8, .24, 1) backwards;
}
html[data-template="shuicai"] .detail-head .head-sub {
gap: 0; justify-content: center; margin-top: 2px;
}
html[data-template="shuicai"] .detail-head .head-sub::before,
html[data-template="shuicai"] .detail-head .head-sub::after { display: none; }
html[data-template="shuicai"] .detail-head .pinyin {
position: relative; display: inline-block;
padding: 7px 20px 0;
background: none; color: var(--sc-ink-3);
font-family: var(--sc-sans); font-size: 12.5px; font-weight: 400;
letter-spacing: .34em; text-transform: none;
}
/* 拼音上方一根朱砂短线：全页第一条朱砂，等于「题签」 */
html[data-template="shuicai"] .detail-head .pinyin::before {
content: ''; position: absolute; left: 50%; top: 0;
width: 26px; height: 1px; margin-left: -13px;
background: var(--sc-cinnabar); opacity: .55;
}
/* ---------- 属性标签：淡朱砂印章 ---------- */
html[data-template="shuicai"] .detail > .tags {
justify-content: center; flex-wrap: wrap;
gap: 11px; margin: 0 0 34px; padding: 0 16px;
background: none; border: 0;
}
html[data-template="shuicai"] .tag {
/* 竖排两行才是「印面」：横排读起来像胶囊标签 */
display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
min-width: 66px; padding: 7px 13px 8px;
background-color: rgba(178, 58, 40, .055);
/* 印泥不匀：两团极淡的斑，比纯色更像盖上去的 */
background-image:
radial-gradient(60% 80% at 28% 36%, rgba(178, 58, 40, .07), transparent 62%),
radial-gradient(50% 70% at 76% 68%, rgba(178, 58, 40, .05), transparent 66%);
border: 1px solid rgba(178, 58, 40, .40);
border-radius: 2px;
/* 内白圈 = 印面留白，双框才有「方章」的样子 */
box-shadow: inset 0 0 0 2px rgba(246, 241, 230, .92);
}
html[data-template="shuicai"] .tag-label {
position: relative; top: 0;
font-size: 10px; font-weight: 400; letter-spacing: .22em;
text-indent: .22em; /* 补掉末字后多出的字距，字才在印面正中 */
color: rgba(178, 58, 40, .88);
}
html[data-template="shuicai"] .tag-value {
font-family: var(--sc-serif); font-size: 14.5px; font-weight: 600;
letter-spacing: .04em; line-height: 1.3; color: var(--sc-cinnabar);
}
/* ---------- 田字格：一张裱在纸上的图版 ---------- */
html[data-template="shuicai"] .grid-figure { justify-content: center; margin: 14px 0 30px; }
html[data-template="shuicai"] .grid-img {
/* 图版自带 520px 的原始尺寸，在 820 及以下会压过标题；
收到 400 是「一页插图」的尺度，再窄就由 max-width:100% 接手 */
max-width: 400px; height: auto;
border: 1px solid var(--sc-line); border-radius: 2px;
background: #fff; padding: 6px;
/* 图是白底红格，直接压在米白纸上是一块最亮的白。
multiply 让白底化进纸里，只剩红格浮在纸面上 */
mix-blend-mode: multiply;
box-shadow: none;
}
/* ---------- 版心与板块：半透明宣纸 ---------- */
/* 诗词绘本的版心比 1080 窄一档，一行三十来字才读得出「书页」 */
html[data-template="shuicai"] .detail { position: relative; max-width: 920px; margin: 0 auto; }
/* 远山与水墨各占一层，铺在标题之后、正文之前。
两层都必须羽化四边：直接用 background 铺在标题容器上，会被容器矩形
裁出一条直边，远山看着像贴了一张灰绿纸。 */
html[data-template="shuicai"] .detail::before,
html[data-template="shuicai"] .detail::after {
content: ''; position: absolute; left: 50%; transform: translateX(-50%);
/* 用负层级沉到内容下面：给 .detail > * 加 z-index 会造出新的 stacking
context，田字格的 mix-blend-mode 就混不到这层背景，白底又浮出来。
宽度不能超 100% —— 108% 在 820 视口会顶出 16px 横向滚动条；
左右羽化交给 SVG 自带的 mask，不靠外扩。 */
width: 100%; pointer-events: none; z-index: -1;
}
html[data-template="shuicai"] .detail::before {
/* 山脊要落在标题字里，不是标题下方 —— 田字格图版会把山腰挡住，
山只从两侧露出半截，读起来才是「字在山前」 */
top: -22px; height: 300px;
background: url("/public/img/tpl-sc-mountains.svg") center bottom / 100% 100% no-repeat;
/* 剪影感来自硬边，1.4px 的模糊就是一层雾 */
filter: blur(1.4px);
opacity: .92;
}
html[data-template="shuicai"] .detail::after {
top: -70px; height: 420px;
background:
radial-gradient(40% 54% at 30% 36%, rgba(95, 130, 114, .10), transparent 70%),
radial-gradient(34% 46% at 70% 26%, rgba(169, 118, 90, .08), transparent 72%);
-webkit-mask-image: radial-gradient(120% 104% at 50% 42%, #000 44%, transparent 80%);
mask-image: radial-gradient(120% 104% at 50% 42%, #000 44%, transparent 80%);
}
/* 装饰层在负层级，正文自然在上面；不要再给 .detail > * 加 z-index，
一旦加上就会屏蔽田字格的 mix-blend-mode。 */
html[data-template="shuicai"] .detail > section.card,
html[data-template="shuicai"] .detail .card {
position: relative;
padding: 44px 46px 46px; margin-bottom: 26px;
background-color: rgba(251, 247, 238, .74);
background-image: repeating-linear-gradient(90deg, rgba(120, 105, 80, .022) 0 1px, transparent 1px 3px);
border: 1px solid var(--sc-line); border-radius: 3px;
box-shadow: none;
animation: sc-rise .5s cubic-bezier(.22, .8, .24, 1) backwards;
}
html[data-template="shuicai"] .detail .card.highlight {
background-color: rgba(241, 229, 215, .58);
border-color: rgba(169, 118, 90, .34);
}
/* 板块标题：细墨线 + 一枚竹叶 */
html[data-template="shuicai"] .detail .card h2 {
position: relative;
display: flex; align-items: center; gap: 10px;
margin: 0 0 28px; padding: 0 0 15px;
border-bottom: 1px solid var(--sc-line);
font-family: var(--sc-serif); font-size: 25px; font-weight: 700;
line-height: 1.35; letter-spacing: .07em; color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .card h2::before {
content: ''; flex: 0 0 auto;
width: 26px; height: 26px; margin-top: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M3.4 28.6 C9.2 21.6 15.2 13 22 5' stroke='%235F8272' stroke-width='1.1' fill='none' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M14 14.5 C16 9.4 20.2 6 26 4.6 C24.2 9.8 19.6 13.4 14 14.5 Z' fill='%235F8272' opacity='.72'/%3E%3Cpath d='M9.4 19.6 C8.6 14.6 10.6 10.2 14.4 7.2 C15.2 11.8 12.6 16.8 9.4 19.6 Z' fill='%2346665A' opacity='.55'/%3E%3Cpath d='M6 24.4 C4.6 20.4 5.2 16.2 7.2 12.8 C9 16.2 8.8 20.8 6 24.4 Z' fill='%235F8272' opacity='.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 细线的收尾处压一小段赭石，像笔尖离纸时留下的一顿 */
html[data-template="shuicai"] .detail .card h2::after {
content: ''; position: absolute; left: 0; bottom: -1px;
width: 34px; height: 1.5px; background: var(--sc-ochre); opacity: .55;
}
/* ---------- 释义：首字下沉，赭石 ---------- */
html[data-template="shuicai"] .detail .explanation {
margin: 0; padding: 0; max-width: 34em;
background: none; border: 0; border-radius: 0; box-shadow: none;
font-size: 18px; line-height: 2.05; letter-spacing: .012em;
color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .explanation::first-letter {
float: left; padding: .12em .2em 0 0;
font-family: var(--sc-serif); font-size: 3em; line-height: .92;
font-weight: 700; color: var(--sc-ochre);
}
html[data-template="shuicai"] .detail .explanation strong,
html[data-template="shuicai"] .detail .story strong {
font-weight: 600; color: var(--sc-ochre-ink);
/* 淡赭色下划线：标记重点词，但不抢行气 */
box-shadow: inset 0 -.34em 0 rgba(169, 118, 90, .16);
}
/* ---------- 字段列表 ---------- */
html[data-template="shuicai"] .detail .fields { gap: 0; }
html[data-template="shuicai"] .detail .field {
grid-template-columns: 84px 1fr; gap: 0 24px;
padding: 17px 0; border-top: 1px solid rgba(200, 188, 164, .5);
}
html[data-template="shuicai"] .detail .field:first-child { border-top: 0; padding-top: 0; }
html[data-template="shuicai"] .detail .field dt {
padding-top: 5px;
font-family: var(--sc-serif); font-size: 12.5px; font-weight: 400;
letter-spacing: .18em; color: var(--sc-ochre-ink);
}
html[data-template="shuicai"] .detail .field dd {
max-width: 38em; font-size: 16px; line-height: 1.95; color: var(--sc-ink);
}
/* 引文：左侧一根细赭石线，缩进 1.1em */
html[data-template="shuicai"] .detail .field dd.quote {
max-width: 34em; margin: 0; padding: 2px 0 2px 1.1em;
background: none; border: 0; border-left: 1px solid rgba(169, 118, 90, .42);
border-radius: 0;
font-family: var(--sc-serif); font-size: 15.5px; line-height: 2.0;
color: var(--sc-ink-2);
}
/* ---------- 造句 / 故事 ---------- */
html[data-template="shuicai"] .detail .zju-list { list-style: none; counter-reset: sc-zju; }
html[data-template="shuicai"] .detail .zju-list li {
counter-increment: sc-zju; position: relative;
max-width: 33em; padding: 0 0 0 34px; margin-bottom: 13px;
font-size: 16px; line-height: 1.95; color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .zju-list li:last-child { margin-bottom: 0; }
html[data-template="shuicai"] .detail .zju-list li::before {
content: counter(sc-zju); position: absolute; left: 0; top: .3em;
width: 20px; height: 20px; line-height: 19px; text-align: center;
font-family: var(--sc-serif); font-size: 11px; color: var(--sc-ochre-ink);
border: 1px solid rgba(169, 118, 90, .34); border-radius: 50%;
}
html[data-template="shuicai"] .detail .story {
max-width: 34em; font-size: 16.5px; line-height: 2.1; color: var(--sc-ink);
text-indent: 2em;
}
/* ---------- 近义词 / 反义词 ---------- */
html[data-template="shuicai"] .detail .syn-ant { margin-bottom: 16px; }
html[data-template="shuicai"] .detail .syn-ant:last-child { margin-bottom: 0; }
html[data-template="shuicai"] .detail .syn-ant > strong {
width: 74px; font-family: var(--sc-serif); font-size: 12.5px; font-weight: 400;
letter-spacing: .16em; color: var(--sc-ink-3); vertical-align: middle;
}
html[data-template="shuicai"] .detail .chip,
html[data-template="shuicai"] .chip {
padding: 4px 13px; background: rgba(255, 253, 247, .72);
color: var(--sc-ink); border: 1px solid var(--sc-line); border-radius: 2px;
font-size: 14px; font-weight: 400; letter-spacing: .03em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="shuicai"] a.chip:hover,
html[data-template="shuicai"] .detail a.chip:hover {
background: rgba(95, 130, 114, .1);
color: var(--sc-green-deep); border-color: rgba(95, 130, 114, .45);
}
html[data-template="shuicai"] .chip.plain { color: var(--sc-ink-3); background: none; }
/* ---------- 趣味延伸 ---------- */
html[data-template="shuicai"] .detail .highlight p {
font-size: 15.5px; line-height: 2.0; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .detail .gold {
margin-right: 9px; padding: 0;
color: var(--sc-ochre-ink); font-family: var(--sc-serif);
font-size: 12.5px; font-weight: 600; letter-spacing: .14em;
background: none; vertical-align: 1px;
}
html[data-template="shuicai"] .detail .xhy-list li {
font-size: 15.5px; line-height: 2.0; color: var(--sc-ink-2);
}
/* ---------- 字义分解：四张淡彩笺纸 ---------- */
/* 两列两行摊开四张笺纸。四列并排时释义会被压到每行六七个字，
单字再大也读不动；两列能把字放到 96px，右侧还留得下整句。 */
html[data-template="shuicai"] .detail .char-decompose {
grid-template-columns: repeat(2, 1fr);
gap: 22px 22px;
/* 四张纸等高：笺纸有底色，纸外的空白读作「没排满」，
纸内的空白才是留白。内容仍各自顶部对齐。 */
align-items: stretch;
}
html[data-template="shuicai"] .detail .char-item {
position: relative; display: grid;
grid-template-columns: 104px minmax(0, 1fr);
column-gap: 22px; row-gap: 0; align-items: start;
padding: 30px 28px 28px;
border: 1px solid rgba(169, 118, 90, .26); border-radius: 2px;
/* 笺纸顶边一道更浅的横线，像裁好的信笺 */
box-shadow: inset 0 6px 0 -5px rgba(169, 118, 90, .18);
}
/* 四色笺：青 / 赭 / 朱 / 黄，都压到接近纸色，只够分出「这是四张」 */
html[data-template="shuicai"] .detail .char-item:nth-child(4n+1) {
background-color: #EAF1EB; border-color: rgba(95, 130, 114, .26);
box-shadow: inset 0 6px 0 -5px rgba(95, 130, 114, .22);
}
html[data-template="shuicai"] .detail .char-item:nth-child(4n+2) {
background-color: #F5ECDF; border-color: rgba(169, 118, 90, .26);
}
html[data-template="shuicai"] .detail .char-item:nth-child(4n+3) {
background-color: #F8EBE5; border-color: rgba(178, 58, 40, .18);
box-shadow: inset 0 6px 0 -5px rgba(178, 58, 40, .16);
}
html[data-template="shuicai"] .detail .char-item:nth-child(4n) {
background-color: #F5EFDE; border-color: rgba(169, 140, 74, .24);
box-shadow: inset 0 6px 0 -5px rgba(169, 140, 74, .2);
}
html[data-template="shuicai"] .detail .char-glyph {
width: auto; height: auto; align-self: start; display: block;
padding: 0; margin-top: -4px;
font-family: var(--sc-serif); font-size: 96px; font-weight: 700;
line-height: 1.02; letter-spacing: 0; text-align: center;
color: var(--sc-ink); background: none; border: 0; border-radius: 0;
}
html[data-template="shuicai"] .detail .char-glyph a { color: var(--sc-ink); }
html[data-template="shuicai"] .detail .char-glyph a:hover { color: var(--sc-cinnabar); }
html[data-template="shuicai"] .detail .char-meta { padding-top: 2px; min-width: 0; }
html[data-template="shuicai"] .detail .char-pron {
margin-bottom: 10px; font-size: 12px; letter-spacing: .06em;
line-height: 1.8; color: var(--sc-ink-3);
}
html[data-template="shuicai"] .detail .char-extra { gap: 6px; margin-bottom: 10px; }
html[data-template="shuicai"] .detail .char-extra-item {
padding: 0 7px; background: rgba(255, 253, 247, .55);
border: 1px solid rgba(169, 118, 90, .22); border-radius: 2px;
font-size: 11px; line-height: 1.7; letter-spacing: .04em; color: var(--sc-ochre-ink);
}
html[data-template="shuicai"] .detail .char-extra-sep { color: var(--sc-line-2); }
html[data-template="shuicai"] .detail .char-shape {
margin-bottom: 0; font-size: 13px; line-height: 1.8; color: var(--sc-ink-3);
}
html[data-template="shuicai"] .detail .char-senses {
gap: 10px; margin-top: 13px; padding-top: 13px;
border-top: 1px solid rgba(169, 118, 90, .18);
}
html[data-template="shuicai"] .detail .sn-num {
font-family: var(--sc-serif); font-size: 13px; font-weight: 400;
line-height: 1.8; color: var(--sc-ochre-ink);
}
html[data-template="shuicai"] .detail .sn-title {
font-size: 14.5px; font-weight: 600; color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .sn-text {
margin-top: 3px; font-size: 13.5px; line-height: 1.9; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .detail .expand-sense {
align-self: flex-start; margin-top: 14px; padding: 4px 0 2px;
background: none; border: 0; border-bottom: 1px solid rgba(169, 118, 90, .5);
border-radius: 0;
color: var(--sc-ochre-ink); font-size: 12px; letter-spacing: .08em;
}
html[data-template="shuicai"] .detail .expand-sense:hover {
background: none; color: var(--sc-cinnabar); border-bottom-color: var(--sc-cinnabar);
}
/* ---------- 接龙：一条淡墨索引带，箭头是细笔 ---------- */
html[data-template="shuicai"] .detail .tabs {
gap: 30px; margin-bottom: 20px;
border-bottom: 1px solid var(--sc-line);
}
html[data-template="shuicai"] .detail .tab {
padding: 0 0 11px; margin-bottom: -1px;
background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
color: var(--sc-ink-3); font-family: var(--sc-serif);
font-size: 14px; font-weight: 400; letter-spacing: .1em;
transition: color .18s, border-color .18s;
}
html[data-template="shuicai"] .detail .tab:hover { color: var(--sc-ink); }
html[data-template="shuicai"] .detail .tab.active {
color: var(--sc-cinnabar); font-weight: 600; border-bottom-color: var(--sc-cinnabar);
}
/* 索引带：上下两道细线夹一条极淡的青绿横晕，节点像贴在带上 */
html[data-template="shuicai"] .detail .jielong-chain {
gap: 0; row-gap: 10px; align-items: flex-start;
margin-bottom: 18px; padding: 15px 18px;
background-image: linear-gradient(180deg, rgba(95, 130, 114, .075), rgba(95, 130, 114, .028) 58%, rgba(95, 130, 114, .05));
border-top: 1px solid rgba(95, 130, 114, .22);
border-bottom: 1px solid rgba(95, 130, 114, .16);
border-radius: 2px;
}
html[data-template="shuicai"] .detail .jielong-node {
display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
min-width: 0; padding: 4px 10px 5px;
background: rgba(255, 253, 247, .5);
border: 1px solid transparent; border-radius: 2px;
box-shadow: none; transform: none;
transition: background .18s, border-color .18s, color .18s;
}
html[data-template="shuicai"] .detail .jielong-node .jw {
font-family: var(--sc-serif); font-size: 16.5px; font-weight: 600;
letter-spacing: .06em; color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .jielong-node .jp {
font-size: 10.5px; letter-spacing: .04em; color: var(--sc-ink-3);
}
html[data-template="shuicai"] .detail .jielong-node:hover {
background: rgba(255, 253, 247, .95);
border-color: rgba(95, 130, 114, .38);
box-shadow: none; transform: none;
}
html[data-template="shuicai"] .detail .jielong-node:hover .jw { color: var(--sc-green-deep); }
html[data-template="shuicai"] .detail .jielong-node.current {
background: rgba(178, 58, 40, .07);
border-color: rgba(178, 58, 40, .3);
}
html[data-template="shuicai"] .detail .jielong-node.current .jw { color: var(--sc-cinnabar); }
/* 箭头：把「→」换成一道细笔，笔锋只挑两笔，不成三角 */
html[data-template="shuicai"] .detail .jielong-arrow {
flex: 0 0 auto; align-self: center;
width: 28px; height: 13px; margin: 0 1px;
font-size: 0; line-height: 0; color: transparent;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14'%3E%3Cpath d='M1 8.4 C8.6 5.6 16.4 4.9 26 5.4' stroke='%23585650' stroke-width='1' fill='none' stroke-linecap='round' opacity='.62'/%3E%3Cpath d='M25.8 5.4 L20.6 2.6' stroke='%23585650' stroke-width='.9' stroke-linecap='round' opacity='.62'/%3E%3Cpath d='M25.8 5.4 L21 9.4' stroke='%23585650' stroke-width='.9' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-template="shuicai"] .detail .btn-regen {
margin-top: 2px; padding: 8px 20px;
background: none; border: 1px solid rgba(95, 130, 114, .45); border-radius: 2px;
color: var(--sc-green-deep); font-family: var(--sc-serif);
font-size: 13px; letter-spacing: .1em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="shuicai"] .detail .btn-regen:hover {
background: rgba(95, 130, 114, .1); color: var(--sc-green-deep);
border-color: rgba(95, 130, 114, .7);
}
html[data-template="shuicai"] .detail .btn-regen:active { background: rgba(95, 130, 114, .18); color: var(--sc-green-deep); }
html[data-template="shuicai"] .detail .btn-regen:disabled { opacity: .5; }
/* ---------- 相关成语：淡彩卡，部分带一角远山 ---------- */
html[data-template="shuicai"] .detail .related-grid {
grid-template-columns: repeat(4, 1fr); gap: 14px;
}
html[data-template="shuicai"] .detail .related-item {
position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: 5px;
padding: 16px 16px 18px;
background-color: rgba(255, 253, 247, .62);
border: 1px solid var(--sc-line); border-radius: 2px;
transition: background .2s, border-color .2s;
}
html[data-template="shuicai"] .detail .related-item:hover {
background-color: rgba(255, 253, 247, .95);
border-color: rgba(95, 130, 114, .42);
box-shadow: none; transform: none;
}
/* 底角远山小景：只给 4 张里的一张，其余保持干净 */
html[data-template="shuicai"] .detail .related-item::before {
content: ''; position: absolute; right: -4px; bottom: -3px;
width: 60px; height: 32px; display: none; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cpath d='M0 44 C12 38 20 30 30 31 C40 32 44 40 54 40 C64 40 70 30 82 27 C94 24 100 33 110 38 C114 40 117 42 120 43 L120 60 L0 60 Z' fill='%235F8272' opacity='.3'/%3E%3Cpath d='M0 52 C16 47 26 44 38 47 C50 50 58 46 70 43 C82 40 92 45 104 48 C112 50 116 51 120 52 L120 60 L0 60 Z' fill='%2346665A' opacity='.24'/%3E%3C/svg%3E") center bottom / contain no-repeat;
opacity: .6;
}
html[data-template="shuicai"] .detail .related-item:nth-child(4n+2)::before,
html[data-template="shuicai"] .detail .related-item:nth-child(4n)::before { display: block; }
html[data-template="shuicai"] .detail .related-item .rw {
position: relative; z-index: 1;
font-family: var(--sc-serif); font-size: 17px; font-weight: 600;
letter-spacing: .05em; color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .related-item .rp,
html[data-template="shuicai"] .detail .related-item small {
position: relative; z-index: 1;
font-size: 11.5px; line-height: 1.7; letter-spacing: .02em; color: var(--sc-ink-3);
}
html[data-template="shuicai"] .detail .related-item:hover .rw { color: var(--sc-green-deep); }
/* ---------- 所属标签 ---------- */
html[data-template="shuicai"] .detail .tags-of-idiom .chip {
padding: 5px 14px; font-size: 13.5px;
}
/* ---------- 列表页（搜索 / 拼音 / 标签）：一条条，不装箱 ---------- */
html[data-template="shuicai"] .list-desc {
max-width: 44em; font-size: 14.5px; line-height: 2.0; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .list-desc a { color: var(--sc-ochre-ink); box-shadow: inset 0 -1px 0 rgba(169, 118, 90, .45); }
html[data-template="shuicai"] .result-list {
background: rgba(251, 247, 238, .55);
border: 1px solid var(--sc-line); border-radius: 3px; box-shadow: none;
}
html[data-template="shuicai"] .result-item { padding: 16px 22px; gap: 4px 12px; border-bottom: 1px solid rgba(200, 188, 164, .7); }
html[data-template="shuicai"] .result-item:last-child { border-bottom: 0; }
html[data-template="shuicai"] .result-item .rw {
font-family: var(--sc-serif); font-size: 18px; font-weight: 600;
letter-spacing: .06em; color: var(--sc-ink);
}
html[data-template="shuicai"] .result-item .rp {
font-size: 12px; letter-spacing: .08em; color: var(--sc-ink-3);
}
html[data-template="shuicai"] .result-item .re {
flex: 1 1 100%; font-size: 13.5px; line-height: 1.85; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .result-item:hover { background: rgba(95, 130, 114, .06); }
html[data-template="shuicai"] .result-item:hover .rw { color: var(--sc-green-deep); }
/* ---------- 字典页 / 词语页：同一套语法，只补差异 ---------- */
html[data-template="shuicai"] .detail .sub-h {
margin: 24px 0 12px; padding: 0 0 8px;
/* 基础样式是 3px 的彩色左边线，放在纸上像彩色便签条，改成一条细墨线 */
border-left: 0; border-bottom: 1px solid var(--sc-line);
font-family: var(--sc-serif); font-size: 16px; font-weight: 600;
letter-spacing: .1em; color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .sense-body,
html[data-template="shuicai"] .detail .sense-line,
html[data-template="shuicai"] .detail .classic p {
/* 42em 是这首诗集版心能舒服读到的宽度，再宽眼睛会跑回行首 */
max-width: 42em;
font-size: 15px; line-height: 2.0; color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .classic p { color: var(--sc-ink-2); }
html[data-template="shuicai"] .detail .sense-line.sense-attr {
padding-left: 24px; font-size: 14px; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .detail .attr-tag {
color: var(--sc-cinnabar); font-family: var(--sc-serif);
font-size: 11.5px; font-weight: 400; line-height: 2.1;
}
html[data-template="shuicai"] .detail .sense-detail {
border-bottom: 1px solid rgba(200, 188, 164, .55);
}
html[data-template="shuicai"] .detail .sense-detail:last-child { border-bottom: 0; }
/* ---------- 404：一个淡墨的大字 ---------- */
html[data-template="shuicai"] .not-found { padding: 64px 16px 44px; text-align: center; }
html[data-template="shuicai"] .not-found h1 {
margin: 0 0 16px; line-height: 1;
font-family: var(--sc-serif); font-size: clamp(64px, 8.4vw, 100px);
font-weight: 700; letter-spacing: .14em; text-indent: .14em;
/* 淡墨但要过 3:1：再浅就成了「没加载出来的占位」 */
color: #9E9179;
}
html[data-template="shuicai"] .not-found p {
font-size: 14.5px; letter-spacing: .06em; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .not-found .hero-search { max-width: 460px; margin: 26px auto 0; }
html[data-template="shuicai"] .not-found .back { margin-top: 22px; }
html[data-template="shuicai"] .not-found .back a { color: var(--sc-ochre-ink); font-size: 13px; letter-spacing: .08em; }
/* ---------- 页脚：一行小字，一条细线 ---------- */
html[data-template="shuicai"] .site-footer {
margin-top: 60px; padding: 34px 0 44px;
background: none; border-top: 1px solid var(--sc-line-2);
color: var(--sc-ink-3); font-size: 12.5px; letter-spacing: .06em;
}
html[data-template="shuicai"] .footer-inner {
align-items: center; justify-content: center;
padding: 0 16px; text-align: center; gap: 12px;
}
/* 页脚上方一枚小朱砂方点：全页最后一点印泥 */
html[data-template="shuicai"] .site-footer .container::before {
content: ''; display: block; width: 6px; height: 6px; margin: 0 auto 16px;
background: var(--sc-cinnabar); opacity: .5; border-radius: 1px;
}
html[data-template="shuicai"] .copyright { color: var(--sc-ink-3); font-size: 12.5px; }
html[data-template="shuicai"] .footer-nav { justify-content: center; gap: 20px; }
html[data-template="shuicai"] .footer-nav a { color: var(--sc-ink-2); font-size: 13px; }
html[data-template="shuicai"] .footer-nav a:hover { color: var(--sc-cinnabar); }
/* ---------- 首页：一句题词，一方搜索 ---------- */
html[data-template="shuicai"] .hero {
position: relative; text-align: center; padding: 68px 0 46px;
}
/* 首页不背山，只在标题右侧留两只飞鸟：山留给内容页，入口要轻 */
html[data-template="shuicai"] .hero::after {
content: ''; position: absolute; right: 15%; top: 58px;
width: 54px; height: 32px; opacity: .42; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 28'%3E%3Cpath d='M2 12 C7 7 11 7 14 11 C17 7 21 7 26 13' stroke='%23585650' fill='none' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M28 21 C31 18 34 18 36 21 C38 18 41 18 44 21' stroke='%23585650' fill='none' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-template="shuicai"] .hero h1 {
position: relative; display: inline-block; margin: 0 0 16px;
font-family: var(--sc-serif); font-size: clamp(40px, 5.6vw, 72px);
font-weight: 700; line-height: 1.18; letter-spacing: .14em;
color: var(--sc-ink);
animation: sc-rise .62s cubic-bezier(.22, .8, .24, 1) backwards;
}
html[data-template="shuicai"] .hero h1::after {
content: ''; position: absolute; left: 50%; bottom: -.22em;
width: 54px; height: 1px; margin-left: -27px;
background: var(--sc-cinnabar); opacity: .5;
}
/* 副题：字距拉开的一段小字，像题跋 */
html[data-template="shuicai"] .hero-sub {
max-width: 34em; margin: 22px auto 0; padding: 0;
font-size: 12.5px; line-height: 2.1; letter-spacing: .1em;
color: var(--sc-ink-3); text-align: center;
}
html[data-template="shuicai"] .hero-sub strong { color: var(--sc-ochre-ink); font-weight: 600; }
html[data-template="shuicai"] .hero-search {
width: 100%; max-width: 520px; margin: 30px auto 0;
gap: 8px; align-items: stretch;
background: none; border: 0; border-radius: 0; box-shadow: none;
}
html[data-template="shuicai"] .hero-search input {
flex: 1; min-width: 0; height: 48px; padding: 0 16px;
background: rgba(255, 253, 247, .8);
border: 1px solid var(--sc-line-2); border-radius: 2px;
font-size: 15.5px; color: var(--sc-ink);
transition: border-color .18s, background .18s;
}
html[data-template="shuicai"] .hero-search input::placeholder { color: var(--sc-ink-3); }
html[data-template="shuicai"] .hero-search input:focus {
outline: 0; border-color: rgba(95, 130, 114, .55); background: #FFFDF7;
box-shadow: 0 0 0 3px rgba(95, 130, 114, .09);
}
/* 按钮做成一方朱砂印：方角、字米白、不描边 */
html[data-template="shuicai"] .hero-search button {
height: 48px; padding: 0 26px;
background: var(--sc-cinnabar); border: 0; border-radius: 2px;
color: #FBF7EE; font-family: var(--sc-serif);
font-size: 14px; font-weight: 600; letter-spacing: .18em;
transition: background .18s;
}
html[data-template="shuicai"] .hero-search button:hover { background: #9B3122; }
html[data-template="shuicai"] .card {
padding: 32px 34px; margin-bottom: 18px;
background-color: rgba(251, 247, 238, .74);
border: 1px solid var(--sc-line); border-radius: 3px; box-shadow: none;
}
html[data-template="shuicai"] .card h2 {
position: relative; margin-bottom: 22px; padding: 0 0 13px;
border-bottom: 1px solid var(--sc-line);
font-family: var(--sc-serif); font-size: 21px; font-weight: 700;
letter-spacing: .08em; color: var(--sc-ink);
}
html[data-template="shuicai"] .card h2::after {
content: ''; position: absolute; left: 0; bottom: -1px;
width: 30px; height: 1.5px; background: var(--sc-ochre); opacity: .55;
}
html[data-template="shuicai"] .muted {
max-width: 42em; font-size: 14.5px; line-height: 2.0; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .muted a { color: var(--sc-ochre-ink); }
/* 字母格：淡彩小笺 */
html[data-template="shuicai"] .letters { grid-template-columns: repeat(13, 1fr); gap: 9px; }
html[data-template="shuicai"] .letter {
padding: 11px 4px; background: rgba(255, 253, 247, .6);
border: 1px solid var(--sc-line); border-radius: 2px;
color: var(--sc-ink); font-family: var(--sc-serif);
font-size: 17px; font-weight: 600; letter-spacing: .04em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="shuicai"] .letter small { color: var(--sc-ink-3); font-size: 10.5px; letter-spacing: 0; }
html[data-template="shuicai"] .letter:hover {
background: rgba(95, 130, 114, .1); border-color: rgba(95, 130, 114, .4); color: var(--sc-green-deep);
}
html[data-template="shuicai"] .letter:hover small { color: var(--sc-green-deep); }
html[data-template="shuicai"] .letter.empty { color: var(--sc-line-2); }
html[data-template="shuicai"] .letter.empty:hover {
background: rgba(255, 253, 247, .6); border-color: var(--sc-line); color: var(--sc-line-2);
}
/* 热门成语卡：四张里一张带远山，同相关成语 */
html[data-template="shuicai"] .hot-item {
position: relative; overflow: hidden; gap: 4px;
padding: 15px 15px 17px;
background-color: rgba(255, 253, 247, .6);
border: 1px solid var(--sc-line); border-radius: 2px;
transition: background .2s, border-color .2s;
}
html[data-template="shuicai"] .hot-item:hover {
background-color: rgba(255, 253, 247, .95);
border-color: rgba(95, 130, 114, .42);
box-shadow: none; transform: none;
}
html[data-template="shuicai"] .hot-word {
position: relative; z-index: 1;
font-family: var(--sc-serif); font-size: 18px; font-weight: 600;
letter-spacing: .06em; color: var(--sc-ink);
}
html[data-template="shuicai"] .hot-pinyin {
position: relative; z-index: 1; margin-top: 0;
font-size: 11px; letter-spacing: .08em; color: var(--sc-ink-3);
}
html[data-template="shuicai"] .hot-expl {
position: relative; z-index: 1; margin-top: 5px;
font-size: 13px; line-height: 1.8; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .hot-item:hover .hot-word { color: var(--sc-green-deep); }
/* 「换几种查法」：横向文字组，竖线隔开 */
html[data-template="shuicai"] .chips:has(.chip-py) { gap: 0; row-gap: 15px; margin-top: 22px; }
html[data-template="shuicai"] .chips { gap: 9px; }
html[data-template="shuicai"] .chip-py {
display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: 1px 20px; text-align: left;
background: none; border: 0; border-left: 1px solid var(--sc-line-2); border-radius: 0;
}
html[data-template="shuicai"] .chip-py:first-child { padding-left: 0; border-left: 0; }
html[data-template="shuicai"] .chip-py .cp-word {
font-family: var(--sc-serif); font-size: 15px; font-weight: 600; color: var(--sc-ink);
}
html[data-template="shuicai"] .chip-py .cp-py { font-size: 11.5px; color: var(--sc-ink-3); letter-spacing: .03em; }
html[data-template="shuicai"] a.chip-py:hover { background: none; }
html[data-template="shuicai"] a.chip-py:hover .cp-word { color: var(--sc-green-deep); }
html[data-template="shuicai"] .chip small { margin-left: 6px; font-size: 11px; color: var(--sc-ink-3); }
/* ---------- 动效：进场像纸页摊开，只有位移与淡入 ---------- */
@keyframes sc-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
html[data-template="shuicai"] .detail > section:nth-of-type(1) { animation-delay: .04s; }
html[data-template="shuicai"] .detail > section:nth-of-type(2) { animation-delay: .08s; }
html[data-template="shuicai"] .detail > section:nth-of-type(3) { animation-delay: .12s; }
html[data-template="shuicai"] .detail > section:nth-of-type(4) { animation-delay: .16s; }
html[data-template="shuicai"] .detail > section:nth-of-type(5) { animation-delay: .19s; }
html[data-template="shuicai"] .detail > section:nth-of-type(6) { animation-delay: .22s; }
html[data-template="shuicai"] .detail > section:nth-of-type(7) { animation-delay: .25s; }
html[data-template="shuicai"] .detail > section:nth-of-type(n+8) { animation-delay: .28s; }
html[data-template="shuicai"] .detail .tab-panel:not([hidden]) { animation: sc-fade .22s ease-out; }
/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
html[data-template="shuicai"] .detail .related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
html[data-template="shuicai"] .detail .char-decompose { grid-template-columns: 1fr; }
html[data-template="shuicai"] .detail .related-grid { grid-template-columns: repeat(2, 1fr); }
html[data-template="shuicai"] .detail > section.card,
html[data-template="shuicai"] .detail .card { padding: 32px 28px 34px; }
}
@media (max-width: 640px) {
html[data-template="shuicai"] .header-inner { min-height: 58px; gap: 14px; }
html[data-template="shuicai"] .logo { font-size: 17px; letter-spacing: .1em; }
/* 基础样式在手机上整条藏掉导航，这里改成横滑，字距收窄才放得下 */
html[data-template="shuicai"] .nav {
display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
html[data-template="shuicai"] .nav::-webkit-scrollbar { display: none; }
html[data-template="shuicai"] .nav a { flex: 0 0 auto; padding: 4px 10px; font-size: 12.5px; letter-spacing: .04em; }
html[data-template="shuicai"] .search-box { padding-left: 9px; }
html[data-template="shuicai"] .search-box input { height: 28px; font-size: 12.5px; width: 96px; }
html[data-template="shuicai"] .search-box button { height: 28px; padding: 0 9px; font-size: 12px; }
html[data-template="shuicai"] .breadcrumb { padding-top: 18px; font-size: 11.5px; }
/* 标题区：留白收紧，远山压到 76% 高才不会在窄屏被拉成一条线 */
html[data-template="shuicai"] .detail > .detail-head { padding: 34px 8px 26px; }
/* 远山层在窄屏要收：108% 宽的那层按 920 的版面画的，直接套在 358px 上会只剩两条边 */
html[data-template="shuicai"] .detail::before { top: -4px; height: 205px; filter: blur(1.1px); }
html[data-template="shuicai"] .detail::after { top: -34px; height: 250px; }
html[data-template="shuicai"] .detail > .detail-head::after { right: 3%; top: 22px; width: 34px; height: 20px; }
html[data-template="shuicai"] .detail-head h1 { font-size: clamp(34px, 11.6vw, 52px); letter-spacing: .06em; margin-bottom: 4px; }
html[data-template="shuicai"] .detail-head .pinyin { font-size: 11px; letter-spacing: .22em; padding-top: 6px; }
/* 印章别拉成两列大长条：印章要有自己的宽度，排不下就居中折行 */
html[data-template="shuicai"] .detail > .tags {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 8px; margin-bottom: 24px; padding: 0 8px;
}
html[data-template="shuicai"] .tag {
flex: 0 0 auto; min-width: 60px; padding: 5px 8px 6px;
}
html[data-template="shuicai"] .tag-label { font-size: 10px; letter-spacing: .1em; }
html[data-template="shuicai"] .tag-value { font-size: 13.5px; }
html[data-template="shuicai"] .grid-figure { margin-bottom: 22px; }
html[data-template="shuicai"] .detail > section.card,
html[data-template="shuicai"] .detail .card { padding: 26px 20px 28px; margin-bottom: 16px; }
html[data-template="shuicai"] .detail .card h2 { font-size: 20px; gap: 8px; margin-bottom: 20px; padding-bottom: 12px; }
html[data-template="shuicai"] .detail .card h2::before { width: 16px; height: 16px; }
html[data-template="shuicai"] .detail .explanation { font-size: 16.5px; line-height: 2.0; }
/* 窄屏首字下沉会吃掉两行半，改成首字标赭石 */
html[data-template="shuicai"] .detail .explanation::first-letter {
float: none; padding: 0 .18em 0 0; font-size: 1.15em; font-weight: 600;
}
html[data-template="shuicai"] .detail .field { grid-template-columns: 1fr; gap: 4px; padding: 13px 0; }
html[data-template="shuicai"] .detail .field dt { padding-top: 0; font-size: 12px; }
html[data-template="shuicai"] .detail .field dd { font-size: 15px; }
html[data-template="shuicai"] .detail .field dd.quote { font-size: 14.5px; padding-left: 13px; }
html[data-template="shuicai"] .detail .zju-list li { padding-left: 30px; font-size: 15px; }
html[data-template="shuicai"] .detail .story { font-size: 15.5px; }
html[data-template="shuicai"] .detail .syn-ant > strong { display: block; width: auto; margin-bottom: 7px; }
/* 字义：单列，字与义并排但字缩到 72px，释义才有行宽 */
html[data-template="shuicai"] .detail .char-item {
grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px;
padding: 22px 18px 22px;
}
html[data-template="shuicai"] .detail .char-glyph { font-size: 70px; }
html[data-template="shuicai"] .detail .sn-text { font-size: 13.5px; }
/* 接龙竖排：箭头转 90 度，否则横着的笔锋会指到空白 */
html[data-template="shuicai"] .detail .jielong-chain {
flex-direction: column; align-items: flex-start;
padding: 14px 14px; row-gap: 0;
}
html[data-template="shuicai"] .detail .jielong-node { padding: 3px 8px 4px; }
html[data-template="shuicai"] .detail .jielong-arrow {
width: 13px; height: 26px; margin: 2px 0 2px 14px;
transform: rotate(90deg);
}
html[data-template="shuicai"] .detail .related-grid { gap: 11px; }
html[data-template="shuicai"] .detail .related-item { padding: 13px 13px 15px; }
html[data-template="shuicai"] .detail .related-item::before { width: 58px; height: 32px; }
html[data-template="shuicai"] .hero { padding: 40px 0 30px; }
html[data-template="shuicai"] .hero::after { display: none; }
html[data-template="shuicai"] .hero h1 { font-size: clamp(32px, 10.6vw, 44px); letter-spacing: .1em; }
html[data-template="shuicai"] .hero h1::after { width: 40px; margin-left: -20px; }
html[data-template="shuicai"] .hero-sub { margin-top: 20px; font-size: 12px; line-height: 2.0; letter-spacing: .06em; }
html[data-template="shuicai"] .hero-search { margin-top: 24px; flex-wrap: nowrap; gap: 7px; }
html[data-template="shuicai"] .hero-search input { height: 44px; font-size: 14.5px; padding: 0 12px; }
html[data-template="shuicai"] .hero-search button {
height: 44px; padding: 0 16px; font-size: 13px; letter-spacing: .1em;
flex: 0 0 auto; white-space: nowrap;
}
html[data-template="shuicai"] .card { padding: 24px 18px; }
html[data-template="shuicai"] .letters { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
}
/* ============================================================================
* 视觉模板：国潮插画风（html[data-template="guochao"]）
* ----------------------------------------------------------------------------
* 北极星：一张套印精良的国潮海报 —— 朱红作骨、鎏金作线、青绿作气。
*
* 和「水彩诗词」是两条相反的路：那边纸先于框，这边框先于纸。
* 那边靠浓度消失来退让，这边靠界线清楚来成立。
*
* 四条硬规则：
* 1. 朱红是结构色，不是点缀色。顶部导航、板块标题、印章标签三处用足；
* 但正文一律回到墨色 —— 满屏红字会把「典雅」读成「促销」。
* 2. 金只做线，不做面。0.5–1px 的金线负责「贵」；做成金色块面立刻变俗。
* 3. 所有框都画两层（外框 + 内细线），这是中式装裱的语法。单层边框会
* 退回成普通卡片，整套风格就塌了。
* 4. 圆角最大 3px。国潮是印出来的，不是吹塑出来的。
* ==========================================================================*/
html[data-template="guochao"] {
/* ---- 纸与墨 ---- */
--gc-paper: #F7F1E3; /* 温润米白，整页底 */
--gc-paper-2: #FFFDF7; /* 宣纸白，卡片面 */
--gc-ink: #24211E; /* 深墨正文 */
--gc-ink-2: #4C4740;
--gc-ink-3: #635C51; /* 小字，压在 #F7F1E3 上 6.3:1 */
--gc-line: #E4D8BF;
--gc-line-2: #CDBC9C;
/* ---- 朱红 ---- */
--gc-red: #B3252B; /* 朱砂：印章、标题 */
--gc-red-deep: #8C1A1F; /* 深朱红：导航条、页脚 */
--gc-red-ink: #A02026; /* 红字：正文里的小面积强调，7.0:1 */
--gc-red-soft: #F8E7E2;
/* ---- 鎏金（金只做线；要写字用 gold-ink） ---- */
--gc-gold: #B8901F;
--gc-gold-2: #D9B45A;
--gc-gold-ink: #7D5F0E; /* 金的小字版，5.5:1 */
--gc-gold-soft: #F4E9CE;
/* ---- 青绿 ---- */
--gc-jade: #1F6B5C;
--gc-jade-2: #2C8574;
--gc-jade-soft: #E6EFEA;
--gc-serif: "Source Han Serif SC", "Source Han Serif SC Heavy", "Noto Serif SC",
"Songti SC", "STSong", "SimSun", "Times New Roman", serif;
--gc-sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC",
"Microsoft YaHei", "Segoe UI", sans-serif;
/* ---- 接管基础变量 ---- */
--primary: #B3252B;
--primary-dark: #8C1A1F;
--primary-soft: #F8E7E2;
--ink: #24211E;
--ink-soft: #4C4740;
--ink-faint: #635C51;
--bg: #F7F1E3;
--card: #FFFDF7;
--border: #E4D8BF;
--gold: #B8901F;
--radius: 3px;
--shadow: 0 1px 2px rgba(90, 64, 32, .05);
--font-sans: var(--gc-sans);
--font-serif: var(--gc-serif);
}
/* ---------- 纸：四角极淡的朱/青晕，中间留白给字 ---------- */
html[data-template="guochao"] body {
background-color: var(--gc-paper);
background-image:
radial-gradient(760px 380px at 2% -8%, rgba(179, 37, 43, .06), transparent 62%),
radial-gradient(680px 360px at 98% -4%, rgba(31, 107, 92, .055), transparent 64%),
radial-gradient(900px 520px at 50% 106%, rgba(184, 144, 31, .05), transparent 70%);
background-attachment: fixed, fixed, fixed;
background-repeat: no-repeat;
color: var(--gc-ink);
font-family: var(--gc-sans);
line-height: 1.8;
}
/* 这一版的页脚是深红的，短页面（404、空搜索结果）下面会露出一大块纸色，
看着像页面断了。用一整列把页脚压到底。 */
html[data-template="guochao"] body {
display: flex; flex-direction: column; min-height: 100vh;
}
/* min-width:0 必须写：flex 子项的自动最小尺寸是 min-content，
田字格图版 364px 会把整个 main 撑到 364，320 屏上正文全被推出屏幕 */
html[data-template="guochao"] main { flex: 1 0 auto; min-width: 0; }
html[data-template="guochao"] a { color: var(--gc-ink); }
html[data-template="guochao"] a:hover { color: var(--gc-red-ink); }
/* ---------- 顶部：一条深朱红横梁，压一道金线 ---------- */
html[data-template="guochao"] .site-header {
background: linear-gradient(180deg, #9A2122 0%, #8C1A1F 62%, #7F1418 100%);
border-bottom: 0;
/* 外投影：梁是「架」在页面上的，不是贴在页面上 */
box-shadow: 0 3px 14px rgba(70, 16, 12, .18);
}
/* 梁下一条回纹织带：国潮的「梁枋」都有这么一道，页脚再重复一次，
首尾就扣上了。高度 8px，金线压在带上沿。 */
html[data-template="guochao"] .site-header::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
background: url("/public/img/tpl-gc-fret-dark.svg") repeat-x center / 18px 9px;
border-top: 1px solid rgba(226, 196, 128, .55);
opacity: .85; pointer-events: none;
}
html[data-template="guochao"] .header-inner { gap: 24px; min-height: 68px; }
html[data-template="guochao"] .logo {
font-family: var(--gc-serif); font-size: 21px; font-weight: 700;
letter-spacing: .22em; color: #FFF8EC;
background: none; padding: 0; border-radius: 0;
/* 深底上的字要一层极轻的暗影才立得住 */
text-shadow: 0 1px 2px rgba(60, 10, 10, .35);
}
html[data-template="guochao"] .logo:hover { color: #F3D793; }
/* 导航：金线竖向分隔，像匾额上分栏的字 */
html[data-template="guochao"] .nav { gap: 0; flex-wrap: wrap; }
html[data-template="guochao"] .nav a {
position: relative; padding: 5px 15px;
background: none; border: 0; border-radius: 0;
color: rgba(255, 248, 236, .86);
font-size: 14px; letter-spacing: .12em;
transition: color .18s, background .18s;
}
html[data-template="guochao"] .nav a + a { box-shadow: inset 1px 0 0 rgba(226, 196, 128, .26); }
html[data-template="guochao"] .nav a:hover {
background: rgba(255, 248, 236, .09); color: #F3D793;
}
/* 搜索框：做成镶在白木牌位上的一格，白底才在深红条上跳得出来 */
html[data-template="guochao"] .search-box {
align-items: center; gap: 0; max-width: 322px; padding: 0 0 0 13px;
background: #FFFDF7;
border: 1px solid rgba(226, 196, 128, .85); border-radius: 2px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
html[data-template="guochao"] .search-box input {
height: 32px; padding: 0 6px; background: none; border: 0;
border-radius: 0; font-size: 13.5px; color: var(--gc-ink);
}
html[data-template="guochao"] .search-box input::placeholder { color: var(--gc-ink-3); }
html[data-template="guochao"] .search-box input:focus { box-shadow: none; }
html[data-template="guochao"] .search-box button {
height: 32px; padding: 0 16px; border: 0; border-radius: 0;
background: var(--gc-red-deep); color: #FFF8EC;
font-size: 12.5px; letter-spacing: .16em; text-indent: .16em;
transition: background .18s;
}
html[data-template="guochao"] .search-box button:hover { background: var(--gc-red); }
html[data-template="guochao"] .suggest {
top: 38px; background: #FFFDF7;
border: 1px solid var(--gc-line-2); border-radius: 2px;
box-shadow: 0 8px 26px rgba(70, 16, 12, .14);
}
html[data-template="guochao"] .suggest a { border-bottom: 1px solid var(--gc-line); color: var(--gc-ink); }
html[data-template="guochao"] .suggest a:hover,
html[data-template="guochao"] .suggest a.active { background: var(--gc-red-soft); }
/* ---------- 面包屑 ---------- */
html[data-template="guochao"] .breadcrumb {
padding: 24px 0 0; font-size: 12px; letter-spacing: .08em; color: var(--gc-ink-3);
}
html[data-template="guochao"] .breadcrumb a { color: var(--gc-ink-3); }
html[data-template="guochao"] .breadcrumb a:hover { color: var(--gc-red-ink); }
html[data-template="guochao"] .breadcrumb li + li::before {
content: '›'; color: var(--gc-line-2); margin: 0 9px;
}
/* ---------- 标题区：淡墨山水压底，两侧各一朵祥云 ---------- */
html[data-template="guochao"] .detail { position: relative; max-width: 1000px; margin: 0 auto; }
html[data-template="guochao"] .detail::before {
content: ''; position: absolute; left: 50%; transform: translateX(-50%);
top: -34px; width: 100%; height: 340px;
/* 负层级：给 .detail 的子孙加 z-index 会造出新的 stacking context，
山影就压不到文字后面去了 */
z-index: -1; pointer-events: none;
background: url("/public/img/tpl-gc-scene.svg") center bottom / 100% 100% no-repeat;
/* 下沿必须羽化：山形是画到画布底边的，直接截断会留下一条笔直的水平边，
远看像底下垫了一块绿布 */
-webkit-mask-image: linear-gradient(180deg, #000 46%, transparent 96%);
mask-image: linear-gradient(180deg, #000 46%, transparent 96%);
opacity: .95;
}
html[data-template="guochao"] .detail > .detail-head {
position: relative; text-align: center;
margin: 0; padding: 56px 16px 30px;
background: none;
}
/* 标题两侧不再挂祥云：背景里的祥云已经承担了这件事，
再在版心边缘放两个小云头，读者只会看到两块抹不干净的金色。
对称装饰要么放大成对联，要么不做。 */
html[data-template="guochao"] .detail-head h1 {
position: relative; display: inline-block; margin: 0 0 4px;
font-family: var(--gc-serif);
/* 「书法感」不靠斜体（中文斜体一律丑），靠字重、字距与一点墨迹感的
暗影：右下压 1px 淡墨，像拓本上纸背透出来的那一层 */
font-size: clamp(54px, 7vw, 98px); font-weight: 700;
line-height: 1.14; letter-spacing: .09em; text-indent: .09em;
color: var(--gc-ink);
text-shadow: 0 1px 0 rgba(255, 253, 247, .95), 0 2px 0 rgba(58, 52, 44, .07);
overflow-wrap: anywhere;
animation: gc-rise .6s cubic-bezier(.22, .8, .24, 1) backwards;
}
html[data-template="guochao"] .detail-head .head-sub {
gap: 0; justify-content: center; margin-top: 6px;
}
html[data-template="guochao"] .detail-head .head-sub::before,
html[data-template="guochao"] .detail-head .head-sub::after { display: none; }
/* 拼音两侧各一道金短线：这是全页第一处金，等于给标题「落款」 */
html[data-template="guochao"] .detail-head .pinyin {
position: relative; display: inline-block;
padding: 4px 34px 0;
background: none; color: var(--gc-ink-3);
font-family: var(--gc-sans); font-size: 12.5px; font-weight: 400;
letter-spacing: .3em; text-transform: none;
}
html[data-template="guochao"] .detail-head .pinyin::before,
html[data-template="guochao"] .detail-head .pinyin::after {
content: ''; position: absolute; top: 50%; width: 24px; height: 1px;
background: var(--gc-gold); opacity: .62;
}
html[data-template="guochao"] .detail-head .pinyin::before { left: 0; }
html[data-template="guochao"] .detail-head .pinyin::after { right: 0; }
/* ---------- 属性标签：朱红方章 ---------- */
html[data-template="guochao"] .detail > .tags {
justify-content: center; flex-wrap: wrap;
gap: 10px; margin: 0 0 32px; padding: 0 16px;
background: none; border: 0;
}
html[data-template="guochao"] .tag {
/* 竖排两行才是印面；横排是胶囊，气质立刻变成 App */
display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
/* 印面要近方：拉成长条就成了标签，不是章 */
min-width: 64px; padding: 7px 11px 8px;
background: var(--gc-red);
border: 0; border-radius: 1px;
/* 内金线 = 印面留白围边；没有这道线，红块就只是红块 */
box-shadow: inset 0 0 0 1px rgba(240, 215, 150, .68),
inset 0 0 0 3px rgba(255, 248, 236, .07),
0 1px 4px rgba(140, 26, 31, .22);
}
html[data-template="guochao"] .tag-label {
font-size: 10px; font-weight: 400; letter-spacing: .2em;
text-indent: .2em; /* 补掉末字后多出的字距，字才在印面正中 */
color: rgba(255, 248, 236, .9);
}
html[data-template="guochao"] .tag-value {
font-family: var(--gc-serif); font-size: 14.5px; font-weight: 600;
letter-spacing: .04em; line-height: 1.3; color: #FFF8EC;
}
/* ---------- 田字格：裱起来的一张图版 ---------- */
html[data-template="guochao"] .grid-figure { justify-content: center; margin: 12px 0 26px; }
html[data-template="guochao"] .grid-img {
/* 图版原始 520px，820 视口会压过标题；400 是「一页插图」的尺度 */
/* 上限 364，但永远不超过可用宽度：窄屏靠 100% 兜底 */
max-width: min(364px, 100%); height: auto;
border: 0; border-radius: 0; background: var(--gc-paper-2); padding: 5px;
/* 不用 multiply：这版的山影在标题区，白底会被乘成一片绿，
田字格看着像蒙了层脏膜。装裱好的图版本就该是不透明的。 */
/* 双层框：外框 1px 金，中间 4px 纸色，内细线 1px —— 装裱的语法 */
box-shadow: 0 0 0 1px rgba(184, 144, 31, .3),
0 0 0 4px var(--gc-paper-2),
0 0 0 5px rgba(184, 144, 31, .15);
}
/* ---------- 卡片：白宣 + 双层框 ---------- */
html[data-template="guochao"] .detail .card {
position: relative;
padding: 40px 42px 42px; margin-bottom: 24px;
background: var(--gc-paper-2);
border: 1px solid var(--gc-line); border-radius: 3px;
box-shadow: inset 0 0 0 4px var(--gc-paper-2),
inset 0 0 0 5px rgba(184, 144, 31, .2),
0 2px 12px rgba(90, 64, 32, .05);
animation: gc-rise .5s cubic-bezier(.22, .8, .24, 1) backwards;
}
html[data-template="guochao"] .detail .card.highlight {
background: #FBF4E4;
box-shadow: inset 0 0 0 4px #FBF4E4,
inset 0 0 0 5px rgba(184, 144, 31, .3),
0 2px 12px rgba(90, 64, 32, .05);
}
/* 释义卡的右下角压一道淡青绿山影：这是「边缘有山水纹样」的那一处，
只给释义卡，其它卡片保持干净 —— 每张都压就成了背景布 */
html[data-template="guochao"] .detail .card:has(.explanation)::after {
content: ''; position: absolute; right: 14px; bottom: 9px; width: 58%; height: 30px;
pointer-events: none; opacity: .75;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q26 12 56 18 Q86 24 112 30 Q138 36 168 24 Q196 13 226 22 Q256 31 300 20 L300 40 L0 40 Z' fill='%231F6B5C' opacity='.2'/%3E%3Cpath d='M0 35 Q34 24 64 28 Q94 32 128 37 Q160 42 190 32 Q220 22 252 30 Q276 36 300 31 L300 40 L0 40 Z' fill='%23164F45' opacity='.14'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%);
mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%);
}
/* 板块标题：朱红字 + 金色细线 + 一枚回纹 */
html[data-template="guochao"] .detail .card h2 {
position: relative;
display: flex; align-items: center; gap: 10px;
margin: 0 0 26px; padding: 0 0 14px;
border-bottom: 1px solid var(--gc-line);
font-family: var(--gc-serif); font-size: 25px; font-weight: 700;
line-height: 1.35; letter-spacing: .06em; color: var(--gc-red-ink);
}
html[data-template="guochao"] .detail .card h2::before {
content: ''; flex: 0 0 auto;
width: 22px; height: 22px; margin-top: 1px;
/* 回纹取一个「口」字螺旋：比云纹在小尺寸下清楚得多 */
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21 V3 H21 V15 H9 V9 H15' fill='none' stroke='%23B8901F' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 细线起点压一段实金，线才有「起笔」 */
html[data-template="guochao"] .detail .card h2::after {
content: ''; position: absolute; left: 0; bottom: -1px;
width: 48px; height: 2px;
background: linear-gradient(90deg, var(--gc-gold), var(--gc-gold-2));
}
/* ---------- 释义：朱砂红标重点，不加首字下沉 ---------- */
html[data-template="guochao"] .detail .explanation {
margin: 0; padding: 0; max-width: 36em;
background: none; border: 0; border-radius: 0; box-shadow: none;
font-size: 17.5px; line-height: 2.0; letter-spacing: .012em;
color: var(--gc-ink);
}
html[data-template="guochao"] .detail .explanation strong,
html[data-template="guochao"] .detail .story strong {
font-weight: 600; color: var(--gc-red-ink);
/* 朱砂底下垫一道极淡的红，是荧光笔的克制版 */
box-shadow: inset 0 -.32em 0 rgba(179, 37, 43, .12);
}
/* ---------- 字段列表 ---------- */
html[data-template="guochao"] .detail .fields { gap: 0; }
html[data-template="guochao"] .detail .field {
grid-template-columns: 84px 1fr; gap: 0 24px;
padding: 17px 0; border-top: 1px solid rgba(205, 188, 156, .55);
}
html[data-template="guochao"] .detail .field:first-child { border-top: 0; padding-top: 0; }
html[data-template="guochao"] .detail .field dt {
padding-top: 4px;
font-family: var(--gc-serif); font-size: 12.5px; font-weight: 400;
letter-spacing: .18em; color: var(--gc-gold-ink);
}
html[data-template="guochao"] .detail .field dd {
max-width: 38em; font-size: 16px; line-height: 1.9; color: var(--gc-ink);
}
/* 引文：左边一根金线，缩进一格，像抄在笺上的小注 */
html[data-template="guochao"] .detail .field dd.quote {
max-width: 34em; margin: 0; padding: 2px 0 2px 1.1em;
background: none; border: 0; border-left: 1px solid rgba(184, 144, 31, .45);
border-radius: 0;
font-family: var(--gc-serif); font-size: 15.5px; line-height: 1.95;
color: var(--gc-ink-2);
}
/* ---------- 造句 / 故事 ---------- */
html[data-template="guochao"] .detail .zju-list { list-style: none; counter-reset: gc-zju; }
html[data-template="guochao"] .detail .zju-list li {
counter-increment: gc-zju; position: relative;
max-width: 33em; padding: 0 0 0 34px; margin-bottom: 13px;
font-size: 16px; line-height: 1.9; color: var(--gc-ink);
}
html[data-template="guochao"] .detail .zju-list li:last-child { margin-bottom: 0; }
/* 序号做成小方章：朱红描边、方角，一格一格排下来像钤印 */
html[data-template="guochao"] .detail .zju-list li::before {
content: counter(gc-zju); position: absolute; left: 0; top: .28em;
width: 20px; height: 20px; line-height: 18px; text-align: center;
font-family: var(--gc-serif); font-size: 11px; color: var(--gc-red-ink);
border: 1px solid rgba(179, 37, 43, .38); border-radius: 2px;
background: rgba(179, 37, 43, .045);
}
html[data-template="guochao"] .detail .story {
max-width: 34em; font-size: 16.5px; line-height: 2.05; color: var(--gc-ink);
text-indent: 2em;
}
/* ---------- 近义词 / 反义词 ---------- */
html[data-template="guochao"] .detail .syn-ant { margin-bottom: 16px; }
html[data-template="guochao"] .detail .syn-ant:last-child { margin-bottom: 0; }
html[data-template="guochao"] .detail .syn-ant > strong {
width: 74px; font-family: var(--gc-serif); font-size: 12.5px; font-weight: 400;
letter-spacing: .14em; color: var(--gc-ink-3); vertical-align: middle;
}
html[data-template="guochao"] .detail .chip,
html[data-template="guochao"] .chip {
padding: 4px 13px; background: var(--gc-paper-2);
color: var(--gc-ink); border: 1px solid var(--gc-line-2); border-radius: 2px;
font-size: 14px; font-weight: 400; letter-spacing: .03em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="guochao"] a.chip:hover,
html[data-template="guochao"] .detail a.chip:hover {
background: var(--gc-red-soft); color: var(--gc-red-ink);
border-color: rgba(179, 37, 43, .4);
}
html[data-template="guochao"] .chip.plain { color: var(--gc-ink-3); background: none; }
/* ---------- 趣味延伸 ---------- */
html[data-template="guochao"] .detail .highlight p {
font-size: 15.5px; line-height: 1.95; color: var(--gc-ink-2);
}
html[data-template="guochao"] .detail .gold {
margin-right: 9px; padding: 0;
color: var(--gc-gold-ink); font-family: var(--gc-serif);
font-size: 12.5px; font-weight: 600; letter-spacing: .12em;
background: none; vertical-align: 1px;
}
html[data-template="guochao"] .detail .xhy-list li {
font-size: 15.5px; line-height: 1.95; color: var(--gc-ink-2);
}
html[data-template="guochao"] .detail .xhy-list li::before { color: var(--gc-gold); }
/* ---------- 字义分解：四张笺纸，四种角花 ---------- */
/* 两列两行。四列并排时释义每行只剩六七个字，字再大也读不动。 */
html[data-template="guochao"] .detail .char-decompose {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
/* 四张纸等高：纸有底色，纸外的空白读作「没排满」 */
align-items: stretch;
}
html[data-template="guochao"] .detail .char-item {
position: relative; overflow: hidden; display: grid;
grid-template-columns: 104px minmax(0, 1fr);
column-gap: 22px; row-gap: 0; align-items: start;
padding: 28px 26px 26px;
border: 1px solid var(--gc-line); border-radius: 2px;
box-shadow: none;
}
/* 内细线用真边框画，不用 inset 阴影：卡片是带色的笺纸，
阴影那圈「纸色」是写死的白，会在四边留出一道白环 */
html[data-template="guochao"] .detail .char-item::after {
content: ''; position: absolute; inset: 4px;
border: 1px solid rgba(184, 144, 31, .16); border-radius: 1px;
pointer-events: none;
}
/* 角花：四张各一种纹样，40px、六成浓度 —— 是「印在纸角的一枚小章」，
不是插图，所以贴角、不居中 */
html[data-template="guochao"] .detail .char-item::before {
content: ''; position: absolute; right: 11px; top: 11px;
width: 42px; height: 42px; pointer-events: none; opacity: .62;
background-repeat: no-repeat; background-position: center; background-size: contain;
}
/* 一、云纹 · 朱：笺纸带一点胭脂底 */
html[data-template="guochao"] .detail .char-item:nth-child(4n+1) {
background: #FDF3F0; border-color: rgba(179, 37, 43, .24);
}
html[data-template="guochao"] .detail .char-item:nth-child(4n+1)::after { border-color: rgba(179, 37, 43, .14); }
html[data-template="guochao"] .detail .char-item:nth-child(4n+1)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M42 7 C33 7 26 11 22 18 C18 25 19 32 24 36' fill='none' stroke='%23B3252B' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M42 15 C35 15 30 18 27 23 C24 28 25 33 29 36' fill='none' stroke='%23B3252B' stroke-width='1.1' stroke-linecap='round' opacity='.7'/%3E%3Ccircle cx='34' cy='9' r='3.4' fill='none' stroke='%23B3252B' stroke-width='1.1' opacity='.65'/%3E%3C/svg%3E");
}
/* 二、回纹 · 青绿 */
html[data-template="guochao"] .detail .char-item:nth-child(4n+2) {
background: #F2F7F4; border-color: rgba(31, 107, 92, .26);
}
html[data-template="guochao"] .detail .char-item:nth-child(4n+2)::after { border-color: rgba(31, 107, 92, .15); }
html[data-template="guochao"] .detail .char-item:nth-child(4n+2)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M42 5 H5 V42 H34 V13 H15 V29 H24' fill='none' stroke='%231F6B5C' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
}
/* 三、钱纹 · 金 */
html[data-template="guochao"] .detail .char-item:nth-child(4n+3) {
background: #FBF5E4; border-color: rgba(184, 144, 31, .34);
}
html[data-template="guochao"] .detail .char-item:nth-child(4n+3)::after { border-color: rgba(184, 144, 31, .2); }
html[data-template="guochao"] .detail .char-item:nth-child(4n+3)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='31' cy='13' r='9.5' fill='none' stroke='%23B8901F' stroke-width='1.4'/%3E%3Crect x='27.2' y='9.2' width='7.6' height='7.6' fill='none' stroke='%23B8901F' stroke-width='1.2'/%3E%3Cpath d='M42 34 C36 34 31 38 31 42' fill='none' stroke='%23B8901F' stroke-width='1' opacity='.5'/%3E%3C/svg%3E");
}
/* 四、如意纹 · 墨 */
html[data-template="guochao"] .detail .char-item:nth-child(4n) {
background: #F5F4F0; border-color: rgba(76, 71, 64, .22);
}
html[data-template="guochao"] .detail .char-item:nth-child(4n)::after { border-color: rgba(76, 71, 64, .13); }
html[data-template="guochao"] .detail .char-item:nth-child(4n)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M42 9 C35 9 30 14 30 20 C30 25 33 28 37 28 C40 28 42 25.6 42 22 C42 18.6 39.4 16.4 36.6 17.4' fill='none' stroke='%234C4740' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M42 3 C33 3 24 11 24 21' fill='none' stroke='%234C4740' stroke-width='1' opacity='.55'/%3E%3C/svg%3E");
}
html[data-template="guochao"] .detail .char-glyph {
width: auto; height: auto; align-self: start; display: block;
padding: 0; margin-top: -6px;
font-family: var(--gc-serif); font-size: 92px; font-weight: 700;
line-height: 1.05; letter-spacing: 0; text-align: center;
color: var(--gc-ink); background: none; border: 0; border-radius: 0;
}
html[data-template="guochao"] .detail .char-glyph a { color: var(--gc-ink); }
html[data-template="guochao"] .detail .char-glyph a:hover { color: var(--gc-red-ink); }
html[data-template="guochao"] .detail .char-meta { padding-top: 2px; min-width: 0; }
html[data-template="guochao"] .detail .char-pron {
margin-bottom: 10px; font-size: 12px; letter-spacing: .06em;
line-height: 1.8; color: var(--gc-ink-3);
}
html[data-template="guochao"] .detail .char-extra { gap: 6px; margin-bottom: 10px; }
html[data-template="guochao"] .detail .char-extra-item {
padding: 0 7px; background: var(--gc-gold-soft);
border: 1px solid rgba(184, 144, 31, .3); border-radius: 2px;
font-size: 11px; line-height: 1.7; letter-spacing: .04em; color: var(--gc-gold-ink);
}
html[data-template="guochao"] .detail .char-extra-sep { color: var(--gc-line-2); }
html[data-template="guochao"] .detail .char-shape {
margin-bottom: 0; font-size: 13px; line-height: 1.8; color: var(--gc-ink-3);
}
html[data-template="guochao"] .detail .char-senses {
gap: 10px; margin-top: 13px; padding-top: 13px;
border-top: 1px solid rgba(184, 144, 31, .2);
}
html[data-template="guochao"] .detail .sn-num {
font-family: var(--gc-serif); font-size: 13px; font-weight: 400;
line-height: 1.8; color: var(--gc-red-ink);
}
html[data-template="guochao"] .detail .sn-title {
font-size: 14.5px; font-weight: 600; color: var(--gc-ink);
}
html[data-template="guochao"] .detail .sn-text {
margin-top: 3px; font-size: 13.5px; line-height: 1.85; color: var(--gc-ink-2);
}
html[data-template="guochao"] .detail .expand-sense {
align-self: flex-start; margin-top: 14px; padding: 4px 14px 5px;
background: none; border: 1px solid rgba(184, 144, 31, .45); border-radius: 2px;
color: var(--gc-gold-ink); font-size: 12px; letter-spacing: .08em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="guochao"] .detail .expand-sense:hover {
background: var(--gc-gold-soft); color: var(--gc-red-ink);
border-color: rgba(179, 37, 43, .38);
}
/* ---------- 接龙：一段横卷，两头有轴 ---------- */
html[data-template="guochao"] .detail .tabs {
gap: 28px; margin-bottom: 20px;
border-bottom: 1px solid var(--gc-line);
}
html[data-template="guochao"] .detail .tab {
padding: 0 0 11px; margin-bottom: -1px;
background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
color: var(--gc-ink-3); font-family: var(--gc-serif);
font-size: 14px; font-weight: 400; letter-spacing: .08em;
transition: color .18s, border-color .18s;
}
html[data-template="guochao"] .detail .tab:hover { color: var(--gc-red-ink); }
html[data-template="guochao"] .detail .tab.active {
color: var(--gc-red-ink); font-weight: 600; border-bottom-color: var(--gc-red);
}
/* 卷身：浅金纸，上下各一道金线 */
html[data-template="guochao"] .detail .jielong-chain {
position: relative;
gap: 6px; row-gap: 10px; align-items: flex-start;
margin-bottom: 18px; padding: 16px 26px;
background: linear-gradient(180deg, #FFFAEE 0%, #FDF4E2 56%, #FBF0D6 100%);
border-top: 1px solid rgba(184, 144, 31, .38);
border-bottom: 1px solid rgba(184, 144, 31, .3);
border-radius: 0;
}
/* 两头的轴：一根带高光的金木轴，卷才「卷」得起来 */
html[data-template="guochao"] .detail .jielong-chain::before,
html[data-template="guochao"] .detail .jielong-chain::after {
content: ''; position: absolute; top: -1px; bottom: -1px; width: 10px;
background: linear-gradient(90deg, #A87E2C 0%, #E3C67F 42%, #B08B33 100%);
box-shadow: inset 0 0 0 1px rgba(120, 88, 26, .35);
}
html[data-template="guochao"] .detail .jielong-chain::before { left: -1px; border-radius: 2px 0 0 2px; }
html[data-template="guochao"] .detail .jielong-chain::after { right: -1px; border-radius: 0 2px 2px 0; }
html[data-template="guochao"] .detail .jielong-node {
display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
min-width: 0; padding: 4px 10px 5px;
background: none; border: 1px solid transparent; border-radius: 2px;
box-shadow: none; transform: none;
transition: background .18s, border-color .18s, color .18s;
}
html[data-template="guochao"] .detail .jielong-node .jw {
font-family: var(--gc-serif); font-size: 16.5px; font-weight: 600;
letter-spacing: .06em; color: var(--gc-ink);
}
html[data-template="guochao"] .detail .jielong-node .jp {
font-size: 10.5px; letter-spacing: .04em; color: var(--gc-ink-3);
}
html[data-template="guochao"] .detail .jielong-node:hover {
background: rgba(255, 253, 247, .9);
border-color: rgba(184, 144, 31, .45);
box-shadow: none; transform: none;
}
html[data-template="guochao"] .detail .jielong-node:hover .jw { color: var(--gc-gold-ink); }
/* 当前词：卷面上贴的一张小白笺 */
html[data-template="guochao"] .detail .jielong-node.current {
background: #FFFDF7;
border-color: rgba(179, 37, 43, .3);
box-shadow: 0 1px 4px rgba(120, 88, 26, .16);
}
html[data-template="guochao"] .detail .jielong-node.current .jw { color: var(--gc-red-ink); }
/* 箭头：一道金线带小尖，不用「→」的字形 */
html[data-template="guochao"] .detail .jielong-arrow {
flex: 0 0 auto; align-self: center;
width: 26px; height: 12px; margin: 0 2px;
font-size: 0; line-height: 0; color: transparent;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Cpath d='M2 7 H23' stroke='%23B8901F' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M18.4 3.2 L23.4 7 L18.4 10.8' fill='none' stroke='%23B8901F' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-template="guochao"] .detail .btn-regen {
margin-top: 2px; padding: 8px 20px;
background: none; border: 1px solid rgba(184, 144, 31, .5); border-radius: 2px;
color: var(--gc-gold-ink); font-family: var(--gc-serif);
font-size: 13px; letter-spacing: .1em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="guochao"] .detail .btn-regen:hover {
background: var(--gc-gold-soft); color: var(--gc-red-ink);
border-color: rgba(179, 37, 43, .38);
}
html[data-template="guochao"] .detail .btn-regen:active { background: rgba(184, 144, 31, .22); color: var(--gc-red-ink); }
html[data-template="guochao"] .detail .btn-regen:disabled { opacity: .5; }
/* ---------- 相关成语：国风卡片，拼音做成小印 ---------- */
html[data-template="guochao"] .detail .related-grid {
grid-template-columns: repeat(4, 1fr); gap: 14px;
}
html[data-template="guochao"] .detail .related-item {
position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: 6px;
padding: 16px 16px 17px;
background: var(--gc-paper-2);
border: 1px solid var(--gc-line); border-radius: 2px;
box-shadow: inset 0 2px 0 -1px rgba(184, 144, 31, .3);
transition: background .2s, border-color .2s, box-shadow .2s;
}
/* 右上角一枚朱红小章：带一个「成」字才像钤印。
只画一个空红方块，读者会当成关闭按钮 */
html[data-template="guochao"] .detail .related-item::after {
content: '成'; position: absolute; right: 9px; top: 8px;
width: 17px; height: 17px; line-height: 17px; text-align: center;
font-family: var(--gc-serif); font-size: 10px; color: #FFF8EC;
background: var(--gc-red); border-radius: 1px;
box-shadow: inset 0 0 0 1px rgba(240, 215, 150, .55);
opacity: .88; pointer-events: none;
}
html[data-template="guochao"] .detail .related-item:hover {
border-color: rgba(184, 144, 31, .6);
box-shadow: inset 0 2px 0 -1px rgba(184, 144, 31, .6), 0 3px 10px rgba(90, 64, 32, .07);
transform: none;
}
html[data-template="guochao"] .detail .related-item .rw {
position: relative; z-index: 1;
font-family: var(--gc-serif); font-size: 17px; font-weight: 600;
letter-spacing: .05em; color: var(--gc-ink);
}
html[data-template="guochao"] .detail .related-item .rp {
position: relative; z-index: 1; align-self: flex-start;
padding: 1px 7px 2px; margin-top: 1px;
background: rgba(179, 37, 43, .05);
border: 1px solid rgba(179, 37, 43, .28); border-radius: 2px;
font-size: 11px; line-height: 1.6; letter-spacing: .02em; color: var(--gc-red-ink);
}
html[data-template="guochao"] .detail .related-item small {
position: relative; z-index: 1;
font-size: 11.5px; line-height: 1.7; color: var(--gc-ink-3);
}
html[data-template="guochao"] .detail .related-item:hover .rw { color: var(--gc-red-ink); }
/* ---------- 所属标签 ---------- */
html[data-template="guochao"] .detail .tags-of-idiom .chip {
padding: 5px 14px; font-size: 13.5px;
}
/* ---------- 列表页（搜索 / 拼音 / 标签） ---------- */
html[data-template="guochao"] .list-desc {
max-width: 44em; font-size: 14.5px; line-height: 1.95; color: var(--gc-ink-2);
}
html[data-template="guochao"] .list-desc a {
color: var(--gc-red-ink); box-shadow: inset 0 -1px 0 rgba(179, 37, 43, .4);
}
html[data-template="guochao"] .result-list {
background: var(--gc-paper-2);
border: 1px solid var(--gc-line); border-radius: 3px;
box-shadow: inset 0 0 0 4px var(--gc-paper-2), inset 0 0 0 5px rgba(184, 144, 31, .18);
}
html[data-template="guochao"] .result-item {
padding: 16px 22px; gap: 4px 12px;
border-bottom: 1px solid rgba(205, 188, 156, .6);
}
html[data-template="guochao"] .result-item:last-child { border-bottom: 0; }
html[data-template="guochao"] .result-item .rw {
font-family: var(--gc-serif); font-size: 18px; font-weight: 600;
letter-spacing: .06em; color: var(--gc-ink);
}
html[data-template="guochao"] .result-item .rp {
font-size: 12px; letter-spacing: .08em; color: var(--gc-ink-3);
}
html[data-template="guochao"] .result-item .re {
flex: 1 1 100%; font-size: 13.5px; line-height: 1.8; color: var(--gc-ink-2);
}
html[data-template="guochao"] .result-item:hover { background: rgba(179, 37, 43, .035); }
html[data-template="guochao"] .result-item:hover .rw { color: var(--gc-red-ink); }
/* ---------- 字典页 / 词语页：同一套语法，只补差异 ---------- */
html[data-template="guochao"] .detail .sub-h {
margin: 24px 0 12px; padding: 0 0 8px;
/* 基础样式是 3px 彩色左边线，在宣纸上像一条便利贴，改成金线压底 */
border-left: 0; border-bottom: 1px solid var(--gc-line);
font-family: var(--gc-serif); font-size: 16px; font-weight: 600;
letter-spacing: .1em; color: var(--gc-red-ink);
}
html[data-template="guochao"] .detail .sense-body,
html[data-template="guochao"] .detail .sense-line,
html[data-template="guochao"] .detail .classic p {
max-width: 42em;
font-size: 15px; line-height: 1.95; color: var(--gc-ink);
}
html[data-template="guochao"] .detail .classic p { color: var(--gc-ink-2); }
html[data-template="guochao"] .detail .sense-line.sense-attr {
padding-left: 24px; font-size: 14px; color: var(--gc-ink-2);
}
html[data-template="guochao"] .detail .attr-tag {
color: var(--gc-red-ink); font-family: var(--gc-serif);
font-size: 11.5px; font-weight: 400; line-height: 2.05;
}
html[data-template="guochao"] .detail .sense-detail {
border-bottom: 1px solid rgba(205, 188, 156, .5);
}
html[data-template="guochao"] .detail .sense-detail:last-child { border-bottom: 0; }
/* ---------- 404 ---------- */
html[data-template="guochao"] .not-found { padding: 62px 16px 44px; text-align: center; }
html[data-template="guochao"] .not-found h1 {
margin: 0 0 14px; line-height: 1;
font-family: var(--gc-serif); font-size: clamp(64px, 8.4vw, 104px);
font-weight: 700; letter-spacing: .12em; text-indent: .12em;
/* 深朱红，不描金：描金的数字会变成「节日大促」 */
color: var(--gc-red-deep);
}
html[data-template="guochao"] .not-found p {
font-size: 14.5px; letter-spacing: .06em; color: var(--gc-ink-2);
}
html[data-template="guochao"] .not-found .hero-search { max-width: 460px; margin: 26px auto 0; }
html[data-template="guochao"] .not-found .back { margin-top: 22px; }
html[data-template="guochao"] .not-found .back a {
color: var(--gc-gold-ink); font-size: 13px; letter-spacing: .08em;
}
/* ---------- 页脚：把导航条在底部再收一次 ---------- */
html[data-template="guochao"] .site-footer {
position: relative;
margin-top: 58px; padding: 40px 0 42px;
background: linear-gradient(180deg, #8C1A1F 0%, #7B1216 100%);
border-top: 0; color: rgba(255, 248, 236, .82);
font-size: 12.5px; letter-spacing: .06em;
}
/* 顶边一条回纹织带：页脚是「卷轴的下轴」，得有个包边 */
html[data-template="guochao"] .site-footer::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px;
background: url("/public/img/tpl-gc-fret-dark.svg") repeat-x center / 20px 10px;
opacity: .8;
}
html[data-template="guochao"] .footer-inner {
align-items: center; justify-content: center;
padding: 0 16px; text-align: center; gap: 12px;
}
html[data-template="guochao"] .copyright { color: rgba(255, 248, 236, .72); font-size: 12.5px; }
html[data-template="guochao"] .footer-nav { justify-content: center; gap: 18px; }
html[data-template="guochao"] .footer-nav a { color: rgba(255, 248, 236, .86); font-size: 13px; }
html[data-template="guochao"] .footer-nav a:hover { color: #F3D793; }
html[data-template="guochao"] .footer-hub { color: rgba(255, 248, 236, .62); }
html[data-template="guochao"] .footer-hub a { color: rgba(255, 248, 236, .86); }
html[data-template="guochao"] .footer-hub a:hover { color: #F3D793; }
html[data-template="guochao"] .fh-label { color: rgba(255, 248, 236, .58); }
/* ---------- 首页：一块匾额 ---------- */
html[data-template="guochao"] .hero {
position: relative; text-align: center; padding: 76px 0 52px;
}
html[data-template="guochao"] .hero::before {
content: ''; position: absolute; left: 50%; transform: translateX(-50%);
top: -26px; width: 100%; height: 340px; z-index: -1; pointer-events: none;
background: url("/public/img/tpl-gc-scene.svg") center bottom / 100% 100% no-repeat;
/* 和详情页同样要羽化下沿，否则山会在搜索框上方切出一条直边 */
-webkit-mask-image: linear-gradient(180deg, #000 46%, transparent 96%);
mask-image: linear-gradient(180deg, #000 46%, transparent 96%);
opacity: .85;
}
html[data-template="guochao"] .hero h1 {
position: relative; display: inline-block; margin: 0 0 22px;
padding-bottom: 18px;
font-family: var(--gc-serif);
font-size: clamp(40px, 5.6vw, 72px); font-weight: 700;
line-height: 1.16; letter-spacing: .13em; text-indent: .13em;
/* 首页是「招牌」，用朱红；详情页是内容，回到墨色 */
color: var(--gc-red-deep);
background-image: linear-gradient(90deg, transparent, var(--gc-gold) 18%, var(--gc-gold) 82%, transparent);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% 1px;
animation: gc-rise .62s cubic-bezier(.22, .8, .24, 1) backwards;
}
/* 首页标题不再挂祥云：背景里那两朵就在旁边，再贴一对就成了四朵，
而且左边会挤成一团。匾额感靠朱红大字 + 金线压底已经够了。 */
html[data-template="guochao"] .hero-sub {
max-width: 34em; margin: 0 auto; padding: 0;
font-size: 13px; line-height: 2.0; letter-spacing: .1em;
color: var(--gc-ink-3); text-align: center;
}
html[data-template="guochao"] .hero-sub strong { color: var(--gc-red-ink); font-weight: 600; }
html[data-template="guochao"] .hero-search {
width: 100%; max-width: 520px; margin: 30px auto 0;
gap: 8px; align-items: stretch;
background: none; border: 0; border-radius: 0; box-shadow: none;
}
html[data-template="guochao"] .hero-search input {
flex: 1; min-width: 0; height: 50px; padding: 0 16px;
background: var(--gc-paper-2);
border: 1px solid var(--gc-line-2); border-radius: 2px;
font-size: 15.5px; color: var(--gc-ink);
transition: border-color .18s, box-shadow .18s;
}
html[data-template="guochao"] .hero-search input::placeholder { color: var(--gc-ink-3); }
html[data-template="guochao"] .hero-search input:focus {
outline: 0; border-color: rgba(184, 144, 31, .75);
box-shadow: 0 0 0 3px rgba(184, 144, 31, .12);
}
/* 按钮是一方朱印：方角、米白字、内金线 */
html[data-template="guochao"] .hero-search button {
height: 50px; padding: 0 28px;
background: var(--gc-red); border: 0; border-radius: 2px;
color: #FFF8EC; font-family: var(--gc-serif);
font-size: 14px; font-weight: 600; letter-spacing: .2em; text-indent: .2em;
box-shadow: inset 0 0 0 1px rgba(233, 203, 133, .5);
transition: background .18s;
}
html[data-template="guochao"] .hero-search button:hover { background: var(--gc-red-deep); }
html[data-template="guochao"] .card {
padding: 32px 34px; margin-bottom: 18px;
background: var(--gc-paper-2);
border: 1px solid var(--gc-line); border-radius: 3px;
box-shadow: inset 0 0 0 4px var(--gc-paper-2),
inset 0 0 0 5px rgba(184, 144, 31, .18),
0 2px 10px rgba(90, 64, 32, .04);
}
html[data-template="guochao"] .card h2 {
position: relative; display: flex; align-items: center; gap: 9px;
margin-bottom: 20px; padding: 0 0 13px;
border-bottom: 1px solid var(--gc-line);
font-family: var(--gc-serif); font-size: 21px; font-weight: 700;
letter-spacing: .06em; color: var(--gc-red-ink);
}
html[data-template="guochao"] .card h2::before {
content: ''; flex: 0 0 auto; width: 18px; height: 18px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21 V3 H21 V15 H9 V9 H15' fill='none' stroke='%23B8901F' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-template="guochao"] .card h2::after {
left: 0; bottom: -1px; width: 42px; height: 2px; border-radius: 0;
background: linear-gradient(90deg, var(--gc-gold), var(--gc-gold-2));
}
html[data-template="guochao"] .muted {
max-width: 42em; font-size: 14.5px; line-height: 1.9; color: var(--gc-ink-2);
}
html[data-template="guochao"] .muted a { color: var(--gc-red-ink); }
/* 字母格：一格格金框小牌 */
html[data-template="guochao"] .letters { grid-template-columns: repeat(13, 1fr); gap: 9px; }
html[data-template="guochao"] .letter {
padding: 11px 4px; background: var(--gc-paper-2);
border: 1px solid var(--gc-line); border-radius: 2px;
color: var(--gc-ink); font-family: var(--gc-serif);
font-size: 17px; font-weight: 600; letter-spacing: .04em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="guochao"] .letter small { color: var(--gc-ink-3); font-size: 10.5px; letter-spacing: 0; }
html[data-template="guochao"] .letter:hover {
background: var(--gc-red-soft); border-color: rgba(179, 37, 43, .38); color: var(--gc-red-ink);
}
html[data-template="guochao"] .letter:hover small { color: var(--gc-red-ink); }
html[data-template="guochao"] .letter.empty { color: var(--gc-line-2); }
html[data-template="guochao"] .letter.empty:hover {
background: var(--gc-paper-2); border-color: var(--gc-line); color: var(--gc-line-2);
}
/* 热门成语卡 */
html[data-template="guochao"] .hot-item {
position: relative; overflow: hidden; gap: 4px;
padding: 15px 15px 16px;
background: var(--gc-paper-2);
border: 1px solid var(--gc-line); border-radius: 2px;
box-shadow: inset 0 2px 0 -1px rgba(184, 144, 31, .3);
transition: background .2s, border-color .2s, box-shadow .2s;
}
html[data-template="guochao"] .hot-item:hover {
border-color: rgba(184, 144, 31, .6);
box-shadow: inset 0 2px 0 -1px rgba(184, 144, 31, .6), 0 3px 10px rgba(90, 64, 32, .06);
transform: none;
}
html[data-template="guochao"] .hot-word {
position: relative; z-index: 1;
font-family: var(--gc-serif); font-size: 18px; font-weight: 600;
letter-spacing: .06em; color: var(--gc-ink);
}
html[data-template="guochao"] .hot-pinyin {
position: relative; z-index: 1; margin-top: 0;
font-size: 11px; letter-spacing: .08em; color: var(--gc-ink-3);
}
html[data-template="guochao"] .hot-expl {
position: relative; z-index: 1; margin-top: 5px;
font-size: 13px; line-height: 1.75; color: var(--gc-ink-2);
}
html[data-template="guochao"] .hot-item:hover .hot-word { color: var(--gc-red-ink); }
/* 「换几种查法」：竖线隔开的文字组 */
html[data-template="guochao"] .chips:has(.chip-py) { gap: 0; row-gap: 14px; margin-top: 20px; }
html[data-template="guochao"] .chips { gap: 9px; }
html[data-template="guochao"] .chip-py {
display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: 1px 18px; text-align: left;
background: none; border: 0; border-left: 1px solid var(--gc-line-2); border-radius: 0;
}
html[data-template="guochao"] .chip-py:first-child { padding-left: 0; border-left: 0; }
html[data-template="guochao"] .chip-py .cp-word {
font-family: var(--gc-serif); font-size: 15px; font-weight: 600; color: var(--gc-ink);
}
html[data-template="guochao"] .chip-py .cp-py { font-size: 11.5px; color: var(--gc-ink-3); letter-spacing: .03em; }
html[data-template="guochao"] a.chip-py:hover { background: none; }
html[data-template="guochao"] a.chip-py:hover .cp-word { color: var(--gc-red-ink); }
html[data-template="guochao"] .chip small { margin-left: 6px; font-size: 11px; color: var(--gc-ink-3); }
/* ---------- 动效：抬起来，不是飘进来 ---------- */
@keyframes gc-rise {
from { opacity: 0; transform: translateY(9px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes gc-fade { from { opacity: 0; } to { opacity: 1; } }
html[data-template="guochao"] .detail > section:nth-of-type(1) { animation-delay: .04s; }
html[data-template="guochao"] .detail > section:nth-of-type(2) { animation-delay: .08s; }
html[data-template="guochao"] .detail > section:nth-of-type(3) { animation-delay: .12s; }
html[data-template="guochao"] .detail > section:nth-of-type(4) { animation-delay: .16s; }
html[data-template="guochao"] .detail > section:nth-of-type(5) { animation-delay: .19s; }
html[data-template="guochao"] .detail > section:nth-of-type(6) { animation-delay: .22s; }
html[data-template="guochao"] .detail > section:nth-of-type(7) { animation-delay: .25s; }
html[data-template="guochao"] .detail > section:nth-of-type(n+8) { animation-delay: .28s; }
html[data-template="guochao"] .detail .tab-panel:not([hidden]) { animation: gc-fade .22s ease-out; }
/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
html[data-template="guochao"] .detail .related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
html[data-template="guochao"] .detail .char-decompose { grid-template-columns: 1fr; }
html[data-template="guochao"] .detail .related-grid { grid-template-columns: repeat(2, 1fr); }
html[data-template="guochao"] .detail .card { padding: 32px 26px 34px; }
}
@media (max-width: 640px) {
html[data-template="guochao"] .header-inner { min-height: 60px; gap: 14px; }
html[data-template="guochao"] .logo { font-size: 17px; letter-spacing: .12em; }
/* 基础样式在手机上整条藏掉导航，这里改成横滑，字距收窄才放得下 */
html[data-template="guochao"] .nav {
display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
html[data-template="guochao"] .nav::-webkit-scrollbar { display: none; }
html[data-template="guochao"] .nav a { flex: 0 0 auto; padding: 4px 10px; font-size: 12.5px; letter-spacing: .04em; }
html[data-template="guochao"] .nav a + a { box-shadow: none; }
html[data-template="guochao"] .search-box { padding-left: 9px; }
html[data-template="guochao"] .search-box input { height: 28px; font-size: 12.5px; width: 92px; }
html[data-template="guochao"] .search-box button { height: 28px; padding: 0 9px; font-size: 12px; letter-spacing: .06em; }
html[data-template="guochao"] .breadcrumb { padding-top: 16px; font-size: 11.5px; }
/* 山影在窄屏要压扁：按 1000 版心画的山形套到 358px 上只剩一条底边 */
html[data-template="guochao"] .detail::before { top: -8px; height: 210px; }
html[data-template="guochao"] .detail > .detail-head { padding: 32px 8px 22px; }
html[data-template="guochao"] .detail-head h1 {
font-size: clamp(34px, 11.4vw, 52px); letter-spacing: .05em; text-indent: .05em;
margin-bottom: 2px;
}
html[data-template="guochao"] .detail-head .pinyin { font-size: 11px; letter-spacing: .2em; padding: 4px 26px 0; }
html[data-template="guochao"] .detail-head .pinyin::before,
html[data-template="guochao"] .detail-head .pinyin::after { width: 16px; }
/* 印章保持自己的宽度，排不下就居中折行，别拉成两列大长条 */
html[data-template="guochao"] .detail > .tags {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 8px; margin-bottom: 22px; padding: 0 8px;
}
html[data-template="guochao"] .tag { flex: 0 0 auto; min-width: 62px; padding: 5px 9px 6px; }
html[data-template="guochao"] .tag-label { font-size: 9.5px; letter-spacing: .12em; text-indent: .12em; }
html[data-template="guochao"] .tag-value { font-size: 13.5px; }
html[data-template="guochao"] .grid-figure { margin-bottom: 20px; }
html[data-template="guochao"] .detail .card { padding: 26px 18px 28px; margin-bottom: 16px; }
html[data-template="guochao"] .detail .card h2 { font-size: 20px; gap: 8px; margin-bottom: 20px; padding-bottom: 12px; }
html[data-template="guochao"] .detail .card h2::before { width: 16px; height: 16px; }
html[data-template="guochao"] .detail .card h2::after { width: 34px; }
html[data-template="guochao"] .detail .explanation { font-size: 16.5px; line-height: 1.95; }
/* 卡片内边距收到 28px 后，30px 高的山影会顶到最后一行字上；
窄屏把它压扁、再往下贴 */
html[data-template="guochao"] .detail .card:has(.explanation)::after { height: 18px; bottom: 5px; opacity: .6; }
html[data-template="guochao"] .detail .field { grid-template-columns: 1fr; gap: 4px; padding: 13px 0; }
html[data-template="guochao"] .detail .field dt { padding-top: 0; font-size: 12px; }
html[data-template="guochao"] .detail .field dd { font-size: 15px; }
html[data-template="guochao"] .detail .field dd.quote { font-size: 14.5px; padding-left: 13px; }
html[data-template="guochao"] .detail .zju-list li { padding-left: 30px; font-size: 15px; }
html[data-template="guochao"] .detail .story { font-size: 15.5px; }
html[data-template="guochao"] .detail .syn-ant > strong { display: block; width: auto; margin-bottom: 7px; }
/* 字义：字缩到 72px，右边才留得下整句 */
html[data-template="guochao"] .detail .char-item {
grid-template-columns: 78px minmax(0, 1fr); column-gap: 16px;
padding: 22px 18px 22px;
}
html[data-template="guochao"] .detail .char-glyph { font-size: 70px; }
html[data-template="guochao"] .detail .char-item::before { width: 32px; height: 32px; right: 5px; top: 5px; }
/* 接龙竖排：卷轴横过来，两头的轴改到上下 */
html[data-template="guochao"] .detail .jielong-chain {
flex-direction: column; align-items: flex-start;
padding: 18px 16px; row-gap: 0;
}
html[data-template="guochao"] .detail .jielong-chain::before,
html[data-template="guochao"] .detail .jielong-chain::after {
left: -1px; right: -1px; width: auto; height: 8px;
}
html[data-template="guochao"] .detail .jielong-chain::before { top: -1px; bottom: auto; border-radius: 2px 2px 0 0; }
html[data-template="guochao"] .detail .jielong-chain::after { top: auto; bottom: -1px; border-radius: 0 0 2px 2px; }
html[data-template="guochao"] .detail .jielong-node { padding: 3px 8px 4px; }
html[data-template="guochao"] .detail .jielong-arrow {
width: 12px; height: 24px; margin: 2px 0 2px 12px;
transform: rotate(90deg);
}
html[data-template="guochao"] .detail .related-grid { gap: 11px; }
html[data-template="guochao"] .detail .related-item { padding: 13px 13px 14px; }
html[data-template="guochao"] .hero { padding: 44px 0 32px; }
html[data-template="guochao"] .hero::before { top: -14px; height: 240px; }
html[data-template="guochao"] .hero h1 {
font-size: clamp(32px, 10.4vw, 44px); letter-spacing: .1em; text-indent: .1em;
margin-bottom: 18px; padding-bottom: 15px;
}
html[data-template="guochao"] .hero-sub { font-size: 12px; line-height: 1.95; letter-spacing: .06em; }
html[data-template="guochao"] .hero-search { margin-top: 24px; flex-wrap: nowrap; gap: 7px; }
html[data-template="guochao"] .hero-search input { height: 46px; font-size: 14.5px; padding: 0 12px; }
html[data-template="guochao"] .hero-search button {
height: 46px; padding: 0 16px; font-size: 13px; letter-spacing: .12em; text-indent: .12em;
flex: 0 0 auto; white-space: nowrap;
}
html[data-template="guochao"] .card { padding: 24px 18px; }
html[data-template="guochao"] .letters { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
html[data-template="guochao"] .site-footer { margin-top: 40px; padding: 34px 0 36px; }
}
/* ============================================================================
* 视觉模板：Y2K 千禧甜酷风（html[data-template="y2k"]）
* ----------------------------------------------------------------------------
* 北极星：2000 年前后的少女卧室桌面 —— 拉丝金属边框、糖果色塑料外壳、
* 半透明磨砂面板、贴纸式的虚线和小星星。
*
* 和前面几版的关系：国潮靠「界线清楚」，水彩靠「浓度消失」，这一版靠
* **材质**：金属靠高光，糖果靠渐变，玻璃靠半透明 + 模糊。
*
* 四条硬规则：
* 1. 金属只出现在「边」上，不出现「面」上。银色做 1px 描边和外发光，
* 整块银底会把页面压成灰色塑料壳。渐变必须是「浅-深-浅」三段，
* 中间那道深色才是金属的转折，两段渐变读起来只是脏。
* 2. 粉色不做正文色。--yk-pink-ink（#BE3468）只用在标签、字段名、强调词，
* 正文一律 #2B2C38 —— 粉字长读会糊成一片。
* 3. 圆角只有两档：超大（26–30px，卡片）和全圆（999px，按钮/标签/泡泡）。
* 中间那些 8/12px 的圆角会让整套退回成普通扁平卡片。
* 4. 本模板不加任何图片文件。金属、泡泡、星星、虚线全部由渐变和
* clip-path 画出来 —— 少三个 svg 就少三处「子目录部署要改绝对路径」。
*
* 字体：优先阿里普惠体（标题要的就是它那种「圆头粗身」）。这台机器 / 大多数
* 访客都不会预装，所以退了 MiSans / HarmonyOS Sans / 苹方 / 雅黑。想用真身：
* 把 AlibabaPuHuiTi-3-105-Heavy.woff2 与 -55-Regular.woff2 放进 /public/fonts/，
* 解开下面两行即可，不用改任何选择器。
*
* @font-face { font-family: "Alibaba PuHuiTi 3.0"; font-weight: 900;
* src: url("/public/fonts/AlibabaPuHuiTi-3-105-Heavy.woff2") format("woff2"); font-display: swap; }
* @font-face { font-family: "Alibaba PuHuiTi 3.0"; font-weight: 400;
* src: url("/public/fonts/AlibabaPuHuiTi-3-55-Regular.woff2") format("woff2"); font-display: swap; }
* ==========================================================================*/
html[data-template="y2k"] {
/* ---- 底色与字 ---- */
--yk-page: #F2F3F8; /* 浅灰白，整页底 */
--yk-page-2: #FAFAFD;
--yk-ink: #2B2C38; /* 正文，12.4:1 */
--yk-ink-2: #4C4E60; /* 7.1:1 */
--yk-ink-3: #6B6D80; /* 小字，压 #F2F3F8 上 4.6:1 */
/* ---- 金属银（只做描边与高光） ---- */
--yk-silver: #C6CFDC;
--yk-silver-2: #E7ECF3;
--yk-silver-3: #98A4B6;
--yk-chrome: linear-gradient(160deg, #F4F7FB 0%, #FFFFFF 20%, #CCD6E3 46%,
#FBFDFF 58%, #D8E0EA 80%, #FFFFFF 100%);
/* ---- 淡樱粉 ---- */
--yk-pink: #F7B8CE; /* 泡泡面 */
--yk-pink-2: #FFE3EE; /* 极浅底 */
--yk-pink-3: #F293B8; /* 实心按钮 */
--yk-pink-ink: #BE3468; /* 粉字，白底 5.4:1 */
--yk-pink-deep: #9B2551;
/* ---- 冰浅蓝 / 浅灰紫 / 米白（四张字义卡的底色） ---- */
--yk-blue: #BFDFF8;
--yk-blue-2: #E6F3FE;
--yk-lilac: #D8D1F0;
--yk-lilac-2: #F0EBFC;
--yk-cream: #FBF5EA;
/* ---- 普惠体：装了就用，没装退到系统里的「粗圆」 ---- */
--yk-font: "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "AlibabaPuHuiTi-3-85-Bold",
"MiSans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei",
"Segoe UI", sans-serif;
/* ---- 接管基础变量 ---- */
--primary: #BE3468;
--primary-dark: #9B2551;
--primary-soft: #FFE6F0;
--ink: #2B2C38;
--ink-soft: #4C4E60;
--ink-faint: #6B6D80;
--bg: #F2F3F8;
--card: #FFFFFF;
--border: #DFE4EE;
--gold: #5F508F; /* 灰紫，小字仍读得清 */
--radius: 26px;
--shadow: 0 10px 28px rgba(122, 138, 168, .10);
--font-sans: var(--yk-font);
--font-serif: var(--yk-font);
}
/* ---------- 底：浅灰白 + 细点阵 + 三团柔光 ---------- */
html[data-template="y2k"] body {
background-color: var(--yk-page);
background-image:
radial-gradient(720px 420px at 6% -6%, rgba(255, 206, 226, .55), transparent 62%),
radial-gradient(680px 400px at 96% 2%, rgba(196, 226, 252, .55), transparent 64%),
radial-gradient(760px 520px at 50% 104%, rgba(216, 209, 240, .48), transparent 68%),
radial-gradient(rgba(163, 176, 199, .30) 1px, transparent 1.2px);
background-size: auto, auto, auto, 14px 14px;
background-attachment: fixed, fixed, fixed, fixed;
background-repeat: no-repeat, no-repeat, no-repeat, repeat;
color: var(--yk-ink);
font-family: var(--yk-font);
line-height: 1.8;
}
/* 页脚是深灰紫的，短页面（404、空搜索）下面会露出一大块浅底，
看着像页面断了。用一整列把页脚压到底。 */
html[data-template="y2k"] body {
display: flex; flex-direction: column; min-height: 100vh;
}
/* min-width:0 必须写：flex 子项的自动最小尺寸是 min-content，
田字格图版 364px 会把整个 main 撑到 364，320 屏上正文全被推出屏幕 */
html[data-template="y2k"] main { flex: 1 0 auto; min-width: 0; }
html[data-template="y2k"] a { color: var(--yk-pink-ink); }
html[data-template="y2k"] a:hover { color: var(--yk-pink-deep); }
html[data-template="y2k"] ::selection { background: rgba(247, 184, 206, .55); color: #2B2C38; }
/* ---------- 顶部：一块悬浮的半透粉玻璃，四周压细金属边 ---------- */
html[data-template="y2k"] .site-header {
top: 10px;
margin: 12px 16px 0;
border: 0;
border-radius: 22px;
background:
linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 236, 244, .78) 100%);
box-shadow:
0 0 0 1px rgba(188, 200, 220, .85),
0 0 0 2px rgba(255, 255, 255, .60),
inset 0 1px 0 #fff,
0 12px 30px rgba(126, 146, 180, .14);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
backdrop-filter: blur(14px) saturate(1.15);
}
html[data-template="y2k"] .site-header .container { padding: 0 20px; }
html[data-template="y2k"] .header-inner { min-height: 66px; gap: 22px; }
/* 站点名：粗圆 + 一颗会发光的小糖豆 */
html[data-template="y2k"] .logo {
font-family: var(--yk-font);
font-size: 22px; font-weight: 900; letter-spacing: .04em;
color: var(--yk-ink);
padding: 0; border-radius: 0; background: none;
text-shadow: 0 1px 0 #fff, 0 2px 6px rgba(190, 160, 180, .35);
}
html[data-template="y2k"] .logo:hover { color: var(--yk-pink-deep); }
html[data-template="y2k"] .logo::before {
content: ''; display: inline-block;
width: 9px; height: 9px; margin-right: 8px; vertical-align: 2px;
border-radius: 50%;
background: linear-gradient(150deg, #FFD9E7 0%, #F58FB6 100%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 9px rgba(245, 143, 182, .75);
}
/* 导航：一排小药丸 */
html[data-template="y2k"] .nav { gap: 6px; }
html[data-template="y2k"] .nav a {
padding: 6px 15px; border-radius: 999px;
color: #5A5C70; font-size: 14.5px; font-weight: 600; letter-spacing: .02em;
transition: color .18s, background .18s, box-shadow .18s;
}
html[data-template="y2k"] .nav a:hover {
color: var(--yk-pink-deep);
background: linear-gradient(180deg, #FFFFFF 0%, #FFE8F1 100%);
box-shadow: 0 0 0 1px rgba(226, 196, 214, .9), 0 3px 8px rgba(214, 160, 186, .22);
}
/* 搜索：两粒分开的胶囊，输入白、按钮糖粉 */
html[data-template="y2k"] .search-box {
gap: 8px; max-width: 366px; padding: 0;
background: none; border: 0; box-shadow: none;
}
html[data-template="y2k"] .search-box input {
height: 40px; padding: 0 16px;
border: 1px solid rgba(190, 202, 220, .95); border-radius: 999px;
background: #FFFDFE; font-size: 14px; color: var(--yk-ink);
box-shadow: inset 0 1px 3px rgba(150, 168, 196, .12);
transition: border-color .18s, box-shadow .18s;
}
html[data-template="y2k"] .search-box input::placeholder { color: var(--yk-ink-3); }
html[data-template="y2k"] .search-box input:focus {
border-color: var(--yk-pink-3);
box-shadow: 0 0 0 3px rgba(247, 184, 206, .38), inset 0 1px 2px rgba(150, 168, 196, .10);
}
html[data-template="y2k"] .search-box button {
height: 40px; padding: 0 22px; border: 0; border-radius: 999px;
background: linear-gradient(180deg, #FFCFE0 0%, #F293B8 100%);
color: #7A2148; font-size: 14px; font-weight: 800; letter-spacing: .04em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 4px 10px rgba(226, 140, 175, .32);
transition: filter .18s, transform .1s;
}
html[data-template="y2k"] .search-box button:hover { filter: brightness(1.04); background: linear-gradient(180deg, #FFCFE0 0%, #F293B8 100%); }
html[data-template="y2k"] .search-box button:active { transform: scale(.97); }
html[data-template="y2k"] .suggest {
top: 46px; border: 0; border-radius: 20px; background: #fff;
box-shadow: 0 0 0 1px rgba(190, 202, 220, .9), 0 16px 34px rgba(126, 146, 180, .20);
overflow: hidden;
}
html[data-template="y2k"] .suggest a { border-bottom: 1px dashed rgba(214, 222, 234, .9); color: var(--yk-ink); }
html[data-template="y2k"] .suggest a:hover,
html[data-template="y2k"] .suggest a.active { background: linear-gradient(90deg, #FFF1F7, #F3F9FF); color: var(--yk-pink-deep); }
html[data-template="y2k"] .suggest .s-pinyin { color: var(--yk-ink-3); }
/* ---------- 面包屑 ---------- */
html[data-template="y2k"] .breadcrumb { padding: 20px 0 2px; font-size: 12.5px; color: var(--yk-ink-3); }
html[data-template="y2k"] .breadcrumb li { color: var(--yk-ink-3); }
html[data-template="y2k"] .breadcrumb a { color: var(--yk-ink-2); }
html[data-template="y2k"] .breadcrumb a:hover { color: var(--yk-pink-ink); }
/* ---------- 标题区：一条虚线轨道 + 几颗泡泡，字压在中间 ---------- */
html[data-template="y2k"] .detail-head {
position: relative; isolation: isolate;
padding: 46px 0 20px;
}
/* 虚线椭圆轨道：只留上沿，下沿羽化掉，像标题背后的一面弧形灯环 */
html[data-template="y2k"] .detail-head::before {
content: ''; position: absolute; z-index: -1;
left: 50%; top: 8px; transform: translateX(-50%);
width: min(680px, 96%); height: 250px;
border: 1px dashed rgba(214, 166, 192, .48);
border-radius: 50%;
-webkit-mask-image: linear-gradient(180deg, #000 26%, transparent 94%);
mask-image: linear-gradient(180deg, #000 26%, transparent 94%);
pointer-events: none;
}
/* 泡泡群：四个大小不一的圆，金属高光在左上 */
html[data-template="y2k"] .detail-head::after {
content: ''; position: absolute; z-index: -1; inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 16% 30%, rgba(255, 255, 255, .95) 0 11px, rgba(197, 228, 252, .85) 11px 24px, transparent 25px),
radial-gradient(circle at 84% 22%, rgba(255, 255, 255, .95) 0 7px, rgba(255, 222, 236, .9) 7px 17px, transparent 18px),
radial-gradient(circle at 78% 76%, rgba(255, 255, 255, .9) 0 5px, rgba(223, 214, 246, .85) 5px 13px, transparent 14px),
radial-gradient(circle at 22% 82%, rgba(255, 255, 255, .9) 0 4px, rgba(255, 226, 238, .8) 4px 10px, transparent 11px);
opacity: .8;
}
/* 标题：粗圆 + 银色外发光。外发光是「白-银-白」三层叠出来的，
单层灰影只会读成「字糊了」。 */
html[data-template="y2k"] .detail-head h1 {
font-family: var(--yk-font);
font-size: clamp(46px, 6.4vw, 82px);
font-weight: 900; letter-spacing: .06em; text-indent: .06em;
color: #2E2F3C; margin-bottom: 12px; line-height: 1.18;
text-shadow:
0 1px 0 #FFFFFF,
0 2px 0 #FFFFFF,
0 3px 0 rgba(186, 197, 214, .80),
0 5px 0 rgba(205, 214, 228, .55),
0 9px 16px rgba(120, 140, 175, .20),
0 0 34px rgba(255, 255, 255, .95),
0 0 46px rgba(247, 184, 206, .45);
}
html[data-template="y2k"] .detail-head .head-sub { gap: 12px; }
html[data-template="y2k"] .detail-head .pinyin {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 18px 5px; border-radius: 999px;
background: rgba(255, 255, 255, .78);
box-shadow: 0 0 0 1px rgba(206, 216, 230, .95), inset 0 1px 0 #fff;
font-size: 16px; letter-spacing: .22em; color: var(--yk-ink-2);
}
html[data-template="y2k"] .detail-head .pinyin::before,
html[data-template="y2k"] .detail-head .pinyin::after {
content: ''; width: 5px; height: 5px; border-radius: 50%; flex: none;
background: linear-gradient(150deg, #FFD9E7, #F293B8);
box-shadow: 0 0 6px rgba(242, 147, 184, .7);
}
html[data-template="y2k"] .pron-btn {
border: 1px solid rgba(190, 202, 220, .95);
background: linear-gradient(180deg, #FFFFFF, #F1F5FA);
color: var(--yk-pink-ink);
}
html[data-template="y2k"] .pron-btn:hover { background: var(--yk-pink-3); color: #fff; }
/* ---------- 属性标签：水滴形泡泡 ----------
* 药丸本体 + 左下角一颗小圆 = 吐出来的一个泡。小圆和本体同色同描边，
* 差 4px 叠在一起，才有「连着的一滴」的意思，离开本体就成散落的点。 */
html[data-template="y2k"] .tags { gap: 15px; padding: 24px 0 16px; }
html[data-template="y2k"] .tag {
position: relative;
padding: 8px 20px 9px; gap: 9px; border-radius: 999px;
background: linear-gradient(160deg, #FFFFFF 0%, #FFF7FA 46%, #FFE9F2 100%);
box-shadow:
0 0 0 1px rgba(190, 202, 220, .95),
inset 0 1px 0 #FFFFFF,
inset 0 -1px 2px rgba(226, 170, 196, .20),
0 6px 14px rgba(190, 160, 185, .16);
}
html[data-template="y2k"] .tag::after {
content: ''; position: absolute; left: 17px; bottom: -5px;
width: 9px; height: 9px; border-radius: 50%;
background: #FFE9F2;
box-shadow: 0 0 0 1px rgba(190, 202, 220, .95);
}
html[data-template="y2k"] .tag-label { color: #6F6478; font-size: 12px; letter-spacing: .02em; }
html[data-template="y2k"] .tag-value { color: #B9326A; font-size: 14.5px; font-weight: 800; }
/* ---------- 田字格：双层金属相框 ---------- */
html[data-template="y2k"] .grid-figure { margin: 6px 0 26px; padding: 0; }
html[data-template="y2k"] .grid-img {
max-width: min(364px, 100%);
border-radius: 20px; background: #fff;
box-shadow:
0 0 0 1px rgba(198, 207, 220, .95),
0 0 0 6px #FFFFFF,
0 0 0 7px rgba(214, 222, 234, .90),
0 16px 32px rgba(120, 140, 175, .12);
}
/* ---------- 卡片：超大圆角 + 细金属边 + 一道斜的镜面反光 ---------- */
html[data-template="y2k"] .card {
position: relative; isolation: isolate; overflow: hidden;
border-radius: 28px; padding: 30px 32px 32px; margin-bottom: 22px;
background: #FFFFFF;
box-shadow:
0 0 0 1px rgba(196, 206, 222, .85),
inset 0 1px 0 #FFFFFF,
0 14px 34px rgba(120, 140, 175, .10);
}
/* 镜面反光：两道极淡的斜带，压在最上层但不响应点击。
z-index:-1 之所以能看见，是因为 card 用了 isolation 建了层叠上下文 ——
负层永远画在自己的背景之上、正文之下。 */
html[data-template="y2k"] .card::before {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
linear-gradient(112deg,
rgba(255, 255, 255, .95) 0%,
rgba(255, 255, 255, 0) 24%,
rgba(232, 241, 252, .55) 40%,
rgba(255, 255, 255, 0) 54%,
rgba(255, 236, 245, .40) 84%,
rgba(255, 255, 255, 0) 96%);
}
/* 板块标题：一颗小星 + 一条虚线，线尾压一个粉点 */
html[data-template="y2k"] .card h2 {
position: relative;
font-family: var(--yk-font);
font-size: 21px; font-weight: 900; letter-spacing: .02em;
color: var(--yk-ink);
padding: 0 0 14px 26px; margin-bottom: 22px; line-height: 1.45;
}
html[data-template="y2k"] .card h2::before {
content: ''; position: absolute; left: 0; top: 6px;
width: 13px; height: 13px;
background: linear-gradient(140deg, #FFD7E6 0%, #F095BC 100%);
clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
html[data-template="y2k"] .card h2::after {
content: ''; position: absolute; left: 26px; right: 0; bottom: 0;
width: auto; height: 6px; border-radius: 0;
border-top: 1px dashed rgba(196, 208, 224, .95);
background: radial-gradient(circle, rgba(242, 167, 198, .95) 0 2.2px, transparent 2.6px) right center / 5px 5px no-repeat;
}
/* ---------- 释义：樱粉首行高亮 + 角上一团粉光 ---------- */
html[data-template="y2k"] .explanation {
font-size: 18px; line-height: 1.95; color: #33343F;
}
/* ::first-line 能给整行铺背景，这是不用改模板标记就能做「荧光笔划重点」的
唯一办法；浓度必须低（.62 的粉），再深一行就像被人用记号笔涂过 */
html[data-template="y2k"] .explanation::first-line {
background: linear-gradient(transparent 54%, rgba(255, 186, 212, .72) 54%);
}
html[data-template="y2k"] .detail .card:has(.explanation)::after {
content: ''; position: absolute; right: -40px; top: -50px;
width: 190px; height: 190px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 206, 226, .55), transparent 68%);
pointer-events: none;
}
html[data-template="y2k"] .detail .card:has(.explanation) .explanation { position: relative; }
/* ---------- 字段列表：每行一条虚线，字段名带一颗小糖豆 ---------- */
html[data-template="y2k"] .fields { gap: 0; }
html[data-template="y2k"] .field {
grid-template-columns: 76px minmax(0, 1fr); gap: 16px;
padding: 15px 0; border-top: 1px dashed rgba(214, 222, 234, .95);
}
html[data-template="y2k"] .field:first-child { border-top: 0; padding-top: 2px; }
html[data-template="y2k"] .field dt {
font-size: 13.5px; font-weight: 800; letter-spacing: .02em;
color: var(--yk-pink-ink); padding-top: 1px;
}
html[data-template="y2k"] .field dt::before {
content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px;
border-radius: 50%; vertical-align: 2px;
background: linear-gradient(150deg, #FFD9E7, #F293B8);
}
html[data-template="y2k"] .field dd { font-size: 15.5px; line-height: 1.9; color: #33343F; }
html[data-template="y2k"] .field dd.quote {
padding: 11px 16px; border-radius: 16px;
background: linear-gradient(180deg, #FCF9FE 0%, #F6F2FC 100%);
border-left: 3px dashed var(--yk-lilac);
color: #3E4050;
}
/* ---------- 造句 ---------- */
html[data-template="y2k"] .zju-list { padding-left: 24px; gap: 11px; }
html[data-template="y2k"] .zju-list li { font-size: 15px; line-height: 1.9; color: #33343F; }
html[data-template="y2k"] .zju-list li::marker { color: var(--yk-pink-3); font-weight: 700; }
/* ---------- 故事 ---------- */
html[data-template="y2k"] .story { font-size: 15.5px; line-height: 1.95; color: #33343F; }
/* ---------- 近义 / 反义：装进泡泡 ---------- */
html[data-template="y2k"] .syn-ant { margin-bottom: 16px; }
html[data-template="y2k"] .syn-ant:last-child { margin-bottom: 0; }
html[data-template="y2k"] .syn-ant > strong {
width: auto; display: inline-block; margin-bottom: 10px;
padding: 2px 12px; border-radius: 999px;
background: var(--yk-pink-2); color: var(--yk-pink-ink);
font-size: 12.5px; font-weight: 800;
}
html[data-template="y2k"] .chips { gap: 9px; }
html[data-template="y2k"] .chip {
padding: 5px 15px; border-radius: 999px;
background: linear-gradient(180deg, #FFFFFF 0%, #FFF4F9 100%);
color: var(--yk-pink-ink); font-size: 14px; font-weight: 600;
box-shadow: 0 0 0 1px rgba(206, 214, 228, .95), 0 3px 8px rgba(190, 170, 195, .12);
transition: box-shadow .18s, transform .14s, color .18s;
}
html[data-template="y2k"] .chip:hover {
color: var(--yk-pink-deep); transform: translateY(-1px);
box-shadow: 0 0 0 1px rgba(242, 167, 198, .95), 0 6px 14px rgba(226, 150, 180, .22);
}
html[data-template="y2k"] .chip.plain {
background: #F7F9FC; color: var(--yk-ink-3);
box-shadow: 0 0 0 1px rgba(214, 222, 234, .95);
}
/* ---------- 趣味延伸：一块粉色磨砂板 ---------- */
html[data-template="y2k"] .highlight {
background:
linear-gradient(160deg, #FFF7FB 0%, #FDF6FF 52%, #F4F8FF 100%);
box-shadow:
0 0 0 1px rgba(226, 200, 218, .80),
inset 0 1px 0 #fff,
0 14px 30px rgba(190, 160, 190, .12);
}
html[data-template="y2k"] .highlight p { font-size: 15px; }
html[data-template="y2k"] .gold { color: var(--yk-pink-ink); }
html[data-template="y2k"] .xhy-list li::before { content: '✦'; color: var(--yk-pink-3); font-size: 11px; }
/* ---------- 字义分解：四张糖果色卡，单字居中放大 ---------- */
/* 三字成语只有三张卡，四列网格会留一个空格子，看着像排版漏了一张。
改用 flex 等分：几张就平分几份，四张时宽度与网格一致。 */
html[data-template="y2k"] .char-decompose { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
html[data-template="y2k"] .char-decompose > .char-item { flex: 1 1 210px; min-width: 0; }
html[data-template="y2k"] .char-item {
position: relative; overflow: hidden;
align-items: center; text-align: left;
gap: 14px; padding: 24px 20px 26px;
border: 0; border-radius: 26px;
background: linear-gradient(180deg, #FFF4F8 0%, #FFE9F1 100%);
box-shadow:
0 0 0 1px rgba(255, 255, 255, .95),
0 0 0 2px rgba(228, 208, 224, .55),
0 10px 22px rgba(190, 160, 185, .12);
}
html[data-template="y2k"] .char-item:nth-child(4n+2) {
background: linear-gradient(180deg, #F3FAFF 0%, #E4F1FD 100%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 2px rgba(196, 216, 236, .60), 0 10px 22px rgba(150, 180, 210, .12);
}
html[data-template="y2k"] .char-item:nth-child(4n+3) {
background: linear-gradient(180deg, #F8F4FF 0%, #EDE7FB 100%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 2px rgba(212, 204, 236, .65), 0 10px 22px rgba(170, 160, 210, .12);
}
html[data-template="y2k"] .char-item:nth-child(4n+4) {
background: linear-gradient(180deg, #FEFBF5 0%, #F8F1E4 100%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 2px rgba(232, 220, 198, .70), 0 10px 22px rgba(200, 180, 150, .12);
}
/* 边角的小圆圈：右上一个小虚线圈，左下一个小实心点 */
html[data-template="y2k"] .char-item::before {
content: ''; position: absolute; right: 13px; top: 13px;
width: 17px; height: 17px; border-radius: 50%;
border: 1.5px dashed rgba(255, 255, 255, .95);
box-shadow: 0 0 0 1px rgba(196, 186, 210, .38);
}
html[data-template="y2k"] .char-item::after {
content: ''; position: absolute; left: 12px; bottom: 12px;
width: 8px; height: 8px; border-radius: 50%;
background: rgba(255, 255, 255, .92);
box-shadow: 0 0 0 1px rgba(196, 186, 210, .35);
}
/* 单字：金属圆钮，字压在正中 */
html[data-template="y2k"] .char-glyph {
align-self: center;
width: 88px; height: 88px; border: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--yk-font); font-size: 52px; font-weight: 900; color: #2B2C38;
background: linear-gradient(160deg, #FFFFFF 0%, #F7FAFD 52%, #E4EBF5 100%);
box-shadow:
inset 0 1px 0 #FFFFFF,
0 0 0 1px rgba(196, 207, 222, .95),
0 8px 16px rgba(140, 158, 190, .20);
text-shadow: 0 1px 0 #fff, 0 3px 6px rgba(150, 168, 196, .30);
}
html[data-template="y2k"] .char-glyph a { color: inherit; }
html[data-template="y2k"] .char-glyph a:hover { color: var(--yk-pink-deep); }
html[data-template="y2k"] .char-meta { width: 100%; }
html[data-template="y2k"] .char-pron { font-size: 12.5px; color: var(--yk-ink-3); line-height: 1.75; margin-bottom: 8px; }
html[data-template="y2k"] .char-extra { gap: 6px; margin-bottom: 8px; }
html[data-template="y2k"] .char-extra-item {
font-size: 11.5px; color: var(--yk-ink-2);
background: rgba(255, 255, 255, .78);
border: 1px solid rgba(255, 255, 255, .95); border-radius: 999px;
padding: 1px 9px; line-height: 1.7;
box-shadow: 0 0 0 1px rgba(214, 214, 228, .55);
}
html[data-template="y2k"] .char-extra-sep { display: none; }
html[data-template="y2k"] .char-shape { font-size: 12.5px; color: var(--yk-ink-3); margin-bottom: 8px; }
html[data-template="y2k"] .char-senses { gap: 9px; }
html[data-template="y2k"] .sn-num {
color: var(--yk-pink-ink); font-size: 14px; font-weight: 800;
}
html[data-template="y2k"] .sn-title { color: var(--yk-ink); font-size: 14.5px; font-weight: 800; }
html[data-template="y2k"] .sn-text { color: var(--yk-ink-2); font-size: 12.8px; line-height: 1.8; }
html[data-template="y2k"] .expand-sense {
align-self: center; margin-top: 10px; padding: 6px 18px;
font-size: 12.5px; font-weight: 700; color: var(--yk-pink-ink);
background: rgba(255, 255, 255, .85); border: 1px solid rgba(255, 255, 255, .95);
border-radius: 999px; cursor: pointer;
box-shadow: 0 0 0 1px rgba(214, 200, 214, .70), 0 3px 8px rgba(190, 160, 190, .14);
transition: background .15s, color .15s;
}
html[data-template="y2k"] .expand-sense:hover { background: #fff; color: var(--yk-pink-deep); }
html[data-template="y2k"] .expand-sense:active { background: var(--yk-pink-3); color: #fff; }
/* ---------- 接龙：一排椭圆糖钮，中间夹虚线的箭头 ---------- */
html[data-template="y2k"] .tabs {
gap: 10px; margin-bottom: 22px; border-bottom: 0;
}
html[data-template="y2k"] .tab {
padding: 8px 20px; border: 0; border-radius: 999px; margin-bottom: 0;
font-size: 14px; font-weight: 700; color: var(--yk-ink-2);
background: linear-gradient(180deg, #FFFFFF, #F3F7FC);
box-shadow: 0 0 0 1px rgba(206, 216, 230, .95), 0 3px 8px rgba(150, 168, 196, .12);
transition: color .18s, box-shadow .18s, background .18s;
}
html[data-template="y2k"] .tab:hover { color: var(--yk-pink-ink); }
html[data-template="y2k"] .tab.active {
color: #7A2148; font-weight: 800; border-bottom-color: transparent;
background: linear-gradient(180deg, #FFD3E2 0%, #F49ABD 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 5px 14px rgba(226, 140, 175, .30);
}
html[data-template="y2k"] .jielong-chain {
gap: 12px; align-items: center; margin-bottom: 18px;
}
html[data-template="y2k"] .jielong-node {
min-width: 96px; padding: 12px 22px; gap: 3px;
border: 0; border-radius: 999px;
background: linear-gradient(180deg, #FFFFFF 0%, #F5F9FD 48%, #E9F0F8 100%);
box-shadow:
inset 0 1px 0 #FFFFFF,
0 0 0 1px rgba(196, 207, 222, .95),
0 6px 14px rgba(140, 158, 190, .14);
transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s;
}
html[data-template="y2k"] .jielong-node:hover {
transform: translateY(-2px);
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(242, 167, 198, .95), 0 10px 20px rgba(226, 150, 180, .22);
}
html[data-template="y2k"] .jielong-node.current {
border-color: transparent;
background: linear-gradient(180deg, #FFE0EC 0%, #FBB7D2 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(233, 158, 190, .95), 0 8px 18px rgba(226, 140, 175, .26);
}
html[data-template="y2k"] .jielong-node .jw {
font-family: var(--yk-font); font-size: 16px; font-weight: 800; color: var(--yk-ink);
}
html[data-template="y2k"] .jielong-node.current .jw { color: #87204A; }
html[data-template="y2k"] .jielong-node .jp { font-size: 11.5px; color: var(--yk-ink-3); letter-spacing: .02em; }
html[data-template="y2k"] .jielong-node.current .jp { color: #9A4A6C; }
/* 箭头：把「→」藏掉，用一条虚线 + 一个折角画出来。
撑到 34px 宽、12px 高，纵向居中才有「线」的稳定感。 */
html[data-template="y2k"] .jielong-arrow {
position: relative; flex: 0 0 34px;
width: 34px; height: 12px;
font-size: 0; color: transparent; overflow: hidden;
}
html[data-template="y2k"] .jielong-arrow::before {
content: ''; position: absolute; left: 0; right: 9px; top: 50%;
border-top: 2px dashed rgba(176, 190, 210, .95);
}
html[data-template="y2k"] .jielong-arrow::after {
content: ''; position: absolute; right: 2px; top: 50%;
width: 7px; height: 7px; margin-top: -4.5px;
border-top: 2px solid rgba(176, 190, 210, .95);
border-right: 2px solid rgba(176, 190, 210, .95);
border-radius: 1px;
transform: rotate(45deg);
}
html[data-template="y2k"] .btn-regen {
padding: 8px 22px; font-size: 13.5px; font-weight: 700; cursor: pointer;
color: var(--yk-pink-ink); background: #fff;
border: 1px solid rgba(214, 222, 234, .95); border-radius: 999px;
box-shadow: 0 3px 8px rgba(150, 168, 196, .12);
transition: background .15s, color .15s, box-shadow .18s;
}
html[data-template="y2k"] .btn-regen:hover {
background: #FFF6FA; color: var(--yk-pink-deep);
box-shadow: 0 0 0 1px rgba(242, 167, 198, .9), 0 6px 14px rgba(226, 150, 180, .20);
}
html[data-template="y2k"] .btn-regen:active { background: var(--yk-pink-3); color: #fff; }
html[data-template="y2k"] .btn-regen:disabled { opacity: .55; cursor: default; }
/* ---------- 相关成语：错落 + 微倾 ----------
* 每四张一个循环：转 -1.1° 抬起 0 / 转 .9° 落下 9px / 转 -.6° 抬起 -4px /
* 转 1.2° 落下 6px。角度必须 ≤1.2°，再大就成了「排版出错」而不是「随手贴」。 */
html[data-template="y2k"] .related-grid { gap: 16px; align-items: start; }
html[data-template="y2k"] .related-item {
position: relative;
padding: 18px 18px 20px; gap: 6px;
border: 0; border-radius: 22px; background: #fff;
box-shadow: 0 0 0 1px rgba(200, 210, 224, .92), 0 10px 22px rgba(126, 146, 180, .09);
transform: rotate(-1.1deg);
transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .22s;
}
html[data-template="y2k"] .related-item:nth-child(4n+2) { transform: rotate(.9deg) translateY(9px); }
html[data-template="y2k"] .related-item:nth-child(4n+3) { transform: rotate(-.6deg) translateY(-4px); }
html[data-template="y2k"] .related-item:nth-child(4n+4) { transform: rotate(1.2deg) translateY(6px); }
/* 底色隔三差一地换一档，网格才不会读成四列白纸。
只在最浅的那一端动，字仍然压在 #F4FAFF 这种近似白上，对比度不掉。 */
html[data-template="y2k"] .related-item:nth-child(4n+2) { background: linear-gradient(180deg, #FFFFFF 0%, #F3F9FF 100%); }
html[data-template="y2k"] .related-item:nth-child(4n+3) { background: linear-gradient(180deg, #FFFFFF 0%, #F9F5FF 100%); }
html[data-template="y2k"] .related-item:nth-child(4n+4) { background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF4 100%); }
html[data-template="y2k"] .related-item::after {
content: ''; position: absolute; right: 12px; top: 12px;
width: 14px; height: 14px; border-radius: 50%;
border: 1px dashed rgba(226, 168, 196, .85);
transition: background .22s, border-color .22s;
}
html[data-template="y2k"] .related-item:hover {
transform: rotate(0deg) translateY(-4px);
box-shadow: 0 0 0 1px rgba(242, 167, 198, .85), 0 18px 32px rgba(190, 160, 190, .20);
}
html[data-template="y2k"] .related-item:hover::after {
background: rgba(247, 184, 206, .9); border-color: rgba(242, 167, 198, .9);
}
html[data-template="y2k"] .related-item .rw {
font-family: var(--yk-font); font-size: 17px; font-weight: 800; color: var(--yk-ink);
}
html[data-template="y2k"] .related-item .rw-py { font-size: 11.5px; color: var(--yk-ink-3); }
html[data-template="y2k"] .related-item small { font-size: 12.5px; color: var(--yk-ink-2); line-height: 1.7; }
/* ---------- 所属标签 ---------- */
html[data-template="y2k"] .tags-of-idiom .chips { gap: 9px; }
/* ---------- 列表页（搜索 / 拼音 / 标签） ---------- */
html[data-template="y2k"] .list-head { padding: 26px 0 10px; }
html[data-template="y2k"] .list-head h1 {
font-family: var(--yk-font); font-size: 27px; font-weight: 900; letter-spacing: .02em;
color: var(--yk-ink);
text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(205, 214, 228, .75), 0 0 22px rgba(255, 255, 255, .9);
}
html[data-template="y2k"] .muted { color: var(--yk-ink-3); font-size: 13.5px; }
html[data-template="y2k"] .result-list {
border-radius: 26px; background: #fff;
box-shadow: 0 0 0 1px rgba(196, 206, 222, .85), 0 14px 34px rgba(120, 140, 175, .10);
}
html[data-template="y2k"] .result-item { padding: 15px 22px; border-bottom: 1px dashed rgba(214, 222, 234, .95); }
html[data-template="y2k"] .result-item:hover { background: linear-gradient(90deg, #FFF4F9, #F4F9FF); }
html[data-template="y2k"] .result-item .rw { font-family: var(--yk-font); font-weight: 800; color: var(--yk-pink-ink); }
html[data-template="y2k"] .result-item .rp { color: var(--yk-ink-3); }
html[data-template="y2k"] .result-item .re { color: var(--yk-ink-2); }
html[data-template="y2k"] .letters { gap: 10px; }
html[data-template="y2k"] .letter {
border: 0; border-radius: 20px; background: #fff;
color: var(--yk-pink-ink); font-weight: 800;
box-shadow: 0 0 0 1px rgba(206, 214, 228, .95), 0 4px 10px rgba(150, 168, 196, .10);
transition: transform .16s, box-shadow .18s;
}
html[data-template="y2k"] .letter:hover {
transform: translateY(-2px); border-color: transparent;
background: linear-gradient(180deg, #FFD3E2, #F49ABD); color: #7A2148;
box-shadow: 0 8px 18px rgba(226, 140, 175, .26);
}
html[data-template="y2k"] .letter.empty { color: var(--yk-ink-3); background: #F7F9FC; box-shadow: 0 0 0 1px rgba(214, 222, 234, .9); }
html[data-template="y2k"] .hot-grid { gap: 14px; }
html[data-template="y2k"] .hot-item {
border: 0; border-radius: 20px; background: #fff;
padding: 15px 17px;
box-shadow: 0 0 0 1px rgba(206, 214, 228, .92), 0 4px 12px rgba(150, 168, 196, .09);
transition: transform .18s, box-shadow .18s;
}
html[data-template="y2k"] .hot-item:hover {
transform: translateY(-2px); border-color: transparent;
box-shadow: 0 0 0 1px rgba(242, 167, 198, .9), 0 12px 24px rgba(190, 160, 190, .18);
}
html[data-template="y2k"] .hot-word { font-family: var(--yk-font); font-weight: 800; color: var(--yk-ink); }
html[data-template="y2k"] .hot-pinyin { color: var(--yk-pink-ink); }
html[data-template="y2k"] .hot-expl { color: var(--yk-ink-2); }
html[data-template="y2k"] .pager a {
border: 0; border-radius: 999px; padding: 7px 18px;
background: #fff; color: var(--yk-pink-ink); font-weight: 700;
box-shadow: 0 0 0 1px rgba(206, 214, 228, .95), 0 4px 10px rgba(150, 168, 196, .10);
}
html[data-template="y2k"] .pager a:hover {
background: linear-gradient(180deg, #FFD3E2, #F49ABD); color: #7A2148;
border-color: transparent;
}
html[data-template="y2k"] .pager span { color: var(--yk-ink-3); }
html[data-template="y2k"] .empty { color: var(--yk-ink-3); }
html[data-template="y2k"] .friend-links .fl-list li { border-bottom: 1px dashed rgba(214, 222, 234, .95); }
html[data-template="y2k"] .friend-links .fl-list a { color: var(--yk-ink-2); }
html[data-template="y2k"] .friend-links .fl-list a:hover { color: var(--yk-pink-ink); }
/* ---------- 字典页 / 词语页：同一套语法，只补差异 ---------- */
html[data-template="y2k"] .sense-pos {
background: var(--yk-pink-2); color: var(--yk-pink-ink);
border-radius: 999px; font-weight: 700;
}
html[data-template="y2k"] .sense-title { font-weight: 800; color: var(--yk-ink); }
html[data-template="y2k"] .dr-item { border-bottom: 1px dashed rgba(214, 222, 234, .95); }
html[data-template="y2k"] .dr-num {
background: linear-gradient(180deg, #FFCFE0, #F293B8); color: #7A2148;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
html[data-template="y2k"] .dr-type {
background: var(--yk-blue-2); color: #2E6E9E; border-radius: 999px;
}
html[data-template="y2k"] .dr-quote,
html[data-template="y2k"] .dr-example,
html[data-template="y2k"] .example {
border-radius: 16px; background: #F8FAFD; border-left: 3px dashed rgba(200, 212, 228, .95);
color: var(--yk-ink-2);
}
html[data-template="y2k"] .dr-label { border-radius: 999px; border-color: rgba(206, 214, 228, .95); color: var(--yk-ink-2); }
html[data-template="y2k"] .dr-link { color: var(--yk-pink-ink); }
/* ---------- 404 ---------- */
/* 404 的数字做镀铬渐变，但先给一个实色底：背景裁剪不被支持时
文字不能变成透明的（那是最典型的「看起来在，其实读不到」）。 */
html[data-template="y2k"] .not-found h1 {
font-family: var(--yk-font); font-size: 84px; font-weight: 900;
color: #8E99AC;
filter: drop-shadow(0 3px 0 rgba(205, 214, 228, .8));
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
html[data-template="y2k"] .not-found h1 {
background: linear-gradient(165deg, #FFFFFF 0%, #97A3B6 38%, #EC9EBE 70%, #8E99AC 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
}
html[data-template="y2k"] .not-found p { color: var(--yk-ink-2); }
html[data-template="y2k"] .back a { color: var(--yk-pink-ink); }
/* ---------- 页脚：深灰紫，压一道粉蓝色的霓虹线 ---------- */
html[data-template="y2k"] .site-footer {
margin-top: 46px; color: #C9C7D8;
background: linear-gradient(165deg, #2A2D3C 0%, #242233 52%, #2E2942 100%);
border-top: 1px solid rgba(247, 184, 206, .35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
html[data-template="y2k"] .footer-inner { padding: 24px 16px; gap: 10px; }
html[data-template="y2k"] .footer-nav { gap: 8px; }
html[data-template="y2k"] .footer-nav a {
color: #DAD8E8; font-size: 13.5px; padding: 3px 11px; border-radius: 999px;
}
html[data-template="y2k"] .footer-nav a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
html[data-template="y2k"] .footer-hub { border-top: 1px dashed rgba(255, 255, 255, .14); }
html[data-template="y2k"] .footer-hub .fh-label { color: #8C89A3; }
html[data-template="y2k"] .footer-hub a { color: #A9A6BE; }
html[data-template="y2k"] .footer-hub a:hover { color: #E6DEF2; }
html[data-template="y2k"] .copyright { color: #9C99B0; font-size: 12.5px; }
/* ---------- 首页：一块糖玻璃招牌 ---------- */
html[data-template="y2k"] .hero { position: relative; padding: 58px 0 34px; }
html[data-template="y2k"] .hero::before {
content: ''; position: absolute; z-index: -1; left: 50%; top: 4px;
transform: translateX(-50%);
width: min(760px, 96%); height: 300px; border-radius: 50%;
background:
radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 72%),
radial-gradient(closest-side, rgba(255, 216, 232, .55), rgba(255, 216, 232, 0) 78%);
pointer-events: none;
}
html[data-template="y2k"] .hero h1 {
font-family: var(--yk-font);
font-size: clamp(34px, 4.6vw, 54px); font-weight: 900;
letter-spacing: .05em; text-indent: .05em; color: #2E2F3C;
margin-bottom: 12px;
text-shadow:
0 1px 0 #fff, 0 2px 0 #fff, 0 3px 0 rgba(186, 197, 214, .80),
0 6px 14px rgba(120, 140, 175, .18), 0 0 30px rgba(255, 255, 255, .95);
}
html[data-template="y2k"] .hero-sub { color: var(--yk-ink-2); font-size: 15px; margin-bottom: 26px; }
html[data-template="y2k"] .hero-sub strong { color: var(--yk-pink-ink); }
html[data-template="y2k"] .hero-search { gap: 10px; max-width: 580px; }
html[data-template="y2k"] .hero-search input {
height: 52px; padding: 0 20px; font-size: 15.5px;
border: 1px solid rgba(190, 202, 220, .95); border-radius: 999px;
background: #FFFDFE;
box-shadow: inset 0 1px 3px rgba(150, 168, 196, .12), 0 6px 16px rgba(150, 168, 196, .10);
}
html[data-template="y2k"] .hero-search input:focus {
border-color: var(--yk-pink-3);
box-shadow: 0 0 0 4px rgba(247, 184, 206, .38), inset 0 1px 2px rgba(150, 168, 196, .10);
}
html[data-template="y2k"] .hero-search button {
height: 52px; padding: 0 30px; font-size: 15px; font-weight: 800;
border: 0; border-radius: 999px;
background: linear-gradient(180deg, #FFCFE0 0%, #F293B8 100%);
color: #7A2148;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 6px 16px rgba(226, 140, 175, .34);
}
html[data-template="y2k"] .hero-search button:hover { background: linear-gradient(180deg, #FFCFE0 0%, #F293B8 100%); filter: brightness(1.04); }
/* ---------- 动效：卡片轻轻浮上来，不抢戏 ---------- */
@keyframes yk-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
html[data-template="y2k"] .detail > .card { animation: yk-rise .42s cubic-bezier(.2, .8, .3, 1) both; }
html[data-template="y2k"] .detail > .card:nth-of-type(1) { animation-delay: .02s; }
html[data-template="y2k"] .detail > .card:nth-of-type(2) { animation-delay: .06s; }
html[data-template="y2k"] .detail > .card:nth-of-type(3) { animation-delay: .10s; }
html[data-template="y2k"] .detail > .card:nth-of-type(n+4) { animation-delay: .14s; }
html[data-template="y2k"] .detail .tab-panel:not([hidden]) { animation: yk-rise .24s ease-out; }
@media (prefers-reduced-motion: reduce) {
html[data-template="y2k"] .detail > .card,
html[data-template="y2k"] .detail .tab-panel:not([hidden]) { animation: none; }
html[data-template="y2k"] .related-item,
html[data-template="y2k"] .jielong-node,
html[data-template="y2k"] .letter,
html[data-template="y2k"] .hot-item { transition: none; }
}
/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
html[data-template="y2k"] .detail .related-grid { grid-template-columns: repeat(3, 1fr); }
html[data-template="y2k"] .detail .char-decompose { grid-template-columns: repeat(2, 1fr); }
html[data-template="y2k"] .detail .char-decompose > .char-item { flex: 1 1 240px; }
}
@media (max-width: 860px) {
html[data-template="y2k"] .site-header { margin: 10px 12px 0; }
html[data-template="y2k"] .card { padding: 26px 24px 28px; }
html[data-template="y2k"] .detail .related-grid { grid-template-columns: repeat(2, 1fr); }
html[data-template="y2k"] .detail-head h1 { letter-spacing: .04em; text-indent: .04em; }
}
@media (max-width: 640px) {
html[data-template="y2k"] .site-header { top: 8px; margin: 8px 10px 0; border-radius: 18px; }
html[data-template="y2k"] .site-header .container { padding: 0 14px; }
html[data-template="y2k"] .header-inner { min-height: 58px; gap: 10px; }
html[data-template="y2k"] .logo { font-size: 17px; letter-spacing: .02em; }
html[data-template="y2k"] .logo::before { width: 7px; height: 7px; margin-right: 6px; }
/* 基础样式在手机上整条藏掉导航，这里改成横滑 */
html[data-template="y2k"] .nav {
display: flex; flex-wrap: nowrap; gap: 2px;
overflow-x: auto; scrollbar-width: none;
}
html[data-template="y2k"] .nav::-webkit-scrollbar { display: none; }
html[data-template="y2k"] .nav a { flex: 0 0 auto; padding: 4px 10px; font-size: 12.5px; }
html[data-template="y2k"] .search-box { flex-basis: 100%; max-width: none; gap: 7px; margin-top: 2px; }
html[data-template="y2k"] .search-box input { height: 36px; font-size: 13px; }
html[data-template="y2k"] .search-box button { height: 36px; padding: 0 15px; font-size: 13px; }
html[data-template="y2k"] .breadcrumb { padding-top: 16px; font-size: 11.5px; }
/* 轨道在窄屏改小，泡泡去掉两颗，不然标题被挤成夹心 */
html[data-template="y2k"] .detail-head { padding: 34px 6px 16px; }
html[data-template="y2k"] .detail-head::before { top: 2px; height: 190px; }
html[data-template="y2k"] .detail-head::after {
background:
radial-gradient(circle at 10% 22%, rgba(255, 255, 255, .95) 0 8px, rgba(197, 228, 252, .85) 8px 17px, transparent 18px),
radial-gradient(circle at 90% 70%, rgba(255, 255, 255, .9) 0 5px, rgba(255, 222, 236, .85) 5px 12px, transparent 13px);
}
html[data-template="y2k"] .detail-head h1 {
font-size: clamp(34px, 11.2vw, 50px); letter-spacing: .03em; text-indent: .03em;
margin-bottom: 10px;
text-shadow:
0 1px 0 #fff, 0 2px 0 rgba(186, 197, 214, .8),
0 4px 10px rgba(120, 140, 175, .18), 0 0 24px rgba(255, 255, 255, .95);
}
html[data-template="y2k"] .detail-head .pinyin { font-size: 12.5px; letter-spacing: .16em; padding: 3px 14px 4px; }
html[data-template="y2k"] .tags { gap: 9px; padding: 16px 0 10px; }
html[data-template="y2k"] .tag { padding: 5px 13px 6px; gap: 6px; }
html[data-template="y2k"] .tag-label { font-size: 10.5px; }
html[data-template="y2k"] .tag-value { font-size: 13px; }
html[data-template="y2k"] .tag::after { left: 12px; bottom: -3px; width: 6px; height: 6px; }
html[data-template="y2k"] .grid-figure { margin-bottom: 20px; }
html[data-template="y2k"] .grid-img { border-radius: 16px; box-shadow: 0 0 0 1px rgba(198, 207, 220, .95), 0 0 0 5px #fff, 0 0 0 6px rgba(214, 222, 234, .9), 0 12px 24px rgba(120, 140, 175, .12); }
html[data-template="y2k"] .detail .card { border-radius: 24px; padding: 24px 18px 26px; margin-bottom: 16px; }
html[data-template="y2k"] .detail .card h2 { font-size: 18px; padding: 0 0 12px 22px; margin-bottom: 18px; }
html[data-template="y2k"] .detail .card h2::before { width: 11px; height: 11px; top: 5px; }
html[data-template="y2k"] .detail .card h2::after { left: 22px; }
html[data-template="y2k"] .detail .explanation { font-size: 16.5px; line-height: 1.95; }
html[data-template="y2k"] .detail .card:has(.explanation)::after { width: 130px; height: 130px; right: -34px; top: -38px; }
html[data-template="y2k"] .detail .field { grid-template-columns: 1fr; gap: 5px; padding: 13px 0; }
html[data-template="y2k"] .detail .field dt { font-size: 12.5px; }
html[data-template="y2k"] .detail .field dd { font-size: 15px; }
html[data-template="y2k"] .detail .field dd.quote { font-size: 14.5px; padding: 10px 13px; border-radius: 14px; }
html[data-template="y2k"] .detail .zju-list { padding-left: 20px; }
html[data-template="y2k"] .detail .zju-list li { font-size: 15px; }
html[data-template="y2k"] .detail .story { font-size: 15.5px; }
html[data-template="y2k"] .detail .syn-ant > strong { display: block; width: fit-content; }
/* 字义：窄屏一张一行，字钮缩到 76px */
html[data-template="y2k"] .detail .char-decompose > .char-item { flex: 1 1 100%; }
html[data-template="y2k"] .detail .char-item { padding: 22px 18px 24px; }
html[data-template="y2k"] .detail .char-glyph { width: 76px; height: 76px; font-size: 44px; }
html[data-template="y2k"] .detail .char-item::before { width: 14px; height: 14px; right: 11px; top: 11px; }
/* 接龙：椭圆钮竖排，箭头跟着转 90° */
html[data-template="y2k"] .detail .jielong-chain {
flex-direction: column; align-items: flex-start; gap: 8px;
}
html[data-template="y2k"] .detail .jielong-node { min-width: 0; padding: 9px 20px; }
html[data-template="y2k"] .detail .jielong-arrow {
flex: 0 0 12px; width: 12px; height: 30px; margin: 0 0 0 22px;
}
html[data-template="y2k"] .detail .jielong-arrow::before {
left: 50%; right: auto; top: 0; bottom: 9px;
border-top: 0; border-left: 2px dashed rgba(176, 190, 210, .95);
}
html[data-template="y2k"] .detail .jielong-arrow::after {
right: auto; left: 50%; top: auto; bottom: 2px; margin: 0 0 0 -4.5px;
transform: rotate(135deg);
}
html[data-template="y2k"] .detail .tabs { flex-wrap: wrap; gap: 8px; }
html[data-template="y2k"] .detail .tab { padding: 7px 15px; font-size: 13px; }
html[data-template="y2k"] .detail .btn-regen { padding: 7px 18px; font-size: 13px; }
/* 相关成语：窄屏不再倾斜，否则两列一歪就顶着卡片边 */
html[data-template="y2k"] .detail .related-grid { gap: 12px; }
html[data-template="y2k"] .detail .related-item,
html[data-template="y2k"] .detail .related-item:nth-child(4n+2),
html[data-template="y2k"] .detail .related-item:nth-child(4n+3),
html[data-template="y2k"] .detail .related-item:nth-child(4n+4) { transform: none; }
html[data-template="y2k"] .detail .related-item { padding: 14px 14px 16px; border-radius: 18px; }
html[data-template="y2k"] .detail .related-item .rw { font-size: 15.5px; }
html[data-template="y2k"] .detail .related-item::after { width: 11px; height: 11px; right: 10px; top: 10px; }
html[data-template="y2k"] .hero { padding: 44px 0 28px; }
html[data-template="y2k"] .hero::before { height: 220px; }
html[data-template="y2k"] .hero h1 { font-size: clamp(30px, 9.6vw, 40px); }
html[data-template="y2k"] .hero-sub { font-size: 12.5px; line-height: 1.95; margin-bottom: 22px; }
html[data-template="y2k"] .hero-search { gap: 8px; flex-wrap: nowrap; }
html[data-template="y2k"] .hero-search input { height: 46px; padding: 0 15px; font-size: 14.5px; }
html[data-template="y2k"] .hero-search button { height: 46px; padding: 0 18px; font-size: 13.5px; flex: 0 0 auto; white-space: nowrap; }
html[data-template="y2k"] .card { border-radius: 22px; padding: 22px 18px; }
html[data-template="y2k"] .card h2 { font-size: 18px; padding-left: 22px; }
html[data-template="y2k"] .card h2::after { left: 22px; }
html[data-template="y2k"] .letters { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
html[data-template="y2k"] .list-head h1 { font-size: 22px; }
html[data-template="y2k"] .result-item { padding: 13px 16px; }
html[data-template="y2k"] .not-found h1 { font-size: 62px; }
html[data-template="y2k"] .site-footer { margin-top: 36px; padding: 26px 0 28px; }
}
@media (max-width: 560px) {
html[data-template="y2k"] .detail .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
html[data-template="y2k"] .site-header { margin: 6px 8px 0; }
html[data-template="y2k"] .detail-head h1 { font-size: clamp(28px, 10.4vw, 34px); }
html[data-template="y2k"] .detail .tag { padding: 4px 11px 5px; }
html[data-template="y2k"] .detail .tag-value { font-size: 12.5px; }
html[data-template="y2k"] .hero-search button { padding: 0 14px; font-size: 13px; }
}
/* ============================================================================
* 视觉模板：自然植物园清新风（html[data-template="botanical"]）
* ----------------------------------------------------------------------------
* 北极星：一本植物园导览手册 —— 燕麦色的纸、压干的叶片、手绘的枝条线、
* 铅笔写下的标签。安静、有肌理、看不出「设计」，只看出「被照顾过」。
*
* 和前三版的关系：国潮靠界线、水彩靠浓度、Y2K 靠材质。这一版靠**留白与
* 温度的差**：几乎全是米白，只让鼠尾草绿在需要被看见的地方出现一次。
*
* 四条硬规则：
* 1. 绿只做「记号」，不做「底色」。整页绿底会立刻变成体检中心；鼠尾草绿
* 只出现在标签、字段名、箭线、叶片上，面积加起来不超过一屏的 5%。
* 2. 所有「植物」都是线，不是块。叶用 1px 描边 + 一条叶脉，枝条用 1.1px。
* 实心叶片一多，就从小清新变成幼儿园墙面贴纸。
* 3. 阴影只用最轻的一档（0 1px 2px + 0 10px 26px，都不超过 5% 不透明）。
* 治愈感来自「纸是软的」，不来自「卡片是浮的」。
* 4. 本模板不加任何图片文件：叶子、枝条、叶脉肌理全部由 border-radius
* 拼形 + 渐变 + data URI 内联 SVG 画出来 —— 子目录部署不用改任何路径。
*
* 字体：标题思源宋体（var(--bt-serif)），正文思源黑体（var(--bt-sans)），
* 两者都退回系统自带的中文字体，不下载、不阻塞首屏。
* ==========================================================================*/
html[data-template="botanical"] {
/* ---- 底 ---- */
--bt-oat: #F4EFE3; /* 燕麦，整页底 */
--bt-oat-2: #FAF6EC; /* 田字格的卡纸 */
--bt-cream: #FBF7EC; /* 卡片纸 */
--bt-paper: #FDFAF2; /* 更亮的纸，用于按钮 */
/* ---- 字 ---- */
--bt-ink: #2E3A33; /* 正文，燕麦底 10.3:1 */
--bt-ink-2: #4F5B52; /* 6.2:1 */
--bt-ink-3: #5F6C62; /* 小字，4.8:1 */
/* ---- 线 ---- */
--bt-line: #E5DFCC;
--bt-line-2: #D5CDB7;
/* ---- 鼠尾草绿 / 薄荷青 / 橄榄 / 陶土 ---- */
--bt-sage: #7E9C82; /* 线的绿，不做文字色 */
--bt-sage-2: #A9C0A9;
--bt-sage-ink: #4E6B53; /* 绿字，奶油纸 5.5:1 */
--bt-sage-soft: #E7EDE0;
--bt-mint: #7FAFA0;
--bt-mint-soft: #E4EFE9;
--bt-olive: #6E7F4E;
--bt-olive-ink: #46512F; /* 橄榄字，标签底 7.1:1 */
--bt-olive-soft:#EDEFDF;
--bt-clay: #B4826A;
--bt-clay-soft: #F2E6DC;
/* ---- 接管基础变量 ---- */
/* 主色比正文那层鼠尾草绿再深一档：它要压在浅绿底（.btn-more、
浅绿胶囊）上做大白话链接，5.2:1 才落得下来。#7E9C82 做底、不做字。 */
--primary: #4C6750;
--primary-dark: #3D5341;
--primary-soft: #E7EDE0;
--ink: #2E3A33;
--ink-soft: #4F5B52;
--ink-faint: #5F6C62;
--bg: #F4EFE3;
--card: #FBF7EC;
--border: #E5DFCC;
--gold: #4E6B53;
--radius: 18px;
--shadow: 0 1px 2px rgba(74, 88, 72, .035), 0 10px 26px rgba(74, 88, 72, .045);
--bt-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
--bt-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
--font-serif: var(--bt-serif);
--font-sans: var(--bt-sans);
}
/* ---------- 底：燕麦纸 + 两层极淡的绿光 + 两片压在角落的叶影 ----------
* 叶影用 data URI 内联 SVG：不新增文件，也就没有「子目录部署要改路径」这一坑。
* 不透明度压在 6%，它只负责让整页不要「一块死平」，不该被看见。 */
html[data-template="botanical"] body {
background-color: var(--bt-oat);
background-image:
radial-gradient(760px 460px at 4% -10%, rgba(169, 192, 169, .34), transparent 64%),
radial-gradient(700px 430px at 100% -2%, rgba(228, 239, 233, .85), transparent 68%),
radial-gradient(820px 540px at 50% 104%, rgba(242, 230, 220, .55), transparent 70%),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-position: 0 0, 0 0, 0 0, left -118px top 132px, right -104px bottom 96px;
background-size: auto, auto, auto, 420px 420px, 360px 360px;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
color: var(--bt-ink);
font-family: var(--bt-sans);
line-height: 1.8;
}
html[data-template="botanical"] a { color: var(--primary); }
/* 页脚是浅苔色的，短页面（404、空搜索）下面会露出一截燕麦底，
看着像页脚飘在半空。用一整列把页脚压到底 —— 顺带记一句：flex 子项的
自动最小尺寸是 min-content，田字格 360px 会把 main 撑开，320 屏上正文
会被推出屏幕，所以 main 的 min-width:0 是必须的，不是保险。 */
html[data-template="botanical"] body {
display: flex; flex-direction: column; min-height: 100vh;
}
html[data-template="botanical"] main { flex: 1 0 auto; min-width: 0; }
html[data-template="botanical"] .site-footer { flex: 0 0 auto; }
html[data-template="botanical"] a:hover { color: var(--primary-dark); }
html[data-template="botanical"] ::selection { background: rgba(169, 192, 169, .45); color: #2E3A33; }
/* ---------- 顶部：一张奶油纸，底边一条浅绿细线 ----------
* 不用阴影堆，也不用玻璃。它就该像手册的第一页横幅：平、柔、一条线收口。 */
html[data-template="botanical"] .site-header {
background: rgba(250, 246, 236, .92);
border-bottom: 1px solid rgba(126, 156, 130, .32);
box-shadow: 0 6px 18px rgba(74, 88, 72, .05);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
html[data-template="botanical"] .site-header .container { padding: 0 18px; }
html[data-template="botanical"] .header-inner { min-height: 64px; gap: 20px; }
/* 站点名：宋体 + 一枚线描小叶 */
html[data-template="botanical"] .logo {
font-family: var(--bt-serif);
font-size: 22px; font-weight: 600; letter-spacing: .08em;
color: var(--bt-ink);
}
html[data-template="botanical"] .logo:hover { color: var(--bt-sage-ink); }
html[data-template="botanical"] .logo::before {
content: ''; display: inline-block;
width: 13px; height: 13px; margin-right: 9px; vertical-align: 0;
border: 1.4px solid var(--bt-sage);
border-radius: 0 100% 0 100%;
background: linear-gradient(45deg,
transparent calc(50% - .7px), rgba(126, 156, 130, .65) calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px));
/* 尖角在这一步落在「左上-右下」这条对角线上，转 45° 才立成一枚叶子；
转 -45° 会躺平成一片横向的柳叶——那是这一版最容易看错的一处。 */
transform: rotate(45deg);
}
/* 导航：条目之间一条浅绿竖线，不加药丸、不加底 */
html[data-template="botanical"] .nav { gap: 0; }
html[data-template="botanical"] .nav a {
position: relative;
padding: 8px 16px; border-radius: 8px;
color: var(--bt-ink-2); font-size: 14.5px; letter-spacing: .05em;
transition: color .18s, background .18s;
}
html[data-template="botanical"] .nav a + a::before {
content: ''; position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
width: 1px; height: 13px;
background: rgba(126, 156, 130, .38);
}
html[data-template="botanical"] .nav a:hover {
color: var(--bt-sage-ink);
background: rgba(126, 156, 130, .08);
}
/* 搜索：一枚圆角木牌 + 一颗橄榄按钮 */
html[data-template="botanical"] .search-box {
gap: 8px; max-width: 340px;
background: none; border: 0; box-shadow: none;
}
html[data-template="botanical"] .search-box input {
height: 40px; padding: 0 15px;
border: 1px solid var(--bt-line-2); border-radius: 12px;
background: var(--bt-paper);
font-size: 14px; color: var(--bt-ink);
box-shadow: inset 0 1px 2px rgba(74, 88, 72, .05);
transition: border-color .18s, box-shadow .18s;
}
html[data-template="botanical"] .search-box input::placeholder { color: var(--bt-ink-3); }
html[data-template="botanical"] .search-box input:focus {
border-color: var(--bt-sage);
box-shadow: 0 0 0 3px rgba(126, 156, 130, .18), inset 0 1px 2px rgba(74, 88, 72, .04);
}
html[data-template="botanical"] .search-box button {
height: 40px; padding: 0 20px;
border: 0; border-radius: 12px;
background: var(--bt-sage-ink); color: #FAF6EC;
font-size: 14px; font-weight: 600; letter-spacing: .06em;
transition: background .18s;
}
html[data-template="botanical"] .search-box button:hover { background: #435E48; }
html[data-template="botanical"] .suggest {
top: 46px; border: 1px solid var(--bt-line); border-radius: 14px;
background: var(--bt-paper);
box-shadow: 0 14px 30px rgba(74, 88, 72, .12);
overflow: hidden;
}
html[data-template="botanical"] .suggest a { border-bottom: 1px solid rgba(229, 223, 204, .8); color: var(--bt-ink); }
html[data-template="botanical"] .suggest a:hover,
html[data-template="botanical"] .suggest a.active { background: var(--bt-sage-soft); color: var(--bt-sage-ink); }
html[data-template="botanical"] .suggest .s-pinyin { color: var(--bt-ink-3); }
/* ---------- 面包屑 ---------- */
html[data-template="botanical"] .breadcrumb { padding: 20px 0 2px; font-size: 12.5px; letter-spacing: .04em; }
html[data-template="botanical"] .breadcrumb li { color: var(--bt-ink-3); }
html[data-template="botanical"] .breadcrumb a { color: var(--bt-ink-2); }
html[data-template="botanical"] .breadcrumb a:hover { color: var(--bt-sage-ink); }
/* ---------- 标题区：宋体大标题 + 底部一道草绿细线 ----------
* 两侧各探出一枝线描小枝。窄屏藏掉 —— 屏幕上没有「页边」可探。 */
html[data-template="botanical"] .detail-head {
position: relative;
padding: 44px 0 18px;
}
html[data-template="botanical"] .detail-head::before,
html[data-template="botanical"] .detail-head::after {
content: ''; position: absolute; top: 50%;
width: 76px; height: 124px; margin-top: -46px;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
opacity: .85; pointer-events: none;
}
html[data-template="botanical"] .detail-head::before { left: max(6px, calc(50% - 380px)); }
html[data-template="botanical"] .detail-head::after {
right: max(6px, calc(50% - 380px));
transform: scaleX(-1);
}
html[data-template="botanical"] .detail-head h1 {
position: relative;
font-family: var(--bt-serif);
font-size: clamp(40px, 5.4vw, 66px);
font-weight: 600; letter-spacing: .1em; text-indent: .1em;
line-height: 1.3; color: var(--bt-ink);
padding-bottom: 20px; margin-bottom: 10px;
}
/* 草绿装饰线：两端淡出，中间一个极小的叶芽点 */
html[data-template="botanical"] .detail-head h1::after {
content: ''; position: absolute; left: 50%; bottom: 0;
transform: translateX(-50%);
width: 96px; height: 2px; border-radius: 2px;
/* 不要给它加外发光：2px 的线配一层 7% 的光晕，在 1x 下只会读成
一道灰蒙蒙的虚影，「细细的草绿线」就没了。 */
background: linear-gradient(90deg,
transparent 0%, rgb(93, 127, 98) 14%,
rgb(93, 127, 98) 86%, transparent 100%);
}
html[data-template="botanical"] .detail-head .head-sub { gap: 10px; }
html[data-template="botanical"] .detail-head .pinyin {
font-size: 15px; letter-spacing: .22em; color: var(--bt-ink-2);
}
html[data-template="botanical"] .pron-btn {
border: 1px solid rgba(126, 156, 130, .55);
background: var(--bt-sage-soft); color: var(--bt-sage-ink);
}
/* ---------- 属性标签：橄榄绿的圆角木牌 ----------
* 一枚小叶当项目符号。面积小、色相偏黄绿，和正文的墨绿分得开，
* 才不会读成「一排绿色按钮」。 */
html[data-template="botanical"] .tags { gap: 12px; padding: 22px 0 14px; }
html[data-template="botanical"] .tag {
padding: 6px 15px 7px; gap: 7px; border-radius: 10px;
background: var(--bt-olive-soft);
border: 1px solid rgba(110, 127, 78, .26);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}
html[data-template="botanical"] .tag::before {
content: ''; flex: none;
width: 7px; height: 7px;
border: 1.2px solid var(--bt-olive);
border-radius: 0 100% 0 100%;
transform: rotate(45deg);
opacity: .8;
}
html[data-template="botanical"] .tag-label { color: #5F6B49; font-size: 12px; letter-spacing: .04em; }
html[data-template="botanical"] .tag-value { color: var(--bt-olive-ink); font-size: 14px; font-weight: 600; }
/* ---------- 田字格：像标本一样装裱在卡纸上 ---------- */
html[data-template="botanical"] .grid-figure { margin: 4px 0 26px; padding: 0; }
html[data-template="botanical"] .grid-img {
max-width: min(360px, 100%);
border-radius: 6px; background: #fff;
box-shadow:
0 0 0 1px rgba(126, 156, 130, .26),
0 0 0 10px var(--bt-oat-2),
0 0 0 11px rgba(126, 156, 130, .14),
0 10px 24px rgba(74, 88, 72, .07);
}
/* ---------- 卡片：奶油纸，右上角压一层极淡的叶脉 ---------- */
html[data-template="botanical"] .card {
position: relative; isolation: isolate;
border-radius: 18px; padding: 26px 30px 28px; margin-bottom: 20px;
background: var(--bt-cream);
border: 1px solid var(--bt-line);
box-shadow: 0 1px 2px rgba(74, 88, 72, .03), 0 10px 26px rgba(74, 88, 72, .045);
}
/* 叶脉：两组 64° 斜线交叉成方格，再用径向遮罩从右上角淡出。
直接铺满整张卡会像格子纸；只在角上留一点，才是「压在纸下的叶子」。 */
html[data-template="botanical"] .card::before {
content: ''; position: absolute; inset: 0; z-index: -1;
border-radius: inherit; pointer-events: none;
background-image:
repeating-linear-gradient(64deg, rgba(126, 156, 130, .055) 0 1px, transparent 1px 11px),
repeating-linear-gradient(-64deg, rgba(126, 156, 130, .045) 0 1px, transparent 1px 11px);
-webkit-mask-image: radial-gradient(120% 92% at 100% 0%, #000 0%, transparent 72%);
mask-image: radial-gradient(120% 92% at 100% 0%, #000 0%, transparent 72%);
}
/* 板块标题：左侧一枚线描小叶 + 一条极浅的横向分隔 */
html[data-template="botanical"] .card h2 {
position: relative;
font-family: var(--bt-serif);
font-size: 20px; font-weight: 600; letter-spacing: .06em;
color: var(--bt-ink);
padding: 0 0 13px 30px; margin-bottom: 20px; line-height: 1.5;
}
html[data-template="botanical"] .card h2::before {
content: ''; position: absolute; left: 2px; top: 6px;
width: 17px; height: 17px;
border: 1.5px solid var(--bt-sage);
border-radius: 0 100% 0 100%;
background: linear-gradient(45deg,
transparent calc(50% - .75px), rgba(126, 156, 130, .85) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px));
transform: rotate(45deg);
}
html[data-template="botanical"] .card h2::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
width: auto; height: 1px; border-radius: 0;
background: linear-gradient(90deg,
rgba(126, 156, 130, .38) 0%, rgba(126, 156, 130, .16) 42%, rgba(126, 156, 130, 0) 92%);
}
/* ---------- 释义：首行压一道鼠尾草绿的淡彩 ----------
* 正文里没有内联标记能单独染色，::first-line 是唯一的着力点；
* 用「下划线式」而不是「涂满」，才有画册里划线标注的意思。 */
html[data-template="botanical"] .explanation {
font-size: 18px; line-height: 1.95; color: var(--bt-ink);
}
html[data-template="botanical"] .explanation::first-line {
background: linear-gradient(transparent 64%, rgba(158, 182, 148, .40) 64%);
}
/* 释义卡右上角一枝线描枝条 */
html[data-template="botanical"] .detail .card:has(.explanation) { padding-top: 28px; }
html[data-template="botanical"] .detail .card:has(.explanation)::after {
content: ''; position: absolute; right: 10px; top: 10px; z-index: -1;
width: 178px; height: 110px;
background: url("data:image/svg+xml;utf8,") right top / contain no-repeat;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
pointer-events: none;
}
/* ---------- 字段：虚线分隔，字段名用鼠尾草绿 ---------- */
html[data-template="botanical"] .fields { gap: 0; }
html[data-template="botanical"] .field {
grid-template-columns: 78px minmax(0, 1fr); gap: 16px;
padding: 15px 0;
border-top: 1px dashed rgba(126, 156, 130, .26);
}
html[data-template="botanical"] .field:first-child { border-top: 0; padding-top: 2px; }
html[data-template="botanical"] .field dt {
font-size: 13.5px; font-weight: 600; letter-spacing: .06em;
color: var(--bt-sage-ink); padding-top: 2px;
}
html[data-template="botanical"] .field dd { font-size: 15.5px; line-height: 1.9; color: var(--bt-ink); }
html[data-template="botanical"] .field dd.quote {
padding: 12px 16px; border-radius: 10px;
background: #F2F6EC;
border-left: 2px solid var(--bt-sage-2);
color: #3A483C;
}
/* ---------- 造句 / 故事 ---------- */
html[data-template="botanical"] .zju-list { padding-left: 22px; gap: 11px; }
html[data-template="botanical"] .zju-list li { font-size: 15px; line-height: 1.9; color: var(--bt-ink); }
html[data-template="botanical"] .zju-list li::marker { color: var(--bt-sage); font-weight: 600; }
html[data-template="botanical"] .story { font-size: 15.5px; line-height: 1.95; color: var(--bt-ink); }
/* ---------- 近义 / 反义 ---------- */
html[data-template="botanical"] .syn-ant { margin-bottom: 16px; }
html[data-template="botanical"] .syn-ant:last-child { margin-bottom: 0; }
html[data-template="botanical"] .syn-ant > strong {
width: auto; display: inline-block; margin-bottom: 10px;
padding: 2px 11px; border-radius: 8px;
background: var(--bt-sage-soft); color: var(--bt-sage-ink);
font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
}
html[data-template="botanical"] .chips { gap: 8px; }
html[data-template="botanical"] .chip {
padding: 4px 13px; border-radius: 8px;
background: var(--bt-paper); color: var(--bt-sage-ink);
font-size: 14px;
border: 1px solid var(--bt-line);
box-shadow: 0 1px 1px rgba(74, 88, 72, .03);
transition: border-color .18s, background .18s, color .18s;
}
html[data-template="botanical"] .chip:hover {
background: var(--bt-sage-soft);
border-color: rgba(126, 156, 130, .55);
color: #435E48;
}
html[data-template="botanical"] .chip.plain {
background: #F6F3E9; color: var(--bt-ink-3);
border-color: rgba(213, 205, 183, .8);
}
/* ---------- 趣味延伸：一片薄荷色的嫩叶板 ---------- */
html[data-template="botanical"] .highlight {
background: linear-gradient(160deg, #F2F7F0 0%, #EEF4EC 54%, #F7F4E9 100%);
border-color: rgba(126, 156, 130, .22);
box-shadow: 0 1px 2px rgba(74, 88, 72, .03), 0 10px 24px rgba(74, 88, 72, .04);
}
html[data-template="botanical"] .highlight p { font-size: 15px; }
html[data-template="botanical"] .gold { color: var(--bt-sage-ink); font-weight: 600; }
html[data-template="botanical"] .xhy-list li::before { content: '·'; color: var(--bt-sage); font-size: 16px; }
/* ---------- 字义分解：四张草木色标本卡 + 角落一枚线描叶 ----------
* 叶用 border-radius: 0 100% 0 100% 拼出一个尖头叶形，中间那条叶脉
* 是 45° 渐变的窄带 —— 45° 的色带正好穿过左上/右下两个尖角，
* 也就是叶柄到叶尖的那条轴。四张卡各转一点，像随手压上去的。 */
html[data-template="botanical"] .char-decompose { gap: 14px; align-items: stretch; }
html[data-template="botanical"] .char-item {
position: relative; overflow: hidden;
align-items: center; text-align: left;
gap: 12px; padding: 20px 16px 22px;
border: 1px solid rgba(126, 156, 130, .20);
border-radius: 16px;
background: #F2F5EA;
box-shadow: 0 1px 2px rgba(74, 88, 72, .03);
}
html[data-template="botanical"] .char-item:nth-child(4n+2) { background: #E9F2EC; border-color: rgba(127, 175, 160, .24); }
html[data-template="botanical"] .char-item:nth-child(4n+3) { background: #F7F2E5; border-color: rgba(180, 160, 110, .20); }
html[data-template="botanical"] .char-item:nth-child(4n+4) { background: #F4ECE6; border-color: rgba(180, 130, 106, .20); }
html[data-template="botanical"] .char-item::before {
content: ''; position: absolute; right: 11px; top: 11px;
width: 30px; height: 30px;
border: 1.3px solid rgba(106, 136, 112, .42);
border-radius: 0 100% 0 100%;
background: linear-gradient(45deg,
transparent calc(50% - .65px), rgba(106, 136, 112, .30) calc(50% - .65px) calc(50% + .65px), transparent calc(50% + .65px));
transform: rotate(52deg);
pointer-events: none;
}
html[data-template="botanical"] .char-item:nth-child(4n+2)::before { width: 26px; height: 26px; transform: rotate(28deg); }
html[data-template="botanical"] .char-item:nth-child(4n+3)::before { width: 28px; height: 28px; transform: rotate(68deg); }
html[data-template="botanical"] .char-item:nth-child(4n+4)::before { width: 32px; height: 32px; transform: rotate(38deg); }
/* 单字：一块圆形软木牌 */
html[data-template="botanical"] .char-glyph {
align-self: center;
width: 74px; height: 74px; border: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--bt-serif); font-size: 40px; font-weight: 600; color: var(--bt-ink);
background: rgba(255, 253, 246, .9);
box-shadow:
0 0 0 1px rgba(126, 156, 130, .26),
0 2px 6px rgba(74, 88, 72, .05);
}
html[data-template="botanical"] .char-glyph a { color: inherit; }
html[data-template="botanical"] .char-glyph a:hover { color: var(--bt-sage-ink); }
html[data-template="botanical"] .char-meta { width: 100%; }
html[data-template="botanical"] .char-pron { font-size: 12.5px; color: var(--bt-ink-3); line-height: 1.75; margin-bottom: 7px; letter-spacing: .06em; }
html[data-template="botanical"] .char-extra { gap: 6px; margin-bottom: 8px; }
html[data-template="botanical"] .char-extra-item {
font-size: 11.5px; color: var(--bt-ink-2);
background: rgba(255, 253, 246, .78);
border: 1px solid rgba(126, 156, 130, .22);
border-radius: 6px; padding: 1px 8px; line-height: 1.7;
}
html[data-template="botanical"] .char-extra-sep { display: none; }
html[data-template="botanical"] .char-shape { font-size: 12.5px; color: var(--bt-ink-3); margin-bottom: 7px; }
html[data-template="botanical"] .char-senses { gap: 9px; }
html[data-template="botanical"] .sn-num { color: var(--bt-sage-ink); font-size: 13.5px; font-weight: 600; }
html[data-template="botanical"] .sn-title { color: var(--bt-ink); font-size: 14.5px; font-weight: 600; }
html[data-template="botanical"] .sn-text { color: var(--bt-ink-2); font-size: 12.8px; line-height: 1.8; }
html[data-template="botanical"] .expand-sense {
align-self: center; margin-top: 10px; padding: 5px 15px;
font-size: 12.5px; color: var(--bt-sage-ink);
background: rgba(255, 253, 246, .85);
border: 1px solid rgba(126, 156, 130, .35); border-radius: 8px;
cursor: pointer;
transition: background .15s, border-color .15s;
}
html[data-template="botanical"] .expand-sense:hover { background: #fff; border-color: var(--bt-sage); }
html[data-template="botanical"] .expand-sense:active { background: var(--bt-sage-soft); }
/* ---------- 接龙：柔和圆角钮 + 一道极细的弧线箭头 ----------
* 把「→」藏掉，用 border-radius 把一条上边框弯成弧，右端加一个小折角。
* 直线读成流程，弧线读成「一路走过去」—— 这是这一版唯一想要的动感。 */
html[data-template="botanical"] .tabs { gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--bt-line); }
html[data-template="botanical"] .tab {
padding: 8px 16px; border: 0; border-bottom: 2px solid transparent;
font-size: 14.5px; color: var(--bt-ink-2); margin-bottom: -1px;
transition: color .16s, border-color .16s;
}
html[data-template="botanical"] .tab:hover { color: var(--bt-sage-ink); }
html[data-template="botanical"] .tab.active {
color: var(--bt-sage-ink); font-weight: 600;
border-bottom-color: var(--bt-sage);
}
html[data-template="botanical"] .jielong-chain { gap: 10px; align-items: center; margin-bottom: 18px; }
html[data-template="botanical"] .jielong-node {
min-width: 92px; padding: 10px 18px; gap: 2px;
border: 1px solid rgba(126, 156, 130, .30); border-radius: 12px;
background: var(--bt-paper);
box-shadow: 0 1px 2px rgba(74, 88, 72, .03);
transition: border-color .2s, background .2s, transform .2s;
}
html[data-template="botanical"] .jielong-node:hover {
border-color: rgba(126, 156, 130, .62);
background: #F8FAF1;
transform: translateY(-1px);
}
html[data-template="botanical"] .jielong-node.current {
background: var(--bt-sage-soft);
border-color: rgba(110, 140, 115, .58);
box-shadow: 0 0 0 3px rgba(126, 156, 130, .14);
}
html[data-template="botanical"] .jielong-node .jw {
font-family: var(--bt-serif); font-size: 16px; font-weight: 600; color: var(--bt-ink);
}
html[data-template="botanical"] .jielong-node.current .jw { color: #3C5140; }
html[data-template="botanical"] .jielong-node .jp { font-size: 11.5px; color: var(--bt-ink-3); letter-spacing: .04em; }
html[data-template="botanical"] .jielong-node.current .jp { color: var(--bt-sage-ink); }
html[data-template="botanical"] .jielong-arrow {
position: relative; flex: 0 0 32px;
width: 32px; height: 14px;
font-size: 0; color: transparent; overflow: hidden;
}
html[data-template="botanical"] .jielong-arrow::before {
content: ''; position: absolute; left: 0; right: 8px; top: 3px; height: 6px;
border-top: 1.4px solid rgba(126, 156, 130, .78);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
html[data-template="botanical"] .jielong-arrow::after {
content: ''; position: absolute; right: 2px; top: 6px;
width: 6px; height: 6px;
border-top: 1.5px solid rgba(126, 156, 130, .82);
border-right: 1.5px solid rgba(126, 156, 130, .82);
transform: rotate(45deg);
}
html[data-template="botanical"] .btn-regen {
padding: 7px 18px; font-size: 13.5px; cursor: pointer;
color: var(--bt-sage-ink); background: var(--bt-paper);
border: 1px solid rgba(126, 156, 130, .45); border-radius: 10px;
transition: background .15s, border-color .15s;
}
html[data-template="botanical"] .btn-regen:hover { background: var(--bt-sage-soft); border-color: var(--bt-sage); }
html[data-template="botanical"] .btn-regen:disabled { opacity: .5; cursor: default; }
/* ---------- 相关成语：安静的四列卡片，阴影压到几乎看不见 ---------- */
html[data-template="botanical"] .related-grid { gap: 12px; }
html[data-template="botanical"] .related-item {
padding: 15px 16px 17px; gap: 5px;
border: 1px solid var(--bt-line); border-radius: 14px;
background: var(--bt-paper);
box-shadow: 0 1px 2px rgba(74, 88, 72, .025);
transition: border-color .2s, box-shadow .2s, background .2s;
}
html[data-template="botanical"] .related-item:hover {
background: #fff;
border-color: rgba(126, 156, 130, .48);
box-shadow: 0 6px 16px rgba(74, 88, 72, .07);
}
html[data-template="botanical"] .related-item .rw {
font-family: var(--bt-serif); font-size: 16.5px; font-weight: 600;
color: var(--bt-ink); letter-spacing: .06em;
}
html[data-template="botanical"] .related-item .rw-py { font-size: 11.5px; color: var(--bt-ink-3); letter-spacing: .04em; }
html[data-template="botanical"] .related-item small { font-size: 12.5px; color: var(--bt-ink-2); line-height: 1.72; }
html[data-template="botanical"] .tags-of-idiom .chips { gap: 8px; }
/* ---------- 列表页（搜索 / 拼音 / 标签） ---------- */
html[data-template="botanical"] .list-head { padding: 26px 0 10px; }
html[data-template="botanical"] .list-head h1 {
font-family: var(--bt-serif); font-size: 26px; font-weight: 600;
letter-spacing: .08em; color: var(--bt-ink); line-height: 1.5;
}
html[data-template="botanical"] .muted { color: var(--bt-ink-3); font-size: 13.5px; }
html[data-template="botanical"] .result-list {
border-radius: 16px; background: var(--bt-cream);
border: 1px solid var(--bt-line);
box-shadow: 0 1px 2px rgba(74, 88, 72, .03), 0 10px 26px rgba(74, 88, 72, .04);
overflow: hidden;
}
html[data-template="botanical"] .result-item { padding: 14px 20px; border-bottom: 1px solid rgba(229, 223, 204, .85); }
html[data-template="botanical"] .result-item:hover { background: #F7FBF4; }
html[data-template="botanical"] .result-item .rw { font-family: var(--bt-serif); font-weight: 600; color: var(--bt-sage-ink); }
html[data-template="botanical"] .result-item .rp { color: var(--bt-ink-3); }
html[data-template="botanical"] .result-item .re { color: var(--bt-ink-2); }
html[data-template="botanical"] .letters { gap: 8px; }
html[data-template="botanical"] .letter {
border: 1px solid var(--bt-line); border-radius: 10px;
background: var(--bt-paper); color: var(--bt-sage-ink);
font-weight: 600;
transition: border-color .16s, background .16s, transform .16s;
}
html[data-template="botanical"] .letter:hover {
border-color: rgba(126, 156, 130, .6);
background: var(--bt-sage-soft);
transform: translateY(-1px);
}
html[data-template="botanical"] .letter.empty {
color: #8A9287; background: #F2EFE4; border-color: rgba(213, 205, 183, .7);
}
html[data-template="botanical"] .hot-grid { gap: 12px; }
html[data-template="botanical"] .hot-item {
border: 1px solid var(--bt-line); border-radius: 14px;
background: var(--bt-paper); padding: 14px 16px;
box-shadow: 0 1px 2px rgba(74, 88, 72, .025);
transition: border-color .18s, box-shadow .18s;
}
html[data-template="botanical"] .hot-item:hover {
border-color: rgba(126, 156, 130, .5);
box-shadow: 0 6px 16px rgba(74, 88, 72, .07);
}
html[data-template="botanical"] .hot-word { font-family: var(--bt-serif); font-weight: 600; color: var(--bt-ink); }
html[data-template="botanical"] .hot-pinyin { color: var(--bt-sage-ink); }
html[data-template="botanical"] .hot-expl { color: var(--bt-ink-2); }
html[data-template="botanical"] .pager a {
border: 1px solid var(--bt-line); border-radius: 10px; padding: 6px 16px;
background: var(--bt-paper); color: var(--bt-sage-ink); font-weight: 600;
transition: border-color .16s, background .16s;
}
html[data-template="botanical"] .pager a:hover {
border-color: rgba(126, 156, 130, .6); background: var(--bt-sage-soft);
}
html[data-template="botanical"] .pager span { color: var(--bt-ink-3); }
html[data-template="botanical"] .empty { color: var(--bt-ink-3); }
html[data-template="botanical"] .friend-links .fl-list li { border-bottom: 1px solid rgba(229, 223, 204, .9); }
html[data-template="botanical"] .friend-links .fl-list a { color: var(--bt-ink-2); }
html[data-template="botanical"] .friend-links .fl-list a:hover { color: var(--bt-sage-ink); }
/* ---------- 字典页 / 词语页：同一套语法，只补差异 ---------- */
html[data-template="botanical"] .sense-pos {
background: var(--bt-sage-soft); color: var(--bt-sage-ink);
border-radius: 6px; font-weight: 600;
}
html[data-template="botanical"] .sense-title { font-weight: 600; color: var(--bt-ink); }
html[data-template="botanical"] .dr-item { border-bottom: 1px dashed rgba(126, 156, 130, .26); }
html[data-template="botanical"] .dr-num {
background: var(--bt-sage-soft); color: var(--bt-sage-ink);
border-radius: 50%;
}
html[data-template="botanical"] .dr-type {
background: var(--bt-mint-soft); color: #3D6B5D; border-radius: 6px;
}
html[data-template="botanical"] .dr-quote,
html[data-template="botanical"] .dr-example,
html[data-template="botanical"] .example {
border-radius: 10px; background: #F2F6EC;
border-left: 2px solid var(--bt-sage-2);
color: var(--bt-ink-2);
}
html[data-template="botanical"] .dr-label { border-radius: 6px; border-color: var(--bt-line); color: var(--bt-ink-2); }
html[data-template="botanical"] .dr-link { color: var(--bt-sage-ink); }
/* ---------- 404：宋体的数字，一朵叶子在旁边 ---------- */
html[data-template="botanical"] .not-found h1 {
font-family: var(--bt-serif);
font-size: 76px; font-weight: 600; letter-spacing: .1em;
color: #86A188;
}
html[data-template="botanical"] .not-found p { color: var(--bt-ink-2); }
html[data-template="botanical"] .back a { color: var(--bt-sage-ink); font-weight: 600; }
/* ---------- 页脚：一张浅苔色的纸，不用深色 ----------
* 深色页脚一压，整页的「安静」就断了；这里靠色阶差收口，
* 也就不用把 body 改成 flex 列去压页脚（那会踩 min-width 的老坑）。 */
html[data-template="botanical"] .site-footer {
margin-top: 44px; color: var(--bt-ink-2);
background: #E9ECDC;
border-top: 1px solid rgba(126, 156, 130, .34);
}
html[data-template="botanical"] .footer-inner { padding: 24px 16px; gap: 10px; }
html[data-template="botanical"] .footer-nav { gap: 4px; }
html[data-template="botanical"] .footer-nav a {
color: #43503F; font-size: 13.5px; padding: 3px 10px; border-radius: 8px;
}
html[data-template="botanical"] .footer-nav a:hover { color: var(--bt-sage-ink); background: rgba(255, 255, 255, .55); }
html[data-template="botanical"] .footer-hub { border-top: 1px solid rgba(126, 156, 130, .28); }
html[data-template="botanical"] .footer-hub .fh-label { color: #5B685C; }
html[data-template="botanical"] .footer-hub a { color: #4F5C51; }
html[data-template="botanical"] .footer-hub a:hover { color: var(--bt-sage-ink); }
html[data-template="botanical"] .copyright { color: #5B685C; font-size: 12.5px; }
/* ---------- 首页：一块安静的园门横幅 ---------- */
html[data-template="botanical"] .hero { position: relative; padding: 54px 0 32px; }
html[data-template="botanical"] .hero::before {
content: ''; position: absolute; z-index: -1; left: 50%; top: 0;
transform: translateX(-50%);
width: min(760px, 96%); height: 280px;
background:
radial-gradient(closest-side, rgba(255, 253, 246, .85), rgba(255, 253, 246, 0) 74%),
radial-gradient(closest-side, rgba(200, 219, 198, .40), rgba(200, 219, 198, 0) 82%);
pointer-events: none;
}
html[data-template="botanical"] .hero h1 {
font-family: var(--bt-serif);
font-size: clamp(32px, 4.2vw, 48px); font-weight: 600;
letter-spacing: .12em; text-indent: .12em; line-height: 1.4;
color: var(--bt-ink); margin-bottom: 14px;
}
html[data-template="botanical"] .hero-sub { color: var(--bt-ink-2); font-size: 14.5px; margin-bottom: 26px; letter-spacing: .04em; }
html[data-template="botanical"] .hero-sub strong { color: var(--bt-sage-ink); font-weight: 600; }
html[data-template="botanical"] .hero-search { gap: 10px; max-width: 560px; }
html[data-template="botanical"] .hero-search input {
height: 50px; padding: 0 18px; font-size: 15.5px;
border: 1px solid var(--bt-line-2); border-radius: 14px;
background: var(--bt-paper);
box-shadow: inset 0 1px 2px rgba(74, 88, 72, .05);
transition: border-color .18s, box-shadow .18s;
}
html[data-template="botanical"] .hero-search input:focus {
border-color: var(--bt-sage);
box-shadow: 0 0 0 4px rgba(126, 156, 130, .18);
}
html[data-template="botanical"] .hero-search button {
height: 50px; padding: 0 26px; font-size: 15px; font-weight: 600;
border: 0; border-radius: 14px;
background: var(--bt-sage-ink); color: #FAF6EC;
letter-spacing: .06em;
transition: background .18s;
}
html[data-template="botanical"] .hero-search button:hover { background: #435E48; }
/* ---------- 动效：像纸页轻轻翻上来，绝不超过 8px ---------- */
@keyframes bt-rise {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
html[data-template="botanical"] .detail > .card { animation: bt-rise .46s cubic-bezier(.22, .7, .3, 1) both; }
html[data-template="botanical"] .detail > .card:nth-of-type(1) { animation-delay: .02s; }
html[data-template="botanical"] .detail > .card:nth-of-type(2) { animation-delay: .06s; }
html[data-template="botanical"] .detail > .card:nth-of-type(3) { animation-delay: .10s; }
html[data-template="botanical"] .detail > .card:nth-of-type(n+4) { animation-delay: .14s; }
html[data-template="botanical"] .detail .tab-panel:not([hidden]) { animation: bt-rise .26s ease-out; }
@media (prefers-reduced-motion: reduce) {
html[data-template="botanical"] .detail > .card,
html[data-template="botanical"] .detail .tab-panel:not([hidden]) { animation: none; }
html[data-template="botanical"] .jielong-node,
html[data-template="botanical"] .related-item,
html[data-template="botanical"] .letter,
html[data-template="botanical"] .hot-item { transition: none; }
}
/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
html[data-template="botanical"] .detail .related-grid { grid-template-columns: repeat(3, 1fr); }
/* 三字成语只有三张卡，两列网格会剩半个空格子，看着像漏了一张。
换 flex 等分：第三张自动撑满一行，几张卡都不会留洞。 */
html[data-template="botanical"] .detail .char-decompose { display: flex; flex-wrap: wrap; }
html[data-template="botanical"] .detail .char-item { flex: 1 1 calc(50% - 7px); min-width: 0; }
html[data-template="botanical"] .detail-head::before,
html[data-template="botanical"] .detail-head::after { display: none; }
}
@media (max-width: 860px) {
html[data-template="botanical"] .card { padding: 24px 22px 26px; }
html[data-template="botanical"] .detail .related-grid { grid-template-columns: repeat(2, 1fr); }
html[data-template="botanical"] .detail-head h1 { letter-spacing: .07em; text-indent: .07em; }
}
@media (max-width: 640px) {
html[data-template="botanical"] .site-header .container { padding: 0 13px; }
html[data-template="botanical"] .header-inner { min-height: 58px; gap: 10px; }
html[data-template="botanical"] .logo { font-size: 17px; letter-spacing: .05em; }
html[data-template="botanical"] .logo::before { width: 11px; height: 11px; margin-right: 7px; }
/* 基础样式在手机上整条藏掉导航，这里改成横滑 */
html[data-template="botanical"] .nav {
display: flex; flex-wrap: nowrap; gap: 0;
overflow-x: auto; scrollbar-width: none;
}
html[data-template="botanical"] .nav::-webkit-scrollbar { display: none; }
html[data-template="botanical"] .nav a { flex: 0 0 auto; padding: 4px 10px; font-size: 12.5px; }
html[data-template="botanical"] .nav a + a::before { height: 11px; }
html[data-template="botanical"] .search-box { flex-basis: 100%; max-width: none; gap: 7px; margin-top: 2px; }
html[data-template="botanical"] .search-box input { height: 36px; font-size: 13px; padding: 0 12px; }
html[data-template="botanical"] .search-box button { height: 36px; padding: 0 15px; font-size: 13px; }
html[data-template="botanical"] .breadcrumb { padding-top: 16px; font-size: 11.5px; }
html[data-template="botanical"] .detail-head { padding: 32px 4px 14px; }
html[data-template="botanical"] .detail-head h1 {
font-size: clamp(30px, 9.6vw, 42px);
letter-spacing: .05em; text-indent: .05em;
padding-bottom: 16px; margin-bottom: 8px;
}
html[data-template="botanical"] .detail-head h1::after { width: 72px; height: 1.5px; }
html[data-template="botanical"] .detail-head .pinyin { font-size: 12.5px; letter-spacing: .16em; }
html[data-template="botanical"] .tags { gap: 8px; padding: 16px 0 10px; }
html[data-template="botanical"] .tag { padding: 4px 11px 5px; gap: 6px; border-radius: 8px; }
html[data-template="botanical"] .tag::before { width: 6px; height: 6px; }
html[data-template="botanical"] .tag-label { font-size: 10.5px; }
html[data-template="botanical"] .tag-value { font-size: 12.5px; }
html[data-template="botanical"] .grid-figure { margin-bottom: 20px; }
html[data-template="botanical"] .grid-img {
box-shadow:
0 0 0 1px rgba(126, 156, 130, .26),
0 0 0 7px var(--bt-oat-2),
0 0 0 8px rgba(126, 156, 130, .14),
0 8px 18px rgba(74, 88, 72, .07);
}
html[data-template="botanical"] .detail .card { padding: 22px 17px 24px; margin-bottom: 16px; border-radius: 16px; }
html[data-template="botanical"] .detail .card h2 { font-size: 18px; padding: 0 0 12px 24px; margin-bottom: 17px; }
html[data-template="botanical"] .detail .card h2::before { width: 14px; height: 14px; top: 5px; }
html[data-template="botanical"] .detail .explanation { font-size: 16.5px; line-height: 1.95; }
/* 枝条在窄屏压小、往下让出标题的位置，否则会盖住「的意思」三个字 */
html[data-template="botanical"] .detail .card:has(.explanation)::after {
width: 108px; height: 66px; right: 8px; top: auto; bottom: 8px;
opacity: .6;
}
html[data-template="botanical"] .detail .field { grid-template-columns: 1fr; gap: 5px; padding: 13px 0; }
html[data-template="botanical"] .detail .field dt { font-size: 12.5px; }
html[data-template="botanical"] .detail .field dd { font-size: 15px; }
html[data-template="botanical"] .detail .field dd.quote { font-size: 14.5px; padding: 10px 13px; border-radius: 8px; }
html[data-template="botanical"] .detail .zju-list { padding-left: 19px; }
html[data-template="botanical"] .detail .zju-list li { font-size: 15px; }
html[data-template="botanical"] .detail .story { font-size: 15.5px; }
html[data-template="botanical"] .detail .syn-ant > strong { display: block; width: fit-content; }
html[data-template="botanical"] .detail .char-decompose { gap: 10px; }
html[data-template="botanical"] .detail .char-item { padding: 18px 14px 20px; }
html[data-template="botanical"] .detail .char-glyph { width: 62px; height: 62px; font-size: 34px; }
html[data-template="botanical"] .detail .char-item::before { width: 22px; height: 22px; right: 9px; top: 9px; }
html[data-template="botanical"] .detail .char-item:nth-child(n)::before { width: 22px; height: 22px; }
/* 接龙：竖排，弧线改成向左侧探头 */
html[data-template="botanical"] .detail .jielong-chain {
flex-direction: column; align-items: flex-start; gap: 6px;
}
html[data-template="botanical"] .detail .jielong-node { min-width: 0; padding: 8px 16px; }
/* 竖排时空间只有 12px 宽，6px 的 box 加椭圆圆角只会挤出一个「小钩子」。
这一档放弃弧线，改成一条细竖线 + 下折角：在 12px 里它才是箭。 */
html[data-template="botanical"] .detail .jielong-arrow {
flex: 0 0 12px; width: 12px; height: 26px; margin: 0 0 0 22px;
overflow: visible;
}
html[data-template="botanical"] .detail .jielong-arrow::before {
left: 5px; right: auto; top: 0; bottom: 7px; width: 0; height: auto;
border-top: 0;
border-left: 1.4px solid rgba(126, 156, 130, .8);
border-radius: 0;
}
html[data-template="botanical"] .detail .jielong-arrow::after {
right: auto; left: 2.5px; top: auto; bottom: 1px;
width: 5px; height: 5px;
border-top: 1.4px solid rgba(126, 156, 130, .8);
border-right: 1.4px solid rgba(126, 156, 130, .8);
transform: rotate(135deg);
}
html[data-template="botanical"] .detail .tabs { flex-wrap: wrap; gap: 2px; }
html[data-template="botanical"] .detail .tab { padding: 7px 12px; font-size: 13px; }
html[data-template="botanical"] .detail .btn-regen { padding: 6px 15px; font-size: 13px; }
html[data-template="botanical"] .detail .related-grid { gap: 10px; }
html[data-template="botanical"] .detail .related-item { padding: 13px 13px 15px; border-radius: 12px; }
html[data-template="botanical"] .detail .related-item .rw { font-size: 15.5px; }
html[data-template="botanical"] .hero { padding: 40px 0 26px; }
html[data-template="botanical"] .hero::before { height: 200px; }
html[data-template="botanical"] .hero h1 { font-size: clamp(26px, 8.6vw, 34px); letter-spacing: .08em; text-indent: .08em; }
html[data-template="botanical"] .hero-sub { font-size: 12.5px; line-height: 1.95; margin-bottom: 20px; }
html[data-template="botanical"] .hero-search { gap: 8px; flex-wrap: nowrap; }
html[data-template="botanical"] .hero-search input { height: 46px; padding: 0 14px; font-size: 14.5px; }
html[data-template="botanical"] .hero-search button { height: 46px; padding: 0 16px; font-size: 13.5px; flex: 0 0 auto; white-space: nowrap; }
html[data-template="botanical"] .card { padding: 20px 16px 22px; border-radius: 14px; }
html[data-template="botanical"] .card h2 { font-size: 17.5px; padding-left: 24px; }
html[data-template="botanical"] .letters { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
html[data-template="botanical"] .list-head h1 { font-size: 22px; }
html[data-template="botanical"] .result-item { padding: 13px 15px; }
html[data-template="botanical"] .not-found h1 { font-size: 58px; }
html[data-template="botanical"] .site-footer { margin-top: 34px; }
html[data-template="botanical"] .footer-inner { padding: 20px 14px; }
}
@media (max-width: 400px) {
html[data-template="botanical"] .detail-head h1 { font-size: clamp(26px, 9.4vw, 32px); letter-spacing: .03em; text-indent: .03em; }
html[data-template="botanical"] .detail .tag { padding: 4px 10px 5px; }
html[data-template="botanical"] .detail .tag-value { font-size: 12px; }
html[data-template="botanical"] .detail .char-glyph { width: 54px; height: 54px; font-size: 30px; }
}
/* ============================================================================
* 视觉模板：硬核工业工装风（html[data-template="industrial"]）
* ----------------------------------------------------------------------------
* 北极星：机加工车间的设备铭牌 + 工装夹具。水泥地面、冷轧钢板、铆钉、斜纹、
* 模板喷字。所有倒角都是铣出来的直角，没有一个「网页设计师的圆角」。
*
* 跟前几版的关系：书卷靠纸张、水彩靠浓度、Y2K 靠材质、植物园靠留白。
* 这一版靠**结构与重量**：粗边框、实投影、直角、字距拉开的编号式小字。
*
* 四条硬规则：
* 1. 圆角一律归零（0–2px）。--radius 设 0 一次性接管 .card / .suggest /
* .result-list；写死 999px 的胶囊（标签、chip、按钮、搜索框）逐个改直角。
* 2. 橙色只做「警示」，不做「底色」。它只出现在：标题旁的色块、字段名前的
* 竖条、板块标题线的起笔、按钮、角标三角。整块橙底一出现就变成施工围挡。
* 3. 纹理是「1px 的线」，不是「一块花纹」。钢板拉丝 4px 一组、1.8% 黑；
* 水泥地的斜向刻度 26px 一道、3.2% 黑。全部加起来不超过 5% 不透明度，
* 远看只是「一块有分量灰」，近看才有牙。
* 4. 投影用实边不用柔光：0 2px / 3px 0 的硬偏移像板材压板材；20px 模糊的
* 柔阴影会让整页立刻「网页化」，工业感全丢。
*
* 铆钉（4 颗一组）用 background-image 的 4 个 radial-gradient 定位在四角
* 画出来 —— 不新增图片、不改 HTML、子目录部署不用改路径。
*
* 字体：标题与正文都走思源黑体（--iw-sans），标题压到 900。工业件的字是
* 钢模压出来的，不是毛笔写的 —— 所以本模板把 --font-serif 也映射成黑体。
* ==========================================================================*/
html[data-template="industrial"] {
/* ---- 面：水泥地与钢板 ---- */
--iw-bg: #CFCEC8; /* 水泥灰，整页底 */
--iw-plate: #E7E6E3; /* 冷轧钢板，卡片面板（冷调，不用暖白） */
--iw-plate-2: #DEDDD8; /* 次级钢板，凹槽 / 浅底 */
--iw-plate-3: #D3D2CC; /* 更深一档，hover */
--iw-sheen: #F1F0EE; /* 板面高光 */
/* ---- 字 ---- */
--iw-ink: #14161A; /* 正文，钢板 16.2:1 / 水泥地 11.9:1 */
--iw-ink-2: #3A3F45; /* 9.3:1 / 7.1:1 */
--iw-ink-3: #4E545A; /* 小字，6.7:1 / 5.1:1 */
/* ---- 线：钢件轮廓 ---- */
--iw-line: #C2C1BA;
--iw-line-2: #A3A29B; /* 主轮廓，2px 粗边用它 */
--iw-steel: #8B9196; /* 钢板银（深底上的字） */
--iw-black: #0E1013; /* 结构黑，边框最重的一档 */
/* ---- 警示橙：三档各司其职 ---- */
--iw-orange: #E2551F; /* 色块 / 描边 / 角标，不做文字 */
--iw-orange-2: #B0390A; /* 橙字，钢板 5.4:1 */
--iw-orange-3: #FF7A3D; /* 深底上的橙字，导航 / 页脚 5.7:1 */
/* ---- 接管基础变量 ---- */
--primary: #B0390A;
--primary-dark: #8C2C06;
--primary-soft: #EFE3DA;
--ink: #14161A;
--ink-soft: #3A3F45;
--ink-faint: #4E545A;
--bg: #CFCEC8;
--card: #E7E6E3;
--border: #C2C1BA;
--gold: #B0390A;
--radius: 0;
/* 实边投影：不是「浮起来」，是「压在下面那块板上」 */
--shadow: 0 2px 0 rgba(20, 22, 26, .07);
--iw-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei",
"Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-sans: var(--iw-sans);
--font-serif: var(--iw-sans);
}
/* ---------- 底：水泥地 + 斜向刻度线 ----------
* 两层重复渐变：26px 一道细斜线（地面刻度的节奏），96px 一道略重的（像是
* 每 4 格一条基准线）。角度取 115°，比 45° 更「车间」，45° 会变成信纸。 */
html[data-template="industrial"] body {
background-color: var(--iw-bg);
background-image:
repeating-linear-gradient(115deg, rgba(20, 22, 26, .032) 0 1px, transparent 1px 26px),
repeating-linear-gradient(115deg, rgba(20, 22, 26, .022) 0 1px, transparent 1px 96px),
radial-gradient(880px 420px at 50% -14%, rgba(255, 255, 255, .18), transparent 72%);
/* 让短页（404）的页脚也贴到视口底，不留一截水泥地 */
display: flex;
flex-direction: column;
min-height: 100vh;
}
html[data-template="industrial"] main { flex: 1 0 auto; min-width: 0; }
/* ============================================================================
* 顶部导航：深灰钢板
* ==========================================================================*/
html[data-template="industrial"] .site-header {
background-color: #24282D;
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 4px),
linear-gradient(180deg, #2E3339 0%, #24282D 52%, #1C2025 100%);
border-bottom: 3px solid var(--iw-black);
box-shadow: 0 3px 10px rgba(20, 22, 26, .16);
}
/* 顶边斜纹：4px 高的警示条。整页只有这里和页脚有，两条书夹住内容 */
html[data-template="industrial"] .site-header::before {
content: '';
position: absolute; left: 0; right: 0; top: 0; height: 4px;
background: repeating-linear-gradient(45deg,
var(--iw-orange) 0 9px, #17191D 9px 18px);
pointer-events: none;
}
html[data-template="industrial"] .header-inner { min-height: 68px; gap: 26px; }
/* 站名：喷字模板的观感 —— 900 字重、拉开字距、底下一道橙色短线 */
html[data-template="industrial"] .logo {
font-family: var(--iw-sans);
font-size: 21px; font-weight: 900; letter-spacing: .12em; text-indent: .12em;
color: #F5F4F0;
padding-bottom: 4px;
border-bottom: 3px solid var(--iw-orange);
text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
html[data-template="industrial"] .logo:hover { color: #fff; }
html[data-template="industrial"] .nav { gap: 2px; }
html[data-template="industrial"] .nav a {
color: #A9AEB3;
font-size: 14px; font-weight: 700; letter-spacing: .10em; text-indent: .10em;
padding: 9px 13px;
border-radius: 0;
border-bottom: 2px solid transparent;
transition: color .12s, border-color .12s;
}
html[data-template="industrial"] .nav a:hover {
color: #F5F4F0; background: transparent;
border-bottom-color: var(--iw-orange);
}
/* 搜索框：凹进去的一块黑色面板 + 橙色方按钮 */
html[data-template="industrial"] .search-box input {
height: 40px;
border: 2px solid #454B52;
border-radius: 0;
background: #14171B;
color: #E8E7E2;
font-size: 14px; letter-spacing: .02em;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
}
html[data-template="industrial"] .search-box input::placeholder { color: #7E858B; }
html[data-template="industrial"] .search-box input:focus {
border-color: var(--iw-orange);
box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6), 0 0 0 2px rgba(226, 85, 31, .22);
}
html[data-template="industrial"] .search-box button {
height: 40px; padding: 0 20px;
border: none; border-radius: 0;
/* 白字压在 #E2551F 上只有 3.78:1，压不住 14px 的白字；
按钮底色统一降到 #C84613（4.83:1），#E2551F 只做色块与描边 */
background: #C84613; color: #fff;
font-size: 14px; font-weight: 800; letter-spacing: .14em; text-indent: .14em;
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}
html[data-template="industrial"] .search-box button:hover { background: #A93A0C; }
/* 联想下拉：深色钢板抽屉 */
html[data-template="industrial"] .suggest {
background: #1B1F24;
border: 2px solid #454B52;
border-radius: 0;
box-shadow: 0 12px 26px rgba(0, 0, 0, .42);
}
html[data-template="industrial"] .suggest a {
color: #DAD9D4; font-size: 14px;
border-bottom: 1px solid #2E343A;
}
html[data-template="industrial"] .suggest a:hover,
html[data-template="industrial"] .suggest a.active { background: #272D34; color: #fff; }
html[data-template="industrial"] .suggest .s-pinyin { color: #8B9196; }
/* ============================================================================
* 面包屑：斜杠分隔，字距拉开
* ==========================================================================*/
html[data-template="industrial"] .breadcrumb {
padding: 16px 0 2px;
font-size: 12px; letter-spacing: .08em;
}
html[data-template="industrial"] .breadcrumb li { color: var(--iw-ink-3); }
html[data-template="industrial"] .breadcrumb li + li::before {
content: "/"; margin-right: 7px; color: var(--iw-ink-3); opacity: .55;
}
html[data-template="industrial"] .breadcrumb a { color: var(--iw-ink-2); font-weight: 600; }
html[data-template="industrial"] .breadcrumb a:hover { color: var(--iw-orange-2); }
html[data-template="industrial"] .breadcrumb li[aria-current] { color: var(--iw-ink); font-weight: 800; }
/* ============================================================================
* 标题区：一块钉在设备上的铭牌
* ----------------------------------------------------------------------------
* 由居中改成左对齐 —— 铭牌上的字是左起对齐打上去的，居中会立刻变成请柬。
* 这块板同时解决两件事：给页面一个「重」的锚点，并把标题、拼音、橙色色块
* 收进同一件料里，而不是散在水泥地上。
* ==========================================================================*/
html[data-template="industrial"] .detail-head {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: baseline;
column-gap: 24px;
text-align: left;
margin: 16px 0 18px;
padding: 22px 26px 30px;
border: 2px solid #8B9196;
border-radius: 0;
background-color: #EAE9E6;
/* 4 角铆钉 + 竖向拉丝 + 板面斜高光 */
background-image:
radial-gradient(circle at 50% 50%, #63696F 0 1.7px, #B0AFA8 1.7px 3.1px, rgba(20, 22, 26, .22) 3.1px 3.7px, transparent 3.8px),
radial-gradient(circle at 50% 50%, #63696F 0 1.7px, #B0AFA8 1.7px 3.1px, rgba(20, 22, 26, .22) 3.1px 3.7px, transparent 3.8px),
radial-gradient(circle at 50% 50%, #63696F 0 1.7px, #B0AFA8 1.7px 3.1px, rgba(20, 22, 26, .22) 3.1px 3.7px, transparent 3.8px),
radial-gradient(circle at 50% 50%, #63696F 0 1.7px, #B0AFA8 1.7px 3.1px, rgba(20, 22, 26, .22) 3.1px 3.7px, transparent 3.8px),
repeating-linear-gradient(90deg, rgba(20, 22, 26, .020) 0 1px, transparent 1px 4px),
linear-gradient(174deg, #F3F2F0 0%, #EAE9E6 46%, #DFDEDA 100%);
background-size: 13px 13px, 13px 13px, 13px 13px, 13px 13px, auto, auto;
background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px), 0 0, 0 0;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
box-shadow: 0 0 0 1px rgba(20, 22, 26, .08), 0 3px 0 rgba(20, 22, 26, .07), inset 0 1px 0 #fff;
}
/* 铭牌底部的分割：橙色起笔接深色实线，一个元素画完 */
html[data-template="industrial"] .detail-head::after {
content: '';
position: absolute; left: 26px; right: 26px; bottom: 18px;
height: 3px;
background: linear-gradient(90deg,
var(--iw-orange) 0, var(--iw-orange) 112px,
var(--iw-ink) 112px, var(--iw-ink) 100%);
}
html[data-template="industrial"] .detail-head h1 {
display: flex; align-items: center; gap: 15px;
font-family: var(--iw-sans);
font-size: 46px; font-weight: 900;
line-height: 1.24;
letter-spacing: .05em;
color: var(--iw-ink);
margin-bottom: 6px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
/* 标题旁的橙色警示块：一块贴在字左边的实心方料 */
html[data-template="industrial"] .detail-head h1::before {
content: '';
flex: none;
width: 10px; height: 30px;
background: var(--iw-orange);
box-shadow: 0 0 0 1px rgba(120, 36, 4, .16), 2px 0 0 rgba(20, 22, 26, .10);
}
html[data-template="industrial"] .detail-head .head-sub {
grid-column: 2;
justify-content: flex-start;
padding-left: 0;
align-self: center;
}
html[data-template="industrial"] .pinyin {
font-size: 14px; font-weight: 600;
color: var(--iw-ink-3);
letter-spacing: .22em;
padding: 3px 0 3px 11px;
border-left: 2px solid var(--iw-line-2);
background: none;
}
/* ============================================================================
* 田字格：嵌进一块钢制托板
* ----------------------------------------------------------------------------
* 那张 SVG 自带白底。直接压在灰托板上就是一个「贴上去的白方块」，很廉价。
* multiply 把白底滤掉，笔画与红格线留下 —— 图与托板成了同一块料。
* 托板宽度收到 fit-content，像夹具正好夹住这件料，而不是一张空荡荡的大板。
* ==========================================================================*/
html[data-template="industrial"] .grid-figure {
width: fit-content;
margin: 20px auto 4px;
padding: 11px;
border: 2px solid var(--iw-line-2);
background: var(--iw-plate-2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 0 rgba(20, 22, 26, .06);
}
html[data-template="industrial"] .grid-img {
border-radius: 0;
display: block;
mix-blend-mode: multiply;
}
/* ============================================================================
* 属性标签：矩形工业标牌（钢底 + 左侧橙条 + 内高光）
* ==========================================================================*/
html[data-template="industrial"] .tags {
justify-content: flex-start;
gap: 8px;
padding: 16px 0 4px;
}
html[data-template="industrial"] .tag {
gap: 8px;
padding: 6px 13px 6px 10px;
border-radius: 0;
background: var(--iw-plate-2);
border: 1px solid var(--iw-line-2);
border-left: 4px solid var(--iw-orange);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(20, 22, 26, .07);
color: var(--iw-ink);
}
html[data-template="industrial"] .tag-label {
color: var(--iw-ink-3);
font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-indent: .14em;
text-transform: uppercase;
}
html[data-template="industrial"] .tag-value {
color: var(--iw-ink);
font-size: 13.5px; font-weight: 800; letter-spacing: .02em;
}
/* ============================================================================
* 卡片：冷轧钢板
* ----------------------------------------------------------------------------
* 2px 钢灰轮廓 + 1px 白内高光（板材上沿的倒角反光）+ 竖向拉丝。
* 不用柔阴影，用 3px 的实偏移 —— 板压板。
* ==========================================================================*/
html[data-template="industrial"] .card {
position: relative;
background-color: var(--iw-plate);
background-image:
repeating-linear-gradient(90deg, rgba(20, 22, 26, .018) 0 1px, transparent 1px 4px),
linear-gradient(176deg, #F0EFED 0%, #E7E6E3 46%, #DEDDD9 100%);
/* 2px 钢灰轮廓 + 外圈 1px 深影 = 3px 的实边，卡片才「立」得起来 */
border: 2px solid #8B9196;
border-radius: 0;
box-shadow: 0 0 0 1px rgba(20, 22, 26, .07), 0 3px 0 rgba(20, 22, 26, .07), inset 0 1px 0 #fff;
padding: 22px 26px 24px;
margin-bottom: 18px;
}
/* ---------- 板块标题：粗分割线 + 橙色起笔 + 右端刻度 ---------- */
html[data-template="industrial"] .card h2 {
font-family: var(--iw-sans);
font-size: 19px; font-weight: 900;
letter-spacing: .05em;
color: var(--iw-ink);
padding-bottom: 13px;
margin-bottom: 18px;
}
html[data-template="industrial"] .card h2::before {
content: '';
position: absolute; right: 0; bottom: 3px;
width: 86px; height: 9px;
background-image: repeating-linear-gradient(90deg,
rgba(20, 22, 26, .34) 0 1px, transparent 1px 7px);
pointer-events: none;
}
html[data-template="industrial"] .card h2::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
width: auto; height: 3px;
border-radius: 0;
background: linear-gradient(90deg,
var(--iw-orange) 0, var(--iw-orange) 54px,
#8B9196 54px, #8B9196 100%);
}
/* ============================================================================
* 释义：金属铭牌
* ==========================================================================*/
html[data-template="industrial"] .detail .card:has(.explanation) {
border-color: #8E9499;
background-color: #ECEBE8;
/* 4 角铆钉 + 拉丝 + 板面高光 */
background-image:
radial-gradient(circle at 50% 50%, #6C7278 0 1.5px, #B4B3AC 1.5px 2.9px, rgba(20, 22, 26, .18) 2.9px 3.5px, transparent 3.6px),
radial-gradient(circle at 50% 50%, #6C7278 0 1.5px, #B4B3AC 1.5px 2.9px, rgba(20, 22, 26, .18) 2.9px 3.5px, transparent 3.6px),
radial-gradient(circle at 50% 50%, #6C7278 0 1.5px, #B4B3AC 1.5px 2.9px, rgba(20, 22, 26, .18) 2.9px 3.5px, transparent 3.6px),
radial-gradient(circle at 50% 50%, #6C7278 0 1.5px, #B4B3AC 1.5px 2.9px, rgba(20, 22, 26, .18) 2.9px 3.5px, transparent 3.6px),
repeating-linear-gradient(90deg, rgba(20, 22, 26, .020) 0 1px, transparent 1px 4px),
linear-gradient(174deg, #F4F3F1 0%, #ECEBE8 44%, #E2E1DD 100%);
background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, auto, auto;
background-position: 6px 6px, calc(100% - 6px) 6px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), 0 0, 0 0;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
box-shadow: 0 0 0 1px rgba(20, 22, 26, .08), 0 3px 0 rgba(20, 22, 26, .08), inset 0 1px 0 #fff;
padding: 26px 28px 28px;
}
/* 铭牌左上角的对位标记：一道压在边框上的橙短线 */
html[data-template="industrial"] .detail .card:has(.explanation)::before {
content: '';
position: absolute; left: -2px; top: -2px;
width: 4px; height: 36px;
background: var(--iw-orange);
}
html[data-template="industrial"] .explanation {
font-size: 18px; line-height: 1.92;
color: var(--iw-ink);
letter-spacing: .012em;
}
/* 重点文字：首行压一条橙色标记线（像用记号笔划过去的）
不能整段底色 —— 那是马克笔，不是工装 */
html[data-template="industrial"] .explanation::first-line {
background: linear-gradient(transparent 74%, rgba(226, 85, 31, .28) 74%);
}
/* ---------- 字段：实线分隔，字段名带橙色竖条 ---------- */
html[data-template="industrial"] .fields { gap: 0; }
html[data-template="industrial"] .field {
grid-template-columns: 74px minmax(0, 1fr);
gap: 16px;
padding: 15px 0;
border-top: 1px solid rgba(20, 22, 26, .10);
}
html[data-template="industrial"] .field:first-child { border-top: 0; padding-top: 2px; }
html[data-template="industrial"] .field dt {
font-family: var(--iw-sans);
font-size: 12.5px; font-weight: 800;
letter-spacing: .12em; text-indent: .12em;
color: var(--iw-orange-2);
line-height: 1.72;
padding: 1px 0 1px 9px;
border-left: 3px solid var(--iw-orange);
}
html[data-template="industrial"] .field dd {
font-size: 15px; line-height: 1.86;
color: var(--iw-ink);
}
/* 出处 / 例句：凹进去的一块浅钢 */
html[data-template="industrial"] .field dd.quote {
background: var(--iw-plate-2);
border-left: 3px solid var(--iw-line-2);
border-radius: 0;
padding: 12px 16px;
color: var(--iw-ink-2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(20, 22, 26, .04);
}
/* ---------- 造句：编号用等宽的数字，像工序单 ---------- */
html[data-template="industrial"] .zju-list {
padding-left: 0; list-style: none;
display: flex; flex-direction: column; gap: 9px;
counter-reset: iw-zju;
}
html[data-template="industrial"] .zju-list li {
position: relative;
padding-left: 34px;
font-size: 15px; line-height: 1.82;
color: var(--iw-ink-2);
}
html[data-template="industrial"] .zju-list li::before {
counter-increment: iw-zju;
content: counter(iw-zju, decimal-leading-zero);
position: absolute; left: 0; top: 2px;
font-family: var(--iw-sans);
font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
color: var(--iw-orange-2);
font-variant-numeric: tabular-nums;
}
/* ---------- 近反义词：方形钢签 ---------- */
html[data-template="industrial"] .syn-ant > strong {
color: var(--iw-ink); font-weight: 800;
font-size: 13px; letter-spacing: .10em;
}
html[data-template="industrial"] .chip {
border-radius: 0;
background: var(--iw-plate-2);
color: var(--iw-ink-2);
border: 1px solid var(--iw-line-2);
padding: 4px 12px;
font-size: 13.5px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
html[data-template="industrial"] a.chip:hover {
border-color: var(--iw-orange);
background: var(--iw-plate);
color: var(--iw-orange-2);
}
html[data-template="industrial"] .chip.plain {
background: transparent;
border-style: dashed;
color: var(--iw-ink-3);
box-shadow: none;
}
/* ---------- 趣味延伸：左侧一条 12px 警示斜纹 ---------- */
html[data-template="industrial"] .detail .card.highlight {
border-color: var(--iw-line-2);
background-image:
repeating-linear-gradient(45deg,
rgba(226, 85, 31, .78) 0 6px, rgba(226, 85, 31, .10) 6px 12px),
repeating-linear-gradient(90deg, rgba(20, 22, 26, .018) 0 1px, transparent 1px 4px),
linear-gradient(176deg, #F0EFED 0%, #E7E6E3 46%, #DEDDD9 100%);
background-size: 12px auto, auto, auto;
background-position: left top, 0 0, 0 0;
background-repeat: repeat-y, repeat, no-repeat;
padding-left: 40px;
}
html[data-template="industrial"] .gold {
color: var(--iw-orange-2);
font-weight: 800;
letter-spacing: .06em;
}
html[data-template="industrial"] .xhy-list li::before {
content: '▪';
color: var(--iw-orange);
font-size: 12px;
top: 1px;
}
/* ============================================================================
* 字义分解：四张带铆钉的金属卡
* ==========================================================================*/
html[data-template="industrial"] .char-decompose { gap: 12px; align-items: stretch; }
html[data-template="industrial"] .char-item {
gap: 12px;
padding: 22px 16px 18px; /* 四角铆钉占 6+12=18px，内边距要躲开 */
border: 2px solid #8B9196;
border-radius: 0;
background-color: #E4E3DF;
/* 4 角铆钉 + 竖向拉丝 + 板面斜高光 */
background-image:
radial-gradient(circle at 50% 50%, #6C7278 0 1.5px, #B4B3AC 1.5px 2.9px, rgba(20, 22, 26, .20) 2.9px 3.5px, transparent 3.6px),
radial-gradient(circle at 50% 50%, #6C7278 0 1.5px, #B4B3AC 1.5px 2.9px, rgba(20, 22, 26, .20) 2.9px 3.5px, transparent 3.6px),
radial-gradient(circle at 50% 50%, #6C7278 0 1.5px, #B4B3AC 1.5px 2.9px, rgba(20, 22, 26, .20) 2.9px 3.5px, transparent 3.6px),
radial-gradient(circle at 50% 50%, #6C7278 0 1.5px, #B4B3AC 1.5px 2.9px, rgba(20, 22, 26, .20) 2.9px 3.5px, transparent 3.6px),
repeating-linear-gradient(90deg, rgba(20, 22, 26, .022) 0 1px, transparent 1px 4px),
linear-gradient(168deg, #EDECEA 0%, #E4E3DF 50%, #DAD9D5 100%);
background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, auto, auto;
background-position: 6px 6px, calc(100% - 6px) 6px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), 0 0, 0 0;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
box-shadow: 0 0 0 1px rgba(20, 22, 26, .06), 0 2px 0 rgba(20, 22, 26, .07), inset 0 1px 0 #fff;
}
/* 单字：冲压出来的钢印字牌 */
html[data-template="industrial"] .char-glyph {
position: relative;
align-self: flex-start;
width: 68px; height: 68px;
font-family: var(--iw-sans);
font-size: 44px; font-weight: 900;
line-height: 1;
color: var(--iw-ink);
border: 2px solid var(--iw-ink);
border-radius: 0;
background: linear-gradient(180deg, #FFF 0%, #EDECE7 56%, #DCDBD5 100%);
/* 双内环 = 冲压件的台阶边 */
box-shadow: inset 0 0 0 4px #F5F4EF, inset 0 0 0 5px var(--iw-line);
text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}
html[data-template="industrial"] .char-glyph a { color: inherit; }
html[data-template="industrial"] .char-glyph a:hover { color: var(--iw-orange-2); }
/* 右上角切一个橙色角标（像料件上的识别三角） */
html[data-template="industrial"] .char-glyph::after {
content: '';
position: absolute; right: -2px; top: -2px;
width: 0; height: 0;
border-top: 15px solid var(--iw-orange);
border-left: 15px solid transparent;
}
html[data-template="industrial"] .char-pron {
font-size: 12.5px; line-height: 1.7;
color: var(--iw-ink-3);
letter-spacing: .01em;
}
html[data-template="industrial"] .char-extra { gap: 5px; }
html[data-template="industrial"] .char-extra-item {
font-size: 11px; font-weight: 700;
color: var(--iw-ink-2);
background: var(--iw-plate-2);
border: 1px solid var(--iw-line);
border-radius: 0;
padding: 1px 6px;
letter-spacing: .04em;
}
html[data-template="industrial"] .char-extra-sep { color: var(--iw-ink-3); opacity: .5; }
html[data-template="industrial"] .char-shape {
font-size: 12.5px; color: var(--iw-ink-3);
border-top: 1px dashed rgba(20, 22, 26, .16);
padding-top: 6px;
}
html[data-template="industrial"] .char-senses { gap: 7px; }
html[data-template="industrial"] .sn-num {
color: var(--iw-orange-2);
font-size: 12px; font-weight: 800;
font-variant-numeric: tabular-nums;
}
html[data-template="industrial"] .sn-title { font-size: 14px; font-weight: 800; }
html[data-template="industrial"] .sn-text { font-size: 12.5px; line-height: 1.72; color: var(--iw-ink-2); }
html[data-template="industrial"] .expand-sense {
border-radius: 0;
border: 2px solid var(--iw-line-2);
background: var(--iw-plate);
color: var(--iw-ink-2);
font-size: 12px; font-weight: 800; letter-spacing: .06em;
padding: 6px 14px;
box-shadow: 0 2px 0 rgba(20, 22, 26, .07);
}
html[data-template="industrial"] .expand-sense:hover {
border-color: var(--iw-orange);
background: var(--iw-plate-2);
color: var(--iw-orange-2);
}
html[data-template="industrial"] .expand-sense:active {
background: var(--iw-ink); color: #F5F4F0; border-color: var(--iw-ink);
box-shadow: none;
}
/* ============================================================================
* 接龙：工装开关 + 矩形按钮 + 粗三角箭头
* ==========================================================================*/
html[data-template="industrial"] .tabs {
gap: 0;
border-bottom: 2px solid var(--iw-ink);
margin-bottom: 20px;
}
html[data-template="industrial"] .tab {
padding: 9px 20px;
margin-bottom: -2px;
border: 2px solid var(--iw-line-2);
border-bottom: 0;
border-radius: 0;
background: var(--iw-plate-2);
color: var(--iw-ink-3);
font-size: 13.5px; font-weight: 800; letter-spacing: .06em;
transition: background .12s, color .12s, border-color .12s;
}
html[data-template="industrial"] .tab:hover {
color: var(--iw-ink); background: var(--iw-plate-3); border-color: var(--iw-line-2);
}
html[data-template="industrial"] .tab.active {
color: #F5F4F0;
background: var(--iw-ink);
border-color: var(--iw-ink);
font-weight: 900;
}
html[data-template="industrial"] .jielong-chain { gap: 9px; }
html[data-template="industrial"] .jielong-node {
padding: 10px 15px;
min-width: 88px;
border: 2px solid var(--iw-line-2);
border-radius: 0;
background: linear-gradient(180deg, #FBFAF7 0%, #EFEEE9 54%, #E4E3DD 100%);
box-shadow: 0 2px 0 rgba(20, 22, 26, .10), inset 0 1px 0 #fff;
transition: border-color .12s, box-shadow .12s, transform .1s;
}
html[data-template="industrial"] .jielong-node:hover {
border-color: var(--iw-orange);
box-shadow: 0 3px 0 rgba(226, 85, 31, .26), inset 0 1px 0 #fff;
transform: translateY(-1px);
}
html[data-template="industrial"] .jielong-node.current {
border-color: var(--iw-ink);
background: var(--iw-ink);
box-shadow: 0 2px 0 rgba(20, 22, 26, .22);
}
html[data-template="industrial"] .jielong-node .jw {
font-family: var(--iw-sans);
font-size: 16px; font-weight: 900;
letter-spacing: .02em;
color: var(--iw-ink);
}
html[data-template="industrial"] .jielong-node.current .jw { color: #F5F4F0; }
html[data-template="industrial"] .jielong-node .jp {
font-size: 11px; color: var(--iw-ink-3);
letter-spacing: .03em;
}
html[data-template="industrial"] .jielong-node.current .jp { color: #A9AEB3; }
/* 「→」换成粗三角：文字零号字消掉，靠 border 画实心三角 */
html[data-template="industrial"] .jielong-arrow {
display: inline-block;
flex: none;
width: 0; height: 0;
font-size: 0; color: transparent;
border-left: 12px solid var(--iw-orange);
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
}
html[data-template="industrial"] .btn-regen {
padding: 8px 18px;
border-radius: 0;
border: 2px solid var(--iw-ink);
background: var(--iw-ink);
color: #F5F4F0;
font-size: 13px; font-weight: 800; letter-spacing: .10em; text-indent: .10em;
box-shadow: 0 2px 0 rgba(20, 22, 26, .22);
transition: background .12s, border-color .12s;
}
html[data-template="industrial"] .btn-regen:hover {
background: var(--iw-orange);
border-color: var(--iw-orange);
color: #fff;
}
html[data-template="industrial"] .btn-regen:active { background: #8C2C06; border-color: #8C2C06; }
html[data-template="industrial"] .btn-regen:disabled { opacity: .5; box-shadow: none; }
/* ============================================================================
* 相关成语：铭牌格子（直角 + 右上角折角）
* ==========================================================================*/
html[data-template="industrial"] .related-grid { gap: 12px; }
html[data-template="industrial"] .related-item {
position: relative;
gap: 4px;
padding: 15px 18px 16px;
border: 2px solid var(--iw-line-2);
border-radius: 0;
background: linear-gradient(180deg, #F8F7F3 0%, #EFEEE9 56%, #E6E5DF 100%);
box-shadow: 0 2px 0 rgba(20, 22, 26, .06), inset 0 1px 0 #fff;
transition: border-color .12s, box-shadow .12s, transform .1s;
}
html[data-template="industrial"] .related-item::after {
content: '';
position: absolute; right: -2px; top: -2px;
width: 0; height: 0;
border-top: 13px solid var(--iw-orange);
border-left: 13px solid transparent;
}
html[data-template="industrial"] .related-item:hover {
border-color: var(--iw-ink);
transform: translateY(-2px);
box-shadow: 0 4px 0 rgba(226, 85, 31, .28), inset 0 1px 0 #fff;
}
html[data-template="industrial"] .related-item .rw {
font-family: var(--iw-sans);
font-size: 17px; font-weight: 900;
letter-spacing: .03em;
color: var(--iw-ink);
}
html[data-template="industrial"] .related-item small {
font-size: 12.5px; line-height: 1.55;
color: var(--iw-ink-3);
}
/* ============================================================================
* 首页
* ==========================================================================*/
html[data-template="industrial"] .hero { padding: 46px 0 26px; }
html[data-template="industrial"] .hero h1 {
font-family: var(--iw-sans);
font-size: 36px; font-weight: 900;
letter-spacing: .06em;
color: var(--iw-ink);
margin-bottom: 10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
html[data-template="industrial"] .hero-sub { color: var(--iw-ink-2); font-size: 15px; letter-spacing: .02em; }
html[data-template="industrial"] .hero-sub strong {
color: var(--iw-orange-2);
font-weight: 900;
font-variant-numeric: tabular-nums;
}
html[data-template="industrial"] .hero-search input {
height: 48px;
border: 2px solid var(--iw-line-2);
border-radius: 0;
background: var(--iw-sheen);
color: var(--iw-ink);
font-size: 15px;
box-shadow: inset 0 2px 3px rgba(20, 22, 26, .07);
}
html[data-template="industrial"] .hero-search input:focus {
border-color: var(--iw-orange);
box-shadow: inset 0 2px 3px rgba(20, 22, 26, .07), 0 0 0 2px rgba(226, 85, 31, .2);
}
html[data-template="industrial"] .hero-search button {
height: 48px;
border-radius: 0;
background: #C84613;
color: #fff;
font-size: 15px; font-weight: 800; letter-spacing: .12em; text-indent: .12em;
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}
html[data-template="industrial"] .hero-search button:hover { background: #A93A0C; }
html[data-template="industrial"] .letters { gap: 8px; }
html[data-template="industrial"] .letter {
border: 2px solid var(--iw-line-2);
border-radius: 0;
background: var(--iw-plate-2);
color: var(--iw-ink);
font-weight: 900;
box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(20, 22, 26, .06);
}
html[data-template="industrial"] .letter small { color: var(--iw-ink-3); font-weight: 600; }
html[data-template="industrial"] .letter:hover {
border-color: var(--iw-orange);
background: var(--iw-plate);
color: var(--iw-orange-2);
}
html[data-template="industrial"] .letter.empty { color: var(--iw-ink-3); opacity: .45; }
html[data-template="industrial"] .hot-grid { gap: 12px; }
html[data-template="industrial"] .hot-item {
border: 2px solid var(--iw-line-2);
border-radius: 0;
background: var(--iw-plate);
box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(20, 22, 26, .05);
}
html[data-template="industrial"] .hot-item:hover {
border-color: var(--iw-orange);
box-shadow: 0 3px 0 rgba(226, 85, 31, .26);
transform: translateY(-2px);
}
html[data-template="industrial"] .hot-word {
font-family: var(--iw-sans);
font-weight: 900;
letter-spacing: .03em;
}
html[data-template="industrial"] .hot-pinyin { color: var(--iw-orange-2); font-size: 12px; letter-spacing: .06em; }
html[data-template="industrial"] .hot-expl { color: var(--iw-ink-3); }
/* ============================================================================
* 列表页 / 搜索页
* ==========================================================================*/
html[data-template="industrial"] .list-head h1 {
font-family: var(--iw-sans);
font-size: 27px; font-weight: 900;
letter-spacing: .05em;
color: var(--iw-ink);
}
html[data-template="industrial"] .muted { color: var(--iw-ink-3); }
html[data-template="industrial"] .result-list {
border: 2px solid var(--iw-line-2);
border-radius: 0;
background: var(--iw-plate);
box-shadow: 0 3px 0 rgba(20, 22, 26, .055);
}
html[data-template="industrial"] .result-item {
border-bottom: 1px solid rgba(20, 22, 26, .10);
padding: 14px 20px;
}
html[data-template="industrial"] .result-item:hover { background: var(--iw-plate-2); }
html[data-template="industrial"] .result-item .rw {
font-family: var(--iw-sans);
font-weight: 900;
letter-spacing: .03em;
color: var(--iw-ink);
}
html[data-template="industrial"] .result-item .rp { color: var(--iw-orange-2); font-size: 12px; letter-spacing: .04em; }
html[data-template="industrial"] .result-item .re { color: var(--iw-ink-3); }
html[data-template="industrial"] .pager a {
border: 2px solid var(--iw-line-2);
border-radius: 0;
background: var(--iw-plate-2);
color: var(--iw-ink);
font-weight: 800;
box-shadow: 0 2px 0 rgba(20, 22, 26, .07);
}
html[data-template="industrial"] .pager a:hover {
border-color: var(--iw-orange);
background: var(--iw-plate);
color: var(--iw-orange-2);
}
html[data-template="industrial"] .pager span { color: var(--iw-ink-3); }
/* ---------- 404 / 空状态 ---------- */
html[data-template="industrial"] .not-found h1 {
font-family: var(--iw-sans);
font-size: 68px; font-weight: 900;
letter-spacing: .06em;
/* 冲在水泥地上的一枚钢印：比底色深一档，再压一道白边才有「凹」下去的感觉 */
color: #B4B3AC;
text-shadow: 0 1px 0 rgba(255, 255, 255, .85), 0 -1px 0 rgba(20, 22, 26, .10);
}
html[data-template="industrial"] .not-found p { color: var(--iw-ink-2); }
html[data-template="industrial"] .empty { color: var(--iw-ink-3); }
html[data-template="industrial"] .back a { color: var(--iw-orange-2); font-weight: 700; }
/* ============================================================================
* 页脚：深灰钢板，与顶栏书夹
* ==========================================================================*/
html[data-template="industrial"] .site-footer {
position: relative;
background-color: #1A1D21;
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, .020) 0 1px, transparent 1px 4px),
linear-gradient(180deg, #22262B 0%, #1A1D21 60%, #131619 100%);
border-top: 3px solid var(--iw-black);
color: #8B9196;
margin-top: 34px;
}
html[data-template="industrial"] .site-footer::before {
content: '';
position: absolute; left: 0; right: 0; top: 0; height: 4px;
background: repeating-linear-gradient(45deg,
var(--iw-orange) 0 9px, #17191D 9px 18px);
pointer-events: none;
}
html[data-template="industrial"] .footer-inner { padding: 26px 16px 22px; gap: 10px; }
html[data-template="industrial"] .footer-nav { gap: 22px; }
html[data-template="industrial"] .footer-nav a {
color: #B6BABE;
font-size: 13px; font-weight: 700;
letter-spacing: .09em;
}
html[data-template="industrial"] .footer-nav a:hover { color: var(--iw-orange-3); }
html[data-template="industrial"] .copyright {
font-size: 12px;
letter-spacing: .04em;
color: #7E858B;
}
html[data-template="industrial"] .footer-hub { border-top-color: rgba(255, 255, 255, .07); }
html[data-template="industrial"] .footer-hub .fh-label { color: #6E757B; }
html[data-template="industrial"] .footer-hub a { color: #8B9196; }
html[data-template="industrial"] .footer-hub a:hover { color: #C3C7CB; }
/* 首页友情链接卡：跟着卡片走，只是标题弱一档 */
html[data-template="industrial"] .friend-links h2 { font-size: 17px; }
html[data-template="industrial"] .fl-list a { color: var(--iw-ink-2); }
html[data-template="industrial"] .fl-list a:hover { color: var(--iw-orange-2); }
/* ============================================================================
* 响应式
* ==========================================================================*/
@media (max-width: 1024px) {
/* 字义卡改 flex 等分：4 字成语在 1024 两列会留半个空格，三字却能撑满 */
html[data-template="industrial"] .char-decompose {
display: flex; flex-wrap: wrap; gap: 12px;
}
html[data-template="industrial"] .char-decompose > .char-item {
flex: 1 1 calc(50% - 6px);
}
html[data-template="industrial"] .detail-head h1 { font-size: 40px; }
}
@media (max-width: 860px) {
html[data-template="industrial"] .detail-head h1 { font-size: 36px; }
html[data-template="industrial"] .detail-head h1::before { height: 26px; width: 9px; }
html[data-template="industrial"] .card { padding: 20px 20px 22px; }
html[data-template="industrial"] .detail .card:has(.explanation) { padding: 22px 22px 24px; }
html[data-template="industrial"] .card h2 { font-size: 17.5px; padding-bottom: 12px; }
html[data-template="industrial"] .card h2::before { width: 64px; }
html[data-template="industrial"] .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
html[data-template="industrial"] .header-inner { min-height: 60px; }
html[data-template="industrial"] .logo { font-size: 18px; letter-spacing: .08em; }
html[data-template="industrial"] .detail-head {
grid-template-columns: 1fr;
row-gap: 5px;
padding: 18px 18px 26px;
margin: 12px 0 16px;
}
html[data-template="industrial"] .detail-head h1 {
font-size: clamp(28px, 8.6vw, 34px);
letter-spacing: .04em;
gap: 11px;
}
html[data-template="industrial"] .detail-head h1::before { width: 8px; height: 22px; }
html[data-template="industrial"] .detail-head .head-sub { grid-column: 1; padding-left: 19px; }
html[data-template="industrial"] .detail-head::after { left: 18px; right: 18px; bottom: 15px; }
html[data-template="industrial"] .pinyin { font-size: 12.5px; letter-spacing: .14em; }
html[data-template="industrial"] .tag { padding: 5px 10px 5px 8px; }
html[data-template="industrial"] .tag-value { font-size: 12.5px; }
html[data-template="industrial"] .tag-label { font-size: 10px; }
html[data-template="industrial"] .fields { gap: 0; }
html[data-template="industrial"] .field { grid-template-columns: 1fr; gap: 6px; padding: 13px 0; }
html[data-template="industrial"] .field dt { font-size: 12px; }
html[data-template="industrial"] .explanation { font-size: 16.5px; line-height: 1.95; }
html[data-template="industrial"] .detail .card.highlight { padding-left: 30px; background-size: 10px auto, auto, auto; }
html[data-template="industrial"] .char-decompose { gap: 10px; }
html[data-template="industrial"] .char-item { padding: 20px 14px 16px; }
html[data-template="industrial"] .char-glyph { width: 60px; height: 60px; font-size: 38px; }
html[data-template="industrial"] .card h2::before { display: none; } /* 手机上一行放不下刻度 */
html[data-template="industrial"] .card h2 { font-size: 17px; }
html[data-template="industrial"] .tabs { border-bottom-width: 2px; }
html[data-template="industrial"] .tab { padding: 8px 14px; font-size: 12.5px; }
html[data-template="industrial"] .jielong-node { min-width: 78px; padding: 9px 12px; }
html[data-template="industrial"] .jielong-node .jw { font-size: 15px; }
html[data-template="industrial"] .related-grid { gap: 10px; }
html[data-template="industrial"] .related-item { padding: 13px 14px 14px; }
html[data-template="industrial"] .related-item .rw { font-size: 16px; }
html[data-template="industrial"] .related-item small { font-size: 12px; }
html[data-template="industrial"] .hero h1 { font-size: 26px; letter-spacing: .04em; }
html[data-template="industrial"] .hero { padding: 30px 0 18px; }
html[data-template="industrial"] .site-footer { margin-top: 26px; }
html[data-template="industrial"] .footer-inner { padding: 22px 14px 18px; }
}
@media (max-width: 400px) {
html[data-template="industrial"] .detail-head h1 { font-size: clamp(25px, 8.8vw, 30px); }
html[data-template="industrial"] .tag { padding: 4px 9px 4px 7px; }
html[data-template="industrial"] .tag-value { font-size: 12px; }
html[data-template="industrial"] .char-item { padding: 18px 12px 15px; }
html[data-template="industrial"] .char-glyph { width: 54px; height: 54px; font-size: 34px; }
html[data-template="industrial"] .char-glyph::after { border-top-width: 12px; border-left-width: 12px; }
html[data-template="industrial"] .explanation { font-size: 16px; }
/* 极窄屏：接龙节点整行铺开，箭头单独占一格 */
html[data-template="industrial"] .jielong-chain { gap: 7px; }
}
/* ============================================================================
* 视觉模板：哥特暗黑书卷风（html[data-template="gothic"]）
* ----------------------------------------------------------------------------
* 北极星：一间只点着壁灯的善本室，摊开在桌上的羊皮抄本 —— 不是地牢，不是恐怖片。
* 暗底、哑光烫金、细雕花边框、衬线标题。所有的「暗」都是为了让金「亮」得克制。
*
* 跟前几版的关系：
* 书卷(新中式)靠纸的暖、水彩靠浓度、Y2K 靠材质、植物园靠留白、工业靠重量。
* 这一版靠**金与暗的比值** —— 整页只有 3% 的面积是金色，剩下的全退到墨里。
* 金一多就俗，一少就脏；克制点只在「线、字、印」三处。
*
* 四条硬规则：
* 1. 金色只做「线与字」，不做「面」。例外只有两处：烫金按钮的渐变底、
* 以及标题的字面渐变 —— 那两块是「压印上去的金箔」，不是背景色。
* 2. 边框从来不是一条：外 1px 实线 + 内 6px 处 1px 细线（outline 画）+ 角上一枚
* 黄铜钉。单线是网页，双线加钉才是书。
* 3. 亮度分层只有三档：页 #171310 / 笺 #221B14 / 抬起 #2A2218。超过三档就散。
* 4. 圆角归到 2px。羊皮笺的边是刀裁的直边，圆角一出现立刻变成「卡片 UI」。
*
* 花纹全部用 CSS 渐变与伪元素画：斜向菱形暗纹是两组 ±45° 的 1px 金线，
* 雕花角标是四枚 radial-gradient 的黄铜钉，卷草尖角是一枚 rotate(45deg) 的方块。
* 不新增图片、不改 HTML、子目录部署不用改路径。
*
* 字体：标题走思源宋体（--gk-serif），正文走思源黑体（--gk-sans）。
* 烫金的字必须是有衬线的 —— 宋体的横细竖粗才有「雕版压印」的笔锋。
* ==========================================================================*/
html[data-template="gothic"] {
/* ---- 面：暗羊皮三档 ---- */
--gk-page: #171310; /* 整页底，暗褐黑 */
--gk-page-2: #120F0C;
--gk-vel: #221B14; /* 羊皮笺，卡片面 */
--gk-vel-2: #2A2218; /* 抬起一层，hover */
--gk-vel-3: #332A1D;
/* ---- 墨：暖米字色三档 ---- */
--gk-ink: #E9DFC7; /* 正文，笺面 12.7:1 */
--gk-ink-2: #C9BB9E; /* 8.9:1 */
--gk-ink-3: #A1937A; /* 小字，5.6:1 */
/* ---- 金：哑光烫金四档 ---- */
--gk-gold: #C9A961; /* 主金，笺面 7.6:1 / 页底 8.5:1 */
--gk-gold-hi: #E2C888; /* 高光金，深底上标题用 */
--gk-gold-dim: #8B6F3A; /* 暗金，只做边框，不做文字 */
--gk-gold-line: rgba(201, 169, 97, .26);
/* ---- 墨紫：只给「趣味延伸」那类副板块 ---- */
--gk-purple: #2B2333;
--gk-purple-2: #38304A;
/* ---- 火漆：印章红棕 ---- */
--gk-wax: #5E2020;
--gk-wax-hi: #7A2C2C;
/* ---- 接管基础变量（漏改的规则也不会跳白） ---- */
--primary: #C9A961;
--primary-dark: #A8853F;
--primary-soft: #2C2419;
--ink: #E9DFC7;
--ink-soft: #C9BB9E;
--ink-faint: #A1937A;
--bg: #171310;
--card: #221B14;
--border: #3A3126;
--gold: #C9A961;
--radius: 2px;
--shadow: 0 8px 22px rgba(0, 0, 0, .32);
--gk-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
--gk-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei",
"Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-serif: var(--gk-serif);
--font-sans: var(--gk-sans);
}
/* ---------- 底：暗羊皮 + 斜向菱形暗纹 ----------
* 两组 ±45° 的 1px 金线（3% / 2.4%）交成菱形网格，42px 一个周期。
* 远看是一片「有织纹的暗」，近看才有卷草骨架。再加两团极淡的光晕，
* 一团暖金压在页头、一团墨紫偏在右侧 —— 单色底会死，两团错位的光才像活纸。 */
html[data-template="gothic"] body {
background-color: var(--gk-page);
background-image:
repeating-linear-gradient(45deg, rgba(201, 169, 97, .030) 0 1px, transparent 1px 42px),
repeating-linear-gradient(-45deg, rgba(201, 169, 97, .024) 0 1px, transparent 1px 42px),
radial-gradient(940px 500px at 50% -8%, rgba(201, 169, 97, .055), transparent 70%),
radial-gradient(720px 520px at 88% 44%, rgba(96, 66, 122, .048), transparent 72%),
linear-gradient(180deg, #191510 0%, #14110D 48%, #100D0A 100%);
/* 短页（404）也让页脚贴到视口底，不留一截空纸 */
display: flex;
flex-direction: column;
min-height: 100vh;
}
html[data-template="gothic"] main { flex: 1 0 auto; min-width: 0; }
/* ============================================================================
* 顶部导航：深墨底 + 两道烫金细线
* ----------------------------------------------------------------------------
* 「细烫金分割线」不是一条 —— 是 1px 实线 + 3px 下一道 8% 的暗金，
* 像善本封面上压的两道烫印。单线太薄，三线太吵，两道正好。
* ==========================================================================*/
html[data-template="gothic"] .site-header {
background-color: #100D0A;
background-image:
linear-gradient(180deg, #181310 0%, #100D0A 62%, #0A0806 100%),
radial-gradient(520px 120px at 50% 0%, rgba(201, 169, 97, .07), transparent 76%);
border-bottom: 1px solid rgba(201, 169, 97, .34);
box-shadow:
inset 0 -3px 0 rgba(201, 169, 97, .09),
0 6px 20px rgba(0, 0, 0, .46);
}
html[data-template="gothic"] .header-inner { min-height: 66px; gap: 24px; }
/* 站名：宋体、拉开字距、底下一道渐隐的金线 */
html[data-template="gothic"] .logo {
position: relative;
display: inline-block;
font-family: var(--gk-serif);
font-size: 21px; font-weight: 700;
letter-spacing: .18em; text-indent: .18em;
color: #E7D2A2;
padding-bottom: 5px;
text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 0 18px rgba(201, 169, 97, .16);
}
html[data-template="gothic"] .logo::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, var(--gk-gold-dim), rgba(201, 169, 97, .10) 70%, transparent);
}
html[data-template="gothic"] .logo:hover { color: var(--gk-gold-hi); }
html[data-template="gothic"] .nav { gap: 4px; }
html[data-template="gothic"] .nav a {
color: #B3A78F;
font-size: 14px; font-weight: 500;
letter-spacing: .10em;
padding: 8px 12px;
border-radius: 2px;
border-bottom: 1px solid transparent;
background: none;
transition: color .16s, border-color .16s;
}
html[data-template="gothic"] .nav a:hover {
color: var(--gk-gold-hi);
background: none;
border-bottom-color: rgba(201, 169, 97, .55);
}
/* 搜索框：凹进纸面的一道墨槽；按钮是压上去的一块金箔 */
html[data-template="gothic"] .search-box input {
height: 38px;
border: 1px solid #3B3226;
border-radius: 2px;
background: #0D0B08;
color: var(--gk-ink);
font-size: 14px; letter-spacing: .02em;
box-shadow: inset 0 2px 7px rgba(0, 0, 0, .62);
}
html[data-template="gothic"] .search-box input::placeholder { color: #7C7060; }
html[data-template="gothic"] .search-box input:focus {
border-color: var(--gk-gold-dim);
box-shadow: inset 0 2px 7px rgba(0, 0, 0, .62), 0 0 0 1px rgba(201, 169, 97, .22);
}
html[data-template="gothic"] .search-box button {
height: 38px; padding: 0 18px;
border: 1px solid #8B6F3A; border-radius: 2px;
/* 金箔渐变：#B4913F 处白字压不住，所以字用深墨 —— 深字压金是 5.6:1 */
background: linear-gradient(180deg, #D8BC7C 0%, #C0A055 48%, #B4913F 100%);
color: #211A10;
font-size: 14px; font-weight: 700;
letter-spacing: .14em; text-indent: .14em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 2px 6px rgba(0, 0, 0, .4);
}
html[data-template="gothic"] .search-box button:hover {
background: linear-gradient(180deg, #E5CB8C 0%, #CBA95C 48%, #BC9A45 100%);
}
/* 联想下拉：一页摊开的黑笺 */
html[data-template="gothic"] .suggest {
background: #1B150F;
border: 1px solid var(--gk-gold-dim);
border-radius: 2px;
box-shadow: 0 14px 30px rgba(0, 0, 0, .6);
}
html[data-template="gothic"] .suggest a {
color: var(--gk-ink-2);
font-size: 14px;
border-bottom: 1px solid rgba(201, 169, 97, .10);
}
html[data-template="gothic"] .suggest a:hover,
html[data-template="gothic"] .suggest a.active { background: #2A2218; color: var(--gk-gold-hi); }
html[data-template="gothic"] .suggest .s-pinyin { color: var(--gk-ink-3); }
/* ============================================================================
* 面包屑：细分隔符，字距拉开，像目录页的行首
* ==========================================================================*/
html[data-template="gothic"] .breadcrumb {
padding: 16px 0 2px;
font-size: 12px; letter-spacing: .09em;
}
html[data-template="gothic"] .breadcrumb li { color: var(--gk-ink-3); }
html[data-template="gothic"] .breadcrumb li + li::before {
content: "·"; margin-right: 7px;
color: var(--gk-gold-dim);
}
html[data-template="gothic"] .breadcrumb a { color: var(--gk-ink-2); }
html[data-template="gothic"] .breadcrumb a:hover { color: var(--gk-gold); }
html[data-template="gothic"] .breadcrumb li[aria-current] { color: var(--gk-gold); }
/* ============================================================================
* 标题区：一页书的「题名页」（title page）
* ----------------------------------------------------------------------------
* 工业版是左对齐的铭牌，这一版必须居中 —— 善本的题名页天生对称：
* 上花饰、题名、拼音、下花饰，四件东西压在同一条中轴上。
* 中文标题用居中才立得住，左对齐会变成「工业样本」。
*
* 边框照旧是三层：外 1px 金线 + 内 6px 处 1px 细线 + 四角黄铜钉。
* ==========================================================================*/
html[data-template="gothic"] .detail-head {
position: relative;
text-align: center;
margin: 22px 0 20px;
padding: 40px 32px 30px;
border: 1px solid var(--gk-gold-line);
border-radius: 2px;
outline: 1px solid rgba(201, 169, 97, .13);
outline-offset: -6px;
background-color: #211A13;
/* 4 角黄铜钉 + 帘纹 + 顶部受光 */
background-image:
radial-gradient(circle at 50% 50%, rgba(238, 214, 154, .82) 0 1.7px, rgba(201, 169, 97, .14) 1.7px 3px, transparent 3.4px),
radial-gradient(circle at 50% 50%, rgba(238, 214, 154, .82) 0 1.7px, rgba(201, 169, 97, .14) 1.7px 3px, transparent 3.4px),
radial-gradient(circle at 50% 50%, rgba(238, 214, 154, .82) 0 1.7px, rgba(201, 169, 97, .14) 1.7px 3px, transparent 3.4px),
radial-gradient(circle at 50% 50%, rgba(238, 214, 154, .82) 0 1.7px, rgba(201, 169, 97, .14) 1.7px 3px, transparent 3.4px),
repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 4px),
radial-gradient(130% 100% at 50% -14%, rgba(201, 169, 97, .10), transparent 64%),
linear-gradient(180deg, #251E16 0%, #211A13 54%, #1A140E 100%);
background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px, auto, auto, auto;
background-position: 3px 3px, calc(100% - 3px) 3px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), 0 0, 0 0, 0 0;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat;
box-shadow: 0 10px 28px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(201, 169, 97, .10);
}
/* 题名上面的花饰：一条金线，中间断开，嵌一枚菱形 */
html[data-template="gothic"] .detail-head::before {
content: '';
position: absolute; left: 50%; top: 16px;
width: 190px; height: 9px;
margin-left: -95px;
background-image:
radial-gradient(circle at 50% 50%, var(--gk-gold) 0 2.1px, transparent 2.6px),
linear-gradient(90deg,
transparent 0, rgba(201, 169, 97, .50) 10%, rgba(201, 169, 97, .50) 41%,
transparent 42%, transparent 58%,
rgba(201, 169, 97, .50) 59%, rgba(201, 169, 97, .50) 90%, transparent 100%);
background-size: 9px 9px, 100% 1px;
background-position: center center, center center;
background-repeat: no-repeat, no-repeat;
}
/* 拼音下面的收尾花饰：同款，缩小、压暗，收住整个题名页 */
html[data-template="gothic"] .detail-head::after {
content: '';
position: absolute; left: 50%; bottom: 12px;
width: 132px; height: 7px;
margin-left: -66px;
background-image:
radial-gradient(circle at 50% 50%, rgba(201, 169, 97, .55) 0 1.7px, transparent 2.2px),
linear-gradient(90deg,
transparent 0, rgba(201, 169, 97, .30) 12%, rgba(201, 169, 97, .30) 42%,
transparent 43%, transparent 57%,
rgba(201, 169, 97, .30) 58%, rgba(201, 169, 97, .30) 88%, transparent 100%);
background-size: 7px 7px, 100% 1px;
background-position: center center, center center;
background-repeat: no-repeat, no-repeat;
}
/* 题名：宋体 + 烫金字面渐变。
渐变字不能用 text-shadow（阴影会盖在透明字上），改用 drop-shadow 补一层压印暗边。 */
html[data-template="gothic"] .detail-head h1 {
font-family: var(--gk-serif);
font-size: 46px; font-weight: 700;
line-height: 1.32;
letter-spacing: .16em; text-indent: .16em;
margin-bottom: 10px;
/* 兜底色：万一浏览器不认 background-clip:text，标题也得是金的，不能变透明 */
color: #D3B36C;
background-image: linear-gradient(180deg, #F0DCA8 0%, #D3B36C 42%, #B08B44 100%);
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .66)) drop-shadow(0 0 20px rgba(201, 169, 97, .18));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
html[data-template="gothic"] .detail-head h1 {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
}
html[data-template="gothic"] .detail-head .head-sub { justify-content: center; gap: 12px; }
html[data-template="gothic"] .pinyin {
font-family: var(--gk-serif);
font-size: 13.5px; font-style: italic;
color: var(--gk-ink-3);
letter-spacing: .30em; text-indent: .30em;
padding: 0;
border: 0;
background: none;
}
/* ============================================================================
* 田字格：贴进书页的一张米色插图板
* ----------------------------------------------------------------------------
* 那张 SVG 自带白底。暗底上直接放就是一块发光白砖，太跳。
* 这一版反而要它亮 —— 善本里的插图是裱在米色薄纸上再贴进书页的。
* 所以给一块米色托纸 + 双金线画框，SVG 用 multiply 融进托纸（白底滤掉，笔画与格线留住）。
* ==========================================================================*/
html[data-template="gothic"] .grid-figure {
width: fit-content;
margin: 6px auto 22px;
padding: 9px;
border: 1px solid var(--gk-gold-dim);
border-radius: 2px;
outline: 1px solid rgba(201, 169, 97, .26);
outline-offset: -5px;
/* 托纸不能是纯白 —— 暗页上一块白会变成贴纸。取旧纸的陈黄，四角再压暗一圈，
像一张在书里夹了三百年的插图。 */
background:
radial-gradient(120% 110% at 50% 38%, rgba(255, 246, 224, .55), transparent 62%),
linear-gradient(168deg, #D8CAAA 0%, #CBBD9B 58%, #BCAE8C 100%);
box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .3);
}
html[data-template="gothic"] .grid-img {
border-radius: 0;
display: block;
mix-blend-mode: multiply;
}
/* ============================================================================
* 属性标签：复古火漆印章
* ----------------------------------------------------------------------------
* 火漆不是圆角胶囊。四边半径各不相同的椭圆度（48%/52%…）才有「压下去的一坨蜡」，
* 再加一点点错位旋转 —— 手按的印不会正。旋转只到 1°，再大就变贴纸。
* ==========================================================================*/
html[data-template="gothic"] .tags {
justify-content: center;
gap: 11px;
padding: 8px 0 6px;
}
html[data-template="gothic"] .tag {
gap: 7px;
padding: 9px 25px;
border: 0;
border-radius: 0;
/* 蜡印不能是椭圆胶囊 —— border-radius 无论怎么配都是光滑的。改用 18 点多边形。
抖动是「非等比」的：左右只动 3%（宽 160px 时约 5px），上下动 20%（高 36px 时约
3.6px）。等比抖动在这个扁长比例下等于没抖 —— 上下那点位移会被宽度吞掉。
三种轮廓轮着用，六枚印不会重样。clip-path 会把外投影一起剪掉，
所以外阴影改由 filter: drop-shadow 承担。 */
clip-path: polygon(98.02% 50.00%, 97.49% 57.74%, 95.89% 65.24%, 93.22% 72.40%, 89.47% 78.96%, 84.66% 85.28%, 78.90% 89.77%, 72.33% 94.12%, 65.17% 96.82%, 57.65% 96.87%, 50.00% 96.21%, 42.44% 93.57%, 35.12% 91.96%, 28.20% 89.35%, 21.76% 86.58%, 15.93% 82.46%, 10.83% 76.78%, 6.61% 70.80%, 3.45% 64.18%, 1.48% 57.35%, 0.80% 50.00%, 1.47% 42.45%, 3.44% 34.44%, 6.60% 27.16%, 10.82% 20.11%, 15.92% 15.03%, 21.76% 11.08%, 28.20% 7.17%, 35.13% 5.66%, 42.44% 4.14%, 50.00% 3.00%, 57.64% 3.62%, 65.17% 6.60%, 72.33% 9.44%, 78.90% 14.24%, 84.67% 18.82%, 89.48% 24.10%, 93.23% 29.03%, 95.91% 35.35%, 97.50% 42.33%);
background-color: #5E2020;
background-image:
/* 蜡里的气泡与不匀 */
radial-gradient(38% 62% at 22% 30%, rgba(255, 220, 178, .14), transparent 70%),
radial-gradient(32% 52% at 78% 76%, rgba(0, 0, 0, .18), transparent 72%),
radial-gradient(132% 150% at 34% 12%, #A2403A 0%, #772925 40%, #4E1918 100%);
/* 上沿受光、下沿压暗、再收一道蜡被挤出的暗边 —— 蜡的体积全在这三层里 */
box-shadow:
inset 0 2px 3px rgba(255, 226, 184, .28),
inset 0 -4px 9px rgba(0, 0, 0, .50),
inset 0 0 0 2px rgba(0, 0, 0, .12),
inset 0 0 0 1px rgba(220, 182, 126, .20);
/* 第一层紧贴轮廓的暗晕 = 蜡溢出后压出的边；第二层才是落在纸上的影 */
filter: drop-shadow(0 0 1px rgba(74, 18, 16, .95)) drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
color: #ECD49A;
}
html[data-template="gothic"] .tag:nth-child(3n+1) { clip-path: polygon(98.02% 50.00%, 97.49% 57.74%, 95.89% 65.24%, 93.22% 72.40%, 89.47% 78.96%, 84.66% 85.28%, 78.90% 89.77%, 72.33% 94.12%, 65.17% 96.82%, 57.65% 96.87%, 50.00% 96.21%, 42.44% 93.57%, 35.12% 91.96%, 28.20% 89.35%, 21.76% 86.58%, 15.93% 82.46%, 10.83% 76.78%, 6.61% 70.80%, 3.45% 64.18%, 1.48% 57.35%, 0.80% 50.00%, 1.47% 42.45%, 3.44% 34.44%, 6.60% 27.16%, 10.82% 20.11%, 15.92% 15.03%, 21.76% 11.08%, 28.20% 7.17%, 35.13% 5.66%, 42.44% 4.14%, 50.00% 3.00%, 57.64% 3.62%, 65.17% 6.60%, 72.33% 9.44%, 78.90% 14.24%, 84.67% 18.82%, 89.48% 24.10%, 93.23% 29.03%, 95.91% 35.35%, 97.50% 42.33%); transform: rotate(-1.1deg); }
html[data-template="gothic"] .tag:nth-child(3n+2) { clip-path: polygon(98.02% 50.00%, 97.49% 57.76%, 95.89% 65.30%, 93.22% 72.05%, 89.47% 78.98%, 84.66% 85.10%, 78.90% 90.38%, 72.33% 93.74%, 65.17% 95.78%, 57.65% 96.56%, 50.00% 96.03%, 42.44% 93.74%, 35.12% 92.00%, 28.20% 89.42%, 21.76% 86.88%, 15.93% 82.78%, 10.83% 77.06%, 6.61% 71.23%, 3.45% 64.10%, 1.48% 57.33%, 0.80% 50.00%, 1.47% 42.45%, 3.44% 34.48%, 6.60% 26.93%, 10.82% 19.88%, 15.92% 14.96%, 21.76% 10.55%, 28.20% 7.16%, 35.13% 5.17%, 42.44% 4.03%, 50.00% 3.76%, 57.64% 3.54%, 65.17% 6.39%, 72.33% 9.40%, 78.90% 14.63%, 84.67% 18.70%, 89.48% 23.67%, 93.23% 29.04%, 95.91% 35.60%, 97.50% 42.45%); transform: rotate(.9deg); }
html[data-template="gothic"] .tag:nth-child(3n) { clip-path: polygon(98.02% 50.00%, 97.49% 57.72%, 95.89% 65.25%, 93.22% 72.04%, 89.47% 78.90%, 84.66% 85.26%, 78.90% 90.62%, 72.33% 93.82%, 65.17% 96.49%, 57.65% 96.84%, 50.00% 95.74%, 42.44% 94.58%, 35.12% 92.03%, 28.20% 89.56%, 21.76% 86.97%, 15.93% 82.52%, 10.83% 76.99%, 6.61% 70.85%, 3.45% 64.26%, 1.48% 57.19%, 0.80% 50.00%, 1.47% 42.34%, 3.44% 34.58%, 6.60% 26.77%, 10.82% 19.90%, 15.92% 14.67%, 21.76% 10.42%, 28.20% 7.98%, 35.13% 5.83%, 42.44% 3.23%, 50.00% 3.52%, 57.64% 4.40%, 65.17% 5.91%, 72.33% 9.66%, 78.90% 14.64%, 84.67% 19.12%, 89.48% 24.07%, 93.23% 29.40%, 95.91% 35.61%, 97.50% 42.42%); transform: rotate(-.5deg); }
html[data-template="gothic"] .tag-label {
color: rgba(246, 224, 184, .92);
font-size: 10px; font-weight: 500;
letter-spacing: .16em; text-indent: .16em;
}
html[data-template="gothic"] .tag-value {
color: #F0DAA6;
font-family: var(--gk-serif);
font-size: 13px; font-weight: 700;
letter-spacing: .04em;
}
/* ============================================================================
* 卡片：羊皮笺
* ----------------------------------------------------------------------------
* 双线画框（border + outline）+ 四角黄铜钉 + 帘纹（抄纸留下的竖纹）。
* 底不用纯色：172° 的三档渐变让每张笺上下有色差，像同一刀纸里裁出来的不同张。
* ==========================================================================*/
html[data-template="gothic"] .card {
position: relative;
background-color: var(--gk-vel);
background-image:
radial-gradient(circle at 50% 50%, rgba(232, 208, 148, .72) 0 1.6px, rgba(201, 169, 97, .12) 1.6px 2.8px, transparent 3.2px),
radial-gradient(circle at 50% 50%, rgba(232, 208, 148, .72) 0 1.6px, rgba(201, 169, 97, .12) 1.6px 2.8px, transparent 3.2px),
radial-gradient(circle at 50% 50%, rgba(232, 208, 148, .72) 0 1.6px, rgba(201, 169, 97, .12) 1.6px 2.8px, transparent 3.2px),
radial-gradient(circle at 50% 50%, rgba(232, 208, 148, .72) 0 1.6px, rgba(201, 169, 97, .12) 1.6px 2.8px, transparent 3.2px),
repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 4px),
radial-gradient(140% 110% at 16% -6%, rgba(201, 169, 97, .055), transparent 58%),
linear-gradient(172deg, #251E16 0%, #221B14 52%, #1C1610 100%);
background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px, auto, auto, auto;
background-position: 3px 3px, calc(100% - 3px) 3px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), 0 0, 0 0, 0 0;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat;
border: 1px solid var(--gk-gold-line);
border-radius: 2px;
outline: 1px solid rgba(201, 169, 97, .14);
outline-offset: -6px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(201, 169, 97, .07);
padding: 24px 28px 26px;
margin-bottom: 20px;
}
/* ---------- 板块标题：菱形花饰 + 金色细横线 ---------- */
html[data-template="gothic"] .card h2 {
font-family: var(--gk-serif);
font-size: 21px; font-weight: 700;
letter-spacing: .10em;
color: #E4D3A8;
padding: 0 0 13px 21px;
margin-bottom: 19px;
}
/* 行首一枚 45° 转过来的实心方块 = 菱形花饰 */
html[data-template="gothic"] .card h2::before {
content: '';
position: absolute; left: 2px; top: .46em;
width: 7px; height: 7px;
background: var(--gk-gold);
transform: rotate(45deg);
box-shadow: 0 0 9px rgba(201, 169, 97, .4);
}
/* 金色细横线：从左侧实、向右渐隐，像笔锋收尾 */
html[data-template="gothic"] .card h2::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
width: auto; height: 1px;
border-radius: 0;
background: linear-gradient(90deg,
rgba(201, 169, 97, .55) 0%,
rgba(201, 169, 97, .30) 26%,
rgba(201, 169, 97, .10) 72%,
transparent 100%);
}
/* ============================================================================
* 释义：中央那张主笺
* ----------------------------------------------------------------------------
* 全页最重的一块。边框提到 38% 金，内框 20%，底略偏暖 —— 像被翻得最多的一页。
* 起首行整行烫金：这是「重点文字烫金」最省力也最像古书的处理（卷首金线）。
* ==========================================================================*/
html[data-template="gothic"] .detail .card:has(.explanation) {
border-color: rgba(201, 169, 97, .46);
outline-color: rgba(201, 169, 97, .22);
background-image:
radial-gradient(circle at 50% 50%, rgba(238, 214, 154, .82) 0 1.8px, rgba(201, 169, 97, .14) 1.8px 3.1px, transparent 3.5px),
radial-gradient(circle at 50% 50%, rgba(238, 214, 154, .82) 0 1.8px, rgba(201, 169, 97, .14) 1.8px 3.1px, transparent 3.5px),
radial-gradient(circle at 50% 50%, rgba(238, 214, 154, .82) 0 1.8px, rgba(201, 169, 97, .14) 1.8px 3.1px, transparent 3.5px),
radial-gradient(circle at 50% 50%, rgba(238, 214, 154, .82) 0 1.8px, rgba(201, 169, 97, .14) 1.8px 3.1px, transparent 3.5px),
repeating-linear-gradient(90deg, rgba(255, 255, 255, .013) 0 1px, transparent 1px 4px),
radial-gradient(130% 110% at 22% -8%, rgba(201, 169, 97, .11), transparent 56%),
linear-gradient(174deg, #2E251C 0%, #271F17 48%, #1F1912 100%);
background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px, auto, auto, auto;
background-position: 3px 3px, calc(100% - 3px) 3px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), 0 0, 0 0, 0 0;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat;
padding: 28px 30px 30px;
box-shadow: 0 12px 30px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(201, 169, 97, .10);
}
html[data-template="gothic"] .explanation {
font-size: 18px; line-height: 2.0;
color: var(--gk-ink);
letter-spacing: .015em;
}
html[data-template="gothic"] .explanation::first-line {
/* 首行烫金：正文里没有内联标记可单独染，::first-line 是唯一的着力点。
色要压到 #D6AF5F 这一档 —— 再淡就和正文同色（等于没烫），再亮就成高亮笔。 */
color: #D6AF5F;
}
/* ---------- 字段：细金线分隔，字段名是篆额式的宋体小字 ---------- */
html[data-template="gothic"] .fields { gap: 0; }
html[data-template="gothic"] .field {
grid-template-columns: 78px minmax(0, 1fr);
gap: 16px;
padding: 15px 0;
border-top: 1px solid rgba(201, 169, 97, .10);
}
html[data-template="gothic"] .field:first-child { border-top: 0; padding-top: 2px; }
html[data-template="gothic"] .field dt {
font-family: var(--gk-serif);
font-size: 14px; font-weight: 700;
letter-spacing: .12em;
color: var(--gk-gold);
padding-top: 3px;
}
html[data-template="gothic"] .field dd {
color: var(--gk-ink);
font-size: 15.5px; line-height: 1.92;
}
/* 引文（出处 / 例句）：左侧一道金线代替底色，纸是用印的，不是贴的 */
html[data-template="gothic"] .field dd.quote {
background: rgba(201, 169, 97, .045);
border-left: 1px solid rgba(201, 169, 97, .42);
border-radius: 0;
padding: 11px 16px;
color: var(--gk-ink-2);
font-family: var(--gk-serif);
line-height: 1.9;
}
html[data-template="gothic"] .story {
font-family: var(--gk-serif);
font-size: 16px; line-height: 2.05;
color: var(--gk-ink);
letter-spacing: .015em;
}
/* 造句列表：序号用暗金，条目之间不留线 */
html[data-template="gothic"] .zju-list { gap: 11px; }
html[data-template="gothic"] .zju-list li { font-size: 15px; line-height: 1.9; color: var(--gk-ink-2); }
html[data-template="gothic"] .zju-list li::marker { color: var(--gk-gold-dim); font-weight: 700; }
/* ============================================================================
* 趣味延伸：唯一用墨紫的板块
* ----------------------------------------------------------------------------
* 整页都是褐与金，这里换一口冷紫，读者会「顿一下」—— 这就是板块呼吸。
* 紫要极暗（#2B2333），一亮就变夜店。
* ==========================================================================*/
html[data-template="gothic"] .detail .card.highlight {
background-color: var(--gk-purple);
background-image:
radial-gradient(120% 110% at 84% -10%, rgba(120, 96, 160, .20), transparent 62%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 4px),
linear-gradient(174deg, #322A3C 0%, #2B2333 56%, #241D2B 100%);
border-color: rgba(201, 169, 97, .30);
outline-color: rgba(201, 169, 97, .12);
}
html[data-template="gothic"] .detail .card.highlight h2 { color: #E4D3A8; }
html[data-template="gothic"] .detail .card.highlight p { color: var(--gk-ink-2); font-size: 15px; line-height: 1.9; }
html[data-template="gothic"] .gold {
color: var(--gk-gold-hi);
font-family: var(--gk-serif);
font-weight: 700;
letter-spacing: .06em;
}
html[data-template="gothic"] .xhy-list { gap: 7px; }
html[data-template="gothic"] .xhy-list li { color: var(--gk-ink-2); font-size: 15px; line-height: 1.9; }
html[data-template="gothic"] .xhy-list li::before {
content: '◆';
color: var(--gk-gold-dim);
font-size: 9px;
top: 3px;
}
/* ============================================================================
* 字义分解：四张羊皮笺，每张边缘纹样不同
* ----------------------------------------------------------------------------
* 这是全页唯一「四张要长得不一样」的地方。四张同款会像表格，四张太花会像贺卡。
* 做法：边框、底色都一致，只换顶端的雕花 —— 一枚实心菱 / 空心菱加两侧线 /
* 三连点 / 上下对称双菱。远看是一组，近看每张有自己的印。
* ==========================================================================*/
html[data-template="gothic"] .char-decompose { gap: 14px; align-items: stretch; }
html[data-template="gothic"] .char-item {
position: relative;
gap: 12px;
padding: 26px 16px 18px; /* 顶部留 26px 给雕花，不让它压到字 */
border: 1px solid rgba(201, 169, 97, .22);
border-radius: 2px;
background-color: #231C15;
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, .011) 0 1px, transparent 1px 4px),
radial-gradient(120% 100% at 50% -10%, rgba(201, 169, 97, .05), transparent 60%),
linear-gradient(168deg, #28211A 0%, #231C15 58%, #1D1710 100%);
box-shadow: 0 6px 16px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(201, 169, 97, .06);
}
/* ① 一枚实心菱（最朴素的一张） */
html[data-template="gothic"] .char-item::before {
content: '';
position: absolute; left: 50%; top: 12px;
width: 6px; height: 6px; margin-left: -3px;
background: var(--gk-gold);
transform: rotate(45deg);
}
/* ② 双细线 + 压在线上的一枚空心菱：像书眉上的「═◇═」 */
html[data-template="gothic"] .char-item:nth-child(4n+2)::before {
top: 13px;
width: 68px; height: 6px;
margin-left: -34px;
background: none;
transform: none;
box-shadow: none;
border-top: 1px solid rgba(201, 169, 97, .42);
border-bottom: 1px solid rgba(201, 169, 97, .16);
}
html[data-template="gothic"] .char-item:nth-child(4n+2)::after {
content: '';
position: absolute; left: 50%; top: 13px;
width: 5px; height: 5px;
margin-left: -2.5px;
background: #231C15;
border: 1px solid var(--gk-gold);
transform: rotate(45deg);
}
/* ③ 三连点：三枚小菱等距排开 */
html[data-template="gothic"] .char-item:nth-child(4n+3)::before {
width: 26px; height: 5px;
margin-left: -13px;
top: 13px;
background:
radial-gradient(circle at 50% 50%, var(--gk-gold) 0 1.5px, transparent 2px) 0 50% / 5px 5px no-repeat,
radial-gradient(circle at 50% 50%, var(--gk-gold) 0 1.5px, transparent 2px) 50% 50% / 5px 5px no-repeat,
radial-gradient(circle at 50% 50%, var(--gk-gold) 0 1.5px, transparent 2px) 100% 50% / 5px 5px no-repeat;
transform: none;
box-shadow: none;
}
/* ④ 上下双菱：首尾各一枚，把这张笺「夹」起来 */
html[data-template="gothic"] .char-item:nth-child(4n) { padding-bottom: 26px; }
html[data-template="gothic"] .char-item:nth-child(4n)::after {
content: '';
position: absolute; left: 50%; bottom: 12px;
width: 6px; height: 6px; margin-left: -3px;
background: var(--gk-gold-dim);
transform: rotate(45deg);
}
/* 单字：加粗放大的鎏金方牌（双内环 = 雕版压出来的台阶边） */
html[data-template="gothic"] .char-glyph {
align-self: flex-start;
width: 68px; height: 68px;
font-family: var(--gk-serif);
font-size: 42px; font-weight: 700;
line-height: 1;
color: #E8D3A0;
border: 1px solid var(--gk-gold-dim);
border-radius: 2px;
background: radial-gradient(circle at 50% 26%, #3C3324 0%, #2A2318 62%, #211B14 100%);
box-shadow:
inset 0 0 0 3px #1D1710,
inset 0 0 0 4px rgba(201, 169, 97, .26),
0 2px 9px rgba(0, 0, 0, .45);
text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 0 14px rgba(201, 169, 97, .18);
}
html[data-template="gothic"] .char-glyph a { color: inherit; }
html[data-template="gothic"] .char-glyph a:hover { color: var(--gk-gold-hi); }
html[data-template="gothic"] .char-pron {
font-size: 12.5px; line-height: 1.8;
color: var(--gk-ink-3);
letter-spacing: .01em;
}
html[data-template="gothic"] .char-extra { gap: 5px; }
html[data-template="gothic"] .char-extra-item {
font-size: 10.5px; font-weight: 500;
color: var(--gk-ink-2);
letter-spacing: .05em;
background: rgba(201, 169, 97, .07);
border: 1px solid rgba(201, 169, 97, .16);
border-radius: 1px;
padding: 1px 6px;
}
html[data-template="gothic"] .char-extra-sep { color: var(--gk-gold-dim); opacity: .7; }
html[data-template="gothic"] .char-shape {
font-size: 12.5px; line-height: 1.8;
color: var(--gk-ink-3);
border-top: 1px solid rgba(201, 169, 97, .12);
padding-top: 7px;
}
html[data-template="gothic"] .char-senses { gap: 8px; }
html[data-template="gothic"] .sn-num {
font-family: var(--gk-serif);
color: var(--gk-gold);
font-size: 12px; font-weight: 700;
}
html[data-template="gothic"] .sn-title {
font-family: var(--gk-serif);
font-size: 14px; font-weight: 700;
color: #DFCDA4;
}
html[data-template="gothic"] .sn-text {
font-size: 12.5px; line-height: 1.8;
color: var(--gk-ink-2);
}
html[data-template="gothic"] .expand-sense {
border: 1px solid rgba(201, 169, 97, .30);
border-radius: 2px;
background: none;
color: var(--gk-gold);
font-family: var(--gk-serif);
font-size: 12px; font-weight: 500;
letter-spacing: .10em;
padding: 6px 14px;
}
html[data-template="gothic"] .expand-sense:hover {
border-color: var(--gk-gold);
background: rgba(201, 169, 97, .08);
color: var(--gk-gold-hi);
}
html[data-template="gothic"] .expand-sense:active {
background: rgba(201, 169, 97, .16);
color: var(--gk-gold-hi);
}
/* ============================================================================
* 接龙：细长复古按钮 + 卷曲细线箭头
* ==========================================================================*/
html[data-template="gothic"] .tabs {
gap: 6px;
border-bottom: 1px solid rgba(201, 169, 97, .22);
margin-bottom: 20px;
}
html[data-template="gothic"] .tab {
padding: 8px 18px;
margin-bottom: -1px;
border: 1px solid transparent;
border-bottom: 0;
border-radius: 2px 2px 0 0;
background: none;
color: var(--gk-ink-3);
font-family: var(--gk-serif);
font-size: 14px; font-weight: 500;
letter-spacing: .08em;
transition: color .16s, background .16s, border-color .16s;
}
html[data-template="gothic"] .tab:hover {
color: var(--gk-ink-2);
background: rgba(201, 169, 97, .06);
}
html[data-template="gothic"] .tab.active {
color: var(--gk-gold-hi);
border-color: rgba(201, 169, 97, .28);
border-bottom-color: transparent;
background: linear-gradient(180deg, rgba(201, 169, 97, .13), rgba(201, 169, 97, .015));
}
html[data-template="gothic"] .jielong-chain { gap: 10px; align-items: center; }
html[data-template="gothic"] .jielong-node {
min-width: 98px;
padding: 9px 20px;
gap: 3px;
border: 1px solid rgba(201, 169, 97, .24);
border-radius: 2px;
background: linear-gradient(180deg, #272019 0%, #201A13 100%);
box-shadow: inset 0 1px 0 rgba(201, 169, 97, .08), 0 2px 6px rgba(0, 0, 0, .34);
transition: border-color .16s, box-shadow .16s, transform .12s;
}
html[data-template="gothic"] .jielong-node:hover {
border-color: rgba(201, 169, 97, .62);
box-shadow: inset 0 1px 0 rgba(201, 169, 97, .12), 0 6px 14px rgba(0, 0, 0, .42);
transform: translateY(-1px);
}
html[data-template="gothic"] .jielong-node.current {
border-color: rgba(201, 169, 97, .52);
background: linear-gradient(180deg, #33291B 0%, #2A2217 100%);
box-shadow: inset 0 0 0 1px rgba(201, 169, 97, .14), 0 3px 10px rgba(0, 0, 0, .4);
}
html[data-template="gothic"] .jielong-node .jw {
font-family: var(--gk-serif);
font-size: 16.5px; font-weight: 700;
letter-spacing: .06em;
color: #DCC79B;
}
html[data-template="gothic"] .jielong-node.current .jw { color: var(--gk-gold-hi); }
html[data-template="gothic"] .jielong-node .jp {
font-size: 10.5px;
color: var(--gk-ink-3);
letter-spacing: .05em;
}
html[data-template="gothic"] .jielong-node.current .jp { color: #B7A78B; }
/* 「→」抹掉，改画一条拱起的细线 + 一枚细箭头 —— 铜版画里的饰线箭头 */
html[data-template="gothic"] .jielong-arrow {
position: relative;
flex: 0 0 34px;
width: 34px; height: 14px;
font-size: 0; color: transparent;
overflow: visible;
}
html[data-template="gothic"] .jielong-arrow::before {
content: '';
position: absolute; left: 0; top: 3px;
width: 27px; height: 9px;
border-top: 1px solid rgba(201, 169, 97, .55);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
html[data-template="gothic"] .jielong-arrow::after {
content: '';
position: absolute; right: 1px; top: 3px;
width: 6px; height: 6px;
border-top: 1px solid rgba(201, 169, 97, .72);
border-right: 1px solid rgba(201, 169, 97, .72);
transform: rotate(45deg);
}
html[data-template="gothic"] .btn-regen {
padding: 7px 18px;
border: 1px solid rgba(201, 169, 97, .34);
border-radius: 2px;
background: none;
color: var(--gk-gold);
font-family: var(--gk-serif);
font-size: 13px; font-weight: 500;
letter-spacing: .14em; text-indent: .14em;
transition: background .16s, color .16s, border-color .16s;
}
html[data-template="gothic"] .btn-regen:hover {
border-color: var(--gk-gold);
background: rgba(201, 169, 97, .10);
color: var(--gk-gold-hi);
}
html[data-template="gothic"] .btn-regen:active {
background: rgba(201, 169, 97, .18);
border-color: var(--gk-gold);
}
html[data-template="gothic"] .btn-regen:disabled { opacity: .42; box-shadow: none; }
/* ============================================================================
* 相关成语：暗调书卷卡（低对比度，只给一条极淡的金边）
* ==========================================================================*/
html[data-template="gothic"] .related-grid { gap: 14px; }
html[data-template="gothic"] .related-item {
gap: 5px;
padding: 16px 18px 17px;
border: 1px solid rgba(201, 169, 97, .15);
border-radius: 2px;
background: linear-gradient(178deg, #221B14 0%, #1E1811 100%);
box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
transition: border-color .18s, background .18s, transform .12s, box-shadow .18s;
}
html[data-template="gothic"] .related-item:hover {
border-color: rgba(201, 169, 97, .48);
background: linear-gradient(178deg, #272018 0%, #221B14 100%);
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(0, 0, 0, .38);
}
html[data-template="gothic"] .related-item .rw {
font-family: var(--gk-serif);
font-size: 17.5px; font-weight: 700;
letter-spacing: .07em;
color: #DCC79B;
}
html[data-template="gothic"] .related-item .rw-py { color: var(--gk-ink-3); font-size: 11.5px; }
html[data-template="gothic"] .related-item small {
font-size: 12.5px; line-height: 1.6;
color: #9C8F77;
}
/* ============================================================================
* 胶囊 / 所属标签
* ==========================================================================*/
html[data-template="gothic"] .chip {
padding: 4px 14px;
border: 1px solid rgba(201, 169, 97, .20);
border-radius: 2px;
background: rgba(201, 169, 97, .06);
color: #D9C69B;
font-size: 13.5px;
transition: border-color .16s, background .16s, color .16s;
}
html[data-template="gothic"] a.chip:hover {
border-color: rgba(201, 169, 97, .60);
background: rgba(201, 169, 97, .12);
color: var(--gk-gold-hi);
}
html[data-template="gothic"] .chip.plain {
background: none;
border: 1px dashed rgba(201, 169, 97, .22);
color: var(--gk-ink-3);
}
html[data-template="gothic"] .syn-ant > strong {
font-family: var(--gk-serif);
color: var(--gk-gold);
font-weight: 700;
letter-spacing: .10em;
}
/* ============================================================================
* 首页
* ==========================================================================*/
html[data-template="gothic"] .hero { padding: 52px 0 26px; }
html[data-template="gothic"] .hero h1 {
font-family: var(--gk-serif);
font-size: 36px; font-weight: 700;
letter-spacing: .16em; text-indent: .16em;
margin-bottom: 12px;
color: #D3B36C;
background-image: linear-gradient(180deg, #F0DCA8 0%, #D3B36C 46%, #B08B44 100%);
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
html[data-template="gothic"] .hero h1 {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
}
html[data-template="gothic"] .hero-sub {
color: var(--gk-ink-3);
font-size: 15px;
letter-spacing: .06em;
margin-bottom: 26px;
}
html[data-template="gothic"] .hero-sub strong {
color: var(--gk-gold);
font-weight: 700;
letter-spacing: .04em;
}
html[data-template="gothic"] .hero-search input {
height: 46px;
border: 1px solid #3B3226;
border-radius: 2px 0 0 2px;
background: #0D0B08;
color: var(--gk-ink);
font-size: 15px;
box-shadow: inset 0 2px 7px rgba(0, 0, 0, .6);
}
html[data-template="gothic"] .hero-search input:focus {
border-color: var(--gk-gold-dim);
box-shadow: inset 0 2px 7px rgba(0, 0, 0, .6), 0 0 0 1px rgba(201, 169, 97, .20);
}
html[data-template="gothic"] .hero-search button {
height: 46px;
border-radius: 0 2px 2px 0;
background: linear-gradient(180deg, #D8BC7C 0%, #C0A055 48%, #B4913F 100%);
color: #211A10;
font-size: 15px; font-weight: 700;
letter-spacing: .14em; text-indent: .14em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34);
}
html[data-template="gothic"] .hero-search button:hover {
background: linear-gradient(180deg, #E5CB8C 0%, #CBA95C 48%, #BC9A45 100%);
}
html[data-template="gothic"] .letters { gap: 9px; }
html[data-template="gothic"] .letter {
border: 1px solid rgba(201, 169, 97, .18);
border-radius: 2px;
background: linear-gradient(180deg, #241D16 0%, #1E1811 100%);
color: #D9C69B;
font-family: var(--gk-serif);
font-size: 18px; font-weight: 700;
box-shadow: inset 0 1px 0 rgba(201, 169, 97, .07);
transition: border-color .16s, color .16s, background .16s;
}
html[data-template="gothic"] .letter small { color: var(--gk-ink-3); font-weight: 400; }
html[data-template="gothic"] .letter:hover {
border-color: rgba(201, 169, 97, .58);
background: linear-gradient(180deg, #2B231A 0%, #241D16 100%);
color: var(--gk-gold-hi);
}
html[data-template="gothic"] .letter.empty { color: var(--gk-ink-3); opacity: .38; }
html[data-template="gothic"] .hot-grid { gap: 13px; }
html[data-template="gothic"] .hot-item {
border: 1px solid rgba(201, 169, 97, .21);
border-radius: 2px;
background: linear-gradient(178deg, #221B14 0%, #1D1710 100%);
box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
transition: border-color .18s, transform .12s, box-shadow .18s;
}
html[data-template="gothic"] .hot-item:hover {
border-color: rgba(201, 169, 97, .46);
box-shadow: 0 8px 18px rgba(0, 0, 0, .36);
transform: translateY(-2px);
}
html[data-template="gothic"] .hot-word {
font-family: var(--gk-serif);
font-weight: 700;
letter-spacing: .07em;
color: #DCC79B;
}
html[data-template="gothic"] .hot-pinyin { color: var(--gk-gold-dim); font-size: 12px; letter-spacing: .06em; }
html[data-template="gothic"] .hot-expl { color: #9C8F77; }
/* ============================================================================
* 列表页 / 搜索页
* ==========================================================================*/
html[data-template="gothic"] .list-head h1 {
font-family: var(--gk-serif);
font-size: 27px; font-weight: 700;
letter-spacing: .12em;
color: #E0CEA4;
}
html[data-template="gothic"] .muted { color: var(--gk-ink-3); }
html[data-template="gothic"] .result-list {
border: 1px solid rgba(201, 169, 97, .20);
border-radius: 2px;
background: var(--gk-vel);
box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
}
html[data-template="gothic"] .result-item { border-bottom: 1px solid rgba(201, 169, 97, .09); padding: 14px 20px; }
html[data-template="gothic"] .result-item:hover { background: #2A2218; }
html[data-template="gothic"] .result-item .rw {
font-family: var(--gk-serif);
font-weight: 700;
letter-spacing: .06em;
color: #DCC79B;
}
html[data-template="gothic"] .result-item .rp { color: var(--gk-gold-dim); font-size: 12px; letter-spacing: .04em; }
html[data-template="gothic"] .result-item .re { color: #9C8F77; }
html[data-template="gothic"] .pager a {
border: 1px solid rgba(201, 169, 97, .26);
border-radius: 2px;
background: none;
color: #D9C69B;
font-family: var(--gk-serif);
transition: border-color .16s, color .16s, background .16s;
}
html[data-template="gothic"] .pager a:hover {
border-color: var(--gk-gold);
background: rgba(201, 169, 97, .09);
color: var(--gk-gold-hi);
}
html[data-template="gothic"] .pager span { color: var(--gk-ink-3); }
/* ---------- 404 / 空状态：一枚压进纸里的金字 ---------- */
html[data-template="gothic"] .not-found h1 {
font-family: var(--gk-serif);
font-size: 72px; font-weight: 700;
letter-spacing: .14em; text-indent: .14em;
color: #3A2F1D;
text-shadow: 0 1px 0 rgba(201, 169, 97, .30), 0 -1px 0 rgba(0, 0, 0, .5);
}
html[data-template="gothic"] .not-found p { color: var(--gk-ink-2); }
html[data-template="gothic"] .empty { color: var(--gk-ink-3); }
html[data-template="gothic"] .back a { color: var(--gk-gold); }
html[data-template="gothic"] .back a:hover { color: var(--gk-gold-hi); }
/* ============================================================================
* 页脚：全页最暗的一块，顶上一道金线收边
* ==========================================================================*/
html[data-template="gothic"] .site-footer {
position: relative;
background-color: #0C0A07;
background-image:
radial-gradient(600px 200px at 50% 0%, rgba(201, 169, 97, .05), transparent 78%),
linear-gradient(180deg, #12100C 0%, #0C0A07 58%, #070605 100%);
border-top: 1px solid rgba(201, 169, 97, .26);
box-shadow: inset 0 3px 0 rgba(201, 169, 97, .06);
color: #96896D;
margin-top: 38px;
}
html[data-template="gothic"] .footer-inner { padding: 28px 16px 24px; gap: 11px; }
html[data-template="gothic"] .footer-nav { gap: 24px; }
html[data-template="gothic"] .footer-nav a {
color: #B0A288;
font-size: 13px; font-weight: 400;
letter-spacing: .12em;
}
html[data-template="gothic"] .footer-nav a:hover { color: var(--gk-gold-hi); }
html[data-template="gothic"] .copyright {
font-size: 12px;
letter-spacing: .06em;
color: #8B7F66;
}
html[data-template="gothic"] .footer-hub { border-top-color: rgba(201, 169, 97, .10); }
html[data-template="gothic"] .footer-hub .fh-label { color: #7D7159; }
html[data-template="gothic"] .footer-hub a { color: #96896D; }
html[data-template="gothic"] .footer-hub a:hover { color: #C4B08A; }
/* 首页友情链接：跟着卡片走，标题弱一档 */
html[data-template="gothic"] .friend-links h2 { font-size: 17px; }
html[data-template="gothic"] .fl-list a { color: var(--gk-ink-2); }
html[data-template="gothic"] .fl-list a:hover { color: var(--gk-gold); }
/* 英汉 / 汉字页顺带收一下，避免深底上冒出浅底块 */
html[data-template="gothic"] .sense-pos {
background: rgba(201, 169, 97, .10);
color: var(--gk-gold);
border-radius: 1px;
}
html[data-template="gothic"] .sense-title { color: var(--gk-ink); }
html[data-template="gothic"] .example {
background: rgba(0, 0, 0, .22);
border-left: 1px solid rgba(201, 169, 97, .30);
border-radius: 0;
}
html[data-template="gothic"] .example-en { color: var(--gk-ink); }
html[data-template="gothic"] .example-cn { color: var(--gk-ink-3); }
html[data-template="gothic"] .pron-btn {
border-color: rgba(201, 169, 97, .40);
background: rgba(201, 169, 97, .10);
color: var(--gk-gold);
}
html[data-template="gothic"] .pron-btn:hover { background: rgba(201, 169, 97, .22); color: var(--gk-gold-hi); }
/* ============================================================================
* 响应式
* ==========================================================================*/
@media (max-width: 1024px) {
/* 字义卡改 flex 等分：4 字成语在 1024 两列会留半个空格，三字却能撑满 */
html[data-template="gothic"] .char-decompose { display: flex; flex-wrap: wrap; gap: 12px; }
html[data-template="gothic"] .char-decompose > .char-item { flex: 1 1 calc(50% - 6px); }
html[data-template="gothic"] .detail-head h1 { font-size: 40px; }
}
@media (max-width: 860px) {
html[data-template="gothic"] .detail-head { padding: 34px 22px 26px; }
html[data-template="gothic"] .detail-head h1 { font-size: 35px; letter-spacing: .12em; text-indent: .12em; }
html[data-template="gothic"] .detail-head::before { width: 158px; margin-left: -79px; }
html[data-template="gothic"] .card { padding: 20px 20px 22px; }
html[data-template="gothic"] .detail .card:has(.explanation) { padding: 24px 22px 26px; }
html[data-template="gothic"] .card h2 { font-size: 18.5px; }
html[data-template="gothic"] .related-grid { grid-template-columns: repeat(2, 1fr); }
html[data-template="gothic"] .hero h1 { font-size: 30px; }
}
@media (max-width: 640px) {
html[data-template="gothic"] .header-inner { min-height: 58px; }
html[data-template="gothic"] .logo { font-size: 18px; letter-spacing: .12em; text-indent: .12em; }
html[data-template="gothic"] .detail-head { padding: 30px 16px 24px; margin: 14px 0 16px; }
html[data-template="gothic"] .detail-head h1 {
font-size: clamp(26px, 8.2vw, 32px);
letter-spacing: .08em; text-indent: .08em;
}
html[data-template="gothic"] .detail-head::before { top: 12px; width: 130px; margin-left: -65px; }
html[data-template="gothic"] .detail-head::after { bottom: 9px; width: 96px; margin-left: -48px; }
html[data-template="gothic"] .pinyin { font-size: 12px; letter-spacing: .20em; text-indent: .20em; }
html[data-template="gothic"] .grid-figure { padding: 7px; margin: 4px auto 18px; }
html[data-template="gothic"] .tag { padding: 7px 20px; gap: 6px; }
html[data-template="gothic"] .tag-label { font-size: 9.5px; }
html[data-template="gothic"] .tag-value { font-size: 12px; }
html[data-template="gothic"] .field { grid-template-columns: 1fr; gap: 6px; padding: 13px 0; }
html[data-template="gothic"] .field dt { font-size: 13px; padding-top: 0; }
html[data-template="gothic"] .field dd.quote { padding: 10px 13px; font-size: 14.5px; }
html[data-template="gothic"] .explanation { font-size: 16.5px; line-height: 1.98; }
html[data-template="gothic"] .story { font-size: 15px; line-height: 1.95; }
html[data-template="gothic"] .card h2 { font-size: 17px; padding-left: 19px; }
html[data-template="gothic"] .card h2::before { width: 6px; height: 6px; top: .48em; }
html[data-template="gothic"] .tab { padding: 8px 13px; font-size: 13px; letter-spacing: .04em; }
html[data-template="gothic"] .jielong-node { min-width: 84px; padding: 8px 14px; }
html[data-template="gothic"] .jielong-node .jw { font-size: 15px; }
html[data-template="gothic"] .jielong-arrow { flex: 0 0 26px; width: 26px; }
html[data-template="gothic"] .jielong-arrow::before { width: 20px; }
html[data-template="gothic"] .related-grid { gap: 11px; }
html[data-template="gothic"] .related-item { padding: 13px 14px 14px; }
html[data-template="gothic"] .related-item .rw { font-size: 16px; }
html[data-template="gothic"] .hero { padding: 34px 0 18px; }
html[data-template="gothic"] .hero h1 { font-size: 25px; letter-spacing: .10em; text-indent: .10em; }
html[data-template="gothic"] .char-decompose { gap: 11px; }
html[data-template="gothic"] .char-item { padding: 22px 13px 16px; }
html[data-template="gothic"] .char-glyph { width: 58px; height: 58px; font-size: 36px; }
html[data-template="gothic"] .not-found h1 { font-size: 52px; }
html[data-template="gothic"] .site-footer { margin-top: 28px; }
html[data-template="gothic"] .footer-inner { padding: 22px 14px 18px; }
}
/* 480 以下改单列：宋体的字比黑体宽，360 屏两列时一行只剩七八个字，
读起来是一截一截的。这一版宁肯页面长一点，也要让每行读得下去。 */
@media (max-width: 480px) {
html[data-template="gothic"] .char-decompose {
flex-direction: column;
flex-wrap: nowrap;
}
html[data-template="gothic"] .char-decompose > .char-item { flex: 1 1 auto; }
html[data-template="gothic"] .char-item { padding: 24px 16px 18px; }
html[data-template="gothic"] .char-glyph { width: 60px; height: 60px; font-size: 38px; }
}
@media (max-width: 400px) {
html[data-template="gothic"] .detail-head h1 { font-size: clamp(24px, 8.4vw, 28px); }
html[data-template="gothic"] .tag { padding: 4px 11px; }
html[data-template="gothic"] .tag-value { font-size: 11.5px; }
html[data-template="gothic"] .char-item { padding: 21px 11px 15px; }
html[data-template="gothic"] .char-glyph { width: 52px; height: 52px; font-size: 32px; }
html[data-template="gothic"] .explanation { font-size: 16px; }
html[data-template="gothic"] .jielong-arrow { flex: 0 0 20px; width: 20px; }
html[data-template="gothic"] .jielong-arrow::before { width: 15px; height: 8px; }
}
/* ============================================================================
* 视觉模板：日式和纸侘寂风（html[data-template="wabi"]）
* ----------------------------------------------------------------------------
* 北极星：一间朝北的和室，窗纸滤过的光是灰的。案上一叠裁剩的奉书纸，
* 一枚盖淡了的朱印，一支写了半截的笔搁在角落。
*
* 跟前几版的关系：
* 书卷靠纸的暖、水彩靠浓度、工业靠重量、哥特靠金与暗的比值。
* 这一版靠**留白与不齐** —— 没有一个居中的块，没有一条对称的轴，
* 装饰只留在三处：印章、板块标题那道竖线、字义笺角落的一笔墨。
*
* 四条硬规则：
* 1. 只有两种纸：页纸 #F2EBDD、笺纸 #F8F3E9。卡片不许比页底更白，
* 白一档就变成「卡片 UI」，纸的感觉全丢。
* 2. 圆角最多 5px。和纸是刀裁的，边是直的，圆角只是「裁完手摸过」的柔，
* 不是胶囊。除了搜索按钮与发音钮，全站不做 pill。
* 3. 一屏最多两个强调色：淡柿（重点）与灰苔（引文 / 趣味延伸）。
* 第三个颜色一出现，侘寂就变成了杂货铺。
* 4. 装饰只用 1px 线。没有渐变花边、没有阴影堆叠、没有图标。
* 侘寂的「寂」是把东西减到只剩必要。
*
* 肌理：和纸纤维用内联 SVG 的 feTurbulence 生成（x 轴低频、y 轴高频，
* 拉出横向的丝），以极低 alpha 铺在背景最上层，纸的「不匀」全在这一层。
* 该层单独一条 background-image 声明 —— 万一 SVG 解析失败，整条被丢弃，
* 上一条纯渐变的声明留在原地，纸纹退化成细斜线，页面照常能看。
* 不新增图片文件、不改 HTML、子目录部署不用改路径。
*
* 字体：标题思源宋体（--wb-serif），正文思源黑体（--wb-sans）。
* ==========================================================================*/
html[data-template="wabi"] {
/* ---- 纸：两档，页纸略深、笺纸略浅 ---- */
--wb-paper: #EEE7D8; /* 整页底，砂米偏灰 */
--wb-paper-2: #E4DAC5; /* 页脚 / 凹处 */
--wb-sheet: #FAF5EA; /* 卡片，另裁的一张 */
--wb-sheet-2: #F5EEDE; /* 释义主笺，翻旧的一张 */
/* ---- 墨：炭灰三档 ---- */
--wb-ink: #33302B; /* 正文，笺面 11.9:1 */
--wb-ink-2: #4E4941; /* 7.9:1 */
--wb-ink-3: #68635A; /* 小字，笺面 5.3:1 / 页底 4.9:1 */
/* ---- 淡柿：重点 ---- */
--wb-kaki: #A0522C; /* 5.0:1，压在纸上够 AA */
--wb-kaki-soft: #B26437; /* 只做边框与大字 */
--wb-kaki-line: rgba(160, 82, 44, .18);
/* ---- 灰苔：引文与副板块 ---- */
--wb-moss: #65705D; /* 12px 小字要 4.8:1，不能再用 #6E7A66 */
--wb-moss-deep: #5F6B58; /* 5.0:1 */
--wb-moss-line: rgba(110, 122, 102, .22);
/* ---- 朱印：只给标题旁那一枚 ---- */
--wb-seal: #A9463A;
/* ---- 接管基础变量（漏改的规则也不会跳白） ---- */
--primary: #A0522C;
--primary-dark: #83401F;
--primary-soft: #F0E6D6;
--ink: #33302B;
--ink-soft: #4E4941;
--ink-faint: #68635A;
--bg: #F2EBDD;
--card: #F8F3E9;
--border: #E2D9C6;
--gold: #8A6A3E;
--radius: 4px;
--shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 4px 14px rgba(96, 82, 58, .045);
--wb-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
--wb-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei",
"Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-serif: var(--wb-serif);
--font-sans: var(--wb-sans);
/* ---- 纸面底纹（纯渐变版，SVG 那层叠在后面，失败就退回这一层） ---- */
--wb-weave:
repeating-linear-gradient(84deg, rgba(122, 106, 80, .024) 0 1px, transparent 1px 7px),
repeating-linear-gradient(96deg, rgba(122, 106, 80, .016) 0 1px, transparent 1px 11px),
radial-gradient(760px 480px at 16% 4%, rgba(255, 252, 244, .58), transparent 68%),
radial-gradient(680px 540px at 84% 32%, rgba(212, 198, 172, .30), transparent 72%),
radial-gradient(920px 620px at 46% 102%, rgba(204, 189, 162, .22), transparent 70%),
linear-gradient(180deg, #F2ECDF 0%, #EDE5D4 46%, #E7DECA 100%);
}
/* ---------- 底：和纸 ----------
* 纤维层最上、渐变垫底。feTurbulence 的 x 轴频率压到 0.016、y 轴拉到 0.62，
* 噪声就被「拉成横丝」而不是雪花点 —— 这是和纸与牛皮纸的分界。 */
html[data-template="wabi"] body {
background-color: var(--wb-paper);
background-image: var(--wb-weave);
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.62' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.44 0 0 0 0 0.38 0 0 0 0 0.29 0 0 0 0.085 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23w)'/%3E%3C/svg%3E"),
var(--wb-weave);
/* 短页（404）也让页脚贴到视口底，不留一截空纸 */
display: flex;
flex-direction: column;
min-height: 100vh;
color: var(--wb-ink);
}
html[data-template="wabi"] main { flex: 1 0 auto; min-width: 0; }
/* 选中：像用淡柿在纸上划了一道 */
html[data-template="wabi"] ::selection {
background: rgba(160, 82, 44, .16);
color: #2C2924;
}
/* 焦点环：全站唯一允许出现的「框」 */
html[data-template="wabi"] a:focus-visible,
html[data-template="wabi"] button:focus-visible,
html[data-template="wabi"] input:focus-visible {
outline: 2px solid rgba(160, 82, 44, .45);
outline-offset: 2px;
}
/* ============================================================================
* 顶部导航：一行字，一条线
* ----------------------------------------------------------------------------
* 「无多余装饰」不是「什么都不做」—— 是只留两件事：字距，和一条灰线。
* 底色带 6% 的透明 + 一点点 blur，滚动时下面的纸纹会从导航底下透出来，
* 像隔着窗纸。blur 不支持的浏览器只少一点通透感，底色仍然压得住字。
* ==========================================================================*/
html[data-template="wabi"] .site-header {
background-color: #EFE8DA;
background-color: rgba(239, 232, 218, .93);
border-bottom: 1px solid rgba(58, 54, 46, .13);
box-shadow: none;
-webkit-backdrop-filter: saturate(115%) blur(7px);
backdrop-filter: saturate(115%) blur(7px);
}
html[data-template="wabi"] .header-inner { min-height: 62px; gap: 26px; }
/* 站名：宋体、字距放开、底下什么都不加 */
html[data-template="wabi"] .logo {
font-family: var(--wb-serif);
font-size: 19px; font-weight: 600;
letter-spacing: .22em; text-indent: .22em;
color: #2F2C27;
text-shadow: none;
}
html[data-template="wabi"] .logo::after { content: none; display: none; }
html[data-template="wabi"] .logo:hover { color: var(--wb-kaki); }
html[data-template="wabi"] .nav { gap: 2px; }
html[data-template="wabi"] .nav a {
position: relative;
color: #4E4941;
font-size: 13.5px; font-weight: 400;
letter-spacing: .12em;
padding: 7px 11px;
border-radius: 0;
transition: color .18s;
}
html[data-template="wabi"] .nav a::after {
content: '';
position: absolute; left: 11px; right: 11px; bottom: 2px;
height: 1px;
background: rgba(58, 54, 46, .34);
opacity: 0;
transform: scaleX(.4);
transform-origin: left center;
transition: opacity .2s, transform .24s;
}
html[data-template="wabi"] .nav a:hover { color: #2F2C27; background: none; }
html[data-template="wabi"] .nav a:hover::after { opacity: 1; transform: scaleX(1); }
/* 搜索框：纸上划出的一道浅槽；按钮是一枚炭灰的木牌 */
html[data-template="wabi"] .search-box input {
height: 36px;
border: 1px solid rgba(58, 54, 46, .16);
border-radius: 2px;
background: rgba(255, 253, 247, .58);
color: var(--wb-ink);
font-size: 13.5px; letter-spacing: .02em;
box-shadow: none;
transition: border-color .18s, background .18s;
}
html[data-template="wabi"] .search-box input::placeholder { color: #736D5E; }
html[data-template="wabi"] .search-box input:focus {
border-color: rgba(160, 82, 44, .42);
background: rgba(255, 253, 247, .88);
box-shadow: 0 0 0 3px rgba(160, 82, 44, .07);
}
html[data-template="wabi"] .search-box button {
height: 36px; padding: 0 17px;
border: 1px solid #3A3630;
border-radius: 2px;
background: #3A3630;
color: #F6F0E4;
font-size: 13px; font-weight: 500;
letter-spacing: .16em; text-indent: .16em;
box-shadow: none;
transition: background .18s, border-color .18s;
}
html[data-template="wabi"] .search-box button:hover {
background: #262420;
border-color: #262420;
}
/* 联想下拉：一张抽出来的半透明笺 */
html[data-template="wabi"] .suggest {
background: #FBF7EF;
border: 1px solid rgba(58, 54, 46, .14);
border-radius: 2px;
box-shadow: 0 12px 26px rgba(80, 68, 48, .13);
}
html[data-template="wabi"] .suggest a {
color: var(--wb-ink-2);
font-size: 13.5px;
border-bottom: 1px solid rgba(58, 54, 46, .06);
}
html[data-template="wabi"] .suggest a:hover,
html[data-template="wabi"] .suggest a.active {
background: rgba(160, 82, 44, .06);
color: var(--wb-kaki);
}
html[data-template="wabi"] .suggest .s-pinyin { color: var(--wb-ink-3); }
/* ============================================================================
* 面包屑：小字、字距，只留一个「/」做分隔
* ==========================================================================*/
html[data-template="wabi"] .breadcrumb {
padding: 20px 0 0;
font-size: 11.5px; letter-spacing: .10em;
}
html[data-template="wabi"] .breadcrumb li { color: var(--wb-ink-3); }
html[data-template="wabi"] .breadcrumb li + li::before {
content: "/"; margin-right: 9px;
color: #B6AC98;
font-size: 10px;
}
html[data-template="wabi"] .breadcrumb a { color: var(--wb-ink-3); }
html[data-template="wabi"] .breadcrumb a:hover { color: var(--wb-kaki); }
html[data-template="wabi"] .breadcrumb li[aria-current] { color: #4E4941; }
/* ============================================================================
* 标题区：左起的题签，右侧一枚淡朱印
* ----------------------------------------------------------------------------
* 全站唯一一处「不居中」的标题 —— 侘寂的不对称从这里开始。
* 标题左对齐之后，右半页自然空出来，这半页白就是「余白」，不需要再加东西。
*
* 印章用 ::after 挂在 h1 上（h1 改 inline-block），所以它永远跟着标题走：
* 四字成语时贴在第四字右侧，八字成语时自动退到更右 —— 像落款盖在句末。
* 印是淡的：1.5px 朱线 + 10% 的底，字也只用 5.2:1 那一档朱红，不抢题名。
* ==========================================================================*/
html[data-template="wabi"] .detail-head {
position: relative;
text-align: left;
padding: 44px 0 20px;
margin: 0 0 4px;
border-bottom: 1px solid rgba(58, 54, 46, .075);
}
html[data-template="wabi"] .detail-head h1 {
position: relative;
display: inline-block;
max-width: calc(100% - 68px); /* 给印章留出位置，超长标题宁可折行也不溢出 */
vertical-align: top;
font-family: var(--wb-serif);
font-size: 46px; font-weight: 500;
line-height: 1.32;
letter-spacing: .13em;
color: #2F2C27;
margin: 0;
text-shadow: none;
}
/* 那枚印：竖排两字、微旋 2°，印泥不匀用两层 radial 做出来 */
html[data-template="wabi"] .detail-head h1::after {
content: "成\00000a語";
position: absolute;
right: -62px; top: 50%;
width: 46px; height: 46px;
margin-top: -22px;
display: flex; align-items: center; justify-content: center;
white-space: pre; /* content 里的 \A 才会真的换行 */
text-align: center;
font-family: var(--wb-serif);
font-size: 14px; font-weight: 500;
line-height: 1.14; /* 印里的字是挤着的，行距一松就成「公司 logo」 */
letter-spacing: 0;
color: var(--wb-seal);
background-color: rgba(169, 70, 58, .09);
background-image:
radial-gradient(70% 60% at 34% 26%, rgba(169, 70, 58, .10), transparent 72%),
radial-gradient(60% 55% at 72% 76%, rgba(169, 70, 58, .09), transparent 70%);
border: 1.5px solid rgba(169, 70, 58, .58);
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(255, 253, 247, .45);
transform: rotate(2.2deg);
pointer-events: none;
}
html[data-template="wabi"] .detail-head .head-sub {
justify-content: flex-start;
gap: 10px;
padding-top: 13px;
}
html[data-template="wabi"] .pinyin {
font-family: var(--wb-serif);
font-size: 13px; font-style: normal;
color: var(--wb-ink-3);
letter-spacing: .26em; text-indent: .26em;
padding: 0;
border: 0;
background: none;
}
/* ============================================================================
* 田字格：贴在题签左下角的一张小纸
* ----------------------------------------------------------------------------
* 那张 SVG 自带白底。这里是浅纸，白底不至于突兀，但仍比纸面亮一档 ——
* 用 multiply 把白滤掉，只留笔画的墨，像印在纸上而不是贴上去。
* 靠左放（不居中），和标题同一条左轴 —— 这是页面上唯一成立的对齐。
* ==========================================================================*/
html[data-template="wabi"] .grid-figure {
width: fit-content;
justify-content: flex-start;
margin: 16px 0 20px;
padding: 0;
border: 0;
background: none;
}
/* 那张 SVG 自带白底：multiply 把白滤成纸色，只留笔画。
saturate 压到 62% —— SVG 里的朱红格线与绿拼音是纯色，4 色同框太跳；
压过之后红偏赭、绿偏苔，正好落进这套配色里。 */
html[data-template="wabi"] .grid-img {
border-radius: 0;
display: block;
mix-blend-mode: multiply;
filter: saturate(.62) sepia(.06);
opacity: .94;
}
/* ============================================================================
* 属性标签：极简细边框的小笺条
* ----------------------------------------------------------------------------
* 全部挤成一排 pill 是最偷懒的做法。这里做「笺条」：方角、1px 灰线、
* 半透明的纸白底，属性名与值之间立一道更细的竖线 —— 竖线一竖，
* 才像手写的词条卡，而不是按钮。
* ==========================================================================*/
html[data-template="wabi"] .tags {
justify-content: flex-start;
gap: 9px;
padding: 0 0 6px;
}
html[data-template="wabi"] .tag {
gap: 0;
padding: 5px 12px;
border: 1px solid rgba(58, 54, 46, .15);
border-radius: 2px;
background: rgba(255, 253, 246, .38);
box-shadow: none;
}
html[data-template="wabi"] .tag-label {
color: #6B6459;
font-size: 10.5px; font-weight: 400;
letter-spacing: .10em;
padding-right: 9px;
margin-right: 9px;
border-right: 1px solid rgba(58, 54, 46, .13);
}
html[data-template="wabi"] .tag-value {
color: #3A362F;
font-family: var(--wb-serif);
font-size: 13px; font-weight: 600;
letter-spacing: .05em;
}
/* ============================================================================
* 卡片：一张和纸
* ----------------------------------------------------------------------------
* 边是 1px 的淡灰线，不是阴影 —— 纸贴在纸上，分界只靠一道极浅的压痕。
* 圆角 5px，是刀裁之后手抚过的那种圆，不是气泡。
* 卡上也铺一层纤维（同一张 SVG，尺寸放大到 300px、位置错开），
* 所以每张卡的纹理都不重样，但看不出是「不同的图」。
* ==========================================================================*/
html[data-template="wabi"] .card {
position: relative;
background-color: var(--wb-sheet);
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.62' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.44 0 0 0 0 0.38 0 0 0 0 0.29 0 0 0 0.085 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23w)'/%3E%3C/svg%3E"),
radial-gradient(130% 100% at 8% 0%, rgba(255, 254, 248, .72), transparent 60%),
linear-gradient(178deg, #FCF8F0 0%, #FAF5EA 58%, #F7F1E4 100%);
background-size: 300px 300px, auto, auto;
background-position: 0 0, 0 0, 0 0;
background-repeat: repeat, no-repeat, no-repeat;
border: 1px solid rgba(58, 54, 46, .095);
border-radius: 5px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .56),
0 4px 14px rgba(96, 82, 58, .045);
padding: 26px 32px 28px 34px; /* 左重右轻：一页纸的装订边 */
margin-bottom: 22px;
}
/* 每张卡错开纸纹，四张一循环 */
html[data-template="wabi"] .detail > .card:nth-of-type(3n+2) { background-position: 46px 62px, 0 0, 0 0; }
html[data-template="wabi"] .detail > .card:nth-of-type(3n) { background-position: 118px 24px, 0 0, 0 0; }
/* ---------- 板块标题：一道短淡墨竖线 ----------
* 竖线立在字左边，比字高一点点（1.1em），像书眉上的界栏。
* 标题字的左边缘退出 16px，让竖线「悬挂」在外面 —— 日式笺注的排法。
* 下面那道横线极淡、右端渐隐，只用来托住标题，不做花边。 */
html[data-template="wabi"] .card h2 {
font-family: var(--wb-serif);
font-size: 19px; font-weight: 600;
letter-spacing: .07em;
color: #2F2C27;
padding: 0 0 13px 16px;
margin-bottom: 19px;
}
html[data-template="wabi"] .card h2::before {
content: '';
position: absolute; left: 0; top: .16em;
width: 3px; height: 1.2em;
background: #3A3630;
opacity: .55;
border-radius: 1px;
}
html[data-template="wabi"] .card h2::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
width: auto; height: 1px;
border-radius: 0;
background: linear-gradient(90deg,
rgba(58, 54, 46, .16) 0%,
rgba(58, 54, 46, .08) 42%,
rgba(58, 54, 46, .02) 76%,
transparent 100%);
}
/* ============================================================================
* 释义：全页最重的一张（翻旧了的那页）
* ----------------------------------------------------------------------------
* 比别的卡深半档、暖半档 —— 被翻得最多的一页总是最先黄。
* 边框略深，内边距再放大一圈，行高到 2.1：慢读的版式不能省行距。
* 重点：正文是 e() 转义的纯文本，没有内联标记可染，首行是唯一的着力点。
* ==========================================================================*/
html[data-template="wabi"] .detail .card:has(.explanation) {
background-color: var(--wb-sheet-2);
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.62' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.44 0 0 0 0 0.38 0 0 0 0 0.29 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23w)'/%3E%3C/svg%3E"),
radial-gradient(120% 110% at 6% -8%, rgba(255, 250, 236, .78), transparent 58%),
linear-gradient(176deg, #F8F1E1 0%, #F5EDDC 52%, #F1E8D6 100%);
background-size: 280px 280px, auto, auto;
background-position: 84px 12px, 0 0, 0 0;
background-repeat: repeat, no-repeat, no-repeat;
border-color: rgba(58, 54, 46, .12);
padding: 32px 36px 34px 38px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .5),
0 5px 16px rgba(96, 82, 58, .055);
}
html[data-template="wabi"] .explanation {
font-size: 18px; line-height: 2.1;
color: var(--wb-ink);
letter-spacing: .012em;
}
html[data-template="wabi"] .explanation::first-line { color: var(--wb-kaki); }
/* ---------- 字段：极细的分隔线，字段名是一枚苔色小印 ---------- */
html[data-template="wabi"] .fields { gap: 0; }
html[data-template="wabi"] .field {
grid-template-columns: 74px minmax(0, 1fr);
gap: 18px;
padding: 15px 0;
border-top: 1px solid rgba(58, 54, 46, .065);
}
html[data-template="wabi"] .field:first-child { border-top: 0; padding-top: 1px; }
html[data-template="wabi"] .field dt {
font-family: var(--wb-serif);
font-size: 13px; font-weight: 600;
letter-spacing: .18em;
color: var(--wb-moss-deep);
padding-top: 4px;
}
html[data-template="wabi"] .field dd {
color: #3A362F;
font-size: 15.5px; line-height: 1.98;
}
/* 引文（出处 / 例句）：一道苔色细线代替底色，纸是印上去的，不是贴的 */
html[data-template="wabi"] .field dd.quote {
max-width: 38em; /* 56 字一行的引文读不动；收到 38 字，右侧余白当留白 */
background: rgba(110, 122, 102, .06);
border-left: 2px solid rgba(110, 122, 102, .32);
border-radius: 0 3px 3px 0;
padding: 12px 18px;
color: #4A463E;
font-family: var(--wb-serif);
line-height: 1.95;
}
html[data-template="wabi"] .story {
max-width: 44em; /* 57 字一行，宋体读到头会串行；44 字是慢读的舒适区 */
font-family: var(--wb-serif);
font-size: 16px; line-height: 2.1;
color: #3A362F;
letter-spacing: .012em;
}
/* 造句：序号用淡柿，条目之间留白不留线 */
html[data-template="wabi"] .zju-list { gap: 12px; }
html[data-template="wabi"] .zju-list li {
max-width: 42em; /* 造句最长会到 63 字，收到 42 字 */
font-size: 15px; line-height: 1.96;
color: #4A463E;
}
html[data-template="wabi"] .zju-list li::marker { color: #B26437; font-weight: 600; }
/* ============================================================================
* 趣味延伸：全页唯一允许出现的第二块色 —— 灰苔
* ----------------------------------------------------------------------------
* 整页都是砂米与淡柿，这里换成苔绿，读者会「顿一下」，这就是板块呼吸。
* 苔要压得很灰（#6E7A66 只出现在边框与字上，底只用 6% 的调子）。
* ==========================================================================*/
html[data-template="wabi"] .detail .card.highlight {
background-color: #EDEFE5;
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.62' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.42 0 0 0 0 0.34 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23w)'/%3E%3C/svg%3E"),
radial-gradient(120% 110% at 88% -10%, rgba(110, 122, 102, .13), transparent 62%),
linear-gradient(176deg, #F0F2E8 0%, #EBEEE2 56%, #E5E9DB 100%);
background-size: 300px 300px, auto, auto;
background-position: 52px 88px, 0 0, 0 0;
background-repeat: repeat, no-repeat, no-repeat;
border-color: rgba(110, 122, 102, .22);
}
html[data-template="wabi"] .detail .card.highlight h2 { color: #2F3A2A; }
html[data-template="wabi"] .detail .card.highlight p {
color: #414B3B;
font-size: 15px; line-height: 1.95;
}
html[data-template="wabi"] .gold {
color: var(--wb-kaki);
font-family: var(--wb-serif);
font-weight: 600;
letter-spacing: .06em;
}
html[data-template="wabi"] .xhy-list { gap: 9px; }
html[data-template="wabi"] .xhy-list li {
color: #414B3B;
font-size: 15px; line-height: 1.95;
padding-left: 16px;
}
/* 不用菱形点 —— 一枚 3px 的苔色小方，像笔尖顿了一下 */
html[data-template="wabi"] .xhy-list li::before {
content: '';
position: absolute; left: 1px; top: .78em;
width: 3px; height: 3px;
background: rgba(95, 107, 88, .7);
font-size: 0;
border-radius: .5px;
}
/* ============================================================================
* 字义分解：四张和纸小笺
* ----------------------------------------------------------------------------
* 四张必须有极细的色差 —— 同一刀纸裁出来的四张，本来就不会一样白。
* 做法：只动渐变的三档色与纸纹的偏移（0 / 37px / 74px / 111px），
* 远看是一叠，近看每张的纸纹都错开。
* 角落那一笔墨：不是圆点、不是菱形，是一条带弧的短线 —— 笔尖按下再提起的形状。
* 四张分别落在右下、右上、左下、右下偏内，位置不齐才像手画的。
* ==========================================================================*/
html[data-template="wabi"] .char-decompose {
/* auto-fit 而不是 4 个 1fr：三字成语只有三张笺，四列网格会空出一格；
auto-fit 折叠空轨道，三张时平分三列，四张时仍是四列。 */
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 15px;
align-items: stretch;
}
html[data-template="wabi"] .char-item {
position: relative;
overflow: hidden; /* 墨痕贴边时裁在笺内，不出格 */
gap: 12px;
padding: 20px 16px 22px;
border: 1px solid rgba(58, 54, 46, .10);
border-radius: 3px;
background-color: #F8F3E9;
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.62' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.44 0 0 0 0 0.38 0 0 0 0 0.29 0 0 0 0.095 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23w)'/%3E%3C/svg%3E"),
linear-gradient(170deg, #F9F4EA 0%, #F6F0E4 100%);
background-size: 240px 240px, auto;
background-position: 0 0, 0 0;
background-repeat: repeat, no-repeat;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* 四张的四档色差 + 四段错开的纸纹 */
html[data-template="wabi"] .char-item:nth-child(4n+1) {
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.62' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.44 0 0 0 0 0.38 0 0 0 0 0.29 0 0 0 0.095 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23w)'/%3E%3C/svg%3E"),
linear-gradient(170deg, #FCF8F1 0%, #F9F4E9 100%);
background-position: 0 0, 0 0;
}
html[data-template="wabi"] .char-item:nth-child(4n+2) {
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.62' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.46 0 0 0 0 0.40 0 0 0 0 0.30 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23w)'/%3E%3C/svg%3E"),
linear-gradient(168deg, #F9F3E5 0%, #F6EFDC 100%);
background-position: 37px 61px, 0 0;
}
html[data-template="wabi"] .char-item:nth-child(4n+3) {
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.62' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.43 0 0 0 0 0.42 0 0 0 0 0.34 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23w)'/%3E%3C/svg%3E"),
linear-gradient(172deg, #FBF7F0 0%, #F8F4EA 100%);
background-position: 74px 22px, 0 0;
}
html[data-template="wabi"] .char-item:nth-child(4n) {
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.62' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45 0 0 0 0 0.39 0 0 0 0 0.28 0 0 0 0.105 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23w)'/%3E%3C/svg%3E"),
linear-gradient(166deg, #F6EFDF 0%, #F2E9D5 100%);
background-position: 111px 96px, 0 0;
}
/* 角落那一笔墨：一条 2px 的弧线，端点收细 —— 笔按下、划过、抬起 */
html[data-template="wabi"] .char-item::after {
content: '';
position: absolute;
pointer-events: none;
width: 27px; height: 10px;
right: 13px; bottom: 11px;
border-top: 2px solid rgba(58, 54, 46, .30);
border-radius: 74% 26% 0 0 / 100% 100% 0 0;
transform: rotate(-9deg);
}
html[data-template="wabi"] .char-item:nth-child(4n+2)::after {
right: auto; left: 14px; bottom: auto; top: 12px;
width: 20px; height: 7px;
border-top-width: 1.5px;
border-top-color: rgba(58, 54, 46, .26);
border-radius: 20% 80% 0 0 / 100% 100% 0 0;
transform: rotate(11deg);
}
html[data-template="wabi"] .char-item:nth-child(4n+3)::after {
right: 15px; bottom: 12px;
width: 17px; height: 13px;
border-top-width: 2px;
border-top-color: rgba(58, 54, 46, .28);
border-radius: 96% 4% 0 0 / 100% 100% 0 0;
transform: rotate(-26deg);
}
html[data-template="wabi"] .char-item:nth-child(4n)::after {
right: 16px; bottom: 10px;
width: 32px; height: 8px;
border-top-width: 1.6px;
border-top-color: rgba(58, 54, 46, .25);
border-radius: 56% 44% 0 0 / 100% 100% 0 0;
transform: rotate(-3deg);
}
/* 单字：不描框、不填底 —— 就是一枚放大写下的字，下面一道短横托着 */
html[data-template="wabi"] .char-glyph {
position: relative;
align-self: flex-start;
width: 62px; height: 62px;
font-family: var(--wb-serif);
font-size: 40px; font-weight: 500;
line-height: 1;
color: #2C2924;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
text-shadow: none;
}
html[data-template="wabi"] .char-glyph a { color: inherit; }
html[data-template="wabi"] .char-glyph a:hover { color: var(--wb-kaki); }
html[data-template="wabi"] .char-glyph::after {
content: '';
position: absolute; left: 2px; bottom: 4px;
width: 30px; height: 1.5px;
background: rgba(58, 54, 46, .22);
}
html[data-template="wabi"] .char-pron {
font-size: 12.5px; line-height: 1.85;
color: var(--wb-ink-3);
letter-spacing: .01em;
}
html[data-template="wabi"] .char-extra { gap: 5px; }
html[data-template="wabi"] .char-extra-item {
font-size: 10.5px; font-weight: 400;
color: #5F6B58;
letter-spacing: .06em;
background: rgba(110, 122, 102, .07);
border: 1px solid rgba(110, 122, 102, .16);
border-radius: 1px;
padding: 1px 6px;
}
html[data-template="wabi"] .char-extra-sep { color: #A9A08C; opacity: .8; }
html[data-template="wabi"] .char-shape {
font-size: 13px; line-height: 1.8;
color: var(--wb-ink-3);
border-top: 1px solid rgba(58, 54, 46, .07);
padding-top: 8px;
}
html[data-template="wabi"] .char-senses { gap: 9px; }
html[data-template="wabi"] .sn-num {
font-family: var(--wb-serif);
color: var(--wb-kaki);
font-size: 12px; font-weight: 600;
}
html[data-template="wabi"] .sn-title {
font-family: var(--wb-serif);
font-size: 14px; font-weight: 600;
color: #33302B;
}
html[data-template="wabi"] .sn-text {
font-size: 13px; line-height: 1.8;
color: #4E4941;
}
html[data-template="wabi"] .expand-sense {
border: 1px solid rgba(58, 54, 46, .18);
border-radius: 2px;
background: rgba(255, 253, 246, .4);
color: #5F5A4F;
font-size: 12px;
letter-spacing: .08em;
padding: 6px 14px;
transition: border-color .18s, color .18s, background .18s;
}
html[data-template="wabi"] .expand-sense:hover {
border-color: rgba(160, 82, 44, .40);
background: rgba(160, 82, 44, .05);
color: var(--wb-kaki);
}
html[data-template="wabi"] .expand-sense:active {
background: rgba(160, 82, 44, .10);
color: #83401F;
}
/* ============================================================================
* 接龙：细长笺式按钮 + 手绘淡墨箭头
* ----------------------------------------------------------------------------
* 节点不做方牌，做「细长的笺」：横向拉长、纵向压扁、方角，
* 一眼看去像一排签条，而不是一排按钮。
* 箭头把「→」抹掉重画：一条略弯的细线 + 一枚微翘的尖。
* 线不是直线 —— 直线是印刷，弯一点才是手画。
* ==========================================================================*/
html[data-template="wabi"] .tabs {
gap: 4px;
border-bottom: 1px solid rgba(58, 54, 46, .10);
margin-bottom: 20px;
}
html[data-template="wabi"] .tab {
padding: 8px 15px;
margin-bottom: -1px;
border: 0;
border-bottom: 1.5px solid transparent;
border-radius: 0;
background: none;
color: #6B6459;
font-family: var(--wb-serif);
font-size: 14px; font-weight: 400;
letter-spacing: .10em;
transition: color .18s, border-color .18s;
}
html[data-template="wabi"] .tab:hover { color: #3A362F; background: none; }
html[data-template="wabi"] .tab.active {
color: #2F2C27;
font-weight: 600;
border-bottom-color: rgba(160, 82, 44, .62);
background: none;
}
html[data-template="wabi"] .jielong-chain { gap: 11px; align-items: center; }
html[data-template="wabi"] .jielong-node {
min-width: 104px;
padding: 6px 22px 7px;
gap: 2px;
border: 1px solid rgba(58, 54, 46, .14);
border-radius: 2px;
background-color: rgba(255, 253, 246, .5);
background-image: linear-gradient(180deg, #FCF8F0 0%, #F6F0E3 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
transition: border-color .18s, background .18s, box-shadow .18s;
}
html[data-template="wabi"] .jielong-node:hover {
border-color: rgba(58, 54, 46, .30);
background-image: linear-gradient(180deg, #FDFAF4 0%, #F8F2E6 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 8px rgba(96, 82, 58, .06);
transform: none;
}
/* 当前词：左边压一道柿色，像用笔在签条上划了一下 */
html[data-template="wabi"] .jielong-node.current {
border-color: rgba(160, 82, 44, .30);
background-image: linear-gradient(180deg, #FBF4E8 0%, #F6EDDD 100%);
box-shadow: inset 3px 0 0 rgba(160, 82, 44, .72);
}
html[data-template="wabi"] .jielong-node .jw {
font-family: var(--wb-serif);
font-size: 16px; font-weight: 600;
letter-spacing: .08em;
color: #33302B;
}
html[data-template="wabi"] .jielong-node.current .jw { color: #83401F; }
html[data-template="wabi"] .jielong-node .jp {
font-size: 10.5px;
color: var(--wb-ink-3);
letter-spacing: .05em;
}
html[data-template="wabi"] .jielong-node.current .jp { color: #7E6045; }
/* 「→」抹掉，改画一条微弯的淡墨线 + 一枚微翘的尖 */
html[data-template="wabi"] .jielong-arrow {
position: relative;
flex: 0 0 34px;
width: 34px; height: 14px;
font-size: 0; color: transparent;
overflow: visible;
}
html[data-template="wabi"] .jielong-arrow::before {
content: '';
position: absolute; left: 1px; top: 5px;
width: 26px; height: 6px;
border-top: 1.6px solid rgba(58, 54, 46, .44);
border-radius: 100% 40% 0 0 / 100% 100% 0 0;
transform: rotate(-1.6deg);
}
html[data-template="wabi"] .jielong-arrow::after {
content: '';
position: absolute; right: 2px; top: 3px;
width: 6.5px; height: 6.5px;
border-top: 1.6px solid rgba(58, 54, 46, .56);
border-right: 1.6px solid rgba(58, 54, 46, .56);
border-radius: 1px;
transform: rotate(39deg);
}
html[data-template="wabi"] .btn-regen {
padding: 7px 18px;
border: 1px solid rgba(58, 54, 46, .18);
border-radius: 2px;
background: rgba(255, 253, 246, .4);
color: #4E4941;
font-family: var(--wb-serif);
font-size: 13px; font-weight: 400;
letter-spacing: .14em; text-indent: .14em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="wabi"] .btn-regen:hover {
border-color: rgba(160, 82, 44, .42);
background: rgba(160, 82, 44, .05);
color: var(--wb-kaki);
}
html[data-template="wabi"] .btn-regen:active {
background: rgba(160, 82, 44, .10);
border-color: rgba(160, 82, 44, .50);
color: #83401F;
}
html[data-template="wabi"] .btn-regen:disabled { opacity: .45; box-shadow: none; }
/* ============================================================================
* 相关成语：松散的网格
* ----------------------------------------------------------------------------
* 「弱化强对齐」不是把卡片弄乱 —— 是让它们不在同一条基线上。
* 四张一循环各落一个高度（0 / 7px / -4px / 4px），差别只有几个像素：
* 指得出「不齐」，说不出「为什么乱」。多 10px 就变成拼贴画了。
* hover 不上浮 —— 只把边框收紧、底稍稍提亮。侘寂的东西不跳。
* ==========================================================================*/
html[data-template="wabi"] .related-grid {
gap: 16px 14px;
align-items: start;
}
html[data-template="wabi"] .related-item {
gap: 5px;
padding: 15px 17px 16px;
border: 1px solid rgba(58, 54, 46, .12);
border-radius: 3px;
background-color: rgba(255, 253, 246, .40);
background-image: linear-gradient(176deg, #FBF7F0 0%, #F6F0E4 100%);
box-shadow: none;
transition: border-color .2s, background .2s, box-shadow .2s;
}
html[data-template="wabi"] .related-item:nth-child(4n+2) { transform: translateY(7px); padding-top: 17px; }
html[data-template="wabi"] .related-item:nth-child(4n+3) { transform: translateY(-4px); padding-top: 13px; }
html[data-template="wabi"] .related-item:nth-child(4n) { transform: translateY(4px); padding-bottom: 19px; }
html[data-template="wabi"] .related-item:hover {
border-color: rgba(58, 54, 46, .24);
background-image: linear-gradient(176deg, #FCF9F3 0%, #F8F3E8 100%);
box-shadow: 0 2px 9px rgba(96, 82, 58, .055);
}
html[data-template="wabi"] .related-item .rw {
font-family: var(--wb-serif);
font-size: 17px; font-weight: 600;
letter-spacing: .07em;
color: #33302B;
}
html[data-template="wabi"] .related-item .rw-py {
color: var(--wb-ink-3);
font-size: 11px;
letter-spacing: .02em;
}
html[data-template="wabi"] .related-item small {
font-size: 12.5px; line-height: 1.72;
color: var(--wb-ink-3);
}
/* ============================================================================
* 胶囊 / 所属标签
* ==========================================================================*/
html[data-template="wabi"] .chip {
padding: 4px 13px;
border: 1px solid var(--wb-kaki-line);
border-radius: 2px;
background: rgba(160, 82, 44, .032);
color: #8E4826;
font-size: 13.5px;
transition: border-color .18s, background .18s, color .18s;
}
html[data-template="wabi"] a.chip:hover {
border-color: rgba(160, 82, 44, .42);
background: rgba(160, 82, 44, .075);
color: #83401F;
}
html[data-template="wabi"] .chip.plain {
background: none;
border: 1px dashed rgba(58, 54, 46, .18);
color: var(--wb-ink-3);
}
html[data-template="wabi"] .syn-ant > strong {
font-family: var(--wb-serif);
color: #5F6B58;
font-weight: 600;
letter-spacing: .12em;
}
/* ============================================================================
* 首页
* ==========================================================================*/
html[data-template="wabi"] .hero {
text-align: left;
padding: 60px 0 26px;
}
html[data-template="wabi"] .hero h1 {
font-family: var(--wb-serif);
font-size: 34px; font-weight: 500;
letter-spacing: .14em;
color: #2F2C27;
margin-bottom: 14px;
text-shadow: none;
}
html[data-template="wabi"] .hero-sub {
color: var(--wb-ink-3);
font-size: 14px;
letter-spacing: .06em;
margin-bottom: 26px;
}
html[data-template="wabi"] .hero-sub strong {
color: var(--wb-kaki);
font-weight: 600;
letter-spacing: .04em;
}
html[data-template="wabi"] .hero-search {
max-width: 520px;
margin: 0;
}
html[data-template="wabi"] .hero-search input {
height: 44px;
border: 1px solid rgba(58, 54, 46, .16);
border-radius: 2px 0 0 2px;
background: rgba(255, 253, 247, .62);
color: var(--wb-ink);
font-size: 14.5px;
box-shadow: none;
}
html[data-template="wabi"] .hero-search input:focus {
border-color: rgba(160, 82, 44, .42);
background: rgba(255, 253, 247, .9);
box-shadow: 0 0 0 3px rgba(160, 82, 44, .07);
}
html[data-template="wabi"] .hero-search button {
height: 44px;
border-radius: 0 2px 2px 0;
background: #3A3630;
color: #F6F0E4;
font-size: 14px; font-weight: 500;
letter-spacing: .16em; text-indent: .16em;
box-shadow: none;
transition: background .18s;
}
html[data-template="wabi"] .hero-search button:hover { background: #262420; }
html[data-template="wabi"] .letters { gap: 8px; }
html[data-template="wabi"] .letter {
border: 1px solid rgba(58, 54, 46, .11);
border-radius: 3px;
background: rgba(255, 253, 246, .42);
color: #3A362F;
font-family: var(--wb-serif);
font-size: 18px; font-weight: 600;
box-shadow: none;
transition: border-color .18s, color .18s, background .18s;
}
html[data-template="wabi"] .letter small { color: var(--wb-ink-3); font-weight: 400; }
html[data-template="wabi"] .letter:hover {
border-color: rgba(160, 82, 44, .34);
background: rgba(255, 253, 246, .75);
color: var(--wb-kaki);
}
html[data-template="wabi"] .letter.empty { color: #9A9080; opacity: .62; }
html[data-template="wabi"] .hot-grid { gap: 14px; }
html[data-template="wabi"] .hot-item {
border: 1px solid rgba(58, 54, 46, .095);
border-radius: 3px;
background: rgba(255, 253, 246, .46);
box-shadow: none;
transition: border-color .2s, background .2s, box-shadow .2s;
}
html[data-template="wabi"] .hot-item:hover {
border-color: rgba(58, 54, 46, .22);
background: rgba(255, 253, 246, .78);
box-shadow: 0 3px 10px rgba(96, 82, 58, .05);
transform: none;
}
html[data-template="wabi"] .hot-word {
font-family: var(--wb-serif);
font-weight: 600;
letter-spacing: .07em;
color: #33302B;
}
html[data-template="wabi"] .hot-pinyin {
color: var(--wb-moss);
font-size: 12px;
letter-spacing: .06em;
}
html[data-template="wabi"] .hot-expl { color: var(--wb-ink-3); }
/* ============================================================================
* 列表页 / 搜索页
* ==========================================================================*/
html[data-template="wabi"] .list-head h1 {
font-family: var(--wb-serif);
font-size: 26px; font-weight: 500;
letter-spacing: .12em;
color: #2F2C27;
}
html[data-template="wabi"] .muted { color: var(--wb-ink-3); }
html[data-template="wabi"] .result-list {
border: 1px solid rgba(58, 54, 46, .095);
border-radius: 4px;
background: rgba(255, 253, 246, .42);
box-shadow: none;
}
html[data-template="wabi"] .result-item {
border-bottom: 1px solid rgba(58, 54, 46, .065);
padding: 14px 20px;
transition: background .16s;
}
html[data-template="wabi"] .result-item:hover { background: rgba(255, 253, 246, .62); }
html[data-template="wabi"] .result-item .rw {
font-family: var(--wb-serif);
font-weight: 600;
letter-spacing: .06em;
color: #33302B;
}
html[data-template="wabi"] .result-item .rp {
color: var(--wb-moss);
font-size: 12px;
letter-spacing: .04em;
}
html[data-template="wabi"] .result-item .re { color: var(--wb-ink-3); }
html[data-template="wabi"] .pager a {
border: 1px solid rgba(58, 54, 46, .14);
border-radius: 2px;
background: rgba(255, 253, 246, .4);
color: #4E4941;
font-family: var(--wb-serif);
transition: border-color .18s, color .18s, background .18s;
}
html[data-template="wabi"] .pager a:hover {
border-color: rgba(160, 82, 44, .40);
background: rgba(160, 82, 44, .05);
color: var(--wb-kaki);
}
html[data-template="wabi"] .pager span { color: var(--wb-ink-3); }
/* ---------- 404 / 空状态：一枚压进纸里的淡灰字 ---------- */
html[data-template="wabi"] .not-found h1 {
font-family: var(--wb-serif);
font-size: 68px; font-weight: 500;
letter-spacing: .16em; text-indent: .16em;
color: #DCD1BB;
text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
html[data-template="wabi"] .not-found .hero-search {
width: 100%;
max-width: 420px;
margin: 20px auto 18px;
}
html[data-template="wabi"] .not-found p { color: var(--wb-ink-3); }
html[data-template="wabi"] .empty { color: var(--wb-ink-3); }
html[data-template="wabi"] .back a { color: var(--wb-kaki); }
html[data-template="wabi"] .back a:hover { color: #83401F; }
/* ============================================================================
* 页脚：比页纸再深半档，只隔一条线
* ==========================================================================*/
html[data-template="wabi"] .site-footer {
position: relative;
background-color: #E6DCC7;
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.62' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.27 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23w)'/%3E%3C/svg%3E"),
linear-gradient(180deg, #E8DFCB 0%, #E3D8C2 100%);
background-size: 320px 320px, auto;
background-repeat: repeat, no-repeat;
border-top: 1px solid rgba(58, 54, 46, .11);
box-shadow: none;
color: #5F5A4F;
margin-top: 40px;
}
html[data-template="wabi"] .footer-inner { padding: 28px 16px 24px; gap: 11px; }
html[data-template="wabi"] .footer-nav { gap: 26px; }
html[data-template="wabi"] .footer-nav a {
color: #5F5A4F;
font-size: 12.5px; font-weight: 400;
letter-spacing: .14em;
}
html[data-template="wabi"] .footer-nav a:hover { color: var(--wb-kaki); }
html[data-template="wabi"] .copyright {
font-size: 11.5px;
letter-spacing: .05em;
color: #5F5A4F;
}
html[data-template="wabi"] .footer-hub { border-top-color: rgba(58, 54, 46, .09); }
html[data-template="wabi"] .footer-hub .fh-label { color: #5A5549; }
html[data-template="wabi"] .footer-hub a { color: #5F5A4F; }
html[data-template="wabi"] .footer-hub a:hover { color: var(--wb-kaki); }
/* 首页友情链接：跟着卡片走，标题弱一档 */
html[data-template="wabi"] .friend-links h2 { font-size: 16px; }
html[data-template="wabi"] .fl-list a { color: #5F5A4F; }
html[data-template="wabi"] .fl-list a:hover { color: var(--wb-kaki); }
/* 英汉 / 汉字页顺带收一下，避免浅底上冒出色块 */
html[data-template="wabi"] .sense-pos {
background: rgba(110, 122, 102, .09);
color: #5F6B58;
border-radius: 1px;
}
html[data-template="wabi"] .sense-title { color: #33302B; }
html[data-template="wabi"] .example {
background: rgba(110, 122, 102, .055);
border-left: 2px solid rgba(110, 122, 102, .26);
border-radius: 0 3px 3px 0;
}
html[data-template="wabi"] .example-en { color: #3A362F; }
html[data-template="wabi"] .example-cn { color: var(--wb-ink-3); }
html[data-template="wabi"] .pron-btn {
border: 1px solid rgba(95, 107, 88, .38);
background: rgba(110, 122, 102, .08);
color: #5F6B58;
}
html[data-template="wabi"] .pron-btn:hover {
background: rgba(110, 122, 102, .18);
color: #4A5545;
}
/* ============================================================================
* 响应式
* ----------------------------------------------------------------------------
* 侘寂是「少」，不是「空」—— 窄屏只做三件事：缩字号、收边距、把四张拆成两张。
* 字义笺在 480 以下改单列：宋体字宽，360 屏两列一行只剩七八个字，读不下去。
* ==========================================================================*/
@media (max-width: 1024px) {
/* 4 字成语在 1024 两列会留半个空格，三字却能撑满 —— 改 flex 等分 */
html[data-template="wabi"] .char-decompose { display: flex; flex-wrap: wrap; gap: 13px; }
html[data-template="wabi"] .char-decompose > .char-item { flex: 1 1 calc(50% - 7px); }
html[data-template="wabi"] .detail-head h1 { font-size: 41px; }
html[data-template="wabi"] .detail-head h1::after { width: 42px; height: 42px; font-size: 12px; right: -58px; }
html[data-template="wabi"] .detail-head h1 { max-width: calc(100% - 62px); }
}
@media (max-width: 860px) {
html[data-template="wabi"] .detail-head { padding: 34px 0 17px; }
html[data-template="wabi"] .detail-head h1 { font-size: 36px; letter-spacing: .11em; }
html[data-template="wabi"] .card { padding: 22px 22px 24px 24px; }
html[data-template="wabi"] .detail .card:has(.explanation) { padding: 26px 24px 28px 26px; }
html[data-template="wabi"] .card h2 { font-size: 17.5px; }
html[data-template="wabi"] .related-grid { grid-template-columns: repeat(2, 1fr); }
html[data-template="wabi"] .hero h1 { font-size: 29px; }
}
@media (max-width: 640px) {
html[data-template="wabi"] .header-inner { min-height: 56px; }
html[data-template="wabi"] .logo { font-size: 16.5px; letter-spacing: .16em; text-indent: .16em; }
html[data-template="wabi"] .detail-head { padding: 26px 0 15px; }
html[data-template="wabi"] .detail-head h1 {
font-size: clamp(25px, 7.9vw, 31px);
letter-spacing: .09em;
max-width: calc(100% - 54px);
}
html[data-template="wabi"] .detail-head h1::after {
width: 33px; height: 33px;
margin-top: -15px;
font-size: 10px;
right: -45px;
border-width: 1px;
border-radius: 1.5px;
}
html[data-template="wabi"] .pinyin { font-size: 11.5px; letter-spacing: .18em; text-indent: .18em; }
html[data-template="wabi"] .head-sub { padding-top: 10px; }
html[data-template="wabi"] .grid-figure { padding: 5px; margin: 12px 0 16px; }
html[data-template="wabi"] .tag { padding: 4px 10px; }
html[data-template="wabi"] .tag-label { font-size: 9.5px; padding-right: 7px; margin-right: 7px; }
html[data-template="wabi"] .tag-value { font-size: 12px; }
html[data-template="wabi"] .card { padding: 20px 17px 22px 19px; margin-bottom: 18px; }
html[data-template="wabi"] .detail .card:has(.explanation) { padding: 24px 19px 26px 21px; }
html[data-template="wabi"] .card h2 { font-size: 16.5px; padding-left: 14px; margin-bottom: 16px; }
html[data-template="wabi"] .card h2::before { width: 2.5px; }
html[data-template="wabi"] .explanation { font-size: 16.5px; line-height: 2.02; }
html[data-template="wabi"] .story { font-size: 15px; line-height: 1.98; }
html[data-template="wabi"] .field { grid-template-columns: 1fr; gap: 6px; padding: 13px 0; }
html[data-template="wabi"] .field dt { font-size: 12px; padding-top: 0; letter-spacing: .14em; }
html[data-template="wabi"] .field dd.quote { padding: 10px 13px; font-size: 14.5px; }
html[data-template="wabi"] .tab { padding: 8px 11px; font-size: 13px; letter-spacing: .04em; }
html[data-template="wabi"] .jielong-node { min-width: 84px; padding: 5px 14px 6px; }
html[data-template="wabi"] .jielong-node .jw { font-size: 14.5px; }
html[data-template="wabi"] .jielong-arrow { flex: 0 0 26px; width: 26px; }
html[data-template="wabi"] .jielong-arrow::before { width: 19px; }
html[data-template="wabi"] .related-grid { gap: 12px 11px; }
html[data-template="wabi"] .related-item { padding: 13px 14px 14px; }
html[data-template="wabi"] .related-item:nth-child(4n+2) { transform: translateY(5px); }
html[data-template="wabi"] .related-item:nth-child(4n+3) { transform: translateY(-3px); }
html[data-template="wabi"] .related-item:nth-child(4n) { transform: translateY(3px); }
html[data-template="wabi"] .related-item .rw { font-size: 15.5px; }
html[data-template="wabi"] .hero { padding: 38px 0 18px; }
html[data-template="wabi"] .hero h1 { font-size: 24px; letter-spacing: .10em; }
html[data-template="wabi"] .hero-search input, html[data-template="wabi"] .hero-search button { height: 42px; }
html[data-template="wabi"] .char-decompose { gap: 11px; }
html[data-template="wabi"] .char-item { padding: 16px 13px 18px; }
html[data-template="wabi"] .char-glyph { width: 54px; height: 54px; font-size: 35px; }
html[data-template="wabi"] .not-found h1 { font-size: 50px; }
html[data-template="wabi"] .site-footer { margin-top: 30px; }
html[data-template="wabi"] .footer-inner { padding: 22px 14px 18px; }
}
@media (max-width: 480px) {
/* 宋体字比黑体宽，360 屏两列时一行只剩七八个字，读起来一截一截的。
这一版宁肯页面长一点，也要让每行读得下去。 */
html[data-template="wabi"] .char-decompose {
flex-direction: column;
flex-wrap: nowrap;
}
html[data-template="wabi"] .char-decompose > .char-item { flex: 1 1 auto; }
html[data-template="wabi"] .char-item { padding: 17px 15px 19px; }
html[data-template="wabi"] .char-glyph { width: 56px; height: 56px; font-size: 36px; }
}
@media (max-width: 400px) {
html[data-template="wabi"] .detail-head h1 {
font-size: clamp(23px, 8.2vw, 27px);
max-width: calc(100% - 44px);
}
html[data-template="wabi"] .detail-head h1::after {
width: 29px; height: 29px;
margin-top: -13px;
font-size: 9px;
right: -39px;
}
html[data-template="wabi"] .tag { padding: 3px 8px; }
html[data-template="wabi"] .tag-value { font-size: 11.5px; }
html[data-template="wabi"] .char-item { padding: 15px 12px 17px; }
html[data-template="wabi"] .char-glyph { width: 50px; height: 50px; font-size: 32px; }
html[data-template="wabi"] .explanation { font-size: 16px; }
html[data-template="wabi"] .jielong-arrow { flex: 0 0 20px; width: 20px; }
html[data-template="wabi"] .jielong-arrow::before { width: 14px; height: 5px; }
html[data-template="wabi"] .jielong-arrow::after { width: 5.5px; height: 5.5px; }
}
/* ============================================================================
* 视觉模板：赛博国风 / 新中式赛博（html[data-template="cyber"]）
* ----------------------------------------------------------------------------
* 北极星：一座入了夜的旧城。琉璃瓦还在，只是檐下的灯换成了冷白的 LED；
* 墙上的回纹被描了一遍荧光漆，光从纹路的凹槽里透出来。古的骨架没变，
* 变的是照亮它的那层光。
*
* 跟前几版的关系：
* 书卷靠纸的暖、水彩靠浓度、工业靠重量、哥特靠金与暗的比值、和纸靠留白。
* 这一版靠**光的层次** —— 暗处退到看不见，亮处只在边缘，中间是玻璃。
* 全页最亮的不是标题，是那些 1px 的线：回纹、边角、箭头、取景框。
*
* 四条硬规则：
* 1. 光只描边，不填面。任何一块面积超过 200px² 的纯色亮块都算犯规 ——
* 除了两处：主按钮、标题（那是「灯牌」，不是背景）。
* 2. 玻璃必须有东西可透。半透卡片底下压着回纹与两团光晕，模糊之后
* 才看得见「后面还有一层」；没有这层底，backdrop-filter 等于没写。
* 3. 青是主色、金是次色、紫是例外。青做结构与高亮，金只做标题与单字，
* 紫只出现在「趣味延伸」一块。三色同框一次就够，多了就是 RGB 灯箱。
* 4. 圆角分两档：面板 4px（玻璃是切的），胶囊 pill（接龙、按钮、标签片）。
* 中间档（8~12px）一律不用 —— 那是「网页卡片」的圆角。
*
* 纹样全部由 CSS 与内联 SVG 生成：回纹是 96px 一个的方螺旋（一条连续折线
* 从外向内收），云头是 h2 前的一枚 SVG，取景框角标是 4 条 1.5px 的线。
* 不新增图片文件、不改 HTML、子目录部署不用改路径。
*
* 字体：标题思源宋体（--cy-serif），正文思源黑体（--cy-sans）。
* 宋体的横细竖粗 + 霓虹外发光，才是「碑刻被灯照着」，黑体发光只是科技感。
* ==========================================================================*/
html[data-template="cyber"] {
/* ---- 面：玄黑四档（偏蓝的深墨，不是纯黑） ---- */
--cy-void: #070A0E; /* 整页底 */
--cy-void-2: #04060A; /* 页脚 / 最深 */
--cy-panel: #0C1219; /* 玻璃卡实心底（backdrop-filter 不可用时的兜底） */
--cy-raise: #111A24; /* hover / 抬起 */
--cy-well: #05080C; /* 凹槽：输入框、田字格底 */
/* ---- 字：冷白三档 ---- */
--cy-ink: #DCE8EF; /* 正文，面板上 13.2:1 */
--cy-ink-2: #A9BECB; /* 二级，8.9:1 */
--cy-ink-3: #7C93A3; /* 小字，5.2:1 */
/* ---- 电光青：结构与高亮 ---- */
--cy-cyan: #22E6D2; /* 主青，页底 10.4:1 */
--cy-cyan-hi: #7BFFF1; /* 打到最亮，只给 hover 与箭头尖端 */
--cy-cyan-dim: #0E7F77; /* 暗青，只做边框，不做文字 */
--cy-cyan-line: rgba(34, 230, 210, .22);
--cy-cyan-glow: rgba(34, 230, 210, .30);
/* ---- 鎏金：只给标题与单字 ---- */
--cy-gold: #D9B36A; /* 页底 8.6:1 */
--cy-gold-hi: #F0D69B; /* 标题字面 */
--cy-gold-line: rgba(217, 179, 106, .26);
/* ---- 暗紫：只给「趣味延伸」一块 ---- */
--cy-purple: #8E6BC4;
--cy-purple-2: #6E4E9E;
--cy-purple-bg: rgba(110, 78, 158, .14);
/* ---- 接管基础变量（漏改的规则也不会跳白） ---- */
--primary: #22E6D2;
--primary-dark: #16A99A;
--primary-soft: #0C2B2A;
--ink: #DCE8EF;
--ink-soft: #A9BECB;
--ink-faint: #7C93A3;
--bg: #070A0E;
--card: #0C1219;
--border: #1B2A35;
--gold: #D9B36A;
--radius: 4px;
--shadow: 0 10px 30px rgba(0, 0, 0, .55);
--cy-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
--cy-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei",
"Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-serif: var(--cy-serif);
--font-sans: var(--cy-sans);
}
/* ---------- 底：玄黑 + 回纹方螺旋 + 两团错位的光 ----------
* 回纹那个 96px 的方螺旋是一条**连续折线**从外盘到内（M0 0 H96 V96 H0 V24
* H72 V72 H24 V48），不是三个同心方框 —— 同心框是「回」字，连续折才是回纹。
* 透明度压到 4.5%，远看只是「地上有砖」，近看才认得出纹路。
* 两团光：青压左上（像一盏冷灯），紫偏右下（像街对面的霓虹招牌反光）。
* 单色底会死，两团颜色不同的光错开摆，页面才有「纵深」。 */
html[data-template="cyber"] body {
background-color: var(--cy-void);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M0 0H96V96H0V24H72V72H24V48' fill='none' stroke='%2322E6D2' stroke-width='1' stroke-opacity='.06'/%3E%3C/svg%3E"),
radial-gradient(1000px 580px at 16% -8%, rgba(34, 230, 210, .135), transparent 68%),
radial-gradient(900px 640px at 94% 32%, rgba(110, 78, 158, .115), transparent 70%),
radial-gradient(780px 540px at 50% 110%, rgba(34, 230, 210, .070), transparent 72%),
linear-gradient(180deg, #090D13 0%, #070A0E 46%, #05080C 100%);
background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
/* 短页（404）也让页脚贴到视口底 */
display: flex;
flex-direction: column;
min-height: 100vh;
color: var(--cy-ink);
}
html[data-template="cyber"] main { flex: 1 0 auto; min-width: 0; }
/* 一层极细的横向扫描纹，1px 亮 / 3px 暗，透明度 1.2%。
整页铺满会显得脏，所以趁它只在「面板以外」的页底薄薄一层，
跟玻璃卡叠在一起时才像一块屏幕。 */
html[data-template="cyber"] body::before {
content: '';
position: fixed; inset: 0;
pointer-events: none;
z-index: 0;
background-image: repeating-linear-gradient(180deg,
rgba(34, 230, 210, .016) 0 1px,
transparent 1px 4px);
}
/* 四角取景框：固定在视口，像镜头取景。只在宽屏出现，窄屏会挡住内容 */
html[data-template="cyber"] body::after {
content: '';
position: fixed; inset: 14px;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(90deg, rgba(34, 230, 210, .46) 0 24px, transparent 22px),
linear-gradient(180deg, rgba(34, 230, 210, .46) 0 24px, transparent 22px),
linear-gradient(270deg, rgba(34, 230, 210, .46) 0 24px, transparent 22px),
linear-gradient(180deg, rgba(34, 230, 210, .46) 0 24px, transparent 22px),
linear-gradient(90deg, rgba(34, 230, 210, .46) 0 24px, transparent 22px),
linear-gradient(0deg, rgba(34, 230, 210, .46) 0 24px, transparent 22px),
linear-gradient(270deg, rgba(34, 230, 210, .46) 0 24px, transparent 22px),
linear-gradient(0deg, rgba(34, 230, 210, .46) 0 24px, transparent 22px);
background-size: 24px 1px, 1px 24px, 24px 1px, 1px 24px, 24px 1px, 1px 24px, 24px 1px, 1px 24px;
background-position:
left top, left top,
right top, right top,
left bottom, left bottom,
right bottom, right bottom;
background-repeat: no-repeat;
}
/* ============================================================================
* 顶部导航：深色半透明 + 回纹霓虹底边
* ----------------------------------------------------------------------------
* 半透明不是「加点 alpha」就完事 —— 底下必须有回纹和光晕，滤过之后才看得出
* 是块玻璃。所以导航自己不再铺底纹，让 body 的纹路透上来，只压一层 86% 的墨。
* 底边是两件事叠在一条线上：1px 的青实线（灯管本体）+ 12px 的回纹（灯照在
* 檐下纹路上）。回纹用 mask 左右渐隐，否则两端会硬生生截断。
* ==========================================================================*/
html[data-template="cyber"] .site-header {
position: sticky;
top: 0;
z-index: 40;
background-color: rgba(8, 12, 17, .86);
background-image: linear-gradient(180deg, rgba(20, 32, 42, .55) 0%, rgba(8, 12, 17, .20) 100%);
-webkit-backdrop-filter: blur(16px) saturate(1.25);
backdrop-filter: blur(16px) saturate(1.25);
border-bottom: 1px solid rgba(34, 230, 210, .34);
box-shadow:
0 1px 0 rgba(34, 230, 210, .10),
0 12px 34px -12px rgba(0, 0, 0, .85),
inset 0 1px 0 rgba(123, 255, 241, .06);
}
html[data-template="cyber"] .header-inner { min-height: 64px; gap: 24px; }
/* 回纹底边：一条 24px 周期的方螺旋，透明 62% 起、两端渐隐 */
html[data-template="cyber"] .site-header::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
height: 11px;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0H24V24H0V6H18V18H6V12' fill='none' stroke='%2322E6D2' stroke-width='1' stroke-opacity='.42'/%3E%3C/svg%3E");
background-size: 24px 24px;
background-position: 0 -14px;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
opacity: .9;
}
/* 站名：宋体、宽字距、底下压一道青光，右上一个 6px 的方点 = 电源指示灯 */
html[data-template="cyber"] .logo {
position: relative;
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--cy-serif);
font-size: 21px; font-weight: 700;
letter-spacing: .16em; text-indent: .16em;
color: var(--cy-gold-hi);
text-shadow: 0 0 18px rgba(217, 179, 106, .22), 0 1px 0 rgba(0, 0, 0, .8);
padding: 0 0 3px;
}
html[data-template="cyber"] .logo::after {
content: '';
position: absolute; left: 0; bottom: -1px;
width: 100%; height: 1px;
background: linear-gradient(90deg,
rgba(34, 230, 210, .75) 0%,
rgba(34, 230, 210, .18) 46%,
transparent 78%);
box-shadow: 0 0 8px rgba(34, 230, 210, .45);
}
html[data-template="cyber"] .logo:hover { color: #FFF0C8; }
html[data-template="cyber"] .nav { gap: 2px; }
html[data-template="cyber"] .nav a {
position: relative;
color: #9FB4C2;
font-size: 14px; font-weight: 500;
letter-spacing: .10em;
padding: 9px 13px;
border-radius: 3px;
background: none;
transition: color .16s, background .16s;
}
/* 下划光：一条从中间向两端展开的细线，hover 才点亮 */
html[data-template="cyber"] .nav a::after {
content: '';
position: absolute; left: 50%; right: 50%; bottom: 3px;
height: 1px;
background: var(--cy-cyan);
box-shadow: 0 0 8px rgba(34, 230, 210, .85);
opacity: 0;
transition: left .2s ease, right .2s ease, opacity .2s;
}
html[data-template="cyber"] .nav a:hover {
color: var(--cy-cyan-hi);
background: rgba(34, 230, 210, .07);
}
html[data-template="cyber"] .nav a:hover::after { left: 13px; right: 13px; opacity: 1; }
/* ---------- 搜索：凹进去的一道槽，聚焦时槽沿亮起 ---------- */
html[data-template="cyber"] .search-box input {
height: 38px;
border: 1px solid rgba(34, 230, 210, .20);
border-radius: 3px;
background: var(--cy-well);
color: var(--cy-ink);
font-size: 14px; letter-spacing: .02em;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8);
transition: border-color .18s, box-shadow .18s;
}
html[data-template="cyber"] .search-box input::placeholder { color: #6E8492; }
html[data-template="cyber"] .search-box input:focus {
border-color: rgba(34, 230, 210, .62);
box-shadow:
inset 0 2px 8px rgba(0, 0, 0, .8),
0 0 0 1px rgba(34, 230, 210, .22),
0 0 18px rgba(34, 230, 210, .18);
}
html[data-template="cyber"] .search-box button {
height: 38px; padding: 0 20px;
border: 1px solid rgba(34, 230, 210, .55);
border-radius: 3px;
/* 亮青底上深墨字：5.4:1。白字压青只有 1.9:1，读不了 */
background: linear-gradient(180deg, #3DF5E2 0%, #22E6D2 52%, #12C4B2 100%);
color: #032521;
font-size: 14px; font-weight: 700;
letter-spacing: .12em; text-indent: .12em;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .45),
0 0 16px rgba(34, 230, 210, .30);
}
html[data-template="cyber"] .search-box button:hover {
background: linear-gradient(180deg, #6BFFF2 0%, #3DF0DC 52%, #22E6D2 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .5),
0 0 24px rgba(34, 230, 210, .46);
}
/* 联想下拉：一整块玻璃，条目之间一道 1px 的青线 */
html[data-template="cyber"] .suggest {
background: rgba(9, 15, 21, .94);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
border: 1px solid rgba(34, 230, 210, .26);
border-radius: 4px;
box-shadow: 0 20px 44px rgba(0, 0, 0, .7), 0 0 0 1px rgba(34, 230, 210, .06);
}
html[data-template="cyber"] .suggest a {
color: var(--cy-ink-2);
font-size: 14px;
border-bottom: 1px solid rgba(34, 230, 210, .08);
}
html[data-template="cyber"] .suggest a:hover,
html[data-template="cyber"] .suggest a.active {
background: rgba(34, 230, 210, .10);
color: var(--cy-cyan-hi);
}
html[data-template="cyber"] .suggest .s-pinyin { color: var(--cy-ink-3); }
/* ============================================================================
* 面包屑：分隔符换成斜杠方块，字距拉开 —— 像终端里的路径
* ==========================================================================*/
html[data-template="cyber"] .breadcrumb { font-size: 12.5px; letter-spacing: .04em; }
html[data-template="cyber"] .breadcrumb li { color: var(--cy-ink-3); }
html[data-template="cyber"] .breadcrumb li + li::before {
content: "/";
margin-right: 7px;
color: var(--cy-cyan-dim);
}
html[data-template="cyber"] .breadcrumb a {
color: var(--cy-ink-2);
padding-bottom: 1px;
border-bottom: 1px solid transparent;
transition: color .15s, border-color .15s;
}
html[data-template="cyber"] .breadcrumb a:hover {
color: var(--cy-cyan);
border-bottom-color: rgba(34, 230, 210, .6);
}
html[data-template="cyber"] .breadcrumb li[aria-current] { color: var(--cy-gold); }
/* ============================================================================
* 标题区：碑刻被灯照着
* ----------------------------------------------------------------------------
* 「书法粗体 + 青色霓虹描边」：宋体 800 打底，外面套四层 text-shadow。
* 从 1px 到 52px 逐层放大、逐层变淡 —— 近的那层当描边（贴住笔画），
* 远的两层当空气里的散射。只写一层 8px 的光会像个污点，必须有过渡。
* 字面是鎏金：#F0D69B，冷光包着暖字，正是「青金」那套老配色。
* ==========================================================================*/
html[data-template="cyber"] .detail-head {
position: relative;
text-align: center;
padding: 34px 0 10px;
}
html[data-template="cyber"] .detail-head h1 {
font-family: var(--cy-serif);
font-size: 54px; font-weight: 800;
line-height: 1.24;
letter-spacing: .12em; text-indent: .12em;
color: var(--cy-gold-hi);
text-shadow:
-1px 0 0 rgba(34, 230, 210, .66),
1px 0 0 rgba(34, 230, 210, .66),
0 -1px 0 rgba(34, 230, 210, .66),
0 1px 0 rgba(34, 230, 210, .66),
0 0 4px rgba(34, 230, 210, .58),
0 0 18px rgba(34, 230, 210, .40),
0 0 52px rgba(34, 230, 210, .20);
}
/* 标题两侧各一道短光条：中间亮、向外渐隐，像两块屏夹着字 */
html[data-template="cyber"] .detail-head h1::before,
html[data-template="cyber"] .detail-head h1::after {
content: '';
position: absolute;
top: 50%;
width: 74px; height: 1px;
margin-top: -1px;
pointer-events: none;
}
html[data-template="cyber"] .detail-head h1::before {
right: calc(100% + 26px);
background: linear-gradient(90deg, transparent, rgba(34, 230, 210, .58));
box-shadow: 0 0 10px rgba(34, 230, 210, .5);
}
html[data-template="cyber"] .detail-head h1::after {
left: calc(100% + 26px);
background: linear-gradient(90deg, rgba(34, 230, 210, .58), transparent);
box-shadow: 0 0 10px rgba(34, 230, 210, .5);
}
html[data-template="cyber"] .detail-head h1 { display: inline-block; position: relative; }
html[data-template="cyber"] .detail-head .head-sub { margin-top: 4px; }
/* 拼音：浅灰青小字，前面一枚 5px 的菱形 —— 数据条上的对齐点 */
html[data-template="cyber"] .pinyin {
font-family: var(--cy-sans);
font-size: 15px;
color: #849BAA;
letter-spacing: .24em;
font-weight: 400;
}
html[data-template="cyber"] .head-sub .pinyin::before {
content: '';
display: inline-block;
width: 5px; height: 5px;
margin-right: 10px;
vertical-align: middle;
background: var(--cy-cyan);
transform: rotate(45deg);
box-shadow: 0 0 8px rgba(34, 230, 210, .8);
}
/* ---------- 田字格：一块嵌进面板的深色显示屏 ----------
* 那张 SVG 自带白底，直接放上去是张白贴纸。用 multiply 会把白滤掉但连
* 朱红格线也压暗；改用 screen + 压饱和：白底被 screen 提亮反而更白。
* 所以走第三条路 —— invert(.88) 把白翻成近黑、朱红翻成青绿，再 hue-rotate
* 收进青金区间，最后 multiply 融进底。 */
html[data-template="cyber"] .grid-figure {
width: fit-content;
justify-content: flex-start;
margin: 18px auto 20px;
padding: 8px;
border: 1px solid rgba(34, 230, 210, .14);
border-radius: 4px;
background: linear-gradient(180deg, rgba(9, 16, 22, .9), rgba(5, 9, 13, .9));
box-shadow:
inset 0 0 26px rgba(34, 230, 210, .05),
0 0 0 1px rgba(0, 0, 0, .5);
}
html[data-template="cyber"] .grid-img {
border-radius: 2px;
display: block;
/* invert 之后先 grayscale 洗掉原来的朱红与绿，再用 sepia+hue-rotate 统一上青：
直接把色相转 148° 会把朱红推到品红，那正是要避开的那块颜色。
screen 混合让白线浮在暗底上发光，而不是盖一层灰。 */
filter: invert(1) grayscale(1) brightness(.82) sepia(1) hue-rotate(126deg) saturate(1.9);
mix-blend-mode: screen;
opacity: .82;
}
/* ============================================================================
* 属性标签：发光印章（HUD 取景框）
* ----------------------------------------------------------------------------
* 「印章」在赛博语境里不是蜡块，是**识别框** —— 像监控画面圈住目标的那四角。
* 所以做法是：中间一块近乎透明的玻璃，四角各一个 L 形亮角，里面一道内发光。
* 六个标签排开，像六块被锁定的数据。
*
* L 角用 background 的四组双线画（横向 9px + 纵向 9px），只取左上与右下 ——
* 四个角全画就变成「照片框」，两个角才是「正在瞄准」。
* 发光不能靠 box-shadow（会沿边框一圈，成为抽屉把手），要用 drop-shadow
* 挂在角标元素上，光只从线里冒出来。
* ==========================================================================*/
html[data-template="cyber"] .tags {
justify-content: center;
gap: 10px;
padding: 10px 0 8px;
}
html[data-template="cyber"] .tag {
position: relative;
gap: 8px;
padding: 8px 18px;
border: 1px solid rgba(34, 230, 210, .18);
border-radius: 3px;
background-color: rgba(10, 20, 27, .62);
background-image: linear-gradient(180deg, rgba(34, 230, 210, .07) 0%, rgba(34, 230, 210, .015) 42%, transparent 100%);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow:
inset 0 0 16px rgba(34, 230, 210, .06),
inset 0 1px 0 rgba(123, 255, 241, .10),
0 2px 10px rgba(0, 0, 0, .45);
color: var(--cy-gold);
}
/* 两个 L 角，4 条 1.5px 的线 */
html[data-template="cyber"] .tag::before {
content: '';
position: absolute; inset: -1px;
pointer-events: none;
border-radius: 3px;
background-image:
linear-gradient(90deg, var(--cy-cyan) 0 9px, transparent 9px),
linear-gradient(180deg, var(--cy-cyan) 0 9px, transparent 9px),
linear-gradient(270deg, var(--cy-cyan) 0 9px, transparent 9px),
linear-gradient(0deg, var(--cy-cyan) 0 9px, transparent 9px);
background-size: 9px 1.5px, 1.5px 9px, 9px 1.5px, 1.5px 9px;
background-position: left top, left top, right bottom, right bottom;
background-repeat: no-repeat;
filter: drop-shadow(0 0 4px rgba(34, 230, 210, .85));
opacity: .92;
}
html[data-template="cyber"] .tag:nth-child(3n+2)::before {
/* 第二类：角标换成金色，光弱一档 —— 六枚里有两种，才不像同一个模子印的 */
filter: drop-shadow(0 0 4px rgba(217, 179, 106, .7));
opacity: .8;
}
html[data-template="cyber"] .tag:nth-child(3n+2) {
background-image: linear-gradient(180deg, rgba(217, 179, 106, .07) 0%, rgba(217, 179, 106, .012) 42%, transparent 100%);
border-color: rgba(217, 179, 106, .2);
}
html[data-template="cyber"] .tag-label {
color: #8FA6B4;
font-size: 10.5px; font-weight: 500;
letter-spacing: .18em; text-indent: .18em;
}
html[data-template="cyber"] .tag-value {
color: var(--cy-gold-hi);
font-family: var(--cy-serif);
font-size: 13.5px; font-weight: 700;
letter-spacing: .05em;
}
html[data-template="cyber"] .tag:nth-child(3n+2) .tag-value { color: #F2DFAE; }
html[data-template="cyber"] .tag:nth-child(3n) .tag-value { color: var(--cy-cyan); }
/* ============================================================================
* 卡片：深色磨砂玻璃 + 细金边
* ----------------------------------------------------------------------------
* 玻璃的三件事，缺一件就不像玻璃：
* ① 半透的底（alpha .58~.66）—— 太透字读不清，太实就成实心卡；
* ② 上沿一道 1px 亮线 —— 光从上方擦过玻璃的入射边；
* ③ 背后有东西可模糊 —— 由 body 的回纹与光晕提供，卡片自己不许铺底纹。
* 细金边不是纯金：金 .26 + 内侧 .10 的青，两色各占一半，边才「贵而不俗」。
* 四角各一枚 1px 的短角标（比标签的更小更暗），是这套系统里最低一级的光。
* ==========================================================================*/
html[data-template="cyber"] .card {
position: relative;
background-color: rgba(12, 18, 25, .62);
background-image:
linear-gradient(180deg, rgba(123, 255, 241, .10) 0%, rgba(34, 230, 210, .022) 22%, transparent 46%),
linear-gradient(168deg, rgba(217, 179, 106, .028) 0%, transparent 62%);
-webkit-backdrop-filter: blur(14px) saturate(1.18);
backdrop-filter: blur(14px) saturate(1.18);
border: 1px solid var(--cy-gold-line);
border-radius: 4px;
box-shadow:
inset 0 1px 0 rgba(240, 214, 155, .22),
inset 0 0 44px rgba(34, 230, 210, .045),
0 14px 36px -14px rgba(0, 0, 0, .8);
padding: 25px 29px 27px;
margin-bottom: 20px;
}
/* 卡片四角：各 10px 的细角标，透明度比标签低一半 —— 层级要分得出来 */
html[data-template="cyber"] .card::before {
content: '';
position: absolute; inset: 5px;
pointer-events: none;
border-radius: 2px;
background-image:
linear-gradient(90deg, rgba(34, 230, 210, .34) 0 10px, transparent 10px),
linear-gradient(180deg, rgba(34, 230, 210, .34) 0 10px, transparent 10px),
linear-gradient(270deg, rgba(34, 230, 210, .34) 0 10px, transparent 10px),
linear-gradient(0deg, rgba(34, 230, 210, .34) 0 10px, transparent 10px);
background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px;
background-position: left top, left top, right bottom, right bottom;
background-repeat: no-repeat;
opacity: .75;
}
/* ---------- 板块标题：发光云纹短线 ----------
* 云纹用一枚 28×14 的内联 SVG：一条底线 + 两个交错的拱（如意云头的极简版）。
* 短线从云纹右侧压过去，实到虚、亮到灭，右端不收死 —— 收死了就成下划线。
*/
html[data-template="cyber"] .card h2 {
position: relative;
font-family: var(--cy-serif);
font-size: 21px; font-weight: 700;
letter-spacing: .10em;
color: #C8DCE6;
padding: 0 0 15px 38px;
margin-bottom: 20px;
text-shadow: 0 0 20px rgba(34, 230, 210, .18);
}
html[data-template="cyber"] .card h2::before {
content: '';
position: absolute; left: 0; top: .30em;
width: 28px; height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='18' viewBox='0 0 32 18'%3E%3Cg fill='none' stroke='%233BF3E0' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M1 16h30'/%3E%3Cpath d='M4.6 16a3.4 3.4 0 0 1 6.8 0'/%3E%3Cpath d='M11.2 16a5.2 5.2 0 0 1 10.4 0'/%3E%3Cpath d='M21.2 16a3.4 3.4 0 0 1 6.8 0'/%3E%3C/g%3E%3C/svg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
filter: drop-shadow(0 0 7px rgba(34, 230, 210, .9));
opacity: 1;
}
html[data-template="cyber"] .card h2::after {
content: '';
position: absolute; left: 38px; right: 0; bottom: 0;
width: auto; height: 1px;
border-radius: 0;
background: linear-gradient(90deg,
rgba(34, 230, 210, .62) 0%,
rgba(34, 230, 210, .28) 18%,
rgba(217, 179, 106, .16) 46%,
rgba(34, 230, 210, .07) 72%,
transparent 96%);
box-shadow: 0 0 10px rgba(34, 230, 210, .22);
}
/* ============================================================================
* 释义：玻璃上被打了一道光
* ----------------------------------------------------------------------------
* 「重点文字电光青高亮」—— 正文是纯文本，没有内联标记，能着力的只有
* ::first-line 和左侧那条括线。所以：首行整行染青（这是唯一的位置感），
* 左边压一道 2px 的青竖线，光从线上溢出来。读者一眼落在第一行，正好是释义。
* ==========================================================================*/
html[data-template="cyber"] .detail .card:has(.explanation) {
/* 主释义那块：底色比别的卡再深半档，青的辉光更强 —— 它是整页的「主屏」 */
background-color: rgba(9, 16, 22, .70);
box-shadow:
inset 0 1px 0 rgba(240, 214, 155, .18),
inset 0 0 60px rgba(34, 230, 210, .055),
0 16px 44px -16px rgba(0, 0, 0, .85);
}
html[data-template="cyber"] .explanation {
position: relative;
font-size: 17.5px;
line-height: 2.0;
color: #D6E4EC;
padding-left: 17px;
}
html[data-template="cyber"] .explanation::before {
content: '';
position: absolute; left: 0; top: .55em; bottom: .55em;
width: 2px;
background: linear-gradient(180deg,
rgba(34, 230, 210, .95) 0%,
rgba(34, 230, 210, .45) 62%,
rgba(34, 230, 210, .08) 100%);
box-shadow: 0 0 12px rgba(34, 230, 210, .55);
}
html[data-template="cyber"] .explanation::first-line {
color: var(--cy-cyan);
text-shadow: 0 0 16px rgba(34, 230, 210, .30);
}
/* ---------- 字段列表：dt 是小标签，dd 是内容 ---------- */
html[data-template="cyber"] .fields { gap: 17px; }
html[data-template="cyber"] .field { grid-template-columns: 70px 1fr; gap: 16px; }
html[data-template="cyber"] .field:first-child {
padding-top: 2px;
}
html[data-template="cyber"] .field dt {
color: var(--cy-cyan);
font-size: 13px; font-weight: 600;
letter-spacing: .16em;
padding-top: 4px;
text-shadow: 0 0 12px rgba(34, 230, 210, .35);
}
html[data-template="cyber"] .field dd {
color: #C6D7E1;
font-size: 15px;
line-height: 1.85;
}
/* 引文：一块更深的凹槽，左沿一道青线（不是 border-left，要带光） */
html[data-template="cyber"] .field dd.quote {
position: relative;
max-width: 40em;
color: #AFC3D0;
background: rgba(5, 10, 14, .55);
border-left: 0;
border-radius: 3px;
padding: 13px 18px 13px 20px;
box-shadow: inset 0 0 24px rgba(34, 230, 210, .045);
}
html[data-template="cyber"] .field dd.quote::before {
content: '';
position: absolute; left: 0; top: 8px; bottom: 8px;
width: 2px;
background: linear-gradient(180deg, rgba(217, 179, 106, .7), rgba(217, 179, 106, .15));
box-shadow: 0 0 10px rgba(217, 179, 106, .35);
}
html[data-template="cyber"] .story {
max-width: 46em;
font-size: 15.5px; line-height: 2.0;
color: #C6D7E1;
}
html[data-template="cyber"] .muted { color: var(--cy-ink-3); }
html[data-template="cyber"] .gold {
color: var(--cy-gold);
font-weight: 600;
letter-spacing: .08em;
text-shadow: 0 0 12px rgba(217, 179, 106, .28);
}
/* ---------- 造句 / 用例：每条前面一枚青方块 ---------- */
html[data-template="cyber"] .zju-list li {
max-width: 44em;
font-size: 15px; line-height: 1.95;
color: #C6D7E1;
}
html[data-template="cyber"] .zju-list li::marker { color: var(--cy-cyan-dim); }
html[data-template="cyber"] .xhy-list li {
color: #C6D7E1;
font-size: 15px; line-height: 1.9;
}
html[data-template="cyber"] .xhy-list li::before {
color: var(--cy-cyan);
content: "›";
text-shadow: 0 0 8px rgba(34, 230, 210, .7);
}
html[data-template="cyber"] .syn-ant > strong {
color: var(--cy-gold);
font-size: 14px;
letter-spacing: .14em;
}
/* 近反义词的胶囊：细青边、透明底，hover 才亮 */
html[data-template="cyber"] .chip {
padding: 4px 14px;
background: rgba(34, 230, 210, .055);
border: 1px solid rgba(34, 230, 210, .22);
border-radius: 999px;
color: #8FE4DA;
font-size: 13.5px;
transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
}
html[data-template="cyber"] a.chip:hover {
background: rgba(34, 230, 210, .14);
border-color: rgba(34, 230, 210, .62);
color: var(--cy-cyan-hi);
box-shadow: 0 0 16px rgba(34, 230, 210, .26);
}
html[data-template="cyber"] .chip.plain {
background: rgba(255, 255, 255, .018);
border-color: rgba(140, 160, 175, .24);
color: #A9BECB;
}
/* ============================================================================
* 趣味延伸：全页唯一用暗紫的板块
* ----------------------------------------------------------------------------
* 紫在这里不承担任何功能，只做「换台」—— 前面一路青金，到这里换一口气。
* 底色紫 .14 叠玻璃，边线紫 .3，标题前的云纹换成紫。别处不许出现紫。
* ==========================================================================*/
html[data-template="cyber"] .detail .card.highlight {
background-color: rgba(16, 12, 24, .62);
background-image:
linear-gradient(180deg, rgba(142, 107, 196, .075) 0%, transparent 48%),
radial-gradient(560px 220px at 88% -10%, rgba(142, 107, 196, .16), transparent 70%);
border-color: rgba(142, 107, 196, .34);
box-shadow:
inset 0 1px 0 rgba(178, 148, 224, .18),
inset 0 0 44px rgba(142, 107, 196, .07),
0 14px 36px -14px rgba(0, 0, 0, .8);
}
html[data-template="cyber"] .detail .card.highlight h2 { color: #DCCBEE; }
html[data-template="cyber"] .detail .card.highlight h2::before {
/* 云纹的 SVG 里 stroke 是写死的青色，只改 drop-shadow 会出现「青线紫光」
两种颜色挤在一枚 28px 的小图里。换成同一条路径、只把 stroke 换紫的版本。 */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='18' viewBox='0 0 32 18'%3E%3Cg fill='none' stroke='%23A989D8' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M1 16h30'/%3E%3Cpath d='M4.6 16a3.4 3.4 0 0 1 6.8 0'/%3E%3Cpath d='M11.2 16a5.2 5.2 0 0 1 10.4 0'/%3E%3Cpath d='M21.2 16a3.4 3.4 0 0 1 6.8 0'/%3E%3C/g%3E%3C/svg%3E");
filter: drop-shadow(0 0 6px rgba(142, 107, 196, .85));
}
html[data-template="cyber"] .detail .card.highlight h2::after {
background: linear-gradient(90deg,
rgba(142, 107, 196, .7) 0%,
rgba(142, 107, 196, .3) 20%,
rgba(34, 230, 210, .10) 52%,
transparent 96%);
box-shadow: 0 0 10px rgba(142, 107, 196, .3);
}
html[data-template="cyber"] .detail .card.highlight p { color: #C3B6D4; }
/* ============================================================================
* 字义分解：四张面板，各守一个角
* ----------------------------------------------------------------------------
* 「分别带发光中式边角纹样」—— 关键是**分别**。四张卡如果都画同一个角，
* 就成了一套复印件；四张各占一角（左上/右上/左下/右下），排在一起才像
* 四块拼起来的屏，边角互相呼应又各自独立。
*
* 边角纹样是双层 L：外层 24px 是主光，内层 13px 退到 5px 处是副光，
* 两层之间留一道空 —— 这就是中式「角花」的双勾，单层 L 只是科技感。
* ==========================================================================*/
html[data-template="cyber"] .char-decompose {
/* auto-fit 而不是 4 个 1fr：三字成语只有三张，四列网格会空出一格 */
grid-template-columns: repeat(auto-fit, minmax(182px, 1fr));
gap: 14px;
/* 不用 stretch：四张的释义长短差三四倍，「过」那张会被拉到和「以」一样高，
底下空出八成。各按各的高度，四块屏长短不齐，反而更像并排的显示器。 */
align-items: start;
}
html[data-template="cyber"] .char-item {
position: relative;
padding: 18px 17px 17px;
border: 1px solid rgba(34, 230, 210, .16);
border-radius: 4px;
background-color: rgba(10, 17, 23, .56);
background-image:
linear-gradient(160deg, rgba(34, 230, 210, .06) 0%, transparent 46%),
radial-gradient(220px 130px at 20% -10%, rgba(34, 230, 210, .07), transparent 70%);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow:
inset 0 1px 0 rgba(123, 255, 241, .09),
0 8px 22px -12px rgba(0, 0, 0, .7);
transition: border-color .18s, box-shadow .18s, background-color .18s;
}
/* 第 1 张：左上。主光 24px，副光 13px 退 6px */
html[data-template="cyber"] .char-item:nth-child(4n+1)::before,
html[data-template="cyber"] .char-item:nth-child(4n+1)::after {
content: '';
position: absolute;
pointer-events: none;
border-top: 2px solid rgba(34, 230, 210, .92);
border-left: 2px solid rgba(34, 230, 210, .92);
filter: drop-shadow(0 0 5px rgba(34, 230, 210, .65));
}
html[data-template="cyber"] .char-item:nth-child(4n+1)::before {
top: -1px; left: -1px; width: 30px; height: 30px;
border-top-left-radius: 4px;
}
html[data-template="cyber"] .char-item:nth-child(4n+1)::after {
top: 7px; left: 7px; width: 15px; height: 15px;
border-color: rgba(34, 230, 210, .34);
filter: none;
}
/* 第 2 张：右上 */
html[data-template="cyber"] .char-item:nth-child(4n+2)::before,
html[data-template="cyber"] .char-item:nth-child(4n+2)::after {
content: '';
position: absolute;
pointer-events: none;
border-top: 2px solid rgba(217, 179, 106, .88);
border-right: 2px solid rgba(217, 179, 106, .88);
filter: drop-shadow(0 0 5px rgba(217, 179, 106, .6));
}
html[data-template="cyber"] .char-item:nth-child(4n+2)::before {
top: -1px; right: -1px; width: 30px; height: 30px;
border-top-right-radius: 4px;
}
html[data-template="cyber"] .char-item:nth-child(4n+2)::after {
top: 7px; right: 7px; width: 15px; height: 15px;
border-color: rgba(217, 179, 106, .30);
filter: none;
}
/* 第 3 张：左下 */
html[data-template="cyber"] .char-item:nth-child(4n+3)::before,
html[data-template="cyber"] .char-item:nth-child(4n+3)::after {
content: '';
position: absolute;
pointer-events: none;
border-bottom: 2px solid rgba(34, 230, 210, .88);
border-left: 2px solid rgba(34, 230, 210, .88);
filter: drop-shadow(0 0 5px rgba(34, 230, 210, .6));
}
html[data-template="cyber"] .char-item:nth-child(4n+3)::before {
bottom: -1px; left: -1px; width: 30px; height: 30px;
border-bottom-left-radius: 4px;
}
html[data-template="cyber"] .char-item:nth-child(4n+3)::after {
bottom: 7px; left: 7px; width: 15px; height: 15px;
border-color: rgba(34, 230, 210, .32);
filter: none;
}
/* 第 4 张：右下 */
html[data-template="cyber"] .char-item:nth-child(4n+4)::before,
html[data-template="cyber"] .char-item:nth-child(4n+4)::after {
content: '';
position: absolute;
pointer-events: none;
border-bottom: 2px solid rgba(217, 179, 106, .86);
border-right: 2px solid rgba(217, 179, 106, .86);
filter: drop-shadow(0 0 5px rgba(217, 179, 106, .58));
}
html[data-template="cyber"] .char-item:nth-child(4n+4)::before {
bottom: -1px; right: -1px; width: 30px; height: 30px;
border-bottom-right-radius: 4px;
}
html[data-template="cyber"] .char-item:nth-child(4n+4)::after {
bottom: 7px; right: 7px; width: 15px; height: 15px;
border-color: rgba(217, 179, 106, .28);
filter: none;
}
/* 四张的底色也各差一点：一点点青、一点点金，四张并排才不是同一块玻璃 */
html[data-template="cyber"] .char-item:nth-child(4n+2) {
background-color: rgba(18, 16, 12, .56);
border-color: rgba(217, 179, 106, .16);
}
html[data-template="cyber"] .char-item:nth-child(4n+3) {
background-color: rgba(9, 19, 20, .58);
}
html[data-template="cyber"] .char-item:nth-child(4n+4) {
background-color: rgba(17, 14, 20, .56);
}
html[data-template="cyber"] .char-item > .char-glyph { margin-bottom: 4px; }
/* 单字：放大到 42px、鎏金、带光。
老浏览器没有 background-clip:text，先给实心金兜底 —— 否则字会整块消失。 */
html[data-template="cyber"] .char-glyph {
/* 基类是 54×54 的虚线方框（田字格的暗示）。这里字要放到 42px，
框就撑破了；而且四张卡已经有自己的角标，再来一个框就重了。
所以整块摘掉边框与底色，让单字直接立在卡面上。 */
display: block;
width: auto; height: auto;
align-self: flex-start;
border: 0;
background: none;
font-family: var(--cy-serif);
font-size: 42px; font-weight: 700;
line-height: 1.14;
letter-spacing: .02em;
color: #EBCE8F;
/* 不要青色描边：字面被 background-clip 挖成透明后，青色的 shadow 会从
字形里透出来，把鎏金整块盖成青绿。这里只留一层极淡的金色柔光。 */
text-shadow: 0 0 22px rgba(217, 179, 106, .30);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
html[data-template="cyber"] .char-glyph {
background-image: linear-gradient(168deg, #F6E3B4 0%, #E5C078 42%, #C79A52 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
}
/* 字下面一道 18px 的光，短到只够压住单字的重心 */
html[data-template="cyber"] .char-glyph::after {
content: '';
display: block;
width: 18px; height: 1px;
margin: 7px 0 0;
background: linear-gradient(90deg, rgba(34, 230, 210, .85), rgba(34, 230, 210, .10));
box-shadow: 0 0 8px rgba(34, 230, 210, .6);
}
html[data-template="cyber"] .char-glyph a {
color: inherit;
border-bottom: 0;
text-decoration: none;
}
html[data-template="cyber"] .char-glyph a:hover {
color: var(--cy-cyan-hi);
-webkit-text-fill-color: var(--cy-cyan-hi);
text-shadow: 0 0 14px rgba(34, 230, 210, .5);
}
html[data-template="cyber"] .char-pron {
font-size: 12.5px; line-height: 1.8;
color: var(--cy-ink-3);
letter-spacing: .02em;
}
html[data-template="cyber"] .char-shape {
font-size: 12.5px; line-height: 1.85;
color: #9FB6C4;
margin-top: 6px;
padding-top: 7px;
border-top: 1px solid rgba(34, 230, 210, .10);
}
html[data-template="cyber"] .char-senses { margin-top: 7px; }
html[data-template="cyber"] .sn-num {
font-family: var(--cy-serif);
color: var(--cy-cyan);
text-shadow: 0 0 10px rgba(34, 230, 210, .40);
}
html[data-template="cyber"] .sn-title {
color: #CFE2EC;
font-size: 12.5px;
}
html[data-template="cyber"] .sn-text {
font-size: 12.5px; line-height: 1.8;
color: #9FB6C4;
}
html[data-template="cyber"] .char-extra {
color: #8CA2B0;
font-size: 11.5px;
}
/* 基础样式里这块是米白底 + 金字的标签；暗底下必须换成暗底亮字，
否则就是一行灰字压在白纸上 —— 2.46:1，等于没写 */
html[data-template="cyber"] .char-extra-item {
color: #9FB6C4;
background: rgba(34, 230, 210, .07);
border: 1px solid rgba(34, 230, 210, .16);
border-radius: 3px;
font-size: 11.5px;
padding: 1px 7px;
}
/* 分隔点直接不要：flex 换行时它会孤零零掉在行尾（第三项被折到下一行），
看着像个多余的标点。三个小标签之间的 gap 足够区分。 */
html[data-template="cyber"] .char-extra-sep { display: none; }
html[data-template="cyber"] .char-extra-item { color: #8CA2B0; }
/* ---------- 「展开全部释义」：基础样式是白底青字，接管后只有 1.58:1 ----------
* 这是基础样式里最难发现的一处：`.expand-sense { color: var(--primary); background: #fff }`。
* 我们把 --primary 换成了电光青，青字压在 #fff 上就是 1.58:1 —— 全站最差。
* 改成玻璃胶囊：透青底 + 青字（11.8:1），hover 提亮，按下时反过来做一次性亮点。 */
html[data-template="cyber"] .expand-sense {
align-self: flex-start;
margin-top: 8px;
padding: 6px 17px;
border: 1px solid rgba(34, 230, 210, .40);
border-radius: 999px;
background: rgba(34, 230, 210, .06);
color: var(--cy-cyan);
font-size: 13px;
letter-spacing: .04em;
cursor: pointer;
transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
}
html[data-template="cyber"] .expand-sense:hover {
background: rgba(34, 230, 210, .15);
border-color: rgba(34, 230, 210, .72);
color: var(--cy-cyan-hi);
box-shadow: 0 0 16px rgba(34, 230, 210, .26);
}
html[data-template="cyber"] .expand-sense:active {
background: rgba(34, 230, 210, .88);
border-color: rgba(34, 230, 210, .95);
color: #032521;
box-shadow: 0 0 22px rgba(34, 230, 210, .40);
}
/* ============================================================================
* 成语接龙：半透发光胶囊 + 流线光效箭头
* ----------------------------------------------------------------------------
* 节点是半透玻璃的 pill，边上一圈极淡的青；current 那颗把内发光点亮，
* 但底仍然是透的 —— 「当前」不是换一块实心色，是这盏灯被打开了。
*
* 箭头原样是个 → 字符（→），直接染青色会像个印刷符号。
* 所以把字符藏掉（font-size:0），用两条伪元素重画：::before 是那条流线
* （渐变，尾虚头实），::after 是箭头尖（rotate 45° 的两条边）。
* 线上再叠一道亮光，用 background-position 让它从左流到右 —— 全站唯一的动效，
* 2.4s 一个来回，慢到像呼吸，不会抢字。prefers-reduced-motion 下停掉。
* ==========================================================================*/
html[data-template="cyber"] .jielong-chain { gap: 9px; margin-bottom: 18px; }
html[data-template="cyber"] .jielong-node {
gap: 3px;
padding: 9px 20px;
min-width: 88px;
border: 1px solid rgba(34, 230, 210, .24);
border-radius: 999px;
background-color: rgba(11, 20, 26, .58);
background-image: linear-gradient(180deg, rgba(123, 255, 241, .07) 0%, transparent 60%);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow:
inset 0 1px 0 rgba(123, 255, 241, .12),
0 0 0 1px rgba(0, 0, 0, .25);
transition: border-color .18s, box-shadow .18s, background-color .18s, transform .18s;
}
html[data-template="cyber"] .jielong-node:hover {
border-color: rgba(34, 230, 210, .70);
background-color: rgba(16, 30, 36, .70);
box-shadow:
inset 0 1px 0 rgba(123, 255, 241, .20),
0 0 20px rgba(34, 230, 210, .30);
transform: translateY(-1px);
}
html[data-template="cyber"] .jielong-node.current {
border-color: rgba(34, 230, 210, .85);
background-color: rgba(14, 40, 42, .72);
background-image: linear-gradient(180deg, rgba(34, 230, 210, .18) 0%, rgba(34, 230, 210, .04) 70%);
box-shadow:
inset 0 0 18px rgba(34, 230, 210, .22),
inset 0 1px 0 rgba(123, 255, 241, .30),
0 0 22px rgba(34, 230, 210, .28);
}
html[data-template="cyber"] .jielong-node .jw {
font-family: var(--cy-serif);
font-size: 16px; font-weight: 700;
color: #DCE8EF;
letter-spacing: .04em;
}
html[data-template="cyber"] .jielong-node.current .jw {
color: var(--cy-cyan-hi);
text-shadow: 0 0 14px rgba(34, 230, 210, .55);
}
html[data-template="cyber"] .jielong-node .jp {
font-size: 10.5px;
color: #7C93A3;
letter-spacing: .04em;
}
html[data-template="cyber"] .jielong-node.current .jp { color: #8FD9D1; }
/* 箭头：字符藏掉，重画成一条流线 + 一个尖 */
html[data-template="cyber"] .jielong-arrow {
position: relative;
display: inline-block;
width: 34px; height: 10px;
font-size: 0;
color: transparent;
flex: none;
}
html[data-template="cyber"] .jielong-arrow::before {
content: '';
position: absolute; left: 0; right: 3px; top: 50%;
height: 1.5px;
margin-top: -.75px;
border-radius: 1px;
/* 底光不能再从 0 起：完全透明的那一段让箭头跟胶囊断了联系，
看起来像凭空漂着一个「>」。起点给到 .28，线才是「连着」的。 */
background-image:
linear-gradient(90deg,
rgba(34, 230, 210, .28) 0%,
rgba(34, 230, 210, .55) 42%,
rgba(123, 255, 241, .98) 100%),
linear-gradient(90deg,
transparent 0 40%,
rgba(255, 255, 255, .85) 48%,
transparent 56%);
background-size: 100% 100%, 56% 100%;
background-repeat: no-repeat;
background-position: 0 0, -60% 0;
filter: drop-shadow(0 0 4px rgba(34, 230, 210, .7));
animation: cy-stream 2.6s linear infinite;
}
/* 箭头尖：一个 45° 的方块只留两条边，比 border 三角更容易对齐 */
html[data-template="cyber"] .jielong-arrow::after {
content: '';
position: absolute; right: 0; top: 50%;
width: 6px; height: 6px;
margin-top: -3px;
border-top: 1.5px solid var(--cy-cyan-hi);
border-right: 1.5px solid var(--cy-cyan-hi);
transform: rotate(45deg);
filter: drop-shadow(0 0 5px rgba(34, 230, 210, .85));
}
@keyframes cy-stream {
from { background-position: 0 0, -60% 0; }
to { background-position: 0 0, 160% 0; }
}
html[data-template="cyber"] .btn-regen {
padding: 7px 20px;
font-size: 13.5px;
color: var(--cy-cyan);
background: rgba(34, 230, 210, .06);
border: 1px solid rgba(34, 230, 210, .38);
border-radius: 999px;
letter-spacing: .08em;
transition: background .16s, box-shadow .16s, color .16s;
}
html[data-template="cyber"] .btn-regen:hover {
background: rgba(34, 230, 210, .14);
color: var(--cy-cyan-hi);
box-shadow: 0 0 18px rgba(34, 230, 210, .26);
}
html[data-template="cyber"] .btn-regen:active { background: rgba(34, 230, 210, .24); }
html[data-template="cyber"] .btn-regen:disabled { opacity: .45; box-shadow: none; }
/* ---------- 接龙的 tab：底部一道青线 ---------- */
html[data-template="cyber"] .tabs { border-bottom: 1px solid rgba(34, 230, 210, .14); }
html[data-template="cyber"] .tab {
color: #8CA2B0;
font-size: 14px;
letter-spacing: .06em;
transition: color .16s;
}
html[data-template="cyber"] .tab:hover { color: var(--cy-cyan); }
html[data-template="cyber"] .tab.active {
color: var(--cy-cyan-hi);
border-bottom-color: var(--cy-cyan);
text-shadow: 0 0 14px rgba(34, 230, 210, .5);
}
/* ============================================================================
* 相关成语：边框微光，虚实结合
* ----------------------------------------------------------------------------
* 「虚实」不是随机 —— 四张一循环：第 1、3 张有完整边框（实），第 2、4 张
* 只有一组角标（虚）。排出来是「框、角、框、角」，像四个哨位里两个亮着灯。
* 全实会死板，全虚会散；错开着才有节奏。
* hover 时虚的那张也把边框点亮 —— 手一碰，它就存在了。
* ==========================================================================*/
html[data-template="cyber"] .related-grid { gap: 13px; }
html[data-template="cyber"] .related-item {
position: relative;
gap: 6px;
padding: 16px 18px;
border: 1px solid rgba(34, 230, 210, .20);
border-radius: 4px;
background-color: rgba(10, 17, 23, .52);
background-image: linear-gradient(172deg, rgba(34, 230, 210, .045) 0%, transparent 58%);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: inset 0 1px 0 rgba(123, 255, 241, .07);
transition: border-color .18s, box-shadow .18s, background-color .18s, transform .18s;
}
/* 虚的那两张：不要边框。边框淡到 .07 时跟有框的几乎分不出来，
「虚实」就白做了。彻底的虚 = 无框 + 顶沿一道 28px 的亮线 + 更透的底。 */
html[data-template="cyber"] .related-item:nth-child(4n+2),
html[data-template="cyber"] .related-item:nth-child(4n+4) {
border-color: transparent;
background-color: rgba(8, 14, 19, .30);
background-image: none;
box-shadow: none;
}
html[data-template="cyber"] .related-item:nth-child(4n+2)::before,
html[data-template="cyber"] .related-item:nth-child(4n+4)::before {
content: '';
position: absolute; left: 18px; top: 0;
width: 28px; height: 1px;
pointer-events: none;
background: linear-gradient(90deg, rgba(34, 230, 210, .95), rgba(34, 230, 210, .05));
box-shadow: 0 0 8px rgba(34, 230, 210, .5);
}
/* hover 时它才「接上电」：边框出来，光也回来 */
html[data-template="cyber"] .related-item:nth-child(4n+2):hover,
html[data-template="cyber"] .related-item:nth-child(4n+4):hover {
border-color: rgba(34, 230, 210, .62);
background-color: rgba(14, 26, 32, .70);
box-shadow:
inset 0 1px 0 rgba(123, 255, 241, .16),
0 0 22px rgba(34, 230, 210, .20);
}
html[data-template="cyber"] .related-item:hover {
border-color: rgba(34, 230, 210, .62);
background-color: rgba(14, 26, 32, .70);
box-shadow:
inset 0 1px 0 rgba(123, 255, 241, .16),
0 0 22px rgba(34, 230, 210, .20),
0 10px 24px -12px rgba(0, 0, 0, .8);
transform: translateY(-2px);
}
html[data-template="cyber"] .related-item .rw {
font-family: var(--cy-serif);
font-size: 17px; font-weight: 700;
color: #E4EEF4;
letter-spacing: .04em;
}
html[data-template="cyber"] .related-item .rw-py {
font-size: 11.5px;
color: #7C93A3;
letter-spacing: .06em;
}
html[data-template="cyber"] .related-item small {
font-size: 12.5px;
color: #93A9B7;
line-height: 1.6;
}
html[data-template="cyber"] .related-item:hover .rw { color: var(--cy-cyan-hi); }
/* 权威 / 出处那类链接列表 */
html[data-template="cyber"] .fl-list a {
color: var(--cy-ink-2);
border-bottom: 1px solid rgba(34, 230, 210, .18);
transition: color .15s, border-color .15s;
}
html[data-template="cyber"] .fl-list a:hover {
color: var(--cy-cyan);
border-bottom-color: rgba(34, 230, 210, .6);
}
/* ============================================================================
* 索引页（拼音 / 首尾字）：h3 链接不能是纯青
* ----------------------------------------------------------------------------
* 基础样式把 `.letter-block h3 a` 染成 var(--primary)，接管之后就是 #22E6D2 ——
* 一屏二十几个 16px 的纯青标题，跟「正文链接」分不开，也踩了「青只描边」这条。
* 改成鎏金（它本来就是标题），hover 才转青 —— 亮的那一下留给交互。
* 虚线的分隔线换成 1px 青灰细线：虚线是「表单分区」的语汇，这里要的是屏幕切片。
* ==========================================================================*/
html[data-template="cyber"] .letter-block {
padding: 13px 0;
border-bottom: 1px solid rgba(34, 230, 210, .10);
}
html[data-template="cyber"] .letter-block h3 {
font-family: var(--cy-serif);
font-size: 16.5px;
letter-spacing: .04em;
}
html[data-template="cyber"] .letter-block h3 a {
color: var(--cy-gold-hi);
text-decoration: none;
transition: color .15s, text-shadow .15s;
}
html[data-template="cyber"] .letter-block h3 a:hover {
color: var(--cy-cyan-hi);
text-shadow: 0 0 14px rgba(34, 230, 210, .55);
text-decoration: none;
}
html[data-template="cyber"] .letter-block .lb-cnt {
color: var(--cy-cyan);
font-size: 12px;
letter-spacing: .04em;
opacity: .82;
}
html[data-template="cyber"] .letter-block .lb-ex {
color: #93A9B7;
font-size: 13.5px;
line-height: 1.8;
}
/* 首尾字索引的说明段：整行 67 字，黑体读不动，收到 46em */
html[data-template="cyber"] .zuci-sum {
max-width: 46em;
color: #A9BECB;
font-size: 14px;
line-height: 1.9;
}
/* ============================================================================
* 页脚：全页最暗的一块，顶上一道灯管收边
* ==========================================================================*/
html[data-template="cyber"] .site-footer {
position: relative;
background-color: var(--cy-void-2);
background-image:
radial-gradient(700px 240px at 50% 0%, rgba(34, 230, 210, .055), transparent 72%),
linear-gradient(180deg, #060A0E 0%, #04060A 100%);
border-top: 1px solid rgba(34, 230, 210, .22);
box-shadow:
0 -1px 0 rgba(34, 230, 210, .10),
inset 0 1px 0 rgba(123, 255, 241, .05);
color: #7C93A3;
margin-top: 44px;
padding: 30px 0 26px;
}
/* 顶沿的回纹：只在页脚出现一次，跟导航的首尾呼应 */
html[data-template="cyber"] .site-footer::before {
content: '';
position: absolute; left: 0; right: 0; top: 0;
height: 9px;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0H24V24H0V6H18V18H6V12' fill='none' stroke='%2322E6D2' stroke-width='1' stroke-opacity='.30'/%3E%3C/svg%3E");
background-size: 24px 24px;
background-position: 0 -15px;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
html[data-template="cyber"] .footer-inner { gap: 18px; }
html[data-template="cyber"] .footer-nav { gap: 18px; }
html[data-template="cyber"] .footer-nav a {
color: #7C93A3;
font-size: 13px;
letter-spacing: .06em;
transition: color .15s, text-shadow .15s;
}
html[data-template="cyber"] .footer-nav a:hover {
color: var(--cy-cyan);
text-shadow: 0 0 12px rgba(34, 230, 210, .6);
}
html[data-template="cyber"] .footer-hub {
display: flex; flex-wrap: wrap; gap: 8px 16px;
padding: 14px 0;
border-top: 1px solid rgba(34, 230, 210, .08);
border-bottom: 1px solid rgba(34, 230, 210, .08);
margin: 4px 0 12px;
}
html[data-template="cyber"] .footer-hub .fh-label {
color: #6B8291;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
}
html[data-template="cyber"] .footer-hub a {
color: #7C93A3;
font-size: 12.5px;
transition: color .15s;
}
html[data-template="cyber"] .footer-hub a:hover { color: var(--cy-cyan); }
html[data-template="cyber"] .copyright {
font-size: 11.5px;
letter-spacing: .06em;
/* #66788A 在页脚只有 4.46:1，差一点点过不了 AA；提一档到 4.78 */
color: #6C7E90;
}
html[data-template="cyber"] .friend-links h2 {
font-size: 13px;
color: #6B8291;
letter-spacing: .14em;
}
html[data-template="cyber"] .friend-links a { color: #7C93A3; }
/* ============================================================================
* 首页：一块会呼吸的招牌
* ----------------------------------------------------------------------------
* hero 的标题是全站第二处允许「光填面」的地方（另一处是按钮）——
* 它是灯牌，本来就该亮。但亮的只是外圈的光，字面仍是金色。
* 副标题后面压一团青色的雾，让标题和搜索框之间不是空的。
* ==========================================================================*/
html[data-template="cyber"] .hero {
position: relative;
padding: 58px 0 30px;
}
html[data-template="cyber"] .hero::before {
content: '';
position: absolute; left: 50%; top: 6px;
width: 620px; height: 260px;
margin-left: -310px;
pointer-events: none;
background: radial-gradient(closest-side, rgba(34, 230, 210, .10), transparent 78%);
z-index: -1;
}
html[data-template="cyber"] .hero h1 {
font-family: var(--cy-serif);
font-size: 42px; font-weight: 800;
letter-spacing: .10em; text-indent: .10em;
color: var(--cy-gold-hi);
text-shadow:
-1px 0 0 rgba(34, 230, 210, .58),
1px 0 0 rgba(34, 230, 210, .58),
0 -1px 0 rgba(34, 230, 210, .58),
0 1px 0 rgba(34, 230, 210, .58),
0 0 4px rgba(34, 230, 210, .48),
0 0 22px rgba(34, 230, 210, .32),
0 0 60px rgba(34, 230, 210, .16);
}
html[data-template="cyber"] .hero-sub {
color: #92A8B6;
font-size: 15px;
letter-spacing: .06em;
margin-bottom: 28px;
}
html[data-template="cyber"] .hero-sub strong {
color: var(--cy-cyan);
font-weight: 600;
text-shadow: 0 0 14px rgba(34, 230, 210, .4);
}
/* 大搜索：46px 高的一道槽，按钮是唯一的实心亮块 */
html[data-template="cyber"] .hero-search {
display: flex;
max-width: 580px;
margin: 0 auto;
gap: 0;
}
html[data-template="cyber"] .hero-search input {
height: 46px;
border: 1px solid rgba(34, 230, 210, .30);
border-right: 0;
border-radius: 4px 0 0 4px;
background: rgba(5, 9, 13, .85);
color: var(--cy-ink);
font-size: 15px;
letter-spacing: .04em;
padding: 0 16px;
box-shadow: inset 0 2px 10px rgba(0, 0, 0, .8);
transition: border-color .18s, box-shadow .18s;
}
html[data-template="cyber"] .hero-search input:focus {
border-color: rgba(34, 230, 210, .70);
box-shadow:
inset 0 2px 10px rgba(0, 0, 0, .8),
0 0 20px rgba(34, 230, 210, .18);
}
html[data-template="cyber"] .hero-search button {
height: 46px;
padding: 0 26px;
border: 1px solid rgba(34, 230, 210, .55);
border-radius: 0 4px 4px 0;
background: linear-gradient(180deg, #3DF5E2 0%, #22E6D2 52%, #12C4B2 100%);
color: #032521;
font-size: 15px; font-weight: 700;
letter-spacing: .14em; text-indent: .14em;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .45),
0 0 22px rgba(34, 230, 210, .30);
transition: background .18s, box-shadow .18s;
}
html[data-template="cyber"] .hero-search button:hover {
background: linear-gradient(180deg, #6BFFF2 0%, #3DF0DC 52%, #22E6D2 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .5),
0 0 30px rgba(34, 230, 210, .48);
}
/* ---------- 拼音索引：26 个格子 = 26 块小屏 ---------- */
html[data-template="cyber"] .letters { gap: 9px; }
html[data-template="cyber"] .letter {
position: relative;
padding: 11px 4px;
border: 1px solid rgba(34, 230, 210, .16);
border-radius: 4px;
background: rgba(9, 16, 22, .55);
color: var(--cy-gold);
font-family: var(--cy-sans);
font-size: 18px; font-weight: 700;
letter-spacing: .04em;
box-shadow: inset 0 1px 0 rgba(123, 255, 241, .06);
transition: color .16s, border-color .16s, box-shadow .16s, background .16s;
}
html[data-template="cyber"] .letter small {
color: #6B8291;
font-size: 10.5px;
font-weight: 400;
letter-spacing: .02em;
}
html[data-template="cyber"] .letter:hover {
color: var(--cy-cyan-hi);
border-color: rgba(34, 230, 210, .60);
background: rgba(14, 30, 34, .70);
box-shadow: 0 0 18px rgba(34, 230, 210, .22), inset 0 1px 0 rgba(123, 255, 241, .14);
}
html[data-template="cyber"] .letter.empty {
color: #4E6270;
opacity: .7;
border-color: rgba(34, 230, 210, .06);
pointer-events: none;
}
/* ---------- 热门成语：暗玻璃小卡，拼音是唯一有颜色的那行 ---------- */
html[data-template="cyber"] .hot-grid { gap: 12px; }
html[data-template="cyber"] .hot-item {
gap: 5px;
padding: 15px 17px;
border: 1px solid rgba(34, 230, 210, .16);
border-radius: 4px;
background-color: rgba(10, 17, 23, .52);
background-image: linear-gradient(172deg, rgba(34, 230, 210, .04) 0%, transparent 56%);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: inset 0 1px 0 rgba(123, 255, 241, .06);
transition: border-color .18s, box-shadow .18s, transform .18s, background-color .18s;
}
html[data-template="cyber"] .hot-item:hover {
border-color: rgba(34, 230, 210, .58);
background-color: rgba(14, 26, 32, .68);
box-shadow: 0 0 20px rgba(34, 230, 210, .20), inset 0 1px 0 rgba(123, 255, 241, .14);
transform: translateY(-2px);
}
html[data-template="cyber"] .hot-word {
font-family: var(--cy-serif);
font-size: 18px; font-weight: 700;
color: #E4EEF4;
letter-spacing: .04em;
}
html[data-template="cyber"] .hot-pinyin {
font-size: 12.5px;
color: #7FC9C2;
letter-spacing: .06em;
}
html[data-template="cyber"] .hot-expl {
font-size: 12.5px;
color: #93A9B7;
line-height: 1.6;
}
/* ---------- 列表页 / 搜索结果 ---------- */
html[data-template="cyber"] .list-head { padding: 26px 0 10px; }
html[data-template="cyber"] .list-head h1 {
font-family: var(--cy-serif);
font-size: 27px; font-weight: 700;
color: var(--cy-gold-hi);
letter-spacing: .08em;
text-shadow:
0 0 1px rgba(34, 230, 210, .55),
0 0 18px rgba(34, 230, 210, .22);
}
html[data-template="cyber"] .result-list { gap: 0; }
html[data-template="cyber"] .result-item {
padding: 16px 18px;
border-bottom: 1px solid rgba(34, 230, 210, .10);
border-radius: 0;
background: none;
transition: background .16s, box-shadow .16s;
}
html[data-template="cyber"] .result-item:hover {
background: rgba(34, 230, 210, .055);
box-shadow: inset 2px 0 0 rgba(34, 230, 210, .7);
}
html[data-template="cyber"] .result-item .rw {
font-family: var(--cy-serif);
font-size: 17px; font-weight: 700;
color: #E4EEF4;
letter-spacing: .04em;
}
html[data-template="cyber"] .result-item .rp {
font-size: 12px;
color: #7FC9C2;
letter-spacing: .05em;
}
html[data-template="cyber"] .result-item .re {
color: #93A9B7;
font-size: 13px;
line-height: 1.65;
}
html[data-template="cyber"] .result-item:hover .rw { color: var(--cy-cyan-hi); }
/* ---------- 分页：一排小方格，当前页是唯一亮的 ---------- */
html[data-template="cyber"] .pager { gap: 6px; margin-top: 22px; }
html[data-template="cyber"] .pager a,
html[data-template="cyber"] .pager span {
min-width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(34, 230, 210, .18);
border-radius: 3px;
background: rgba(9, 16, 22, .5);
color: #A9BECB;
font-size: 13.5px;
transition: color .15s, border-color .15s, box-shadow .15s;
}
html[data-template="cyber"] .pager a:hover {
color: var(--cy-cyan-hi);
border-color: rgba(34, 230, 210, .62);
box-shadow: 0 0 14px rgba(34, 230, 210, .24);
}
html[data-template="cyber"] .pager span {
color: #032521;
background: linear-gradient(180deg, #3DF5E2, #22E6D2);
border-color: rgba(34, 230, 210, .8);
font-weight: 700;
box-shadow: 0 0 16px rgba(34, 230, 210, .32);
}
/* ---------- 404：一块断线的屏 ---------- */
html[data-template="cyber"] .not-found h1 {
font-family: var(--cy-sans);
font-size: 92px; font-weight: 800;
letter-spacing: .06em;
color: transparent;
-webkit-text-stroke: 1px rgba(34, 230, 210, .55);
text-shadow: 0 0 40px rgba(34, 230, 210, .22);
}
html[data-template="cyber"] .not-found p {
color: #8599A8;
letter-spacing: .06em;
}
html[data-template="cyber"] .not-found .hero-search {
width: 100%;
max-width: 440px;
margin: 22px auto 20px;
}
/* ---------- 空状态 / 焦点 / 选中 ---------- */
html[data-template="cyber"] .empty { color: #7C93A3; }
html[data-template="cyber"] .back a {
color: #8599A8;
font-size: 13px;
letter-spacing: .06em;
transition: color .15s;
}
html[data-template="cyber"] .back a:hover { color: var(--cy-cyan); }
html[data-template="cyber"] ::selection {
background: rgba(34, 230, 210, .30);
color: #F2FBF9;
}
html[data-template="cyber"] a:focus-visible,
html[data-template="cyber"] button:focus-visible,
html[data-template="cyber"] input:focus-visible {
outline: 2px solid rgba(34, 230, 210, .85);
outline-offset: 2px;
border-radius: 2px;
}
/* ============================================================================
* 断点
* ----------------------------------------------------------------------------
* 1280 以下收窄两侧留白；900 以下摘掉取景框（会压到内容）；640 以下压缩
* 标题与卡片内边距；480 以下字义分解单列（宋体比黑体宽，两列一行只剩七八字）；
* 360 再压一档字号与接龙节点。
* ==========================================================================*/
@media (max-width: 1280px) {
html[data-template="cyber"] body::after { inset: 10px; }
}
@media (max-width: 1024px) {
html[data-template="cyber"] .detail-head h1 { font-size: 46px; }
html[data-template="cyber"] .detail-head h1::before,
html[data-template="cyber"] .detail-head h1::after { width: 48px; }
html[data-template="cyber"] .hero h1 { font-size: 36px; }
html[data-template="cyber"] .card { padding: 22px 24px 24px; }
}
@media (max-width: 900px) {
/* 取景框在窄屏上会压在卡片边上，摘掉 */
html[data-template="cyber"] body::after { display: none; }
html[data-template="cyber"] .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
html[data-template="cyber"] .detail-head { padding: 24px 0 8px; }
html[data-template="cyber"] .detail-head h1 {
font-size: clamp(28px, 9.2vw, 34px);
letter-spacing: .10em; text-indent: .10em;
}
/* 窄屏没有空间给两侧光条，收掉 —— 留着会顶到屏幕边 */
html[data-template="cyber"] .detail-head h1::before,
html[data-template="cyber"] .detail-head h1::after { display: none; }
html[data-template="cyber"] .hero { padding: 38px 0 22px; }
html[data-template="cyber"] .hero::before { width: 320px; margin-left: -160px; height: 180px; }
html[data-template="cyber"] .hero h1 { font-size: 29px; }
html[data-template="cyber"] .hero-search input { height: 43px; font-size: 14.5px; }
html[data-template="cyber"] .hero-search button { height: 43px; padding: 0 18px; font-size: 14px; }
html[data-template="cyber"] .card { padding: 19px 17px 21px; }
html[data-template="cyber"] .card h2 {
font-size: 18.5px;
padding-left: 34px;
}
html[data-template="cyber"] .card h2::before { width: 25px; height: 14px; top: .30em; }
html[data-template="cyber"] .card h2::after { left: 34px; }
html[data-template="cyber"] .card::before { inset: 4px; }
html[data-template="cyber"] .tags { gap: 8px; }
html[data-template="cyber"] .tag { padding: 7px 14px; gap: 6px; }
html[data-template="cyber"] .tag-label { font-size: 10px; letter-spacing: .12em; }
html[data-template="cyber"] .tag-value { font-size: 12.5px; }
html[data-template="cyber"] .explanation { font-size: 16px; padding-left: 14px; }
html[data-template="cyber"] .field { grid-template-columns: 1fr; gap: 6px; }
html[data-template="cyber"] .field dt { padding-top: 0; }
html[data-template="cyber"] .char-glyph { font-size: 36px; }
html[data-template="cyber"] .jielong-node { padding: 8px 15px; min-width: 76px; }
html[data-template="cyber"] .jielong-node .jw { font-size: 15px; }
/* 窄屏接龙改竖排：横排时 flex-wrap 会把箭头留在第一行末尾，指着右边的空气，
第二颗胶囊却折到了下一行 —— 看着像坏了。竖排 + 箭头转 90° 才对得上。
箭头盒子仍是 30×10，靠 margin 让旋转后的视觉高度不压到胶囊。 */
html[data-template="cyber"] .jielong-chain {
flex-direction: column;
align-items: flex-start;
flex-wrap: nowrap;
gap: 0;
}
html[data-template="cyber"] .jielong-arrow {
width: 38px;
transform: rotate(90deg);
margin: 16px 0 16px 26px;
}
html[data-template="cyber"] .not-found h1 { font-size: 68px; }
}
@media (max-width: 480px) {
/* 字义分解改单列：宋体 42px 单字 + 下面两行小字，两列一行放不下 */
html[data-template="cyber"] .char-decompose { grid-template-columns: 1fr; gap: 11px; }
html[data-template="cyber"] .char-glyph { font-size: 38px; }
html[data-template="cyber"] .related-grid { grid-template-columns: 1fr; }
html[data-template="cyber"] .hero h1 { font-size: 26px; }
html[data-template="cyber"] .detail-head h1 { letter-spacing: .08em; text-indent: .08em; }
}
@media (max-width: 360px) {
html[data-template="cyber"] .detail-head h1 { font-size: 25px; }
html[data-template="cyber"] .card { padding: 17px 14px 19px; }
html[data-template="cyber"] .tag { padding: 6px 11px; }
html[data-template="cyber"] .jielong-node { padding: 7px 12px; min-width: 68px; }
html[data-template="cyber"] .jielong-node .jw { font-size: 14px; }
html[data-template="cyber"] .jielong-arrow { width: 18px; }
}
/* ---------- 动效：只留接龙那一道流光，其余全部停掉 ---------- */
@media (prefers-reduced-motion: reduce) {
html[data-template="cyber"] .jielong-arrow::before { animation: none; }
html[data-template="cyber"] .jielong-node,
html[data-template="cyber"] .related-item,
html[data-template="cyber"] .hot-item { transition: none; }
html[data-template="cyber"] .related-item:hover,
html[data-template="cyber"] .hot-item:hover,
html[data-template="cyber"] .jielong-node:hover { transform: none; }
}
/* ---------- backdrop-filter 不可用时的兜底 ----------
* Safari 9 / 老 Edge / 部分安卓 WebView 不支持 backdrop-filter，
* 那层「透过玻璃」的模糊不存在，半透的底会把字压在一团花纹上，读不清。
* 这时把卡片底换成不透明的实色，玻璃变成磨砂亚克力 —— 观感降一档，但能读。 */
@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
html[data-template="cyber"] .card { background-color: #0C1219; }
html[data-template="cyber"] .detail .card:has(.explanation) { background-color: #0A1118; }
html[data-template="cyber"] .detail .card.highlight { background-color: #100C18; }
html[data-template="cyber"] .char-item { background-color: #0A1117; }
html[data-template="cyber"] .jielong-node { background-color: #0B141A; }
html[data-template="cyber"] .related-item { background-color: #0A1117; }
html[data-template="cyber"] .hot-item { background-color: #0A1117; }
html[data-template="cyber"] .tag { background-color: #0A141B; }
html[data-template="cyber"] .site-header { background-color: #080C11; }
}
/* ── 组词词条的静态态（chips 不上链接时的外观） ──────────────────────
适用：词语栏目不在当前站的访问范围内时，字典页的组词词条改为纯文本。
内容一个字不少，只是不再是 ；跳转统一走下方「查看全部 N 个组词」。
选择器必须写到 .chips .chip.chip-static（0,4,1）这一档：candy 的
「html[data-template="candy"] .chips .chip-py:nth-of-type(4n+1)」
也是 (0,4,1)，靠这一点同级 + 本段在文件末尾才压得住；只写 (0,3,1)
会被糖果色周期配色盖掉，静态词条看着仍像按钮。 */
html[data-template] .chips .chip.chip-static {
background: transparent;
border: 1px solid var(--border, #EAE5DA);
box-shadow: none;
transform: none;
cursor: default;
}
html[data-template] .chips .chip.chip-static .cp-word { color: var(--ink, #222222); }
html[data-template] .chips .chip.chip-static .cp-py { color: var(--ink-faint, #999999); }
/* ============================================================================
* 视觉模板：莫兰迪静物插画风（html[data-template="morandi"]）
* 北望：一间朝南的画室，午后三点的光落在釉面陶罐上。桌上摊着一册静物画稿，
* 灰裸粉的罐身、一枝枯了的尤加利、一张没画完的宣纸。
* 所有颜色都像掺了一把灰，没有一处高光。
*
* 跟前几版的关系：
* 和纸侘寂靠留白与不齐，赛博国风靠暗底与发光。
* 这一版靠**灰**与**哑** —— 全站没有纯白、没有纯黑、没有一个 specular 亮点，
* 也没有一处饱和色。四支莫兰迪色（灰裸粉、灰豆绿、灰蓝、燕麦棕）只以
* 极淡的洗色出现，重色只用在字上。
*
* 五条硬规则：
* 1. 页底 #E6E1D8 燕麦灰，卡片 #F2EEE6。卡片只比页底亮一档，不许更白 ——
* 白上去就变成「后台表格」，画册的味道全丢。
* 2. 哑光：没有任何 inset 白色高光、没有方向性阴影、没有渐变光泽。
* 阴影全部 0 偏移的柔光，alpha 不超过 .04。
* 3. 大圆角：卡片 20px、释义卡 22px、标签 9px、接龙 14px、相关 16px。
* 莫兰迪是软边的东西，直角会立刻变成「现代主义极简」，那是另一版。
* 4. 一屏最多一个饱和色：灰豆绿 #52654F。它只出现在重点字、序号、当前项上。
* 其余三色（粉 / 蓝 / 棕）只做极淡的底色洗，不做字色（除了标签内部）。
* 5. 装饰只有一件事：极简单线静物速写。板块标题左一枚、字义卡右上角一枚、
* 标题上方一枚。线宽 1.1px、透明度 ≤ .55，是铅笔轻轻描的稿子，不是图标。
*
* 肌理：画布颗粒用 feTurbulence 高频全向噪声（0.72 / 2 octaves），
* alpha 压到 .03 —— 全向而不是像和纸那样拉出横丝，这是「亚麻画布」与「纸」的分界。
* 同样单独一条 background-image 声明，SVG 解析失败就退回上一条纯渐变。
*
* 字体：标题思源宋体（--mo-serif），正文思源黑体（--mo-sans）。
* ==========================================================================*/
html[data-template="morandi"] {
/* ---- 燕麦灰：页 / 页脚 / 卡 / 垫 ---- */
--mo-bg: #E6E1D8; /* 整页底，掺灰的燕麦 */
--mo-bg-2: #DCD6CA; /* 页脚、凹处 */
--mo-card: #F2EEE6; /* 卡片 */
--mo-card-2: #EEE8DC; /* 释义主卡，被翻得最多的一页 */
--mo-mat: #E9E3D7; /* 内衬垫色 */
/* ---- 墨：暖炭灰三档（不是纯黑，纯黑在这套色里会像洞） ---- */
--mo-ink: #3A3733; /* 正文，卡面 10.3:1 */
--mo-ink-2: #55514B; /* 6.8:1 */
--mo-ink-3: #67635B; /* 小字，页底 4.6:1 / 卡面 5.2:1 */
/* ---- 灰豆绿：全站唯一的强调 ----
* 浅的那支 #9CAF9A 只做线与底洗，字必须用 #52654F（页底 4.84:1） */
--mo-green: #52654F;
--mo-green-dp: #43543F;
--mo-green-lt: #9CAF9A;
--mo-green-wash:#DFE5DB;
/* ---- 灰裸粉 ---- */
--mo-rose: #75534F; /* 标签字，粉底 5.1:1 */
--mo-rose-lt: #C9A9A6;
--mo-rose-wash: #EADCDA;
/* ---- 灰蓝 ---- */
--mo-blue: #4E6070; /* 页底 5.0:1 */
--mo-blue-lt: #A0AFC0;
--mo-blue-wash: #DCE2E8;
/* ---- 燕麦棕 ---- */
--mo-oat: #6B5E49; /* 页底 4.85:1 */
--mo-oat-lt: #C4B49A;
--mo-oat-wash: #E7DFD0;
/* ---- 标签色块：比 wash 再浓一档，否则贴在页底上分不出四种 ---- */
--mo-rose-chip: #E7D6D3;
--mo-green-chip: #DDE6D8;
--mo-blue-chip: #DAE2E9;
--mo-oat-chip: #E7DECB;
/* ---- 线 ---- */
--mo-line: rgba(58, 55, 51, .10);
--mo-line-2: rgba(58, 55, 51, .16);
--mo-line-3: rgba(58, 55, 51, .26);
/* ---- 接管基础变量：漏改的规则也不会跳回朱红 ---- */
--primary: #52654F;
--primary-dark: #43543F;
--primary-soft: #E4E9E0;
--ink: #3A3733;
--ink-soft: #55514B;
--ink-faint: #67635B;
--bg: #E6E1D8;
--card: #F2EEE6;
--border: #D9D2C5;
--gold: #6B5E49;
--radius: 20px;
--shadow: 0 1px 2px rgba(74, 66, 55, .028), 0 8px 22px rgba(74, 66, 55, .038);
--mo-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
--mo-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei",
"Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-serif: var(--mo-serif);
--font-sans: var(--mo-sans);
/* ---- 漫射光（纯渐变版，SVG 颗粒叠在后面，失败就退回这一层） ----
* 光从左上一路铺下来，没有方向性高光，只是明度极缓的呼吸。 */
--mo-light:
radial-gradient(880px 560px at 22% 2%, rgba(255, 253, 247, .52), transparent 66%),
radial-gradient(700px 520px at 82% 26%, rgba(255, 252, 244, .30), transparent 70%),
radial-gradient(980px 640px at 50% 104%, rgba(186, 176, 158, .20), transparent 72%),
linear-gradient(178deg, #E9E4DB 0%, #E6E1D8 48%, #E1DBD0 100%);
}
/* ---------- 底：燕麦灰画布 ---------- */
html[data-template="morandi"] body {
background-color: var(--mo-bg);
background-image: var(--mo-light);
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.40 0 0 0 0 0.37 0 0 0 0 0.32 0 0 0 0.028 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"),
var(--mo-light);
display: flex;
flex-direction: column;
min-height: 100vh;
color: var(--mo-ink);
font-family: var(--mo-sans);
}
html[data-template="morandi"] main { flex: 1 0 auto; min-width: 0; }
/* 选中：像用灰豆绿在画纸上轻轻扫了一道 */
html[data-template="morandi"] ::selection {
background: rgba(82, 101, 79, .16);
color: #33302C;
}
/* 焦点环：唯一允许出现的硬边 */
html[data-template="morandi"] a:focus-visible,
html[data-template="morandi"] button:focus-visible,
html[data-template="morandi"] input:focus-visible {
outline: 2px solid rgba(82, 101, 79, .42);
outline-offset: 2px;
}
/* ============================================================================
* 顶部导航：一行字、一条细灰线
* ----------------------------------------------------------------------------
* 底色带 14% 的透明 + 一点 blur，滚动时画布颗粒会从底下透出来 ——
* 像隔着一层薄棉纸看页面。blur 不支持的浏览器只少一点通透，底色仍压得住字。
* ==========================================================================*/
html[data-template="morandi"] .site-header {
background-color: #EBE6DD;
background-color: rgba(235, 230, 221, .88);
border-bottom: 1px solid rgba(58, 55, 51, .085);
box-shadow: none;
-webkit-backdrop-filter: saturate(104%) blur(8px);
backdrop-filter: saturate(104%) blur(8px);
}
html[data-template="morandi"] .header-inner { min-height: 64px; gap: 26px; }
html[data-template="morandi"] .logo {
font-family: var(--mo-serif);
font-size: 20px; font-weight: 600;
letter-spacing: .16em; text-indent: .16em;
color: #34312D;
text-shadow: none;
}
html[data-template="morandi"] .logo::after { content: none; display: none; }
html[data-template="morandi"] .logo:hover { color: var(--mo-green); }
html[data-template="morandi"] .nav { gap: 4px; }
html[data-template="morandi"] .nav a {
position: relative;
color: #55514B;
font-size: 13.5px; font-weight: 400;
letter-spacing: .10em;
padding: 7px 13px;
border-radius: 9px;
transition: color .2s, background .2s;
}
html[data-template="morandi"] .nav a::after { content: none; }
html[data-template="morandi"] .nav a:hover {
color: #34312D;
background: rgba(58, 55, 51, .045);
}
/* 搜索框：画纸上的一个浅凹槽，圆角跟着卡片走 */
html[data-template="morandi"] .search-box input {
height: 38px;
border: 1px solid rgba(58, 55, 51, .13);
border-radius: 19px 0 0 19px;
background: rgba(250, 247, 241, .62);
color: var(--mo-ink);
font-size: 14px; letter-spacing: .01em;
box-shadow: none;
transition: border-color .2s, background .2s;
}
html[data-template="morandi"] .search-box input::placeholder { color: #79746A; }
html[data-template="morandi"] .search-box input:focus {
border-color: rgba(82, 101, 79, .40);
background: rgba(252, 250, 245, .90);
box-shadow: 0 0 0 3px rgba(82, 101, 79, .07);
}
html[data-template="morandi"] .search-box button {
height: 38px; padding: 0 20px;
border: 1px solid rgba(82, 101, 79, .92);
border-radius: 0 19px 19px 0;
background: var(--mo-green);
color: #F4F1E9;
font-size: 13px; font-weight: 500;
letter-spacing: .14em; text-indent: .14em;
box-shadow: none;
transition: background .2s, border-color .2s;
}
html[data-template="morandi"] .search-box button:hover {
background: var(--mo-green-dp);
border-color: var(--mo-green-dp);
}
/* 联想下拉：一张抽出来的薄卡纸 */
html[data-template="morandi"] .suggest {
background: #F6F2EA;
border: 1px solid rgba(58, 55, 51, .10);
border-radius: 14px;
box-shadow: 0 10px 26px rgba(74, 66, 55, .10);
overflow: hidden;
}
html[data-template="morandi"] .suggest a {
color: var(--mo-ink-2);
font-size: 14px;
border-bottom: 1px solid rgba(58, 55, 51, .055);
}
html[data-template="morandi"] .suggest a:hover,
html[data-template="morandi"] .suggest a.active {
background: rgba(82, 101, 79, .065);
color: var(--mo-green);
}
html[data-template="morandi"] .suggest .s-pinyin { color: var(--mo-ink-3); }
/* ============================================================================
* 面包屑：小字、放开的字距，分隔用一个中点
* ==========================================================================*/
html[data-template="morandi"] .breadcrumb { padding: 22px 0 0; }
html[data-template="morandi"] .breadcrumb li {
color: var(--mo-ink-3);
font-size: 12px; letter-spacing: .09em;
}
html[data-template="morandi"] .breadcrumb li + li::before {
content: "·";
margin: 0 9px 0 4px;
color: #A9A296;
font-size: 11px;
}
html[data-template="morandi"] .breadcrumb a { color: var(--mo-ink-3); }
html[data-template="morandi"] .breadcrumb a:hover { color: var(--mo-green); }
html[data-template="morandi"] .breadcrumb li[aria-current] { color: #4A463F; }
/* ============================================================================
* 标题区：画册的一页 —— 一幅小静物、一行题名、一行小字
* ----------------------------------------------------------------------------
* 全站唯一允许「居中」的地方。莫兰迪画册的图版说明永远在正中，
* 这不是排版上的对称癖，是画册的规矩。
*
* 标题上方那枚陶罐与枯枝：36px 高、线宽 1.1、透明度 .5 —— 它不是插图，
* 是图版编号旁边的一个小记号。做大了就变成「插画网站」。
* ==========================================================================*/
html[data-template="morandi"] .detail-head {
position: relative;
text-align: center;
padding: 40px 0 24px;
margin: 0 0 6px;
border-bottom: 0;
}
html[data-template="morandi"] .detail-head::before {
content: '';
display: block;
width: 88px; height: 70px;
margin: 0 auto 20px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: .8;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 1 62 50' fill='none' stroke='%233E3931' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 49.4h60'/%3E%3Cpath d='M23 18h14'/%3E%3Cpath d='M24 18Q17 22 18 31Q18.6 40 21 46'/%3E%3Cpath d='M36 18Q43 22 42 31Q41.4 40 39 46'/%3E%3Cpath d='M21 46h18'/%3E%3Cpath d='M32 18Q40 12 50 6.5Q54 4.4 58 3'/%3E%3Cpath d='M44 9.4Q46.6 6 50.4 5.4'/%3E%3Cpath d='M40.6 11.6Q39.4 7.4 36.6 4.6'/%3E%3Cpath d='M53 4.6Q55.4 2.6 58.4 3.2'/%3E%3C/svg%3E");
pointer-events: none;
}
html[data-template="morandi"] .detail-head h1 {
display: block;
max-width: 100%;
margin: 0;
font-family: var(--mo-serif);
font-size: 46px; font-weight: 500;
line-height: 1.34;
letter-spacing: .14em; text-indent: .14em;
color: #34312D;
text-shadow: none;
}
html[data-template="morandi"] .detail-head h1::after { content: none; display: none; }
html[data-template="morandi"] .detail-head .head-sub {
justify-content: center;
gap: 10px;
padding-top: 14px;
}
html[data-template="morandi"] .pinyin {
font-family: var(--mo-serif);
font-size: 13.5px; font-style: normal;
color: #6F6A60;
letter-spacing: .24em; text-indent: .24em;
padding: 0;
border: 0;
background: none;
}
/* ============================================================================
* 田字格：一张压在卡纸上的拓片
* ----------------------------------------------------------------------------
* 那张 SVG 自带纯白底，在这套灰里会「发亮」。用 multiply 把白滤成卡色，
* 再把饱和度压到 48% —— SVG 里的朱红格线与绿拼音是纯色，四色同框太跳；
* 压过之后红成灰赭、绿成灰苔，正好落进这套配色。
* ==========================================================================*/
html[data-template="morandi"] .grid-figure {
width: fit-content;
justify-content: center;
margin: 22px auto 26px;
padding: 0;
border: 0;
background: none;
}
html[data-template="morandi"] .grid-img {
display: block;
border-radius: 8px;
mix-blend-mode: multiply;
filter: saturate(.48) contrast(.94) sepia(.07);
}
/* ============================================================================
* 属性标签：低饱和圆角色块
* ----------------------------------------------------------------------------
* 四支色按 4 循环轮转，但底只用 12~18% 的洗色，字用同族压深的那一支 ——
* 这是莫兰迪最容易翻车的地方：色块一饱和就是「糖果系」，一描边就是「胶囊按钮」。
* 圆角 9px，方中带圆，像一张裁圆角的色卡。
* ==========================================================================*/
html[data-template="morandi"] .tags {
justify-content: center;
gap: 10px;
padding: 0 0 8px;
}
html[data-template="morandi"] .tag {
gap: 8px;
padding: 5px 13px 6px;
border: 1px solid transparent;
border-radius: 9px;
background-color: var(--mo-rose-chip);
background-image: none;
box-shadow: none;
}
html[data-template="morandi"] .tag:nth-child(4n+2) { background-color: var(--mo-green-chip); }
html[data-template="morandi"] .tag:nth-child(4n+3) { background-color: var(--mo-blue-chip); }
html[data-template="morandi"] .tag:nth-child(4n) { background-color: var(--mo-oat-chip); }
html[data-template="morandi"] .tag-label {
color: var(--mo-rose);
font-size: 10.5px; font-weight: 400;
letter-spacing: .08em;
padding: 0;
margin: 0;
border: 0;
}
html[data-template="morandi"] .tag-value {
color: var(--mo-rose);
font-family: var(--mo-serif);
font-size: 13px; font-weight: 600;
letter-spacing: .04em;
}
html[data-template="morandi"] .tag:nth-child(4n+2) .tag-label,
html[data-template="morandi"] .tag:nth-child(4n+2) .tag-value { color: var(--mo-green); }
html[data-template="morandi"] .tag:nth-child(4n+3) .tag-label,
html[data-template="morandi"] .tag:nth-child(4n+3) .tag-value { color: var(--mo-blue); }
html[data-template="morandi"] .tag:nth-child(4n) .tag-label,
html[data-template="morandi"] .tag:nth-child(4n) .tag-value { color: var(--mo-oat); }
/* 只给读屏用的标题不许带装饰 —— 列表页的字母卡 h2 就是 sr-only，
伪元素会从裁剪框里逃出来，在卡顶留下半截陶罐 */
html[data-template="morandi"] .sr-only { padding-left: 0; }
html[data-template="morandi"] .sr-only::before,
html[data-template="morandi"] .sr-only::after { content: none; display: none; }
/* ============================================================================
* 卡片：一张哑光卡纸
* ----------------------------------------------------------------------------
* 圆角 20px —— 这是全站最大的一处「软」。边是 1px 的淡灰线，不是阴影；
* 阴影是 0 偏移的柔光（alpha .038），卡片像是「贴」在画布上而不是「浮」在上面。
* 卡上也铺一层画布颗粒（尺寸 200px、位置错开），所以每张卡的颗粒都不重样。
* ==========================================================================*/
html[data-template="morandi"] .card {
position: relative;
background-color: var(--mo-card);
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.40 0 0 0 0 0.37 0 0 0 0 0.32 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"),
linear-gradient(179deg, #F4F0E8 0%, #F2EEE6 62%, #EFEAE0 100%);
background-size: 200px 200px, auto;
background-position: 0 0, 0 0;
background-repeat: repeat, no-repeat;
border: 1px solid rgba(58, 55, 51, .075);
border-radius: 20px;
box-shadow:
0 1px 2px rgba(74, 66, 55, .026),
0 8px 22px rgba(74, 66, 55, .038);
padding: 28px 34px 30px;
margin-bottom: 24px;
}
/* 每张卡错开颗粒，三张一循环 */
html[data-template="morandi"] .detail > .card:nth-of-type(3n+2) { background-position: 58px 74px, 0 0; }
html[data-template="morandi"] .detail > .card:nth-of-type(3n) { background-position: 132px 30px, 0 0; }
/* ---------- 板块标题：左一枚静物速写 + 一道渐隐细线 ----------
* 速写挂在标题左侧 44px 的位置，线宽 1.1px、透明度 .72（再淡就看不见，
* 再浓就成图标）。四张一循环换图：陶罐 / 枯枝 / 宣纸 / 陶碗 ——
* 四张都是同一支铅笔、同一个画室里画的，所以能一起出现而不打架。 */
html[data-template="morandi"] .card h2 {
position: relative;
font-family: var(--mo-serif);
font-size: 19px; font-weight: 600;
line-height: 1.5;
letter-spacing: .05em;
color: #34312D;
padding: 0 0 14px 52px;
margin-bottom: 22px;
}
html[data-template="morandi"] .card h2::before {
content: '';
position: absolute; left: 0; top: 50%;
width: 38px; height: 38px;
margin-top: -19px;
background-repeat: no-repeat;
background-position: center;
background-size: 38px 38px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%233E3931' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4h8'/%3E%3Cpath d='M13 3.4Q11.6 6.4 10.6 9.4Q4 12.6 4.6 18Q5.2 25 7.8 29'/%3E%3Cpath d='M19 3.4Q20.4 6.4 21.4 9.4Q28 12.6 27.4 18Q26.8 25 24.2 29'/%3E%3Cpath d='M7.8 29h16.4'/%3E%3C/svg%3E");
}
html[data-template="morandi"] .card h2::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
width: auto; height: 1px;
border-radius: 0;
background: linear-gradient(90deg,
rgba(58, 55, 51, .14) 0%,
rgba(58, 55, 51, .07) 46%,
rgba(58, 55, 51, .015) 80%,
transparent 100%);
}
html[data-template="morandi"] .detail > .card:nth-of-type(4n+2) h2::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%233E3931' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 28.6Q12.6 15.6 18 3'/%3E%3Cpath d='M15.4 17.6Q19.4 14.6 25.6 16.6'/%3E%3Cpath d='M12.6 21.4Q7.4 17.8 6 12.6'/%3E%3Cpath d='M17.8 8.6Q20.6 6.4 23.4 7.2'/%3E%3Cpath d='M5 29.8h22'/%3E%3C/svg%3E");
}
html[data-template="morandi"] .detail > .card:nth-of-type(4n+3) h2::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%233E3931' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.4h12.6L27 9.4v20.4H6z'/%3E%3Cpath d='M18.6 3.4v6H27'/%3E%3Cpath d='M9.4 13.6h12.4M9.4 18.2h12.4M9.4 22.8h8'/%3E%3C/svg%3E");
}
html[data-template="morandi"] .detail > .card:nth-of-type(4n) h2::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%233E3931' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.2h26'/%3E%3Cpath d='M5.2 8.2c0 9.4 4.8 14.8 10.8 14.8s10.8-5.4 10.8-14.8'/%3E%3Cpath d='M10.6 27.6h10.8'/%3E%3C/svg%3E");
}
/* ============================================================================
* 释义：全页最重的一张
* ----------------------------------------------------------------------------
* 比别的卡深半档、暖半档 —— 画册里被翻得最多的那一页总是最先旧。
* 行高 2.05，字号 18px：这类文字是拿来慢慢读的，版式不能省行距。
* 重点：正文是纯文本，没有内联标记可染，首行是唯一的着力点 —— 灰豆绿。
* ==========================================================================*/
html[data-template="morandi"] .detail .card:has(.explanation) {
background-color: var(--mo-card-2);
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.40 0 0 0 0 0.37 0 0 0 0 0.32 0 0 0 0.036 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"),
linear-gradient(178deg, #F1ECE2 0%, #EEE8DC 58%, #EAE3D6 100%);
background-size: 200px 200px, auto;
background-position: 34px 46px, 0 0;
background-repeat: repeat, no-repeat;
border-color: rgba(58, 55, 51, .085);
padding: 34px 38px 36px;
border-radius: 22px;
}
html[data-template="morandi"] .explanation {
font-size: 18px; line-height: 2.05;
color: var(--mo-ink);
letter-spacing: .012em;
}
html[data-template="morandi"] .explanation::first-line { color: var(--mo-green); }
/* ---------- 字段：字段名是一枚灰苔小字，行间用极淡的线分开 ---------- */
html[data-template="morandi"] .fields { gap: 0; }
html[data-template="morandi"] .field {
grid-template-columns: 76px minmax(0, 1fr);
gap: 18px;
padding: 16px 0;
border-top: 1px solid rgba(58, 55, 51, .055);
}
html[data-template="morandi"] .field:first-child { border-top: 0; padding-top: 2px; }
html[data-template="morandi"] .field dt {
font-family: var(--mo-serif);
font-size: 13px; font-weight: 600;
letter-spacing: .16em;
color: var(--mo-green);
padding-top: 4px;
}
html[data-template="morandi"] .field dd {
color: #423E38;
font-size: 15.5px; line-height: 1.98;
}
/* 引文：一块浅垫色，左边压一道灰苔细线 —— 是衬在下面的卡纸，不是贴上去的便签 */
html[data-template="morandi"] .field dd.quote {
max-width: 38em;
background: rgba(156, 175, 154, .13);
border-left: 2px solid rgba(82, 101, 79, .34);
border-radius: 2px 10px 10px 2px;
padding: 13px 19px;
color: #474339;
font-family: var(--mo-serif);
line-height: 1.95;
}
html[data-template="morandi"] .story {
max-width: 44em;
font-family: var(--mo-serif);
font-size: 16px; line-height: 2.05;
color: #423E38;
letter-spacing: .012em;
}
/* 造句：序号用灰豆绿，条目之间留白不留线 */
html[data-template="morandi"] .zju-list { gap: 13px; }
html[data-template="morandi"] .zju-list li {
max-width: 42em;
font-size: 15px; line-height: 1.96;
color: #474339;
}
html[data-template="morandi"] .zju-list li::marker { color: var(--mo-green); font-weight: 600; }
/* ============================================================================
* 趣味延伸：全页唯一允许出现的第二块色 —— 灰蓝
* ----------------------------------------------------------------------------
* 整页都是燕麦与灰豆绿，这里换成灰蓝，读者会「顿一下」，这就是板块呼吸。
* 蓝要压得极灰（底只用 14% 的洗色），一浓就成了「科技蓝」，气质立刻跑掉。
* ==========================================================================*/
html[data-template="morandi"] .detail .card.highlight {
background-color: #E3E7EA;
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.39 0 0 0 0 0.42 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"),
linear-gradient(177deg, #E6EAED 0%, #E3E7EA 58%, #DEE3E7 100%);
background-size: 200px 200px, auto;
background-position: 70px 96px, 0 0;
background-repeat: repeat, no-repeat;
border-color: rgba(78, 96, 112, .16);
}
html[data-template="morandi"] .detail .card.highlight h2 { color: #33414C; }
html[data-template="morandi"] .detail .card.highlight h2::before { opacity: .62; }
html[data-template="morandi"] .detail .card.highlight h2::after {
background: linear-gradient(90deg,
rgba(78, 96, 112, .18) 0%,
rgba(78, 96, 112, .07) 50%,
transparent 100%);
}
html[data-template="morandi"] .detail .card.highlight p {
color: #3C4854;
font-size: 15px; line-height: 1.95;
}
html[data-template="morandi"] .gold {
color: var(--mo-green);
font-family: var(--mo-serif);
font-weight: 600;
letter-spacing: .05em;
}
html[data-template="morandi"] .detail .card.highlight .gold { color: #3F5768; }
html[data-template="morandi"] .xhy-list { gap: 10px; }
html[data-template="morandi"] .xhy-list li {
color: #3C4854;
font-size: 15px; line-height: 1.95;
padding-left: 18px;
}
/* 不用菱形点 —— 一枚 4px 的灰蓝小圆，像铅笔点了一下 */
html[data-template="morandi"] .xhy-list li::before {
content: '';
position: absolute; left: 2px; top: .82em;
width: 4px; height: 4px;
background: rgba(78, 96, 112, .55);
font-size: 0;
border-radius: 50%;
}
/* ============================================================================
* 字义分解：四张不同底色的莫兰迪色卡
* ----------------------------------------------------------------------------
* 四张必须一眼看出「四种颜色」，但又都要淡到只是「洗过的一层」——
* 灰裸粉 / 灰豆绿 / 灰蓝 / 燕麦棕，全部压到 10~16% 的浓度。
* 右上角各描一件静物：陶罐 / 枯枝 / 宣纸 / 陶碗 —— 四件东西摆在画室桌上，
* 就是一幅静物画。位置统一在右上（字在左上，右边是空的），
* 不重叠、不歪斜 —— 莫兰迪的静物是摆出来的，不是扔出来的。
* ==========================================================================*/
html[data-template="morandi"] .char-decompose {
/* auto-fit 而不是四列 1fr：三字成语只有三张卡，四列会空出一格 */
grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
gap: 16px;
align-items: stretch;
}
html[data-template="morandi"] .char-item {
position: relative;
overflow: hidden;
gap: 13px;
padding: 24px 20px 24px;
border: 1px solid transparent;
border-radius: 16px;
background-color: var(--mo-rose-wash);
background-image: linear-gradient(172deg, #EEE2E0 0%, #EADCDA 100%);
box-shadow: none;
}
html[data-template="morandi"] .char-item:nth-child(4n+2) {
background-color: var(--mo-green-wash);
background-image: linear-gradient(172deg, #E4E9E0 0%, #DFE5DB 100%);
}
html[data-template="morandi"] .char-item:nth-child(4n+3) {
background-color: var(--mo-blue-wash);
background-image: linear-gradient(172deg, #E1E6EB 0%, #DCE2E8 100%);
}
html[data-template="morandi"] .char-item:nth-child(4n) {
background-color: var(--mo-oat-wash);
background-image: linear-gradient(172deg, #EBE4D6 0%, #E7DFD0 100%);
}
/* 角落速写：34px，透明度 .5，落在字的右侧空白里 */
html[data-template="morandi"] .char-item::after {
content: '';
position: absolute;
right: 16px; top: 16px;
width: 40px; height: 40px;
background-repeat: no-repeat;
background-position: center;
background-size: 40px 40px;
opacity: .62;
pointer-events: none;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%233E3931' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4h8'/%3E%3Cpath d='M13 3.4Q11.6 6.4 10.6 9.4Q4 12.6 4.6 18Q5.2 25 7.8 29'/%3E%3Cpath d='M19 3.4Q20.4 6.4 21.4 9.4Q28 12.6 27.4 18Q26.8 25 24.2 29'/%3E%3Cpath d='M7.8 29h16.4'/%3E%3C/svg%3E");
}
html[data-template="morandi"] .char-item:nth-child(4n+2)::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%233E3931' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 28.6Q12.6 15.6 18 3'/%3E%3Cpath d='M15.4 17.6Q19.4 14.6 25.6 16.6'/%3E%3Cpath d='M12.6 21.4Q7.4 17.8 6 12.6'/%3E%3Cpath d='M17.8 8.6Q20.6 6.4 23.4 7.2'/%3E%3Cpath d='M5 29.8h22'/%3E%3C/svg%3E");
}
html[data-template="morandi"] .char-item:nth-child(4n+3)::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%233E3931' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.4h12.6L27 9.4v20.4H6z'/%3E%3Cpath d='M18.6 3.4v6H27'/%3E%3Cpath d='M9.4 13.6h12.4M9.4 18.2h12.4M9.4 22.8h8'/%3E%3C/svg%3E");
}
html[data-template="morandi"] .char-item:nth-child(4n)::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%233E3931' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.2h26'/%3E%3Cpath d='M5.2 8.2c0 9.4 4.8 14.8 10.8 14.8s10.8-5.4 10.8-14.8'/%3E%3Cpath d='M10.6 27.6h10.8'/%3E%3C/svg%3E");
}
/* 单字：一枚放大的宋体字，不描框、不填底 */
html[data-template="morandi"] .char-glyph {
position: relative;
align-self: flex-start;
width: 62px; height: 62px;
font-family: var(--mo-serif);
font-size: 40px; font-weight: 500;
line-height: 62px;
text-align: left;
color: #34312D;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
text-shadow: none;
}
html[data-template="morandi"] .char-glyph a { color: inherit; }
html[data-template="morandi"] .char-glyph a:hover { color: var(--mo-green); }
html[data-template="morandi"] .char-glyph::after { content: none; display: none; }
html[data-template="morandi"] .char-pron {
font-size: 12.5px; line-height: 1.85;
color: #605C54;
letter-spacing: .01em;
}
html[data-template="morandi"] .char-extra { gap: 6px; }
html[data-template="morandi"] .char-extra-item {
font-size: 10.5px; font-weight: 400;
color: #55514B;
letter-spacing: .05em;
background: rgba(255, 253, 248, .40);
border: 0;
border-radius: 6px;
padding: 2px 7px;
}
html[data-template="morandi"] .char-extra-sep { display: none; }
html[data-template="morandi"] .char-shape {
font-size: 13px; line-height: 1.8;
color: #605C54;
border-top: 1px solid rgba(58, 55, 51, .07);
padding-top: 9px;
}
html[data-template="morandi"] .char-senses { gap: 10px; }
html[data-template="morandi"] .sn-num {
font-family: var(--mo-serif);
color: var(--mo-green);
font-size: 12px; font-weight: 600;
}
html[data-template="morandi"] .sn-title {
font-family: var(--mo-serif);
font-size: 14px; font-weight: 600;
color: #3A3733;
}
html[data-template="morandi"] .sn-text {
font-size: 13px; line-height: 1.8;
color: #4C4841;
}
/* 展开按钮：基类是「主色字 + 白底」，白底在这套灰里会跳出来，必须接管 */
html[data-template="morandi"] .expand-sense {
border: 1px solid rgba(58, 55, 51, .13);
border-radius: 11px;
background: rgba(255, 253, 248, .58);
color: #55514B;
font-size: 12px;
letter-spacing: .06em;
padding: 6px 15px;
box-shadow: none;
transition: border-color .2s, color .2s, background .2s;
}
html[data-template="morandi"] .expand-sense:hover {
border-color: rgba(82, 101, 79, .38);
background: rgba(82, 101, 79, .07);
color: var(--mo-green);
}
html[data-template="morandi"] .expand-sense:active {
background: rgba(82, 101, 79, .12);
color: var(--mo-green-dp);
}
/* ============================================================================
* 接龙：柔和圆角按钮 + 弧形细箭头
* ----------------------------------------------------------------------------
* 节点是一枚圆角 14px 的软牌：比底色亮一档、没有描边、没有内高光。
* 「→」抹掉重画：一条上凸的细弧 + 一枚微翘的尖。弧不是直的 ——
* 直线是图表，弧线才是笔画的走向。
* ==========================================================================*/
html[data-template="morandi"] .tabs {
gap: 6px;
border-bottom: 1px solid rgba(58, 55, 51, .075);
margin-bottom: 22px;
}
html[data-template="morandi"] .tab {
padding: 8px 17px;
margin-bottom: -1px;
border: 0;
border-bottom: 1.5px solid transparent;
border-radius: 10px 10px 0 0;
background: none;
color: #605C54;
font-family: var(--mo-serif);
font-size: 14px; font-weight: 400;
letter-spacing: .07em;
transition: color .2s, border-color .2s, background .2s;
}
html[data-template="morandi"] .tab:hover { color: #3A3733; background: rgba(58, 55, 51, .035); }
html[data-template="morandi"] .tab.active {
color: #34312D;
font-weight: 600;
border-bottom-color: rgba(82, 101, 79, .55);
background: none;
}
html[data-template="morandi"] .jielong-chain { gap: 12px; align-items: center; }
html[data-template="morandi"] .jielong-node {
min-width: 106px;
padding: 8px 22px 9px;
gap: 2px;
border: 1px solid transparent;
border-radius: 14px;
background-color: #F7F3EB;
background-image: linear-gradient(178deg, #F8F4EC 0%, #F3EEE4 100%);
box-shadow: 0 1px 2px rgba(74, 66, 55, .03);
transition: background .2s, box-shadow .2s, transform .2s;
}
html[data-template="morandi"] .jielong-node:hover {
background-image: linear-gradient(178deg, #FAF6EF 0%, #F5F0E7 100%);
box-shadow: 0 2px 8px rgba(74, 66, 55, .06);
transform: translateY(-1px);
}
/* 当前词：灰豆绿的细边 + 一层薄洗色，不用左边那道重笔 */
html[data-template="morandi"] .jielong-node.current {
background-color: var(--mo-green-wash);
background-image: linear-gradient(178deg, #E7ECE3 0%, #E1E7DD 100%);
border-color: rgba(82, 101, 79, .30);
box-shadow: 0 1px 2px rgba(74, 85, 72, .05);
}
html[data-template="morandi"] .jielong-node .jw {
font-family: var(--mo-serif);
font-size: 16px; font-weight: 600;
letter-spacing: .06em;
color: #3A3733;
}
html[data-template="morandi"] .jielong-node.current .jw { color: var(--mo-green-dp); }
html[data-template="morandi"] .jielong-node .jp {
font-size: 10.5px;
color: #6F6A60;
letter-spacing: .04em;
}
html[data-template="morandi"] .jielong-node.current .jp { color: #5C6B58; }
/* 「→」抹掉，改画一条上凸的细弧 + 一枚尖 */
html[data-template="morandi"] .jielong-arrow {
position: relative;
flex: 0 0 36px;
width: 36px; height: 16px;
font-size: 0; color: transparent;
overflow: visible;
}
html[data-template="morandi"] .jielong-arrow::before {
content: '';
position: absolute; left: 1px; top: 6px;
width: 27px; height: 9px;
border-top: 1.5px solid rgba(58, 55, 51, .38);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
html[data-template="morandi"] .jielong-arrow::after {
content: '';
position: absolute; right: 0; top: 8px;
width: 7px; height: 7px;
border-top: 1.5px solid rgba(58, 55, 51, .50);
border-right: 1.5px solid rgba(58, 55, 51, .50);
border-radius: 1.5px;
transform: rotate(40deg);
}
html[data-template="morandi"] .btn-regen {
padding: 8px 20px;
border: 1px solid rgba(58, 55, 51, .13);
border-radius: 13px;
background: rgba(247, 243, 235, .7);
color: #4C4841;
font-family: var(--mo-serif);
font-size: 13px; font-weight: 400;
letter-spacing: .10em; text-indent: .10em;
box-shadow: none;
transition: background .2s, color .2s, border-color .2s;
}
html[data-template="morandi"] .btn-regen:hover {
border-color: rgba(82, 101, 79, .34);
background: rgba(82, 101, 79, .07);
color: var(--mo-green);
}
html[data-template="morandi"] .btn-regen:active {
background: rgba(82, 101, 79, .12);
border-color: rgba(82, 101, 79, .44);
color: var(--mo-green-dp);
}
html[data-template="morandi"] .btn-regen:disabled { opacity: .45; box-shadow: none; }
/* ============================================================================
* 相关成语：舒缓的网格
* ----------------------------------------------------------------------------
* 卡片不做「按下感」：没有描边、只有一层几乎看不见的投影（alpha .03）。
* hover 时上浮 2px、投影深一点点 —— 幅度小到像是纸被风吹得抬了下角。
* ==========================================================================*/
html[data-template="morandi"] .related-grid {
gap: 16px;
align-items: start;
}
html[data-template="morandi"] .related-item {
gap: 5px;
padding: 17px 19px 18px;
border: 1px solid rgba(58, 55, 51, .055);
border-radius: 16px;
background-color: #F4F0E8;
background-image: linear-gradient(178deg, #F5F1EA 0%, #F1ECE3 100%);
box-shadow: 0 1px 3px rgba(74, 66, 55, .028);
transition: transform .22s, box-shadow .22s, background .22s;
}
html[data-template="morandi"] .related-item:hover {
transform: translateY(-2px);
background-image: linear-gradient(178deg, #F8F4ED 0%, #F4EFE6 100%);
box-shadow: 0 4px 14px rgba(74, 66, 55, .06);
}
html[data-template="morandi"] .related-item .rw {
font-family: var(--mo-serif);
font-size: 16px; font-weight: 600;
letter-spacing: .05em;
color: #34312D;
}
html[data-template="morandi"] .related-item .rw-py { color: #6F6A60; font-size: 11.5px; }
html[data-template="morandi"] .related-item small {
font-size: 12.5px; line-height: 1.75;
color: #605C54;
}
/* 相关成语统一底色：四色轮换会让每张卡的上沿出现一块亮斑 ——
那是「高光」，在这套哑光配色里最刺眼的东西。留白与极淡的阴影已经够分层了。 */
html[data-template="morandi"] .related-item:hover { background-image: linear-gradient(178deg, #F8F4ED 0%, #F4EFE6 100%); }
/* ---------- 标签胶囊（近反义词 / 所属标签） ---------- */
html[data-template="morandi"] .chip,
html[data-template="morandi"] a.chip {
border: 1px solid rgba(58, 55, 51, .10);
border-radius: 10px;
background: rgba(255, 253, 248, .56);
color: #4C4841;
font-size: 13px;
padding: 4px 12px;
box-shadow: none;
}
html[data-template="morandi"] a.chip:hover {
border-color: rgba(82, 101, 79, .34);
background: rgba(82, 101, 79, .07);
color: var(--mo-green);
}
html[data-template="morandi"] .chip.plain {
background: none;
border-color: rgba(58, 55, 51, .07);
color: #605C54;
}
/* 首页「换几种查法」的两行小卡：基类带白底与直角，在这套灰里会浮起来 */
html[data-template="morandi"] .chip.chip-py,
html[data-template="morandi"] a.chip.chip-py {
border: 1px solid rgba(58, 55, 51, .085);
border-radius: 12px;
background: rgba(253, 250, 244, .44);
padding: 7px 13px;
}
html[data-template="morandi"] a.chip.chip-py:hover {
border-color: rgba(82, 101, 79, .30);
background: rgba(82, 101, 79, .07);
}
html[data-template="morandi"] .chip-py .cp-word {
color: #3A3733; font-size: 13px; font-weight: 600;
letter-spacing: .02em;
}
html[data-template="morandi"] .chip-py .cp-py {
color: #6F6A60; font-size: 11.5px;
}
html[data-template="morandi"] a.chip.chip-py:hover .cp-word { color: var(--mo-green); }
html[data-template="morandi"] .muted { color: #605C54; }
html[data-template="morandi"] .syn-ant > strong {
font-family: var(--mo-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: .12em;
color: var(--mo-green);
}
/* ---------- 发音按钮：一枚小圆，灰豆绿的细边 ---------- */
html[data-template="morandi"] .pron-btn {
border: 1px solid rgba(82, 101, 79, .30);
border-radius: 50%;
background: rgba(255, 253, 248, .55);
color: var(--mo-green);
box-shadow: none;
}
html[data-template="morandi"] .pron-btn:hover {
border-color: rgba(82, 101, 79, .55);
background: rgba(82, 101, 79, .08);
color: var(--mo-green-dp);
}
/* ============================================================================
* 首页：一页画册的扉页
* ==========================================================================*/
/* 列表页导语：一行 71 字读不动，收到 44 字，右侧余白当留白 */
html[data-template="morandi"] .list-desc {
max-width: 44em;
color: #55514B;
font-size: 14.5px;
line-height: 1.95;
}
html[data-template="morandi"] .list-head h1 {
font-family: var(--mo-serif);
font-weight: 500;
letter-spacing: .06em;
color: #34312D;
}
html[data-template="morandi"] .hero {
padding: 54px 0 26px;
text-align: center;
}
html[data-template="morandi"] .hero h1 {
font-family: var(--mo-serif);
font-size: 40px; font-weight: 500;
letter-spacing: .16em; text-indent: .16em;
color: #34312D;
text-shadow: none;
}
html[data-template="morandi"] .hero-sub {
font-size: 14px; line-height: 1.9;
color: #605C54;
letter-spacing: .04em;
}
html[data-template="morandi"] .hero-sub strong { color: var(--mo-green); font-weight: 600; }
html[data-template="morandi"] .hero-search input {
height: 46px;
border: 1px solid rgba(58, 55, 51, .13);
border-radius: 23px 0 0 23px;
background: rgba(250, 247, 241, .72);
color: var(--mo-ink);
box-shadow: none;
}
html[data-template="morandi"] .hero-search input:focus {
border-color: rgba(82, 101, 79, .40);
box-shadow: 0 0 0 3px rgba(82, 101, 79, .07);
}
html[data-template="morandi"] .hero-search button {
height: 46px;
border-radius: 0 23px 23px 0;
background: var(--mo-green);
border-color: var(--mo-green);
color: #F4F1E9;
font-weight: 500;
letter-spacing: .12em;
box-shadow: none;
}
html[data-template="morandi"] .hero-search button:hover { background: var(--mo-green-dp); }
html[data-template="morandi"] .letters { gap: 8px; }
html[data-template="morandi"] .letter {
border: 1px solid rgba(58, 55, 51, .085);
border-radius: 13px;
background: rgba(246, 241, 232, .62);
color: #4C4841;
font-family: var(--mo-serif);
box-shadow: none;
transition: background .2s, border-color .2s, color .2s;
}
html[data-template="morandi"] .letter small { color: #6F6A60; }
html[data-template="morandi"] .letter:hover {
border-color: rgba(82, 101, 79, .34);
background: rgba(82, 101, 79, .07);
color: var(--mo-green);
transform: none;
}
html[data-template="morandi"] .letter.empty { opacity: .42; }
html[data-template="morandi"] .hot-grid { gap: 12px; }
html[data-template="morandi"] .hot-item {
border: 1px solid rgba(58, 55, 51, .055);
border-radius: 14px;
background: #F3EFE7;
box-shadow: 0 1px 3px rgba(74, 66, 55, .025);
transition: background .2s, box-shadow .2s;
}
html[data-template="morandi"] .hot-item:hover {
background: #F6F2EA;
box-shadow: 0 3px 10px rgba(74, 66, 55, .05);
}
html[data-template="morandi"] .example {
border: 1px solid rgba(58, 55, 51, .06);
border-radius: 16px;
background: #F2EEE6;
box-shadow: 0 1px 3px rgba(74, 66, 55, .025);
}
html[data-template="morandi"] .example-en { color: #4C4841; }
html[data-template="morandi"] .example-cn { color: #6F6A60; }
/* ---------- 404 ---------- */
html[data-template="morandi"] .not-found h1 {
font-family: var(--mo-serif);
color: var(--mo-green);
font-weight: 500;
letter-spacing: .1em;
}
/* ============================================================================
* 页脚：画册最后一页的版权行
* ==========================================================================*/
html[data-template="morandi"] .site-footer {
margin-top: 46px;
background: var(--mo-bg-2);
border-top: 1px solid rgba(58, 55, 51, .075);
color: #5C5851;
}
html[data-template="morandi"] .footer-inner {
padding: 26px 16px 28px;
font-size: 12.5px;
letter-spacing: .04em;
}
html[data-template="morandi"] .footer-nav { gap: 16px; }
html[data-template="morandi"] .footer-nav a {
color: #5C5851;
font-size: 12.5px;
letter-spacing: .06em;
}
html[data-template="morandi"] .footer-nav a:hover { color: var(--mo-green); }
html[data-template="morandi"] .copyright { color: #5C5851; font-size: 12px; }
/* ============================================================================
* 窄屏
* ==========================================================================*/
@media (max-width: 860px) {
html[data-template="morandi"] .detail-head { padding: 32px 0 20px; }
html[data-template="morandi"] .detail-head h1 { font-size: 36px; letter-spacing: .11em; text-indent: .11em; }
html[data-template="morandi"] .card { padding: 24px 24px 26px; border-radius: 18px; }
html[data-template="morandi"] .detail .card:has(.explanation) { padding: 28px 26px 30px; }
html[data-template="morandi"] .card h2 { font-size: 18px; padding-left: 50px; }
html[data-template="morandi"] .char-decompose { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; }
html[data-template="morandi"] .related-grid { gap: 14px; }
}
@media (max-width: 640px) {
html[data-template="morandi"] .header-inner { min-height: 58px; gap: 14px; }
html[data-template="morandi"] .logo { font-size: 18px; letter-spacing: .12em; text-indent: .12em; }
html[data-template="morandi"] .search-box input { height: 36px; border-radius: 18px 0 0 18px; }
html[data-template="morandi"] .search-box button { height: 36px; padding: 0 16px; border-radius: 0 18px 18px 0; }
html[data-template="morandi"] .breadcrumb { padding: 16px 0 0; }
html[data-template="morandi"] .detail-head { padding: 26px 0 18px; }
html[data-template="morandi"] .detail-head::before { width: 48px; height: 30px; margin-bottom: 15px; }
html[data-template="morandi"] .detail-head h1 { font-size: 29px; letter-spacing: .08em; text-indent: .08em; }
html[data-template="morandi"] .pinyin { font-size: 12.5px; letter-spacing: .18em; text-indent: .18em; }
html[data-template="morandi"] .grid-figure { margin: 16px auto 20px; }
html[data-template="morandi"] .tags { gap: 8px; justify-content: flex-start; }
html[data-template="morandi"] .tag { padding: 4px 11px 5px; border-radius: 8px; }
html[data-template="morandi"] .tag-label { font-size: 10px; }
html[data-template="morandi"] .tag-value { font-size: 12.5px; }
html[data-template="morandi"] .card { padding: 22px 18px 24px; border-radius: 16px; margin-bottom: 18px; }
html[data-template="morandi"] .detail .card:has(.explanation) { padding: 24px 20px 26px; border-radius: 18px; }
html[data-template="morandi"] .card h2 { font-size: 17px; padding-left: 46px; padding-bottom: 12px; margin-bottom: 18px; }
html[data-template="morandi"] .card h2::before { width: 34px; height: 34px; margin-top: -17px; background-size: 34px 34px; }
html[data-template="morandi"] .explanation { font-size: 16.5px; line-height: 1.98; }
html[data-template="morandi"] .field { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding: 13px 0; }
html[data-template="morandi"] .field dt { font-size: 12.5px; letter-spacing: .1em; }
html[data-template="morandi"] .field dd { font-size: 15px; line-height: 1.92; }
html[data-template="morandi"] .field dd.quote { padding: 11px 14px; border-radius: 2px 9px 9px 2px; }
html[data-template="morandi"] .story { font-size: 15.5px; line-height: 1.98; }
html[data-template="morandi"] .zju-list li { font-size: 14.5px; line-height: 1.9; }
/* 接龙：竖排，箭头跟着转 90°，否则会用尾巴指着空气 */
html[data-template="morandi"] .jielong-chain {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
html[data-template="morandi"] .jielong-node { padding: 8px 16px 9px; border-radius: 12px; }
html[data-template="morandi"] .jielong-node .jw { font-size: 15px; }
html[data-template="morandi"] .jielong-arrow {
flex: 0 0 18px;
width: 18px; height: 18px;
align-self: center;
transform: rotate(90deg);
}
html[data-template="morandi"] .jielong-arrow::before { top: 5px; }
html[data-template="morandi"] .jielong-arrow::after { top: 3px; }
html[data-template="morandi"] .char-decompose { grid-template-columns: 1fr; gap: 12px; }
html[data-template="morandi"] .char-item { padding: 20px 18px 22px; }
html[data-template="morandi"] .char-glyph { width: 52px; height: 52px; font-size: 34px; line-height: 52px; }
html[data-template="morandi"] .char-item::after { width: 28px; height: 28px; right: 12px; top: 13px; }
html[data-template="morandi"] .related-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
html[data-template="morandi"] .related-item { padding: 14px 14px 15px; border-radius: 13px; }
html[data-template="morandi"] .related-item .rw { font-size: 15px; }
html[data-template="morandi"] .related-item small { font-size: 12px; line-height: 1.7; }
html[data-template="morandi"] .hero { padding: 36px 0 20px; }
html[data-template="morandi"] .hero h1 { font-size: 30px; letter-spacing: .1em; text-indent: .1em; }
html[data-template="morandi"] .hero-search input,
html[data-template="morandi"] .hero-search button { height: 42px; }
html[data-template="morandi"] .site-footer { margin-top: 32px; }
}
@media (max-width: 480px) {
html[data-template="morandi"] .detail-head h1 { font-size: 26px; }
html[data-template="morandi"] .related-grid { grid-template-columns: 1fr; }
html[data-template="morandi"] .explanation { font-size: 16px; }
html[data-template="morandi"] .field { grid-template-columns: 1fr; gap: 4px; }
html[data-template="morandi"] .field dt { padding-top: 0; }
}
@media (max-width: 400px) {
html[data-template="morandi"] .detail-head h1 { font-size: 23px; letter-spacing: .06em; text-indent: .06em; }
html[data-template="morandi"] .tag { padding: 4px 9px 4px; }
html[data-template="morandi"] .tag-value { font-size: 12px; }
html[data-template="morandi"] .card { padding: 20px 15px 22px; }
html[data-template="morandi"] .card h2 { font-size: 16px; padding-left: 42px; }
html[data-template="morandi"] .card h2::before { width: 30px; height: 30px; margin-top: -15px; background-size: 30px 30px; }
html[data-template="morandi"] .explanation { font-size: 15.5px; }
html[data-template="morandi"] .char-item::after { width: 24px; height: 24px; }
}
/* ============================================================================
* 视觉模板：杂志高级暗调轻奢风（html[data-template="luxe"]）
* 想象：一本付费典故专栏的内页。炭黑纸，一克哑光金，一条 1px 的细线，
* 其余全是空白。字号大得有点放肆，但从不加粗到发胖；
* 装饰少得几乎看不见，每一处都有理由。
*
* 跟前几版的关系：
* 纸侘寂靠留白与不齐，赛博国风靠暗底与发光，莫兰迪靠灰与哑。
* 这一版靠**暗**、**细**、**疏** —— 底压到近黑，金压到哑（不渐变、不发光），
* 结构全靠 1px 细线分隔，留白比正文还多。
*
* 六条硬规则：
* 1. 只有一个金：#C6A468。它只出现在标题、单字、序号、当前项、细线。
* 任何地方都不许出现第二个金，更不许渐变金 —— 一渐变就是「土豪金」。
* 2. 线只有 1px，alpha 在 .10 ~ .42 之间。不许 2px 以上描边，不许给卡片加投影：
* 暗底上的投影看不见，只会把卡片糊成一团。
* 3. 直角主义：卡片、标签、按钮圆角一律 ≤ 3px。圆角一大就软，软了就不是杂志。
* 4. 留白从宽：卡片内边距 34~46px，板块间距 24px 起，标题区上留 72px。
* 留白不够，字再大也只是「内容页」。
* 5. 一屏最多一处烟粉 #C9A2A5：选中色、趣味延伸、相关成语 hover、页脚 hover。
* 它是专栏的记号色，不是第二主色 —— 用多了就变成「粉黑少女风」。
* 6. 字重上限 700，只有主标题和单字敢用。正文 400、小字 400、字段名 400。
* 暗底上的粗字会「晕」，700 已经是天花板。
*
* 田字格那张 SVG 是白底红格深字，直接铺在炭黑上会亮成一块伤。
* 用 invert + grayscale + sepia 翻成「金线格子 + 米白字」，
* 再靠 mix-blend-mode: lighten 让它的黑底透成页面底色 —— 像压印，不像贴图。
* 不支持的浏览器会退化成一块深底方图，仍不出戏。
*
* 字体：标题思源宋体（--lx-serif），正文思源黑体（--lx-sans）。
* ==========================================================================*/
html[data-template="luxe"] {
/* ---- 炭黑三档：底 / 卡 / 卡上（越往里越亮一点，但不是灰） ---- */
--lx-bg: #15130F; /* 整页底，偏暖的炭黑 */
--lx-bg-2: #0E0C09; /* 页脚、比页面更深一层 */
--lx-card: #1B1813; /* 卡片 */
--lx-card-2: #201C16; /* 释义主卡 */
--lx-raise: #24201A; /* hover / 内衬 */
/* ---- 墨：浅米白三档（不是纯白，纯白在暗底上会发光刺眼） ---- */
--lx-ink: #E8E1D4; /* 正文，卡面 13.3:1 */
--lx-ink-2: #B9AF9E; /* 8.0:1 */
--lx-ink-3: #978D7C; /* 小字，卡面 5.3:1 */
/* ---- 哑光金：全站唯一强调 ----
* 亮金 #D9BC84 只做 hover 与线，字必须用 #C6A468（卡面 7.4:1） */
--lx-gold: #C6A468;
--lx-gold-lt: #D9BC84;
--lx-gold-dp: #A8874C;
/* ---- 烟粉：专栏的记号色 ---- */
--lx-rose: #C9A2A5;
--lx-rose-dp: #A87F82;
/* ---- 线：全部 1px，全部从金里兑出来 ---- */
--lx-line: rgba(198, 164, 104, .10);
--lx-line-2: rgba(198, 164, 104, .19);
--lx-line-3: rgba(198, 164, 104, .30);
--lx-line-4: rgba(198, 164, 104, .46);
/* ---- 接管基础变量：漏改的规则也不会跳回朱红 ---- */
--primary: #C6A468;
--primary-dark: #D9BC84;
--primary-soft: #241F17;
--ink: #E8E1D4;
--ink-soft: #B9AF9E;
--ink-faint: #978D7C;
--bg: #15130F;
--card: #1B1813;
--border: #2A251D;
--gold: #C6A468;
--radius: 3px;
--shadow: none;
--lx-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
--lx-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei",
"Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-serif: var(--lx-serif);
--font-sans: var(--lx-sans);
/* ---- 顶光：只看得出「上头比下头亮一点」，看不见光源 ----
* 一点金色雾化在页顶，是印刷品受光的那点温，不是 spotlight。 */
--lx-light:
radial-gradient(1100px 620px at 50% -12%, rgba(198, 164, 104, .070), transparent 68%),
radial-gradient(760px 520px at 88% 8%, rgba(201, 162, 165, .030), transparent 72%),
linear-gradient(180deg, #16140F 0%, #14120E 42%, #12100C 100%);
}
/* ---------- 底：炭黑纸 ---------- */
html[data-template="luxe"] body {
background-color: var(--lx-bg);
background-image: var(--lx-light);
background-image:
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.96 0 0 0 0 0.88 0 0 0 0.020 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"),
var(--lx-light);
background-attachment: fixed, scroll;
display: flex;
flex-direction: column;
min-height: 100vh;
color: var(--lx-ink);
font-family: var(--lx-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html[data-template="luxe"] main { flex: 1 0 auto; min-width: 0; }
/* 选中：烟粉在炭黑上落一层薄薄的颜色 */
html[data-template="luxe"] ::selection {
background: rgba(201, 162, 165, .26);
color: #F2ECE0;
}
/* 焦点环：金色细框，是这套版里唯一允许「跳出来」的东西 */
html[data-template="luxe"] a:focus-visible,
html[data-template="luxe"] button:focus-visible,
html[data-template="luxe"] input:focus-visible {
outline: 1px solid var(--lx-gold);
outline-offset: 3px;
}
/* ============================================================================
* 顶部导航：一行极简文字，一条细金线收底
* ----------------------------------------------------------------------------
* 底色带 12% 透明 + 极轻 blur，滚动时纸纹从底下透上来。
* 导航字用金，但只到 78% 浓度 —— 满金会跟主标题抢「最亮」的位置。
* ==========================================================================*/
html[data-template="luxe"] .site-header {
background-color: #14120E;
background-color: rgba(20, 18, 14, .86);
border-bottom: 1px solid var(--lx-line-2);
box-shadow: none;
-webkit-backdrop-filter: saturate(120%) blur(10px);
backdrop-filter: saturate(120%) blur(10px);
}
html[data-template="luxe"] .header-inner { min-height: 66px; gap: 30px; }
html[data-template="luxe"] .logo {
font-family: var(--lx-serif);
font-size: 19px; font-weight: 700;
letter-spacing: .22em; text-indent: .22em;
color: var(--lx-gold);
text-shadow: none;
}
html[data-template="luxe"] .logo::after { content: none; display: none; }
html[data-template="luxe"] .logo:hover { color: var(--lx-gold-lt); }
html[data-template="luxe"] .nav { gap: 2px; }
html[data-template="luxe"] .nav a {
position: relative;
color: rgba(198, 164, 104, .78);
font-size: 12.5px; font-weight: 400;
letter-spacing: .16em;
padding: 8px 14px;
background: none;
border-radius: 0;
transition: color .22s;
}
html[data-template="luxe"] .nav a::after { content: none; display: none; }
html[data-template="luxe"] .nav a::before {
content: '';
position: absolute; left: 14px; right: 14px; bottom: 2px;
height: 1px; background: var(--lx-gold);
transform: scaleX(0); transform-origin: left;
transition: transform .26s ease;
}
html[data-template="luxe"] .nav a:hover { color: var(--lx-gold-lt); background: none; }
html[data-template="luxe"] .nav a:hover::before { transform: scaleX(1); }
/* 搜索框：一条细金框，方角 */
html[data-template="luxe"] .search-box input {
height: 38px;
border: 1px solid var(--lx-line-2); border-right: none;
border-radius: 2px 0 0 2px;
background: rgba(255, 252, 244, .022);
color: var(--lx-ink);
font-size: 13px; letter-spacing: .06em;
box-shadow: none;
transition: border-color .22s, background .22s;
}
html[data-template="luxe"] .search-box input::placeholder { color: #978D7C; letter-spacing: .08em; }
html[data-template="luxe"] .search-box input:focus {
border-color: var(--lx-line-4);
background: rgba(198, 164, 104, .05);
box-shadow: none;
}
html[data-template="luxe"] .search-box button {
height: 38px; padding: 0 20px;
border: 1px solid var(--lx-line-2);
border-radius: 0 2px 2px 0;
background: transparent;
color: var(--lx-gold);
font-size: 12px; font-weight: 400;
letter-spacing: .26em; text-indent: .26em;
transition: background .22s, border-color .22s, color .22s;
}
html[data-template="luxe"] .search-box button:hover {
background: rgba(198, 164, 104, .11);
border-color: var(--lx-line-4);
color: var(--lx-gold-lt);
}
/* 联想下拉：一张从暗处浮起来的卡 */
html[data-template="luxe"] .suggest {
background: #1B1813;
border: 1px solid var(--lx-line-3);
border-radius: 2px;
box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
html[data-template="luxe"] .suggest a {
border-bottom: 1px solid var(--lx-line);
color: var(--lx-ink-2);
font-size: 14px;
transition: background .18s, color .18s;
}
html[data-template="luxe"] .suggest a:hover,
html[data-template="luxe"] .suggest a.active { background: rgba(198, 164, 104, .07); color: var(--lx-gold); }
html[data-template="luxe"] .suggest .s-pinyin { color: #978D7C; font-size: 12px; letter-spacing: .1em; }
/* ============================================================================
* 面包屑：小字、宽字距，分隔用一个金点
* ==========================================================================*/
html[data-template="luxe"] .breadcrumb { padding: 26px 0 0; font-size: 11.5px; }
html[data-template="luxe"] .breadcrumb li {
color: #978D7C;
letter-spacing: .16em;
}
html[data-template="luxe"] .breadcrumb li + li::before {
content: '·';
margin-right: 8px;
color: var(--lx-gold-dp);
}
html[data-template="luxe"] .breadcrumb a { color: #978D7C; transition: color .2s; }
html[data-template="luxe"] .breadcrumb a:hover { color: var(--lx-gold); }
html[data-template="luxe"] .breadcrumb li[aria-current] { color: #B9AF9E; }
/* ============================================================================
* 标题区：杂志封面页 —— 一条竖金线、一个超大标题、一行小拼音
* ----------------------------------------------------------------------------
* 全站唯一允许「居中」的地方。杂志的封面标题永远在正中，
* 这不是排版上的对称癖，是刊物的规矩。
*
* 标题 76px：再大就成海报，再小就镇不住这个留白。
* 字距 .14em —— 汉字不需要额外字距，但放大到这个尺寸后，
* 不加一点呼吸会挤成一坨黑块（尤其「一鸣惊人」这种笔画密的）。
* ==========================================================================*/
html[data-template="luxe"] .detail-head {
text-align: center;
padding: 74px 0 46px;
position: relative;
}
html[data-template="luxe"] .detail-head::before {
content: '';
display: block;
width: 1px; height: 30px;
margin: 0 auto 28px;
background: var(--lx-line-4);
}
html[data-template="luxe"] .detail-head h1 {
font-family: var(--lx-serif);
font-size: 76px;
font-weight: 700;
line-height: 1.14;
letter-spacing: .14em;
text-indent: .14em;
color: var(--lx-gold);
margin-bottom: 22px;
text-shadow: none;
}
html[data-template="luxe"] .detail-head h1::after { content: none; display: none; }
html[data-template="luxe"] .detail-head .head-sub { gap: 18px; }
html[data-template="luxe"] .pinyin {
font-family: var(--lx-sans);
font-size: 12.5px;
font-weight: 400;
letter-spacing: .34em; text-indent: .34em;
color: #978D7C;
line-height: 1.9;
}
/* 注音播放按钮（英汉词典）：一个细金圈 */
html[data-template="luxe"] .pron-btn {
width: 26px; height: 26px;
border: 1px solid var(--lx-line-3);
border-radius: 50%;
background: transparent;
color: var(--lx-gold);
font-size: 11px;
}
html[data-template="luxe"] .pron-btn:hover { background: rgba(198, 164, 104, .12); border-color: var(--lx-line-4); color: var(--lx-gold-lt); }
html[data-template="luxe"] .pron-btn.playing { background: rgba(198, 164, 104, .18); color: var(--lx-gold-lt); }
/* ============================================================================
* 田字格：一块压在炭黑上的金线格子
* ----------------------------------------------------------------------------
* 那张 SVG 自带纯白底 + 朱红格 + 墨黑字，铺在暗底上会亮成一块白斑。
* invert 把白翻成黑、红翻成青，grayscale 抹掉色相，sepia 统一拉回暖调，
* saturate 把暖调推到金色 —— 四步之后，格线成了哑光金、字成了米白。
* lighten 让翻出来的纯黑底透成页面底色，只在有笔画的地方留下东西。
* 亮度压到 .84：金要哑，不能亮过标题。
* ==========================================================================*/
html[data-template="luxe"] .grid-figure { margin: 2px 0 30px; padding: 0; }
html[data-template="luxe"] .grid-img {
border-radius: 2px;
filter: invert(1) grayscale(1) sepia(1) saturate(2.3) brightness(.84) contrast(.96);
mix-blend-mode: lighten;
}
/* ============================================================================
* 属性标签：细金线框，不填色
* ----------------------------------------------------------------------------
* 前几版这里是实心色块。轻奢没有色块 —— 只有一根线、一个字。
* 四枚标签同色同形，不做彩色轮换：轮换是糖果系的语法。
* ==========================================================================*/
html[data-template="luxe"] .tags {
gap: 9px;
padding: 6px 0 4px;
justify-content: center;
}
html[data-template="luxe"] .tag {
display: inline-flex; align-items: center; gap: 9px;
background: transparent;
border: 1px solid var(--lx-line-2);
border-radius: 2px;
padding: 6px 15px;
transition: border-color .24s, background .24s;
}
html[data-template="luxe"] .tag:hover {
border-color: var(--lx-line-4);
background: rgba(198, 164, 104, .045);
}
html[data-template="luxe"] .tag-label {
color: #978D7C;
font-size: 10.5px;
font-weight: 400;
letter-spacing: .18em;
}
html[data-template="luxe"] .tag-value {
color: #D9CDB6;
font-size: 12.5px;
font-weight: 400;
letter-spacing: .08em;
}
/* ============================================================================
* 卡片：一块比页面亮半档的炭，一圈 1px 金边，直角
* ----------------------------------------------------------------------------
* 不加投影。暗底上的投影只会让边缘发浑，看起来像图片压缩坏了。
* 层次全靠那根 1px 的线 —— 线在，卡就在。
* ==========================================================================*/
html[data-template="luxe"] .card {
background: var(--lx-card);
border: 1px solid var(--lx-line);
border-radius: 3px;
box-shadow: none;
padding: 34px 38px 32px;
margin-bottom: 24px;
}
/* 板块标题：宋体、宽字距、后面拖一根 34px 的金色短线 */
html[data-template="luxe"] .card h2 {
display: flex;
align-items: center;
gap: 18px;
font-family: var(--lx-serif);
font-size: 19px;
font-weight: 700;
letter-spacing: .14em;
color: #DED5C4;
padding-bottom: 0;
margin-bottom: 26px;
line-height: 1.55;
}
html[data-template="luxe"] .card h2::before { content: none; display: none; }
html[data-template="luxe"] .card h2::after {
content: '';
position: static;
flex: 0 0 auto;
width: 34px; height: 1px;
border-radius: 0;
background: var(--lx-line-4);
}
/* 列表页字母卡里的 h2 是给读屏用的，视觉上必须完全不存在 ——
它的 ::after 那根金线会从 1px 裁剪框里漏出来，在卡顶留一道横线。 */
html[data-template="luxe"] .sr-only { display: block; padding: 0; }
html[data-template="luxe"] .sr-only::before,
html[data-template="luxe"] .sr-only::after { content: none; display: none; }
/* ============================================================================
* 释义卡：半透深灰 + 更亮一圈金边，正文大一号
* ----------------------------------------------------------------------------
* 这是详情页的「正文首页」。比别的卡透明一点（底下的纸纹透得更多），
* 比别的卡暗一点（#201C16 反过来更沉），内边距 46px —— 一段话周围留足空气。
* ==========================================================================*/
html[data-template="luxe"] .detail > .card:has(.explanation) {
background: rgba(32, 28, 22, .62);
border-color: var(--lx-line-3);
padding: 46px 46px 42px;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
html[data-template="luxe"] .explanation {
font-family: var(--lx-sans);
font-size: 19px;
line-height: 2.05;
color: #EFE8DA;
letter-spacing: .03em;
}
/* 首字提亮：不浮起、不下沉，只把第一个字放大 1.4 倍并点上金色。
* 试过真正的首字下沉（float + 3em），但释义常常只有一两行 ——
* 一个字沉到第三行以下，下面就吊着一块空白，像版式塌了。
* 放大不脱行，任何长度都成立。 */
html[data-template="luxe"] .explanation::first-letter {
font-family: var(--lx-serif);
font-size: 1.42em;
font-weight: 700;
color: var(--lx-gold);
letter-spacing: .04em;
}
/* ============================================================================
* 字段列表：左边一列金色小标签，右边正文
* ----------------------------------------------------------------------------
* 字段名用 12.5px + .18em 字距，像词典里的栏目标签；
* 不用 700 —— 粗一档就变成「表格表头」，这本杂志没有表头。
* ==========================================================================*/
/* 同 crayon：列宽不能写死。这里 dt 是 nowrap 的 12px/.18em 金色小字，
* 820 断点把列压到 68px 后，「柯林斯星级」实测 71px，压到右边的释义上。
* 一样改成 .fields 统一算列宽。 */
html[data-template="luxe"] .fields {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 24px;
row-gap: 24px;
}
html[data-template="luxe"] .field { display: contents; }
html[data-template="luxe"] .field:first-child dt { margin-top: 2px; }
html[data-template="luxe"] .field dt {
grid-column: 1;
min-width: 74px;
box-sizing: border-box;
font-weight: 400;
color: var(--lx-gold);
font-size: 12px;
letter-spacing: .18em;
padding-top: 5px;
white-space: nowrap;
}
html[data-template="luxe"] .field dd {
grid-column: 2;
color: #DED5C4;
font-size: 15.5px;
line-height: 1.95;
}
html[data-template="luxe"] .field dd.quote {
background: rgba(255, 252, 244, .020);
border-left: 1px solid var(--lx-line-3);
border-radius: 0;
padding: 16px 22px;
max-width: 32em;
color: #C9BFAE;
font-family: var(--lx-serif);
font-size: 15px;
line-height: 2;
letter-spacing: .02em;
}
/* 造句：编号金色，行距放开 */
html[data-template="luxe"] .zju-list { padding-left: 24px; gap: 12px; }
html[data-template="luxe"] .zju-list li { color: #DED5C4; font-size: 15px; line-height: 1.95; }
html[data-template="luxe"] .zju-list li::marker { color: var(--lx-gold); font-weight: 400; font-size: 13px; }
/* 故事：正文里的叙述段，字距略松，像刊物的长文 */
html[data-template="luxe"] .story {
color: #DED5C4;
font-size: 15.5px;
line-height: 2.05;
letter-spacing: .02em;
}
/* 近反义词：金色小标签 + 细线胶囊 */
html[data-template="luxe"] .syn-ant { margin-bottom: 16px; }
html[data-template="luxe"] .syn-ant:last-child { margin-bottom: 0; }
html[data-template="luxe"] .syn-ant > strong {
width: 70px;
color: var(--lx-gold);
font-size: 12px;
font-weight: 400;
letter-spacing: .18em;
}
html[data-template="luxe"] .chips { gap: 9px; }
html[data-template="luxe"] .chip {
background: transparent;
border: 1px solid var(--lx-line-2);
border-radius: 2px;
color: #C9BFAE;
font-size: 13.5px;
padding: 4px 14px;
letter-spacing: .04em;
transition: border-color .22s, color .22s, background .22s;
}
html[data-template="luxe"] a.chip:hover {
border-color: var(--lx-line-4);
background: rgba(198, 164, 104, .06);
color: var(--lx-gold);
}
html[data-template="luxe"] .chip.plain {
background: transparent;
border: 1px solid rgba(232, 225, 212, .09);
color: #978D7C;
}
/* 带拼音的两行胶囊（首页「换几种查法」）：内边距与字色都要接手，
否则会退回基类的白底直角 */
html[data-template="luxe"] .chip.chip-py {
display: inline-flex; flex-direction: column; align-items: flex-start;
padding: 9px 16px 10px; line-height: 1.35; gap: 3px;
border-radius: 2px;
border: 1px solid var(--lx-line-2);
background: transparent;
}
html[data-template="luxe"] .chip-py .cp-word { color: #DED5C4; font-size: 13.5px; font-weight: 400; letter-spacing: .08em; }
html[data-template="luxe"] .chip-py .cp-py { color: #978D7C; font-size: 11px; letter-spacing: .06em; }
html[data-template="luxe"] a.chip.chip-py:hover { border-color: var(--lx-line-4); background: rgba(198, 164, 104, .06); }
html[data-template="luxe"] a.chip.chip-py:hover .cp-word { color: var(--lx-gold); }
/* ============================================================================
* 趣味延伸：全站唯一带烟粉的板块
* ----------------------------------------------------------------------------
* 左边一根烟粉细线，配一枚烟粉的栏目标签。烟粉在这里是「专栏小编按」的位置，
* 换成金色就只是又一块内容；换成烟粉，它才像加进去的一句旁白。
* ==========================================================================*/
html[data-template="luxe"] .detail .card.highlight {
background: #1F1A16;
border-color: rgba(201, 162, 165, .16);
border-left: 1px solid rgba(201, 162, 165, .62);
}
html[data-template="luxe"] .detail .card.highlight h2 { color: #DED5C4; }
html[data-template="luxe"] .detail .card.highlight h2::after { background: rgba(201, 162, 165, .62); }
html[data-template="luxe"] .detail .card.highlight p { color: #DED5C4; font-size: 15px; line-height: 1.95; }
html[data-template="luxe"] .detail .card.highlight .gold {
color: var(--lx-rose);
font-weight: 400;
font-size: 12px;
letter-spacing: .18em;
margin-right: 12px;
}
html[data-template="luxe"] .gold { color: var(--lx-gold); }
html[data-template="luxe"] .xhy-list { gap: 9px; }
html[data-template="luxe"] .xhy-list li { color: #DED5C4; font-size: 15px; line-height: 1.9; padding-left: 18px; }
/* 条目符号：一个 3px 的烟粉小方块。
* 用「—」会和句中自带的「——」撞在一起，读成「— 半夜里放鞭炮 —— 一鸣惊人」，
* 一行三个破折号，像排版出错。 */
html[data-template="luxe"] .xhy-list li::before {
content: '';
left: 1px; top: .92em;
width: 3px; height: 3px;
background: rgba(201, 162, 165, .72);
font-size: 0;
}
/* ============================================================================
* 字义分解：四张深色卡，一个字、一根细线、几行小字
* ----------------------------------------------------------------------------
* 单字 46px 宋体金 —— 这是全页除了主标题之外最大的字，必须给它让位：
* 卡片上内边距 26px、字下压一根通栏细线，字之外的部分全部退成灰。
* 四张卡不做四色轮换，只在第 2、4 张上多给 5% 的底亮，形成极轻的节奏。
* ==========================================================================*/
html[data-template="luxe"] .char-decompose { gap: 14px; align-items: stretch; }
html[data-template="luxe"] .char-item {
background: #191611;
border: 1px solid var(--lx-line-2);
border-radius: 3px;
padding: 26px 22px 24px;
gap: 16px;
transition: border-color .26s, background .26s;
}
html[data-template="luxe"] .char-item:nth-child(2n) { background: #1C1914; }
html[data-template="luxe"] .char-item:hover { border-color: var(--lx-line-3); }
html[data-template="luxe"] .char-item::after { content: none; display: none; }
html[data-template="luxe"] .char-glyph {
align-self: stretch;
width: auto; height: auto;
display: flex; flex-direction: column;
align-items: flex-start; justify-content: flex-start;
font-family: var(--lx-serif);
font-size: 46px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
color: var(--lx-gold);
background: none;
border: none;
border-bottom: 1px solid var(--lx-line-2);
border-radius: 0;
padding: 0 0 14px;
transition: color .26s, border-color .26s;
}
html[data-template="luxe"] .char-item:hover .char-glyph { color: var(--lx-gold-lt); border-bottom-color: var(--lx-line-3); }
html[data-template="luxe"] .char-glyph a { color: inherit; }
html[data-template="luxe"] .char-glyph a:hover { color: var(--lx-gold-lt); }
html[data-template="luxe"] .char-pron {
color: #978D7C;
font-size: 12px;
line-height: 1.85;
letter-spacing: .04em;
margin-bottom: 8px;
}
html[data-template="luxe"] .char-extra { gap: 6px; margin-bottom: 8px; }
html[data-template="luxe"] .char-extra-item {
color: #A9A08F;
background: transparent;
border: 1px solid var(--lx-line-2);
border-radius: 2px;
font-size: 10.5px;
letter-spacing: .1em;
padding: 1px 7px;
line-height: 1.7;
}
html[data-template="luxe"] .char-extra-sep { color: #978D7C; font-size: 11px; }
html[data-template="luxe"] .char-shape { color: #A9A08F; font-size: 13px; line-height: 1.85; margin-bottom: 8px; }
html[data-template="luxe"] .char-senses { gap: 10px; }
html[data-template="luxe"] .sn-num { color: var(--lx-gold); font-size: 12px; font-weight: 400; line-height: 1.9; }
html[data-template="luxe"] .sn-title { color: #DED5C4; font-size: 14.5px; font-weight: 400; letter-spacing: .04em; }
html[data-template="luxe"] .sn-text { color: #A9A08F; font-size: 13px; line-height: 1.9; margin-top: 3px; }
html[data-template="luxe"] .expand-sense {
background: transparent;
border: 1px solid var(--lx-line-2);
border-radius: 2px;
color: #B9AF9E;
font-size: 11.5px;
letter-spacing: .12em;
padding: 6px 14px;
transition: border-color .22s, color .22s, background .22s;
}
html[data-template="luxe"] .expand-sense:hover {
border-color: var(--lx-line-4);
background: rgba(198, 164, 104, .06);
color: var(--lx-gold);
}
html[data-template="luxe"] .expand-sense:active { background: rgba(198, 164, 104, .12); color: var(--lx-gold-lt); }
/* ============================================================================
* 成语接龙：只有字，没有按钮
* ----------------------------------------------------------------------------
* 「极简文字按钮」的意思是：取消底色、取消边框、取消圆角，
* 让接龙读起来像一行诗，不像一排 tag。当前项靠金色 + 一根下划线立住。
* 箭头不用字符「→」（字体的箭头粗细不可控），用 26px 的 1px 金线 + 一个 45° 箭簇。
* ==========================================================================*/
html[data-template="luxe"] .tabs {
gap: 26px;
border-bottom: 1px solid var(--lx-line);
margin-bottom: 24px;
}
html[data-template="luxe"] .tab {
padding: 0 0 13px;
font-size: 12.5px;
letter-spacing: .14em;
color: #978D7C;
border-bottom: 1px solid transparent;
margin-bottom: -1px;
transition: color .24s, border-color .24s;
}
html[data-template="luxe"] .tab:hover { color: #DED5C4; }
html[data-template="luxe"] .tab.active {
color: var(--lx-gold);
font-weight: 400;
border-bottom-color: var(--lx-gold);
}
html[data-template="luxe"] .jielong-chain { gap: 6px 22px; margin-bottom: 24px; align-items: flex-start; }
html[data-template="luxe"] .jielong-node {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 4px 0 5px;
min-width: 0;
background: none;
border: none;
border-bottom: 1px solid transparent;
border-radius: 0;
transition: border-color .24s;
}
html[data-template="luxe"] .jielong-node:hover { border-bottom-color: var(--lx-line-3); box-shadow: none; transform: none; }
html[data-template="luxe"] .jielong-node .jw {
font-family: var(--lx-serif);
font-size: 17px; font-weight: 400;
line-height: 1.3;
color: #DED5C4;
letter-spacing: .08em;
transition: color .24s;
}
html[data-template="luxe"] .jielong-node:hover .jw { color: var(--lx-gold-lt); }
html[data-template="luxe"] .jielong-node .jp {
font-size: 10.5px;
line-height: 1.5;
color: #978D7C;
letter-spacing: .1em;
transition: color .24s;
}
html[data-template="luxe"] .jielong-node:hover .jp { color: #978D7C; }
html[data-template="luxe"] .jielong-node.current { background: none; border-bottom-color: var(--lx-gold); }
html[data-template="luxe"] .jielong-node.current .jw { color: var(--lx-gold); font-weight: 700; }
html[data-template="luxe"] .jielong-node.current .jp { color: #978D7C; }
/* 细金线箭头：一半是直线上，一半是 45° 的箭簇 */
html[data-template="luxe"] .jielong-arrow {
position: relative;
flex: 0 0 26px; width: 26px; height: 14px;
margin-top: 8px;
font-size: 0; color: transparent;
line-height: 0;
}
html[data-template="luxe"] .jielong-arrow::before {
content: '';
position: absolute; left: 0; top: 50%;
width: 25px; height: 1px;
background: var(--lx-line-3);
}
html[data-template="luxe"] .jielong-arrow::after {
content: '';
position: absolute; right: 0; top: 50%;
width: 5px; height: 5px;
border-top: 1px solid var(--lx-line-4);
border-right: 1px solid var(--lx-line-4);
transform: translateY(-50%) rotate(45deg);
}
html[data-template="luxe"] .btn-regen {
background: transparent;
border: 1px solid var(--lx-line-2);
border-radius: 2px;
color: #B9AF9E;
font-size: 12px;
letter-spacing: .16em;
padding: 9px 22px;
transition: border-color .22s, color .22s, background .22s;
}
html[data-template="luxe"] .btn-regen:hover {
background: rgba(198, 164, 104, .06);
border-color: var(--lx-line-4);
color: var(--lx-gold);
}
html[data-template="luxe"] .btn-regen:active { background: rgba(198, 164, 104, .13); color: var(--lx-gold-lt); }
html[data-template="luxe"] .btn-regen:disabled { opacity: .5; color: #978D7C; border-color: var(--lx-line); }
/* ============================================================================
* 相关成语：三列稀疏网格，卡片只有一圈极淡的线
* ----------------------------------------------------------------------------
* 四列太挤（1080 宽下每张 240px，成语 + 一句解释会挤成三行），
* 三列 + 26px 列距，一张卡里只有「词 + 一句小字」。
* hover 时词变烟粉、边框亮一档 —— 这是全站最后一处烟粉。
* ==========================================================================*/
html[data-template="luxe"] .related-grid {
grid-template-columns: repeat(3, 1fr);
gap: 18px 26px;
}
html[data-template="luxe"] .related-item {
background: transparent;
border: 1px solid var(--lx-line);
border-radius: 2px;
padding: 20px 22px;
gap: 7px;
transition: border-color .26s, background .26s;
}
html[data-template="luxe"] .related-item:hover {
border-color: rgba(201, 162, 165, .34);
background: rgba(201, 162, 165, .035);
box-shadow: none;
transform: none;
}
html[data-template="luxe"] .related-item .rw {
font-family: var(--lx-serif);
font-size: 18px; font-weight: 400;
color: #E8E1D4;
letter-spacing: .1em;
transition: color .26s;
}
html[data-template="luxe"] .related-item:hover .rw { color: var(--lx-rose); }
html[data-template="luxe"] .related-item .rw-py { color: #978D7C; font-size: 11px; letter-spacing: .12em; }
html[data-template="luxe"] .related-item small { color: #978D7C; font-size: 12px; line-height: 1.85; }
/* ============================================================================
* 首页：一个巨大的刊名、一句副题、一条搜索栏
* ==========================================================================*/
html[data-template="luxe"] .hero { padding: 88px 0 44px; }
html[data-template="luxe"] .hero h1 {
font-family: var(--lx-serif);
font-size: 52px;
font-weight: 700;
letter-spacing: .18em; text-indent: .18em;
color: var(--lx-gold);
margin-bottom: 18px;
line-height: 1.24;
}
html[data-template="luxe"] .hero-sub {
color: #978D7C;
font-size: 12.5px;
letter-spacing: .18em;
margin-bottom: 34px;
}
html[data-template="luxe"] .hero-sub strong { color: var(--lx-gold-lt); font-weight: 400; }
html[data-template="luxe"] .hero-search { max-width: 620px; }
html[data-template="luxe"] .hero-search input {
height: 50px;
padding: 0 20px;
border: 1px solid var(--lx-line-2); border-right: none;
border-radius: 2px 0 0 2px;
background: rgba(255, 252, 244, .025);
color: var(--lx-ink);
font-size: 14px;
letter-spacing: .06em;
}
html[data-template="luxe"] .hero-search input::placeholder { color: #978D7C; letter-spacing: .1em; }
html[data-template="luxe"] .hero-search input:focus {
border-color: var(--lx-line-4);
background: rgba(198, 164, 104, .05);
box-shadow: none;
}
html[data-template="luxe"] .hero-search button {
height: 50px; padding: 0 32px;
border: 1px solid var(--lx-line-2);
border-radius: 0 2px 2px 0;
background: transparent;
color: var(--lx-gold);
font-size: 12.5px; font-weight: 400;
letter-spacing: .28em; text-indent: .28em;
transition: background .22s, border-color .22s, color .22s;
}
html[data-template="luxe"] .hero-search button:hover {
background: rgba(198, 164, 104, .12);
border-color: var(--lx-line-4);
color: var(--lx-gold-lt);
}
/* 拼音字母卡：一格一格的小方框，像杂志的目录 */
html[data-template="luxe"] .letters { gap: 8px; }
html[data-template="luxe"] .letter {
background: transparent;
border: 1px solid var(--lx-line);
border-radius: 2px;
color: var(--lx-gold);
font-family: var(--lx-serif);
font-size: 17px; font-weight: 400;
padding: 11px 4px;
transition: border-color .22s, background .22s, color .22s;
}
html[data-template="luxe"] .letter small { color: #978D7C; font-size: 10.5px; font-weight: 400; letter-spacing: .06em; }
html[data-template="luxe"] .letter:hover {
border-color: var(--lx-line-4);
background: rgba(198, 164, 104, .055);
color: var(--lx-gold-lt);
}
html[data-template="luxe"] .letter.empty { color: #4E4941; border-color: rgba(198, 164, 104, .05); }
/* 热门成语：三列，只有一根底线 */
html[data-template="luxe"] .hot-grid { gap: 12px 26px; }
html[data-template="luxe"] .hot-item {
background: transparent;
border: none;
border-bottom: 1px solid var(--lx-line);
border-radius: 0;
padding: 14px 2px 16px;
gap: 5px;
transition: border-color .24s;
}
html[data-template="luxe"] .hot-item:hover {
border-bottom-color: var(--lx-line-4);
background: none;
box-shadow: none;
transform: none;
}
html[data-template="luxe"] .hot-word {
font-family: var(--lx-serif);
font-size: 18px; font-weight: 400;
color: #E8E1D4;
letter-spacing: .1em;
transition: color .24s;
}
html[data-template="luxe"] .hot-item:hover .hot-word { color: var(--lx-gold-lt); }
html[data-template="luxe"] .hot-pinyin { color: #978D7C; font-size: 11px; letter-spacing: .12em; }
html[data-template="luxe"] .hot-expl { color: #978D7C; font-size: 12.5px; line-height: 1.8; }
/* ============================================================================
* 列表页
* ==========================================================================*/
html[data-template="luxe"] .list-head { padding: 40px 0 12px; }
html[data-template="luxe"] .list-head h1 {
font-family: var(--lx-serif);
font-size: 38px;
font-weight: 700;
letter-spacing: .12em;
color: var(--lx-gold);
line-height: 1.3;
margin-bottom: 10px;
}
html[data-template="luxe"] .muted { color: #978D7C; font-size: 12.5px; letter-spacing: .06em; }
/* 列表页导语：一行最长 44em —— 再长眼睛要跑回来时找不到下一行的头 */
html[data-template="luxe"] .list-desc {
max-width: 44em;
color: #A9A08F;
font-size: 14px;
line-height: 2;
margin-top: 10px;
}
html[data-template="luxe"] .list-desc a { color: var(--lx-gold); }
html[data-template="luxe"] .list-desc a:hover { color: var(--lx-gold-lt); }
html[data-template="luxe"] .result-list {
background: transparent;
border: 1px solid var(--lx-line);
border-radius: 2px;
box-shadow: none;
overflow: hidden;
}
html[data-template="luxe"] .result-item {
border-bottom: 1px solid var(--lx-line);
padding: 18px 24px;
transition: background .2s;
}
html[data-template="luxe"] .result-item:last-child { border-bottom: none; }
html[data-template="luxe"] .result-item:hover { background: rgba(198, 164, 104, .045); }
html[data-template="luxe"] .result-item .rw {
font-family: var(--lx-serif);
font-size: 18px; font-weight: 400;
color: #E8E1D4;
letter-spacing: .1em;
transition: color .2s;
}
html[data-template="luxe"] .result-item:hover .rw { color: var(--lx-gold); }
html[data-template="luxe"] .result-item .rp { color: #978D7C; font-size: 11px; letter-spacing: .12em; }
html[data-template="luxe"] .result-item .re { color: #978D7C; font-size: 13px; line-height: 1.85; }
html[data-template="luxe"] .pager { gap: 18px; padding: 26px 0; }
html[data-template="luxe"] .pager a {
background: transparent;
border: 1px solid var(--lx-line-2);
border-radius: 2px;
color: var(--lx-gold);
font-size: 12px;
letter-spacing: .14em;
padding: 7px 18px;
transition: border-color .22s, background .22s;
}
html[data-template="luxe"] .pager a:hover {
border-color: var(--lx-line-4);
background: rgba(198, 164, 104, .06);
color: var(--lx-gold-lt);
}
html[data-template="luxe"] .pager span { color: #978D7C; font-size: 12px; letter-spacing: .1em; }
/* 拼音索引页的字母块：26 条 16px 的金色标题会糊成一片，
* 标题退回米白宋体（当成目录条目读），hover 才转金 */
html[data-template="luxe"] .letter-block { padding: 17px 0; border-bottom: 1px solid var(--lx-line); }
html[data-template="luxe"] .letter-block h3 { gap: 12px; }
html[data-template="luxe"] .letter-block h3 a {
font-family: var(--lx-serif);
font-size: 15px; font-weight: 400;
letter-spacing: .08em;
color: #DED5C4;
transition: color .22s;
}
html[data-template="luxe"] .letter-block h3 a:hover { color: var(--lx-gold); text-decoration: none; }
html[data-template="luxe"] .letter-block .lb-cnt { color: #978D7C; font-size: 11.5px; letter-spacing: .1em; }
html[data-template="luxe"] .letter-block .lb-ex { color: #A9A08F; font-size: 13.5px; line-height: 1.9; margin-top: 6px; }
/* 友情链接（只在首页出现）：基类把链接写死成 #5b6167，在炭黑上几乎看不见 */
html[data-template="luxe"] .friend-links .fl-list li { border-bottom: 1px solid var(--lx-line); }
html[data-template="luxe"] .friend-links .fl-list a { color: #B9AF9E; font-size: 13.5px; letter-spacing: .04em; transition: color .22s; }
html[data-template="luxe"] .friend-links .fl-list a:hover { color: var(--lx-gold); }
/* 标签分类块的 h2：基类为了排版把它那根短线 display:none 掉了，
* 这里要重新打开，否则全站只有这一处标题旁没有金线 */
html[data-template="luxe"] .card .tag-cls-title::after { display: block; }
html[data-template="luxe"] .tag-cls-head { gap: 16px; margin-bottom: 14px; }
html[data-template="luxe"] .tag-cls-more { color: var(--lx-gold); font-size: 12px; letter-spacing: .12em; transition: color .22s; }
html[data-template="luxe"] .tag-cls-more:hover { color: var(--lx-gold-lt); }
html[data-template="luxe"] .tag-cls-intro { color: #A9A08F; font-size: 13.5px; line-height: 2; }
/* 标签页的词墙：一页 200 多个词，如果每个都描边，就是一整屏金色小方框，
* 密得看不清词本身。这里去掉边框，只留文字与宽的行距 ——
* 像杂志末尾的索引页，鼠标移上去才浮出一个框。 */
html[data-template="luxe"] .tag-groups .chip {
background: transparent;
border-color: transparent;
padding: 5px 9px;
color: #C9BFAE;
font-size: 13px;
}
html[data-template="luxe"] a.tag-groups .chip:hover,
html[data-template="luxe"] .tag-groups a.chip:hover {
border-color: var(--lx-line-3);
background: rgba(198, 164, 104, .05);
color: var(--lx-gold);
}
html[data-template="luxe"] .tag-groups .chip.plain { color: #978D7C; border-color: transparent; }
html[data-template="luxe"] .tag-groups .chips { gap: 2px 8px; }
html[data-template="luxe"] .tag-grp { margin-bottom: 14px; }
html[data-template="luxe"] .tag-grp-head { color: var(--lx-gold); }
html[data-template="luxe"] .tag-grp-head small { color: #978D7C; }
/* 导语类的长段落：一行超过 40 多个汉字，眼睛回来找不到下一行的头 */
html[data-template="luxe"] .tag-lead,
html[data-template="luxe"] .tag-intro p { max-width: 40em; line-height: 2.05; color: #A9A08F; font-size: 13.5px; }
html[data-template="luxe"] .tag-lead { color: #978D7C; }
/* ============================================================================
* 404 / 空状态
* ==========================================================================*/
html[data-template="luxe"] .not-found h1 {
font-family: var(--lx-serif);
font-size: 96px;
font-weight: 700;
letter-spacing: .1em;
color: #4E463A;
}
html[data-template="luxe"] .not-found p { color: #978D7C; }
html[data-template="luxe"] .empty { color: #978D7C; }
/* ============================================================================
* 页脚：比页面再暗一层，只留一根金线
* ==========================================================================*/
html[data-template="luxe"] .site-footer {
background: var(--lx-bg-2);
border-top: 1px solid var(--lx-line);
color: #978D7C;
margin-top: 64px;
}
html[data-template="luxe"] .footer-inner { padding: 36px 16px 32px; gap: 12px; }
html[data-template="luxe"] .footer-nav { gap: 26px; }
html[data-template="luxe"] .footer-nav a {
color: #978D7C;
font-size: 12px;
letter-spacing: .16em;
transition: color .24s;
}
html[data-template="luxe"] .footer-nav a:hover { color: var(--lx-rose); }
html[data-template="luxe"] .footer-hub { border-top: 1px solid rgba(198, 164, 104, .07); }
html[data-template="luxe"] .footer-hub .fh-label { color: #978D7C; font-size: 11px; letter-spacing: .12em; }
html[data-template="luxe"] .footer-hub a { color: #978D7C; font-size: 12px; }
html[data-template="luxe"] .footer-hub a:hover { color: #B9AF9E; }
html[data-template="luxe"] .copyright { color: #978D7C; font-size: 11px; letter-spacing: .1em; }
/* ============================================================================
* 响应式：只做「字缩水、格子减列」，不做任何结构变化
* ----------------------------------------------------------------------------
* 每档都重算过标题字号：76 → 58 → 44 → 36。
* 汉字在这个尺寸上再小就失去「封面感」，宁可让留白先瘦下来。
* ==========================================================================*/
@media (max-width: 1080px) {
html[data-template="luxe"] .detail-head h1 { font-size: 62px; }
html[data-template="luxe"] .detail-head { padding: 60px 0 38px; }
html[data-template="luxe"] .card { padding: 30px 30px 28px; }
html[data-template="luxe"] .detail > .card:has(.explanation) { padding: 38px 34px 36px; }
html[data-template="luxe"] .explanation { font-size: 18px; line-height: 2; }
html[data-template="luxe"] .related-grid { grid-template-columns: repeat(3, 1fr); gap: 16px 18px; }
html[data-template="luxe"] .char-glyph { font-size: 40px; }
html[data-template="luxe"] .hero h1 { font-size: 44px; }
}
@media (max-width: 860px) {
html[data-template="luxe"] .detail-head h1 { font-size: 50px; letter-spacing: .1em; text-indent: .1em; }
html[data-template="luxe"] .char-decompose { grid-template-columns: repeat(2, 1fr); }
html[data-template="luxe"] .related-grid { grid-template-columns: repeat(2, 1fr); }
html[data-template="luxe"] .hot-grid { grid-template-columns: repeat(2, 1fr); }
html[data-template="luxe"] .fields { column-gap: 18px; row-gap: 18px; }
}
@media (max-width: 640px) {
html[data-template="luxe"] .detail-head { padding: 44px 0 30px; }
html[data-template="luxe"] .detail-head::before { height: 22px; margin-bottom: 20px; }
html[data-template="luxe"] .detail-head h1 { font-size: 36px; letter-spacing: .08em; text-indent: .08em; margin-bottom: 16px; }
html[data-template="luxe"] .pinyin { font-size: 11.5px; letter-spacing: .26em; text-indent: .26em; }
html[data-template="luxe"] .card { padding: 24px 20px 22px; margin-bottom: 18px; }
html[data-template="luxe"] .detail > .card:has(.explanation) { padding: 26px 22px 24px; }
html[data-template="luxe"] .explanation { font-size: 16.5px; line-height: 1.95; }
html[data-template="luxe"] .explanation::first-letter { font-size: 1.34em; }
html[data-template="luxe"] .card h2 { font-size: 17px; gap: 12px; margin-bottom: 20px; }
html[data-template="luxe"] .card h2::after { width: 24px; }
html[data-template="luxe"] .fields { grid-template-columns: 1fr; row-gap: 6px; }
html[data-template="luxe"] .field dt,
html[data-template="luxe"] .field dd { grid-column: 1; }
html[data-template="luxe"] .field dt { padding-top: 0; font-size: 11px; }
html[data-template="luxe"] .field dd { font-size: 14.5px; line-height: 1.9; }
html[data-template="luxe"] .field dd.quote { padding: 13px 16px; font-size: 13.5px; }
html[data-template="luxe"] .tags { gap: 7px; }
html[data-template="luxe"] .tag { padding: 5px 11px; gap: 7px; }
html[data-template="luxe"] .tags .tag:nth-child(n+5) { display: none; }
html[data-template="luxe"] .char-decompose { gap: 10px; }
html[data-template="luxe"] .char-item { padding: 20px 16px 18px; }
html[data-template="luxe"] .char-glyph { font-size: 34px; padding-bottom: 11px; }
html[data-template="luxe"] .related-grid { gap: 12px; }
html[data-template="luxe"] .related-item { padding: 16px 16px; }
html[data-template="luxe"] .related-item .rw { font-size: 16px; }
html[data-template="luxe"] .hot-grid { grid-template-columns: 1fr; }
/* 接龙改竖排：横排在手机上每行只放得下两个词，
* 行末那根箭头指向下一行的第一个词 —— 方向是错的，链就断了。
* 竖起来之后，每一根箭头都真的指着下一个。 */
html[data-template="luxe"] .jielong-chain {
flex-direction: column;
align-items: flex-start;
gap: 0;
margin-bottom: 26px;
}
html[data-template="luxe"] .jielong-node { align-items: flex-start; padding: 3px 0 4px; }
html[data-template="luxe"] .jielong-node .jw { font-size: 16px; }
html[data-template="luxe"] .jielong-arrow {
position: relative;
flex: 0 0 20px; width: 20px; height: 20px;
margin: 1px 0 1px 1px;
}
html[data-template="luxe"] .jielong-arrow::before {
left: 3px; top: 0; width: 1px; height: 13px;
}
html[data-template="luxe"] .jielong-arrow::after {
right: auto; left: 1px; top: 12px;
width: 5px; height: 5px;
border-top: none;
border-right: 1px solid var(--lx-line-4);
border-bottom: 1px solid var(--lx-line-4);
transform: rotate(45deg);
}
html[data-template="luxe"] .hero { padding: 56px 0 32px; }
html[data-template="luxe"] .hero h1 { font-size: 32px; letter-spacing: .1em; text-indent: .1em; }
html[data-template="luxe"] .hero-sub { font-size: 11.5px; letter-spacing: .1em; }
html[data-template="luxe"] .list-head h1 { font-size: 28px; }
html[data-template="luxe"] .list-desc { font-size: 13px; }
html[data-template="luxe"] .result-item { padding: 15px 16px; }
html[data-template="luxe"] .not-found h1 { font-size: 64px; }
}
@media (max-width: 380px) {
html[data-template="luxe"] .detail-head h1 { font-size: 31px; }
html[data-template="luxe"] .char-decompose { grid-template-columns: 1fr; }
html[data-template="luxe"] .related-grid { grid-template-columns: 1fr; }
html[data-template="luxe"] .jielong-node .jp { display: none; }
}
/* ============================================================================
* 视觉模板：蜡笔手绘童趣风 / crayon
* 一句话：不是「粉嫩的卡片」，而是「用蜡笔画在一张奶白纸上的绘本」。
*
* 三条硬规矩（照做才像蜡笔，不做就只是彩色卡片）：
* 1. 每一块颜色都得有颗粒。蜡笔压不实，纸纹一定从颜色里透出来。
* 2. 每一圈边都得描两遍，第二遍歪一点、虚一点。小孩不会一笔画直。
* 3. 不用模糊阴影。手绘的影是硬边的，偏移 3px、不虚化，像铅笔在纸下垫的影。
* ========================================================================== */
html[data-template="crayon"] {
--cr-paper: #FDFAF3; /* 奶白纸 */
--cr-paper-2: #F8F1E2; /* 纸的暗部 / 扎染斑 */
--cr-card: #FFFDF8; /* 卡面：比纸更白一点，像贴上去的画纸 */
--cr-ink: #45372C; /* 暖墨（10.7:1） */
--cr-ink-2: #6E5C4C; /* 次墨（5.97:1），只承载正文与次要信息 */
--cr-line: #E8DAC3; /* 蜡笔浅边 */
--cr-line-2: #D8C6A9; /* 蜡笔深边 */
--cr-green: #276A61; /* 主色：蜡笔深青（纸 5.93 / 白字 6.22） */
--cr-orange: #A9531C; /* 强调：蜡笔深橙（纸 5.00 / 白字 5.24） */
--cr-pink: #F7CBD2;
--cr-mint: #ACDED6;
--cr-yellow: #F9E29A;
--cr-lilac: #D2C5EE;
--cr-peach: #FBD9C0;
--cr-pink-dp: #D98E9C;
--cr-mint-dp: #6FB3A8;
--cr-yellow-dp: #D9B94E;
--cr-lilac-dp: #9C86C6;
/* 蜡笔颗粒：fractalNoise 调成暖褐半透明，铺在颜色里像蜡笔没压实 */
--cr-grain: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.30 0 0 0 0 0.24 0 0 0 0 0.18 0 0 0 0.17 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23c)'/%3E%3C/svg%3E");
/* 蜡笔「走笔」：两组不同角度的细条，破掉规则斜纹的布感 */
--cr-stroke:
repeating-linear-gradient(112deg, rgba(255, 255, 255, .30) 0 1.3px, rgba(255, 255, 255, 0) 1.3px 3.2px),
repeating-linear-gradient(74deg, rgba(120, 96, 70, .045) 0 1px, rgba(120, 96, 70, 0) 1px 4.2px);
--cr-round: "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi 2.0", "Alibaba PuHuiTi",
"Source Han Sans SC", "Noto Sans SC", "PingFang SC",
"Yuanti SC", "YouYuan", "Microsoft YaHei", sans-serif;
/* 接管基类变量，避免 23 套模板的老色漏进来 */
--primary: #276A61;
--primary-dark: #1F574F;
--primary-soft: #E8F3F0;
--ink: #45372C;
--ink-soft: #6E5C4C;
--ink-faint: #6E5C4C;
--bg: #FDFAF3;
--card: #FFFDF8;
--border: #E8DAC3;
--gold: #A9531C;
--radius: 20px;
--shadow: 3px 4px 0 rgba(214, 196, 168, .30);
--font-sans: var(--cr-round);
--font-serif: var(--cr-round);
}
/* ---------- 纸：奶白 + 扎染般的深浅不匀 ---------- */
html[data-template="crayon"] body {
background-color: var(--cr-paper);
background-image:
var(--cr-grain),
radial-gradient(720px 480px at 8% 4%, rgba(247, 203, 210, .13), transparent 70%),
radial-gradient(640px 420px at 94% 26%, rgba(172, 222, 214, .12), transparent 72%),
radial-gradient(560px 460px at 46% 88%, rgba(249, 226, 154, .11), transparent 74%);
background-attachment: fixed, fixed, fixed, fixed;
display: flex;
flex-direction: column;
min-height: 100vh;
color: var(--cr-ink);
font-family: var(--cr-round);
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
html[data-template="crayon"] { scroll-padding-top: 92px; }
html[data-template="crayon"] main { flex: 1 0 auto; min-width: 0; }
html[data-template="crayon"] ::selection {
background: var(--cr-yellow);
color: var(--cr-ink);
}
/* ============================================================================
* 顶部导航：一条圆角长条，边上压一道粗蜡笔线
* ========================================================================== */
html[data-template="crayon"] .site-header {
background: var(--cr-paper);
background-image: var(--cr-grain);
border-bottom: none;
box-shadow: 0 3px 0 rgba(217, 185, 78, .22), 0 4px 0 rgba(232, 218, 195, .90);
padding-top: 4px;
}
html[data-template="crayon"] .header-inner { gap: 18px; padding-top: 8px; padding-bottom: 10px; }
html[data-template="crayon"] .logo {
font-family: var(--cr-round);
font-size: 23px;
font-weight: 800;
color: var(--cr-ink);
letter-spacing: .04em;
padding: 4px 16px 5px;
background-color: var(--cr-yellow);
background-image: var(--cr-stroke), var(--cr-grain);
border-radius: 16px 20px 14px 18px / 18px 14px 20px 16px;
transform: rotate(-1.2deg);
box-shadow: 2px 3px 0 rgba(214, 196, 168, .40);
}
html[data-template="crayon"] .logo:hover { color: var(--cr-ink); transform: rotate(-1.2deg) translateY(-1px); }
html[data-template="crayon"] .nav { gap: 10px; }
html[data-template="crayon"] .nav a {
font-size: 15px;
font-weight: 700;
color: var(--cr-ink);
padding: 6px 15px;
border-radius: 999px;
background-color: var(--cr-card);
background-image: var(--cr-grain);
border: 2px solid var(--cr-line);
letter-spacing: .02em;
transition: transform .18s, background-color .18s, border-color .18s;
}
html[data-template="crayon"] .nav a:nth-child(2n) { transform: rotate(.8deg); }
html[data-template="crayon"] .nav a:nth-child(3n) { transform: rotate(-.9deg); }
html[data-template="crayon"] .nav a:hover {
color: var(--cr-ink);
background-color: var(--cr-mint);
border-color: var(--cr-mint-dp);
transform: rotate(-1deg) translateY(-1px);
}
/* 搜索框：粗边胶囊，按钮是一块压得实实的蜡笔 */
html[data-template="crayon"] .search-box { max-width: 400px; }
html[data-template="crayon"] .search-box input {
height: 44px;
border: 2.5px solid var(--cr-line-2);
border-right: none;
border-radius: 999px 0 0 999px;
background: var(--cr-card);
color: var(--cr-ink);
font-family: var(--cr-round);
font-size: 15px;
padding: 0 18px;
}
html[data-template="crayon"] .search-box input::placeholder { color: #7D6852; }
html[data-template="crayon"] .search-box input:focus {
border-color: var(--cr-green);
box-shadow: none;
outline: none;
}
html[data-template="crayon"] .search-box button {
height: 44px;
min-width: 74px;
background-color: var(--cr-green);
background-image: var(--cr-stroke), var(--cr-grain);
color: var(--cr-card);
font-family: var(--cr-round);
font-size: 15px;
font-weight: 700;
border: 2.5px solid var(--cr-green);
border-radius: 0 999px 999px 0;
letter-spacing: .06em;
}
html[data-template="crayon"] .search-box button:hover { background-color: var(--primary-dark); }
/* 搜索联想 */
html[data-template="crayon"] .suggest {
border: 2px solid var(--cr-line);
border-radius: 16px;
background: var(--cr-card);
box-shadow: 3px 4px 0 rgba(214, 196, 168, .32);
overflow: hidden;
}
html[data-template="crayon"] .suggest a { color: var(--cr-ink-2); }
html[data-template="crayon"] .suggest a:hover,
html[data-template="crayon"] .suggest a.active { background: var(--cr-yellow); color: var(--cr-ink); }
/* ============================================================================
* 页脚：像画纸最下面那行小字
* ========================================================================== */
html[data-template="crayon"] .site-footer {
background: var(--cr-paper-2);
background-image: var(--cr-grain);
border-top: 3px solid var(--cr-line);
margin-top: 40px;
}
html[data-template="crayon"] .footer-inner { padding: 30px 0 26px; }
html[data-template="crayon"] .footer-nav a {
color: var(--cr-ink-2);
font-size: 14px;
font-weight: 700;
padding: 4px 12px;
border-radius: 999px;
transition: color .18s, background-color .18s;
}
html[data-template="crayon"] .footer-nav a:hover { color: var(--cr-ink); background: var(--cr-yellow); }
html[data-template="crayon"] .copyright { color: var(--cr-ink-2); font-size: 13px; }
html[data-template="crayon"] .muted { color: var(--cr-ink-2); }
/* 友情链接（基类写死 #5b6167，在奶白纸上偏冷） */
html[data-template="crayon"] .friend-links .fl-list li { border-bottom: 1px dashed var(--cr-line); }
html[data-template="crayon"] .friend-links .fl-list a { color: var(--cr-ink-2); font-size: 13.5px; }
html[data-template="crayon"] .friend-links .fl-list a:hover { color: var(--cr-green); }
/* ============================================================================
* 面包屑
* ========================================================================== */
html[data-template="crayon"] .breadcrumb { font-size: 13.5px; color: var(--cr-ink-2); padding: 18px 0 4px; }
html[data-template="crayon"] .breadcrumb a { color: var(--cr-ink-2); }
html[data-template="crayon"] .breadcrumb a:hover { color: var(--cr-green); }
html[data-template="crayon"] .breadcrumb li[aria-current] { color: var(--cr-ink); font-weight: 700; }
/* ============================================================================
* 详情页标题区：先用蜡笔涂一块底，再把字写上去
* ========================================================================== */
html[data-template="crayon"] .detail-head { padding: 22px 0 8px; text-align: center; }
html[data-template="crayon"] .detail-head h1 {
position: relative;
isolation: isolate;
font-family: var(--cr-round);
font-size: 56px;
font-weight: 800;
line-height: 1.18;
letter-spacing: .05em;
color: var(--cr-ink);
-webkit-text-stroke: .3px currentColor;
margin-bottom: 6px;
}
/* 涂抹底：比文字大一圈，歪 1 度，边缘不齐 */
html[data-template="crayon"] .detail-head h1::before {
content: '';
position: absolute;
z-index: -1;
left: 50%;
top: 52%;
width: min(97%, 505px);
height: 92%;
transform: translate(-50%, -50%) rotate(-1.2deg);
/* 蜡笔涂抹块：路径本身不平 + 位移滤镜把边缘搓毛，就不是圆角矩形了 */
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%2072'%20preserveAspectRatio%3D'none'%3E%3Cdefs%3E%3Cpath%20id%3D's'%20d%3D'M22%2016C50%208%20130%206%20200%207%20270%208%20340%205%20372%2012%20390%2016%20396%2030%20393%2042%20390%2056%20356%2062%20300%2065%20240%2068%20140%2070%2084%2066%2048%2063%2022%2056%2018%2042%2014%2028%2010%2020%2022%2016Z'%2F%3E%3CclipPath%20id%3D'c'%3E%3Cuse%20href%3D'%23s'%2F%3E%3C%2FclipPath%3E%3Cfilter%20id%3D'e'%20x%3D'-12%25'%20y%3D'-30%25'%20width%3D'124%25'%20height%3D'160%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.09%200.13'%20numOctaves%3D'3'%20seed%3D'9'%20result%3D'n'%2F%3E%3CfeDisplacementMap%20in%3D'SourceGraphic'%20in2%3D'n'%20scale%3D'9'%20xChannelSelector%3D'R'%20yChannelSelector%3D'G'%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D'g'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.62'%20numOctaves%3D'3'%20seed%3D'5'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%200.30%200%200%200%200%200.24%200%200%200%200%200.18%200%200%200%200.18%200'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D'url(%23e)'%3E%3Cuse%20href%3D'%23s'%20fill%3D'%23FBE8A8'%2F%3E%3Cg%20clip-path%3D'url(%23c)'%3E%3Crect%20width%3D'400'%20height%3D'72'%20filter%3D'url(%23g)'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: .97;
}
/* 第二遍：错开一点、更深、毛边更碎，两遍叠出「涂得不匀」 */
html[data-template="crayon"] .detail-head h1::after {
content: '';
position: absolute;
z-index: -1;
left: 48.5%;
top: 47%;
width: min(84%, 438px);
height: 74%;
transform: translate(-50%, -50%) rotate(1.1deg);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%2072'%20preserveAspectRatio%3D'none'%3E%3Cdefs%3E%3Cpath%20id%3D's'%20d%3D'M22%2016C50%208%20130%206%20200%207%20270%208%20340%205%20372%2012%20390%2016%20396%2030%20393%2042%20390%2056%20356%2062%20300%2065%20240%2068%20140%2070%2084%2066%2048%2063%2022%2056%2018%2042%2014%2028%2010%2020%2022%2016Z'%2F%3E%3CclipPath%20id%3D'c'%3E%3Cuse%20href%3D'%23s'%2F%3E%3C%2FclipPath%3E%3Cfilter%20id%3D'e'%20x%3D'-12%25'%20y%3D'-30%25'%20width%3D'124%25'%20height%3D'160%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.09%200.13'%20numOctaves%3D'3'%20seed%3D'21'%20result%3D'n'%2F%3E%3CfeDisplacementMap%20in%3D'SourceGraphic'%20in2%3D'n'%20scale%3D'12'%20xChannelSelector%3D'R'%20yChannelSelector%3D'G'%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D'g'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.62'%20numOctaves%3D'3'%20seed%3D'5'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%200.30%200%200%200%200%200.24%200%200%200%200%200.18%200%200%200%200.18%200'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D'url(%23e)'%3E%3Cuse%20href%3D'%23s'%20fill%3D'%23F7D97F'%2F%3E%3Cg%20clip-path%3D'url(%23c)'%3E%3Crect%20width%3D'400'%20height%3D'72'%20filter%3D'url(%23g)'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: .26;
}
html[data-template="crayon"] .detail-head .head-sub { margin-top: 2px; }
html[data-template="crayon"] .detail-head .pinyin {
display: inline-block;
font-size: 14px;
font-weight: 700;
letter-spacing: .16em;
color: var(--cr-ink-2);
padding: 2px 10px;
border-bottom: 2px dashed var(--cr-line-2);
}
/* 田字格：当成课本上那一页练习纸，贴上去、歪一点、有硬边影 */
html[data-template="crayon"] .grid-figure { margin: 16px 0 22px; padding: 0; }
html[data-template="crayon"] .grid-img {
background: var(--cr-card);
padding: 7px;
border: 2.5px solid var(--cr-line);
border-radius: 16px 20px 14px 18px / 18px 14px 20px 16px;
transform: rotate(-1.3deg);
box-shadow: 4px 5px 0 rgba(214, 196, 168, .34);
filter: sepia(.08) saturate(.94) brightness(.985);
}
/* ============================================================================
* 属性标签：一小块一小块涂上去的色块，四色轮着来
* ========================================================================== */
html[data-template="crayon"] .tags { gap: 12px; }
html[data-template="crayon"] .tag {
padding: 6px 14px 7px;
border-radius: 14px 18px 12px 16px / 16px 12px 18px 14px;
border: 2px solid rgba(69, 55, 44, .10);
background-image: var(--cr-stroke), var(--cr-grain);
box-shadow: 2px 3px 0 rgba(214, 196, 168, .30);
transform: rotate(-.7deg);
transition: transform .18s;
}
html[data-template="crayon"] .tag:nth-child(2n) { transform: rotate(.7deg); }
html[data-template="crayon"] .tag:hover { transform: rotate(-1deg) translateY(-2px); }
html[data-template="crayon"] .tag:nth-child(4n+1) { background-color: var(--cr-pink); }
html[data-template="crayon"] .tag:nth-child(4n+2) { background-color: var(--cr-mint); }
html[data-template="crayon"] .tag:nth-child(4n+3) { background-color: var(--cr-yellow); }
html[data-template="crayon"] .tag:nth-child(4n) { background-color: var(--cr-lilac); }
html[data-template="crayon"] .tag-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
color: var(--cr-ink);
opacity: 1;
}
html[data-template="crayon"] .tag-value {
font-size: 14px;
font-weight: 700;
color: var(--cr-ink);
}
/* ============================================================================
* 卡片：一圈蜡笔边，外面再歪歪地描第二遍
* ========================================================================== */
html[data-template="crayon"] .card {
position: relative;
background-color: var(--cr-card);
background-image: var(--cr-grain);
border: 2.5px solid var(--cr-line);
border-radius: 26px 22px 28px 20px / 22px 28px 20px 26px;
box-shadow: 3px 4px 0 rgba(214, 196, 168, .30);
padding: 26px 30px;
margin-bottom: 26px;
}
/* 第二遍描边：错位、更细、虚一点 —— 手绘重描的痕迹 */
html[data-template="crayon"] .card::after {
content: '';
position: absolute;
inset: -6px -4px -3px -7px;
border: 1.5px solid rgba(216, 198, 169, .78);
border-radius: 30px 20px 32px 18px / 20px 32px 18px 30px;
transform: rotate(-.4deg);
filter: blur(.45px);
pointer-events: none;
}
/* ---------- 板块标题：星星 + 两枚点 + 一道短横 ---------- */
html[data-template="crayon"] .card h2 {
font-family: var(--cr-round);
font-size: 23px;
font-weight: 800;
line-height: 1.35;
letter-spacing: .03em;
color: var(--cr-ink);
padding-left: 38px;
padding-bottom: 12px;
margin-bottom: 18px;
}
/* 一颗手绘星星，右边跟着两枚大小不一的圆点 */
html[data-template="crayon"] .card h2::before {
content: '';
position: absolute;
left: 1px;
top: .34em;
width: 15px;
height: 15px;
border-radius: 50%;
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.6 9.9 5.7 14.3 6.2 11 9.3 11.9 13.7 8 11.6 4.1 13.7 5 9.3 1.7 6.2 6.1 5.7Z' fill='%23F9E29A' stroke='%23D9B94E' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transform: rotate(-10deg);
box-shadow:
14px 5px 0 -4px var(--cr-pink-dp),
24px -2px 0 -3px var(--cr-mint);
}
/* 标题下那道短横：4px 粗、端点圆、微微上翘 */
html[data-template="crayon"] .card h2::after {
content: '';
position: absolute;
left: 38px;
bottom: 3px;
width: 56px;
height: 4px;
background: var(--cr-pink-dp);
border-radius: 3px;
transform: rotate(-1.4deg);
opacity: .85;
}
/* ============================================================================
* 释义：首字是一块涂实的蜡笔，后面跟着正文
* ========================================================================== */
html[data-template="crayon"] .explanation {
max-width: 42em;
font-size: 17px;
line-height: 1.95;
color: var(--cr-ink-2);
letter-spacing: .01em;
}
html[data-template="crayon"] .explanation::first-letter {
font-family: var(--cr-round);
font-size: 1.78em;
font-weight: 800;
line-height: 1.15;
color: var(--cr-ink);
background-color: var(--cr-pink);
background-image: var(--cr-stroke);
padding: 0 7px 1px;
margin-right: 4px;
vertical-align: baseline;
border-radius: 12px 16px 10px 14px;
box-shadow: 2px 2px 0 rgba(217, 142, 156, .30);
}
/* ============================================================================
* 详细解释：字段名做成小印章，引文像学生的摘抄
* ========================================================================== */
/* 标签列宽必须按整块最宽的那个标签算，不能写死。
* 标签字数随模块变：成语「例句」2 字、词典「领域分类」4 字、英汉「柯林斯星级」5 字。
* 原来 .field 是 76px + 1fr 的定宽两列、dt 又写死 width:64px，
* 5 字标签实测 79px，顶出绿色胶囊背景、直接压到右边的释义上（英汉详情页最明显）。
* 改法：让 .fields 当容器统一算一次列宽（max-content），.field 只做分组不参与布局，
* 于是标签宽度跟着最长的那条走、等宽、右边文案起点仍然对齐。 */
html[data-template="crayon"] .fields {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 16px;
row-gap: 18px;
}
html[data-template="crayon"] .field { display: contents; }
html[data-template="crayon"] .field dt {
grid-column: 1;
justify-self: start;
min-width: 64px;
box-sizing: border-box;
font-family: var(--cr-round);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .1em;
color: var(--cr-card);
background-color: var(--cr-green);
background-image: var(--cr-stroke);
padding: 4px 10px 5px;
border-radius: 9px 13px 8px 11px;
transform: rotate(-1deg);
text-align: center;
white-space: nowrap;
}
html[data-template="crayon"] .field:nth-child(2n) dt { transform: rotate(1deg); background-color: var(--cr-orange); }
html[data-template="crayon"] .field dd { grid-column: 2; max-width: 38em; font-size: 15.5px; line-height: 1.9; color: var(--cr-ink-2); }
html[data-template="crayon"] .field dd.quote {
max-width: 34em;
background-color: var(--cr-paper-2);
background-image: var(--cr-grain);
border: 2px dashed var(--cr-line-2);
border-radius: 16px 20px 14px 18px / 18px 14px 20px 16px;
padding: 14px 18px 15px;
color: var(--cr-ink-2);
}
/* 造句：序号涂成一颗颗色点 */
html[data-template="crayon"] .zju-list { padding-left: 26px; gap: 12px; }
html[data-template="crayon"] .zju-list li { font-size: 15.5px; line-height: 1.9; color: var(--cr-ink-2); }
html[data-template="crayon"] .zju-list li::marker { color: var(--cr-orange); font-weight: 800; }
html[data-template="crayon"] .story { max-width: 40em; font-size: 16px; line-height: 2; color: var(--cr-ink-2); }
/* ============================================================================
* 近反义：一片片小色块
* ========================================================================== */
html[data-template="crayon"] .syn-ant { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
html[data-template="crayon"] .syn-ant > strong {
flex: 0 0 auto;
font-family: var(--cr-round);
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
color: var(--cr-ink);
background-color: var(--cr-mint);
background-image: var(--cr-stroke);
padding: 5px 12px 6px;
border-radius: 999px;
border: 2px solid rgba(111, 179, 168, .55);
white-space: nowrap;
transform: rotate(-1deg);
}
html[data-template="crayon"] .syn-ant + .syn-ant > strong {
background-color: var(--cr-peach);
border-color: rgba(169, 83, 28, .30);
transform: rotate(1deg);
}
html[data-template="crayon"] .chips { gap: 10px; }
html[data-template="crayon"] .chip {
font-size: 14px;
font-weight: 700;
color: var(--cr-ink);
background-color: var(--cr-card);
background-image: var(--cr-grain);
border: 2px solid var(--cr-line-2);
border-radius: 999px;
padding: 4px 14px 5px;
transition: transform .16s, background-color .16s, border-color .16s;
}
html[data-template="crayon"] .chip:hover {
background-color: var(--cr-yellow);
border-color: var(--cr-yellow-dp);
color: var(--cr-ink);
transform: rotate(-1.4deg) translateY(-2px);
}
html[data-template="crayon"] .chip.plain { color: var(--cr-ink-2); border-style: dashed; background-color: transparent; }
/* ============================================================================
* 趣味延伸：整张卡是鹅黄的一页
* ========================================================================== */
html[data-template="crayon"] .card.highlight {
background-color: #FDF5DC;
background-image: var(--cr-stroke), var(--cr-grain);
border-color: #EBD79C;
}
html[data-template="crayon"] .card.highlight p { font-size: 15.5px; line-height: 1.9; color: var(--cr-ink); }
html[data-template="crayon"] .card.highlight .gold {
display: inline-block;
color: var(--cr-ink);
font-weight: 800;
background-color: var(--cr-card);
padding: 1px 9px 2px;
border-radius: 8px 10px 7px 9px;
margin-right: 10px;
border: 1.5px solid rgba(169, 83, 28, .22);
}
html[data-template="crayon"] .xhy-list { gap: 8px; }
html[data-template="crayon"] .xhy-list li { font-size: 15px; line-height: 1.85; color: var(--cr-ink); padding-left: 20px; }
html[data-template="crayon"] .xhy-list li::before {
content: '';
left: 2px;
top: .78em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cr-orange);
opacity: .62;
font-size: 0;
}
/* ============================================================================
* 字义分解：四张蜡笔涂的卡，单字坐在正中
* ========================================================================== */
html[data-template="crayon"] .char-decompose { grid-template-columns: repeat(2, 1fr); gap: 20px 22px; align-items: stretch; }
html[data-template="crayon"] .char-item {
position: relative;
padding: 20px 18px 18px;
border: 2.5px solid rgba(69, 55, 44, .10);
border-radius: 22px 18px 24px 16px / 18px 24px 16px 22px;
background-image: var(--cr-stroke), var(--cr-grain);
box-shadow: 3px 4px 0 rgba(214, 196, 168, .34);
transform: rotate(-.6deg);
}
html[data-template="crayon"] .char-item:nth-child(2n) { transform: rotate(.7deg); }
html[data-template="crayon"] .char-item::before {
content: '';
position: absolute;
inset: -5px -3px -2px -6px;
border: 1.2px solid rgba(69, 55, 44, .15);
border-radius: 26px 16px 28px 14px / 16px 28px 14px 26px;
transform: rotate(.8deg);
filter: blur(.3px);
pointer-events: none;
}
html[data-template="crayon"] .char-item:nth-child(4n+1) { background-color: var(--cr-pink); }
html[data-template="crayon"] .char-item:nth-child(4n+2) { background-color: var(--cr-mint); }
html[data-template="crayon"] .char-item:nth-child(4n+3) { background-color: var(--cr-yellow); }
html[data-template="crayon"] .char-item:nth-child(4n) { background-color: var(--cr-lilac); }
/* 单字：一块白纸圆片，字写在中间 */
html[data-template="crayon"] .char-glyph {
width: 88px;
height: 88px;
line-height: 86px;
margin: 0 auto 14px;
text-align: center;
font-family: var(--cr-round);
font-size: 44px;
font-weight: 800;
color: var(--cr-ink);
background-color: rgba(255, 253, 248, .78);
border: 2px dashed rgba(69, 55, 44, .16);
border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55);
}
html[data-template="crayon"] .char-glyph a { color: inherit; text-decoration: none; }
html[data-template="crayon"] .char-glyph a:hover { color: var(--cr-green); }
html[data-template="crayon"] .char-meta { text-align: left; }
html[data-template="crayon"] .char-pron {
font-size: 13px;
font-weight: 700;
line-height: 1.7;
color: var(--cr-ink);
letter-spacing: .01em;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 2px dashed rgba(69, 55, 44, .16);
}
html[data-template="crayon"] .char-extra { font-size: 12.5px; color: var(--cr-ink); margin-bottom: 8px; line-height: 1.7; }
html[data-template="crayon"] .char-extra-sep { color: rgba(69, 55, 44, .35); margin: 0 3px; }
html[data-template="crayon"] .char-shape { font-size: 13px; line-height: 1.85; color: var(--cr-ink); margin-bottom: 10px; }
html[data-template="crayon"] .char-senses { gap: 10px; }
html[data-template="crayon"] .char-sense { gap: 8px; }
html[data-template="crayon"] .char-sense .sn-num {
flex: 0 0 auto;
width: 20px;
height: 20px;
line-height: 19px;
text-align: center;
font-size: 11px;
font-weight: 800;
color: var(--cr-card);
background: var(--cr-green);
border-radius: 50%;
}
html[data-template="crayon"] .char-sense .sn-title { font-size: 13.5px; font-weight: 800; color: var(--cr-ink); }
html[data-template="crayon"] .char-sense .sn-text { font-size: 13px; line-height: 1.85; color: var(--cr-ink); }
html[data-template="crayon"] .expand-sense {
margin-top: 10px;
font-family: var(--cr-round);
font-size: 12.5px;
font-weight: 700;
color: var(--cr-green);
background: rgba(255, 253, 248, .7);
border: 2px solid rgba(39, 106, 97, .30);
border-radius: 999px;
padding: 4px 14px;
cursor: pointer;
}
html[data-template="crayon"] .expand-sense:hover { background: var(--cr-card); }
/* ============================================================================
* 成语接龙：圆角按钮排成一串，中间一根粗手绘箭头
* ========================================================================== */
html[data-template="crayon"] .tabs { gap: 12px; margin-bottom: 18px; }
html[data-template="crayon"] .tab {
font-family: var(--cr-round);
font-size: 14px;
font-weight: 700;
color: var(--cr-ink-2);
background-color: var(--cr-card);
background-image: var(--cr-grain);
border: 2px solid var(--cr-line);
border-radius: 999px;
padding: 6px 18px 7px;
cursor: pointer;
transition: transform .16s, background-color .16s, border-color .16s;
}
html[data-template="crayon"] .tab:hover { border-color: var(--cr-line-2); transform: translateY(-1px); }
html[data-template="crayon"] .tab.active {
color: var(--cr-ink);
background-color: var(--cr-mint);
border-color: var(--cr-mint-dp);
transform: rotate(-1deg);
}
html[data-template="crayon"] .jielong-chain { gap: 4px 2px; margin-bottom: 22px; }
html[data-template="crayon"] .jielong-node {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 7px 13px 8px;
background-color: var(--cr-card);
background-image: var(--cr-grain);
border: 2.5px solid var(--cr-line-2);
border-radius: 16px 20px 14px 18px / 18px 14px 20px 16px;
box-shadow: 2px 3px 0 rgba(214, 196, 168, .34);
transform: rotate(-.5deg);
transition: transform .18s, background-color .18s, border-color .18s;
}
html[data-template="crayon"] .jielong-node:nth-of-type(2n) { transform: rotate(.6deg); }
html[data-template="crayon"] .jielong-node:hover {
background-color: var(--cr-pink);
border-color: var(--cr-pink-dp);
transform: rotate(-1.2deg) translateY(-2px);
}
html[data-template="crayon"] .jielong-node.current {
background-color: var(--cr-yellow);
background-image: var(--cr-stroke), var(--cr-grain);
border-color: var(--cr-yellow-dp);
transform: rotate(.8deg);
}
html[data-template="crayon"] .jielong-node .jw {
font-family: var(--cr-round);
font-size: 17px;
font-weight: 800;
line-height: 1.25;
letter-spacing: .04em;
color: var(--cr-ink);
}
html[data-template="crayon"] .jielong-node .jp {
font-size: 11px;
line-height: 1.4;
color: var(--cr-ink-2);
letter-spacing: .04em;
}
/* 箭头：一根 4px 粗的线，端点圆、微微下垂，箭头是两个圆角短边 */
html[data-template="crayon"] .jielong-arrow {
position: relative;
flex: 0 0 38px;
width: 38px;
height: 22px;
font-size: 0;
color: transparent;
align-self: center;
}
html[data-template="crayon"] .jielong-arrow::before {
content: '';
position: absolute;
left: 2px;
top: 10px;
width: 26px;
height: 4px;
background: var(--cr-ink-2);
border-radius: 3px;
transform: rotate(-5deg);
}
html[data-template="crayon"] .jielong-arrow::after {
content: '';
position: absolute;
right: 3px;
top: 5px;
width: 10px;
height: 10px;
border-top: 4px solid var(--cr-ink-2);
border-right: 4px solid var(--cr-ink-2);
border-top-right-radius: 3px;
transform: rotate(40deg);
}
html[data-template="crayon"] .btn-regen {
font-family: var(--cr-round);
font-size: 14px;
font-weight: 700;
color: var(--cr-ink);
background-color: var(--cr-card);
background-image: var(--cr-grain);
border: 2.5px dashed var(--cr-line-2);
border-radius: 999px;
padding: 8px 22px;
cursor: pointer;
transition: background-color .18s, border-color .18s, transform .18s;
}
html[data-template="crayon"] .btn-regen:hover {
background-color: var(--cr-peach);
border-color: var(--cr-orange);
transform: rotate(-1.2deg);
}
/* ============================================================================
* 相关成语：小朋友贴上去的卡片，一张斜一点、一张高一点
* ========================================================================== */
html[data-template="crayon"] .related-grid { grid-template-columns: repeat(3, 1fr); gap: 18px 18px; }
html[data-template="crayon"] .related-item {
padding: 15px 18px 16px;
background-color: var(--cr-card);
background-image: var(--cr-grain);
border: 2.5px solid var(--cr-line);
border-radius: 20px 16px 22px 14px / 16px 22px 14px 20px;
box-shadow: 3px 4px 0 rgba(214, 196, 168, .30);
transition: transform .18s, border-color .18s, background-color .18s;
}
html[data-template="crayon"] .related-item:nth-child(3n+1) { transform: rotate(-.8deg); }
html[data-template="crayon"] .related-item:nth-child(3n+2) { transform: rotate(.7deg) translateY(7px); }
html[data-template="crayon"] .related-item:nth-child(3n) { transform: rotate(-.4deg) translateY(-5px); }
html[data-template="crayon"] .related-item:nth-child(4n+2) { background-color: #FEF6F7; }
html[data-template="crayon"] .related-item:nth-child(4n+3) { background-color: #F3FAF8; }
html[data-template="crayon"] .related-item:hover {
border-color: var(--cr-yellow-dp);
background-color: var(--cr-yellow);
transform: rotate(0deg) translateY(-2px);
}
html[data-template="crayon"] .related-item .rw {
font-family: var(--cr-round);
font-size: 17.5px;
font-weight: 800;
letter-spacing: .03em;
color: var(--cr-ink);
}
html[data-template="crayon"] .related-item .rp { font-size: 11.5px; color: var(--cr-ink-2); letter-spacing: .05em; }
html[data-template="crayon"] .related-item .rd {
display: block;
-webkit-line-clamp: unset;
font-size: 13px;
line-height: 1.75;
color: var(--cr-ink-2);
}
/* ============================================================================
* 所属标签（详情页底部）
* ========================================================================== */
html[data-template="crayon"] .tag-groups .chip { background-color: var(--cr-paper-2); border-color: transparent; }
html[data-template="crayon"] .tag-groups a.chip:hover,
html[data-template="crayon"] a.tag-groups .chip:hover {
background-color: var(--cr-yellow);
border-color: var(--cr-yellow-dp);
}
html[data-template="crayon"] .tag-grp-head { font-family: var(--cr-round); font-size: 14px; font-weight: 800; color: var(--cr-ink); }
html[data-template="crayon"] .tag-grp-head small { color: var(--cr-ink-2); }
/* ============================================================================
* 首页
* ========================================================================== */
html[data-template="crayon"] .hero { padding: 52px 0 28px; }
html[data-template="crayon"] .hero h1 {
position: relative;
isolation: isolate;
font-family: var(--cr-round);
font-size: 44px;
font-weight: 800;
letter-spacing: .05em;
color: var(--cr-ink);
margin-bottom: 12px;
}
html[data-template="crayon"] .hero h1::before {
content: '';
position: absolute;
z-index: -1;
left: 50%;
top: 54%;
width: min(80%, 470px);
height: 152%;
transform: translate(-50%, -50%) rotate(1.2deg);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%2072'%20preserveAspectRatio%3D'none'%3E%3Cdefs%3E%3Cpath%20id%3D's'%20d%3D'M22%2016C50%208%20130%206%20200%207%20270%208%20340%205%20372%2012%20390%2016%20396%2030%20393%2042%20390%2056%20356%2062%20300%2065%20240%2068%20140%2070%2084%2066%2048%2063%2022%2056%2018%2042%2014%2028%2010%2020%2022%2016Z'%2F%3E%3CclipPath%20id%3D'c'%3E%3Cuse%20href%3D'%23s'%2F%3E%3C%2FclipPath%3E%3Cfilter%20id%3D'e'%20x%3D'-12%25'%20y%3D'-30%25'%20width%3D'124%25'%20height%3D'160%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.09%200.13'%20numOctaves%3D'3'%20seed%3D'12'%20result%3D'n'%2F%3E%3CfeDisplacementMap%20in%3D'SourceGraphic'%20in2%3D'n'%20scale%3D'9'%20xChannelSelector%3D'R'%20yChannelSelector%3D'G'%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D'g'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.62'%20numOctaves%3D'3'%20seed%3D'5'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%200.30%200%200%200%200%200.24%200%200%200%200%200.18%200%200%200%200.18%200'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D'url(%23e)'%3E%3Cuse%20href%3D'%23s'%20fill%3D'%23B8E6DE'%2F%3E%3Cg%20clip-path%3D'url(%23c)'%3E%3Crect%20width%3D'400'%20height%3D'72'%20filter%3D'url(%23g)'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: .88;
}
html[data-template="crayon"] .hero h1::after {
content: '';
position: absolute;
z-index: -1;
left: 51.5%;
top: 49%;
width: min(68%, 400px);
height: 132%;
transform: translate(-50%, -50%) rotate(-.9deg);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%2072'%20preserveAspectRatio%3D'none'%3E%3Cdefs%3E%3Cpath%20id%3D's'%20d%3D'M22%2016C50%208%20130%206%20200%207%20270%208%20340%205%20372%2012%20390%2016%20396%2030%20393%2042%20390%2056%20356%2062%20300%2065%20240%2068%20140%2070%2084%2066%2048%2063%2022%2056%2018%2042%2014%2028%2010%2020%2022%2016Z'%2F%3E%3CclipPath%20id%3D'c'%3E%3Cuse%20href%3D'%23s'%2F%3E%3C%2FclipPath%3E%3Cfilter%20id%3D'e'%20x%3D'-12%25'%20y%3D'-30%25'%20width%3D'124%25'%20height%3D'160%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.09%200.13'%20numOctaves%3D'3'%20seed%3D'27'%20result%3D'n'%2F%3E%3CfeDisplacementMap%20in%3D'SourceGraphic'%20in2%3D'n'%20scale%3D'12'%20xChannelSelector%3D'R'%20yChannelSelector%3D'G'%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D'g'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.62'%20numOctaves%3D'3'%20seed%3D'5'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%200.30%200%200%200%200%200.24%200%200%200%200%200.18%200%200%200%200.18%200'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D'url(%23e)'%3E%3Cuse%20href%3D'%23s'%20fill%3D'%239FD8CE'%2F%3E%3Cg%20clip-path%3D'url(%23c)'%3E%3Crect%20width%3D'400'%20height%3D'72'%20filter%3D'url(%23g)'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: .40;
}
html[data-template="crayon"] .hero-sub { font-size: 15.5px; color: var(--cr-ink-2); line-height: 1.9; }
html[data-template="crayon"] .hero-search { margin-top: 22px; }
html[data-template="crayon"] .hero-search .search-box { max-width: 520px; margin: 0 auto; }
/* 拼音字母格：一格格像是拿蜡笔框出来的 */
html[data-template="crayon"] .letters { gap: 12px; }
html[data-template="crayon"] .letter {
padding: 11px 4px 12px;
font-family: var(--cr-round);
font-size: 19px;
font-weight: 800;
color: var(--cr-ink);
background-color: var(--cr-card);
background-image: var(--cr-grain);
border: 2.5px solid var(--cr-line);
border-radius: 14px 18px 12px 16px / 16px 12px 18px 14px;
box-shadow: 2px 3px 0 rgba(214, 196, 168, .28);
transform: rotate(-.5deg);
transition: transform .16s, background-color .16s, border-color .16s;
}
html[data-template="crayon"] .letter:nth-child(2n) { transform: rotate(.5deg); }
html[data-template="crayon"] .letter:nth-child(4n+1) { border-color: rgba(217, 142, 156, .55); background-color: #FEFAFB; }
html[data-template="crayon"] .letter:nth-child(4n+2) { border-color: rgba(111, 179, 168, .55); background-color: #F9FCFB; }
html[data-template="crayon"] .letter:nth-child(4n+3) { border-color: rgba(217, 185, 78, .60); background-color: #FEFCF4; }
html[data-template="crayon"] .letter:nth-child(4n) { border-color: rgba(156, 134, 198, .55); background-color: #FBF9FD; }
html[data-template="crayon"] .letter:hover {
color: var(--cr-ink);
background-color: var(--cr-yellow);
border-color: var(--cr-yellow-dp);
transform: rotate(-1.4deg) translateY(-2px);
}
html[data-template="crayon"] .letter small { font-size: 11px; font-weight: 700; color: var(--cr-ink-2); }
/* 热门成语 */
html[data-template="crayon"] .hot-grid { gap: 14px; }
html[data-template="crayon"] .hot-item {
padding: 14px 18px;
background-color: var(--cr-card);
background-image: var(--cr-grain);
border: 2.5px solid var(--cr-line);
border-radius: 18px 14px 20px 12px / 14px 20px 12px 18px;
box-shadow: 2px 3px 0 rgba(214, 196, 168, .28);
transition: transform .16s, background-color .16s, border-color .16s;
}
html[data-template="crayon"] .hot-item:nth-child(4n+1) { transform: rotate(-.5deg); }
html[data-template="crayon"] .hot-item:nth-child(4n+2) { transform: rotate(.45deg); }
html[data-template="crayon"] .hot-item:nth-child(4n+3) { transform: rotate(-.3deg); }
html[data-template="crayon"] .hot-item:nth-child(4n) { transform: rotate(.55deg); }
html[data-template="crayon"] .hot-item:hover {
background-color: var(--cr-mint);
border-color: var(--cr-mint-dp);
transform: rotate(-1deg) translateY(-2px);
}
html[data-template="crayon"] .hot-word { font-family: var(--cr-round); font-size: 18px; font-weight: 800; color: var(--cr-ink); }
html[data-template="crayon"] .hot-pinyin { font-size: 11.5px; color: var(--cr-ink-2); }
html[data-template="crayon"] .hot-expl { font-size: 13px; line-height: 1.7; color: var(--cr-ink-2); }
/* 首页「换几种查法」的胶囊是基类白底直角，这里接管 */
html[data-template="crayon"] .chip.chip-py {
display: inline-flex;
flex-direction: column;
gap: 1px;
background-color: var(--cr-paper-2);
border: 2px solid var(--cr-line);
border-radius: 14px;
padding: 6px 14px;
}
html[data-template="crayon"] .chip.chip-py .cp-word { font-size: 14px; font-weight: 800; color: var(--cr-ink); }
html[data-template="crayon"] .chip.chip-py .cp-py { font-size: 11.5px; color: var(--cr-ink-2); }
/* ============================================================================
* 列表页 / 搜索结果
* ========================================================================== */
html[data-template="crayon"] .list-head { padding: 26px 0 10px; }
html[data-template="crayon"] .list-head h1 {
position: relative;
isolation: isolate;
display: inline-block;
font-family: var(--cr-round);
font-size: 32px;
font-weight: 800;
letter-spacing: .03em;
color: var(--cr-ink);
padding: 2px 10px 4px;
margin-left: -10px;
}
html[data-template="crayon"] .list-head h1::before {
content: '';
position: absolute;
z-index: -1;
left: 50%;
top: 54%;
width: 104%;
height: 128%;
transform: translate(-50%, -50%) rotate(-1.1deg);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%2072'%20preserveAspectRatio%3D'none'%3E%3Cdefs%3E%3Cpath%20id%3D's'%20d%3D'M22%2016C50%208%20130%206%20200%207%20270%208%20340%205%20372%2012%20390%2016%20396%2030%20393%2042%20390%2056%20356%2062%20300%2065%20240%2068%20140%2070%2084%2066%2048%2063%2022%2056%2018%2042%2014%2028%2010%2020%2022%2016Z'%2F%3E%3CclipPath%20id%3D'c'%3E%3Cuse%20href%3D'%23s'%2F%3E%3C%2FclipPath%3E%3Cfilter%20id%3D'e'%20x%3D'-12%25'%20y%3D'-30%25'%20width%3D'124%25'%20height%3D'160%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.09%200.13'%20numOctaves%3D'3'%20seed%3D'15'%20result%3D'n'%2F%3E%3CfeDisplacementMap%20in%3D'SourceGraphic'%20in2%3D'n'%20scale%3D'9'%20xChannelSelector%3D'R'%20yChannelSelector%3D'G'%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D'g'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.62'%20numOctaves%3D'3'%20seed%3D'5'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%200.30%200%200%200%200%200.24%200%200%200%200%200.18%200%200%200%200.18%200'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D'url(%23e)'%3E%3Cuse%20href%3D'%23s'%20fill%3D'%23F8CFD6'%2F%3E%3Cg%20clip-path%3D'url(%23c)'%3E%3Crect%20width%3D'400'%20height%3D'72'%20filter%3D'url(%23g)'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: .85;
}
html[data-template="crayon"] .tag-head h1 {
position: relative;
isolation: isolate;
display: inline-block;
padding: 2px 10px 4px;
margin-left: -10px;
}
html[data-template="crayon"] .tag-head h1::before {
content: '';
position: absolute;
z-index: -1;
left: 50%;
top: 54%;
width: 104%;
height: 128%;
transform: translate(-50%, -50%) rotate(1deg);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%2072'%20preserveAspectRatio%3D'none'%3E%3Cdefs%3E%3Cpath%20id%3D's'%20d%3D'M22%2016C50%208%20130%206%20200%207%20270%208%20340%205%20372%2012%20390%2016%20396%2030%20393%2042%20390%2056%20356%2062%20300%2065%20240%2068%20140%2070%2084%2066%2048%2063%2022%2056%2018%2042%2014%2028%2010%2020%2022%2016Z'%2F%3E%3CclipPath%20id%3D'c'%3E%3Cuse%20href%3D'%23s'%2F%3E%3C%2FclipPath%3E%3Cfilter%20id%3D'e'%20x%3D'-12%25'%20y%3D'-30%25'%20width%3D'124%25'%20height%3D'160%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.09%200.13'%20numOctaves%3D'3'%20seed%3D'15'%20result%3D'n'%2F%3E%3CfeDisplacementMap%20in%3D'SourceGraphic'%20in2%3D'n'%20scale%3D'9'%20xChannelSelector%3D'R'%20yChannelSelector%3D'G'%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D'g'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.62'%20numOctaves%3D'3'%20seed%3D'5'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%200.30%200%200%200%200%200.24%200%200%200%200%200.18%200%200%200%200.18%200'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D'url(%23e)'%3E%3Cuse%20href%3D'%23s'%20fill%3D'%23F8CFD6'%2F%3E%3Cg%20clip-path%3D'url(%23c)'%3E%3Crect%20width%3D'400'%20height%3D'72'%20filter%3D'url(%23g)'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: .85;
}
html[data-template="crayon"] .list-desc { max-width: 44em; font-size: 14.5px; line-height: 1.9; color: var(--cr-ink-2); }
html[data-template="crayon"] .letters-card { padding: 20px 22px; }
/* 字母卡里那个 h2 是给读屏用的（sr-only），它的装饰星点会从 1px 的裁剪框里漏出来 */
html[data-template="crayon"] .card h2.sr-only { padding-left: 0; }
html[data-template="crayon"] .card h2.sr-only::before,
html[data-template="crayon"] .card h2.sr-only::after { content: none; }
html[data-template="crayon"] .letters-card .letter { font-size: 16px; padding: 7px 3px 8px; }
html[data-template="crayon"] .result-list { gap: 4px; }
html[data-template="crayon"] .result-item { padding: 13px 4px; border-bottom: 1.5px dashed var(--cr-line); }
html[data-template="crayon"] .result-item .rw {
font-family: var(--cr-round);
font-size: 17px;
font-weight: 800;
color: var(--cr-green);
letter-spacing: .02em;
}
html[data-template="crayon"] .result-item .rp { font-size: 12px; color: var(--cr-ink-2); }
html[data-template="crayon"] .result-item .re { font-size: 14px; line-height: 1.8; color: var(--cr-ink-2); }
html[data-template="crayon"] .pager { gap: 10px; margin: 26px 0; }
html[data-template="crayon"] .pager a,
html[data-template="crayon"] .pager span {
font-family: var(--cr-round);
font-size: 14px;
font-weight: 700;
color: var(--cr-ink);
background-color: var(--cr-card);
border: 2px solid var(--cr-line);
border-radius: 999px;
padding: 6px 15px;
min-width: 40px;
text-align: center;
}
html[data-template="crayon"] .pager a:hover { background-color: var(--cr-yellow); border-color: var(--cr-yellow-dp); }
html[data-template="crayon"] .pager .current,
html[data-template="crayon"] .pager span.current {
color: var(--cr-card);
background-color: var(--cr-green);
border-color: var(--cr-green);
}
html[data-template="crayon"] .related-index .chip { font-size: 13px; }
html[data-template="crayon"] .empty { color: var(--cr-ink-2); }
html[data-template="crayon"] .empty a { color: var(--cr-green); font-weight: 700; }
/* ============================================================================
* 标签总览 / 标签详情
* ========================================================================== */
html[data-template="crayon"] .tag-head { padding: 26px 0 8px; }
html[data-template="crayon"] .tag-head h1 {
font-family: var(--cr-round);
font-size: 32px;
font-weight: 800;
color: var(--cr-ink);
letter-spacing: .03em;
}
html[data-template="crayon"] .tag-count { color: var(--cr-ink-2); font-size: 14px; }
html[data-template="crayon"] .tag-chip {
font-size: 14px;
font-weight: 700;
color: var(--cr-ink);
background-color: var(--cr-card);
border: 2px solid var(--cr-line-2);
border-radius: 999px;
padding: 5px 16px;
}
html[data-template="crayon"] .tag-chip:hover { background-color: var(--cr-pink); border-color: var(--cr-pink-dp); }
html[data-template="crayon"] .tag-cls-head { gap: 16px; margin-bottom: 14px; }
html[data-template="crayon"] .tag-cls-title {
font-family: var(--cr-round);
font-size: 20px;
font-weight: 800;
color: var(--cr-ink);
}
/* 基类把标题旁那条短线关掉了，这里要重新打开 */
html[data-template="crayon"] .card .tag-cls-title::after {
display: block;
left: 0;
bottom: -4px;
width: 40px;
height: 3.5px;
background: var(--cr-mint-dp);
border-radius: 3px;
transform: rotate(-1deg);
opacity: .8;
}
html[data-template="crayon"] .tag-cls-more {
font-size: 12.5px;
font-weight: 700;
color: var(--cr-orange);
background: rgba(251, 217, 192, .55);
border-radius: 999px;
padding: 3px 12px;
}
html[data-template="crayon"] .tag-cls-more:hover { background: var(--cr-peach); }
html[data-template="crayon"] .tag-cls-intro { max-width: 44em; font-size: 13.5px; line-height: 2; color: var(--cr-ink-2); }
html[data-template="crayon"] .tag-groups .chips { gap: 8px 10px; }
/* ============================================================================
* 404
* ========================================================================== */
html[data-template="crayon"] .not-found h1 {
font-family: var(--cr-round);
font-size: 78px;
font-weight: 800;
color: #EFC3A4;
text-shadow: 4px 5px 0 rgba(217, 185, 78, .38);
}
html[data-template="crayon"] .not-found p { color: var(--cr-ink-2); font-size: 15px; line-height: 1.9; }
/* ============================================================================
* 响应式
* ========================================================================== */
@media (max-width: 1080px) {
html[data-template="crayon"] .detail-head h1 { font-size: 48px; }
html[data-template="crayon"] .char-decompose { grid-template-columns: repeat(2, 1fr); }
html[data-template="crayon"] .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
html[data-template="crayon"] .detail-head h1 { font-size: 40px; }
html[data-template="crayon"] .hero h1 { font-size: 34px; }
html[data-template="crayon"] .card { padding: 22px 22px; border-radius: 22px 18px 24px 16px / 18px 24px 16px 22px; }
html[data-template="crayon"] .card h2 { font-size: 20px; padding-left: 34px; }
html[data-template="crayon"] .card h2::after { left: 34px; width: 44px; }
html[data-template="crayon"] .tag { padding: 5px 12px 6px; }
html[data-template="crayon"] .fields { column-gap: 12px; }
}
@media (max-width: 640px) {
/* 基类在 ≤640 把整条导航 display:none 掉了，手机上就只剩 logo 和搜索框 ——
* 这里放回来：和 logo 同一行、放不下就横着滑，不占第三行。 */
html[data-template="crayon"] .nav {
display: flex;
flex-wrap: nowrap;
flex: 1 1 auto;
min-width: 0;
gap: 7px;
padding: 2px 0;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
html[data-template="crayon"] .nav::-webkit-scrollbar { display: none; }
html[data-template="crayon"] .nav a { flex: 0 0 auto; padding: 5px 12px; font-size: 13.5px; }
html[data-template="crayon"] .detail-head { padding: 14px 0 6px; }
html[data-template="crayon"] .detail-head h1 { font-size: 34px; letter-spacing: .03em; }
html[data-template="crayon"] .detail-head h1::before { width: 94%; height: 62%; }
html[data-template="crayon"] .grid-img { max-width: 100%; padding: 5px; }
html[data-template="crayon"] .card { padding: 20px 18px; margin-bottom: 22px; }
html[data-template="crayon"] .card h2 { font-size: 19px; padding-left: 32px; }
html[data-template="crayon"] .card h2::before { width: 13px; height: 13px; box-shadow: 12px 4px 0 -4px var(--cr-pink-dp), 21px -2px 0 -3px var(--cr-mint); }
html[data-template="crayon"] .card h2::after { left: 32px; bottom: 4px; width: 38px; height: 3.5px; }
html[data-template="crayon"] .explanation { font-size: 16px; line-height: 1.9; }
/* 单列：标签一行、值一行。dt/dd 都要落回第 1 列，否则 dd 会跑到第 2 列外面去 */
html[data-template="crayon"] .fields { grid-template-columns: 1fr; row-gap: 8px; }
html[data-template="crayon"] .field dt,
html[data-template="crayon"] .field dd { grid-column: 1; }
html[data-template="crayon"] .field dt { font-size: 12px; }
html[data-template="crayon"] .char-decompose { gap: 13px; }
html[data-template="crayon"] .char-glyph { width: 72px; height: 72px; line-height: 70px; font-size: 36px; }
html[data-template="crayon"] .char-item { padding: 15px 14px 14px; }
html[data-template="crayon"] .related-grid { grid-template-columns: 1fr; gap: 14px; }
/* 单列时不要再错落，否则一张压着下一张的边 */
html[data-template="crayon"] .related-item:nth-child(n) { transform: rotate(-.4deg); }
/* 接龙改竖排：屏幕上横排每行只放得下两个词，
* 行末的箭头却指向下一行第一个词 —— 方向是错的，链就断了 */
html[data-template="crayon"] .jielong-chain { flex-direction: column; align-items: flex-start; gap: 0; }
html[data-template="crayon"] .jielong-node { align-items: flex-start; }
/* align-self:center 在竖排里等于水平居中，箭头会飘到按钮右边去 */
html[data-template="crayon"] .jielong-arrow {
align-self: flex-start;
flex: 0 0 26px;
width: 26px;
height: 26px;
margin: 0 0 0 26px;
}
html[data-template="crayon"] .jielong-arrow::before {
left: 3px;
top: 0;
width: 4px;
height: 20px;
transform: rotate(2deg);
}
html[data-template="crayon"] .jielong-arrow::after {
right: auto;
left: 0;
top: 17px;
width: 10px;
height: 10px;
border-top: none;
border-right: 4px solid var(--cr-ink-2);
border-bottom: 4px solid var(--cr-ink-2);
border-top-right-radius: 0;
border-bottom-right-radius: 3px;
transform: rotate(45deg);
}
html[data-template="crayon"] .syn-ant { flex-direction: column; gap: 10px; }
html[data-template="crayon"] .hero h1 { font-size: 30px; }
html[data-template="crayon"] .list-head h1,
html[data-template="crayon"] .tag-head h1 { font-size: 26px; }
html[data-template="crayon"] .letters { gap: 9px; }
html[data-template="crayon"] .letter { font-size: 17px; padding: 9px 3px 10px; }
html[data-template="crayon"] .not-found h1 { font-size: 56px; }
}
@media (max-width: 420px) {
html[data-template="crayon"] .char-decompose { grid-template-columns: 1fr; }
html[data-template="crayon"] .detail-head h1 { font-size: 30px; }
html[data-template="crayon"] .nav { gap: 7px; }
html[data-template="crayon"] .nav a { padding: 5px 11px; font-size: 14px; }
}
/* 尊重系统的减少动效偏好：全站只有位移与旋转，没有必须的动画 */
@media (prefers-reduced-motion: reduce) {
html[data-template="crayon"] * { transition-duration: .01ms !important; }
}