.mbx-stage-box{
  --ink:#18213f; --mut:#4a5675; --soft:#6b7590; --line:#e3e9f7; --bg:#f5f8ff;
  --blue:#2f5bd6; --purple:#7a5cf0; --green:#1f9d63; --gdk:#1f7a4d; --cta:#0a8a3e; --amber:#f2a33a;
  --f-d:'Noto Sans Thai Looped','Sarabun',system-ui,sans-serif; --f-b:'Sarabun',system-ui,sans-serif;
;font-family:var(--f-b);color:var(--ink)}
.mbx-stage-box *{box-sizing:border-box}

.mbx-stage-box{position:relative;width:100%;aspect-ratio:560/520;max-width:560px;justify-self:center}
.mbx-stage{position:absolute;left:0;top:0;width:560px;height:520px;transform-origin:0 0}
.mbx-blob{display:none}
.mbx-tile{position:absolute;left:-8px;top:40px;width:344px;height:253px;background:center/contain no-repeat;filter:drop-shadow(0 18px 24px rgba(47,91,214,.22));animation:mbx-bob 4.5s ease-in-out infinite;will-change:transform}
.mbx-glow{position:absolute;left:50px;top:300px;width:220px;height:36px;border-radius:50%;background:rgba(47,91,214,.22);filter:blur(16px);animation:mbx-shadow 4.5s ease-in-out infinite}
.mbx-flash{position:absolute;left:58px;top:128px;width:104px;height:130px;border-radius:24px;background:radial-gradient(closest-side,rgba(110,255,170,.85),transparent);opacity:0;pointer-events:none}
.mbx-flash.mbx-on{animation:mbx-flash .5s ease-out}

.mbx-paper{position:absolute;width:74px;padding:9px 8px 11px;border-radius:6px;background:#fff;box-shadow:0 10px 22px rgba(24,33,63,.14);font-size:9px;line-height:1.35;color:#3b3427;
  transform:translate(0,0) rotate(var(--r));animation:mbx-drift 3.6s ease-in-out infinite;animation-delay:var(--dl)}
