/* ========== 毛毛雨小说馆 公共样式 ========== */
:root {
    color-scheme: light;
    scroll-behavior: smooth;
    --bg-main: #ffffff;
    --bg-card: #ffffff;
    --bg-item: #f5f5f5;
    --text-primary: #000000;
    --text-secondary: #555555;
    --text-body: #333333;
    --border-line: rgba(0, 0, 0, 0.13);
    --hover-bg: #ececec;
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 12px 34px rgba(0, 0, 0, 0.09);
    --accent-line: #000000;

    /* 阅读设置（由 common.js 写入 localStorage，页面 <head> 里的内联脚本提前套用；
       不设过就是下面这组默认值） */
    --read-font-size: 1.05rem;
    --read-line-height: 1.9;
    --read-width: 760px;
    --read-gap: 1.2rem;
}
[data-theme="dark"] {
    color-scheme: dark;
    --bg-main: #0a0a0a;
    --bg-card: #121212;
    --bg-item: #1c1c1c;
    --text-primary: #f5f5f5;
    --text-secondary: #a8a8a8;
    --text-body: #d8d8d8;
    --border-line: rgba(255, 255, 255, 0.13);
    --hover-bg: #242424;
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 12px 34px rgba(0, 0, 0, 0.5);
    --accent-line: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.25s ease, opacity 0.25s ease; }

body {
    min-height: 100vh;
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.75;
    background: var(--bg-main);
    color: var(--text-primary);
    letter-spacing: 0.3px;
    opacity: 0;
    animation: pageFadeIn 0.7s ease forwards;
    position: relative;
    overflow-x: hidden;
}

/* 自定义滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--border-line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* 进度条 */
.progress-bar {
    position: fixed; top: 0; left: 0; height: 3px;
    background: var(--accent-line); width: 0%; z-index: 9999;
}

/* 粒子画布 */
#particleCanvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
}

/* 动画 */
@keyframes pageFadeIn { to { opacity: 1; } }
@keyframes titleGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
@keyframes rotateIcon { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes breathe { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }

/* 浮动按钮 */
.float-btn {
    position: fixed; z-index: 99; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--border-line); cursor: pointer; font-size: 20px;
    box-shadow: var(--shadow); background: var(--bg-card); color: var(--text-primary);
}
.float-btn:hover { transform: scale(1.12); box-shadow: var(--shadow-hover); }
.theme-switch { top: 24px; right: 24px; }
.theme-switch:hover { animation: rotateIcon 0.4s ease; }
.back-top {
    bottom: 30px; right: 24px; background: var(--text-primary);
    color: var(--bg-card); opacity: 0; pointer-events: none;
    border: none; transform: translateY(10px);
}
.back-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* 页面容器 */
.page-wrap { max-width: var(--read-width); margin: 0 auto; padding: 32px 20px; position: relative; z-index: 2; }

/* 页头 */
header { margin-bottom: 26px; opacity: 0; transform: translateY(15px); transition: 0.6s ease; }
header.show { opacity: 1; transform: translateY(0); }
header h1 { margin: 0 0 12px; font-size: clamp(1.8rem,5vw,2.2rem); font-weight: 500; color: var(--text-primary); animation: titleGlow 4s infinite ease-in-out; }
header p { margin: 0; color: var(--text-secondary); font-size: 1rem; }

/* 文章卡片 */
.article {
    background: var(--bg-card); border-radius: 24px; padding: 28px;
    border: 1px solid var(--border-line); box-shadow: var(--shadow);
    opacity: 0; transform: translateY(20px); transition: 0.7s ease;
    position: relative;
}
.article.show { opacity: 1; transform: translateY(0); }
.article::after {
    content: "◇"; position: absolute; bottom: 10px; right: 16px;
    font-size: 10px; color: var(--border-line); opacity: 0.5; pointer-events: none;
}
.article h2 { margin-top: 0; font-size: 1.8rem; color: var(--text-primary); margin-bottom: 16px; }
.article p { margin: var(--read-gap) 0 0; line-height: var(--read-line-height); color: var(--text-body); font-size: var(--read-font-size); }

