/* 机房手账 · 共享样式（首页 + 文章详情页共用） */

:root{
  --ink:    #14161C;
  --ink-2:  #343A44;
  --mute:   #6B7280;
  --line:   #E5E9EE;
  --dot:    #E9EDF2;
  --pen:    #2C4BE0;   /* 圆珠笔蓝 */
  --hi:     #FFE45E;   /* 荧光笔黄 */
  --mint:   #CFEFDF;   /* 便签薄荷 */
  --coral:  #FF5B44;   /* 珊瑚红，只用在小地方 */

  /* 语义色板：深色模式只覆盖这一组，其余规则一律引用变量 */
  --bg:           #FFFFFF;   /* 页面底色 */
  --surface:      #FFFFFF;   /* 卡片 / 浮层 / 顶栏 */
  --surface-2:    #F7F8FA;   /* 代码块底 */
  --surface-3:    #F4F6FA;   /* 行内代码 / 输入框底 */
  --hover:        #F5F7FF;   /* 悬停浅底 */
  --hover-2:      #ECF0FF;   /* 按下态浅底 */
  --faint:        #C3C9D2;   /* 禁用态文字 */
  --scroll:       #D8DDE6;   /* 滚动条滑块 */
  --scroll-hover: #C3C9D2;
  --code-ink:     #232935;   /* 代码文字 */
  --solid:        #14161C;   /* 实心按钮 / 当前页背景 */
  --on-solid:     #FFFFFF;   /* 实心背景之上的文字 */
  --shadow:       rgba(20, 26, 40, .12);
  --shadow-strong:rgba(20, 26, 40, .55);
  --hl-line:      rgba(255, 228, 94, .38);  /* 代码行高亮 */
  --diff-add:     #EAF8F0;   /* diff 新增行 */
  --diff-del:     #FDECEA;   /* diff 删除行 */
  --diff-hunk:    #EEF2FF;   /* diff 段落标记 */
  --diff-hunk-ink:#2C4BE0;

  --wrap: 1120px;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  --hand: "Segoe Print", "Bradley Hand", "KaiTi", "楷体", "STKaiti", "Kaiti SC", cursive;
  --mono: ui-monospace, "Cascadia Code", "Cascadia Mono", "JetBrains Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ── 深色主题 ───────────────────────────────── */
/* 由 <html data-theme="dark"> 触发，首屏防闪烁脚本在模板 <head> 里同步执行 */
[data-theme="dark"]{
  --ink:    #E7EAF0;
  --ink-2:  #BDC4D0;
  --mute:   #8D97A6;
  --line:   #272C34;
  --dot:    #22262D;
  --pen:    #7C93FF;
  --hi:     rgba(255, 228, 94, .26);
  --mint:   #1D3A30;
  --coral:  #FF7A63;

  --bg:           #131519;
  --surface:      #181B20;
  --surface-2:    #1D2127;
  --surface-3:    #22272F;
  --hover:        #232A36;
  --hover-2:      #2A3350;
  --faint:        #4C5563;
  --scroll:       #3A424D;
  --scroll-hover: #4B5563;
  --code-ink:     #D8DDE5;
  --solid:        #E7EAF0;
  --on-solid:     #14161A;
  --shadow:       rgba(0, 0, 0, .45);
  --shadow-strong:rgba(0, 0, 0, .8);
  --hl-line:      rgba(255, 228, 94, .16);
  --diff-add:     #14251C;
  --diff-del:     #2A1917;
  --diff-hunk:    #1C2233;
  --diff-hunk-ink:#8AA0FF;
}
/* 少量需要单独处理的深色例外 */
[data-theme="dark"] .tab--top .tab__last{ color: #A6C4B3; }
[data-theme="dark"] .tab--top .tab__last b{ color: #7E9E8C; }
[data-theme="dark"] .tocpanel,
[data-theme="dark"] .tab a:hover{ box-shadow: 0 12px 30px var(--shadow-strong); }
[data-theme="dark"] .mark::before{ opacity: .55; }

*,*::before,*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior: smooth; overflow-x: hidden; }

body{
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.1px);
  background-size: 28px 28px;
  color: var(--ink);
  font: 16.5px/1.85 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
h1,h2,h3,p,ul{ margin: 0; }
ul{ padding: 0; list-style: none; }

::selection{ background: var(--hi); color: var(--ink); }

:focus-visible{
  outline: 2.5px solid var(--pen);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap{ width: min(var(--wrap), calc(100% - 44px)); margin-inline: auto; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── 顶栏 ───────────────────────────────────── */
.bar{
  position: sticky; top: 0; z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.bar__in{
  display: flex; align-items: center; gap: 30px;
  height: 66px;
}
.brand{
  font-size: 19px; font-weight: 900;
  letter-spacing: .01em;
  position: relative;
  padding-bottom: 2px;
}
.brand::after{
  content: "";
  position: absolute; left: 0; right: 2px; bottom: -3px;
  height: 6px;
  background: var(--hi);
  border-radius: 3px 6px 4px 8px;
  transform: rotate(-.8deg) scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.brand:hover::after{ transform: rotate(-.8deg) scaleX(1); }

.nav{ display: flex; gap: 26px; margin-left: auto; }
.nav a{
  font-size: 15px;
  color: var(--ink-2);
  padding-bottom: 3px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 64px 7px;
  background-image: none;
}
.nav a:hover{
  color: var(--pen);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='7' viewBox='0 0 64 7'%3E%3Cpath d='M1 5 C 14 1.4, 26 6, 38 3.6 S 56 1.2, 63 4' fill='none' stroke='%232C4BE0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.btn{
  display: inline-block;
  padding: 9px 18px;
  background: var(--solid);
  color: var(--on-solid);
  font-size: 14px; font-weight: 700;
  border-radius: 8px;
  transition: background-color .18s ease, transform .18s ease;
}
.btn:hover{ background: var(--pen); transform: translateY(-1px); }
.btn--ghost{
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn--ghost:hover{ background: var(--solid); color: var(--on-solid); }

/* ── 首屏 ───────────────────────────────────── */
.hero{
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .78fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
  padding: clamp(48px, 7vw, 66px) 0 clamp(40px, 5vw, 64px);
}
.hero h1{
  font-size: clamp(2.5rem, 5.6vw, 4.35rem);
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: -.02em;
}
.mark{ position: relative; display: inline-block; isolation: isolate; }
.mark::before{
  content: "";
  position: absolute;
  left: -.1em; right: -.14em;
  top: .2em; bottom: .02em;
  background: var(--hi);
  border-radius: 10px 3px 12px 5px;
  transform: rotate(-1.2deg) skewX(-7deg);
  z-index: -1;
}
.hero__sub{
  margin-top: 24px;
  max-width: 30em;
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-2);
}
.pen-circle{
  display: inline-block;
  padding: 3px 11px 4px;
  margin: 0 -4px;
  border: 1.8px solid var(--pen);
  border-radius: 46% 54% 42% 58%;
  transform: rotate(-2deg);
  color: var(--ink);
}
.sig{
  margin-top: 26px;
  font-family: var(--hand);
  font-size: 17px;
  color: var(--pen);
  transform: rotate(-.7deg);
  transform-origin: left center;
}

/* 便签 */
.note{
  position: relative;
  justify-self: end;
  width: min(100%, 320px);
  margin-top: 12px;
  padding: 24px 22px 18px;
  background: var(--mint);
  transform: rotate(-2.2deg);
  box-shadow: 0 14px 30px -18px rgba(20,22,28,.55), 0 1px 0 rgba(255,255,255,.7) inset;
}
.tape{
  position: absolute;
  top: -15px; left: 50%;
  width: 112px; height: 30px;
  transform: translateX(-50%) rotate(1.6deg);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.62) 0 4px, rgba(255,255,255,.34) 4px 8px),
    rgba(255,255,255,.82);
  box-shadow: 0 2px 6px rgba(20,22,28,.13);
  clip-path: polygon(2% 0, 100% 5%, 98% 100%, 0 94%);
}
.note h2{
  font-family: var(--hand);
  font-size: 21px;
  font-weight: 400;
  color: var(--pen);
  margin-bottom: 10px;
}
.note li{
  display: flex; gap: 9px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-2);
  padding: 2px 0;
}
.note li::before{
  content: "○";
  font-family: var(--hand);
  color: var(--mute);
  font-size: 14px;
  line-height: 1.7;
  flex: none;
}
.note li.done{ color: var(--mute); }
.note li.done::before{ content: "✓"; color: var(--pen); }
.note li.done span{ text-decoration: line-through; text-decoration-color: rgba(107,114,128,.45); }
.note .stamp{
  margin-top: 14px;
  text-align: right;
  font-family: var(--hand);
  font-size: 14px;
  color: rgba(20,22,28,.5);
}

/* ── 正文两栏（首页） ──────────────────────── */
.layout{
  display: grid;
  grid-template-columns: minmax(0,1fr) 292px;
  gap: clamp(34px, 5vw, 68px);
  padding-bottom: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--line);
  padding-top: clamp(34px, 4vw, 52px);
}
/* 分页的落点：吸顶栏 66px + 1px 描边，落到这里「最近写的」正好贴在栏下 */
#list-top{ scroll-margin-top: 67px; }
.sec-head{
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 26px;
}
.sec-head h2{
  font-size: 24px; font-weight: 900;
  letter-spacing: -.01em;
}
.sec-head span{
  font-family: var(--hand);
  font-size: 14.5px;
  color: var(--mute);
}

/* 头条 */
.lead{
  position: relative; /* 作为标题链接 ::after 的定位基准 */
  border-top: 2.5px solid var(--ink);
  padding-top: 18px;
  margin-bottom: 10px;
  cursor: pointer;
}
.lead__eyebrow{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--hand);
  font-size: 14.5px;
  color: var(--coral);
  margin-bottom: 10px;
}
.lead__eyebrow svg{ display: block; }
.lead h3{
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.42;
  font-weight: 900;
  letter-spacing: -.015em;
  max-width: 22em;
}
/* 标题链接「撑开」覆盖整块：点头条任意位置都能进文章。
   注意 <a> 不能是定位元素，否则 ::after 只覆盖标题那一行 */
.lead h3 a::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.lead:hover h3 a{ color: var(--pen); }
.lead__sum{
  margin-top: 14px;
  max-width: 34em;
  font-size: 15.5px;
  color: var(--mute);
}
.lead__meta,
.p__meta{
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--mute);
}
.lead__meta time,
.p__date{
  font-family: var(--hand);
  font-size: 15.5px;
  color: var(--pen);
  white-space: nowrap;
}
.chip{
  display: inline-block;
  padding: 2px 9px 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface);
}
a.chip{ transition: border-color .16s ease, color .16s ease, background-color .16s ease; }
a.chip:hover{ border-color: var(--pen); color: var(--pen); background: var(--hover); }
a.chip:active{ border-color: var(--pen); color: var(--pen); background: var(--hover-2); }

