@charset "UTF-8";
:root{--pink:#fff0f4;--red:#cd123f;--ink:#3c1321;--lime:#e9fb91;--sans:"PingFang SC","Microsoft YaHei",Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--pink);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body.dialog-open{overflow:hidden}
[hidden]{display:none!important}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
h1,h2,p,figure{margin:0}
::selection{background:var(--lime);color:var(--red)}
.campaign{max-width:1440px;margin:auto;padding:48px 5.3% 45px;display:grid;grid-template-columns:47% 53%;align-items:center;gap:0;min-height:650px}
.campaign-copy{padding:5px 28px 12px 0;position:relative;z-index:1}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:1.8px;font-weight:600;color:var(--red)}
.eyebrow>span{width:28px;height:28px;background:var(--lime);border-radius:50%;display:grid;place-items:center;font-size:24px;line-height:1}
h1{font-size:clamp(44px,5.1vw,74px);font-weight:900;letter-spacing:-3px;line-height:1.28;color:var(--red);margin:25px 0 24px;white-space:nowrap}
h1>span{position:relative}
h1>span:after{content:"";position:absolute;left:0;right:3px;bottom:-7px;border-bottom:2px solid var(--red);height:12px;border-radius:50%;transform:rotate(-3deg)}
.intro{font-size:16px;line-height:1.9;letter-spacing:1px;color:#8f4058}
.claim-action{margin-top:38px;max-width:385px}
#claim-button{position:relative;width:100%;min-height:70px;padding:12px 58px;border:1px solid #810c31;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#9b123e;color:#fff;box-shadow:inset 0 1px 0 #ffffff30,0 7px 0 #650b2b,0 13px 20px #700e2826;transition:transform .15s,box-shadow .15s,background .15s}
#claim-button>span:first-child{font-size:22px;font-weight:800;letter-spacing:2px;line-height:1.4}
.button-arrow{position:absolute;right:21px;top:50%;transform:translateY(-50%);font:29px/1 Arial,sans-serif;pointer-events:none}
@media(hover:hover) and (pointer:fine){#claim-button:hover{background:#870d35;transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff30,0 9px 0 #650b2b,0 15px 23px #700e2830}}
#claim-button:active{transform:translateY(5px);box-shadow:inset 0 1px 0 #ffffff20,0 2px 0 #650b2b,0 5px 8px #700e2826}
.claim-hint{margin-top:19px;font-size:13px;line-height:1.7;letter-spacing:.5px;color:#814053;text-align:center}
.copy-signature{font:700 14px/1.3 Arial,sans-serif;letter-spacing:2px;color:#a86175;margin-top:44px}
.copy-signature em{font-family:Georgia,serif;font-weight:400;font-size:18px;letter-spacing:1px}
.campaign-art{position:relative;margin-left:14px}
.image-frame{border-radius:32px;overflow:hidden;background:#efb7c8;aspect-ratio:1}
.image-frame img{width:100%;height:100%;object-fit:contain;display:block;transition:transform 1s}
.image-frame:hover img{transform:scale(1.02)}
.sample-seal{position:absolute;left:-41px;bottom:54px;width:140px;height:140px;border-radius:50%;background:var(--lime);color:var(--red);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;transform:rotate(-12deg);box-shadow:0 3px 0 #a84d6420}
.sample-seal:before{content:"";position:absolute;inset:7px;border:1px solid #cd123f50;border-radius:50%}
.sample-seal span{font-size:8px;letter-spacing:1px;position:relative}
.sample-seal strong{font:900 25px/.93 Arial,sans-serif;letter-spacing:-1px;text-align:center;position:relative}
.art-sparkle{position:absolute;right:-17px;top:-29px;font:86px Georgia,serif;color:#fff;filter:drop-shadow(0 1px 0 #cd123f44);pointer-events:none;animation:glint 4s ease-in-out infinite alternate}
figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:17px;color:#814053;font-size:12px;line-height:1.6;letter-spacing:0}
figcaption>span:last-child{font-size:9px;letter-spacing:1px;white-space:nowrap}
footer{padding:20px 6%;text-align:center;font-size:13px;color:#814053;line-height:1.8;border-top:1px solid #db9aaa55}
@keyframes glint{from{opacity:.65;transform:scale(.9) rotate(-8deg)}to{opacity:1;transform:scale(1.04) rotate(8deg)}}
dialog{width:min(430px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:0;border-radius:26px;background:#fff9fb;padding:38px 34px 25px;color:var(--ink);box-shadow:0 25px 100px #5a10284d;text-align:center}
dialog::backdrop{background:#41112a91;backdrop-filter:blur(8px)}
#close-dialog{-webkit-appearance:none;appearance:none;position:absolute;right:10px;top:8px;width:44px;height:44px;padding:0;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;color:#814b60;background:#fff9fb;font:30px/1 Arial,sans-serif;outline:none;box-shadow:none}
#close-dialog:hover{background:#f3dce4}
/* Use a rounded focus shadow instead of Safari's native outline. */
#close-dialog:focus-visible{outline:none;box-shadow:0 0 0 2px #fff9fb,0 0 0 4px var(--ink)}
@media(forced-colors:active){#close-dialog:focus-visible{outline:2px solid Highlight;outline-offset:2px}}
.dialog-eyebrow{font-size:12px;line-height:1.8;letter-spacing:0;color:#915369;margin-bottom:12px}
h2{font-size:29px;letter-spacing:-1px;font-weight:800;line-height:1.4}
h2 span{color:var(--red)}
#dialog-description{font-size:14px;line-height:1.8;color:#915369;margin-top:13px}
.qr-frame{width:min(260px,100%);aspect-ratio:1;margin:22px auto 19px;background:white;border:1px solid #f0dfe5;border-radius:12px;overflow:hidden;display:grid;place-items:center}
#wechat-qr{display:block;width:100%;height:100%;object-fit:contain;-webkit-touch-callout:default;user-select:auto}
#qr-error{font-size:13px;line-height:1.8;color:#915369;padding:24px}
#save-hint{font-size:16px;font-weight:700;color:#9b123e;line-height:1.7;margin-top:8px}
.activity-note{font-size:13px;line-height:1.8;color:#915369;margin-top:13px;padding-top:13px;border-top:1px solid #eddae1}
@media(min-width:1600px){.campaign{min-height:720px}}
@media(max-width:1000px){.campaign{min-height:580px;padding-top:40px;padding-bottom:40px}.campaign-copy{padding-right:22px}h1{font-size:clamp(40px,4.8vw,48px);letter-spacing:-3px}.intro{font-size:14px}.eyebrow{font-size:8px;gap:8px;letter-spacing:1px}.eyebrow>span{width:24px;height:24px;font-size:20px}.claim-action{margin-top:30px}#claim-button{min-height:64px;padding-left:45px;padding-right:45px}#claim-button>span:first-child{font-size:20px;letter-spacing:1px}.button-arrow{right:16px;font-size:26px}.sample-seal{width:110px;height:110px;left:-28px;bottom:40px;gap:7px}.sample-seal strong{font-size:21px}.sample-seal span{font-size:6px}.copy-signature{margin-top:30px;font-size:11px}.copy-signature em{font-size:15px}}
@media(max-width:700px){
  body{padding-bottom:calc(132px + env(safe-area-inset-bottom))}
  .campaign{display:flex;flex-direction:column;padding:28px 6% 24px;min-height:0;align-items:stretch}
  .campaign-copy{padding:0;display:flex;flex-direction:column;align-items:flex-start}
  .eyebrow{font-size:8px;letter-spacing:1.3px}.eyebrow>span{width:22px;height:22px;font-size:19px}
  h1{font-size:clamp(40px,12vw,58px);line-height:1.22;letter-spacing:-2px;margin:15px 0 18px}
  h1>span:after{bottom:-5px;height:7px;border-bottom-width:1.5px}
  .intro{font-size:14px;letter-spacing:.3px;line-height:1.8;margin-bottom:22px}
  .copy-signature{display:none}
  .campaign-art{margin:0 0 0 8px}
  .image-frame{border-radius:22px}
  .sample-seal{width:93px;height:93px;left:-15px;bottom:38px;gap:6px}.sample-seal:before{inset:5px}.sample-seal strong{font-size:19px}.sample-seal span{font-size:5px;letter-spacing:.7px}
  .art-sparkle{font-size:63px;right:-12px;top:-20px}
  figcaption{font-size:12px;letter-spacing:0;margin-top:13px}
  figcaption>span:last-child{display:none}
  footer{padding:16px 6%;font-size:13px;text-align:left}
  .claim-action{position:fixed;z-index:5;bottom:0;left:0;right:0;max-width:none;margin:0;padding:12px 6% calc(12px + env(safe-area-inset-bottom));background:#fff0f4f5;backdrop-filter:blur(12px);border-top:1px solid #eac3cf;box-shadow:0 -8px 22px #fff0f480}
  #claim-button{min-height:64px;padding:12px 46px;border-radius:15px}
  #claim-button>span:first-child{font-size:21px;letter-spacing:2px}.button-arrow{right:18px;font-size:27px}
  .claim-hint{font-size:13px;letter-spacing:.5px;margin-top:16px}
  dialog{padding:36px 25px 23px;border-radius:22px}h2{font-size:27px}.qr-frame{width:min(242px,100%);margin-top:20px}
}
@media(max-width:359px){#claim-button{padding-left:42px;padding-right:42px}#claim-button>span:first-child{font-size:20px;letter-spacing:1px}h2{font-size:23px}dialog{padding:35px 20px 20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}