/* ========== 阅读设置面板 ========== */
.read-btn { left: 24px; bottom: 30px; font-size: 17px; }
.read-panel {
    position: fixed; left: 24px; bottom: 86px; z-index: 99;
    width: 232px; padding: 16px 18px 14px; border-radius: 14px;
    background: var(--bg-card); border: 1px solid var(--border-line);
    box-shadow: var(--shadow); display: none;
}
.read-panel.show { display: block; }
.read-panel h3 { margin: 0 0 12px; font-size: 0.85rem; font-weight: 600; letter-spacing: 2px; color: var(--text-secondary); }
.read-row { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; font-size: 0.8rem; color: var(--text-secondary); }
.read-row label { flex: none; width: 2.6em; }
.read-row output { flex: none; width: 3.2em; text-align: right; color: var(--text-primary); }
.read-row input[type=range] {
    flex: 1 1 auto; -webkit-appearance: none; appearance: none;
    height: 2px; background: var(--border-line); border-radius: 2px; outline: none;
}
.read-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
    background: var(--text-primary); cursor: pointer;
}
.read-reset {
    width: 100%; margin-top: 4px; padding: 7px; cursor: pointer;
    font: inherit; font-size: 0.78rem; letter-spacing: 1px;
    color: var(--text-secondary); background: transparent;
    border: 1px solid var(--border-line); border-radius: 8px;
}
.read-reset:hover { color: var(--text-primary); border-color: var(--text-primary); }

/* ========== 「继续阅读」提示 ========== */
.resume-toast {
    position: fixed; left: 50%; transform: translateX(-50%) translateY(12px);
    bottom: 26px; z-index: 120; opacity: 0; pointer-events: none;
    display: flex; align-items: center; gap: 14px;
    padding: 11px 18px; border-radius: 999px; white-space: nowrap;
    background: var(--bg-card); border: 1px solid var(--border-line);
    box-shadow: var(--shadow); font-size: 0.85rem; color: var(--text-secondary);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.resume-toast.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.resume-toast b { color: var(--text-primary); font-weight: 600; }
.resume-toast button {
    font: inherit; font-size: 0.8rem; padding: 5px 12px; cursor: pointer;
    border-radius: 999px; border: 1px solid var(--border-line);
    background: transparent; color: var(--text-primary);
}
.resume-toast button:hover { background: var(--hover-bg); }
.resume-toast .rt-close { border: none; padding: 5px 6px; color: var(--text-secondary); }

@media (max-width: 680px) {
    .read-btn { left: 12px; bottom: 20px; width: 40px; height: 40px; font-size: 15px; }
    .read-panel { left: 12px; bottom: 72px; width: 210px; }
    .resume-toast { bottom: 18px; font-size: 0.8rem; gap: 10px; padding: 9px 14px; }
}

/* 几何分隔线 */
.geo-divider {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin: 10px 0 22px;
}
.geo-divider::before, .geo-divider::after { content: ""; width: 50px; height: 1px; background: var(--border-line); }
.geo-divider span { width: 7px; height: 7px; border: 1px solid var(--border-line); transform: rotate(45deg); display: inline-block; }

/* 返回链接 */
.back-link { display: inline-block; margin-top: 24px; color: var(--text-primary); text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent; padding-bottom: 2px; font-size: 1rem; }
.back-link:hover { opacity: 0.6; border-bottom: 1px solid var(--accent-line); transform: translateX(4px); }

/* 响应式 */
@media (max-width: 680px) {
    .theme-switch { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 18px; }
    .back-top { width: 40px; height: 40px; font-size: 18px; bottom: 20px; right: 12px; }
    .article { padding: 22px; }
    .page-wrap { padding: 24px 16px; }
}

/* ========== 评论区（Waline）========== */
/* waline.css 是运行时追加到 head 的，文档顺序在 common.css 之后；
   普通 :root 压不过它，这里用 html:root 提权，把它的变量对齐站点主题。 */
html:root {
    --waline-font-size: 1rem;
    --waline-theme-color: #000000;
    --waline-active-color: #444444;
    --waline-white: #ffffff;
    --waline-color: var(--text-body);
    --waline-light-grey: var(--text-secondary);
    --waline-dark-grey: var(--text-secondary);
    --waline-bg-color: var(--bg-card);
    --waline-bg-color-light: var(--bg-item);
    --waline-bg-color-hover: var(--hover-bg);
    --waline-border-color: var(--border-line);
    --waline-disable-bg-color: var(--bg-item);
    --waline-disable-color: var(--text-secondary);
    --waline-bq-color: var(--bg-item);
    --waline-code-bg-color: #1c1c1c;
    --waline-info-bg-color: var(--bg-item);
    --waline-info-color: var(--text-secondary);
    --waline-badge-color: var(--text-primary);
    --waline-avatar-radius: 50%;
    --waline-box-shadow: none;
}
/* 大部分变量引用站点的 CSS 变量，随 data-theme 自动反色；
   只有硬编码的几个需要在暗色下单独改。 */
html:root[data-theme="dark"] {
    --waline-theme-color: #ffffff;
    --waline-active-color: #cccccc;
    --waline-white: #000000;
    --waline-code-bg-color: #0d0d0d;
}

/* 评论区外壳（标题用 Waline 自带的，这里只做分隔） */
.comment-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border-line);
}

