/* ============================================================
   喵の画廊 v7 — 统一设计系统
   一套骨架（侧栏 + 内容列）走全站：首页 / 分类 / 标签 / 归档 / 搜索 /
   文章 / 独立页面 / 相册 / 404 都从同一组刻度里取值。
   头部只有一个组件 .pagehead，详情页的沉浸封面是它的 hero 变体。
   ============================================================ */

/* ---------- 1. 刻度 ---------- */
:root{
  /* 纸与墨：米纸底 + 暖黑字，白卡片浮在上面 */
  --paper:#fbf7ef;      /* 站点底 */
  --surface:#fff;       /* 卡片 / 输入 / 侧栏 */
  --surface-2:#f5efe2;  /* 凹陷：代码块、引用、次级面板 */
  --ink:#1b1712;        /* 主文字 */
  --ink-2:#4a443a;      /* 强调文字 */
  --body:#3a342b;       /* 正文 */
  --sub:#8b8172;        /* 辅助文字 */
  --faint:#b5ab97;      /* 更弱：编号、注脚 */
  --line:#eae2d1;       /* 描边 */
  --line-2:#dbd1ba;     /* 强描边 / hover 描边 */

  /* 糖果：色相沿用 v6，底色/描边/文字按米纸重算过一遍 */
  --coral:#ff6250; --sun:#ffc93c; --mint:#3ecfa0; --sky:#5b8def; --bubble:#ff8fb1; --grape:#9b8cff;
  --coral-bg:#ffefec;  --coral-line:#ffd6ce;  --coral-ink:#bf3a24;
  --sun-bg:#fff6da;    --sun-line:#f3dda0;    --sun-ink:#8a6700;
  --mint-bg:#e3f7ee;   --mint-line:#b9e7d6;   --mint-ink:#1a7052;
  --sky-bg:#e9f0fd;    --sky-line:#ccdcf8;    --sky-ink:#2b54a8;
  --bubble-bg:#fdeef3; --bubble-line:#fbd1de; --bubble-ink:#a52a57;
  --grape-bg:#f0edff;  --grape-line:#d7d0fb;  --grape-ink:#4f3cba;

  /* 字族：全站一套无衬线读字 + 一套等宽放数字/代码，没有第三套。
     这三行以前写的是 Inter / Noto Serif SC / JetBrains Mono，可本站从不加载网络字体，
     那些名字在访客机器上不存在，于是各人看到的字全不一样（Win 落到雅黑、iOS 落到苹方、
     引用还掉进 SimSun）。现在按系统排：苹果用苹方，Windows 用雅黑，兜底交给系统默认，
     谁打开都是本机那套最清楚的中文字。 */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,Menlo,monospace;

  /* 字号：全站只认这几档 */
  --fs-micro:10.5px;  /* 等宽小标签 */
  --fs-tiny:11.5px;
  --fs-sm:12.5px;
  --fs-base:14px;
  --fs-lg:16.5px;     /* 正文 */
  --fs-h3:20px;
  --fs-h2:24px;
  --fs-h1:clamp(28px,3.5vw,42px);

  /* 圆角：大卡 18 / 输入框 14 / 胶囊 999，嵌套一层减 4 */
  --r-xs:7px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  /* 间距：同一屏只跳相邻两档 */
  --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:20px; --sp-5:28px; --sp-6:40px; --sp-7:56px; --sp-8:76px;

  /* 阴影：带一点暖色，纯灰在米纸上会发脏 */
  --sh-1:0 1px 2px rgba(27,23,18,.04), 0 6px 16px -10px rgba(27,23,18,.12);
  --sh-2:0 2px 4px rgba(27,23,18,.04), 0 16px 34px -16px rgba(27,23,18,.20);
  --sh-3:0 28px 64px -26px rgba(27,23,18,.32);

  --gutter:var(--sp-6);

  /* --- 按钮动效时间曲线（取自 SOFT LAB 的 token 体系） --- */
  --mo-dur-quick:.2s; --mo-dur-fast:.3s; --mo-dur-base:.4s; --mo-dur-slow:.5s;
  --mo-dur-glacial:.8s;
  --mo-ease-standard:cubic-bezier(.4,0,.2,1);
  --mo-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --mo-ease-settle:cubic-bezier(.22,.61,.12,1);
  --mo-success:var(--mint);
}

/* ---------- 2. 糖果色：谁带 .c-xxx，谁就交出这四个值 ---------- */
.c-coral {--c:var(--coral); --c-bg:var(--coral-bg); --c-line:var(--coral-line); --c-ink:var(--coral-ink)}
.c-sun   {--c:var(--sun);   --c-bg:var(--sun-bg);   --c-line:var(--sun-line);   --c-ink:var(--sun-ink)}
.c-mint  {--c:var(--mint);  --c-bg:var(--mint-bg);  --c-line:var(--mint-line);  --c-ink:var(--mint-ink)}
.c-sky   {--c:var(--sky);   --c-bg:var(--sky-bg);   --c-line:var(--sky-line);   --c-ink:var(--sky-ink)}
.c-bubble{--c:var(--bubble);--c-bg:var(--bubble-bg);--c-line:var(--bubble-line);--c-ink:var(--bubble-ink)}
.c-grape {--c:var(--grape); --c-bg:var(--grape-bg); --c-line:var(--grape-line); --c-ink:var(--grape-ink)}

/* ---------- 3. 基础 ---------- */
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
/* 手机上点链接别糊一层灰块，那是 iOS 默认的按压高亮，我们自己有 :active */
a,button{-webkit-tap-highlight-color:transparent}
::selection{background:var(--sun);color:var(--ink)}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
mark{background:var(--sun-bg);color:var(--ink);border-radius:var(--r-xs);padding:0 2px;box-shadow:inset 0 -7px 0 var(--sun-line)}
kbd{font-family:var(--mono);font-size:var(--fs-tiny);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--r-xs);padding:1px 6px}
.sq{color:var(--coral)}
.mz-ic{width:15px;height:15px;flex:none;display:block}
.hidden{display:none}

/* ---------- 4. 骨架：侧栏 + 内容列（全站唯一） ---------- */
.shell{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:100vh;align-items:start}
/* .flow 是右列的竖排容器：main 与页脚都在里面，页脚才不会掉进网格的第一列 */
.flow{display:flex;flex-direction:column;min-width:0;min-height:100vh}

aside.side{
  border-right:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;height:100vh;overflow-y:auto;
  padding:30px 26px 24px;display:flex;flex-direction:column;gap:24px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
main.content{padding:var(--sp-6) var(--gutter) var(--sp-8);min-width:0;width:100%}

/* 侧栏：站名 */
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:var(--fs-lg);letter-spacing:-.3px}
.logo .mark{width:34px;height:34px;border-radius:var(--r-sm);background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:var(--fs-lg);flex:none;
  transition:background var(--mo-dur-quick) var(--mo-ease-standard),transform var(--mo-dur-quick) var(--mo-ease-spring)}
.logo:hover .mark{background:var(--coral);transform:rotate(-8deg)}
.logo small{display:block;font-family:var(--mono);font-size:var(--fs-micro);color:var(--sub);font-weight:400;letter-spacing:.5px}

/* 侧栏：站点文案 */
.intro .intro-t{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1.15}
.intro .intro-t .hl{background:linear-gradient(transparent 64%,var(--sun) 64%);padding:0 3px}
.intro p{margin-top:12px;font-size:var(--fs-sm);line-height:1.8;color:var(--sub)}

/* 侧栏小面板：分类 / 单页 / 标签 / 归档 / 统计 共用一个外壳 */
.panel,.filters{display:flex;flex-direction:column;gap:6px}
.panel h6,.filters h6,.spon h6,.nfpanel h6{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:1.4px;
  color:var(--faint);font-weight:700;margin-bottom:var(--sp-2)}
.panel,.filters,.spon{border-top:1px solid var(--line);padding-top:var(--sp-4)}

/* 列表型条目：分类与单页共用这一行 */
.fitem{
  display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);font-weight:500;color:var(--sub);
  padding:8px 12px;border-radius:var(--r-md);cursor:pointer;transition:.15s;border:none;background:none;
  width:100%;text-align:left;font-family:var(--sans);
}
.fitem i{width:8px;height:8px;border-radius:3px;background:var(--line);flex:none;transition:.15s}
.fitem b{margin-left:auto;font-family:var(--mono);font-size:var(--fs-tiny);font-weight:400;color:var(--faint)}
.fitem:hover{background:var(--surface-2);color:var(--ink)}
.fitem.is-on{background:var(--ink);color:#fff}
.fitem.is-on i{background:var(--sun)}
.fitem.is-on b{color:#8d8577}
/* 单页条目：色点直接是糖果主色，和分类的灰点区分开 */
.filters.pages .fitem i{background:var(--c,var(--grape));border-radius:var(--r-xs)}

/* 标签云 */
.cloud{display:flex;flex-wrap:wrap;gap:8px}
.cloud .tag{
  font-size:var(--fs-sm);font-weight:600;border-radius:var(--r-pill);padding:6px 14px;
  border:1px solid var(--line);background:var(--surface);color:var(--sub);
  transition:.15s;letter-spacing:.2px;display:inline-block;
}
.cloud .tag small{font-family:var(--mono);font-size:var(--fs-micro);opacity:.65;margin-left:3px}
.cloud .tag:hover{background:var(--surface-2);border-color:var(--line-2);color:var(--ink)}
.cloud .tag.is-on{background:var(--sun);border-color:var(--sun-line);color:var(--sun-ink)}
.cloud .tag.is-on:hover{border-color:var(--ink)}
.cloud .tag.is-on small{opacity:.7}
.cloud--sm{gap:6px}
.cloud--sm .tag{font-size:var(--fs-tiny);padding:5px 11px}

/* 归档月度行 */
.panel .arow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;
  padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--sub);
  transition:transform var(--mo-dur-quick) var(--mo-ease-settle),border-color .18s,box-shadow .18s}
.panel .arow:last-child{margin-bottom:0}
.panel .arow b{font-size:var(--fs-sm);font-weight:600;color:var(--ink);transition:color .18s}
.panel .arow span{flex:none;min-width:28px;text-align:center;font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 8px;transition:.18s}
.panel .arow:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:var(--sh-1)}
.panel .arow:hover span{background:var(--ink);border-color:var(--ink);color:#fff}
/* 当前月高亮：由 sidebar 用归档路由的 year/month 参数比对后挂 .is-on */
.panel .arow.is-on{background:var(--sun-bg);border-color:var(--sun-line)}
.panel .arow.is-on b{color:var(--sun-ink)}
.panel .arow.is-on span{background:var(--surface);border-color:var(--sun-line);color:var(--sun-ink)}

/* 博客统计 */
.kv{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);padding:8px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:none}
.kv b{font-weight:600}
.kv span{color:var(--sub);font-family:var(--mono);font-size:var(--fs-tiny)}

