/* ===================================================================================================
   记忆 App redesign · UI batch 3: 信 / 纸条 / 愿望 / 朋友圈 / 礼物 objects and their detail sections.
   Paper stays paper at night (ink set here); colours follow --c; holes and folded corners show the page (--mm-paper).
   =================================================================================================== */

/* ---- page parts ---- */
.mm-steps{margin-top:16px;padding:14px 16px}
.mm-steps .h{font-size:15px;font-weight:600;margin-bottom:10px}
.mm-steps .steps{display:flex;align-items:flex-start}
.mm-steps .step{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;font-size:12px;color:var(--mm-ink2);text-align:center}
.mm-steps .step::before{content:"";position:absolute;top:8px;left:-50%;right:50%;height:2px;background:var(--mm-line)}
.mm-steps .step:first-child::before{display:none}
.mm-steps .step i{width:18px;height:18px;border-radius:50%;border:2px solid var(--mm-line);background:var(--mm-solid);position:relative;z-index:1}
.mm-steps .step.done i{background:var(--mm-a);border-color:var(--mm-a)}
.mm-steps .step.done::before{background:var(--mm-a)}
.mm-steps .step b{font-size:13px;color:var(--mm-ink);font-weight:600}
.mm-steps .step.wait b{color:var(--mm-ink2);font-weight:400}
.mm-who-row{display:flex;align-items:center;gap:10px;font-size:13px}
.mm-who-row .avs{display:flex}
.mm-who-row .avs .mm-av+.mm-av{margin-left:-6px}
.mm-who-row .avs .mm-av{box-shadow:0 0 0 2px var(--mm-solid)}
.mm-likes{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mm-ink2);padding:8px 10px;border-radius:12px;background:var(--mm-ap)}
.mm-likes i{font-style:normal;color:var(--mm-a)}
.mm-cmt{display:flex;gap:10px;padding:10px 2px 0}
.mm-cmt+.mm-cmt{border-top:1px dashed var(--mm-line);margin-top:10px}
.mm-cmt .tx{flex:1;min-width:0}
.mm-cmt .tx b{font-size:12.5px;font-weight:600}
.mm-cmt .tx time{font-size:11px;color:var(--mm-ink2);margin-left:6px}
.mm-cmt .tx p{margin:3px 0 0;font-size:14px;line-height:1.65;overflow-wrap:anywhere}
.mm-flow{display:flex;align-items:center;gap:10px;font-size:13px}
.mm-flow .arr{flex:1;height:2px;background:linear-gradient(90deg,var(--mm-ap),var(--mm-a));position:relative}
.mm-flow .arr::after{content:"";position:absolute;right:-1px;top:-4px;border-left:8px solid var(--mm-a);border-top:5px solid transparent;border-bottom:5px solid transparent}
.mm-flow .who{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--mm-ink2)}
.mm-meta3{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.mm-meta3 span{font-size:12px;padding:4px 10px;border-radius:12px;background:var(--mm-ap);color:var(--mm-ad)}
.mm-cardtx{margin:0;padding:12px 14px;border-radius:14px;background:linear-gradient(160deg,color-mix(in srgb,var(--mm-solid) 90%,transparent),var(--mm-ap));border:1px solid var(--mm-hl,transparent);font-size:15px;line-height:1.85}
.mm-cardtx small{display:block;text-align:right;font-size:12px;color:var(--mm-ink2);margin-top:4px}
.mm-react{display:flex;gap:10px;align-items:flex-start}
.mm-react .bb{background:var(--mm-solid);border:1px solid var(--mm-line);border-radius:16px 16px 16px 4px;padding:9px 12px;font-size:14px;line-height:1.65}
.mm-react .bb small{display:block;font-size:11px;color:var(--mm-ink2);margin-top:3px}

/* ---- 信：信封 / 航空信 (封口翻开，信滑出来) ---- */
.mo-envx{--c2:color-mix(in srgb,var(--c) 40%,#7d93b0);position:relative;padding-top:0;transition:padding-top .55s ease;cursor:pointer;color:#3b3540}
.mo-envx.open{padding-top:300px}
.mo-envx .sheet2{position:absolute;left:6%;right:6%;top:14px;height:120px;overflow:hidden;background:#fff;border-radius:6px;padding:18px 18px 14px;box-shadow:0 6px 18px rgba(80,60,90,.16);z-index:1;transition:top .55s ease,height .55s ease;background-image:repeating-linear-gradient(180deg,transparent 0 27px,color-mix(in srgb,var(--c) 50%,transparent) 27px 28px);background-position:0 18px;scrollbar-width:none}
.mo-envx .sheet2::-webkit-scrollbar{display:none}
.mo-envx.open .sheet2{top:0;height:330px;overflow:auto}
.mo-envx .to{font-size:15px;font-weight:600;line-height:28px}
.mo-envx .sheet2 p{margin:0;font-size:14.5px;line-height:28px;text-indent:2em;color:#4a4350}
.mo-envx .sig{text-align:right;font-size:13.5px;line-height:28px;color:#5d5563;margin-top:6px}
.mo-envx .env2{position:relative;z-index:2;height:160px;border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,#fff),color-mix(in srgb,var(--c) 80%,#fff));box-shadow:0 18px 28px -18px rgba(90,60,90,.5)}
.mo-envx .env2::before{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(to top right,transparent 49.6%,rgba(120,80,100,.14) 50%,transparent 50.6%) left bottom/50% 100% no-repeat,linear-gradient(to top left,transparent 49.6%,rgba(120,80,100,.14) 50%,transparent 50.6%) right bottom/50% 100% no-repeat}
.mo-envx .fl{position:absolute;left:0;right:0;top:0;height:82px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),color-mix(in srgb,var(--c) 85%,#fff));clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .5s ease,opacity .5s;filter:drop-shadow(0 2px 2px rgba(0,0,0,.08));border-radius:12px 12px 0 0}
.mo-envx.open .fl{transform:rotateX(180deg);opacity:.25}
.mo-envx .seal2{position:absolute;left:50%;top:62px;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--c) 30%,#fff),color-mix(in srgb,var(--c) 75%,#8a5a6a) 62%,color-mix(in srgb,var(--c) 55%,#5a3a48));box-shadow:0 3px 6px rgba(90,50,70,.35),inset 0 -2px 3px rgba(0,0,0,.15);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;transition:opacity .3s,transform .3s}
.mo-envx.open .seal2{opacity:0;transform:translateX(-50%) scale(.6)}
.mo-envx .from2{position:absolute;left:18px;bottom:14px;right:18px;display:flex;justify-content:space-between;font-size:12px;color:color-mix(in srgb,var(--c) 35%,#4a3a44)}
.mo-envx.air .env2{background:#fff;border:8px solid transparent;border-image:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--c) 70%,#fff) 0 10px,#fff 10px 15px,color-mix(in srgb,var(--c2) 70%,#fff) 15px 25px,#fff 25px 30px) 8;border-radius:4px}
.mo-envx.air .env2::before{display:none}
.mo-envx.air .fl{background:#fafafc;left:-8px;right:-8px;top:-8px;border-radius:0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.1))}
.mo-envx.air .lab2{position:absolute;left:12px;bottom:36px;font-size:10px;letter-spacing:2px;padding:3px 8px;border:1.5px solid var(--c2);color:var(--c2);border-radius:3px}
.mo-envx.air .seal2{background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--c2) 30%,#fff),var(--c2) 62%,color-mix(in srgb,var(--c2) 60%,#333))}
.mo-envx.air .from2{color:#857b8c}
.mo-envx.air .sheet2{background-image:repeating-linear-gradient(180deg,transparent 0 27px,color-mix(in srgb,var(--c2) 30%,transparent) 27px 28px)}
/* ---- 信：三折信纸 ---- */
.mo-tri{--h:112px;position:relative;height:var(--h);transition:height .9s ease;perspective:1100px;cursor:pointer;color:#3b3540}
.mo-tri.open{height:calc(var(--h)*3)}
.mo-tri .stk{position:absolute;left:0;right:0;top:0;height:calc(var(--h)*3);transform:translateY(calc(var(--h)*-1));transform-style:preserve-3d;transition:transform .9s ease}
.mo-tri.open .stk{transform:none}
.mo-tri .pn{position:absolute;left:0;right:0;height:var(--h);transform-style:preserve-3d;transition:transform .45s ease}
.mo-tri .f,.mo-tri .b{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:#fff;overflow:hidden}
.mo-tri .f{padding:14px 20px 0 30px;background-image:linear-gradient(90deg,transparent 18px,color-mix(in srgb,var(--c) 45%,transparent) 18px 19px,transparent 19px),repeating-linear-gradient(180deg,transparent 0 27px,color-mix(in srgb,var(--c) 22%,transparent) 27px 28px);background-position:0 0,0 14px}
.mo-tri .b{transform:rotateX(180deg);background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--c) 8%,#fff))}
.mo-tri .p1{top:0;transform-origin:50% 100%;transform:rotateX(-180deg) translateZ(-2px);transition-delay:.45s}
.mo-tri .p2{top:var(--h)}
.mo-tri .p2 .f{box-shadow:0 14px 24px -16px rgba(70,60,100,.45)}
.mo-tri .p3{top:calc(var(--h)*2);transform-origin:50% 0;transform:rotateX(180deg) translateZ(-1px)}
.mo-tri.open .p1{transform:none;transition-delay:0s}
.mo-tri.open .p3{transform:none;transition-delay:.45s}
.mo-tri.open .p2 .f{box-shadow:none}
.mo-tri.open .p3 .f{box-shadow:0 14px 24px -16px rgba(70,60,100,.45)}
.mo-tri .p1 .b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:4px;box-shadow:0 10px 20px -14px rgba(70,60,100,.5)}
.mo-tri .p1 .b b{font-size:16px;color:color-mix(in srgb,var(--c) 45%,#3b3540)}
.mo-tri .p1 .b small{font-size:11.5px;color:#857b8c}
.mo-tri .to{font-size:15px;font-weight:600;line-height:28px}
.mo-tri p{margin:0;font-size:14px;line-height:28px;color:#4a4350}
.mo-tri .sig{text-align:right;font-size:13px;line-height:28px;color:#5d5563}
/* ---- 纸条 ---- */
.mo-nt{background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--c) 40%,#fff));padding:22px 20px 30px;margin-top:6px;position:relative;color:#3b3540;box-shadow:0 14px 24px -16px rgba(80,60,110,.45);transform:rotate(-1deg);transform-origin:50% 0;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 92%,97% 96%,93% 92%,89% 97%,85% 92%,80% 96%,76% 91%,71% 96%,66% 92%,61% 97%,56% 92%,51% 96%,46% 91%,41% 96%,36% 92%,31% 97%,26% 92%,21% 96%,16% 91%,11% 96%,6% 92%,3% 96%,0 92%)}
.mo-nt .tape{position:absolute;top:-2px;left:50%;width:76px;height:20px;transform:translateX(-50%) rotate(-3deg);background:color-mix(in srgb,var(--c) 75%,transparent);opacity:.9}
.mo-nt p,.mo-fold p,.mo-fr p{margin:6px 0 10px;font-size:18px;line-height:1.75;font-weight:600;overflow-wrap:anywhere}
.mo-nt .sg,.mo-fold .sg,.mo-fr .sg{display:block;text-align:right;font-size:13px;color:#857b8c}
.mo-nt.on{animation:moNtSwing 1.4s ease-out}
.mo-nt.on .tape{animation:moNtPeel 1.4s ease-out}
@keyframes moNtSwing{0%{transform:rotate(-1deg)}15%{transform:rotate(3deg) translateY(2px)}35%{transform:rotate(-3deg)}55%{transform:rotate(1.6deg)}75%{transform:rotate(-1.8deg)}100%{transform:rotate(-1deg)}}
@keyframes moNtPeel{0%{transform:translateX(-50%) rotate(-3deg)}20%{transform:translateX(-46%) rotate(-11deg) translateY(-3px)}60%{transform:translateX(-46%) rotate(-9deg) translateY(-2px)}100%{transform:translateX(-50%) rotate(-3deg)}}
.mo-fold{position:relative;min-height:150px;cursor:pointer;perspective:800px;color:#3b3540}
.mo-fold .out{position:absolute;inset:0;border-radius:6px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 45%,#fff),color-mix(in srgb,var(--c) 75%,#fff));box-shadow:0 14px 24px -16px rgba(60,70,110,.5);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;transition:opacity .35s,transform .35s}
.mo-fold .out::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(60,70,110,.15);box-shadow:0 1px 0 rgba(255,255,255,.7)}
.mo-fold .out::after{content:"";position:absolute;right:0;top:0;width:26px;height:26px;background:linear-gradient(225deg,var(--mm-paper) 50%,color-mix(in srgb,var(--c) 90%,#fff) 50%);border-bottom-left-radius:4px}
.mo-fold .out b{font-size:16px;color:color-mix(in srgb,var(--c) 30%,#3b4560);position:relative}
.mo-fold .out small{font-size:11.5px;color:#857b8c;position:relative}
.mo-fold .open{position:relative;border-radius:6px;background:#fff;min-height:150px;box-shadow:0 14px 24px -16px rgba(60,70,110,.5);padding:20px;opacity:0;transform:rotateX(-70deg);transform-origin:top;transition:opacity .35s,transform .35s;background-image:linear-gradient(180deg,transparent 49.6%,rgba(60,70,110,.1) 50%,transparent 50.4%)}
.mo-fold.on .out{opacity:0;transform:scale(.96);pointer-events:none}
.mo-fold.on .open{opacity:1;transform:none}
.mo-fr{position:relative;padding-top:12px;cursor:pointer;color:#3b3540}
.mo-fr .sq{background:linear-gradient(170deg,color-mix(in srgb,var(--c) 55%,#fff),color-mix(in srgb,var(--c) 85%,#fff));padding:24px 18px 18px;min-height:170px;transform:rotate(1.5deg);transform-origin:50% 0;box-shadow:0 12px 20px -14px rgba(60,80,70,.55);position:relative}
.mo-fr .sq::after{content:"";position:absolute;right:0;bottom:0;width:30px;height:30px;background:linear-gradient(315deg,var(--mm-paper) 48%,color-mix(in srgb,var(--c) 40%,#fff) 50%);box-shadow:-3px -3px 6px -3px rgba(0,0,0,.15)}
.mo-fr .mag{position:absolute;left:50%;top:0;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;z-index:2;background:radial-gradient(circle at 35% 30%,#fff,color-mix(in srgb,var(--c) 50%,#8a9a90) 70%);box-shadow:0 4px 6px rgba(0,0,0,.2),inset 0 -2px 3px rgba(0,0,0,.1)}
.mo-fr.on .sq{animation:moFrSwing 1.6s ease-out}
.mo-fr.on .mag{animation:moFrMag .5s ease-out}
.mo-fr.on .sq::after{animation:moFrCurl 1.6s ease-out}
@keyframes moFrSwing{0%{transform:rotate(1.5deg)}18%{transform:rotate(-4deg)}38%{transform:rotate(3.5deg)}58%{transform:rotate(-2deg)}78%{transform:rotate(2.2deg)}100%{transform:rotate(1.5deg)}}
@keyframes moFrMag{0%{transform:translateX(-50%) scale(1)}35%{transform:translateX(-50%) scale(.86)}70%{transform:translateX(-50%) scale(1.06)}100%{transform:translateX(-50%) scale(1)}}
@keyframes moFrCurl{0%,100%{width:30px;height:30px}30%{width:52px;height:52px}60%{width:40px;height:40px}}
/* ---- 愿望：明信片 ---- */
.mo-pcf{perspective:1200px;cursor:pointer;color:#3b3540}
.mo-pcf .in{position:relative;height:200px;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.3,1)}
.mo-pcf.flip .in{transform:rotateY(180deg)}
.mo-pcf .face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:6px;overflow:hidden;box-shadow:0 18px 30px -18px rgba(60,50,100,.55),0 1px 2px rgba(0,0,0,.06)}
.mo-pcf .front{background:#fff;padding:8px 8px 34px}
.mo-pcf .art{position:relative;height:100%;border-radius:2px;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,#fff) 0%,color-mix(in srgb,var(--c) 25%,#f6dfe3) 48%,#fbe9e2 58%,color-mix(in srgb,var(--c) 45%,#9fb4cf) 59%,color-mix(in srgb,var(--c) 60%,#7d93b0) 100%)}
.mo-pcf .sun{position:absolute;left:50%;top:44%;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:radial-gradient(circle,#fff6ee,#f8dcd3 70%);box-shadow:0 0 40px 14px rgba(255,236,226,.7)}
.mo-pcf .sea{position:absolute;left:0;right:0;top:59%;bottom:0;background:repeating-linear-gradient(180deg,transparent 0 6px,rgba(255,255,255,.18) 6px 7px)}
.mo-pcf .glint{position:absolute;left:50%;top:60%;width:10px;height:36%;margin-left:-5px;background:linear-gradient(180deg,rgba(255,240,230,.8),transparent)}
.mo-pcf .cap2{position:absolute;left:12px;right:12px;bottom:9px;display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:#857b8c}
.mo-pcf .cap2 b{font-size:10.5px;letter-spacing:2px;font-weight:500}
.mo-pcf .back{transform:rotateY(180deg);background:linear-gradient(180deg,#fff,#fbfafd);padding:14px;display:grid;grid-template-columns:1fr 1px 92px;gap:12px}
.mo-pcf .back::before{content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--c) 18%,transparent);border-radius:3px;pointer-events:none}
.mo-pcf .k{font-size:10.5px;letter-spacing:2px;color:#857b8c}
.mo-pcf .t{font-size:17px;font-weight:600;margin:6px 0;line-height:1.4}
.mo-pcf .msg{min-width:0;overflow:hidden}
.mo-pcf .msg p{margin:0;font-size:12.5px;line-height:1.75;color:#6f6677}
.mo-pcf .dv{background:color-mix(in srgb,var(--c) 22%,transparent)}
.mo-pcf .rt{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.mo-pcf .stp{width:52px;height:62px;padding:5px;background:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.22));-webkit-mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 3px,transparent 2.5px,#000 3px) -4px -4px/8px 8px round;mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 3px,transparent 2.5px,#000 3px) -4px -4px/8px 8px round}
.mo-pcf .stp i{display:block;height:100%;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 45%,#fff),#fbe9e2 55%,color-mix(in srgb,var(--c) 60%,#7d93b0) 56%)}
.mo-pcf .wv2{position:absolute;right:30px;top:20px;width:54px;height:24px;opacity:.5;background:repeating-linear-gradient(180deg,transparent 0 6px,color-mix(in srgb,var(--c) 70%,#3b3540) 6px 7px,transparent 7px 8px)}
.mo-pcf .ad{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:6px}
.mo-pcf .ad span{border-bottom:1px solid color-mix(in srgb,var(--c) 25%,transparent);font-size:11px;color:#857b8c;padding-bottom:2px}
.mo-pcf .plan2,.mo-pcf .done2{position:absolute;opacity:0}
.mo-pcf .plan2{left:16px;bottom:14px;border:2px solid color-mix(in srgb,var(--c) 70%,#3b3540);color:color-mix(in srgb,var(--c) 70%,#3b3540);border-radius:6px;padding:3px 10px;font-size:12px;font-weight:700;letter-spacing:2px;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px currentColor;--r:-8deg}
.mo-pcf .done2{right:62px;top:16px;width:60px;height:60px;border-radius:50%;border:2px solid #6f927d;color:#6f927d;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:2px;--r:-14deg}
.mo-pcf .done2 small{font-size:8.5px;font-weight:500}
.mo-pcf.flip .plan2,.mo-pcf.flip .done2{animation:moStampIn .35s .75s both}
@keyframes moStampIn{0%{opacity:0;transform:rotate(var(--r)) scale(1.8)}70%{opacity:.9;transform:rotate(var(--r)) scale(.92)}100%{opacity:.85;transform:rotate(var(--r)) scale(1)}}
/* ---- 愿望：许愿牌 ---- */
.mo-ema{display:flex;justify-content:center;cursor:pointer;color:#3b3540}
.mo-ema .sw{position:relative;width:88%;padding-top:58px;transform-origin:50% 6px}
.mo-ema.on .sw{animation:moEma 1.6s ease-out}
@keyframes moEma{0%{transform:rotate(0)}15%{transform:rotate(5deg)}35%{transform:rotate(-4deg)}55%{transform:rotate(2.5deg)}75%{transform:rotate(-1.5deg)}100%{transform:rotate(0)}}
.mo-ema .cord{position:absolute;left:50%;top:0;width:120px;height:80px;margin-left:-60px;z-index:2;overflow:visible}
.mo-ema .c1{stroke:color-mix(in srgb,var(--c) 45%,#7a6f88);stroke-width:2.4}
.mo-ema .c2{stroke:rgba(255,255,255,.55);stroke-width:1;stroke-dasharray:2 3}
.mo-ema .knot{fill:color-mix(in srgb,var(--c) 45%,#7a6f88)}
.mo-ema .nail{fill:#cfcad8;stroke:#a9a2b5;stroke-width:1}
.mo-ema .pl{clip-path:polygon(50% 0,100% 22%,100% 100%,0 100%,0 22%);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));padding:58px 22px 20px;position:relative;filter:drop-shadow(0 10px 14px rgba(70,60,100,.3))}
.mo-ema .pl::before{content:"";position:absolute;left:50%;top:14px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:color-mix(in srgb,var(--c) 40%,#6a5f78);box-shadow:inset 0 2px 3px rgba(0,0,0,.35)}
.mo-ema .k{font-size:10.5px;letter-spacing:3px;color:color-mix(in srgb,var(--c) 30%,#3b3540);text-align:center}
.mo-ema .t{font-size:19px;font-weight:600;text-align:center;margin:8px 0 6px;line-height:1.5}
.mo-ema .p{font-size:12.5px;text-align:center;color:color-mix(in srgb,var(--c) 25%,#4a4350);margin:0;line-height:1.7}
.mo-ema .by{display:flex;justify-content:space-between;margin-top:14px;font-size:11.5px;color:color-mix(in srgb,var(--c) 25%,#4a4350)}
/* ---- 愿望：愿望瓶 ---- */
.mo-jar{position:relative;padding-top:0;transition:padding-top .7s ease;cursor:pointer;display:flex;flex-direction:column;align-items:center;color:#3b3540}
.mo-jar.open{padding-top:200px}
.mo-jar .bottle{position:relative;width:200px;height:240px}
.mo-jar .cork2{position:absolute;left:50%;top:0;width:58px;height:28px;margin-left:-29px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 25%,#ddd6e4),color-mix(in srgb,var(--c) 40%,#b6aac4));box-shadow:inset 0 -3px 4px rgba(0,0,0,.1);transition:transform .5s ease;z-index:3}
.mo-jar.open .cork2{transform:translate(64px,-22px) rotate(28deg)}
.mo-jar .neck2{position:absolute;left:50%;top:24px;width:72px;height:30px;margin-left:-36px;background:color-mix(in srgb,var(--c) 18%,rgba(255,255,255,.6));border:2px solid rgba(255,255,255,.95);border-bottom:none;border-radius:6px 6px 0 0;z-index:2}
.mo-jar .tie{position:absolute;left:50%;top:44px;width:84px;height:9px;margin-left:-42px;background:color-mix(in srgb,var(--c) 65%,#8a7aa8);border-radius:3px;z-index:3}
.mo-jar .body2{position:absolute;left:0;right:0;top:50px;bottom:0;border-radius:40px 40px 34px 34px;background:linear-gradient(120deg,rgba(255,255,255,.7),color-mix(in srgb,var(--c) 28%,rgba(255,255,255,.35)) 40%,color-mix(in srgb,var(--c) 42%,rgba(255,255,255,.3)));border:2px solid rgba(255,255,255,.95);box-shadow:inset 0 0 22px rgba(255,255,255,.75),0 16px 26px -16px rgba(60,70,110,.5);z-index:2}
.mo-jar .body2::before{content:"";position:absolute;left:16px;top:16px;width:12px;height:100px;border-radius:6px;background:rgba(255,255,255,.75)}
.mo-jar .scroll{position:absolute;left:50%;top:120px;width:118px;margin-left:-59px;transform:rotate(-14deg);transition:top .7s ease,width .7s ease,margin .7s ease,transform .7s ease;z-index:1;display:flex;flex-direction:column;align-items:stretch}
.mo-jar.open .scroll{top:0;width:210px;margin-left:-105px;transform:none;z-index:4}
.mo-jar .rod{display:block;height:14px;border-radius:7px;background:linear-gradient(180deg,#fff,#ece8f2 50%,#d9d3e3);box-shadow:0 2px 3px rgba(0,0,0,.12);position:relative;margin:0 -8px}
.mo-jar .rod::before,.mo-jar .rod::after{content:"";position:absolute;top:2px;width:8px;height:10px;border-radius:3px;background:color-mix(in srgb,var(--c) 55%,#8a7aa8)}
.mo-jar .rod::before{left:-4px}.mo-jar .rod::after{right:-4px}
.mo-jar .paper{max-height:0;overflow:hidden;background:linear-gradient(90deg,#f7f5fa,#fff 15%,#fff 85%,#f7f5fa);padding:0 16px;text-align:center;transition:max-height .6s ease .35s,padding .6s ease .35s}
.mo-jar.open .paper{max-height:170px;padding:16px}
.mo-jar .paper b{display:block;font-size:16px;line-height:1.5}
.mo-jar .paper p{margin:8px 0;font-size:12.5px;line-height:1.7;color:#6f6677}
.mo-jar .paper small{font-size:11px;color:#857b8c}

/* ---- 朋友圈（纯文字）：剪报 / 便利贴 / 标签机 ---- */
.mo-clp{perspective:1200px;cursor:pointer;color:#3b3540}
.mo-clp .in{display:grid;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.3,1)}
.mo-clp.flip .in{transform:rotateY(180deg)}
.mo-clp .face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#fbfbfd;padding:20px 18px 24px;filter:drop-shadow(0 10px 12px rgba(80,60,110,.22));clip-path:polygon(0 6px,4% 0,8% 6px,12% 0,16% 6px,20% 0,24% 6px,28% 0,32% 6px,36% 0,40% 6px,44% 0,48% 6px,52% 0,56% 6px,60% 0,64% 6px,68% 0,72% 6px,76% 0,80% 6px,84% 0,88% 6px,92% 0,96% 6px,100% 0,100% calc(100% - 6px),96% 100%,92% calc(100% - 6px),88% 100%,84% calc(100% - 6px),80% 100%,76% calc(100% - 6px),72% 100%,68% calc(100% - 6px),64% 100%,60% calc(100% - 6px),56% 100%,52% calc(100% - 6px),48% 100%,44% calc(100% - 6px),40% 100%,36% calc(100% - 6px),32% 100%,28% calc(100% - 6px),24% 100%,20% calc(100% - 6px),16% 100%,12% calc(100% - 6px),8% 100%,4% calc(100% - 6px),0 100%)}
.mo-clp .back{transform:rotateY(180deg);background:#f6f5f9}
.mo-clp .mast{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:1px;color:#857b8c;border-bottom:3px double color-mix(in srgb,var(--c) 45%,#3b3540);padding-bottom:6px}
.mo-clp .lede{margin:12px 0 10px;font-size:19px;line-height:1.55;font-weight:700;overflow-wrap:anywhere}
.mo-clp .meta{display:flex;gap:10px;font-size:11.5px;color:#857b8c;border-top:1px solid rgba(59,53,64,.12);padding-top:8px}
.mo-clp .col2{font-size:11px;letter-spacing:3px;color:color-mix(in srgb,var(--c) 70%,#3b3540);border-bottom:1px solid rgba(59,53,64,.15);padding-bottom:6px;margin-bottom:6px;display:flex;justify-content:space-between}
.mo-clp .lt{display:flex;gap:8px;padding:6px 0;font-size:13px;line-height:1.6;border-bottom:1px dotted rgba(59,53,64,.15)}
.mo-clp .lt b{flex:none;font-weight:600}
.mo-clp .lt:last-child{border-bottom:none}
.mo-pw{position:relative;padding-top:24px;padding-bottom:48px;cursor:pointer;color:#3b3540}
.mo-pw .under{position:absolute;left:14px;right:14px;bottom:0;height:92px;background:#fff;border-radius:3px;box-shadow:0 6px 12px -8px rgba(80,60,110,.35);padding:52px 14px 10px;font-size:13px;color:#4a4350;display:flex;align-items:center;gap:8px}
.mo-pw .pi{position:relative;z-index:2;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,#fff) 0 20px,color-mix(in srgb,var(--c) 35%,#fff) 20px);padding:30px 18px 16px;box-shadow:0 10px 18px -12px rgba(80,60,110,.45);transform:rotate(-.8deg);transform-origin:0 0;transition:transform .55s cubic-bezier(.3,.7,.3,1.1),box-shadow .55s}
.mo-pw .pi::after{content:"";position:absolute;right:0;bottom:0;width:24px;height:24px;background:linear-gradient(315deg,var(--mm-paper) 50%,color-mix(in srgb,var(--c) 25%,#fff) 50%)}
.mo-pw.on .pi{transform:rotate(-5deg) translate(-2px,-22px);box-shadow:0 24px 30px -16px rgba(80,60,110,.5)}
.mo-pw .pi p{margin:0 0 10px;font-size:17px;line-height:1.7;font-weight:600;overflow-wrap:anywhere}
.mo-pw .pi small{display:flex;justify-content:space-between;font-size:11.5px;color:#857b8c}
.mo-lm{background:#fff;border-radius:10px;box-shadow:var(--mm-shadow);padding:22px 18px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:170px;cursor:pointer;color:#3b3540}
.mo-lm .tape{display:inline-block;min-height:34px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 45%,#fff),color-mix(in srgb,var(--c) 70%,#fff));color:color-mix(in srgb,var(--c) 25%,#2e3440);font-size:15px;font-weight:700;letter-spacing:4px;padding:6px 14px;border-radius:3px;text-shadow:0 1px 0 rgba(255,255,255,.75);box-shadow:0 2px 3px rgba(0,0,0,.12);transform:rotate(-1.5deg);white-space:nowrap;position:relative;max-width:100%;overflow:hidden}
.mo-lm .tape.t2{transform:rotate(1deg);margin-left:22px}
.mo-lm .tape.typing::after{content:"";position:absolute;right:-3px;top:6px;bottom:6px;width:2px;background:currentColor;animation:moBlink .6s steps(2) infinite}
@keyframes moBlink{50%{opacity:0}}
.mo-lm .ft{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:#857b8c;margin-top:auto}
/* ---- 朋友圈（有图）：拍立得 ---- */
.mm-obj .pd2{background:#fff;padding:10px 10px 14px;border-radius:3px;box-shadow:var(--mm-shadow);transform:rotate(-1.2deg);color:#3b3540;position:relative}
.mm-obj .pd2 .img{position:relative;aspect-ratio:4/3;border-radius:2px;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 60%,#fff) 0%,#e8c9cf 52%,#f3dcc9 56%,#a9b7cf 57%,#8d9ec0 100%);background-size:cover;background-position:center}
.mm-obj .pd2 .cap3{margin-top:10px;font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.mm-obj .pd2 .who{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px;color:#857b8c}
.mo-pfl{perspective:1200px;cursor:pointer}
.mo-pfl .in{display:grid;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.3,1)}
.mo-pfl.flip .in{transform:rotateY(180deg)}
.mo-pfl .pd2{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.mo-pfl .pd2.bk{transform:rotateY(180deg) rotate(1.2deg);background:linear-gradient(180deg,#fdfcfe,#f6f4f9)}
.mo-pfl .bk2{height:100%;display:flex;flex-direction:column;padding:8px 8px 4px}
.mo-pfl .stampd{align-self:flex-start;font-size:12px;letter-spacing:2px;color:color-mix(in srgb,var(--c) 40%,#c07a5a);opacity:.85}
.mo-pfl .capw{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;margin:0;padding:10px 6px;font-size:18px;line-height:1.7;font-weight:600;color:#3b3540}
.mo-pfl .cms{display:flex;flex-direction:column;gap:6px;border-top:1px solid color-mix(in srgb,var(--c) 30%,transparent);padding-top:10px}
.mo-pfl .cm2{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#5d5563}
.mo-ej{position:relative;padding-top:58px;cursor:pointer}
.mo-ej .cam{position:absolute;left:4%;right:4%;top:0;height:70px;z-index:3;border-radius:18px 18px 10px 10px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 40%,#fff),color-mix(in srgb,var(--c) 70%,#fff));box-shadow:inset 0 1px 0 #fff,inset 0 -3px 6px rgba(0,0,0,.08),0 10px 16px -10px rgba(60,50,90,.45)}
.mo-ej .lens{position:absolute;left:50%;top:10px;width:40px;height:40px;margin-left:-20px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#8a8aa0 0 4px,#2e2c3a 5px 12px,#55526a 13px 16px,#e9e6f0 17px)}
.mo-ej .flashw{position:absolute;right:16px;top:12px;width:22px;height:12px;border-radius:3px;background:linear-gradient(180deg,#fff,#e6e3ee)}
.mo-ej .slot{position:absolute;left:12%;right:12%;bottom:6px;height:5px;border-radius:3px;background:#3b3846}
.mo-ej .out{position:relative;overflow:hidden;margin:0 7%;padding:0 4px 18px}
.mo-ej.go .pd2{animation:moEject 1.8s cubic-bezier(.3,.6,.3,1) both}
.mo-ej.go .cam{animation:moCamFlash .5s}
@keyframes moEject{0%{transform:translateY(-102%)}70%{transform:translateY(0)}80%{transform:rotate(1.5deg)}90%{transform:rotate(-1deg)}100%{transform:none}}
@keyframes moCamFlash{0%{box-shadow:0 0 0 0 #fff}30%{box-shadow:0 0 40px 18px rgba(255,255,255,.95)}100%{box-shadow:inset 0 1px 0 #fff,0 10px 16px -10px rgba(60,50,90,.45)}}
.mo-ptl{perspective:900px;touch-action:none;cursor:pointer}
.mo-ptl .pd2{transition:transform .25s ease;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.mo-ptl .gloss{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) var(--gx,45%),transparent calc(var(--gx,45%) + 18%));mix-blend-mode:soft-light;opacity:.9}
.mo-ptl.sweep .gloss{animation:moSweep 1s ease}
@keyframes moSweep{from{background-position:-200px 0}to{background-position:200px 0}}

/* ---- 礼物：礼盒 / 吊牌 / 花纸包裹 ---- */
.mo-gb{--r:#f6eef2;position:relative;height:250px;display:flex;justify-content:center;align-items:flex-end;padding-bottom:14px;cursor:pointer;color:#3b3540}
.mo-gb .floor{position:absolute;left:18%;right:18%;bottom:6px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(60,50,90,.28),transparent)}
.mo-gb .box{position:relative;z-index:1;width:170px;height:118px;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 75%,#5d5468) 0,var(--c) 18%,color-mix(in srgb,var(--c) 80%,#fff) 55%,var(--c) 85%,color-mix(in srgb,var(--c) 80%,#5d5468));box-shadow:inset 0 -8px 12px -6px rgba(0,0,0,.15)}
.mo-gb .box::before,.mo-gb .lid::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:20px;margin-left:-10px;background:linear-gradient(90deg,color-mix(in srgb,var(--r) 80%,#ccc),var(--r) 40%,color-mix(in srgb,var(--r) 85%,#bbb));transition:opacity .3s}
.mo-gb .lid{position:absolute;left:50%;bottom:122px;width:186px;height:36px;margin-left:-93px;border-radius:6px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 60%,color-mix(in srgb,var(--c) 85%,#5d5468));box-shadow:0 6px 10px -6px rgba(0,0,0,.35);z-index:3;transition:transform .7s cubic-bezier(.3,.7,.3,1.1) .25s}
.mo-gb .bow{position:absolute;left:50%;bottom:150px;width:90px;height:40px;margin-left:-45px;z-index:4;transition:transform .35s,opacity .35s}
.mo-gb .bow i{position:absolute;top:4px;width:42px;height:28px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 70% 50%,color-mix(in srgb,var(--r) 70%,#c9c3d3) 20%,var(--r) 60%);box-shadow:inset 0 -3px 4px rgba(0,0,0,.08),0 2px 3px rgba(0,0,0,.12)}
.mo-gb .bow i:nth-child(1){left:2px;transform:rotate(-18deg)}.mo-gb .bow i:nth-child(2){right:2px;transform:rotate(18deg) scaleX(-1)}
.mo-gb .bow b{position:absolute;left:50%;top:12px;width:16px;height:16px;margin-left:-8px;border-radius:5px;background:var(--r);box-shadow:inset 0 -2px 3px rgba(0,0,0,.12)}
.mo-gb .item{position:absolute;left:50%;bottom:40px;width:150px;margin-left:-75px;z-index:2;background:#fff;border-radius:10px;padding:12px 12px 10px;text-align:center;box-shadow:0 10px 18px -10px rgba(60,50,90,.5);transform:translateY(40px) scale(.85);opacity:0;transition:transform .6s cubic-bezier(.3,.7,.3,1.2) .6s,opacity .3s .6s}
.mo-gb .item .art,.mo-pk .inner .art{height:50px;border-radius:8px;margin-bottom:8px;background:radial-gradient(circle at 35% 40%,#fff 0 6px,transparent 7px),radial-gradient(circle at 60% 35%,#fff 0 7px,transparent 8px),radial-gradient(circle at 48% 60%,#fff 0 8px,transparent 9px),linear-gradient(180deg,color-mix(in srgb,var(--c) 25%,#eef4ee),color-mix(in srgb,var(--c) 40%,#fff))}
.mo-gb .item b{display:block;font-size:14px}
.mo-gb .item small{font-size:11px;color:#857b8c}
.mo-gb.open .bow{transform:translateY(-10px) scale(.4);opacity:0}
.mo-gb.open .box::before,.mo-gb.open .lid::before{opacity:0}
.mo-gb.open .lid{transform:translate(96px,52px) rotate(10deg) scale(.88);z-index:0}
.mo-gb.open .item{transform:translateY(-70px);opacity:1}
.mo-tg{position:relative;padding:0 0 0 46px;perspective:1000px;cursor:pointer;color:#3b3540}
.mo-tg .str{position:absolute;left:0;top:50%;width:78px;height:70px;margin-top:-35px;z-index:3;overflow:visible;stroke:color-mix(in srgb,var(--c) 50%,#8a8496)}
.mo-tg .in{display:grid;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.3,1)}
.mo-tg.flip .in{transform:rotateY(180deg)}
.mo-tg .face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 30%,#fff),color-mix(in srgb,var(--c) 60%,#fff));padding:18px 18px 16px 46px;clip-path:polygon(28px 0,100% 0,100% 100%,28px 100%,0 50%);filter:drop-shadow(0 10px 12px rgba(60,70,90,.25));min-height:150px;position:relative}
.mo-tg .face::before{content:"";position:absolute;left:12px;top:50%;width:13px;height:13px;margin-top:-6.5px;border-radius:50%;background:var(--mm-paper);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 60%,#556)}
.mo-tg .bk{transform:rotateY(180deg);background:linear-gradient(160deg,#fff,color-mix(in srgb,var(--c) 15%,#fff))}
.mo-tg .k{font-size:10.5px;letter-spacing:2px;color:color-mix(in srgb,var(--c) 30%,#4a4350)}
.mo-tg .t{font-size:19px;font-weight:600;margin:6px 0}
.mo-tg .p{margin:0;font-size:12.5px;color:#5d5563;line-height:1.7}
.mo-tg .card2{font-size:15px;line-height:1.85;margin:4px 0 8px}
.mo-tg .sig{text-align:right;font-size:12.5px;color:#857b8c}
.mo-pk{position:relative;height:220px;perspective:900px;cursor:pointer;color:#3b3540}
.mo-pk .inner{position:absolute;inset:10px;border-radius:8px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:inset 0 0 0 1px rgba(110,90,130,.12)}
.mo-pk .inner .art{width:84px}
.mo-pk .inner b{font-size:15px;margin-top:6px}
.mo-pk .inner small{font-size:11.5px;color:#857b8c}
.mo-pk .fl{position:absolute;top:0;bottom:0;width:50%;background-color:color-mix(in srgb,var(--c) 45%,#fff);background-image:radial-gradient(circle at 25% 25%,rgba(255,255,255,.75) 0 3px,transparent 3.5px),radial-gradient(circle at 75% 75%,color-mix(in srgb,var(--c) 70%,#556) 0 2px,transparent 2.5px);background-size:22px 22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 10px 16px -10px rgba(60,70,90,.45);transition:transform .8s cubic-bezier(.4,.1,.3,1) .35s;z-index:2}
.mo-pk .fl.l{left:0;border-radius:8px 0 0 8px;transform-origin:0 50%}
.mo-pk .fl.r{right:0;border-radius:0 8px 8px 0;transform-origin:100% 50%;background-position:11px 0}
.mo-pk .tw{position:absolute;z-index:3;background:repeating-linear-gradient(45deg,#f4f1f6 0 3px,color-mix(in srgb,var(--c) 40%,#8a8496) 3px 5px);transition:opacity .3s,transform .4s}
.mo-pk .tw.v{left:50%;top:0;bottom:0;width:6px;margin-left:-3px}
.mo-pk .tw.h{top:50%;left:0;right:0;height:6px;margin-top:-3px}
.mo-pk .knot{position:absolute;left:50%;top:50%;z-index:4;width:30px;height:20px;margin:-10px 0 0 -15px;transition:opacity .3s,transform .4s}
.mo-pk .knot i{position:absolute;top:0;width:15px;height:14px;border:3px solid color-mix(in srgb,var(--c) 40%,#8a8496);border-radius:50%}
.mo-pk .knot i:first-child{left:0}.mo-pk .knot i:last-child{right:0}
.mo-pk .lbl{position:absolute;right:14px;bottom:14px;z-index:4;background:#fff;border-radius:4px;padding:5px 10px;font-size:11.5px;box-shadow:0 2px 4px rgba(0,0,0,.12);transform:rotate(-4deg);transition:opacity .3s}
.mo-pk.open .tw,.mo-pk.open .knot,.mo-pk.open .lbl{opacity:0;transform:scale(.8)}
.mo-pk.open .fl.l{transform:rotateY(76deg);filter:brightness(.92)}
.mo-pk.open .fl.r{transform:rotateY(-76deg);filter:brightness(.92)}

:is(.mo-envx,.mo-tri,.mo-nt,.mo-fold,.mo-fr,.mo-pcf,.mo-ema,.mo-jar,.mo-clp,.mo-pw,.mo-lm,.mo-pfl,.mo-ej,.mo-ptl,.mo-gb,.mo-tg,.mo-pk):focus-visible{outline:2px solid var(--mm-a);outline-offset:4px}
@media(prefers-reduced-motion:reduce){:is(.mo-envx,.mo-tri,.mo-pcf,.mo-jar,.mo-clp,.mo-pw,.mo-pfl,.mo-gb,.mo-tg,.mo-pk),:is(.mo-envx,.mo-tri,.mo-pcf,.mo-jar,.mo-clp,.mo-pw,.mo-pfl,.mo-gb,.mo-tg,.mo-pk) *{transition:none!important}.mo-nt.on,.mo-nt.on .tape,.mo-fr.on .sq,.mo-fr.on .mag,.mo-fr.on .sq::after,.mo-ema.on .sw,.mo-ej.go .pd2,.mo-ej.go .cam,.mo-ptl.sweep .gloss{animation:none!important}}