/* 关闭头像：这一版 Waline 客户端没有 avatar 开关，
   而且默认头像走境外 CDN（国内可能加载不出），直接用 CSS 隐藏头像列 */
.wl-cards .wl-user,
.wl-avatar { display: none; }

@media (max-width: 680px) {
    .comment-section { margin-top: 22px; padding-top: 20px; }
}

/* ==印张覆盖层·开始== */
/* 2026-10-06 小说馆换印张。原样式一行没删——这一层只做两件事：
   把令牌换成印张的值，把形状语言从「圆角卡 + 柔影 + 动效」改成
   「直边 + 细线 + 四角套准角线」。和大学、高中、大一正文共用一套墨色。 */

/* ——— 令牌：亮 ——— */
:root {
  color-scheme: light dark;
  --paper: #ffffff;                       /* 纸 */
  --desk:  #fafafc;                       /* 纸外面的桌面 */
  --ink:   #0a0a0b;                       /* 墨 */
  --mut:   rgb(10 10 11 / 56%);
  --dim:   rgb(10 10 11 / 40%);
  --mesh:  rgb(10 10 11 / 8%);            /* 网点 */
  --rule:  rgb(10 10 11 / 15%);           /* 细线 */
  --rule2: rgb(10 10 11 / 42%);           /* 重线 */
  --plate: rgb(10 10 11 / 80%);           /* 印版边框 */
  --cloth: rgb(10 10 11 / 5.5%);          /* 极淡底纹 */
  --r: 2px;                               /* 印刷品的圆角几乎为零 */

  /* 原样式自己的令牌名，一并指到印张上 */
  --bg-main: var(--desk);
  --bg-card: var(--paper);
  --bg-item: var(--cloth);
  --text-primary: var(--ink);
  --text-secondary: var(--mut);
  --text-body: var(--ink);
  --border-line: var(--rule);
  --hover-bg: var(--cloth);
  --accent-line: var(--ink);
  --shadow: none;
  --shadow-hover: none;
}

/* ——— 令牌：暗（显式选了的按显式走，没选的跟系统） ——— */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0b0b0c; --desk: #0f1013; --ink: #f4f4f5;
    --mut: rgb(244 244 245 / 56%); --dim: rgb(244 244 245 / 42%);
    --mesh: rgb(244 244 245 / 7%); --rule: rgb(244 244 245 / 15%);
    --rule2: rgb(244 244 245 / 34%); --plate: rgb(244 244 245 / 26%);
    --cloth: rgb(244 244 245 / 5.5%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0b0c; --desk: #0f1013; --ink: #f4f4f5;
  --mut: rgb(244 244 245 / 56%); --dim: rgb(244 244 245 / 42%);
  --mesh: rgb(244 244 245 / 7%); --rule: rgb(244 244 245 / 15%);
  --rule2: rgb(244 244 245 / 34%); --plate: rgb(244 244 245 / 26%);
  --cloth: rgb(244 244 245 / 5.5%);
}

/* ——— 纸面 ——— */
body {
  background: var(--desk); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 16px; line-height: 1.78; letter-spacing: .002em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  /* 印张是印出来的，不是淡入出来的：去掉整页渐显，顺带治了「JS 没跑就是白页」 */
  opacity: 1; animation: none;
}
::selection { background: var(--ink); color: var(--paper); }
h1, h2, h3, h4, h5, h6 { animation: none; }

/* 阅读进度：一条墨线 */
.progress-bar { height: 2px; background: var(--ink); }

/* ——— 印张本体：外框 + 13px 网点 + 四角套准角线 ———
   角线不用伪元素画：直接当多层背景摞在纸面上，省掉一层 z-index 的麻烦。 */
.page-wrap {
  position: relative; z-index: 2;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2)),
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2)),
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2)),
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2)),
    radial-gradient(circle, var(--mesh) 0 .9px, transparent 1.15px);
  background-size:
    13px 1px, 1px 13px, 13px 1px, 1px 13px,
    13px 1px, 1px 13px, 13px 1px, 1px 13px,
    13px 13px;
  background-position:
    left 9px top 9px, left 9px top 9px, right 9px top 9px, right 9px top 9px,
    left 9px bottom 9px, left 9px bottom 9px, right 9px bottom 9px, right 9px bottom 9px,
    left top;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat,
                     no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  border: 1px solid var(--plate);
  border-radius: var(--r);
  margin: 30px auto; padding: 30px 34px 34px;
}