/* 换链 */
.spon a{display:block;font-size:var(--fs-sm);color:var(--sub);padding:4px 0;transition:.15s}
.spon a:hover{color:var(--ink)}

.sidefoot{margin-top:auto;font-family:var(--mono);font-size:var(--fs-sm);color:var(--sub);line-height:2}
.fline{display:block}
.sidefoot a{color:var(--sub);text-decoration:none;border-bottom:1px dashed var(--line);transition:.15s}
.sidefoot a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- 5. 手机端骨架：顶部细长栏 + 分类横滑 + 侧栏变抽屉 ----------
   宽屏这三个部件根本不显示，导航仍是左边那根常驻栏；
   窄屏（≤960）侧栏整块挪出文档流当抽屉，靠 .mmast 那两行做入口 */
.mmast,.mzcats,.mz-scrim,.side-head{display:none}
.mmast{
  align-items:center;gap:8px;height:50px;padding:0 10px;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.mmast-btn{
  flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 9px;
  background:none;border:0;border-radius:var(--r-md);cursor:pointer;
  font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;color:var(--sub);
}
.mmast-btn:active{background:var(--surface-2);color:var(--ink)}
.mmast-btn .mz-ic{width:19px;height:19px}
.mmast-logo{flex:1;min-width:0;display:flex;align-items:center;gap:8px;justify-content:center;
  font-size:var(--fs-base);font-weight:800;letter-spacing:-.2px}
.mmast-logo .mark{flex:none;width:26px;height:26px;border-radius:var(--r-sm);background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:var(--fs-sm)}
.mmast-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 横滑条：不折行、末尾留白，滚动条藏掉。单页入口排在分类之后，用一条竖线隔开 */
.mzcats{
  gap:7px;padding:9px 12px 11px;overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.mzcats::-webkit-scrollbar{display:none}
.mzcats-i{
  flex:none;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;
  font-size:var(--fs-sm);font-weight:600;color:var(--sub);white-space:nowrap;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);
}
.mzcats-i b{font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;color:var(--faint)}
.mzcats-i.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.mzcats-i.is-on b{color:#8d8577}
.mzcats-i.page{border-color:var(--c-line,var(--grape-line));background:var(--c-bg,var(--grape-bg));color:var(--c-ink,var(--grape-ink))}
.mzcats-i.page.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.mzcats-i.page.is-on b{color:#8d8577}
.mzcats-sep{flex:none;width:1px;height:20px;background:var(--line-2);margin:0 3px}
.mz-scrim{
  position:fixed;inset:0;z-index:265;background:rgba(27,23,18,.44);
  opacity:0;pointer-events:none;transition:opacity var(--mo-dur-fast) var(--mo-ease-standard);
}
.side-head{align-items:center;justify-content:space-between;gap:10px}
.side-head-t{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:1.4px;color:var(--sub);font-weight:700}
.side-x{flex:none;display:grid;place-items:center;width:40px;height:40px;background:none;
  border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;color:var(--ink)}
.side-x:active{background:var(--surface-2)}
.side-x .mz-ic{width:17px;height:17px}

/* ---------- 6. .pagehead：全站唯一的头部组件 ----------
   .arcbar（列表密度）与 .hero（详情密度）是它的两个变体：
   外壳、颗粒、装饰字形、等宽小标签完全同一套，只差内边距和字号 */
.pagehead{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--c-line,var(--line));border-radius:var(--r-xl);
  margin:0 0 var(--sp-6);
  background:
    radial-gradient(120% 90% at 8% -10%,rgba(255,255,255,.78),transparent 58%),
    linear-gradient(165deg,var(--c-bg,var(--surface-2)),var(--surface) 68%);
  box-shadow:var(--sh-1);
}
/* 颗粒：近看才生效的第三层，不承担识别 */
.pagehead::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(rgba(27,23,18,.06) 1.2px,transparent 1.2px) 0 0/15px 15px;
}
/* 装饰字形：模板用 data-glyph 传一个 emoji。列表头部是左文右动作两栏，
   所以这颗压在右上角当贴纸，右下角留给动作列 */
.pagehead[data-glyph]::after{
  content:attr(data-glyph);position:absolute;right:22px;top:16px;z-index:0;pointer-events:none;
  font-size:62px;line-height:1;opacity:.17;transform:rotate(8deg);
}
/* 等宽小标签：CATEGORY · 代码 / NO.07 / 2026-09-30 */
.ph-kind{position:relative;z-index:2;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:1.5px;font-weight:700;
  color:var(--c-ink,var(--sub));margin-bottom:var(--sp-3)}
.ph-kind em{font-style:normal;font-weight:400;color:var(--sub);letter-spacing:1.2px}
.ph-kind i{width:5px;height:5px;border-radius:50%;background:var(--c,var(--sun));flex:none}
.ph-kind a{color:inherit}
.ph-kind a:hover{text-decoration:underline;text-underline-offset:3px}
/* 标题行 */
.ph-h{position:relative;z-index:2;display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  font-size:var(--fs-h1);font-weight:800;letter-spacing:-1.2px;line-height:1.18;color:var(--ink)}
.ph-count{font-family:var(--mono);font-size:var(--fs-tiny);font-weight:400;letter-spacing:0;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--c-line,var(--line));border-radius:var(--r-pill);padding:5px 12px}
/* 一句话描述 */
.ph-desc{position:relative;z-index:2;font-size:var(--fs-base);line-height:1.9;color:var(--sub);
  margin-top:12px;max-width:62ch}
/* 底部动作区：回首页 / 搜索 / 排序 chips */
.ph-tail{position:relative;z-index:2;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:var(--sp-4)}
.ph-tail .csort{margin-left:auto}
/* 尾巴上那句不像是能点的话：不给描边，只留一行灰字 */
.ph-more{font-family:var(--mono);font-size:var(--fs-tiny);color:var(--faint)}

/* 列表页密度：左文右动作两栏。
   三行文字各占第一列，动作列用 grid-row:1/span 3 吃满整张卡并贴底——
   不这么做的话，标题和描述会各自撑一行、右边整片空掉，看着像漏了半张卡。
   写 span 3 而不是 -1：这里只有隐式行，-1 会退化成第 2 条线，动作列就被顶到第一行去了 */
.arcbar{
  padding:var(--sp-5) var(--sp-6);
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-6);align-items:end;
}
.arcbar>.ph-kind,.arcbar>.ph-h,.arcbar>.ph-desc{grid-column:1}
/* 详情页把标签挂在描述下面一行：塞进右边那列的话，签会一路顶到贴纸上 */
.arcbar>.cloud{grid-column:1;margin-top:var(--sp-3)}
/* 多出一行标签，右边那列就得跟着吃满四行，否则它的底边停在第三行、跟正文错开一截 */
.arcbar:has(>.cloud)>.ph-tail{grid-row:1 / span 4}
.arcbar>.ph-tail{
  grid-column:2;grid-row:1 / span 3;align-self:end;justify-self:end;margin-top:0;
  flex-direction:column;align-items:stretch;gap:8px;max-width:200px;
}
.arcbar>.ph-tail .chip-ghost{text-align:center}
.arcbar>.ph-tail .ph-more{text-align:right}
.arcbar>.ph-tail .csort{margin-left:0}
.arcbar .ph-h{font-size:clamp(26px,3.1vw,36px)}

/* 幽灵胶囊：头部与空状态里的小动作 */
.chip-ghost{font-size:var(--fs-sm);font-weight:600;color:var(--sub);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:6px 14px;background:var(--surface);transition:.15s}
.chip-ghost:hover{color:var(--ink);border-color:var(--ink)}
.chip-sun{background:var(--sun);border-color:var(--sun-line);color:var(--sun-ink)}
.chip-sun:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- 7. 卡片墙 ---------- */
.grid{display:grid;gap:var(--sp-5) var(--sp-4);
  grid-template-columns:repeat(auto-fill,minmax(max(200px,calc((100% - (var(--mz-cols,5) - 1) * var(--sp-4))/var(--mz-cols,5))),1fr))}
.card{display:block;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:10px;
  transition:border-color .2s,transform .2s var(--mo-ease-settle),box-shadow .2s}
.card:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--sh-2)}
.thumb{aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;position:relative;display:grid;place-items:center;
  transition:.25s;background:var(--c,var(--sun))}
.card:hover .thumb{box-shadow:0 14px 30px -14px rgba(27,23,18,.34)}
.thumb .big{font-size:58px;transition:transform .3s var(--mo-ease-spring);filter:drop-shadow(0 5px 0 rgba(0,0,0,.10))}
.card:hover .thumb .big{transform:scale(1.1) rotate(-6deg)}
.thumb .no{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;
  background:rgba(255,255,255,.9);border-radius:var(--r-xs);padding:3px 7px;color:var(--ink)}
/* 封面图片（自定义字段 cover）：有图就铺满展台，emoji 让位，NO 角标留在上面 */
.thumb.has-img{display:block}
.thumb.has-img .big{display:none}
.thumb .timg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .35s var(--mo-ease-settle)}
.card:hover .thumb .timg{transform:scale(1.05)}
.thumb.has-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(27,23,18,0) 55%,rgba(27,23,18,.16))}
.crow{display:flex;align-items:center;gap:10px;margin-top:12px}
.crow h3{font-size:var(--fs-base);font-weight:600;line-height:1.5;letter-spacing:-.1px;flex:1;min-width:0;color:var(--ink)}
.card:hover .crow h3{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--sun)}
.crow .go{flex:none;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;display:grid;
  place-items:center;font-size:var(--fs-sm);color:var(--sub);transition:.2s var(--mo-ease-spring)}
