.topnav-links [data-contact-open]{pointer-events:auto;appearance:none;border:0;background:none;padding:6px 0;color:var(--faint);font:inherit;font-size:13px;letter-spacing:.06em;white-space:nowrap;cursor:pointer;transition:color .3s}
.topnav-links [data-contact-open]:hover{color:var(--text)}
.topnav-links [data-contact-open]:focus-visible{outline:1px solid var(--text);outline-offset:4px}
#contact-dialog{width:268px;max-width:calc(100vw - 40px);padding:32px 24px 20px;border:0;border-radius:16px;background:#faf9f6;color:#242424;overflow:visible;box-sizing:border-box;box-shadow:0 12px 80px #0003}
#contact-dialog::backdrop{background:rgba(5,7,10,.78)}
.contact-close{position:absolute;right:8px;top:4px;width:30px;height:30px;font:24px/1 sans-serif;border:0;background:none;color:#777;cursor:pointer}
.contact-card{display:block;position:relative;width:220px;height:254px;perspective:800px;border:0;padding:0;background:none;cursor:pointer;color:inherit;text-align:center;font-family:Arial,'PingFang SC',sans-serif}
.contact-faces{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.4,0,.2,1)}
.contact-front,.contact-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:block}
.contact-back{transform:rotateY(180deg)}
.contact-row{position:absolute;top:204px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:.02em}
.contact-row svg{width:24px;height:24px;flex:none}
.contact-avatar{position:absolute;left:16px;top:20px;width:188px;height:auto;transform-origin:0 0;clip-path:circle(150px at 94px 80px);transition:transform .95s cubic-bezier(.4,0,.2,1),clip-path .95s cubic-bezier(.4,0,.2,1);pointer-events:none}
.contact-qr{display:block;position:relative;width:220px;height:217.577px;background:#fff;overflow:hidden}
.contact-qr>img{display:block;width:100%;height:auto}
/* Only the original central logo square is covered. Finder patterns and surrounding modules stay untouched. */
.contact-qr-center{position:absolute;left:40.42%;top:38.98%;width:21.81%;height:22.05%;background:#fff;border-radius:6px}
.contact-caption{display:block;margin-top:14px;font-size:15px;letter-spacing:.06em}
.contact-card.flipped .contact-faces{transform:rotateY(180deg)}
/* Source image center (94,80) lands exactly at QR logo center (112.8,108.8). */
.contact-card.flipped .contact-avatar{transform:translate(70.48px,66.4px) scale(.28);clip-path:circle(82px at 94px 80px)}
.contact-card.greeting .contact-avatar{animation:contact-wave .65s ease-in-out}
@keyframes contact-wave{0%,100%{rotate:0deg}25%{rotate:-7deg}55%{rotate:6deg}80%{rotate:-3deg}}
html.contact-open{overflow:hidden}
@media(max-width:760px){.topnav-links [data-contact-open]{font-size:12px}}
@media(prefers-reduced-motion:reduce){.contact-faces,.contact-avatar{transition:none}.contact-card.greeting .contact-avatar{animation:none}}
/* 2026-10-28：弹窗正反面共用同一个视口中心，避开全站 reset 的 margin 影响。 */
#contact-dialog{
 --contact-paper:#faf9f6;
 position:fixed;
 inset:0;
 margin:auto;
 transform:none;
 height:max-content;
 max-height:calc(100dvh - 40px);
 padding:32px 24px;
 background:var(--contact-paper);
}
#contact-dialog .contact-card{margin-inline:auto;max-width:100%}
#contact-dialog .contact-close{z-index:10;display:grid;place-items:center;line-height:1;transition:color .2s}
#contact-dialog .contact-close svg{display:block;pointer-events:none}
#contact-dialog .contact-close:hover,
#contact-dialog .contact-close:focus-visible{color:var(--rust,#B5502F)}
#contact-dialog .contact-close:focus-visible{outline:1px solid currentColor;outline-offset:2px}
/* 透明滤镜直接去白底，不依赖 3D 翻转面的背景混合；保留原图扫码留白。 */
#contact-dialog .contact-qr{margin-inline:auto;background:var(--contact-paper)}
#contact-dialog .contact-qr>img{mix-blend-mode:normal;filter:url(#contact-qr-alpha)}
#contact-dialog .contact-qr-center{background:var(--contact-paper)}

/* 两面固定共用 220px 宽的内容框，关闭按钮不参与居中布局。 */
#contact-dialog .contact-front,
#contact-dialog .contact-back{width:100%;text-align:center}
/* 扫码文案独立定位，固定在二维码下方 14px，并以卡片中心对齐。 */
#contact-dialog .contact-caption{
 position:absolute;
 top:calc(217.577px + 14px);
 left:50%;
 right:auto;
 width:max-content;
 max-width:100%;
 margin:0;
 transform:translateX(-50%);
 text-align:center;
 white-space:nowrap;
 line-height:22px;
}

/* 原 JPEG 黑色码区中心 x=466，画布中心 x=454；按 220/908 校正 12px。 */
#contact-dialog .contact-qr>img{transform:translateX(-2.907489px)}
#contact-dialog .contact-qr-center{left:calc(40.42% - 2.907489px)}
#contact-dialog .contact-card.flipped .contact-avatar{transform:translate(67.572511px,66.4px) scale(.28)}

/* 2026-10-28：两页导航共用的小尺寸弹窗。原素材和翻转动效继续复用。 */
#contact-dialog{width:238px;padding:30px 24px 26px}
#contact-dialog .contact-card{zoom:.86}
/* 原头像可见边界 x=74…1357，补偿透明边距，人物可见轮廓居中。 */
#contact-dialog .contact-avatar{left:10.95px}
#contact-dialog .contact-card.flipped .contact-avatar{transform:translate(72.622511px,66.4px) scale(.28)}
/* 方形遮盖完整盖住原微信 logo，四边多盖 1px，消除圆角留下的黑色残边。 */
#contact-dialog .contact-qr-center{
 left:calc(40.42% - 2.907489px - 1px);
 top:calc(38.98% - 1px);
 width:calc(21.81% + 2px);
 height:calc(22.05% + 2px);
 border-radius:0;
}
#contact-dialog .contact-caption{font-size:14px;letter-spacing:0;line-height:22px}
#contact-dialog .contact-close{top:8px;right:8px;border-radius:50%;background:#eeeae4;color:#777;transition:background .2s,color .2s}
#contact-dialog .contact-close:hover,
#contact-dialog .contact-close:focus-visible{background:#B5502F;color:#fff}
#contact-dialog .contact-close:hover svg,
#contact-dialog .contact-close:focus-visible svg{color:#fff}

/* 裁去纯白留白最外侧1px，避免翻转与滤镜合成时出现边缘细线。 */
#contact-dialog .contact-qr>img{clip-path:inset(1px);border:0;outline:0;box-shadow:none}