/* 列表 */
.post{
  padding: 22px 0 20px;
  border-top: 1px solid var(--line);
}
.post:first-child{ border-top: 0; }
.post a{
  display: grid;
  grid-template-columns: 86px minmax(0,1fr);
  gap: 6px 22px;
  align-items: baseline;
}
.p__title{
  font-size: 19.5px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -.005em;
  display: inline;
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 64px 7px;
  background-image: none;
  padding-bottom: 3px;
}
.post a:hover .p__title{
  color: var(--pen);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='7' viewBox='0 0 64 7'%3E%3Cpath d='M1 5 C 14 1.4, 26 6, 38 3.6 S 56 1.2, 63 4' fill='none' stroke='%232C4BE0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.post a:hover .p__date{ color: var(--coral); }
.p__sum{
  display: block;
  margin-top: 7px;
  max-width: 36em;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--mute);
}
.p__meta{ margin-top: 10px; }

/* 分页 */
.pager{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 34px; padding-top: 24px;
  border-top: 1px solid var(--line);
}
.pager a, .pager span{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 14px;
  color: var(--ink-2);
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.pager a:hover{ border-color: var(--pen); color: var(--pen); background: var(--hover); }
.pager .on{ background: var(--solid); border-color: var(--solid); color: var(--on-solid); font-weight: 700; }
.pager .disabled{ color: var(--faint); background: var(--surface-2); }
.pager .prev, .pager .next{ font-family: var(--hand); font-size: 15px; }
@media (max-width: 620px){
  .pager{ gap: 6px; }
  .pager a, .pager span{ min-width: 34px; height: 34px; padding: 0 9px; font-size: 13px; }
}

/* 侧栏 */
.side{ display: flex; flex-direction: column; gap: 34px; padding-top: 4px; }
.side h2{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--ink);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.side h2::before{
  content: "";
  width: 14px; height: 3px;
  background: var(--coral);
  border-radius: 2px;
  transform: rotate(-4deg);
}
.tags{ display: flex; flex-wrap: wrap; gap: 8px; }
.tags a{
  padding: 4px 10px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-2);
  background: var(--surface);
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.tags a:hover{ border-color: var(--pen); color: var(--pen); background: var(--hover); }
.tags span{ color: var(--mute); font-size: 11.5px; margin-left: 3px; }
.about p{
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--mute);
}
.about .sig{ margin-top: 14px; font-size: 16px; }
.sub-box{ display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sub-box .btn{ width: 100%; text-align: center; }
.sub-box small{ font-size: 12.5px; color: var(--mute); line-height: 1.7; }

/* ── 页脚 ───────────────────────────────────── */
.foot{
  border-top: 1px dashed var(--line);
  padding: 26px 0 44px;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  align-items: baseline;
  font-size: 13px;
  color: var(--mute);
}
.foot .hand{ font-family: var(--hand); font-size: 16px; color: var(--ink-2); }
.foot a:hover{ color: var(--pen); }
.foot .right{ margin-left: auto; }

/* ═════════════════════════════════════════════
   文章详情页
   ═════════════════════════════════════════════ */

/* 阅读进度 */
.prog{
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: transparent; pointer-events: none;
}
.prog i{
  display: block; height: 100%; width: 0;
  background: var(--pen);
  transition: width .1s linear;
}

.article-layout{
  display: grid;
  grid-template-columns: minmax(0,1fr) 212px;
  gap: clamp(34px, 5vw, 70px);
  padding: clamp(34px, 4.5vw, 58px) 0 clamp(48px, 6vw, 84px);
  align-items: start;
}

/* grid 子项默认 min-width:auto，会被宽表格/代码块撑破页面；强制可收缩 */
.layout > *, .article-layout > *{ min-width: 0; }
.article{ max-width: 730px; }

.art-top{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: relative; margin-bottom: 22px;
}
.back{
  display: inline-block;
  font-family: var(--hand);
  font-size: 15.5px;
  color: var(--pen);
}
.back:hover{ color: var(--coral); }

/* 移动端目录入口：桌面隐藏，≤900px 出现在「回到列表」右侧 */
.tocbtn{
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.tocbtn:hover, .tocbtn[aria-expanded="true"]{ color: var(--pen); border-color: var(--pen); background: var(--hover); }

.tocpanel{
  display: none;
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: min(280px, calc(100vw - 48px));
  max-height: min(60vh, 420px); overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
  padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(20, 26, 40, .12);
  font-size: 13.5px;
}
.tocpanel.open{ display: block; }
.tocpanel::-webkit-scrollbar{ width: 6px; }
.tocpanel::-webkit-scrollbar-track{ background: transparent; }
.tocpanel::-webkit-scrollbar-thumb{ background: var(--scroll); border-radius: 3px; }
.tocpanel__t{
  font-size: 12px; font-weight: 900; letter-spacing: .1em;
  color: var(--mute); margin: 0 0 10px;
}
/* 手机目录面板里也显示文章标题，面板空间紧，间距收一点 */
.tocpanel .toc-title.is-on{ margin: 0 0 12px; }
.tocpanel ol{ list-style: none; margin: 0; padding: 0; }
.tocpanel li{ margin-bottom: 3px; }
.tocpanel a{
  display: block;
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--line);
  color: var(--mute);
  line-height: 1.55;
  transition: color .15s ease, border-color .15s ease;
}
.tocpanel a:hover{ color: var(--ink); border-left-color: var(--ink); }
.tocpanel a.on{ color: var(--pen); border-left-color: var(--pen); font-weight: 700; }

/* 顶部那一行滚出视口后，按钮固定在右下角 */
.tocbtn.is-float{
  position: fixed; right: 16px; bottom: 98px; z-index: 45;
  width: 44px; height: 44px; border-radius: 50%;
  box-shadow: 0 6px 18px rgba(20, 26, 40, .16);
}
/* 面板改为贴着悬浮按钮向上展开；手机端三个按钮时再让出一个位置 */
.tocpanel.is-float{
  position: fixed; right: 16px; bottom: 212px; top: auto; z-index: 45;
  max-height: min(60vh, 400px);
}

/* 锚点跳转不被吸顶导航挡住 */
.body h2, .body h3, .body h4{ scroll-margin-top: 80px; }

.ahead__tags{ display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.ahead h1{
  font-size: clamp(1.95rem, 4.1vw, 3rem);
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: -.022em;
  max-width: 17em;
}
.ahead__lede{
  margin-top: 20px;
  /* 宽度跟随正文列（.article 的 730px），不再单独收窄 */
  font-size: 17px;
  line-height: 1.95;
  color: var(--ink-2);
}
.ahead__meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 24px; padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--mute);
}
.ahead__meta time{ font-family: var(--hand); font-size: 15.5px; color: var(--pen); }
.ahead__meta .hand{ font-family: var(--hand); font-size: 15px; color: var(--mute); }

