*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{min-height:100vh;background:linear-gradient(160deg,#fff5f8,#ffeef4,#ffe0ea);font-family:"HanziPen SC","翩翩体-简","Kaiti SC",cursive;display:flex;justify-content:center;padding:15px 12px;overflow-x:hidden}
.card{width:100%;max-width:440px;max-height:92vh;background:rgba(255,255,255,.75);backdrop-filter:blur(18px);border-radius:36px;border:2px solid #ffccdb;box-shadow:0 15px 40px rgba(255,160,190,.45);overflow:hidden;display:flex;flex-direction:column;z-index:10}
.deco{height:12px;flex-shrink:0;background:linear-gradient(90deg,#ffd9e4,#ffb7cc,#ffd9e4);background-size:200%;animation:sh 4s infinite}
@keyframes sh{to{background-position:200%}}
.page{flex:1;min-height:0;padding:20px 18px;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow-y:auto}
.page.on{display:flex}
.page::-webkit-scrollbar{display:none}
.emoji{font-size:50px;margin-bottom:6px;animation:bo 2.5s infinite}
@keyframes bo{50%{transform:translateY(-10px) rotate(5deg)}}
.tt{font-size:22px;font-weight:700;background:linear-gradient(135deg,#ff8fab,#ff5c8a);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:5px}
.sc{font-family:"Snell Roundhand",cursive;font-size:38px;font-weight:700;background:linear-gradient(135deg,#ff8fab,#ff5c8a);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1;margin-bottom:8px}
.nm{display:inline-block;font-family:"ZCOOL KuaiLe","HanziPen SC","翩翩体-简","Yuanti SC",cursive;font-size:24px;font-weight:700;color:#d64570;margin:12px auto;padding:6px 20px;letter-spacing:5px;text-shadow:1px 1px 0 #ffd9e4,2px 2px 0 #ffb0c8,0 0 12px #ffb0c8;animation:nmB 2.2s ease-in-out infinite}
@keyframes nmB{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
.ms{font-size:15px;line-height:1.75;color:#7a4a5a;background:rgba(255,245,248,.8);padding:12px;border-radius:22px;border:1px dashed #ffb7cc;margin:8px 0}
.bs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px;flex-shrink:0}
.b{background:linear-gradient(145deg,#ffb0c8,#ff8fab);border:none;padding:10px 22px;border-radius:50px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.b:active{transform:scale(.94)}
.b2{background:#fff;color:#d64570;border:2px solid #ffb0c8}
.fr{width:100%;max-width:220px;aspect-ratio:1;background:linear-gradient(145deg,#fff0f5,#ffe0ea);border-radius:26px;border:3px solid #ffccdb;display:flex;align-items:center;justify-content:center;margin:12px auto;color:#d68aa0;font-size:13px;flex-direction:column;gap:5px;overflow:hidden;position:relative;animation:ph 1.2s ease-out}
@keyframes ph{0%{opacity:0;transform:scale(.7) rotate(-8deg)}60%{transform:scale(1.05) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.fr img{width:100%;height:100%;object-fit:cover;display:block;animation:zi 8s ease-in-out infinite}
@keyframes zi{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.fr span:first-child{font-size:40px}
.pcap{font-size:14px;color:#b84a6a;margin-top:10px;font-style:italic;line-height:1.6;padding:0 10px;animation:fi 1.4s ease-out .4s both}
@keyframes fi{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
.ck{width:100%;max-width:230px;margin:6px auto}
.ck svg{width:100%;display:block}
.fl{transition:opacity .4s}
.fl.off{opacity:0}
.ht{font-size:13px;color:#b84a6a;margin-top:4px;min-height:18px}
.ht.dn{color:#ff5c8a;font-weight:700}
.dt{display:flex;gap:6px;justify-content:center;padding:8px 0;flex-wrap:wrap;flex-shrink:0}
.dt span{width:8px;height:8px;border-radius:50%;background:#ffd0dd;transition:all .3s;cursor:pointer}
.dt span.on{background:#ff8fab;width:22px;border-radius:10px}
.st{font-size:17px;font-weight:700;color:#d64570;margin-top:10px;min-height:24px}
.tg{display:inline-block;background:#ffe0ea;color:#b84a6a;font-size:11px;padding:3px 10px;border-radius:30px;margin:2px;border:1px solid #ffccdb}
.dcb{height:8px;flex-shrink:0;background:linear-gradient(90deg,#ffd9e4,#ffb7cc,#ffd9e4);background-size:200%;animation:sh 4s infinite reverse}
.fh{position:fixed;pointer-events:none;z-index:2;animation:fh 10s infinite ease-in-out}
@keyframes fh{0%{opacity:.7;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-60px) rotate(20deg) scale(1.2)}100%{opacity:0;transform:translateY(-120px) rotate(-15deg) scale(.9)}}
.qi{width:100%;text-align:left;margin:6px 0}
.ql{font-size:14px;font-weight:700;color:#d64570;margin-bottom:6px;display:block}
.qi input,.qi textarea{width:100%;padding:10px 14px;border-radius:18px;border:2px solid #ffccdb;background:rgba(255,245,248,.9);font-size:14px;color:#7a4a5a;font-family:inherit;outline:none}
.qi textarea{min-height:60px}
.qi input:focus,.qi textarea:focus{border-color:#ff8fab;box-shadow:0 0 0 3px rgba(255,143,171,.25)}
.sv{font-size:11px;color:#ff8fab;margin-top:3px;min-height:14px}
.mb{position:fixed;top:15px;right:15px;z-index:50;background:rgba(255,255,255,.9);border:2px solid #ffb0c8;border-radius:50%;width:44px;height:44px;font-size:19px;cursor:pointer;box-shadow:0 4px 12px rgba(255,140,170,.4);display:flex;align-items:center;justify-content:center}
.mb.on{animation:sp 3s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.cf{position:fixed;width:10px;height:16px;pointer-events:none;z-index:200;animation:c 2.8s ease-out forwards}
@keyframes c{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
.fw{position:fixed;width:10px;height:10px;border-radius:50%;pointer-events:none;z-index:201}
.sp{position:fixed;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:201;animation:spr 1.2s ease-out forwards}
@keyframes spr{0%{transform:translate(0,0) scale(1.4);opacity:1}100%{transform:translate(var(--sx),var(--sy)) scale(0.2);opacity:0}}.mic-on{background:linear-gradient(145deg,#ff8fab,#ff5c8a)!important;color:#fff!important;animation:micPulse 1.2s infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,92,138,.5)}50%{box-shadow:0 0 0 12px rgba(255,92,138,0)}}