.foot-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin-left: auto; }
.foot-wechat { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: #fff; opacity: .8; transition: opacity 180ms; }
.foot-wechat:hover, .foot-wechat:focus { opacity: 1; }
.foot-wechat > img { width: 24px; height: 24px; filter: invert(1); }

/* Keep the QR above the footer and inside the right edge on narrow screens. */
.foot-wechat-qr {
  position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 20;
  display: block; box-sizing: border-box; width: 232px; max-width: calc(100vw - 32px);
  padding: 12px; border: 1px solid #e8e8e8; border-radius: 14px;
  background: #fff; color: #333; box-shadow: 0 8px 32px rgb(0 0 0 / 16%);
  font: 12px/1.5 system-ui, sans-serif; text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 180ms, transform 180ms, visibility 180ms;
}
.foot-wechat-qr::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.foot-wechat-qr img { display: block; width: 100%; height: auto; filter: none; margin-bottom: 8px; }
.foot-wechat:hover .foot-wechat-qr,
.foot-wechat:focus .foot-wechat-qr { opacity: 1; visibility: visible; transform: translateY(0); }
.foot-wechat-qr-en { display: none; }
html:lang(en) .foot-wechat-qr-zh { display: none; }
html:lang(en) .foot-wechat-qr-en { display: inline; }
@media (prefers-reduced-motion: reduce) { .foot-wechat-qr { transition: none; } }

html { scroll-behavior: smooth; }
.foot-back-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #555; font: 13px/1.5 system-ui, sans-serif; text-decoration: none; opacity: .8; }
.foot-back-top:hover, .foot-back-top:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.foot-back-top:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 3px; }
.foot-top-en { display: none; }
html:lang(en) .foot-top-zh { display: none; }
html:lang(en) .foot-top-en { display: inline; }
.diagram-footer { padding: 20px 24px; text-align: right; }
.diagram-footer .foot-back-top { color: #337a40; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.page-back-top { background: #fff; padding: 8px 0 16px; }
.page-back-top > .wrap { display: flex; justify-content: flex-end; }