/* ============================================================
   MiMi — public page (profile.php) + the wizard's live preview.
   Everything is scoped under .mp so the preview can reuse it.
   --accent / --on-accent are set inline per page.
   ============================================================ */
.mp{
  /* Defaults = the "Lilac" preset. Real pages get these from design_attrs(). */
  --page-bg:linear-gradient(180deg,#F4EEFF 0%,#FFFFFF 100%); --page-base:#F4EEFF;
  --ink:#16121F; --muted:rgba(22,18,31,.66); --card:rgba(255,255,255,.72); --line:rgba(22,18,31,.12);
  --accent:#8731E8; --on-accent:#FFFFFF;
  --head-font:"Bricolage Grotesque",system-ui,sans-serif; --head-weight:800; --head-scale:1;
  --body-font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --btn-radius:14px;
  position:relative;isolation:isolate;
  background:var(--page-base);
  color:var(--ink);
  font-family:var(--body-font);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* the background sits on its own layer so it stays put while the page scrolls */
.mp::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--page-bg);pointer-events:none}
.mp[data-blur="1"]::before{filter:blur(18px);transform:scale(1.08)}
.mp[data-shape="square"]{--btn-radius:6px}
.mp[data-shape="pill"]{--btn-radius:999px}

.mp__inner{max-width:580px;margin:0 auto;padding:56px 20px 40px;text-align:center}

.mp__avatar{
  width:96px;height:96px;border-radius:50%;margin:0 auto 18px;
  display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);
  font-family:var(--head-font);font-weight:var(--head-weight);font-size:2.4rem;
  box-shadow:0 0 0 4px var(--card),0 10px 30px rgba(0,0,0,.12);
}
.mp__name,.mp .mp__name{
  font-family:var(--head-font);font-weight:var(--head-weight);
  font-size:calc(1.7rem * var(--head-scale));letter-spacing:-.02em;line-height:1.15;margin:0;word-wrap:break-word;
}
.mp__handle{font-family:"DM Mono",ui-monospace,monospace;font-size:1rem;margin:10px auto 0;padding:7px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);display:inline-block;max-width:100%;overflow-wrap:anywhere}
.mp__title{color:var(--muted);font-weight:600;margin:8px 0 0;font-size:1rem}
.mp__title:empty,.mp__bio:empty{display:none}
.mp__bio{color:var(--ink);opacity:.86;margin:14px auto 0;max-width:46ch;line-height:1.6;white-space:pre-line;word-wrap:break-word}

.mp__links{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:12px}
.mp__link{
  display:block;padding:16px 20px;border-radius:var(--btn-radius);border:2px solid transparent;
  background:var(--accent);color:var(--on-accent);
  font-weight:700;font-size:1rem;text-decoration:none;line-height:1.3;
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
  word-wrap:break-word;
}
a.mp__link:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.16);filter:brightness(1.05)}
a.mp__link:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mp__header{
  font-family:"DM Mono",ui-monospace,monospace;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:14px 0 2px;
}
.mp__empty{color:var(--muted);font-size:.95rem;margin-top:26px}

.mp__foot{margin:44px 0 0;display:flex;justify-content:center}
.mp__foot a,.mp__foot span{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:.85rem;
  color:var(--ink);opacity:.7;text-decoration:none;
  padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);
}
.mp__foot a:hover{opacity:1}

/* ---- preview mode (inside the wizard's phone) ---- */
.mp--preview{min-height:100%;overflow:hidden}
.mp--preview::before{position:absolute}
.mp--preview[data-shape="rounded"]{--btn-radius:11px}
.mp--preview .mp__inner{padding:42px 16px 26px}
.mp--preview .mp__avatar{width:64px;height:64px;font-size:1.6rem;margin-bottom:12px}
.mp--preview .mp__name{font-size:calc(1.15rem * var(--head-scale))}
.mp--preview .mp__title{font-size:.8rem}
.mp--preview .mp__bio{font-size:.78rem;margin-top:10px}
.mp--preview .mp__links{margin-top:18px;gap:8px}
.mp--preview .mp__link{padding:10px 12px;font-size:.8rem}
.mp--preview .mp__foot{margin-top:26px}