.mbx-paper b{display:block;font-size:9.5px;margin-bottom:3px}
.mbx-paper i{display:block;height:3px;border-radius:2px;background:#e4dccb;margin:3px 0}
.mbx-paper .mbx-t{display:flex;justify-content:space-between;font-weight:800;border-top:1px dashed #d6ccb0;padding-top:3px;margin-top:4px}
.mbx-paper.mbx-rc{background:#fffdf7}
.mbx-paper.mbx-rc::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:6px;background:conic-gradient(from -45deg at bottom,#0000,#fffdf7 1deg 89deg,#0000 90deg) 0 0/8px 6px repeat-x}
.mbx-paper.mbx-slip{background:#eef5ff;color:#1d3f8f}.mbx-paper.mbx-slip .mbx-ok{width:16px;height:16px;border-radius:50%;background:var(--green);margin:0 auto 4px;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:900}
.mbx-paper.mbx-pdf{background:#fff}.mbx-paper.mbx-pdf .mbx-tag{position:absolute;right:-6px;top:6px;background:#e5484d;color:#fff;font-weight:800;font-size:8.5px;padding:1px 5px;border-radius:4px}
.mbx-paper.mbx-note{background:#fff9c9;font-family:var(--f-b);font-size:10px;color:#5a4a00}
.mbx-paper.mbx-fly{animation:mbx-fly .75s cubic-bezier(.55,0,.4,1) forwards}
.mbx-paper.mbx-back{animation:mbx-back .5s ease-out both}

.mbx-card{position:absolute;right:0;top:36px;width:222px;background:rgba(255,255,255,.92);border:1px solid #fff;border-radius:20px;padding:14px 14px 10px;
  box-shadow:0 24px 50px rgba(40,60,140,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mbx-card h3{margin:0 0 6px;font-family:var(--f-d);font-size:14px;color:var(--blue);display:flex;align-items:center;gap:6px}
.mbx-card h3 .mbx-n{font-variant-numeric:tabular-nums}
.mbx-rows{display:flex;flex-direction:column}
.mbx-r{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid #eef1f8;font-size:12.5px}
.mbx-r:first-child{border-top:0}
.mbx-wait{font-size:12.5px;color:var(--soft);padding:8px 0 6px;display:flex;align-items:center;gap:8px}
.mbx-wait[hidden]{display:none}
.mbx-wait i{width:8px;height:8px;border-radius:50%;background:var(--blue);animation:mbx-blink 1s infinite}
.mbx-r:not(.mbx-in){display:none}
.mbx-r.mbx-in{animation:mbx-rowIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes mbx-rowIn{from{opacity:0;transform:translateX(-26px) scale(.96)}to{opacity:1;transform:none}}
.mbx-r .mbx-ic{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:10px;font-weight:800}
.mbx-r small{display:block;font-size:10.5px;color:var(--soft)}
.mbx-r b.mbx-amt{font-variant-numeric:tabular-nums}
.mbx-inc .mbx-ic{background:#e3f6ec;color:var(--gdk)}.mbx-inc b.mbx-amt{color:var(--gdk)}
.mbx-exp .mbx-ic{background:#e8efff;color:var(--blue)}

.mbx-sum{position:absolute;left:30px;top:380px;width:300px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px 16px;display:flex;gap:14px;align-items:center;
  box-shadow:0 20px 44px rgba(40,60,140,.14)}
.mbx-donut{width:62px;height:62px;flex:none}
.mbx-sum .mbx-k{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--soft);flex:1}
.mbx-sum .mbx-k div{display:flex;justify-content:space-between;align-items:baseline}
.mbx-sum .mbx-k b{font-family:var(--f-d);font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.mbx-sum .mbx-k .mbx-g b{color:var(--gdk)}
.mbx-sum .mbx-k .mbx-net{border-top:1px dashed var(--line);padding-top:3px;margin-top:2px}
.mbx-sum .mbx-k .mbx-net b{color:var(--purple)}
.mbx-ai{position:absolute;left:226px;top:2px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:5px 11px;display:flex;gap:6px;align-items:center;
  box-shadow:0 8px 20px rgba(24,33,63,.25)}
.mbx-ai i{width:7px;height:7px;border-radius:50%;background:#5fe0a1;animation:mbx-blink 1.2s infinite}
.mbx-spark{position:absolute;width:14px;height:14px;opacity:.8;animation:mbx-tw 2.4s ease-in-out infinite}
.mbx-spark::before,.mbx-spark::after{content:"";position:absolute;left:50%;top:0;width:2px;height:100%;margin-left:-1px;border-radius:2px;background:#ffd84d}
.mbx-spark::after{transform:rotate(90deg)}

@keyframes mbx-bob{50%{transform:translateY(-10px) rotate(-1deg)}}
@keyframes mbx-shadow{50%{transform:scale(.88);opacity:.7}}
@keyframes mbx-drift{50%{transform:translate(0,-7px) rotate(calc(var(--r) * -1))}}
@keyframes mbx-fly{0%{transform:translate(0,0) rotate(var(--r)) scale(1);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(0deg) scale(.15);opacity:0}}
@keyframes mbx-back{from{opacity:0;transform:translate(0,14px) rotate(var(--r)) scale(.85)}to{opacity:1;transform:translate(0,0) rotate(var(--r))}}
@keyframes mbx-flash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes mbx-blink{50%{opacity:.3}}
@keyframes mbx-tw{50%{transform:scale(.5) rotate(45deg);opacity:.3}}


.mbx-tile{background-image:url("../img/mascot-hero.webp")}
.mb-hero-art.mb-hero-anim{max-width:560px;width:100%}
.mbx-stage-box h3{line-height:1.3}
@media (prefers-reduced-motion:reduce){.mbx-stage-box *{animation:none!important;transition:none!important}}