/* ═══════════════════════════════════════════
   7OP · 共享样式系统
   套印故障 / RISO 样本簿风格
   以 demo.html 为基准 v2.0
   ═══════════════════════════════════════════ */

/* ── 自托管字体（latin 子集 woff2，本地 /vendor/fonts/；
     中文走系统字体栈，不加载中文字体）── */
@font-face{font-family:'Anton';font-weight:400;font-display:swap;src:url(/vendor/fonts/anton.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url(/vendor/fonts/jetbrains-mono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url(/vendor/fonts/jetbrains-mono-500.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-display:swap;src:url(/vendor/fonts/jetbrains-mono-700.woff2) format('woff2')}

/* ═══════════════════════════════════════════
   设计令牌
   ═══════════════════════════════════════════ */
:root{
  --paper:#f1efe7; --paper2:#e9e6db;
  --ink:#16130f; --ink-soft:#56504a;
  --verm:#e23b2e; --verm-d:#b62a20; --line:#cdc8ba;
  --cmyk-c:#0097c4; --cmyk-m:#e23b2e; --cmyk-y:#f2c200; --cmyk-k:#16130f;
  --page-width:1280px; --px:0; --py:0;
  --disp:'Anton',sans-serif;
  --sans:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}

/* ═══════════════════════════════════════════
   基础
   ═══════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--verm);text-decoration:none}
a:hover{text-decoration:underline}

/* ═══════════════════════════════════════════
   Ambient 装饰层（以 demo 为准）
   ═══════════════════════════════════════════ */
.noise{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.half{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(22,19,15,.05) 1px,transparent 1px);background-size:7px 7px}
.crop{position:fixed;width:22px;height:22px;z-index:55;pointer-events:none}
.crop.tl{top:14px;left:14px}.crop.tr{top:14px;right:14px}
.crop.bl{bottom:14px;left:14px}.crop.br{bottom:14px;right:14px}
.crop::before,.crop::after{content:"";position:absolute;background:var(--verm)}
.crop::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
.crop::after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}
.bg7{position:fixed;right:-2vw;bottom:-6vh;font-family:var(--disp);font-size:72vh;line-height:1;
  color:transparent;-webkit-text-stroke:2.5px rgba(22,19,15,.10);z-index:0;pointer-events:none;
  transform:translate(calc(var(--px,0)*10px),calc(var(--py,0)*10px))}
.bg7::after{content:"7";position:absolute;inset:0;-webkit-text-stroke:2.5px rgba(226,59,46,.12);
  transform:translate(8px,6px);animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(14px,10px)}}

/* ═══════════════════════════════════════════
   sheet 骨架 + 刊头
   ═══════════════════════════════════════════ */
.sheet{min-height:100vh;display:grid;grid-template-rows:auto auto auto;
  max-width:var(--page-width);margin:0 auto;padding:clamp(40px,8vh,80px) clamp(16px,3vw,38px) 0;position:relative;z-index:1}

.masthead{display:flex;justify-content:space-between;align-items:center;
  border-bottom:2px solid var(--ink);font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;padding:10px 0;gap:12px}
.mast-l{display:flex;align-items:center;gap:8px}
.mast-r{display:flex;align-items:center;gap:10px}
.mast-r b{color:var(--verm)}
.blink{display:inline-block;width:8px;height:8px;background:var(--verm);animation:blink 1.4s steps(1) infinite;vertical-align:middle}
@keyframes blink{50%{opacity:0}}
#clock{font-variant-numeric:tabular-nums}

/* ── 刊头导航 ── */
.nav-links{display:flex;align-items:center;gap:clamp(8px,1.2vw,16px);font-family:var(--mono);font-size:10px;letter-spacing:.12em}
.nav-links a{color:var(--ink-soft);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--verm)}
.nav-drop{position:relative}
.nav-trigger{background:none;border:none;font:inherit;color:var(--ink-soft);cursor:pointer;padding:0;letter-spacing:.12em;transition:color .2s}
.nav-trigger:hover,.nav-drop.open .nav-trigger{color:var(--verm)}
.nav-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:130px;background:var(--paper);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility .2s;z-index:100}
.nav-drop.open .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-menu a{display:block;padding:7px 14px;color:var(--ink);font-size:10px;letter-spacing:.12em;white-space:nowrap}
.nav-menu a:hover{background:var(--paper2);color:var(--verm)}
.nav-menu a + a{border-top:1px dashed var(--line)}

