stuff

src/App.tsx

@@ -76,7 +76,7 @@ const App = () => {
   const [chips, setChips] = useState(['design', '2026', 'invoices']);
 
   return (
-    <div className="msk-felt">
+    <div className="modern-sk-felt">
       <div className="wrap">
         <header>
           <div className="topbar">
@@ -87,8 +87,8 @@ const App = () => {
               <p className="sub">
                 Every component, live and interactive, built on Radix Primitives
                 styled from the global tokens in{' '}
-                <span className="msk-mono">tokens.css</span> +{' '}
-                <span className="msk-mono">components.css</span>. Click, toggle,
+                <span className="modern-sk-mono">tokens.css</span> +{' '}
+                <span className="modern-sk-mono">components.css</span>. Click, toggle,
                 focus — it all responds.
               </p>
             </div>
@@ -242,7 +242,7 @@ const App = () => {
                     onDecrement={() => setCount((n) => Math.max(0, n - 1))}
                     onIncrement={() => setCount((n) => n + 1)}
                   />
-                  <span className="msk-mono" style={{ color: 'var(--fg-2)' }}>
+                  <span className="modern-sk-mono" style={{ color: 'var(--fg-2)' }}>
                     {count}
                   </span>
                 </div>