.card:hover .crow .go{background:var(--ink);color:#fff;border-color:var(--ink);transform:rotate(45deg)}
.cmeta{font-family:var(--mono);font-size:var(--fs-tiny);color:var(--faint);margin:5px 0 2px}
.cmeta .c-tags{color:var(--sub)}

/* 看法开关：网格 ↔ 列表，一组胶囊贴在卡片墙右上角 */
.viewsw{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin:0 0 var(--sp-4)}
.viewsw .vs-l{font-family:var(--mono);font-size:var(--fs-tiny);letter-spacing:1.2px;
  text-transform:uppercase;color:var(--faint);margin-right:2px}
.viewsw>button{background:var(--surface-2)}
.viewsw .chip{border:1px solid var(--line)}

/* 列表看法默认不露摘要：网格一行五张，一行只有一张时才摊开写 */
.cexcerpt{display:none}

/* 列表看法：一行一张，封面缩到左边当门牌，右边留给你想说的话 */
.grid.is-list{grid-template-columns:1fr;gap:10px}
.grid.is-list .card{display:grid;grid-template-columns:clamp(110px,16vw,170px) minmax(0,1fr);
  column-gap:var(--sp-4);align-items:center;padding:12px 14px}
.grid.is-list .thumb{grid-row:1 / span 3;aspect-ratio:4/3}
.grid.is-list .crow,.grid.is-list .cmeta,.grid.is-list .cexcerpt{grid-column:2}
.grid.is-list .crow{margin-top:0}
.grid.is-list .cexcerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-top:6px;font-size:var(--fs-sm);line-height:1.75;color:var(--sub)}
.grid.is-list .crow h3{font-size:var(--fs-lg)}

/* 翻页：首页那颗「再捞一点」和归档页的盒状分页共用一套皮肤 */
.more{display:flex;justify-content:center;padding:var(--sp-6) 0 0}
.more a.next{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:11px 24px;transition:.15s;box-shadow:var(--sh-1)}
.more a.next:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.more a.next.is-busy{opacity:.55}
.more-end{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);margin:0;text-align:center}
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:var(--sp-6)}
.pager a,.pager .gap{min-width:38px;height:38px;display:grid;place-items:center;padding:0 12px;
  font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);transition:.15s;box-shadow:var(--sh-1)}
.pager a:hover{border-color:var(--ink);color:var(--ink)}
.pager a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pager>span{min-width:38px;height:38px;display:grid;place-items:center;font-family:var(--mono);
  font-size:var(--fs-sm);color:var(--faint)}
.pager a.prev,.pager a.next{padding:0 15px;font-family:var(--sans);font-size:var(--fs-sm);font-weight:600}
.pager .gap{border-color:transparent;background:none;box-shadow:none}
.pager.cnavi{margin-top:var(--sp-5)}
.pager[hidden],.grid[hidden]{display:none}

/* 列表页的空状态 */
.nores{margin:0;padding:var(--sp-7) var(--sp-5);border:1px dashed var(--line-2);border-radius:var(--r-xl);
  background:var(--surface);text-align:center;box-shadow:var(--sh-1)}
.nores .ic{display:block;font-size:42px;line-height:1;margin-bottom:var(--sp-3)}
.nores h3{margin:0 0 10px;font-size:var(--fs-h3);font-weight:800;letter-spacing:-.5px}
.nores p{margin:0 auto var(--sp-4);font-size:var(--fs-base);line-height:1.95;color:var(--sub);max-width:44ch}
.nores .cloud{justify-content:center;margin-bottom:22px}
.nores .btns{flex-direction:row;justify-content:center;flex-wrap:wrap}
.empty{margin:0;padding:var(--sp-6) var(--sp-5);border:1px dashed var(--line-2);border-radius:var(--r-xl);
  background:var(--surface);text-align:center;font-size:var(--fs-base);color:var(--sub)}
.empty p{margin:0 0 14px;line-height:1.9}
/* 多个 chip-ghost 是 inline 流，挨着会贴死：左右各 5px，相邻两颗中间正好 10px */
.empty .chip-ghost{margin:0 5px 6px;display:inline-block}

/* ---------- 8. 详情页 Hero：.pagehead 的沉浸变体 ---------- */
.rprog{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;background:rgba(27,23,18,.06)}
.rprog i{display:block;height:100%;width:var(--rp,0%);background:linear-gradient(90deg,var(--coral),var(--sun));
  border-radius:0 4px 4px 0;transition:width .1s linear}
.rprog.done i{background:var(--mint)}

.hero{padding:var(--sp-6) var(--sp-6) var(--sp-5);border-radius:var(--r-xl)}
/* 编号水印压在右下角：以前挂在右上角，被卡片裁掉半截，看着像渲染出错 */
.hero .wm{
  position:absolute;bottom:-26px;right:clamp(10px,3vw,40px);z-index:0;pointer-events:none;
  font-weight:800;font-size:clamp(110px,13vw,168px);line-height:.8;letter-spacing:-8px;
  color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--c,var(--ink)) 22%,transparent);
  transform:translate(calc(var(--px,0px) * -.14),calc(var(--py,0px) * -.14));
  transition:transform .5s var(--mo-ease-spring);
}

/* 封面三段：面包屑+猫脸一行，标题+引言一行，数据胶囊用一条虚线压在底下当横档 */
.hero-in{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5)}
.hero-txt{flex:1 1 auto;min-width:0;max-width:760px}
.hero .ph-h{font-size:clamp(27px,3.2vw,40px);margin-top:2px;letter-spacing:-1.1px}
.hero .lede{margin-top:16px;font-size:var(--fs-lg);line-height:1.95;color:var(--ink-2);max-width:58ch}

/* 面包屑 */
.crumb{position:relative;z-index:2;font-family:var(--mono);font-size:var(--fs-sm);color:var(--sub);margin-bottom:var(--sp-3)}
.crumb a{color:var(--sub);transition:.15s}
.crumb a:hover{color:var(--ink)}
.crumb i{font-style:normal;color:var(--line-2);margin:0 6px}

/* 数据胶囊：从文字列里提出来横铺在封面底部，一条虚线把它和标题分开 */
.pills{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-5);
  padding-top:var(--sp-4);border-top:1px dashed var(--c-line,var(--line))}
.pill{font-family:var(--mono);font-size:var(--fs-tiny);color:var(--sub);border:1px solid var(--c-line,var(--line));
  border-radius:var(--r-pill);padding:6px 13px;background:rgba(255,255,255,.72);white-space:nowrap}
.pill b{color:var(--ink);font-family:var(--sans);font-weight:700}
.pills a.pill{transition:.15s}
.pills a.pill:hover{border-color:var(--ink);background:var(--surface);color:var(--ink)}
.hero-act{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
/* 封面主角那颗手绘猫脸（face 那一组）随详情页头部改版一起撤了：详情页现在与分类页同骨架，
   右上角留给 data-glyph 贴纸。那份 SVG 备份在预览目录里，想请回来抄回去即可 */

/* ---------- 9. 正文 ----------
   正文自己也装进一张卡，并且和头顶那张彩色卡同宽：以前它是浮在米纸上的裸文字，
   左边缘还差着一百多像素，看着就是「不统一」。
   右侧那道格外大的内边距不是手滑：右下角的停靠组浮在卡上，不给正文让出这条边距，
   滚到底时「目录/回顶/返回」就会压在最后一行字上 */
.article{
  width:100%;margin:var(--sp-5) auto 0;
  padding:var(--sp-7) var(--sp-6) var(--sp-6);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-1);
}
@media (min-width:961px) and (max-width:1280px){.article{padding-right:calc(var(--sp-6) + 32px)}}
@media (min-width:1281px){.article{padding-right:calc(var(--sp-6) + 64px)}}
/* 开着桌宠时再让开一截：猫框宽 155、钉在右下角，正文右边缘得退到它左边，
   不然滚到某些行，那一行的后半截是在猫肚子底下 */
@media (min-width:961px){body.mz-pet-on .article{padding-right:calc(var(--sp-6) + 96px)}}
.prose{font-size:var(--fs-lg)}
.prose h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.6px;line-height:1.35;
  margin:var(--sp-7) 0 var(--sp-3);scroll-margin-top:30px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.prose h2:first-child{margin-top:0}
.prose h2 .idx{display:inline-block;font-family:var(--mono);font-size:var(--fs-tiny);font-weight:700;color:var(--coral-ink);
  background:var(--coral-bg);border:1px solid var(--coral-line);border-radius:var(--r-xs);padding:2px 8px;margin-right:11px;vertical-align:4px}
.prose h1{font-size:27px;font-weight:800;letter-spacing:-.5px;line-height:1.4;margin:38px 0 18px}
.prose h1:first-child{margin-top:0}
.prose h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.2px;line-height:1.55;margin:34px 0 12px;scroll-margin-top:30px}
.prose h3::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2.5px;background:var(--sun);
  margin-right:10px;vertical-align:2px}
.prose h4{font-size:var(--fs-base);font-weight:700;color:var(--ink-2);line-height:1.6;margin:28px 0 10px;scroll-margin-top:30px}
.prose h4::before{content:"";display:inline-block;width:14px;height:2px;border-radius:2px;background:var(--line-2);
  margin-right:10px;vertical-align:4px}
.prose h5,.prose h6{font-size:var(--fs-sm);font-weight:700;color:var(--sub);letter-spacing:.3px;margin:22px 0 8px}
.prose p{font-size:var(--fs-lg);line-height:2.05;color:var(--body);margin-bottom:18px}
.prose code{font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface-2);border:1px solid var(--line);
  border-radius:5px;padding:2px 7px}
.prose ul{margin:0 0 18px 22px;font-size:var(--fs-lg);line-height:1.95;color:var(--body)}
.prose ul>li{margin-bottom:9px}
.prose ul>li::marker{color:var(--coral);font-size:.8em}
.prose blockquote{border-left:4px solid var(--sun);background:var(--surface-2);border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:18px 22px;margin:26px 0;font-size:var(--fs-lg);line-height:1.95;color:var(--ink-2)}
.prose blockquote p{font-size:var(--fs-lg);line-height:1.95;color:var(--ink-2);margin-bottom:10px}
.prose blockquote p:last-child{margin-bottom:0}
.prose .tip{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:20px 24px;margin:28px 0;
  font-size:var(--fs-sm);line-height:1.85}
.prose .tip b{color:var(--sun)}
.prose pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin:22px 0;
  font-family:var(--mono);font-size:var(--fs-sm);line-height:1.7;overflow-x:auto;color:var(--ink)}
.prose pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit;line-height:inherit}
/* 代码块复制：悬停浮现；触屏没有 hover，直接常驻 */
.codewrap{position:relative;margin:22px 0}
.codewrap pre{margin:0}
.code-copy{position:absolute;top:9px;right:9px;font-family:var(--mono);font-size:var(--fs-tiny);line-height:1.5;
  padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--sub);
  cursor:pointer;opacity:0;transition:opacity .18s}
