html, body, [class*="wrapper"], [class*="tagmango"], [class*="page"], [class*="content"] {
  margin:0 !important; padding:0 !important;
  background:#0a0a0f !important; color:#e5e7eb !important;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  line-height:1.6 !important;
}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{overflow-x:hidden;max-width:100vw;}

#mpf, #mpf *, #mpf *::before, #mpf *::after{box-sizing:border-box;margin:0;padding:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
#mpf{color:#e5e7eb;background:#0a0a0f;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;}
#mpf a{text-decoration:none;}
#mpf ul,#mpf ol{list-style:none;}
#mpf .mpf-wrap{max-width:780px;margin:0 auto;padding:0 20px;}

/* ── top bar ── */
#mpf .mpf-top{padding:16px 0;border-bottom:1px solid rgba(148,163,184,.12);background:rgba(10,10,15,.9);}
#mpf .mpf-top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;}
#mpf .mpf-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:14.5px;color:#fff !important;}
#mpf .mpf-brand-mark{width:28px;height:28px;border-radius:7px;
  background:linear-gradient(135deg,#6366f1,#22d3ee) !important;color:#fff !important;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;}
#mpf .mpf-top-note{font-size:12px;color:#7c88a0 !important;font-weight:600;}

/* ── hero ── */
#mpf .mpf-hero{padding:44px 0 26px;text-align:center;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,#171432 0%,#0a0a0f 62%) !important;}
#mpf .mpf-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
  background:rgba(99,102,241,.13) !important;border:1px solid rgba(99,102,241,.4) !important;
  color:#a5b4fc !important;font-size:10.5px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:18px;}
#mpf .mpf-chip .mpf-dot{width:7px;height:7px;border-radius:50%;background:#a5b4fc !important;box-shadow:0 0 10px #a5b4fc;}
#mpf .mpf-h1{font-size:clamp(25px,5vw,38px);font-weight:900;letter-spacing:-.03em;line-height:1.15;color:#fff !important;margin-bottom:14px;}
#mpf .mpf-h1 span{background:linear-gradient(100deg,#818cf8,#22d3ee) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;}
#mpf .mpf-sub{font-size:15px;line-height:1.72;color:#9ca3af !important;max-width:560px;margin:0 auto;}
#mpf .mpf-sub strong{color:#e5e7eb !important;font-weight:700;}

/* ── progress ── */
#mpf .mpf-prog-wrap{padding:22px 0 0;}
#mpf .mpf-prog-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;
  font-size:11.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:#7c88a0 !important;}
#mpf .mpf-prog{height:5px;border-radius:99px;background:rgba(148,163,184,.14) !important;overflow:hidden;}
#mpf .mpf-prog-bar{height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,#6366f1,#22d3ee) !important;transition:width .35s cubic-bezier(.4,0,.2,1);}

/* ── question card ── */
#mpf .mpf-stage{padding:26px 0 60px;}
#mpf .mpf-q{display:none;}
#mpf .mpf-q.on{display:block;animation:mpfIn .32s ease;}
@keyframes mpfIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
#mpf .mpf-q-n{font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#818cf8 !important;margin-bottom:9px;}
#mpf .mpf-q-t{font-size:clamp(19px,3.4vw,25px);font-weight:800;letter-spacing:-.022em;line-height:1.3;color:#fff !important;margin-bottom:7px;}
#mpf .mpf-q-h{font-size:13.5px;line-height:1.65;color:#7c88a0 !important;margin-bottom:20px;}
#mpf .mpf-opts{display:grid;gap:10px;}
#mpf .mpf-opt{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;cursor:pointer;
  padding:16px 18px;border-radius:13px;
  background:#12121b !important;border:1px solid rgba(148,163,184,.14) !important;
  transition:border-color .18s,background .18s,transform .12s;}
#mpf .mpf-opt:hover{border-color:rgba(99,102,241,.5) !important;background:#161624 !important;transform:translateY(-1px);}
#mpf .mpf-opt.sel{border-color:#6366f1 !important;background:rgba(99,102,241,.11) !important;}
#mpf .mpf-opt-k{flex:0 0 auto;width:24px;height:24px;border-radius:7px;
  background:rgba(148,163,184,.13) !important;color:#9ca3af !important;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:900;}
#mpf .mpf-opt.sel .mpf-opt-k{background:linear-gradient(135deg,#6366f1,#4f46e5) !important;color:#fff !important;}
#mpf .mpf-opt-b{flex:1 1 auto;}
#mpf .mpf-opt-t{font-size:14.5px;font-weight:700;color:#e5e7eb !important;line-height:1.45;}
#mpf .mpf-opt-d{font-size:12.5px;color:#7c88a0 !important;line-height:1.55;margin-top:3px;}

#mpf .mpf-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;}
#mpf .mpf-back{background:none;border:none;cursor:pointer;font-size:13.5px;font-weight:700;color:#7c88a0 !important;padding:8px 0;}
#mpf .mpf-back:hover{color:#a5b4fc !important;}
#mpf .mpf-back[hidden]{visibility:hidden;}
#mpf .mpf-skip{font-size:12.5px;color:#4b5563 !important;}

