/* 请我喝杯咖啡(2026-11-08):小咖啡钮和点开的那张小卡。照全站:纸、墨两色,红笔只管谢谢那一句、红心和「已复制」那一记;
   卡上那格口令是一张借书证(和研究者视角的口令卡同一个样子:左上角一个穿绳的孔,解开、复制时盖一记红章)。
   首页、读书页都载这一份;钓鱼人身边那杯的位置还在 front.css。 */

/* ── 咖啡杯小图标(原来在 front.css):热气截短一截,杯里一层深色 ── */
.cup-i{flex:none;width:13px;height:17px;align-self:center;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.15px;stroke-linecap:round;stroke-linejoin:round}
.cup-i path{vector-effect:non-scaling-stroke}
.cup-i .cup-fill{fill:none}
.cup-i .cup-joe{fill:currentColor}
.cup-i .cup-h{display:none}
.cup-i .cup-steam{opacity:.6}

/* ── 小咖啡钮:按钮的样子全抹掉,再照两种样子画 ── */
.cf-btn{appearance:none;-webkit-appearance:none;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.cf-btn small{font-family:var(--sans);font-size:11.5px;font-weight:400;color:var(--dim)}
/* 一行字里的(首屏捐赠那句话后面):像链接,划过时红笔下划线 */
.cf-line{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;margin-left:6px;font-family:var(--sans);font-size:13px;color:var(--ink)}
.cf-line .lnk{white-space:nowrap}
.cf-line:hover .lnk,.cf-line:focus-visible .lnk{background-size:100% 2px}
.cf-line:focus-visible{outline:2px solid var(--pen);outline-offset:3px}
/* 胶囊钮(关于页、研究者视角那块) */
.cf-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border:1.5px solid var(--ink);border-radius:99px;font-family:var(--sans);font-size:14px;color:var(--ink);transition:background .2s,color .2s,transform .3s var(--ease)}
.cf-pill .cup-i{width:16px;height:21px}
.cf-pill small{color:inherit;opacity:.72}
.cf-pill:hover,.cf-pill:focus-visible{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.cf-pill:focus-visible{outline:2px solid var(--pen);outline-offset:3px}
.cf-pill .lnk{background:none;padding:0}

/* ── 那张小卡 ── */
html.cf-lock{overflow:hidden}
.cf-lb{width:min(27.5rem,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;
  border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);
  box-shadow:8px 8px 0 -1px var(--paper-2),8px 8px 0 0 var(--line-2),0 30px 60px -30px rgba(0,0,0,.55)}
.cf-lb::backdrop{background:rgba(10,12,14,.42)}
.cf-in{position:relative;padding:22px 24px 20px}
.cf-x{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:1.5px solid var(--pen);background:transparent;color:var(--pen);font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1.4;cursor:pointer;transition:background .2s,color .2s}
.cf-x:hover,.cf-x:focus-visible{background:var(--pen);color:#fff}
.cf-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 卡头:左边一杯冒热气的咖啡、头上飘红心,右边一句谢谢 */
.cf-hd{display:flex;align-items:flex-end;gap:16px;padding-right:64px}
.cf-cup{position:relative;flex:none;width:46px;color:var(--ink)}
.cf-cup .cup-v{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}
.cf-cup .cup-v path{vector-effect:non-scaling-stroke}
.cf-cup .cup-fill{fill:var(--paper);stroke:none}
.cf-cup .cup-joe{fill:currentColor;opacity:.82}
.cf-cup .cup-h{opacity:.7}
.cf-cup .cup-steam{opacity:.6}
.cf-hts{position:absolute;left:0;right:0;top:-6px;height:0}
.cf-ht{position:absolute;width:var(--w);left:var(--x);top:var(--y);color:var(--pen);transform:rotate(var(--r))}
.cf-ht svg{display:block;width:100%;height:auto;overflow:visible}
.cf-ht .h-f{fill:currentColor;fill-opacity:.2;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.cf-ht .h-s{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;opacity:.75}
.cf-ht1{--x:54%;--y:-12px;--w:15px;--r:12deg;--d:.25s;--dx:6px;--dy:-16px}
.cf-ht2{--x:6%;--y:-4px;--w:11px;--r:-14deg;--d:.45s;--dx:-6px;--dy:-14px}
.cf-ht3{--x:84%;--y:4px;--w:10px;--r:20deg;--d:.65s;--dx:8px;--dy:-10px}
.cf-t{margin:0;font-weight:500;font-size:clamp(24px,6.4vw,30px);line-height:1.18}
.cf-t .pen{display:block}
.cf-t .pen:first-child{color:var(--ink)}
.cf-t .pen:last-child{display:inline-block;transform:rotate(-3deg);transform-origin:0 100%;border-bottom:2px solid var(--pen);padding-right:.1em}

.cf-g{margin:16px 0 0;font-family:var(--serif);font-size:15px;line-height:1.9;color:var(--ink-2)}
.cf-sign{margin:4px 0 0;text-align:right;font-family:var(--sans);font-size:12.5px;color:var(--dim)}
.cf-sign .ko{margin-left:.1em}

/* 口令那一格:借书证 */
.cf-card{position:relative;margin:16px 0 0;padding:14px 16px 12px;background:var(--panel);border:1.5px solid var(--ink);box-shadow:5px 5px 0 -1px var(--paper-2),5px 5px 0 0 var(--line-2)}
.cf-card-hd{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line-2)}
.cf-hole{flex:none;width:13px;height:13px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
.cf-card-k{flex:1;min-width:0;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-card .ys{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--ink);font-style:normal;font-family:var(--title);font-weight:900;font-size:9.5px;line-height:1}
.cf-l{display:block;margin-bottom:8px;font-family:var(--title);font-weight:900;font-size:17px;line-height:1.4}
.cf-slot{display:flex;gap:10px;align-items:stretch}
.cf-slot input{flex:1;min-width:0;padding:8px 2px 6px;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font-family:var(--mono);font-size:16px;letter-spacing:.06em}
.cf-slot input:focus{outline:none;border-bottom-color:var(--pen)}
.cf-slot input::placeholder{color:var(--faint);font-family:var(--sans);font-size:13px;letter-spacing:0}
.cf-slot .btn{flex:none;padding:6px 18px;cursor:pointer}
.cf-slot .btn:disabled{opacity:.45;cursor:not-allowed}
.cf-slot .btn:focus-visible{outline:2px solid var(--pen);outline-offset:2px}
.cf-say{min-height:1.6em;margin:7px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--dim)}
.cf-card.copied .cf-say{color:var(--ink)}
.cf-how{margin:6px 0 0;padding-top:9px;border-top:1px dashed var(--line-2);font-family:var(--sans);font-size:12px;line-height:1.75;color:var(--dim)}
.cf-card.none .cf-l{color:var(--dim)}
/* 复制好了:盖一记红章 */
.cf-stamp{position:absolute;right:14px;top:40px;padding:3px 12px 1px;border:2px solid var(--pen);outline:1px solid var(--pen);outline-offset:3px;transform:rotate(-8deg);opacity:0;pointer-events:none;background:color-mix(in srgb,var(--panel) 80%,transparent)}
.cf-stamp .pen{font-size:22px;line-height:1.2;letter-spacing:.1em}
.cf-card.copied .cf-stamp{opacity:1}

/* 去研究者视角 */
.cf-go{margin:18px 0 0;text-align:right}
.cf-to{display:inline-flex;align-items:baseline;flex-wrap:wrap;justify-content:flex-end;gap:2px 8px;font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer}
.cf-to small{font-size:12px;font-weight:400;color:var(--dim)}
.cf-to:hover .lnk,.cf-to:focus-visible .lnk{background-size:100% 2px}
.cf-to:focus-visible{outline:2px solid var(--pen);outline-offset:3px}

/* 动:卡从下面一点浮上来,红心冒一阵,热气一直飘;复制那一下章盖下来。减少动态时都在终态 */
@media (prefers-reduced-motion:no-preference){
  .cf-lb.in{animation:cfIn .42s var(--ease) both}
  .cf-lb.in::backdrop{animation:cfFade .3s ease-out both}
  .cf-lb.in .cf-ht{animation:cfUp 2.6s ease-in-out var(--d) both}
  .cf-lb .cf-cup .cup-steam path{animation:cfSteam 3.6s ease-in-out infinite}
  .cf-lb .cf-cup .cup-steam path:nth-child(2){animation-delay:-1.2s}
  .cf-lb .cf-cup .cup-steam path:nth-child(3){animation-delay:-2.4s}
  .cf-card.copied .cf-stamp{animation:cfStamp .34s cubic-bezier(.3,1.5,.6,1) both}
}
@keyframes cfIn{from{opacity:0;transform:translateY(16px) rotate(-1.2deg) scale(.97)}to{opacity:1;transform:none}}
@keyframes cfFade{from{opacity:0}to{opacity:1}}
@keyframes cfUp{
  0%{opacity:0;transform:translate(0,8px) scale(.3) rotate(var(--r))}
  18%{opacity:1;transform:translate(0,0) scale(1) rotate(var(--r))}
  70%{opacity:1;transform:translate(calc(var(--dx) * .7),calc(var(--dy) * .7)) scale(1) rotate(calc(var(--r) * .3))}
  100%{opacity:.85;transform:translate(var(--dx),var(--dy)) scale(.95) rotate(calc(var(--r) * -.4))}
}
@keyframes cfSteam{0%{opacity:0;transform:translateY(5px)}35%{opacity:.85}100%{opacity:0;transform:translateY(-8px)}}
@keyframes cfStamp{from{opacity:0;transform:scale(1.6) rotate(-14deg)}to{opacity:1;transform:rotate(-8deg)}}

@media (max-width:520px){
  .cf-in{padding:18px 16px 16px}
  .cf-hd{gap:12px;padding-right:58px}
  .cf-cup{width:38px}
  .cf-g{font-size:14.5px;line-height:1.85}
  .cf-card{padding:12px 12px 10px;box-shadow:4px 4px 0 -1px var(--paper-2),4px 4px 0 0 var(--line-2)}
  .cf-slot input{font-size:15px;letter-spacing:.03em}
  .cf-slot .btn{padding:6px 14px}
  .cf-stamp{right:10px}
}
/* ── 聚光灯(11-08 傍晚):整页压暗,几处咖啡亮着,光圈边上一道红笔弧。只在有鼠标的设备上开(coffee.js 判) ── */
.cf-spot{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .38s ease,visibility 0s linear .38s}
.cf-spot.on{opacity:1;visibility:visible;transition:opacity .38s ease,visibility 0s}
.cf-spot svg{display:block}
.cf-spot .cf-dim{fill:rgba(8,10,12,.72)}
.cf-spot .cf-rings path{fill:none;stroke:var(--pen);stroke-width:1.6;stroke-linecap:round;opacity:.9}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cf-spot .cf-dim{fill:rgba(0,0,0,.7)} }
:root[data-theme="dark"] .cf-spot .cf-dim{fill:rgba(0,0,0,.7)}
@media (prefers-reduced-motion:reduce){ .cf-spot,.cf-spot.on{transition:none} }
@media (prefers-reduced-motion:no-preference){
  .cf-spot.on .cf-rings path{stroke-dasharray:400;stroke-dashoffset:400;animation:cfRing .6s .12s var(--ease) forwards}
}
@keyframes cfRing{to{stroke-dashoffset:0}}

/* 手机上:咖啡进到屏幕里时摇两下,提示能点 */
@media (prefers-reduced-motion:no-preference){
  .cf-nudge .cup-i,.cf-nudge.cup .cup-v{animation:cfNudge 1.1s ease-in-out 2}
}
@keyframes cfNudge{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg) translateY(-1px)}45%{transform:rotate(9deg)}70%{transform:rotate(-4deg)}}
.cf-nudge .cup-i{transform-origin:50% 90%}

@media print{ .cf-lb,.cf-spot{display:none} }