.codewrap:hover .code-copy,.code-copy:focus-visible,.code-copy.is-done,.code-copy.is-fail{opacity:1}
.code-copy:hover{border-color:var(--ink);color:var(--ink)}
.code-copy.is-done{background:var(--mint-bg);border-color:var(--mint-line);color:var(--mint-ink)}
.code-copy.is-fail{background:var(--coral-bg);border-color:var(--coral-line);color:var(--coral-ink)}

/* 有序列表：等宽序号小胶囊，二级换天蓝 */
.prose ol{list-style:none;counter-reset:mzol;margin:0 0 18px;padding:0;font-size:var(--fs-lg);line-height:1.95;color:var(--body)}
.prose ol>li{counter-increment:mzol;position:relative;padding-left:33px;margin-bottom:9px}
.prose ol>li::before{content:counter(mzol,decimal-leading-zero);position:absolute;left:0;top:.44em;
  font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;line-height:1.5;color:var(--coral-ink);
  background:var(--coral-bg);border:1px solid var(--coral-line);border-radius:var(--r-xs);padding:1px 6px}
.prose ol ol{margin:9px 0 0}
.prose ol ol>li::before{color:var(--sky-ink);background:var(--sky-bg);border-color:var(--sky-line)}
.prose ul ul,.prose ol ul{margin:9px 0 0}

/* 术语表：HyperDown 认「词 / 冒号 释义」这种定义列表，左侧一道竖线把释义挂住 */
.prose dl{margin:0 0 18px;padding:0}
.prose dt{font-weight:700;color:var(--ink);font-size:var(--fs-base);margin-top:14px}
.prose dt:first-child{margin-top:0}
.prose dd{margin:4px 0 0;padding-left:14px;border-left:2px solid var(--coral-line);
  font-size:var(--fs-base);line-height:1.9;color:var(--body)}
.prose dd p{font-size:var(--fs-base);margin-bottom:8px}

/* 任务列表：HyperDown 不认 - [ ]，app.js 会把行首的 [ ]/[x] 换成 .tk 方框 */.prose li.task{list-style:none;position:relative;padding-left:26px;margin-left:-26px}
.prose li.task .tk{position:absolute;left:0;top:.52em;width:16px;height:16px;border-radius:5px;
  border:1.5px solid var(--line-2);background:var(--surface)}
.prose li.task.done{color:var(--sub)}
.prose li.task.done .tk{background:var(--mint);border-color:var(--mint)}
.prose li.task.done .tk::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}

/* 链接 / 强调 / 删除线 */
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral-line);
  text-decoration-thickness:2px;text-underline-offset:3px;transition:.15s}
.prose a:hover{color:var(--coral);text-decoration-color:var(--coral)}
/* 跨站链接：app.js 认出是外链才挂 is-ext，箭头和新窗口是一件事的两个半边，一起出现 */
.prose a.is-ext::after{content:"↗";text-decoration:none;font-family:var(--mono);font-size:.76em;
  margin-left:2px;vertical-align:1px;opacity:.6;transition:.15s}
.prose a.is-ext:hover::after{opacity:1}
.prose a.is-ext:has(img)::after{display:none}   /* 整张封面当链接时别在图角上戳个箭头 */
.prose strong{font-weight:700;color:var(--ink)}
.prose em{font-style:italic;color:var(--ink-2)}
.prose del{color:var(--faint);text-decoration:line-through;text-decoration-thickness:1.5px;
  text-decoration-color:rgba(255,98,80,.55)}

/* 行内文字样式：后台工具栏每一颗都对应这里的一条。
   HyperDown 只认 * _ ` 那几样，==高亮== 与 ~~删除~~ 由 app.js 落成 <mark>/<del>。
   mark 与 kbd 在第 3 节已经定过型，正文不再另起一套 */
.prose ins{color:var(--mint-ink);text-decoration:none;border-bottom:2px solid var(--mint-line);
  padding-bottom:1px}
.prose samp{font-family:var(--mono);font-size:var(--fs-sm);color:var(--sky-ink);background:var(--sky-bg);
  border-radius:5px;padding:1px 6px}
.prose abbr{cursor:help;text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:var(--line-2);text-underline-offset:4px}
.prose small{font-size:var(--fs-sm);color:var(--sub);line-height:1.8}
.prose cite{font-style:normal;color:var(--sub);font-size:var(--fs-base)}
.prose q{quotes:"「" "」" "『" "』";color:var(--ink-2)}
/* 上标下标：行高为 0 才不把行距顶开 */
.prose sup,.prose sub{font-size:var(--fs-tiny);line-height:0;position:relative;vertical-align:baseline;
  font-family:var(--mono);color:var(--coral-ink)}
.prose sup{top:-.42em}
.prose sub{bottom:-.28em}

/* 图片 / 嵌入 */
.prose img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  margin:26px auto;box-shadow:var(--sh-1)}
.prose figure{margin:26px 0}
.prose figcaption{font-family:var(--mono);font-size:var(--fs-tiny);color:var(--sub);text-align:center;margin-top:10px}
.prose iframe,.prose video,.prose .embed{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line);
  border-radius:var(--r-lg);margin:24px 0;background:var(--surface-2)}

/* 表格：app.js 会包一层 .tbl-wrap 让窄屏能横向滚 */
.prose .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);margin:24px 0;
  background:var(--surface);box-shadow:var(--sh-1);-webkit-overflow-scrolling:touch}
.prose .tbl-wrap table{margin:0;min-width:460px}
.prose table{width:100%;border-collapse:separate;border-spacing:0;margin:24px 0;
  font-size:var(--fs-sm);line-height:1.75;color:var(--body)}
.prose table th{background:var(--surface-2);color:var(--ink);font-weight:700;font-size:var(--fs-sm);text-align:left;
  padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.prose table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose table tr:last-child td{border-bottom:0}
.prose table tbody tr{transition:background .15s}
.prose table tbody tr:hover{background:var(--paper)}

/* 分隔线 */
.prose hr{border:0;height:1px;margin:38px 0;
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent)}

/* 单页的资料表：正文里手写 .facts */
.facts{border:1px solid var(--line);border-radius:var(--r-lg);padding:8px 20px;margin:26px 0;
  background:var(--surface);box-shadow:var(--sh-1)}
.facts .kv:last-child{border-bottom:0}

