* {box-sizing:border-box}
body {margin:0;background:#f4f6f8;color:#172033;font:16px/1.55 "Microsoft YaHei",system-ui,sans-serif}
.pan-header {background:#fff;border-bottom:1px solid #dde1e7;padding:16px max(20px,5vw)}
.pan-header a,.pan-header span {display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.pan-header img {width:auto;max-width:125px;height:30px;object-fit:contain}
.pan-layout {display:flex;align-items:center;justify-content:center;gap:clamp(20px,6vw,76px);max-width:1000px;margin:0 auto;padding:clamp(28px,6vw,76px) 20px}
.pan-card {width:min(100%,420px);background:#fff;padding:clamp(18px,4vw,30px);border-radius:18px;box-shadow:0 10px 32px #23304712}
.pan-card h1 {font-size:20px;margin:0 0 10px;overflow-wrap:anywhere}
.pan-card p {margin:10px 0}
.pan-qr {margin:12px auto;width:min(100%,224px);height:auto;image-rendering:pixelated}
.pan-qr:not([hidden]) {display:block}
.pan-note {border-top:1px solid #dde1e7;padding-top:14px;text-align:center;white-space:pre-line;color:#475467}
.pan-open {display:block;text-align:center;padding:8px;color:#234ead;font-weight:650}
.pan-demo {width:min(32%,300px);max-height:470px;object-fit:contain;border-radius:16px}
@media(max-width:640px) {.pan-layout{flex-direction:column}.pan-demo{width:min(100%,250px)}}