.mg{--mg-tile:60px;--mg-gap:14px;--mg-hub:168px;--mg-spring:cubic-bezier(.34, 1.56, .64, 1);border:1px solid var(--border);background:radial-gradient(60% 70% at 50% 45%, color-mix(in oklab, var(--primary) 9%, transparent), transparent 70%), var(--surface,#fff);box-shadow:var(--shadow-panel);border-radius:1rem;padding:48px 24px 24px;overflow:hidden}.mg-board{grid-template-columns:1fr var(--mg-hub) 1fr;align-items:center;column-gap:clamp(28px,7vw,96px);max-width:820px;margin:0 auto;display:grid;position:relative}.mg-wires{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.mg-wires path{fill:none}.mg-wire-idle{stroke:var(--border);stroke-width:1.5px;stroke-dasharray:4 5;transition:opacity .3s .5s}.mg-wire.is-on .mg-wire-idle{opacity:0}.mg-wire-live{stroke:var(--primary);stroke-width:2px;stroke-dasharray:1 1;stroke-dashoffset:1px;transition:stroke-dashoffset .7s cubic-bezier(.65,0,.35,1)}.mg-wire.is-on .mg-wire-live{stroke-dashoffset:0}.mg-wire-flow{stroke:color-mix(in oklab, var(--primary) 35%, white);stroke-width:3.5px;stroke-linecap:round;stroke-dasharray:.035 .215;opacity:0;transition:opacity .4s .6s;animation:1.6s linear infinite mg-flow}.mg-wire.is-on .mg-wire-flow{opacity:1}.mg-colwrap{z-index:1;position:relative}.mg-colhead{text-align:center;font-family:var(--font-mono,ui-monospace, monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-foreground);white-space:nowrap;margin:0 0 8px;font-size:10px;position:absolute;bottom:100%;left:0;right:0}.mg-col{z-index:1;gap:var(--mg-gap);margin:0;padding:0;list-style:none;display:grid;position:relative}.mg-tile{height:var(--mg-tile);position:relative}.mg-slot{border:1.5px dashed color-mix(in oklab, var(--primary) 30%, var(--border));background:color-mix(in oklab, var(--surface,#fff) 70%, transparent);color:color-mix(in oklab, var(--primary) 45%, var(--muted-foreground));font-family:var(--font-mono,ui-monospace, monospace);letter-spacing:.12em;text-transform:uppercase;border-radius:12px;place-items:center;font-size:12px;transition:opacity .3s;display:grid;position:absolute;inset:0}.mg-tile.is-on .mg-slot{opacity:0}.mg-card{border:1px solid color-mix(in oklab, var(--primary) 22%, var(--border));background:var(--surface,#fff);box-shadow:0 10px 24px -16px color-mix(in oklab, var(--primary) 60%, black);opacity:0;transform:translate3d(var(--mg-from,0), 0, 0) scale(.86);transition:opacity .35s ease var(--mg-delay,0s), transform .6s var(--mg-spring) var(--mg-delay,0s);border-radius:12px;align-items:center;gap:12px;padding:0 16px;display:flex;position:absolute;inset:0}.mg-tile--l .mg-card{--mg-from:-18px}.mg-tile--r .mg-card{--mg-from:18px}.mg-tile.is-on .mg-card{opacity:1;transform:none}.mg-tile--r.is-on .mg-card{background:linear-gradient(135deg, var(--primary), color-mix(in oklab, var(--primary) 75%, black));color:#fff;border-color:#0000}.mg-icon{width:20px;height:20px;color:var(--primary);flex:none}.mg-tile--r .mg-icon{color:#fff}.mg-name{white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:600;overflow:hidden}.mg-badge{color:var(--primary);font-family:var(--font-mono,ui-monospace, monospace);letter-spacing:.1em;text-transform:uppercase;animation:mg-pop .5s var(--mg-spring) .25s both;background:#fff;border-radius:999px;margin-left:auto;padding:2px 8px;font-size:10px}.mg-tile.is-fresh .mg-card:after{content:"";border-radius:inherit;box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 30%, transparent), 0 0 28px 2px color-mix(in oklab, var(--primary) 45%, transparent);animation:1.8s ease-out both mg-glow;position:absolute;inset:-1px}.mg-hub{z-index:1;aspect-ratio:1;color:#fff;background:radial-gradient(90% 90% at 30% 20%, color-mix(in oklab, var(--primary) 60%, white), transparent 60%), linear-gradient(150deg, var(--primary), color-mix(in oklab, var(--primary) 55%, black));box-shadow:0 24px 50px -22px color-mix(in oklab, var(--primary) 80%, black), inset 0 1px 0 #ffffff59;border-radius:28px;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.mg-pulse{border-radius:inherit;border:2px solid var(--primary);opacity:0;pointer-events:none;animation:.9s ease-out mg-pulse;position:absolute;inset:0}.mg-logo{width:30px;height:30px}.mg-hub-label{opacity:.9;margin-top:10px;font-size:13px;font-weight:600}.mg-count{font-family:var(--font-mono,ui-monospace, monospace);letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-top:2px;font-size:11px}.mg-count-num{animation:mg-pop .5s var(--mg-spring);font-size:15px;font-weight:700;display:inline-block}.mg-timeline{max-width:820px;margin:28px auto 0}.mg-steps{grid-template-columns:repeat(4,1fr);display:grid;position:relative}.mg-progress{background:var(--border);border-radius:2px;height:2px;position:absolute;top:9px;left:12.5%;right:12.5%}.mg-progress>span{background:var(--primary);transform-origin:0;transition:transform .7s cubic-bezier(.65,0,.35,1);position:absolute;inset:0}.mg-step{cursor:pointer;color:var(--muted-foreground);font:inherit;background:0 0;border:0;flex-direction:column;align-items:center;gap:8px;padding:0 4px;display:flex;position:relative}.mg-dot{border:2px solid var(--border);background:var(--surface,#fff);width:20px;height:20px;transition:border-color .3s, transform .4s var(--mg-spring);border-radius:999px}.mg-step.is-done .mg-dot{border-color:var(--primary);background:radial-gradient(circle, var(--primary) 0 4px, var(--surface,#fff) 4.5px)}.mg-step.is-current .mg-dot{background:var(--primary);box-shadow:0 0 0 5px color-mix(in oklab, var(--primary) 18%, transparent);transform:scale(1.25)}.mg-step-label{text-align:center;flex-direction:column;font-size:13px;font-weight:600;line-height:1.25;display:flex}.mg-step.is-current{color:var(--foreground)}.mg-step-fase{font-family:var(--font-mono,ui-monospace, monospace);letter-spacing:.18em;text-transform:uppercase;color:var(--primary);font-size:10px;font-weight:400}.mg-step:focus-visible{outline:2px solid var(--primary);outline-offset:4px;border-radius:8px}.mg-caption{text-align:center;max-width:34rem;min-height:3em;color:var(--muted-foreground);margin:20px auto 0;animation:.5s both mg-caption}.mg:not(.is-running) .mg-wire-flow{animation-play-state:paused}@keyframes mg-flow{to{stroke-dashoffset:-.25px}}@keyframes mg-pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}@keyframes mg-glow{0%{opacity:1}70%{opacity:.6}to{opacity:0}}@keyframes mg-pulse{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}@keyframes mg-caption{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (width<=639px){.mg{--mg-tile:48px;--mg-gap:10px;--mg-hub:88px;padding:40px 12px 18px}.mg-colhead{letter-spacing:.06em;white-space:normal;font-size:8.5px}.mg-board{column-gap:14px}.mg-card{border-radius:10px;gap:6px;padding:0 8px}.mg-slot{border-radius:10px;font-size:10px}.mg-icon{width:15px;height:15px}.mg-name{font-size:12px}.mg-badge{display:none}.mg-hub{border-radius:20px}.mg-logo{width:22px;height:22px}.mg-hub-label{margin-top:6px;font-size:10px}.mg-count{letter-spacing:.06em;font-size:9px}.mg-count-num{font-size:12px}.mg-step-label{font-size:11px}}@media (prefers-reduced-motion:reduce){.mg *,.mg :before,.mg :after{transition:none!important;animation:none!important}}