/* ---------- 10. 正文之下：下载卡 / 回复可见 / 版权 / 点赞 / 上下篇 ---------- */
/* 下载地址（自定义字段 download）：正文下面的白卡 */
.dl{margin:30px 0 6px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.dl-hd{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:var(--fs-sm);font-weight:800;
  letter-spacing:-.2px;color:var(--ink)}
.dl-hd span{font-family:var(--mono);font-size:var(--fs-tiny);font-weight:700;letter-spacing:1.1px;color:var(--sun-ink);
  background:var(--sun-bg);border:1px solid var(--sun-line);border-radius:var(--r-pill);padding:3px 9px}
.dl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dl-item{display:flex;align-items:center;gap:13px;padding:13px 15px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
.dl-item:hover{background:var(--surface);border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-2)}
.dl-ico{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:var(--fs-base);
  background:var(--surface);border:1px solid var(--line);transition:background .18s,border-color .18s}
.dl-item:hover .dl-ico{background:var(--sun);border-color:var(--sun-line)}
.dl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dl-name{font-size:var(--fs-base);font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-meta{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-go{flex:none;font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:6px 13px;transition:.18s}
.dl-item:hover .dl-go{background:var(--ink);border-color:var(--ink);color:#fff}

/* 回复可见：<!--mz-hide--> 段渲染成的面板 */
.reveal{margin:26px 0;border-radius:var(--r-lg)}
.reveal.is-locked{display:flex;align-items:center;gap:16px;padding:20px 22px;
  background:var(--sun-bg);border:1px dashed var(--sun-line)}
.reveal .rv-ic{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:var(--fs-lg);
  background:var(--surface);border:1px solid var(--sun-line)}
.reveal .rv-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.reveal .rv-hd{font-size:var(--fs-base);font-weight:800;letter-spacing:-.1px;color:var(--sun-ink)}
.reveal .rv-note{font-size:var(--fs-sm);line-height:1.8;color:var(--ink-2)}
.reveal .rv-tip{font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.2px;color:var(--sun-ink)}
.reveal .rv-go{flex:none;min-height:38px;padding:9px 17px;font-size:var(--fs-sm);text-decoration:none;
  background:transparent;border-color:color-mix(in srgb,var(--sun-ink) 32%,transparent);color:var(--sun-ink)}
.reveal .rv-go:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.reveal.is-open{background:var(--surface);border:1px solid var(--line);padding:18px 22px 20px;box-shadow:var(--sh-1)}
.reveal .rv-tag{display:inline-block;margin-bottom:12px;font-family:var(--mono);font-size:var(--fs-tiny);font-weight:700;
  letter-spacing:1.1px;color:var(--mint-ink);background:var(--mint-bg);border:1px solid var(--mint-line);
  border-radius:var(--r-pill);padding:3px 9px}
.reveal .rv-body>*:first-child{margin-top:0}
.reveal .rv-body>*:last-child{margin-bottom:0}
.reveal[id]{scroll-margin-top:26px}

/* 版权声明：它和下面几个小字段都是 .prose 里的 <p>，写成 p.xxx 才抢得过 .prose p */
.prose p.rights{margin:26px 0 0;padding:14px 18px;border-left:3px solid var(--coral);background:var(--coral-bg);
  border-radius:0 var(--r-md) var(--r-md) 0;font-size:var(--fs-sm);line-height:1.85;color:var(--coral-ink)}

/* 文末互动条 */
.like-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:44px;padding:22px 24px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1)}
.like-strip .ls-txt{flex:1;min-width:190px;margin:0;font-size:var(--fs-sm);line-height:1.8;color:var(--sub)}
.like-strip .ls-txt b{color:var(--ink)}
.like-strip .ls-main{flex:1;min-width:220px;display:flex;flex-direction:column;gap:11px}
.like-strip .ls-main .ls-txt{flex:none;min-width:0}
.like-strip p.ls-link{display:flex;align-items:center;gap:9px;margin:0}
.ls-cap{flex:none;font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
/* 框跟着网址长短走：短就短，长到装不下时自己收缩出省略号（min-width:0），按钮永远不换行 */
.ls-url{flex:0 1 auto;font-family:var(--mono);font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);background:var(--paper);
  border:1px solid var(--line);border-radius:9px;padding:5px 10px;max-width:100%;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}
/* 复制按钮：就是个扁平小按钮，不挂 mo-btn 那套动效 */
.ls-copy{flex:none;font-family:var(--mono);font-size:var(--fs-tiny);line-height:1.5;color:var(--sub);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 10px;
  cursor:pointer;white-space:nowrap}
.ls-copy:hover{border-color:var(--ink);color:var(--ink)}
.ls-copy.is-done{background:var(--mint-bg);border-color:var(--mint-line);color:var(--mint-ink)}
.ls-copy.is-fail{background:var(--coral-bg);border-color:var(--coral-line);color:var(--coral-ink)}
.like-strip .mo-success-morph{--mo-accent:var(--coral);--mo-accent-ink:#fff}

/* 上/下一篇 */
.navi{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:var(--sp-5)}
.navi a{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;min-width:0;background:var(--surface);
  box-shadow:var(--sh-1);transition:border-color .2s,transform .2s var(--mo-ease-settle),box-shadow .2s}
.navi a:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-2)}
.navi small{display:block;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:1px;color:var(--faint)}
.navi b{display:block;font-size:var(--fs-base);font-weight:600;margin-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navi .next{text-align:right}
/* core 只输出裸链接或裸文字：没有 a 的那格是「没有了」占位 */
.navi .nslot{display:block;min-width:0;font-size:var(--fs-sm);line-height:1.7}
.navi .nslot:not(:has(a)){border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:16px 18px;
  background:var(--surface-2);color:var(--sub);text-align:center;box-shadow:none}
.navi a.prev,.navi a.next{display:block;font-size:var(--fs-base);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navi a.prev::before,.navi a.next::before{display:block;font-family:var(--mono);font-size:var(--fs-micro);
  font-weight:400;letter-spacing:1px;color:var(--faint);margin-bottom:7px}
.navi a.prev::before{content:"← PREV"}
.navi a.next::before{content:"NEXT →"}

/* 评论区关闭 */
.cclosed{display:flex;align-items:flex-start;gap:14px;border:1px dashed var(--line-2);border-radius:var(--r-lg);
  padding:22px 24px;background:var(--surface);margin-top:8px}
.cclosed .ic{flex:none;font-size:26px;line-height:1.4}
.cclosed p{margin:0;font-size:var(--fs-base);line-height:1.9;color:var(--sub)}
.cclosed a{text-decoration:underline;text-underline-offset:3px}
.cclosed a:hover{color:var(--coral)}

/* ---------- 11. 评论区 ---------- */
.comments{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.chead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.chead h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.5px;margin:0}
.chead .idx{display:inline-block;font-family:var(--mono);font-size:var(--fs-tiny);font-weight:700;color:var(--coral-ink);
  background:var(--coral-bg);border:1px solid var(--coral-line);border-radius:var(--r-xs);padding:2px 8px;margin-right:11px;vertical-align:4px}
.ccount{font-family:var(--mono);font-size:var(--fs-tiny);color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 11px}
.csort{display:flex;gap:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px}
.chead .csort{margin-left:auto}
.chip{font-size:var(--fs-sm);font-weight:600;font-family:var(--sans);color:var(--sub);background:none;border:0;
  border-radius:var(--r-pill);padding:5px 13px;cursor:pointer;transition:.15s}
.chip:hover{color:var(--ink)}
.chip.is-on{background:var(--ink);color:#fff}

/* 单列时间线：一级评论挂头像竖轨，嵌套回复只留缩进（GitHub / qoder.cn 市场那套） */
.clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.citem{position:relative;display:block;padding:0 0 22px}
.citem::before{content:"";position:absolute;left:17px;top:0;bottom:0;width:2px;background:var(--line)}
.citem:last-child::before{bottom:auto;height:46px}
.citem-row{display:flex;gap:13px;align-items:flex-start}
.cav{flex:none;position:relative;z-index:1;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  overflow:hidden;font-size:var(--fs-base);font-weight:700;background:var(--surface-2);color:var(--ink);
  box-shadow:0 0 0 3px var(--surface)}
.cav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.cav-t{line-height:1}
.cav.c-sun{background:var(--sun-bg);color:var(--sun-ink)}
.cav.c-coral{background:var(--coral-bg);color:var(--coral-ink)}
.cav.c-mint{background:var(--mint-bg);color:var(--mint-ink)}
.cav.c-sky{background:var(--sky-bg);color:var(--sky-ink)}
.cav.c-bubble{background:var(--bubble-bg);color:var(--bubble-ink)}
.cav.c-grape{background:var(--grape-bg);color:var(--grape-ink)}
.cmain{flex:1;min-width:0}
.cinfo{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.cname{font-size:var(--fs-sm);font-weight:700}
.cdot{color:var(--faint);font-size:var(--fs-sm)}
.cinfo time{font-family:var(--mono);font-size:var(--fs-tiny);color:var(--sub);cursor:help}
.cbadge{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-xs);padding:1px 7px}
.cbadge.is-author{color:var(--coral-ink);background:var(--coral-bg);border-color:var(--coral-line)}
.cact{margin-left:auto;display:flex;align-items:center;gap:6px}
.cchild-count{font-family:var(--mono);font-size:var(--fs-tiny);color:var(--sub);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 10px}
/* core 生成的那几处：回复/取消回复是裸 <a> */
.cact a,#cancel-comment-reply-link{font-family:var(--mono);font-size:var(--fs-tiny);color:var(--sub);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 11px;transition:.15s}
.cact a:hover,#cancel-comment-reply-link:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.cact a.is-on{border-color:var(--ink);background:var(--ink);color:#fff}
.ctext{font-size:var(--fs-base);line-height:1.9;color:var(--body);word-break:break-word}
.ctext code{font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface-2);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px}
/* 嵌套回复：core 把子评论包成 .cmain 里又一个 <ol class="clist">，只留缩进不画引导竖线 */
.citem.is-child{padding-bottom:16px}
.citem.is-child::before{display:none}
.citem.is-child .cav{width:30px;height:30px;border-radius:10px;font-size:var(--fs-sm)}
.citem.is-child .cav img{border-radius:10px}
.citem.is-mine .cname{color:var(--coral-ink)}
.clist .clist{margin-top:10px;padding-left:24px}
/* core 的 TypechoComment.reply() 会把 #respond 搬成 li.citem 的直接子元素：
   缩进 49px = 头像 36px + 行间距 13px，让表单和正文同一列 */
.citem>.respond{margin:14px 0 4px 49px}
.citem.is-child>.respond{margin-left:43px}
.citem>.respond .cform{margin-top:0;background:var(--surface)}

.cform{margin-top:36px;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px 24px;
  background:var(--surface);box-shadow:var(--sh-1);transition:border-color .2s,box-shadow .2s}
.cform:focus-within{border-color:var(--line-2);box-shadow:var(--sh-2)}
.cform h3{font-size:var(--fs-lg);font-weight:800;margin:0 0 5px}
.cform p.cnote{font-size:var(--fs-sm);color:var(--sub);margin:0 0 18px;line-height:1.75}
.cform p.cdraft{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:-8px 0 16px;padding:9px 13px;
  font-size:var(--fs-sm);line-height:1.7;color:var(--sun-ink);background:var(--sun-bg);
  border:1px dashed var(--sun-line);border-radius:var(--r-md)}
.cform p.cdraft[hidden]{display:none}
.cdrop{flex:none;font-family:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--sun-ink);background:var(--surface);
  border:1px solid var(--sun-line);border-radius:var(--r-pill);padding:4px 12px;cursor:pointer;transition:.18s}
.cdrop:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.crow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px}
.cform label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.4px;color:var(--ink-2)}
.cform input,.cform textarea{width:100%;min-width:0;font-family:var(--sans);font-size:var(--fs-base);color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;transition:.15s}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--ink);background:var(--surface)}
.cform input:user-invalid,.cform textarea:user-invalid{border-color:var(--coral);background:var(--coral-bg)}
.cform textarea{line-height:1.8;min-height:92px;resize:vertical}
.cform .cbody{margin-bottom:16px}
.cfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ctip{flex:1;min-width:150px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
.ctip code{background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:1px 4px}
.cstat{flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-sm);color:var(--ink-2)}
.cstat.is-long{color:var(--coral-ink)}

/* 回复中的提示条 */
p.rbar,.comments p.rbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 12px;
  padding:9px 14px;font-size:var(--fs-sm);line-height:1.7;color:var(--sub);
  background:var(--coral-bg);border:1px solid var(--coral-line);border-radius:var(--r-md)}
p.rbar[hidden]{display:none}
.rbar .rlab{font-family:var(--mono);font-size:var(--fs-tiny);letter-spacing:.4px;color:var(--coral-ink)}
.rbar .rto{font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.rbar .cancel-comment-reply{margin-left:auto;display:flex}
p.cnone{margin:0;font-size:var(--fs-base);line-height:1.9;color:var(--sub)}
p.clogin{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--sub);margin:0 0 14px}
.clogin b{color:var(--ink)}
.clogin a{text-decoration:underline;text-underline-offset:3px}
.clogin a:hover{color:var(--coral)}

/* ---------- 12. 搜索：侧栏小框 + 头部大框 ---------- */
.sbox{display:flex;align-items:center;gap:7px;margin:0;padding:7px 8px 7px 11px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);transition:border-color .15s,background .15s}
.sbox:focus-within{border-color:var(--ink);background:var(--surface)}
.sbox-ic{font-size:var(--fs-sm);opacity:.6;flex:none}
.sbox input{flex:1;min-width:0;border:0;background:none;outline:none;font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink)}
.sbox input::-webkit-search-cancel-button{filter:grayscale(1);opacity:.5;cursor:pointer}
.sbox kbd{flex:none;opacity:.6}
.sbox-go{flex:none;font-family:var(--mono);font-size:var(--fs-tiny);font-weight:700;color:#fff;background:var(--ink);
  border:1px solid var(--ink);border-radius:9px;padding:6px 12px;cursor:pointer;transition:.15s}
.sbox-go:hover{background:var(--coral);border-color:var(--coral)}
.bigsearch{position:relative;z-index:2;display:flex;gap:10px;margin:18px 0 4px}
.bigsearch input{flex:1;min-width:0;padding:13px 16px;font-family:var(--sans);font-size:var(--fs-base);color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);outline:none;transition:border-color .15s}
.bigsearch input:focus{border-color:var(--ink);box-shadow:var(--sh-1)}
.bigsearch .mo-btn{flex:none}