/* 页眉那把尺：一条基线 + 6px 短刻度 + 30px 长刻度（和正文页同一段代码） */
#pageHeader { margin: 0 0 26px; opacity: 1; transform: none; }
#pageHeader::before {
  content: ''; display: block; height: 8px; margin: 0 0 22px;
  opacity: .55; border-bottom: 1px solid var(--rule2);
  background-image:
    repeating-linear-gradient(90deg, var(--rule2) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, var(--rule2) 0 1px, transparent 1px 30px);
  background-size: 100% 4px, 100% 7px;
  background-position: left top, left top;
  background-repeat: repeat-x, repeat-x;
}
#pageHeader p {
  font-size: 11px; letter-spacing: .2em; color: var(--dim); margin: 0;
  text-transform: uppercase;
}

/* ——— 正文：不再是卡，就是纸上的一段 ——— */
.article {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  opacity: 1; transform: none;
}
.article::after { content: none; }        /* 去掉右下角那个 ◇ */
.article h2 {                             /* 篇名 = 一本印出来的书的书名 */
  font-size: 31px; font-weight: 700; letter-spacing: .01em; line-height: 1.26;
  margin: 0; padding-bottom: 16px; position: relative; color: var(--ink);
}
.article h2::after {                      /* 底下那道双层线 */
  content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule2);
}
.article p {
  margin: var(--read-gap) 0 0;
  font-size: var(--read-font-size); line-height: var(--read-line-height);
  color: var(--ink);
}
.article p:first-of-type { margin-top: 28px; }
.article h3 { font-size: 17.5px; font-weight: 600; margin: 38px 0 14px; }

/* 分隔符：改成一枚小菱形 + 两道细线，本来就够印张，只收掉圆角阴影 */
.geo-divider::before, .geo-divider::after { background: var(--rule2); }
.geo-divider span { background: var(--ink); }

/* ——— 浮钮：一律改成小票根 ——— */
.float-btn {
  width: auto; height: 34px; padding: 0 12px; border-radius: var(--r);
  border: 1.5px solid var(--plate); background: var(--paper); color: var(--ink);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.float-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: none; box-shadow: none; }
.theme-switch { top: 14px; right: 14px; }
.theme-switch:hover { animation: none; }
/* 月亮/太阳是彩色 emoji，印张上只留一个单色记号 */
#themeBtn { font-size: 0; }
#themeBtn::before { content: '\25D0'; font-size: 13px; line-height: 1; letter-spacing: 0; }
.back-top {
  bottom: 30px; right: 14px; border: 1.5px solid var(--plate);
  background: var(--paper); color: var(--ink);
  opacity: 0; pointer-events: none; transform: translateY(10px);
}
.back-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* 阅读设置面板 / 续读提示：同样收掉圆角与柔影 */
.read-btn { left: 14px; bottom: 30px; font-size: 17px; }
.read-panel {
  border-radius: var(--r); border: 1.5px solid var(--plate);
  background: var(--paper); box-shadow: none;
}
.resume-toast {
  border-radius: var(--r); border: 1.5px solid var(--plate);
  background: var(--paper); box-shadow: none;
}
.resume-toast button:hover { background: var(--cloth); }

/* 页脚：和全站统一的「最后更新」一样，一条细线收尾 */
#pageFooter { border-top: 1px solid var(--rule); color: var(--dim); }
#pageFooter p { color: var(--dim); }
footer { opacity: 1; }

/* ——— 评论区（Waline，由 common.js 在文章末尾插进来） ———
   它自带一套圆角卡 + 柔影，和印张不是一路；这里把变量对齐到墨色，
   再把所有圆角压平、阴影去掉。整段都跟着 --paper/--ink 走，暗色自动生效。 */
