#mf-intro{border:0;border-radius:24px;padding:0;width:min(92vw,520px);max-height:90dvh;color:#17304c;background:#fff;box-shadow:0 24px 90px #10234540}#mf-intro::backdrop{background:#12253b99;backdrop-filter:blur(5px)}.intro-top{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 0}.intro-tag{font-size:12px;color:#2563eb;background:#eff6ff;border-radius:20px;padding:7px 12px;font-weight:700}#mf-intro button{font:inherit;cursor:pointer}.intro-skip{border:0;background:transparent;color:#475569;padding:10px}.intro-pages{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}.intro-pages::-webkit-scrollbar{display:none}.intro-page{flex:0 0 100%;box-sizing:border-box;scroll-snap-align:start;text-align:center;padding:28px 30px 18px}.intro-icon{display:grid;place-items:center;font-size:46px;width:100px;height:100px;border-radius:28px;background:linear-gradient(135deg,#eff6ff,#e5faf1);margin:0 auto 22px}.intro-page h2{font-size:clamp(22px,5vw,28px);line-height:1.25;margin:0 0 16px}.intro-page p{font-size:16px;line-height:1.7;color:#475569;margin:0}.intro-footer{padding:20px 24px 24px}.intro-dots{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.intro-dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:#cbd5e1}.intro-dots button[aria-current=true]{background:#2563eb;outline:3px solid #dbeafe}.intro-actions{display:flex;gap:12px}.intro-back{border:1px solid #cbd5e1;border-radius:12px;background:white;padding:12px 18px;color:#475569}.intro-next{flex:1;border:0;border-radius:12px;background:#2563eb;color:white;padding:14px;font-weight:700!important}.intro-reopen{display:block;margin:16px auto;padding:8px 14px;border:0;background:transparent;color:#2563eb;font:inherit;cursor:pointer}#mf-intro button:focus-visible{outline:3px solid #60a5fa;outline-offset:3px}@media(max-height:600px){.intro-icon{height:56px;width:56px;font-size:30px;margin-bottom:12px}.intro-page{padding-top:14px}}
/* Keep the help link within the main column, below the question controls. */
.intro-reopen{width:100%;margin:24px auto 0;text-align:center;white-space:normal}
@media(max-width:600px){
  #mf-intro{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;border-radius:0;box-sizing:border-box;overflow:hidden}
  #mf-intro[open]{display:flex;flex-direction:column}
  .intro-top{flex:none;padding:calc(18px + env(safe-area-inset-top,0px)) 22px 8px}
  .intro-pages{flex:1;min-height:0;align-items:stretch}
  .intro-page{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-y:auto;padding:24px;min-width:0}
  .intro-page h2,.intro-page p{max-width:420px;flex-shrink:0}
  .intro-icon{flex-shrink:0}
  .intro-footer{flex:none;padding:20px 24px calc(22px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:600px) and (max-height:500px){.intro-page{justify-content:flex-start}.intro-icon{display:none}.intro-footer{padding-top:10px}.intro-dots{margin-bottom:12px}}