/* ---------- 13. 按钮：基础 + 三种动效 ---------- */
.btns{display:flex;flex-direction:column;gap:10px}
.mo-btn{
  --mo-accent:var(--coral); --mo-accent-ink:#fff;
  position:relative;display:inline-flex;justify-content:center;align-items:center;gap:8px;
  min-height:44px;padding:12px 22px;font-size:var(--fs-sm);font-weight:600;font-family:var(--sans);
  background:var(--ink);color:#fff;border:1.5px solid var(--ink);border-radius:var(--r-pill);
  cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent;
  transition:color var(--mo-dur-fast) var(--mo-ease-standard),
             border-color var(--mo-dur-fast) var(--mo-ease-standard),
             background-color var(--mo-dur-fast) var(--mo-ease-standard);
}
.mo-btn:hover{background:var(--mo-accent);border-color:var(--mo-accent);color:var(--mo-accent-ink)}
.mo-btn--ghost{background:transparent;color:var(--sub);border-color:var(--line-2)}
.mo-btn--ghost:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.mo-btn:disabled{opacity:.5;cursor:default;pointer-events:none}
.mo-label{display:inline-block;transition:opacity .14s linear}

/* 1) Loading Morph —— 收成圆转圈，再撑回长条 */
.mo-loading-morph{
  width:var(--mo-w,auto);
  transition:width var(--mo-dur-glacial) var(--mo-ease-settle),
             min-width var(--mo-dur-glacial) var(--mo-ease-settle),
             padding var(--mo-dur-glacial) var(--mo-ease-settle),
             background-color var(--mo-dur-slow) var(--mo-ease-settle),
             border-radius var(--mo-dur-slow) var(--mo-ease-settle) 60ms;
}
.mo-loading-morph:active{transform:scale(.96)}
.mo-loading-morph .mo-done{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:0;letter-spacing:-2px;opacity:0;transition:opacity .16s linear;font-weight:700;
}
.mo-loading-morph.is-loading{
  --mo-h:44px;box-sizing:border-box;width:var(--mo-h);min-width:var(--mo-h);height:var(--mo-h);
  padding:0;border-color:var(--mo-accent);background-color:var(--mo-accent);border-radius:var(--r-pill);
}
.mo-loading-morph.is-loading .mo-label,.mo-loading-morph.is-loading .mo-done{opacity:0}
.mo-loading-morph.is-loading::after{
  content:"";position:absolute;inset:9px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:mo-spin .75s linear infinite;
}
@keyframes mo-spin{to{transform:rotate(360deg)}}
.mo-loading-morph.is-done{background-color:var(--mo-accent);border-color:var(--mo-accent);color:#fff}
.mo-loading-morph.is-done .mo-label{opacity:0}
.mo-loading-morph.is-done .mo-done{opacity:1;font-size:var(--fs-sm);letter-spacing:0}

/* 2) Success Morph —— 高光扫过（提交中）→ 变绿 + 打勾描边画出来 */
.mo-success-morph{transition:background-color var(--mo-dur-slow) var(--mo-ease-settle),border-color var(--mo-dur-slow) var(--mo-ease-settle),color var(--mo-dur-slow) var(--mo-ease-settle)}
.mo-success-morph:active{transform:scale(.97)}
.mo-success-morph.is-loading{background-color:var(--mo-accent);border-color:var(--mo-accent);color:#fff}
.mo-success-morph.is-loading::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background-image:linear-gradient(100deg,#0000 32%,#fff6 50%,#0000 68%);
  background-repeat:no-repeat;background-size:58% 100%;
  animation:mo-sweep 1.5s var(--mo-ease-standard) infinite;
}
@keyframes mo-sweep{0%{background-position:-70% 0}to{background-position:170% 0}}
.mo-check{position:absolute;inset:0;margin:auto;width:20px;height:20px;opacity:0}
.mo-check svg{width:100%;height:100%;display:block}
.mo-check path{fill:none;stroke:#fff;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26}
.mo-success-morph .mo-label{transition:opacity .16s linear}
.mo-success-morph.is-success{background-color:var(--mo-success);border-color:var(--mo-success);color:#fff}
.mo-success-morph.is-success .mo-label{opacity:0}
.mo-success-morph.is-success .mo-check{opacity:1;transition:opacity .1s linear}
.mo-success-morph.is-success .mo-check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--mo-dur-base) var(--mo-ease-settle) 60ms}

/* 3) Progress —— 按钮内部填充 + 等宽百分比，满了才允许点击 */
.mo-progress{--mo-progress:0%;background:var(--surface);color:var(--ink);border-color:var(--line)}
.mo-progress::before{
  content:"";position:absolute;inset:0;z-index:-1;width:var(--mo-progress);
  background:color-mix(in srgb,var(--mo-accent) 22%,transparent);
  transition:width var(--mo-dur-quick) var(--mo-ease-standard),background var(--mo-dur-slow) var(--mo-ease-settle);
}
.mo-progress:hover{background:var(--surface);color:var(--ink);border-color:var(--mo-accent)}
.mo-progress .mo-label{text-align:center;flex:1}
.mo-pct{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;min-width:4ch;font-size:var(--fs-tiny);opacity:.7}
.mo-progress.is-complete{background:var(--mo-success);border-color:var(--mo-success);color:#fff}
.mo-progress.is-complete::before{background:transparent;width:100%}
.mo-progress.is-complete .mo-pct{opacity:.85}

/* 鼠标爪印轨迹 */
.paw{position:fixed;pointer-events:none;z-index:999;font-size:var(--fs-base);opacity:.45;transform:translate(-50%,-50%);animation:pf 1s forwards}
@keyframes pf{to{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(var(--rot,20deg))}}

/* ---------- 14. 右下角停靠组：已撤 ----------
   目录 / 回顶 / 返回 / 首页 这四颗按喵总的要求全部不挂，正文右下角留空。
   浏览器自己的前进后退够用，h2 的编号仍然由 app.js 打在正文里。 */

/* ---------- 15. 相册页：封面相纸堆 + 瀑布流 + 大图层 ---------- */
.hero-stack{position:relative;flex:none;width:clamp(140px,15vw,216px);aspect-ratio:1/1;z-index:3;
  transition:transform .5s var(--mo-ease-spring)}
.hero:hover .hero-stack{transform:translateY(7px)}
.hero-stack .print{position:absolute;width:60%;aspect-ratio:3/4;padding:7px 7px 20px;background:var(--surface);
  border-radius:5px;box-shadow:0 14px 28px -12px rgba(27,23,18,.42);transition:transform .5s var(--mo-ease-spring)}
.hero-stack .print i{display:grid;place-items:center;width:100%;height:100%;border-radius:2px;font-style:normal;
  font-size:clamp(24px,3.4vw,42px);background:var(--c,var(--sun))}
.hero-stack .print i.has-img{background:var(--surface-2);overflow:hidden}
.hero-stack .print i img{display:block;width:100%;height:100%;object-fit:cover}
.hero-stack .p1{left:2%;bottom:4%;z-index:3;transform:rotate(-8deg)}
.hero-stack .p2{left:21%;bottom:26%;z-index:2;transform:rotate(6deg)}
.hero-stack .p3{left:38%;bottom:2%;z-index:1;transform:rotate(-1deg)}
.hero:hover .hero-stack .p1{transform:rotate(-12deg) translate(-8px,3px)}
.hero:hover .hero-stack .p3{transform:rotate(4deg) translate(8px,-3px)}

/* 图集小节头：放映按钮原先只躺在封面里，往下滚翻图的人得先滚回顶上才点得到 */
.albumbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:var(--sp-7) 0 var(--sp-5)}
.albumbar .mo-btn{margin-left:auto}
.ab-kind{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:var(--fs-tiny);
  letter-spacing:1.4px;text-transform:uppercase;color:var(--sub)}
.ab-kind i{width:5px;height:5px;border-radius:50%;background:var(--grape);flex:none}
.ab-kind em{font-style:normal;letter-spacing:0;color:var(--faint)}
/* 网格，不用分栏：column-count 是先竖着填满一栏再折下一栏，四张图排成 2×2 空掉第三栏，
   读图顺序也变成「一列走到底」；网格才是一行一行从左往右，而且吃得满整张卡 */
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px;align-items:start}
.shot{display:block;width:100%;margin:0;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.shot:focus-visible{outline:2px solid var(--ink);outline-offset:5px;border-radius:var(--r-lg)}
.ph{position:relative;display:grid;place-items:center;width:100%;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 0 0 1px rgba(27,23,18,.07),0 10px 20px -14px rgba(27,23,18,.5);
  transition:transform .28s var(--mo-ease-standard),box-shadow .28s;background:var(--c,var(--sun))}
.ph.r43{aspect-ratio:4/3}
.ph.r34{aspect-ratio:3/4}
.ph.r11{aspect-ratio:1/1}
.ph.r32{aspect-ratio:3/2}
.ph i{font-style:normal;font-size:46px;line-height:1;filter:drop-shadow(0 5px 0 rgba(0,0,0,.12));
  transition:transform .3s var(--mo-ease-spring)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 图没落地之前这里是一整块纯色，跟「图挂了」长得一模一样：飞着的盖一层微光，挂了的露出底下的 📷 和一行小字 */
.ph.is-load::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 82%);
  background-size:220% 100%;animation:phload 1.1s linear infinite}
@keyframes phload{from{background-position:160% 0}to{background-position:-60% 0}}
.ph.is-bad img{display:none}
.ph.is-bad::before{content:"这张没加载出来";position:absolute;left:10px;bottom:10px;z-index:2;
  font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink);background:rgba(255,255,255,.9);
  border-radius:var(--r-xs);padding:2px 7px}
.ph-no{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;color:var(--ink);
  background:rgba(255,255,255,.9);border-radius:var(--r-xs);padding:2px 7px}
.shot:hover .ph,.shot:focus-visible .ph{transform:translateY(-4px);
  box-shadow:0 0 0 1px rgba(27,23,18,.07),0 18px 30px -16px rgba(27,23,18,.55)}
