.mg-demo{--mg-demo-bg:var(--color-ink);--mg-demo-fg:var(--color-surface-raised);--mg-demo-muted:color-mix(in srgb, var(--color-surface-raised) 72%, transparent);--mg-demo-hover:color-mix(in srgb, var(--color-surface-raised) 12%, transparent);--mg-demo-current:color-mix(in srgb, var(--color-surface-raised) 18%, transparent);--mg-demo-current-fg:var(--color-surface-raised);--mg-demo-border:transparent;z-index:60;box-sizing:border-box;font-family:var(--font-sans);color:var(--mg-demo-fg);background:var(--mg-demo-bg);border:1px solid var(--mg-demo-border);box-shadow:var(--shadow-xl);animation:mg-demo-in var(--duration-slow) var(--ease-out) both;font-size:12px;line-height:1.4;position:fixed;bottom:16px}.mg-demo--light{--mg-demo-bg:color-mix(in srgb, var(--color-surface-raised) 96%, transparent);--mg-demo-fg:var(--color-ink);--mg-demo-muted:var(--color-ink-muted);--mg-demo-hover:var(--color-surface-muted);--mg-demo-current:var(--color-brand-soft);--mg-demo-current-fg:var(--color-brand);--mg-demo-border:var(--color-line)}.mg-demo *{box-sizing:border-box;margin:0}.mg-demo-bar{border-radius:var(--radius-xl);flex-wrap:wrap;align-items:center;gap:8px 12px;width:max-content;max-width:calc(100% - 32px);padding:8px 12px;display:flex;left:50%;translate:-50%}.mg-demo-pill{cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-weight:700;display:inline-flex;left:16px}.mg-demo-dot{color:var(--color-accent)}.mg-demo-group{align-items:center;gap:4px;display:flex;position:relative}.mg-demo-badge{background:var(--color-accent);color:var(--color-on-accent);letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:800}.mg-demo-space{color:var(--mg-demo-muted)}.mg-demo-link,.mg-demo-current,.mg-demo-button{border-radius:var(--radius-md);color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;align-items:center;gap:4px;padding:4px 8px;text-decoration:none;display:inline-flex}.mg-demo-link:hover,.mg-demo-button:hover{background:var(--mg-demo-hover)}.mg-demo-link{color:var(--mg-demo-muted);font-weight:500}.mg-demo-link:hover{color:var(--mg-demo-fg)}.mg-demo-current{background:var(--mg-demo-current);color:var(--mg-demo-current-fg);cursor:default;font-weight:700}.mg-demo-button{font-weight:600}.mg-demo-icon{padding:6px}.mg-demo-link:focus-visible,.mg-demo-button:focus-visible,.mg-demo-pill:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.mg-demo-hint{border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface-raised);width:288px;color:var(--color-ink);text-align:left;box-shadow:var(--shadow-lg);animation:mg-demo-hint-in var(--duration-base) var(--ease-out) both;padding:12px;line-height:1.6;display:block;position:absolute;bottom:calc(100% + 12px);right:0}.mg-demo-hint span{margin-top:8px;display:block}.mg-demo-hint strong{font-family:var(--font-mono)}@keyframes mg-demo-in{0%{opacity:0;transform:translateY(8px)}}@keyframes mg-demo-hint-in{0%{opacity:0;transform:translateY(4px)scale(.98)}}