/* ═══════════════════════════════════════════
   hero + 标题
   ═══════════════════════════════════════════ */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(24px,5vh,50px) 0 16px}
.post-title{font-family:var(--disp);font-size:clamp(48px,12vw,160px);line-height:.9;letter-spacing:.01em;
  padding-bottom:.18em}   /* Anton 字形远小于 em 框，补字形外留白，避免副标钻入 */
.post-title .h7{color:var(--verm)}
.layers{position:relative;display:inline-block}
.layer{position:absolute;inset:0}
.layer.v{color:var(--verm);transform:translate(5px,-4px);mix-blend-mode:multiply;transition:transform .3s}
.layer.k{position:relative;color:var(--ink)}   /* k 层 relative 撑开 .layers，v 层 absolute 偏移套色 */
.layers:hover .layer.v{transform:translate(0,0)}   /* hover 套准/现形 */
.post-sub{font-family:var(--mono);font-size:clamp(11px,1.6vw,14px);letter-spacing:.08em;
  text-transform:uppercase;margin-top:14px;color:var(--ink-soft)}
.post-sub b{color:var(--verm);font-weight:500}
.sub{font-family:var(--mono);font-size:clamp(13px,2vw,17px);letter-spacing:.32em;color:var(--ink-soft)}
.sub b{color:var(--verm)}

/* ── 章节标题（.sec-title 已废弃，统一使用 .section-title）── */

/* ── 大标题 .page-title（info 首页用，四色套印）── */
.page-title{position:relative;display:inline-block;font-family:var(--disp);font-size:clamp(48px,min(24vw,18vh),160px);line-height:.82;letter-spacing:-.01em}
.page-title .h7{color:var(--verm)}
.page-title .layers{position:relative;display:flex;font-family:var(--disp);letter-spacing:-.01em}
.page-title .layer{display:inline-block}
.page-title .layer.v{position:absolute;left:0;top:0;color:var(--verm);transform:translate(6px,-5px);mix-blend-mode:multiply;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.page-title .layer.c{position:absolute;left:0;top:0;color:var(--cmyk-c);transform:translate(-5px,4px);mix-blend-mode:multiply}
.page-title .layer.y{position:absolute;left:0;top:0;color:var(--cmyk-y);transform:translate(3px,8px);mix-blend-mode:multiply}
.page-title .layer.k{position:relative;color:var(--ink)}
.page-title:hover .layer.v{transform:translate(0,0)}

/* ═══════════════════════════════════════════
   §字体规格 / 色板（demo 新增展示组件）
   ═══════════════════════════════════════════ */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.spec-card{background:var(--paper2);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  padding:16px 18px;transition:box-shadow .25s,transform .25s}
.spec-card:hover{box-shadow:7px 7px 0 var(--verm);transform:translate(-2px,-2px)}
.spec-card .demo{font-size:34px;line-height:1;margin-bottom:8px}
.spec-card .demo.disp{font-family:var(--disp)}
.spec-card .demo.mono{font-family:var(--mono);font-weight:700}
.spec-card .demo.sans{font-family:var(--sans);font-weight:700}
.spec-card .name{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--verm);margin-bottom:4px}
.spec-card .meta{font-family:var(--mono);font-size:10px;color:var(--ink-soft)}

.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.swatch{border:1.5px solid var(--ink);overflow:hidden}
.swatch .chip{height:64px;display:flex;align-items:flex-end;padding:6px 8px;color:var(--paper);font-family:var(--mono);font-size:10px}
.swatch .info{padding:6px 8px;font-family:var(--mono);font-size:10px;line-height:1.4}
.swatch .info b{display:block;color:var(--ink)}
.swatch .info span{color:var(--ink-soft)}

/* ═══════════════════════════════════════════
   §母题（以 demo 为准）
   ═══════════════════════════════════════════ */