.shot:hover .ph i{transform:scale(1.1) rotate(-5deg)}
.shot .cap{display:block;margin-top:9px;font-size:var(--fs-sm);font-weight:600;line-height:1.6;color:var(--sub);transition:color .15s}
.shot:hover .cap{color:var(--ink)}
.albumfoot{margin:2px 0 34px;font-family:var(--mono);font-size:var(--fs-tiny);line-height:1.8;color:var(--faint)}
.albumfoot kbd{font-size:var(--fs-micro)}
.albumfoot .tchint{display:none}

/* 大图查看层 */
.lb{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}
.lb[hidden]{display:none}
.lb-bg{position:absolute;inset:0;border:0;background:rgba(27,23,18,.82);backdrop-filter:blur(3px);cursor:zoom-out}
.lb-box{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb-top{display:flex;align-items:center;gap:12px;width:100%}
.lb-count{flex:none;font-family:var(--mono);font-size:var(--fs-tiny);letter-spacing:1px;color:#fff;background:rgba(255,255,255,.16);
  border-radius:var(--r-pill);padding:5px 11px}
.lb-title{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:700;color:rgba(255,255,255,.9);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lb-x{flex:none;width:34px;height:34px;display:grid;place-items:center;font-size:var(--fs-sm);color:#fff;background:transparent;
  border:1px solid rgba(255,255,255,.32);border-radius:var(--r-sm);cursor:pointer;transition:.15s}
.lb-x:hover{background:#fff;color:var(--ink)}
.lb-stage{position:relative;display:grid;place-items:center;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 34px 60px -26px rgba(0,0,0,.7)}
.lb-stage i{font-style:normal;line-height:1;filter:drop-shadow(0 9px 0 rgba(0,0,0,.14))}
.lb-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:rgba(27,23,18,.42);display:none}
.lb-stage.has-img img{display:block}
.lb-stage.has-img i{display:none}
.lb-exif{position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:var(--fs-micro);color:rgba(27,23,18,.66);
  background:rgba(255,255,255,.82);border-radius:var(--r-xs);padding:4px 9px}
.lb-bot{display:flex;align-items:center;gap:12px;width:100%}
.lb-nav{flex:none;width:40px;height:40px;display:grid;place-items:center;font-size:var(--fs-base);color:#fff;background:transparent;
  border:1px solid rgba(255,255,255,.32);border-radius:13px;cursor:pointer;transition:.15s}
.lb-nav:hover{background:#fff;color:var(--ink)}
.lb-cap{flex:1;min-width:0;margin:0;text-align:center;font-size:var(--fs-sm);line-height:1.6;color:rgba(255,255,255,.88)}
.lb-fade{animation:lbIn .28s var(--mo-ease-standard)}
@keyframes lbIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.lb-on{overflow:hidden}

/* ---------- 16. 404：同一套骨架，头部用 hero 变体 ---------- */
.nfwrap{text-align:center}
.nfwrap .hero{padding:var(--sp-7) var(--sp-6) var(--sp-7)}
.nfwrap .hero-in{flex-direction:column;align-items:center;gap:0}
.nfwrap .hero-txt{width:100%;max-width:620px}
.nfwrap .hero .ph-kind{justify-content:center}
.nfwrap .hero .wm{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-52%);
  font-family:var(--mono);font-size:clamp(140px,20vw,240px);letter-spacing:-10px}
.nfpaw{position:relative;z-index:2;margin:22px 0 0;font-size:19px;letter-spacing:4px;opacity:.7}
.nfwrap .hero-act{justify-content:center}
.nfpanel{margin-top:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;
  background:var(--surface);box-shadow:var(--sh-1)}
.nfpanel .cloud{justify-content:center}
.nfsuggest{margin-top:var(--sp-6);text-align:left}
.nfsuggest h6{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:1.4px;color:var(--faint);
  font-weight:700;margin:0 0 var(--sp-3)}

/* 独立页面之间的横向跳转：文章页没有这一排，只有 page / 相册有 */
.sib{margin-top:var(--sp-6)}

/* ---------- 17. 密码保护 ---------- */
.protected{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0;padding:20px 22px;
  border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface)}
.protected p{margin:0;font-size:var(--fs-sm);line-height:1.8;color:var(--sub);flex:1;min-width:200px}
.protected input[type="password"]{font-family:var(--sans);font-size:var(--fs-base);color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 13px}
.protected input[type="password"]:focus{outline:none;border-color:var(--ink);background:var(--surface)}
.protected .submit,.protected button{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:#fff;background:var(--ink);
  border:0;border-radius:var(--r-sm);padding:10px 16px;cursor:pointer}

/* ---------- 18. 桌宠 · Live2D（右下角，可拖走） ---------- */
/* 层级：抽屉 270 > 遮罩 265 > 顶栏 240 > 横滑条 239 > 猫 225——
   猫能被顶栏盖住，这样拖到最上面也不会把「菜单」按钮挡死 */
.mz-pet{
  position:fixed;right:20px;bottom:20px;z-index:225;
  pointer-events:auto;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.mz-pet.is-moved{right:auto;bottom:auto}
.mz-pet canvas{
  display:block;width:100%;height:100%;touch-action:none;cursor:grab;
  opacity:0;transition:opacity var(--mo-dur-base) var(--mo-ease-standard);
}
.mz-pet canvas.is-in{opacity:1}
.mz-pet canvas:active{cursor:grabbing}

/* 对话框：猫自己的泡泡粉底，尾巴指向它；顶部空间不够就翻到下面 */
.mz-pet-bubble{
  position:absolute;right:2px;bottom:calc(100% + 2px);max-width:min(214px,68vw);
  padding:9px 12px;background:var(--bubble-bg);color:var(--bubble-ink);
  border:1.5px solid var(--bubble-line);border-radius:var(--r-md);
  font-family:var(--sans);font-size:var(--fs-sm);line-height:1.6;letter-spacing:-.1px;
  box-shadow:0 10px 24px rgba(165,42,87,.12);
  opacity:0;transform:translateY(6px) scale(.94);transform-origin:bottom right;pointer-events:none;
  transition:opacity var(--mo-dur-quick) var(--mo-ease-standard),transform var(--mo-dur-fast) var(--mo-ease-spring);
}
.mz-pet-bubble::before,.mz-pet-bubble::after{
  content:"";position:absolute;right:16px;width:12px;height:12px;transform:rotate(45deg);
}
.mz-pet-bubble::before{top:calc(100% - 7px);background:var(--bubble-line);border-radius:0 0 3px 0}
.mz-pet-bubble::after{top:calc(100% - 9px);width:11px;height:11px;background:var(--bubble-bg);border-radius:0 0 3px 0}
.mz-pet-bubble.is-in{opacity:1;transform:none}
.mz-pet-bubble.is-below{bottom:auto;top:calc(100% + 2px);transform-origin:top right}
.mz-pet-bubble.is-below::before{top:auto;bottom:calc(100% - 7px);border-radius:3px 0 0 0}
.mz-pet-bubble.is-below::after{top:auto;bottom:calc(100% - 9px);border-radius:3px 0 0 0}

/* 小鱼干：从右上落进来，再被吃掉 */
.mz-pet-food{
  position:absolute;right:2px;top:26%;width:30px;height:30px;color:var(--coral);
  display:grid;place-items:center;pointer-events:none;
  animation:mzFishFall .58s var(--mo-ease-standard) both;
}
.mz-pet-food .mz-ic{width:26px;height:26px;filter:drop-shadow(0 4px 8px rgba(27,23,18,.18))}
.mz-pet-food.is-eaten{animation:mzFishEat .4s ease-in both}
@keyframes mzFishFall{
  from{opacity:0;transform:translate(30px,-26px) rotate(-24deg)}
  to{opacity:1;transform:translate(0,0) rotate(0)}
}
@keyframes mzFishEat{
  from{opacity:1;transform:translate(0,0) scale(1)}
  to{opacity:0;transform:translate(-10px,10px) scale(.3)}
}

.mz-pet-menu{
  position:absolute;right:0;bottom:calc(100% - 8px);width:172px;
  display:flex;flex-direction:column;gap:5px;padding:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  opacity:0;transform:translateY(8px) scale(.96);transform-origin:bottom right;pointer-events:none;
  transition:opacity var(--mo-dur-quick) var(--mo-ease-standard),transform var(--mo-dur-fast) var(--mo-ease-spring);
}
.mz-pet-menu.is-open{opacity:1;transform:none;pointer-events:auto}
/* 猫被拖到屏幕顶上时菜单翻到下方开，别开出去 */
.mz-pet-menu.is-below{bottom:auto;top:calc(100% - 8px);transform-origin:top right}
.mz-pet-menu b{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:1.2px;color:var(--sub);padding:2px 4px 4px}
.mz-pet-menu button{
  display:block;width:100%;text-align:left;font-size:var(--fs-sm);font-weight:600;font-family:var(--sans);
  padding:8px 11px;border:none;border-radius:var(--r-sm);background:none;color:var(--ink);cursor:pointer;transition:.15s;
}
.mz-pet-menu button:hover{background:var(--surface-2)}
.mz-pet-menu i{font-style:normal;font-size:var(--fs-micro);line-height:1.6;color:var(--sub);padding:3px 4px 0}

.mz-pet-call{
  position:fixed;right:16px;bottom:16px;z-index:225;
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 14px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:var(--sh-2);cursor:pointer;
  font-size:var(--fs-sm);font-weight:600;font-family:var(--sans);transition:.15s;
}
.mz-pet-call:hover{border-color:var(--ink);background:var(--surface-2)}
.mz-pet-call .mz-ic{width:17px;height:17px}

/* ---------- 19. 响应式 ---------- */
/* 窄屏：骨架改成单列，侧栏整块变抽屉 */
@media (max-width:960px){
  .shell{grid-template-columns:1fr;--mz-strip:55px;padding-top:calc(50px + var(--mz-strip) + 3px)}
  /* 顶部两行固定：站名 + 菜单/搜索，下面一行分类横滑，正文从它们底下开始排 */
  .mmast{display:flex;position:fixed;top:0;left:0;right:0;z-index:240}
  /* 横滑条高度写成一个变量：触屏上把胶囊撑到 44px 时，正文的起点跟着走，不用两头改数 */
  .mzcats{display:flex;position:fixed;top:50px;left:0;right:0;z-index:239;height:var(--mz-strip);align-items:center}
  .mz-scrim{display:block;opacity:0;pointer-events:none;
    transition:opacity var(--mo-dur-fast) var(--mo-ease-standard)}
  /* 侧栏整块收成左抽屉。fixed 的网格项不参与行高，正文不必再为它让出八百多像素；
     visibility 关掉抽屉时的 Tab 焦点，延后到滑出动画跑完才生效 */
  aside.side{
    position:fixed;top:0;left:0;bottom:0;z-index:270;width:min(84vw,326px);height:auto;
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
    border-right:1px solid var(--line);border-bottom:none;padding:18px 22px 30px;
    background:var(--surface);box-shadow:0 26px 64px rgba(27,23,18,.26);
    transform:translateX(-101%);visibility:hidden;
    transition:transform var(--mo-dur-base) var(--mo-ease-settle),visibility 0s linear var(--mo-dur-base);
  }
  body.mz-nav{overflow:hidden}
  body.mz-nav .mz-scrim{opacity:1;pointer-events:auto}
  body.mz-nav aside.side{transform:none;visibility:visible;
    transition:transform var(--mo-dur-base) var(--mo-ease-settle),visibility 0s}
  .side-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .side-head-t{flex:1;font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;letter-spacing:1.4px;color:var(--sub)}
  .side-x{flex:none;width:44px;height:44px;display:grid;place-items:center;background:var(--surface-2);
    border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;color:var(--ink)}
  .side-x:active{background:var(--ink);border-color:var(--ink);color:#fff}
  /* 站名在顶栏、分类与单页在横滑条，抽屉里再摆一遍只会挡路（.filters.pages 也是 .filters） */
  aside.side>.logo,aside.side>.filters{display:none}
  aside.side .intro .intro-t{font-size:26px}
  aside.side .sbox{margin-bottom:var(--sp-4)}
  main.content{padding:var(--sp-5) var(--sp-4) var(--sp-7)}

  .pagehead{border-radius:var(--r-lg);margin-bottom:var(--sp-5)}
  /* 窄屏没有左右两栏的余地：动作列回到文字下方横排 */
  .arcbar{padding:var(--sp-4);display:block}
  .arcbar>.ph-tail{margin-top:var(--sp-4);flex-direction:row;align-items:center;flex-wrap:wrap;max-width:none}
  .arcbar .ph-h{font-size:26px}
  /* 手机上小标签那行会折到第二行，贴纸压在上面就是叠字；头部本来就有底色，直接收掉 */
  .arcbar[data-glyph]::after{display:none}
  .pagehead[data-glyph]::after{font-size:58px;right:8px;top:-6px}

  /* 后台列数在手机上不作数：轨道最窄也要半行宽，硬顶到两列，卡片才装得下标题 */
  .grid{grid-template-columns:repeat(auto-fill,minmax(max(150px,calc((100% - var(--sp-3))/2)),1fr));gap:var(--sp-4) var(--sp-3)}
  .thumb .big{font-size:42px}
  .album{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .ph i{font-size:32px}
  .ph-no{top:8px;left:8px;font-size:var(--fs-micro);padding:2px 6px}

  .hero{padding:var(--sp-5) var(--sp-4) var(--sp-6)}
  .hero-in{flex-direction:column;align-items:flex-start;padding:0}
  .hero-txt{width:100%;max-width:none}
  .hero .ph-h{font-size:27px;letter-spacing:-.8px}
  .hero .ph-h br{display:none}
  .hero .wm{font-size:96px;bottom:4px;right:8px;letter-spacing:-6px}
  /* 相纸堆缩小后提到文字上方。别改成 position:static：三张 print 是绝对定位的，
     父级一 static 它们就改拿整张 hero 当参照系，宽高全乱，手机上等于糊住标题 */
  .hero-stack{order:-1;align-self:flex-end;width:112px;margin-bottom:14px}
  .hero:hover .hero-stack{transform:none}

  .article{margin-top:var(--sp-5);padding:var(--sp-6) var(--sp-4) var(--sp-5);border-radius:var(--r-lg)}
  /* 正文在手机上是同一档：--fs-lg 就是阅读字号，不再单独压小 */
  .prose h2{font-size:21px;margin-top:var(--sp-6)}
  .navi{grid-template-columns:1fr}
  .navi .next{text-align:left}
  .comments{margin-top:var(--sp-6)}
  .csort{margin-left:0}
  .crow3{grid-template-columns:1fr}
  .cform{padding:18px 16px 20px}
  .bigsearch{margin-top:14px}
  .bigsearch input{padding:11px 13px;font-size:var(--fs-base)}
  .nores{padding:var(--sp-6) var(--sp-4)}
  .citem>.respond,.citem.is-child>.respond{margin-left:0}
  .clist .clist{padding-left:15px}
  .citem{padding-bottom:18px}
  .lb{padding:14px}
  .lb-cap{font-size:var(--fs-sm)}
  .lb-stage i{font-size:52px!important}
  .nfwrap .hero .wm{top:50%;left:50%;font-size:118px;letter-spacing:-6px}
  .nfpaw{display:none}
  /* 停靠组撤了以后手机上右下角只剩猫，而猫框 177px 高、就蹲在底边：
     给 .flow 尾巴垫一截，最后一屏才滚得到猫头顶上面，而不是永远有一行在它肚子底下 */
  body.mz-pet-on .flow{padding-bottom:200px}
}
@media (max-width:640px){
  /* 手机上图集两列起跳：150px 的门槛在 390 屏只塞得下一列，相册墙变成一条竖队 */
  .album{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
  .mz-pet{right:14px}
  .mz-pet-call span{display:none}
  .mz-pet-call{width:44px;padding:0;justify-content:center}
  .dl{padding:15px}
  .dl-go{display:none}
  .reveal.is-locked{flex-wrap:wrap;padding:17px}
  .reveal .rv-go{width:100%;justify-content:center}
  .shot .cap{font-size:var(--fs-tiny)}
  /* 列表看法在手机上把封面缩成一块门牌，标题才有力气排满两行 */
  .grid.is-list .card{grid-template-columns:96px minmax(0,1fr);column-gap:var(--sp-3);padding:11px 12px}
  .grid.is-list .crow h3{font-size:var(--fs-base)}
}
/* 小屏手机：一列到底，两列会把封面和标题挤成一条缝 */
@media (max-width:400px){
  .grid{grid-template-columns:1fr;gap:20px}
}

/* ---------- 20. 触摸设备补丁：44px 起跳的点按区、iOS 输入框不跳焦、hover 特效不粘住 ---------- */
@media (hover:none){.code-copy{opacity:1}}
@media (pointer:coarse){
  /* iOS Safari 聚焦字号 <16px 的输入框会把整页放大，放大完还回不去，布局就歪了 */
  .sbox input,.bigsearch input,.cform input,.cform textarea,.protected input[type="password"]{font-size:var(--fs-lg)}
  .sbox kbd{display:none}          /* 「/」是键盘快捷键，触屏上说等于没说 */
  .sbox-go{min-height:44px;padding:10px 17px}
  .chip{min-height:44px;padding:10px 16px}
  /* 头部右列那几颗签（评论/回首页/全部文章）也是主导航，同样得够 44px */
  .chip-ghost{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* 窄屏顶上的分类横滑条是移动端主导航，胶囊也得够 44px；条子变高由 --mz-strip 顶着 */
  .mzcats-i{min-height:44px}
  .pager a,.pager>span{min-height:44px;height:auto}
  .pager a.prev,.pager a.next{padding:0 18px}
  .cact a,#cancel-comment-reply-link{min-height:44px;display:inline-flex;align-items:center;padding:10px 14px}
  .ls-copy{min-height:44px;padding:9px 16px}
  .cloud .tag{padding:11px 16px}
  .fitem{padding:13px 12px}
  .panel .arow{padding:14px 11px}
  .more a.next{min-height:44px;padding:12px 22px}
  .chip-ghost{min-height:44px;padding:11px 18px}
  .cdrop{min-height:44px;padding:9px 16px}
  .mz-pet-menu button{min-height:44px;padding:12px 12px}
  .mz-pet-menu i{font-size:var(--fs-tiny)}
  .lb-x{width:44px;height:44px}
  .lb-nav{width:46px;height:46px}
  .hero-act .mo-btn,.btns .mo-btn{min-height:48px}
}
@media (max-width:960px) and (pointer:coarse){.shell{--mz-strip:65px}}
/* 触屏没有真正的悬停：点完卡片 :hover 会一直挂着，看着像页面坏了。
   把会位移/发光的那几条在触屏上收掉，改按 :active 给一下即时反馈 */
@media (hover:none){
  .card:hover{transform:none;border-color:var(--line);box-shadow:var(--sh-1)}
  .card:hover .thumb{box-shadow:none}
  .card:hover .thumb .big,.card:hover .thumb .timg{transform:none}
  .card:hover .crow h3{text-decoration:none}
  .card:hover .crow .go{background:var(--surface);color:var(--sub);border-color:var(--line);transform:none}
  .logo:hover .mark{background:var(--ink);transform:none}
  .hero:hover .hero-stack{transform:none}
  .hero:hover .hero-stack .p1{transform:rotate(-8deg)}
  .hero:hover .hero-stack .p3{transform:rotate(-1deg)}
  .dl-item:hover{background:var(--paper);border-color:var(--line);transform:none;box-shadow:none}
  .dl-item:hover .dl-ico{background:var(--surface);border-color:var(--line)}
  .dl-item:hover .dl-go{background:var(--ink);border-color:var(--ink);color:#fff}
  .shot:hover .ph{transform:none;box-shadow:0 0 0 1px rgba(27,23,18,.07),0 10px 20px -14px rgba(27,23,18,.5)}
  .shot:hover .ph i{transform:none}
  .shot:hover .cap{color:var(--sub)}
  .navi a:hover{transform:none;border-color:var(--line);box-shadow:var(--sh-1)}
  .fitem:hover{background:none;color:var(--sub)}
  .panel .arow:hover{transform:none;border-color:var(--line);box-shadow:none}
  .panel .arow:hover span{background:var(--surface-2);border-color:var(--line);color:var(--ink-2)}
  .mo-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
  .mo-btn--ghost:hover{background:transparent;border-color:var(--line-2);color:var(--sub)}
  .card:active .thumb{transform:translateY(-2px)}
  .shot:active .ph{transform:translateY(-2px)}
  .mz-pet-menu button:hover{background:none}
  .mz-pet-menu button:active{background:var(--surface-2)}
  /* 相册那行「按 Enter 放大、← → 翻页」在触屏上是废话 */
  .albumfoot .kbhint{display:none}
  .albumfoot .tchint{display:inline}
}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}