/* ── result ── */
#mpf .mpf-res{display:none;}
#mpf .mpf-res.on{display:block;animation:mpfIn .4s ease;}
#mpf .mpf-res-lbl{font-size:11px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;color:#7c88a0 !important;margin-bottom:12px;text-align:center;}
#mpf .mpf-card{border-radius:19px;padding:30px 32px;margin-bottom:16px;position:relative;overflow:hidden;}
#mpf .mpf-card-eyebrow{font-size:10.5px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:11px;}
#mpf .mpf-card-t{font-size:clamp(21px,3.8vw,28px);font-weight:900;letter-spacing:-.028em;line-height:1.2;color:#fff !important;margin-bottom:11px;}
#mpf .mpf-card-p{font-size:14.5px;line-height:1.75;color:#c6d0e2 !important;margin-bottom:18px;}
#mpf .mpf-card-p strong{color:#fff !important;font-weight:800;}
#mpf .mpf-why{padding:14px 17px;border-radius:12px;margin-bottom:19px;
  background:rgba(0,0,0,.26) !important;border:1px solid rgba(255,255,255,.09) !important;}
#mpf .mpf-why-l{font-size:10px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:#9ca3af !important;margin-bottom:6px;}
#mpf .mpf-why-p{font-size:13.2px;line-height:1.68;color:#c6d0e2 !important;}
#mpf .mpf-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:19px;}
#mpf .mpf-meta span{font-size:11.5px;font-weight:700;color:#e5e7eb !important;
  background:rgba(255,255,255,.09) !important;border:1px solid rgba(255,255,255,.13) !important;
  padding:5px 11px;border-radius:99px;}
#mpf .mpf-acts{display:flex;flex-wrap:wrap;gap:10px;}
#mpf .mpf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:11px;font-size:14.5px;font-weight:800;letter-spacing:-.006em;
  border:none !important;cursor:pointer;transition:transform .16s,box-shadow .16s;}
#mpf .mpf-btn:hover{transform:translateY(-2px);}
#mpf .mpf-btn-w{background:#0d1a12 !important;color:#4ade80 !important;border:1px solid rgba(74,222,128,.42) !important;}
#mpf .mpf-btn-w:hover{background:#102417 !important;color:#4ade80 !important;}

/* alt + restart */
#mpf .mpf-alt{background:#12121b !important;border:1px solid rgba(148,163,184,.14) !important;
  border-radius:15px;padding:20px 22px;margin-bottom:14px;}
#mpf .mpf-alt-l{font-size:10px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:#7c88a0 !important;margin-bottom:9px;}
#mpf .mpf-alt-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
#mpf .mpf-alt-t{font-size:15px;font-weight:800;color:#fff !important;}
#mpf .mpf-alt-d{font-size:12.8px;color:#7c88a0 !important;line-height:1.6;margin-top:3px;}
#mpf .mpf-alt-a{font-size:13px;font-weight:800;color:#a5b4fc !important;white-space:nowrap;}
#mpf .mpf-alt-a:hover{color:#c7d2fe !important;}

#mpf .mpf-honest{padding:16px 19px;border-radius:13px;margin-bottom:16px;
  background:rgba(227,192,122,.07) !important;border:1px solid rgba(227,192,122,.24) !important;}
#mpf .mpf-honest-l{font-size:10px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:#e3c07a !important;margin-bottom:6px;}
#mpf .mpf-honest-p{font-size:13.2px;line-height:1.7;color:#a8b3c7 !important;}

#mpf .mpf-restart{text-align:center;margin-top:24px;}
#mpf .mpf-restart button{background:none;border:none;cursor:pointer;font-size:13px;font-weight:700;
  color:#7c88a0 !important;border-bottom:1px dashed rgba(124,136,160,.5);padding-bottom:2px;}
#mpf .mpf-restart button:hover{color:#a5b4fc !important;}

#mpf .mpf-foot{padding:26px 0 40px;text-align:center;border-top:1px solid rgba(148,163,184,.1);margin-top:20px;}
#mpf .mpf-foot p{font-size:12px;color:#4b5563 !important;line-height:1.7;}
#mpf .mpf-foot a{color:#7c88a0 !important;}
#mpf .mpf-loading{font-size:14.5px;color:#7c88a0 !important;padding:28px 0;text-align:center;font-weight:600;}

@media(max-width:560px){
  #mpf .mpf-card{padding:24px 20px;}
  #mpf .mpf-alt{padding:17px 18px;}
  #mpf .mpf-opt{padding:14px 15px;gap:11px;}
  #mpf .mpf-acts{flex-direction:column;}
  #mpf .mpf-btn{width:100%;}
  #mpf .mpf-alt-row{flex-direction:column;align-items:flex-start;gap:8px;}
}