stylesheet()

import { stylesheet, configureCSS, collectSSRStyles } from 'mates';

// Optional — call once before first css()
configureCSS({ prefix: 'm' });

const { css, mount, keyframes } = stylesheet();

// Prefer mount() in a component outer function for ref-counted cleanup
const fade = keyframes('fade', {
  from: { opacity: '0' },
  to: { opacity: '1' },
});

const cl = css({
  box: {
    padding: '12px',
    borderRadius: '8px',
    background: '#0f172a',
    color: '#e2e8f0',
    animation: `${fade} 0.4s ease`,
    '&:hover': { outline: '1px solid #5eead4' },
  },
});

// After SSR render (framework):
// const cssText = collectSSRStyles();