/* 正文 */
.body{ font-size: 17px; line-height: 1.95; overflow-wrap: break-word; min-width: 0; }
.body > p{ margin-bottom: 26px; }
.body > p + p{ margin-top: -6px; }
.body h2{
  margin: 48px 0 18px;
  font-size: 21.5px;
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.5;
}
.body h2::before{
  content: "";
  display: block;
  width: 26px; height: 3px;
  margin-bottom: 13px;
  background: var(--pen);
  border-radius: 2px;
  transform: rotate(-2.4deg);
}
.body h3{
  margin: 32px 0 14px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.body strong{ font-weight: 700; }
.body code{
  padding: 1px 6px 2px;
  background: var(--surface-3);
  /* border: 1px solid var(--line); */
  border-radius: 5px;
  font: 13.5px var(--mono);
  color: var(--pen);
  overflow-wrap: break-word;
}
/* 行内代码的样式不要传染给代码块：否则首行会多出 6px 左内边距、字号也会被改大 */
.body pre code{
  padding: 0;
  background: transparent;
  border-radius: 0;
  font: inherit;
  color: inherit;
}
.body a{
  color: var(--pen);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='7' viewBox='0 0 64 7'%3E%3Cpath d='M1 5 C 14 1.4, 26 6, 38 3.6 S 56 1.2, 63 4' fill='none' stroke='%232C4BE0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: 0 100%; background-size: 64px 7px;
  padding-bottom: 5px;
}
.body ul{ list-style: disc; padding-left: 1.5em; margin: 14px 0 22px; }
.body ol{ list-style: decimal; padding-left: 1.6em; margin: 14px 0 22px; }
.body li{ margin: 6px 0; line-height: 1.85; }
.table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; max-width: 100%; }
.table-wrap table{ margin: 0; }
.body table{
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-size: 14.5px;
}
.body th, .body td{
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  line-height: 1.6;
}
.body th{ background: var(--hover); font-weight: 700; }