html:root {
  --waline-theme-color: var(--ink);
  --waline-active-color: var(--mut);
  --waline-white: var(--paper);
  --waline-bg-color: var(--paper);
  --waline-bg-color-light: var(--cloth);
  --waline-bg-color-hover: var(--cloth);
  --waline-border-color: var(--rule);
  --waline-border: 1px solid var(--rule);
  --waline-color: var(--ink);
  --waline-light-grey: var(--dim);
  --waline-dark-grey: var(--mut);
  --waline-disable-bg-color: var(--cloth);
  --waline-disable-color: var(--dim);
  --waline-info-bg-color: var(--cloth);
  --waline-info-color: var(--mut);
  --waline-code-bg-color: var(--ink);
  --waline-bq-color: var(--rule2);
  --waline-box-shadow: none;
  --waline-avatar-radius: var(--r);
}
.comment-section, .comment-section * {
  border-radius: var(--r) !important;
  box-shadow: none !important;
}

/* ——— 404：它自己有内联 style，所以这里提高一点特异性压过它 ——— */
body > .page {
  position: relative; z-index: 2; text-align: center;
  padding: 56px 34px; max-width: 520px;
  background-color: var(--paper);
  background-image: radial-gradient(circle, var(--mesh) 0 .9px, transparent 1.15px);
  background-size: 13px 13px;
  border: 1px solid var(--plate); border-radius: var(--r); box-shadow: none;
}
body > .page h1 { animation: none; letter-spacing: .06em; }
body > .page a {
  padding: 9px 20px; border-radius: var(--r); border: 1.5px solid var(--plate);
  background: var(--paper); color: var(--ink); font-weight: 600;
}
body > .page a:hover { background: var(--ink); color: var(--paper); transform: none; opacity: 1; }

/* ——— 窄屏：纸就是屏幕 ——— */
@media (max-width: 900px) {
  .page-wrap {
    margin: 0; padding: 24px 18px 30px;
    border-left: 0; border-right: 0; border-radius: 0;
  }
  #pageHeader::before { margin-bottom: 18px; opacity: .4; }
  .article h2 { font-size: 25px; }
}
@media (max-width: 680px) {
  .theme-switch { top: 10px; right: 10px; width: auto; height: 30px; padding: 0 10px; }
  .back-top { bottom: 20px; right: 10px; }
  .backbtn { left: 10px; }
  .page-wrap { padding: 22px 15px 28px; }
}

/* ——— 关掉动效就停在静止态 ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body, header, .article, footer { opacity: 1 !important; transform: none !important; }
}
/* —— 固定出入口：左上「书目」、右上主题键，都是一张小票根 ——
   齿孔用 currentColor 的点线，翻成负片时它自己跟着变色。 */
.backbtn, .shelfbtn {
  position: fixed; top: 14px; z-index: 200;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px; border: 1.5px solid var(--plate); border-radius: var(--r);
  background: var(--paper); color: var(--ink);
  text-decoration: none; border-bottom-width: 1.5px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  transition: background .16s ease, color .16s ease;
}
.backbtn { left: 14px; }
.shelfbtn { right: 14px; }
.backbtn:hover, .shelfbtn:hover {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink); box-shadow: none;
}
.backbtn .arw { font-size: 13px; line-height: 1; padding-right: 9px; border-right: 1px dotted; }
.shelfbtn .arw { font-size: 13px; line-height: 1; padding-left: 9px; border-left: 1px dotted; order: 2; }

/* —— 页尾票根：上一篇 / 书目 / 下一篇 ——
   三格之间是点线齿孔，指到哪一格那一格翻成负片。 */
.navStrip {
  display: flex; align-items: stretch; margin: 62px 0 0;
  border: 1.5px solid var(--plate); border-radius: var(--r); overflow: hidden;
}
.navStrip > * {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 13px 15px; background: var(--paper); color: var(--ink);
  text-decoration: none; border-bottom: 0;
}
.navStrip > * + * { border-left: 1px dotted var(--rule2); }
.navStrip a { transition: background .16s ease, color .16s ease; }
.navStrip a:hover { background: var(--ink); color: var(--paper); box-shadow: none; }
.navStrip .k {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.navStrip a:hover .k { color: var(--paper); opacity: .75; }
.navStrip .v {
  font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navStrip .mid { flex: 0 0 auto; text-align: center; }
.navStrip .off { color: var(--dim); }
.navStrip .off .k { color: var(--dim); }
.navStrip .off .v { font-weight: 400; }
@media (max-width: 900px) {
  .backbtn, .shelfbtn { top: 10px; padding: 6px 11px; font-size: 10.5px; letter-spacing: .1em; }
  .backbtn { left: 10px; }
  .shelfbtn { right: 10px; }
  .navStrip { flex-direction: column; margin-top: 48px; }
  .navStrip > * + * { border-left: 0; border-top: 1px dotted var(--rule2); }
}
/* ==印张覆盖层·结束== */