.motif-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:18px}

/* 橡皮章（流内徽章，多旋转态） */
.stamp{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--verm);border:1.5px solid var(--verm);padding:4px 8px;transform:rotate(-4deg);
  background:rgba(226,59,46,.06);text-transform:uppercase}
.stamp.ok{color:var(--cmyk-c);border-color:var(--cmyk-c);background:rgba(0,151,196,.06);transform:rotate(-2deg)}
.stamp.wip{color:#9a8a00;border-color:var(--cmyk-y);background:rgba(242,194,0,.10);transform:rotate(4deg)}
.stamp.set{transform:rotate(-12deg)}

/* 朱红公章（双环+五角星+弧形文字，demo 修正版） */
.seal{width:96px;height:96px;color:var(--verm);flex:none}
/* 入场洇墨动画：仅 blur 模糊渐清，不用 opacity 起始覆盖（视口外动画不跑时会卡在 opacity:0 不可见） */
.seal{animation:inkspread .8s ease-out}
@keyframes inkspread{from{filter:blur(3px)}to{filter:blur(0)}}

/* 铭牌（墨底，hover 故障） */
.plate{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:12px;padding:8px 14px;box-shadow:4px 4px 0 var(--line)}
.plate:hover{animation:glitch .3s steps(2) infinite}
@keyframes glitch{0%{transform:translate(0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,-1px)}}

/* 四色错位标题小样 */
.k4{position:relative;display:inline-block;font-family:var(--disp);font-size:64px;line-height:1}
.k4 .l{position:absolute;inset:0;mix-blend-mode:multiply}
.k4 .l.k{color:var(--ink)}
.k4 .l.v{color:var(--cmyk-m);transform:translate(4px,-3px)}
.k4 .l.c{color:var(--cmyk-c);transform:translate(-3px,2px)}
.k4 .l.y{color:var(--cmyk-y);transform:translate(2px,4px)}

/* CMYK 油墨规格（带边框盒子 + inkrow 行） */
.ink-spec{font-family:var(--mono);font-size:11px;border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:var(--paper2)}
.inkrow{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px dashed var(--line)}
.inkrow:last-child{border-bottom:none}
.inkrow i:first-child{width:18px;height:18px;display:inline-block;border:1px solid var(--ink)}
.inkrow .hex{margin-left:auto;color:var(--ink-soft)}

/* ═══════════════════════════════════════════
   正文排版（demo 基础 + 现有扩展）
   ═══════════════════════════════════════════ */
.body-copy{font-family:var(--sans);font-size:15px;line-height:1.75;max-width:64ch}
.body-copy p{margin:0 0 1.2em}
.body-copy p .hl{color:var(--verm);font-weight:700}
.body-copy p .code{font-family:var(--mono);font-size:.9em;background:#d8d3c5;padding:1px 5px;border-radius:2px}
.body-copy h1{font-family:var(--disp);font-size:clamp(26px,3.6vw,42px);line-height:.88;letter-spacing:-.01em;margin-bottom:4px}
.body-copy .subhead{font-family:var(--mono);font-size:clamp(11px,1.4vw,14px);letter-spacing:.08em;color:var(--ink-soft);margin-bottom:18px;padding-bottom:10px;border-bottom:1.5px solid var(--line)}
.body-copy h2{font-size:clamp(17px,2.2vw,22px);font-weight:700;margin:28px 0 12px;padding-bottom:4px;border-bottom:1.5px dashed var(--line);letter-spacing:.02em}
.body-copy h2 .sn{font-family:var(--mono);font-size:clamp(12px,1.4vw,16px);color:var(--verm);margin-right:6px}
.body-copy h3{font-size:clamp(15px,1.8vw,18px);font-weight:700;margin:20px 0 10px}
.body-copy h3 .sn{font-family:var(--mono);color:var(--verm);font-size:.7em;margin-right:.5em}
.body-copy h4{font-size:clamp(13.5px,1.5vw,16px);font-weight:700;margin:16px 0 8px;font-family:var(--mono);letter-spacing:.04em}
.body-copy h2,.body-copy h3,.body-copy h4{scroll-margin-top:20px}
.body-copy blockquote{border-left:3px solid var(--verm);background:var(--paper2);
  padding:10px 16px;margin:1.4em 0;font-size:.95em;line-height:1.6}
.body-copy blockquote strong{color:var(--ink)}
.body-copy blockquote .attrib{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:6px;letter-spacing:.1em}
.body-copy ul{margin:1em 0;padding-left:0;list-style:none}
.body-copy ul li{border-bottom:1px dashed var(--line);padding:.4em 0;position:relative;padding-left:22px}
.body-copy ul li::before{content:"●";color:var(--verm);margin-right:.6em;font-size:.7em;position:absolute;left:0}
.body-copy ol{margin:1em 0;padding-left:0;list-style:none;counter-reset:li}
.body-copy ol li{border-bottom:1px dashed var(--line);padding:.4em 0;counter-increment:li;padding-left:28px;position:relative}
.body-copy ol li::before{content:counter(li,decimal-leading-zero);font-family:var(--mono);color:var(--verm);margin-right:.6em;font-size:.85em;position:absolute;left:0}
.body-copy li ul,.body-copy li ol{margin:4px 0 4px 14px}
.body-copy li li{font-size:clamp(12.5px,1.3vw,14px);border-bottom:none;padding:4px 0 4px 20px}
.body-copy li:last-child{border-bottom:none}
.body-copy code{font-family:var(--mono);background:#d8d3c5;padding:1px 5px;border-radius:2px;font-size:.9em}

/* ═══════════════════════════════════════════
   卡片 / 表格（以 demo 为准）
   ═══════════════════════════════════════════ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.block{background:var(--paper2);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  padding:18px 20px;margin-bottom:16px;transition:box-shadow .25s,transform .25s}
.block:last-child{margin-bottom:0}
.block:hover{box-shadow:7px 7px 0 var(--verm);transform:translate(-2px,-2px)}
.block h3{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--verm);margin:0 0 10px}
.block p{margin:0 0 8px;font-size:13px;line-height:1.6}
.block p:last-child{margin-bottom:0}
.block p .hl{color:var(--verm);font-weight:700}
.block p .code{font-family:var(--mono);font-size:12.5px;background:#d8d3c5;padding:1px 6px;border-radius:2px}
.block.dark{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--verm)}
.block.dark h3{color:#ff7a6e}
.block.dark p{color:var(--paper)}
.block.dark .code{background:#3a352e;color:var(--paper)}
.block ul{padding-left:0;list-style:none;margin:8px 0 10px}
.block ul li{font-size:13.5px;padding:5px 0 5px 20px;position:relative;border-bottom:1px dashed var(--line)}
.block ul li:last-child{border:none}
.block ul li::before{content:"●";position:absolute;left:0;color:var(--verm);font-size:.7em}

.tbl{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
.tbl th{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:8px 10px}
.tbl td{padding:8px 10px;border-bottom:1px dashed var(--line)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:nth-child(even){background:var(--paper2)}
.tbl tbody tr:hover{background:#ddd8c8}
.tbl .ar{text-align:right}
.tw{overflow-x:auto;border:1.5px solid var(--ink)}
.tw .tbl{margin:0}

/* ═══════════════════════════════════════════
   代码块 · 统一深色油墨底（保留现有完整版）
   复制按钮由 script.js 自动注入，无需手写
   ═══════════════════════════════════════════ */
.code-block{margin:16px 0;position:relative;background:#2a221e;color:#e8e4d8;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--line);font-size:clamp(12px,1.3vw,14px);line-height:1.55}
.code-block code{display:block;padding:14px 16px;font-family:var(--mono);overflow-x:auto;background:none;color:inherit}
.code-block .ln{display:inline-block;width:2ch;text-align:right;margin-right:1.2ch;color:#6a655a;user-select:none}
/* 手写高亮 token（无 Prism 时的回退标注） */
.code-block .cm{color:#6a655a;font-style:italic}
.code-block .tag{color:#ff7a6e}.code-block .at{color:#88c0d0}
.code-block .str{color:#b8d887}.code-block .val{color:#b8d887}
.code-block .num{color:#f2c200}

/* ── 横向滚动条：油墨滚筒风。代码块深底配暖纸灰斜纹滚筒（同首页进度条网纹，有肌理不抢眼），表格纸底配墨黑滚筒 ── */
.code-block code::-webkit-scrollbar{height:10px}
.code-block code::-webkit-scrollbar-button{display:none;width:0;height:0}   /* 去掉两端箭头，只留滚筒 */
.code-block code::-webkit-scrollbar-corner{background:transparent}
.code-block code::-webkit-scrollbar-track{background:#1f1915;border-top:1.5px solid #3a352e}
.code-block code::-webkit-scrollbar-thumb{background:repeating-linear-gradient(45deg,#b3ac9d 0 4px,#8f887b 4px 8px);border:2px solid #1f1915}
.code-block code::-webkit-scrollbar-thumb:hover{background:repeating-linear-gradient(45deg,#d8d3c5 0 4px,#b3ac9d 4px 8px)}
.tw::-webkit-scrollbar{height:10px}
.tw::-webkit-scrollbar-button{display:none;width:0;height:0}
.tw::-webkit-scrollbar-corner{background:transparent}
.tw::-webkit-scrollbar-track{background:var(--paper2);border-top:1.5px dashed var(--line)}
.tw::-webkit-scrollbar-thumb{background:var(--ink);border:2px solid var(--paper2)}
.tw::-webkit-scrollbar-thumb:hover{background:var(--verm)}
/* Firefox 无 ::-webkit-scrollbar，降级走标准属性（双写会让新 Chromium 忽略自绘，故隔离在 @supports 内） */
@supports not selector(::-webkit-scrollbar){
  .code-block code{scrollbar-width:thin;scrollbar-color:#b3ac9d #1f1915}
  .tw{scrollbar-width:thin;scrollbar-color:var(--ink) var(--paper2)}
}

/* ═══════════════════════════════════════════
   Prism.js 主题覆盖（保留现有完整版）
   ═══════════════════════════════════════════ */
code[class*="language-"],pre[class*="language-"]{color:#e8e4d8;background:transparent;font-family:var(--mono);font-size:clamp(12px,1.3vw,14px);text-shadow:none;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.55;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
pre.code-block[class*="language-"]{background:#2a221e}
pre[class*="language-"]{overflow:auto}
:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}
.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6a655a;font-style:italic}
.token.punctuation{color:#9a948a}
.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#ff7a6e}
.token.boolean,.token.number{color:#f2c200}
.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#b8d887}
.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#e8e4d8}
.token.atrule,.token.attr-value,.token.keyword{color:#ff7a6e}
.token.function,.token.class-name{color:#88c0d0}
.token.regex,.token.important,.token.variable{color:#f2c200}
.token.important,.token.bold{font-weight:700}
.token.italic{font-style:italic}
.token.entity{cursor:help}
/* 复制按钮（深底配色） */
.code-block .cpy{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:#9a948a;background:rgba(255,255,255,.07);border:1px solid #4a443c;padding:3px 8px;cursor:pointer;transition:color .2s,border-color .2s;text-transform:uppercase;border-radius:2px}
.code-block .cpy:hover{color:#ff7a6e;border-color:#ff7a6e}
.code-block .cpy.done{color:#88c0d0;border-color:#88c0d0}

/* ═══════════════════════════════════════════
   折叠块 / 图片 / 引文 / 标签 / 分割线（以 demo 为准）
   ═══════════════════════════════════════════ */
.fold{background:var(--paper2);border:1.5px solid var(--ink);margin:8px 0}
.fold summary{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:12px 16px;cursor:pointer;list-style:none}
.fold summary::-webkit-details-marker{display:none}
.fold summary::before{content:"▶";color:var(--verm);margin-right:8px;display:inline-block;transition:transform .2s}
.fold[open] summary::before{transform:rotate(90deg)}
.fold[open] summary{border-bottom:1px dashed var(--line)}
.fold-body{padding:12px 16px;font-size:13px;line-height:1.7}

.figure{border:1.5px solid var(--line);background:var(--paper2);padding:clamp(10px,1.6vw,16px);text-align:center;margin:16px 0}
.figure .ph{height:100px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:#a39c8f;border:1px dashed var(--line);background:var(--paper)}
.figure .cap{font-family:var(--mono);font-size:clamp(9px,1vw,11px);letter-spacing:.1em;color:var(--ink-soft);margin-top:6px}

.pull-quote{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:16px;
  padding:18px 22px;box-shadow:4px 4px 0 var(--verm);margin:8px 0;line-height:1.5}
.pull-quote .attrib{display:block;font-size:11px;color:#ff7a6e;margin-top:8px}
.pull-quote em{color:#ff7a6e;font-style:normal}
.dark-box{background:#2a221e;color:#e8e4d8;font-family:var(--mono);font-size:13px;
  padding:16px 20px;box-shadow:3px 3px 0 var(--line);margin:8px 0;line-height:1.6}
.dark-box em{color:#ff7a6e;font-style:normal}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.tags span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line);padding:2px 8px}
.tags span:first-child{color:var(--verm);border-color:var(--verm)}

.divider{height:4px;border:none;background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px);margin:18px 0}

/* ═══════════════════════════════════════════
   文章卡 / Post Card（保留现有）
   ═══════════════════════════════════════════ */
.post-list{max-width:960px;margin:0 auto;padding:0 0 clamp(30px,6vh,50px);display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.post-card{background:var(--paper2);border:1.5px solid var(--ink);padding:clamp(14px,2vw,22px);box-shadow:3px 3px 0 var(--ink);display:block;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s;position:relative}
.post-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--verm)}
.post-card .meta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-soft);margin-bottom:6px;display:flex;gap:12px}
.post-card .meta .tag{color:var(--verm);font-weight:700}
.post-card h2{font-size:15px;font-weight:900;letter-spacing:.02em;margin-bottom:4px}
.post-card p{font-size:13px;line-height:1.5;color:var(--ink-soft);margin-top:4px}
.empty-note{text-align:center;padding:clamp(30px,5vh,50px) 0;font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--ink-soft);border:1.5px dashed var(--line);grid-column:1/-1}
.empty-note b{color:var(--verm)}

/* ═══════════════════════════════════════════
   按钮 / 链接（以 demo 为准）
   ═══════════════════════════════════════════ */
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px}
.btn-outline{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--verm);border:1.5px solid var(--verm);padding:8px 16px;
  background:transparent;cursor:pointer;transition:background .2s,color .2s;text-decoration:none}
.btn-outline:hover{background:var(--verm);color:var(--paper);text-decoration:none}
.btn-solid{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--paper);border:1.5px solid var(--ink);padding:8px 16px;
  background:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s;text-decoration:none}
.btn-solid:hover{background:var(--verm);color:var(--ink);border-color:var(--verm)}
.card-link{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--verm);border-bottom:1.5px solid var(--verm);padding:4px 0;text-decoration:none}
.card-link:hover{text-decoration:none}

/* ═══════════════════════════════════════════
   两列网格 / 版次行（保留现有）
   ═══════════════════════════════════════════ */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.grid2 .cell{background:var(--paper);border:1px dashed var(--line);padding:14px;font-family:var(--mono);font-size:11px;line-height:1.5}
.grid2 .cell strong{color:var(--verm);font-weight:700;display:block;margin-bottom:4px}

.edition-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;font-family:var(--mono);font-size:12px;padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:6px}
.edition-line:last-of-type{border:none;margin-bottom:0}
.edition-line .num{font-size:16px;font-weight:700;color:var(--verm)}
.edition-line .tag{font-size:9px;letter-spacing:.15em;color:var(--ink-soft);border:1px solid var(--line);padding:1px 6px}
.edition-line .note{font-size:11px;color:var(--ink-soft)}

/* ═══════════════════════════════════════════
   文章三栏布局（保留现有）
   ═══════════════════════════════════════════ */
.article-grid{display:grid;grid-template-columns:165px minmax(0,640px) 175px;gap:clamp(14px,2vw,32px);padding:clamp(12px,2vh,20px) 0 clamp(24px,5vh,44px);align-items:start;max-width:1100px;margin:0 auto}
.article-meta{font-family:var(--mono);font-size:10.5px;line-height:1.6;color:var(--ink-soft);position:sticky;top:clamp(12px,2vh,20px)}
.article-meta hr{border:none;border-top:1.5px dashed var(--line);margin:8px 0}
.article-meta .row{display:flex;flex-direction:column;gap:1px;margin-bottom:8px}
.article-meta .row .label{font-size:7.5px;letter-spacing:.18em;color:#a39c8f;text-transform:uppercase}
.article-meta .row .val{font-size:10.5px;color:var(--ink);font-weight:500}
.article-meta .row .val.tag{color:var(--verm)}
.article-meta .series{margin-top:4px;border-left:2px solid var(--verm);padding-left:8px;font-size:9.5px}
.article-meta .series .num{font-weight:700;color:var(--verm);letter-spacing:.1em}
.article-toc{font-family:var(--mono);font-size:10px;line-height:1.6;position:sticky;top:clamp(12px,2vh,20px)}
.article-toc .toc-label{font-size:7.5px;letter-spacing:.18em;color:#a39c8f;text-transform:uppercase;margin-bottom:6px;border-bottom:1.5px solid var(--ink);padding-bottom:4px}
.article-toc a{display:block;padding:3px 0 3px 10px;color:var(--ink-soft);text-decoration:none;border-left:1.5px solid var(--line);transition:color .2s,border-color .2s;font-size:10px}
.article-toc a:hover{color:var(--verm);border-color:var(--verm)}
.article-toc a.l2{padding-left:18px;font-size:9.5px}
.article-toc a.l3{padding-left:26px;font-size:9px;color:#a39c8f}
.article-toc .toc-foot{margin-top:10px;padding-top:8px;border-top:1.5px dashed var(--line);font-size:8.5px;color:#a39c8f;text-align:center}
.article-toc .toc-foot a{display:inline;border:none;padding:0;color:#a39c8f}
.article-toc .toc-foot a:hover{color:var(--verm)}

/* ═══════════════════════════════════════════
   组件指南三栏布局（原 .spec-grid 换名为 .guide-grid 避冲突）
   ═══════════════════════════════════════════ */
.guide-grid{display:grid;grid-template-columns:170px minmax(0,640px) 180px;gap:clamp(14px,2vw,32px);padding:clamp(14px,2vh,22px) 0 clamp(24px,5vh,44px);align-items:start;max-width:1100px;margin:0 auto}
.spec-index{font-family:var(--mono);font-size:10px;line-height:1.6;position:static}
.spec-index .ix-label{font-size:7.5px;letter-spacing:.18em;color:#a39c8f;text-transform:uppercase;border-bottom:1.5px solid var(--ink);padding-bottom:5px;margin-bottom:6px}
.spec-index a{display:block;padding:3px 0 3px 10px;color:var(--ink-soft);text-decoration:none;border-left:1.5px solid var(--line);transition:color .2s,border-color .2s}
.spec-index a:hover{color:var(--verm);border-color:var(--verm)}
.spec-index a.l2{padding-left:18px;font-size:9.5px}
.spec-index a.curr{color:var(--verm);border-color:var(--verm);font-weight:700}
.spec-side{font-family:var(--mono);font-size:9.5px;line-height:1.5;position:static;color:var(--ink-soft)}
.spec-side .s-label{font-size:7.5px;letter-spacing:.18em;color:#a39c8f;text-transform:uppercase;border-bottom:1.5px solid var(--ink);padding-bottom:5px;margin-bottom:6px}
.spec-side .note{margin-bottom:12px}
.spec-side .note .nv{color:var(--ink);font-weight:500;display:block;margin-bottom:2px}
.spec-side .note .css{display:block;background:#d8d3c5;padding:1px 5px;border-radius:2px;margin-top:3px;word-break:break-all;font-size:9px}
.spec-side hr{border:none;border-top:1.5px dashed var(--line);margin:10px 0}

/* ── 组件指南内联 demo ── */
.demo-box{background:var(--paper2);border:1.5px solid var(--ink);padding:clamp(14px,2vw,22px);margin-bottom:16px;box-shadow:4px 4px 0 var(--ink)}
.demo-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:6px 0}
.section-title{font-size:clamp(17px,2.2vw,22px);font-weight:700;margin:28px 0 12px;padding-bottom:4px;border-bottom:1.5px dashed var(--line);letter-spacing:.02em}
.section-title .sn{font-family:var(--mono);font-size:clamp(12px,1.4vw,16px);color:var(--verm);margin-right:6px}

/* ═══════════════════════════════════════════
   备案栏（demo 样式 + 现有 HTML 结构）
   ═══════════════════════════════════════════ */
.beian{border-top:3px solid var(--ink);padding:16px 0;margin-top:40px;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-soft)}
.beian-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.beian-row .label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink-soft)}
.beian-row a{display:inline-flex;align-items:center;gap:7px;color:var(--ink-soft);text-decoration:none;font-weight:500;position:relative}
.beian-row a .no{font-family:var(--mono)}
.beian-row a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--verm);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.beian-row a:hover{color:var(--verm);text-decoration:none}
.beian-row a:hover::after{transform:scaleX(1)}
.beian-row a img{width:16px;height:16px}
.beian-row .sep{width:1px;height:10px;background:var(--line)}
.beian .fineprint{margin-top:8px;opacity:.7;line-height:1.5;letter-spacing:.03em;max-width:98ch}

/* ═══════════════════════════════════════════
   Reveal 入场动画（demo 改进版：reveal-ready + 兜底定时器）
   ═══════════════════════════════════════════ */
.reveal{opacity:1;transform:none;transition:opacity .6s var(--d,0s),transform .6s var(--d,0s)}
html.js.reveal-ready .reveal{opacity:0;transform:translateY(16px)}
html.js.reveal-ready .reveal.in{opacity:1!important;transform:none!important}

/* ═══════════════════════════════════════════
   悬浮目录按钮（保留现有）
   ═══════════════════════════════════════════ */
.toc-float-btn{position:fixed;bottom:16px;right:16px;z-index:200;width:44px;height:44px;background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--verm);display:none;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;letter-spacing:.12em;cursor:pointer;transition:transform .2s,box-shadow .2s}
.toc-float-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--verm)}
.toc-float-panel{position:fixed;bottom:68px;right:16px;z-index:200;background:var(--paper);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:6px 0;display:none;min-width:140px}
.toc-float-panel a{display:block;padding:6px 14px;color:var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-decoration:none;border-bottom:1px dashed var(--line)}
.toc-float-panel a:last-child{border:none}
.toc-float-panel a:hover{background:var(--paper2);color:var(--verm)}

/* ═══════════════════════════════════════════
   Media Queries
   ═══════════════════════════════════════════ */
@media (max-width:920px){
  .article-grid,.guide-grid{grid-template-columns:1fr;gap:14px}
  .article-meta{position:static;display:flex;flex-wrap:wrap;gap:8px 16px;border-bottom:1.5px dashed var(--line);padding-bottom:10px}
  .article-meta hr{display:none}
  .article-meta .series{margin-top:0}
  .article-toc{display:none}
  .toc-float-btn{display:flex}
  .spec-index{display:none}
  .spec-side{position:static;border-top:1.5px dashed var(--line);padding-top:10px;margin-top:4px}
  /* 窄屏微标签提字号：7.5px 装饰字号在移动端难读 */
  .article-meta .row .label,.spec-side .s-label{font-size:9.5px}
}
@media (max-width:860px){
  .sheet{min-height:auto;display:block;overflow-x:hidden}
  .spec-grid,.card-grid{grid-template-columns:1fr}
  .masthead{flex-direction:column;align-items:flex-start;gap:8px}
  .post-list{grid-template-columns:1fr;max-width:640px}
  .post-card .meta{flex-wrap:wrap;gap:4px 12px}
  .grid2{grid-template-columns:1fr}
  .nav-links{font-size:11px}   /* 导航链接窄屏提一档，兼顾可读与点击热区 */
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .blink,.bg7::after,.seal,.plate:hover{animation:none!important}
}