/* ---- owner bar (only the page owner sees it) ---- */
.owner-bar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;
  padding:10px 16px;background:#1A1030;color:#F4EEFF;
  font-family:"Manrope",system-ui,sans-serif;font-size:.88rem;
}
.owner-bar__state{display:flex;align-items:center;gap:8px;font-weight:600}
.owner-bar__dot{width:8px;height:8px;border-radius:50%;background:#27C281}
.owner-bar__dot--draft{background:#FFC24A}
.owner-bar__actions{display:flex;gap:8px;flex-wrap:wrap}
.owner-bar a,.owner-bar button{
  font:inherit;font-weight:700;color:#1A1030;background:#fff;border:0;cursor:pointer;
  padding:7px 14px;border-radius:999px;text-decoration:none;
}
.owner-bar a.is-quiet,.owner-bar button.is-quiet{background:transparent;color:#F4EEFF;border:1px solid rgba(244,238,255,.3)}
.owner-bar a:focus-visible,.owner-bar button:focus-visible{outline:3px solid #FFC24A;outline-offset:2px}

.owner-bar__short{display:none}
.owner-bar__signout{display:inline-flex;align-items:center;gap:6px}
.owner-bar__signout svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:520px){
  .owner-bar{flex-wrap:nowrap;padding:8px 10px;gap:8px;font-size:.8rem}
  .owner-bar__long{display:none}
  .owner-bar__short{display:inline}
  .owner-bar__actions{flex-wrap:nowrap;gap:5px}
  .owner-bar a,.owner-bar button{padding:6px 11px;white-space:nowrap}
  .owner-bar__signout{padding:6px 8px}
  .owner-bar__signout span{display:none}
  .live-banner{font-size:.88rem;padding:10px 12px}
}

/* ---- "You're live" strip (owner only, just after publishing) ---- */
.live-banner{
  display:flex;align-items:center;justify-content:center;gap:12px 18px;flex-wrap:wrap;
  padding:12px 16px;background:#E4F7EC;color:#14613B;border-bottom:1px solid #B7E6C9;
  font-family:"Manrope",system-ui,sans-serif;font-size:.95rem;font-weight:600;text-align:center;
  animation:liveIn .4s ease both;
}
.live-banner strong{font-weight:800;word-break:break-all}
.live-banner__actions{display:inline-flex;align-items:center;gap:8px}
.live-banner__copy{font:inherit;font-weight:700;font-size:.88rem;padding:7px 16px;border-radius:999px;border:0;background:#1B7A4B;color:#fff;cursor:pointer}
.live-banner__copy:hover{background:#14613B}
.live-banner__close{font:inherit;font-size:1.3rem;line-height:1;width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:#14613B;cursor:pointer}
.live-banner__close:hover{background:rgba(20,97,59,.1)}
.live-banner button:focus-visible{outline:3px solid #FFC24A;outline-offset:2px}
.live-banner--leap{background:#FFE7BF;color:#5A3800;border-bottom-color:#F5C878}
.live-banner--leap .live-banner__copy{background:#7A4A00;text-decoration:none;display:inline-block}
.live-banner.is-leaving{animation:liveOut .25s ease both}
@keyframes liveIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes liveOut{to{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.live-banner,.live-banner--leap{background:#FFE7BF;color:#5A3800;border-bottom-color:#F5C878}
.live-banner--leap .live-banner__copy{background:#7A4A00;text-decoration:none;display:inline-block}
.live-banner.is-leaving{animation:none}}

@media (prefers-reduced-motion:reduce){ .mp__link{transition:none} }

/* ---- photo avatar ---- */
.mp__avatar--img{overflow:hidden;background:var(--card);font-size:0;color:transparent}
.mp__avatar--img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

/* ---- social icons row ---- */
.mp__socials{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.mp__socials:empty{display:none}
.mp__social{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink);background:var(--card);border:1px solid var(--line);
  text-decoration:none;transition:transform .15s ease,color .15s ease,border-color .15s ease;
}
a.mp__social:hover{transform:translateY(-2px);color:var(--accent);border-color:var(--accent)}
a.mp__social:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.mp--preview .mp__socials{margin-top:12px;gap:6px}
.mp--preview .mp__social{width:30px;height:30px}
.mp--preview .mp__social svg{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){ .mp__social{transition:none} }

/* ---- avatar shapes ---- */
.mp[data-avatar="rounded"] .mp__avatar,.mp[data-avatar="rounded"] .mp__avatar img{border-radius:28%}
.mp[data-avatar="square"] .mp__avatar,.mp[data-avatar="square"] .mp__avatar img{border-radius:10px}

/* ---- button styles (data-btn) ---- */
.mp[data-btn="soft"] .mp__link{background:var(--card);color:var(--ink);box-shadow:none}
@supports (background:color-mix(in srgb,red,blue)){
  .mp[data-btn="soft"] .mp__link{background:color-mix(in srgb,var(--accent) 22%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
}
.mp[data-btn="outline"] .mp__link{background:transparent;color:var(--ink);box-shadow:none;border-color:var(--accent)}
.mp[data-btn="outline"] a.mp__link:hover{background:var(--accent);color:var(--on-accent);filter:none}
.mp[data-btn="glass"] .mp__link{background:var(--card);color:var(--ink);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(0,0,0,.10)}
.mp[data-btn="hard"] .mp__link{border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.mp[data-btn="hard"] a.mp__link:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);filter:none}
.mp[data-btn="hard"] .mp__social{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mp[data-btn="hard"] .mp__avatar{box-shadow:0 0 0 3px var(--ink),5px 5px 0 3px var(--ink)}
.mp--preview[data-btn="hard"] .mp__link{box-shadow:3px 3px 0 var(--ink)}

/* ---- tiny theme thumbnails (theme pickers) ---- */
.mp--thumb{min-height:0;height:100%;overflow:hidden;pointer-events:none}
.mp--thumb::before{position:absolute}
.mp--thumb[data-blur="1"]::before{filter:blur(6px)}
.mp--thumb .mp__inner{padding:16px 12px 10px}
.mp--thumb .mp__avatar{width:26px;height:26px;font-size:.7rem;margin-bottom:6px;box-shadow:0 0 0 2px var(--card)}
.mp--thumb[data-btn="hard"] .mp__avatar{box-shadow:0 0 0 1.5px var(--ink),2px 2px 0 1.5px var(--ink)}
.mp--thumb .mp__name{font-size:calc(.72rem * var(--head-scale));letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp--thumb .mp__links{margin-top:8px;gap:5px}
.mp--thumb .mp__link{padding:0;height:13px;font-size:0;box-shadow:none;border-width:1.5px}
.mp--thumb[data-btn="hard"] .mp__link{box-shadow:2px 2px 0 var(--ink)}
.mp--thumb[data-btn="glass"] .mp__link{-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---- click-to-load players ---- */
.mp__embed{list-style:none}
.mp__embed-face{position:relative;display:flex;align-items:flex-end;gap:12px;text-align:left;text-decoration:none;color:#fff;
  border-radius:var(--btn-radius);overflow:hidden;background:linear-gradient(135deg,#1A1030,#3B1F70);
  box-shadow:0 6px 20px rgba(0,0,0,.16);transition:transform .15s ease,box-shadow .15s ease}
.mp__embed-face:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.mp__embed-face:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mp[data-shape="pill"] .mp__embed-face,.mp[data-shape="pill"] .mp__embed-frame{border-radius:22px}
.mp__embed--video .mp__embed-face{aspect-ratio:16/9;padding:14px}
.mp__embed--vertical .mp__embed-face{aspect-ratio:9/14;max-width:320px;margin:0 auto;padding:14px}
.mp__embed--audio .mp__embed-face{min-height:72px;padding:12px 14px;align-items:center}
.mp__embed[data-provider="spotify"] .mp__embed-face{background:linear-gradient(135deg,#121212,#1DB954)}
.mp__embed[data-provider="soundcloud"] .mp__embed-face{background:linear-gradient(135deg,#FF5500,#FF8800)}
.mp__embed[data-provider="apple"] .mp__embed-face{background:linear-gradient(135deg,#FA2D48,#A033FF)}
.mp__embed[data-provider="twitch"] .mp__embed-face{background:linear-gradient(135deg,#3A1C78,#9146FF)}
.mp__embed[data-provider="tiktok"] .mp__embed-face{background:linear-gradient(160deg,#111,#25F4EE 140%),#111}
.mp__embed[data-provider="vimeo"] .mp__embed-face{background:linear-gradient(135deg,#0D2A3A,#17D5FF)}
.mp__embed-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.mp__embed-face::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.62));pointer-events:none}
.mp__embed--audio .mp__embed-face::after{display:none}
.mp__embed-play{position:relative;z-index:1;flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:#111;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.mp__embed-play svg{fill:currentColor;margin-left:2px}
.mp__embed--video .mp__embed-play,.mp__embed--vertical .mp__embed-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px}
.mp__embed-meta{position:relative;z-index:1;display:grid;gap:2px;min-width:0}
.mp__embed-provider{font-family:"DM Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.mp__embed-title{font-weight:700;font-size:1rem;line-height:1.25;overflow-wrap:anywhere}
.mp__embed-frame{display:block;width:100%;border:0;border-radius:var(--btn-radius);background:#000}
.mp[data-shape="square"] .mp__embed-frame,.mp[data-shape="square"] .mp__embed-face{border-radius:8px}
.mp__embed--video .mp__embed-frame{aspect-ratio:16/9;height:auto}
.mp__embed--vertical .mp__embed-frame{aspect-ratio:9/16;max-width:340px;margin:0 auto;height:auto}
.mp__embed--audio .mp__embed-frame{background:transparent}
.mp--preview .mp__embed-face{padding:10px}
.mp--preview .mp__embed-play{width:34px;height:34px}
.mp--preview .mp__embed--video .mp__embed-play{width:42px;height:42px}
.mp--preview .mp__embed-title{font-size:.78rem}
.mp--preview .mp__embed--audio .mp__embed-face{min-height:60px}
@media (prefers-reduced-motion:reduce){.mp__embed-face{transition:none}}

/* ---- email sign-up block ---- */
.mp__subscribe{list-style:none}
.mp__sub{text-align:left;padding:18px;border-radius:min(var(--btn-radius),24px);
  background:var(--card);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.mp__sub-title{margin:0;font-family:var(--head-font);font-weight:var(--head-weight);font-size:calc(1.12rem * var(--head-scale));line-height:1.2}
.mp__sub-blurb{margin:4px 0 0;color:var(--muted);font-size:.92rem}
.mp__sub-fields{display:grid;gap:8px;margin-top:12px}
.mp__sub-input{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;padding:13px 14px;border-radius:min(var(--btn-radius),14px);
  border:1.5px solid var(--line);background:rgba(255,255,255,.92);color:#16121F}
.mp__sub-input:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:transparent}
.mp__sub-btn{width:100%;font:inherit;font-weight:700;cursor:pointer;text-align:center}
.mp__sub-btn:disabled{opacity:.7;cursor:progress}
.mp__sub-legal{margin:10px 0 0;font-size:.74rem;color:var(--muted);line-height:1.4}
.mp__sub-msg{margin:8px 0 0;font-weight:700;font-size:.92rem}
.mp__sub-msg:empty{display:none}
.mp__sub-msg.is-bad{color:#E5484D}
.mp[data-dark="1"] .mp__sub-msg.is-bad{color:#FFB4A8}
.mp__sub.is-done .mp__sub-fields{opacity:.5}
.mp__sub-sr,.mp__hp{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mp--preview .mp__sub{padding:12px}
.mp--preview .mp__sub-title{font-size:.86rem}
.mp--preview .mp__sub-blurb,.mp--preview .mp__sub-legal{font-size:.66rem}
.mp--preview .mp__sub-input{padding:8px 10px;font-size:.72rem}

/* ---- tip jar + digital products ---- */
.mp__pay{list-style:none}
.mp__payform{text-align:left;padding:18px;border-radius:min(var(--btn-radius),24px);background:var(--card);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.mp__amounts{border:0;margin:12px 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px}
.mp__amount{position:relative;display:block}
.mp__amount input[type=radio]{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.mp__amount span,.mp__amount--custom input{display:block;text-align:center;padding:11px 6px;border-radius:min(var(--btn-radius),14px);
  border:2px solid var(--line);font-weight:800;font-size:1rem;background:transparent;color:var(--ink)}
.mp__amount input[type=radio]:checked + span{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.mp__amount input[type=radio]:focus-visible + span{outline:3px solid var(--ink);outline-offset:2px}
.mp__amount--custom input{width:100%;box-sizing:border-box;font:inherit;font-weight:800;background:rgba(255,255,255,.9);color:#16121F}
.mp__amount--custom input:focus{outline:3px solid var(--accent);outline-offset:1px}
.mp__prod{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.mp__prod-icon{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent)}
.mp__prod-icon svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mp__prod-text{display:grid;gap:2px;min-width:0}
.mp__prod-text .mp__sub-blurb{margin:0}
.mp__owner-note{list-style:none;font-size:.82rem;padding:10px 14px;border-radius:12px;border:1.5px dashed var(--line);color:var(--muted)}
.mp__owner-note a{color:inherit;font-weight:700}

/* ---- Rainbow buttons: each button a Pride colour ---- */
.mp[data-btn="rainbow"] .mp__link{box-shadow:0 4px 14px rgba(0,0,0,.12);color:#fff}
.mp[data-btn="rainbow"] .mp__links > :nth-child(6n+1) .mp__link,.mp[data-btn="rainbow"] .mp__links > .mp__link:nth-child(6n+1){background:#E40303}
.mp[data-btn="rainbow"] .mp__links > :nth-child(6n+2) .mp__link,.mp[data-btn="rainbow"] .mp__links > .mp__link:nth-child(6n+2){background:#FF8C00}
.mp[data-btn="rainbow"] .mp__links > :nth-child(6n+3) .mp__link,.mp[data-btn="rainbow"] .mp__links > .mp__link:nth-child(6n+3){background:#FFED00;color:#16121F}
.mp[data-btn="rainbow"] .mp__links > :nth-child(6n+4) .mp__link,.mp[data-btn="rainbow"] .mp__links > .mp__link:nth-child(6n+4){background:#008026}
.mp[data-btn="rainbow"] .mp__links > :nth-child(6n+5) .mp__link,.mp[data-btn="rainbow"] .mp__links > .mp__link:nth-child(6n+5){background:#24408E}
.mp[data-btn="rainbow"] .mp__links > :nth-child(6n+6) .mp__link,.mp[data-btn="rainbow"] .mp__links > .mp__link:nth-child(6n+6){background:#732982}
.mp[data-btn="rainbow"] .mp__sub-btn{background:linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#24408E,#732982);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.ds-sample.mp[data-btn="rainbow"] .mp__link{background:linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#24408E,#732982);text-shadow:0 1px 2px rgba(0,0,0,.4)}

/* ---- "Make it stand out" link effects: a short burst every few seconds ---- */
.mp__fx .mp__link{animation-duration:4s;animation-iteration-count:infinite;animation-delay:1.2s;will-change:transform}
.mp__fx--shake  .mp__link{animation-name:mpShake}
.mp__fx--wiggle .mp__link{animation-name:mpWiggle}
.mp__fx--bounce .mp__link{animation-name:mpBounce}
.mp__fx--pulse  .mp__link{animation-name:mpPulse}
.mp__fx--glow   .mp__link{animation-name:mpGlow;animation-duration:2.6s}
@keyframes mpShake{0%,82%,100%{transform:translateX(0)}84%{transform:translateX(-6px)}86%{transform:translateX(6px)}88%{transform:translateX(-5px)}90%{transform:translateX(5px)}92%{transform:translateX(-2px)}94%{transform:translateX(0)}}
@keyframes mpWiggle{0%,80%,100%{transform:rotate(0)}83%{transform:rotate(-3deg)}86%{transform:rotate(3deg)}89%{transform:rotate(-2deg)}92%{transform:rotate(1deg)}95%{transform:rotate(0)}}
@keyframes mpBounce{0%,78%,100%{transform:translateY(0)}84%{transform:translateY(-10px)}90%{transform:translateY(0)}94%{transform:translateY(-4px)}}
@keyframes mpPulse{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.05)}90%{transform:scale(1)}}
@keyframes mpGlow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent),0 4px 14px rgba(0,0,0,.10)}
  50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 35%,transparent),0 0 26px 4px color-mix(in srgb,var(--accent) 55%,transparent)}}
.mp__fx .mp__link:hover,.mp__fx .mp__link:focus-visible{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mp__fx .mp__link{animation:none !important}}

/* ---------- Share button + sheet ---------- */
.mp-share-btn{position:absolute;top:16px;right:16px;z-index:5;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 4px 16px rgba(0,0,0,.08);transition:transform .15s}
.mp-share-btn[hidden]{display:none}
.mp-share-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mp-share-btn:hover{transform:scale(1.06)}
.mp-share-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mp-share{border:0;padding:0;background:transparent;max-width:min(520px,calc(100vw - 24px));width:100%;color:#16121F;font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif}
.mp-share::backdrop{background:rgba(10,8,16,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mp-share__box{background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.mp-share__top{position:relative;padding:20px 56px 12px;text-align:center}
.mp-share__title{margin:0;font-size:1.05rem;font-weight:700}
.mp-share__x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:#16121F}
.mp-share__x svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mp-share__x:hover,.mp-share__x:focus-visible{background:#F2F0F6;outline:none}
.mp-share__card{margin:6px 24px 0;padding:30px 20px 26px;border-radius:22px;text-align:center;background:var(--page-bg);background-color:var(--page-base);background-size:cover;color:var(--ink);display:grid;justify-items:center;gap:4px}
.mp-share__pic{width:104px;height:104px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.9);box-shadow:0 6px 18px rgba(0,0,0,.15);margin-bottom:10px}
.mp-share__pic--initial{display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-family:var(--head-font);font-weight:var(--head-weight);font-size:2.6rem;box-sizing:border-box}
.mp-share__name{margin:0;font-family:var(--head-font);font-weight:var(--head-weight);font-size:1.45rem;letter-spacing:-.01em;line-height:1.2;overflow-wrap:anywhere}
.mp-share__url{margin:0;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.95rem;color:var(--muted)}
.mp-share__mark{width:22px;height:15px;background:currentColor;-webkit-mask:url(/assets/images/brand/mimi-mark.svg) center/contain no-repeat;mask:url(/assets/images/brand/mimi-mark.svg) center/contain no-repeat}
.mp-share__row{list-style:none;margin:0;padding:22px 20px 20px;display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.mp-share__row li[hidden]{display:none}
.mp-share__t{flex:none;width:76px;display:grid;justify-items:center;gap:8px;text-decoration:none;color:#16121F;font:inherit;background:none;border:0;padding:4px 0;cursor:pointer;scroll-snap-align:start}
.mp-share__ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--b);color:var(--f);transition:transform .15s}
.mp-share__t:hover .mp-share__ico,.mp-share__t:focus-visible .mp-share__ico{transform:scale(1.07)}
.mp-share__t:focus-visible{outline:none}
.mp-share__t:focus-visible .mp-share__ico{box-shadow:0 0 0 3px #fff,0 0 0 5px #8731E8}
.mp-share__lbl{font-size:.78rem;font-weight:600;white-space:nowrap}
.mp-share__join{border-top:1px solid #ECE9F2;padding:20px 24px 24px}
.mp-share__join-title{margin:0;font-weight:800;font-size:1.02rem}
.mp-share__join-text{margin:4px 0 16px;font-size:.88rem;color:#645C7C}
.mp-share__join-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mp-share__b{display:block;text-align:center;text-decoration:none;font-weight:800;font-size:.95rem;padding:14px 12px;border-radius:999px;border:1.5px solid #DAD6E3;color:#16121F;background:#fff}
.mp-share__b--dark{background:#16121F;border-color:#16121F;color:#fff}
.mp-share__b:hover{filter:brightness(.95)}
.mp-share[open]{animation:mpShareIn .22s cubic-bezier(.2,.9,.3,1.1)}
@keyframes mpShareIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:480px){
  .mp-share{margin:auto auto 0;max-width:100vw;width:100vw}
  .mp-share__box{border-radius:24px 24px 0 0}
  .mp-share__card{margin:6px 16px 0}
  .mp-share__join{padding:18px 16px calc(20px + env(safe-area-inset-bottom))}
  .mp-share__row{padding:20px 12px 16px}
}
@media (prefers-reduced-motion:reduce){.mp-share[open]{animation:none}.mp-share-btn,.mp-share__ico{transition:none}}