/* 页边批注（手写） */
.pen-note{
  margin: -8px 0 30px;
  padding-left: 26px;
  font-family: var(--hand);
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--pen);
  transform: rotate(-.5deg);
  transform-origin: left center;
}
.pen-note::before{
  content: "↳";
  margin-right: 6px;
  color: var(--coral);
}

/* 结论框 */
.tldr{
  margin: 30px 0 34px;
  padding: 22px 24px 20px;
  background: var(--mint);
  border-radius: 3px;
  box-shadow: 0 12px 26px -20px rgba(20,22,28,.7);
}
.tldr h3{
  font-family: var(--hand);
  font-size: 19px;
  font-weight: 400;
  color: var(--pen);
  margin-bottom: 10px;
}
.tldr li{
  position: relative;
  padding-left: 24px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.tldr li::before{
  content: "✓";
  position: absolute; left: 2px; top: 0;
  font-family: var(--hand);
  color: var(--pen);
  font-size: 15px;
}

/* 代码块 */
.code{
  margin: 26px 0 30px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 22, 28, .03);
}
.code__bar{
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: 11.5px;
  color: var(--mute);
}
.code__lang{ font-family: var(--mono); letter-spacing: .06em; }
.code__file{
  font-family: var(--mono); letter-spacing: .02em;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.code__acts{ margin-left: auto; display: flex; gap: 6px; flex: none; }
.copy, .wrapbtn, .collapse{
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--mute);
  font: 12px var(--sans);
  padding: 3px 10px 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.copy:hover, .wrapbtn:hover{ color: var(--pen); border-color: var(--pen); background: var(--hover); }
.copy.done{ color: var(--ink); border-color: var(--mint); background: var(--mint); }
/* 折行默认开启，按钮不再做激活态高亮，状态看文案即可 */
.collapse:hover{ color: var(--pen); border-color: var(--pen); background: var(--hover); }
.collapse[aria-pressed="true"]{ color: var(--pen); border-color: var(--pen); background: var(--hover-2); }
/* 手动隐藏代码主体：标题栏保留，随时可以再展开 */
.code.is-collapsed .code__body,
.code.is-collapsed .code__more{ display: none; }
/* 「折行」只在内容超宽时出现（.has-x 由 app.js 加上），否则点了没反应 */
.wrapbtn{ display: none; }
.code.has-x .wrapbtn{ display: inline-block; }

/* 代码主体：滚动容器 + 折叠 */
.code__body{ position: relative; }
.code.is-fold .code__body{ max-height: 520px; overflow: hidden; }
.code.is-fold .code__body::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 76px;
  background: linear-gradient(to bottom, transparent, var(--surface-2));
  pointer-events: none;
}
.code.is-open .code__body{ max-height: none; }
.code.is-open .code__body::after{ display: none; }
.code__more{ border-top: 1px dashed var(--line); background: var(--surface); }
.code__toggle{
  display: block; width: 100%;
  padding: 8px 0 9px;
  border: 0; background: transparent; cursor: pointer;
  font: 12px var(--sans); color: var(--pen); letter-spacing: .02em;
}
.code__toggle:hover{ background: var(--hover); }

