.monio-loading {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  align-items: center; justify-content: center; overflow: hidden;
  min-height: 100vh; min-height: 100svh; width: 100%;
  padding: max(38px, env(safe-area-inset-top)) 20px max(30px, env(safe-area-inset-bottom));
  color: #edf7f8; text-align: center; background: #08152b;
  background-image: radial-gradient(ellipse at 20% 35%, #123c432e, transparent 60%), radial-gradient(ellipse at 88% 60%, #42396726, transparent 60%);
}
.monio-loading .ml-aura { position: absolute; z-index: -1; width: min(110vw, 660px); height: 660px; top: 16%; border-radius: 50%; background: radial-gradient(ellipse, #2bad9226 0, #2566820d 45%, transparent 70%); pointer-events: none; }
.monio-loading .ml-brand { position: relative; z-index: 1; }
.monio-loading .ml-eyebrow { display: block; color: #93abbe; font-size: 10px; font-weight: 600; letter-spacing: .24em; line-height: 1.5; }
.monio-loading h1 { color: #f4f9fa; margin: 12px 0 0; font-size: clamp(42px, 12vw, 58px); font-weight: 740; letter-spacing: -.065em; line-height: 1.1; }
.monio-loading h1 span { color: #84e5bd; }
.monio-loading .ml-stage { position: relative; width: min(100%, 420px); margin: 2px 0 3px; }
.monio-loading svg.ml-art { display: block; width: 100%; height: auto; overflow: visible; }
.monio-loading .ml-wallet { transform-origin: 215px 240px; animation: ml-wallet-arrive .95s cubic-bezier(.2,.8,.2,1) both, ml-wallet-drift 5s 1s ease-in-out infinite; }
.monio-loading .ml-card { transform-box: fill-box; transform-origin: center; }
.monio-loading .ml-card-violet { animation: ml-card-open .95s .04s cubic-bezier(.19,.8,.3,1) both; }
.monio-loading .ml-card-mint { animation: ml-card-open 1s .12s cubic-bezier(.19,.8,.3,1) both; }
.monio-loading .ml-card-graph { stroke-dasharray: 125; stroke-dashoffset: 0; animation: ml-draw 1s .35s ease-out both; }
.monio-loading .ml-coin { transform-origin: 332px 87px; animation: ml-coin-arrive .9s .1s cubic-bezier(.2,.8,.2,1) both, ml-coin-drift 4.5s 1s ease-in-out infinite; }
.monio-loading .ml-insight { transform-origin: 103px 280px; animation: ml-insight-arrive 1s .15s cubic-bezier(.2,.8,.2,1) both, ml-insight-drift 5s 1.2s ease-in-out infinite; }
.monio-loading .ml-insight-line { stroke-dasharray: 125; stroke-dashoffset: 0; animation: ml-draw 1.1s .45s ease-out both; }
.monio-loading .ml-sparkles { opacity: .75; animation: ml-glow 5s ease-in-out infinite; }
.monio-loading .ml-status { width: 100%; max-width: 340px; position: relative; z-index: 1; }
.monio-loading .ml-status h2 { color: #eff8f7; font-size: clamp(18px, 5vw, 22px); line-height: 1.3; font-weight: 570; letter-spacing: -.025em; margin: 0 0 10px; }
.monio-loading .ml-status p { color: #9fb4c8; font-size: 13px; line-height: 1.65; margin: 0; }
.monio-loading .ml-dots { display: flex; align-items: center; justify-content: center; gap: 7px; height: 28px; margin-top: 16px; }
.monio-loading .ml-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #84e5bd; opacity: .55; animation: ml-dot 1.8s ease-in-out infinite; }
.monio-loading .ml-dots i:nth-child(2) { animation-delay: .18s; }
.monio-loading .ml-dots i:nth-child(3) { animation-delay: .36s; }
.monio-loading .ml-footer { color: #7894ab; font-size: 11px; line-height: 1.6; letter-spacing: .025em; margin-top: 40px; }
@keyframes ml-wallet-arrive { from { opacity: .3; transform: translateY(14px) rotate(-4deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ml-card-open { from { transform: translateY(54px) rotate(5deg); opacity: .45; } to { transform: none; opacity: 1; } }
@keyframes ml-coin-arrive { from { opacity: 0; transform: translate(-9px,25px) rotate(-25deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes ml-insight-arrive { from { opacity: 0; transform: translate(15px,18px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ml-draw { from { stroke-dashoffset: 125; } to { stroke-dashoffset: 0; } }
@keyframes ml-wallet-drift { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(.6deg); } }
@keyframes ml-coin-drift { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(7deg); } }
@keyframes ml-insight-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes ml-glow { 0%,100% { opacity: .5; } 50% { opacity: .9; } }
@keyframes ml-dot { 0%,65%,100% { opacity: .35; transform: scale(.85); } 30% { opacity: 1; transform: scale(1.1); } }
@media (min-width: 700px) { .monio-loading .ml-stage { width: 430px; } .monio-loading .ml-footer { margin-top: 30px; } }
@media (max-height: 700px) { .monio-loading { padding-top: max(24px,env(safe-area-inset-top)); padding-bottom: max(20px,env(safe-area-inset-bottom)); } .monio-loading .ml-stage { width: min(88%, 315px); } .monio-loading .ml-footer { margin-top: 20px; } .monio-loading h1 { font-size: 42px; } }
@media (max-height: 480px) and (min-width: 560px) { .monio-loading { display: grid; grid-template-columns: minmax(230px,300px) minmax(220px,330px); grid-template-rows: auto auto auto auto; align-content: center; justify-content: center; column-gap: 26px; } .monio-loading .ml-stage { width: 100%; grid-column: 1; grid-row: 1 / 5; margin: 0; } .monio-loading .ml-brand,.monio-loading .ml-status,.monio-loading .ml-dots,.monio-loading .ml-footer { grid-column: 2; } .monio-loading .ml-brand { margin-bottom: 24px; } .monio-loading .ml-footer { margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .monio-loading *, .monio-loading *::before, .monio-loading *::after { animation: none !important; transition: none !important; } .monio-loading .ml-card,.monio-loading .ml-coin,.monio-loading .ml-insight,.monio-loading .ml-wallet { opacity: 1; transform: none; } .monio-loading .ml-card-graph,.monio-loading .ml-insight-line { stroke-dashoffset: 0; } }