/* 横向可滚动时右侧文字渐隐，滚到底自动消退 */
.code__body.is-x pre{
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 46px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 46px), transparent 100%);
}
.code__body.is-x.at-end pre{
  -webkit-mask-image: none;
          mask-image: none;
}

/* 每一行是一个块级 span：行号用计数器生成，不进入复制内容 */
pre code{ display: block; counter-reset: line; }
.code .line{
  display: block;
  counter-increment: line;
  width: max-content;
  min-width: 100%;
}
.code .line:empty::after{ content: "\00a0"; }
.code.has-ln pre{ padding-left: 11px; }
.code.has-ln .line{ padding-left: 2.4em; text-indent: -2.4em; }
.code.has-ln .line::before{
  content: counter(line);
  display: inline-block; width: 1.6em; margin-right: .8em;
  text-align: right; text-indent: 0;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
/* 指定行高亮 ```js {3,7-9} */
.code .line.hl{ background: var(--hl-line); box-shadow: inset 2px 0 0 var(--pen); }
/* diff 整行着色 */
.code--diff .line.add{ background: var(--diff-add); }
.code--diff .line.del{ background: var(--diff-del); }
.code--diff .line.hunk{ background: var(--diff-hunk); color: var(--diff-hunk-ink); }
/* 折行模式 */
.code.is-wrap pre{ white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; }
.code.is-wrap .line{ width: auto; min-width: 0; }
/* 测量用：脚本瞬间切成不折行量真实宽度，量完立刻还原，用户看不到 */
.code.probe pre{ white-space: pre; overflow-wrap: normal; }
.code.probe .line{ width: max-content; min-width: 0; }
pre{
  margin: 0;
  padding: 14px 18px;
  overflow-x: auto;
  font: 13px/1.6 var(--mono);
  color: var(--code-ink);
  tab-size: 2;
  -webkit-font-smoothing: antialiased;
}
/* 纯文字块（流程图、步骤说明等）：换成正文字体，中文排版更整齐 */
.code--plain pre{
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: .012em;
}

/* 引用 */
blockquote{
  margin: 34px 0;
  padding: 2px 0 2px 24px;
  border-left: 3px solid var(--hi);
  font-size: 18.5px;
  line-height: 1.85;
  font-weight: 700;
  letter-spacing: -.01em;
}
blockquote cite{
  display: block;
  margin-top: 10px;
  font-family: var(--hand);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  color: var(--mute);
}

/* 文末 */
.tags-end{ display: flex; flex-wrap: wrap; gap: 8px; margin: 42px 0 0; }
.pn{
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.pn a{ display: block; padding: 4px 0; min-width: 0; }
.pn span{
  display: block;
  font-family: var(--hand); font-size: 14.5px; color: var(--mute);
  margin-bottom: 4px;
}
.pn b{
  display: block;
  font-size: 16px; font-weight: 700; line-height: 1.6;
  transition: color .15s ease;
}
.pn a:hover b{ color: var(--pen); }
.pn .next{ text-align: right; }
.pn .empty{ visibility: hidden; }

.author{
  display: flex; gap: 18px; align-items: flex-start;
  margin-top: 40px; padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.author__sign{
  flex: none;
  font-family: var(--hand);
  font-size: 26px;
  color: var(--pen);
  transform: rotate(-4deg);
  line-height: 1;
}
.author p{ font-size: 14.5px; color: var(--mute); line-height: 1.85; }

/* 目录 */
.toc{
  position: sticky; top: 96px;
  padding-top: 10px;
  font-size: 13.5px;
}
.toc h2{
  font-size: 12px; font-weight: 900; letter-spacing: .1em;
  color: var(--mute);
  margin-bottom: 14px;
}
/* 目录上方的文章标题：和返回顶部同一时机淡入（滚过半屏才出现）。
   收起时用 max-height/margin 归零，避免页顶留一截空白 */
.toc-title{
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 16px;   /* 桌面侧栏；手机面板在 ≤900px 里单独调小 */
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: max-height .25s ease, margin .25s ease, opacity .25s ease;
}
.toc-title.is-on{
  max-height: 5em;
  margin: 0 0 16px;
  opacity: 1;
}
.toc ol{
  list-style: none; margin: 0; padding: 0;
  max-height: min(58vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.toc ol::-webkit-scrollbar{ width: 6px; }
.toc ol::-webkit-scrollbar-track{ background: transparent; }
.toc ol::-webkit-scrollbar-thumb{ background: var(--scroll); border-radius: 3px; }
.toc ol::-webkit-scrollbar-thumb:hover{ background: var(--scroll-hover); }
.toc li{ margin-bottom: 3px; }
.toc a{
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--line);
  color: var(--mute);
  line-height: 1.6;
  transition: color .15s ease, border-color .15s ease;
}
.toc a:hover{ color: var(--ink); border-left-color: var(--ink); }
.toc a.on{ color: var(--pen); border-left-color: var(--pen); font-weight: 700; }
.toc .stamp{
  margin-top: 26px;
  font-family: var(--hand);
  font-size: 14px;
  color: var(--mute);
  line-height: 1.9;
  transform: rotate(-1.2deg);
}

/* ── 返回顶部 ──
   桌面：贴在目录栏落款下面，滚过一屏才淡入；
   手机：右下角圆形悬浮，叠在目录按钮（bottom:88px）下方。
   显示与否由 app.js 加 .is-on 控制（页顶放着没有意义）。 */
.toc .totop--side{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 18px;
  padding: 8px 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease,
              color .15s ease, border-color .15s ease, background-color .15s ease;
}
.toc .totop--side:hover{ color: var(--pen); border-color: var(--pen); background: var(--hover); }
.toc .totop--side.is-on{ opacity: 1; visibility: visible; transform: none; }
/* 回到列表在回到顶部上方，两个按钮之间收紧一点 */
.toc .totop--back{ margin-top: 24px; }
.toc .totop--back + .totop--side{ margin-top: 8px; }

.totop--float{
  display: none;
  position: fixed; right: 16px; bottom: 38px; z-index: 45;
  width: 44px; height: 44px; border-radius: 50%;
  align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2);
  box-shadow: 0 6px 18px rgba(20, 26, 40, .16);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, color .15s ease, border-color .15s ease;
}
.totop--float:hover{ color: var(--pen); border-color: var(--pen); }
.totop--float.is-on{ opacity: 1; visibility: visible; }
/* 手机端竖排三个：返回顶部 38 / 目录 98 / 回到列表 158 */
.totop--float.totop--back{ bottom: 158px; }
[data-theme="dark"] .totop--float{ box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }

/* ── highlight.js 极简配色（还原原型 .code 风格） ── */
.hljs{ color: var(--code-ink); background: transparent; }
.hljs-comment, .hljs-quote{ color: #7C8798; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag{ color: #2C4BE0; }
.hljs-string, .hljs-attr, .hljs-regexp, .hljs-symbol{ color: #FF5B44; }
.hljs-number, .hljs-literal, .hljs-bullet{ color: #0F6E56; }
.hljs-title, .hljs-section, .hljs-function .hljs-title, .hljs-type{ color: #185FA5; }
.hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-meta{ color: #854F0B; }
.hljs-emphasis{ font-style: italic; }
.hljs-strong{ font-weight: 700; }

/* 深色下的语法配色：白底那套对比度不够，整体提亮并降低饱和度 */
[data-theme="dark"] .hljs-comment,
[data-theme="dark"] .hljs-quote{ color: #6E7787; }
[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-selector-tag,
[data-theme="dark"] .hljs-built_in,
[data-theme="dark"] .hljs-name,
[data-theme="dark"] .hljs-tag{ color: #8AA0FF; }
[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-attr,
[data-theme="dark"] .hljs-regexp,
[data-theme="dark"] .hljs-symbol{ color: #FF9A86; }
[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-literal,
[data-theme="dark"] .hljs-bullet{ color: #5FD3A6; }
[data-theme="dark"] .hljs-title,
[data-theme="dark"] .hljs-section,
[data-theme="dark"] .hljs-function .hljs-title,
[data-theme="dark"] .hljs-type{ color: #6FB6F2; }
[data-theme="dark"] .hljs-attribute,
[data-theme="dark"] .hljs-variable,
[data-theme="dark"] .hljs-template-variable,
[data-theme="dark"] .hljs-meta{ color: #D9A860; }

/* ── 主题切换按钮 ───────────────────────────── */
.themebtn{
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink-2);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.themebtn:hover{ color: var(--pen); border-color: var(--pen); background: var(--hover); }
.themebtn .i-sun{ display: none; }
[data-theme="dark"] .themebtn .i-sun{ display: block; }
[data-theme="dark"] .themebtn .i-moon{ display: none; }

/* ── 响应式 ─────────────────────────────────── */
@media (max-width: 940px){
  .hero{ grid-template-columns: minmax(0,1fr); }
  .note{ justify-self: start; width: min(100%, 340px); margin-top: 30px; }
  .layout{ grid-template-columns: minmax(0,1fr); }
  .side{ flex-direction: row; flex-wrap: wrap; gap: 30px; }
  .side > section{ flex: 1 1 200px; }
}

@media (max-width: 900px){
  .article-layout{ grid-template-columns: minmax(0,1fr); }
  .toc{ display: none; }
  .tocbtn{ display: inline-flex; }
  .totop--float{ display: inline-flex; }
  /* 手机目录面板空间紧，标题字号压到 11px */
  .toc-title{ font-size: 11px; }
  .article{ max-width: 100%; }
}
@media (min-width: 901px){
  .tocpanel{ display: none !important; }
}

@media (max-width: 620px){
  body{ font-size: 16px; }
  .bar__in{ height: 60px; gap: 16px; }
  /* 手机端栏高 60px，锚点让位跟着缩 */
  #list-top{ scroll-margin-top: 61px; }
  .nav{ gap: 16px; }
  .nav a{ font-size: 14px; }
  .bar .btn{ display: none; }
  .post a{ grid-template-columns: minmax(0,1fr); gap: 4px; }
  .p__title{ font-size: 18px; }
  .lead h3{ font-size: 1.45rem; }
  .pn{ grid-template-columns: 1fr; gap: 14px; }
  .pn .next{ text-align: left; }
  blockquote{ font-size: 17.5px; }
  .foot .right{ margin-left: 0; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation: none !important; transition: none !important; }
}

/* ═════════════════════════════════════════════
   关于页 / 标签页
   ═════════════════════════════════════════════ */
.nav a[aria-current="page"]{
  color: var(--ink); font-weight: 700;
  box-shadow: inset 0 -7px 0 var(--hi);
}

.page{ padding: clamp(42px, 6vw, 76px) 0 clamp(50px, 6vw, 66px); }

/* ── 关于 ── */
.intro{
  display: grid;
  grid-template-columns: minmax(0,1fr) 272px;
  gap: clamp(30px, 5vw, 66px);
  align-items: start;
  padding-bottom: clamp(34px, 4vw, 20px);
}
.intro h1{
  font-size: clamp(2.1rem, 4.6vw, 3.35rem);
  line-height: 1.28;
  font-weight: 900;
  letter-spacing: -.025em;
  max-width: 14em;
}
.intro__p{
  margin-top: 22px;
  max-width: 29em;
  font-size: 16.5px;
  line-height: 1.95;
  color: var(--ink-2);
}
.intro__p + .intro__p{ margin-top: 16px; }
.card{
  position: relative;
  margin-top: 8px;
  padding: 26px 22px 22px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  transform: rotate(1.4deg);
  box-shadow: 0 18px 32px -26px rgba(20,22,28,.85);
}
.card::before{
  content: "";
  position: absolute; left: -1.5px; right: -1.5px; top: -1.5px;
  height: 7px;
  background: var(--mint);
}
.card__sign{ font-family: var(--hand); font-size: 34px; line-height: 1; color: var(--pen); margin-top: 6px; }
.card__role{ margin-top: 6px; font-size: 13.5px; font-weight: 700; letter-spacing: .06em; }
.card ul{ margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.card li{ font-size: 13px; color: var(--mute); line-height: 1.9; padding: 1px 0; }
.card li b{ font-weight: 600; color: var(--ink-2); margin-right: 8px; }

.block{ margin-top: clamp(44px, 5.5vw, 66px); }
.block h2{
  font-size: 20px; font-weight: 900;
  letter-spacing: -.01em; line-height: 1.5;
  margin-bottom: 6px;
}
.block h2::before{
  content: "";
  display: block;
  width: 26px; height: 3px;
  margin-bottom: 12px;
  background: var(--pen);
  border-radius: 2px;
  transform: rotate(-2.4deg);
}

.now{ margin-top: 8px; max-width: 40em; }
.now li{
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
}
.now li:last-child{ border-bottom: 0; }
.now b{ font-family: var(--hand); font-size: 16px; font-weight: 400; color: var(--pen); }
.now span{ font-size: 15.5px; color: var(--ink-2); line-height: 1.8; }

.tl{ position: relative; margin-top: 14px; max-width: 42em; padding: 0; list-style: none; }
.tl::before{
  content: "";
  position: absolute; left: 86px; top: 14px; bottom: 16px;
  border-left: 2px dashed var(--line);
}
.tl li{
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0,1fr);
  gap: 26px;
  align-items: baseline;
  padding-bottom: 22px;
}
.tl li::before{
  content: "";
  position: absolute; left: 80px; top: 9px;
  width: 9px; height: 9px;
  background: var(--surface);
  border: 2px solid var(--pen);
  border-radius: 50%;
}
.tl time{ font-family: var(--hand); font-size: 17px; color: var(--pen); text-align: right; line-height: 1.6; }
.tl p{ font-size: 15.5px; line-height: 1.85; color: var(--ink-2); }

.stack{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px 30px;
  margin-top: 20px;
  max-width: 46em;
}
.stack h3{ font-family: var(--hand); font-size: 16px; font-weight: 400; color: var(--pen); margin-bottom: 4px; }
.stack p{ font-size: 14.5px; line-height: 1.9; color: var(--mute); }

.words{ margin-top: 12px; max-width: 34em; }
.words li{
  position: relative;
  padding: 7px 0 7px 26px;
  font-family: var(--hand);
  font-size: 20px;
  line-height: 1.7;
  color: var(--ink);
  transform: rotate(-.35deg);
}
.words li::before{ content: "—"; position: absolute; left: 0; top: 7px; color: var(--coral); }

.contact{ max-width: 32em; font-size: 15.5px; line-height: 2; color: var(--ink-2); }
.contact a{
  color: var(--pen);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='7' viewBox='0 0 64 7'%3E%3Cpath d='M1 5 C 14 1.4, 26 6, 38 3.6 S 56 1.2, 63 4' fill='none' stroke='%232C4BE0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: 0 100%; background-size: 64px 7px;
  padding-bottom: 5px;
}
.contact a:hover{ color: var(--coral); }
.close-sig{
  margin-top: 42px;
  font-family: var(--hand);
  font-size: 20px;
  color: var(--ink-2);
  transform: rotate(-.8deg);
  transform-origin: left center;
}

/* ── 标签 ── */
.phead{ margin-bottom: clamp(28px, 4vw, 44px); }
.phead h1{
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.025em;
}
.phead__hand{
  margin-top: 14px;
  font-family: var(--hand);
  font-size: 17px;
  color: var(--pen);
  transform: rotate(-.5deg);
  transform-origin: left center;
}
.phead__rule{ margin-top: 26px; height: 1px; background: var(--line); }

.tabgrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.tab a{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 4px 12px;
  height: 100%;
  padding: 19px 20px 17px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.tab a::before{
  content: "";
  position: absolute; left: -1px; top: 16px; bottom: 16px;
  width: 3px; border-radius: 2px;
  background: var(--line);
  transition: background-color .18s ease, top .18s ease, bottom .18s ease;
}
.tab a:hover{
  border-color: var(--pen);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -20px rgba(20,22,28,.75);
}
.tab a:hover::before{ background: var(--pen); top: 10px; bottom: 10px; }
.tab__name{ font-size: 19px; font-weight: 900; letter-spacing: -.01em; }
.tab__count{ font-family: var(--hand); font-size: 19px; line-height: 1.2; color: var(--pen); }
.tab__last{ grid-column: 1 / -1; margin-top: 6px; font-size: 13.5px; line-height: 1.7; color: var(--mute); }
.tab__last b{ font-weight: 400; color: var(--mute); margin-right: 4px; }

.tab--top a{ background: var(--mint); border-color: transparent; }
.tab--top a::before{ background: transparent; }
.tab--top .tab__count{ color: var(--ink); }
.tab--top .tab__last{ color: #3F574A; }
.tab--top .tab__last b{ color: #6C8577; }

.tail{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px;
  margin-top: clamp(34px, 5vw, 54px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--mute);
}
.tail .hand{ font-family: var(--hand); font-size: 16px; color: var(--ink-2); }
.tail a{
  color: var(--pen);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='7' viewBox='0 0 64 7'%3E%3Cpath d='M1 5 C 14 1.4, 26 6, 38 3.6 S 56 1.2, 63 4' fill='none' stroke='%232C4BE0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: 0 100%; background-size: 64px 7px;
  padding-bottom: 5px;
}
.tail .right{ margin-left: auto; }

@media (max-width: 880px){
  .intro{ grid-template-columns: minmax(0,1fr); }
  .card{ width: min(100%, 300px); transform: rotate(1deg); }
}
@media (max-width: 620px){
  .tags{ gap: 10px; }
  .tags a{ padding: 7px 13px 8px; }
  .tabgrid{ grid-template-columns: minmax(0,1fr); }
  .tail .right{ margin-left: 0; }
  .tl::before{ left: 64px; }
  .tl li{ grid-template-columns: 52px minmax(0,1fr); gap: 20px; }
  .tl li::before{ left: 58px; }
  .tl time{ font-size: 15px; }
  .words li{ font-size: 18px; }
}

/* ── 位置记忆提示条（pos.js） ──
   恢复阅读位置后浮出，6 秒自动淡出，也可以点「从头读」直接回顶部 */
.poschip{
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 26px var(--shadow);
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
  animation: poschip-in .22s ease both;
  transition: opacity .25s ease;
}
.poschip.is-out{ opacity: 0; }
.poschip button{
  border: 0; background: transparent;
  padding: 2px 5px; border-radius: 5px;
  font: inherit; color: var(--pen); cursor: pointer;
}
.poschip button:hover{ background: var(--hover); }
@keyframes poschip-in{
  from{ opacity: 0; transform: translate(-50%, 8px); }
  to{ opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 620px){
  .poschip{ bottom: 20px; font-size: 12px; }
}

/* ── 位置记忆提示条（pos.js） ──
   恢复阅读位置后浮出，6 秒自动淡出，也可以点「从头读」直接回顶部 */
.poschip{
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 26px var(--shadow);
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
  animation: poschip-in .22s ease both;
  transition: opacity .25s ease;
}
.poschip.is-out{ opacity: 0; }
.poschip button{
  border: 0; background: transparent;
  padding: 2px 5px; border-radius: 5px;
  font: inherit; color: var(--pen); cursor: pointer;
}
.poschip button:hover{ background: var(--hover); }
@keyframes poschip-in{
  from{ opacity: 0; transform: translate(-50%, 8px); }
  to{ opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 620px){
  .poschip{ bottom: 20px; font-size: 12px; }
}