diff --git a/examples/blank/package.json b/examples/blank/package.json
index 69d644861..4485333e1 100644
--- a/examples/blank/package.json
+++ b/examples/blank/package.json
@@ -14,6 +14,6 @@
     },
     "dependencies": {
         "@master/css-runtime": "workspace:^",
-        "@master/normal.css": "^2.0.0"
+        "@master/normal.css": "^2.1.0"
     }
 }
diff --git a/examples/eslint/collision.html b/examples/eslint/collision.html
index 3507c3803..89403afe7 100644
--- a/examples/eslint/collision.html
+++ b/examples/eslint/collision.html
@@ -1 +1 @@
-<div class="m:10 m:20 m:30 m:40@sm m:12x@sm">...</div>
\ No newline at end of file
+<div class="m:10 m:20 m:30 m:40@sm m:50@sm">...</div>
\ No newline at end of file
diff --git a/examples/eslint/collision.mdx b/examples/eslint/collision.mdx
index 895a2c225..ecdf83ad8 100644
--- a/examples/eslint/collision.mdx
+++ b/examples/eslint/collision.mdx
@@ -1,3 +1,3 @@
 # Test
 
-<div className="m:10 m:20 m:30 m:40@sm m:12x@sm">...</div>
\ No newline at end of file
+<div className="m:10 m:20 m:30 m:40@sm m:50@sm">...</div>
\ No newline at end of file
diff --git a/examples/eslint/validation.html b/examples/eslint/validation.html
index 78e84b76b..2adbc8c2e 100644
--- a/examples/eslint/validation.html
+++ b/examples/eslint/validation.html
@@ -1 +1 @@
-<div class="bg:indigo width:">...</div>
\ No newline at end of file
+<div class="bg:indigo font:">...</div>
\ No newline at end of file
diff --git a/package.json b/package.json
index 85da465a7..aa63be6e3 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     },
     "dependencies": {
         "@google-cloud/storage": "^7.7.0",
-        "@master/normal.css": "^2.0.0",
+        "@master/normal.css": "^2.1.0",
         "@swc-node/jest": "^1.7.0",
         "@techor/fs": "^3.0.18",
         "@techor/glob": "^3.0.18",
diff --git a/packages/css/package.json b/packages/css/package.json
index 3a201665c..f69279aa1 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -64,7 +64,7 @@
     },
     "dependencies": {
         "@master/colors": "^2.0.0",
-        "@master/normal.css": "^2.0.0",
+        "@master/normal.css": "^2.1.0",
         "@techor/extend": "^3.0.18"
     },
     "devDependencies": {
diff --git a/packages/eslint-config/tests/index.html b/packages/eslint-config/tests/index.html
index 681b65e3d..65090664a 100644
--- a/packages/eslint-config/tests/index.html
+++ b/packages/eslint-config/tests/index.html
@@ -1,4 +1,4 @@
-<div class="m:10 m:20 m:30 m:40@sm m:12x@sm">...</div>
+<div class="m:10 m:20 m:30 m:40@sm m:50@sm">...</div>
 <div class="font:12 font:24@sm m:32 block font:32@md mb:48">...</div>
 <button class="btn">...</button>
 <div class="bg:indigo width:">...</div>
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 036a8dd63..cf6122574 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^7.7.0
         version: 7.8.0
       '@master/normal.css':
-        specifier: ^2.0.0
-        version: 2.0.0
+        specifier: ^2.1.0
+        version: 2.1.0
       '@swc-node/jest':
         specifier: ^1.7.0
         version: 1.8.0(@swc/core@1.4.6)(@swc/types@0.1.5)(typescript@5.4.2)
@@ -337,8 +337,8 @@ importers:
         specifier: workspace:^
         version: link:../../packages/runtime
       '@master/normal.css':
-        specifier: ^2.0.0
-        version: 2.0.0
+        specifier: ^2.1.0
+        version: 2.1.0
     devDependencies:
       typescript:
         specifier: ^5.3.3
@@ -1085,8 +1085,8 @@ importers:
         specifier: ^2.0.0
         version: 2.0.0
       '@master/normal.css':
-        specifier: ^2.0.0
-        version: 2.0.0
+        specifier: ^2.1.0
+        version: 2.1.0
       '@techor/extend':
         specifier: ^3.0.18
         version: 3.0.18
@@ -1533,8 +1533,8 @@ importers:
         specifier: workspace:^
         version: link:../packages/eslint-plugin
       '@master/normal.css':
-        specifier: ^2.0.0
-        version: 2.0.0
+        specifier: ^2.1.0
+        version: 2.1.0
       '@master/styled.react':
         specifier: ^2.0.2
         version: 2.0.2(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0)
@@ -6584,8 +6584,8 @@ packages:
     resolution: {integrity: sha512-0s4DzBSXthRVCFKkKbGvAioT6oVlN54f9H4MX6GN1YoNG0/x0NECyIv/5Tx9p5nDMr+ClDHSDbQ37DJUp8CHFg==}
     dev: false
 
-  /@master/normal.css@2.0.0:
-    resolution: {integrity: sha512-zXvZwFTP9gvinLH06ElOlcPJRm7cgFVVxoL/uzFb5qiiXZq1TgsjYS57dEHoPirCWZnk987Xwvi9GQJ4AAgzxA==}
+  /@master/normal.css@2.1.0:
+    resolution: {integrity: sha512-qRW05ThdgfbEqBhEYk+DauPoesFSHjnUmpwNtVO+ZGmM90E8IWjADe7poBAEanO0saMu0VqnGcmBSbr+3RVKfA==}
     dev: false
 
   /@master/styled.react@2.0.2(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0):
@@ -10159,7 +10159,7 @@ packages:
       '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.24.0)
       '@vanilla-extract/babel-plugin-debug-ids': 1.0.5
       '@vanilla-extract/css': 1.14.1
-      esbuild: 0.17.6
+      esbuild: 0.19.12
       eval: 0.1.8
       find-up: 5.0.0
       javascript-stringify: 2.1.0
@@ -19196,6 +19196,7 @@ packages:
   /mimic-response@3.1.0:
     resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
     engines: {node: '>=10'}
+    requiresBuild: true
 
   /min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
@@ -23888,7 +23889,7 @@ packages:
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
-      terser: 5.27.0
+      terser: 5.29.1
       webpack: 5.90.1(@swc/core@1.4.6)(esbuild@0.20.0)
     dev: true
 
diff --git a/website/app/[locale]/(root)/docs/code-linting/content.mdx b/website/app/[locale]/(root)/docs/code-linting/content.mdx
index 2e387b50f..7853407c7 100644
--- a/website/app/[locale]/(root)/docs/code-linting/content.mdx
+++ b/website/app/[locale]/(root)/docs/code-linting/content.mdx
@@ -55,9 +55,7 @@ import brands from 'websites/data/brands'
 In practice, you pay less attention to the order of classes, and as the number of classes increases, the template markup becomes less readable.
 
 (i) With the [class order rule](/docs/eslint#class-order), you can enforce a consistent and fixed order for classes.
-<video className="aspect:2/1 r:2x max-w:screen-xs w:full" autoPlay loop muted playsInline>
-    <source src="/videos/consistent-class-order.webm" type="video/webm" />
-</video>
+<Image className="aspect:2/1 r:2x max-w:screen-xs w:full" src={require('~/public/consistent-class-order.webp').default} alt="Consistent class order" unoptimized />
 
 (!) <span className="text:warning">No consistent class order followed.</span>
 ```html
@@ -72,13 +70,11 @@ In practice, you pay less attention to the order of classes, and as the number o
 In the past, you added utility classes to your templates unsafely, lacking the capability to verify their validity or legality directly within the source code.
 
 (i) With the [class validation rule](/docs/eslint#class-order), you can check the validity of classes early as you write them.
-<video className="aspect:2/1 r:2x max-w:screen-xs w:full" autoPlay loop muted playsInline>
-    <source src="/videos/syntax-error-checks.webm" type="video/webm" />
-</video>
+<Image className="aspect:2/1 r:2x max-w:screen-xs w:full" src={require('~/public/syntax-error-checks.webp').default} alt="Syntax error checks" unoptimized />
 
-(x) <span className="text:error">Invalid value for \`width\` property.</span>
+(x) <span className="text:error">Invalid value for \`font\` property.</span>
 ```html
-<div class="**width:**">…</div>
+<div class="**font:**">…</div>
 ```
 This is helpful if you make a typo or are unfamiliar with Master CSS syntax!
 
@@ -86,9 +82,7 @@ This is helpful if you make a typo or are unfamiliar with Master CSS syntax!
 You can also restrict teams to using [configuration](/docs/configuration) to create [styles](/docs/styles) instead of defining classes through traditional `html <style>` or CSS files.
 
 (i) Based on syntax error checking, you can [disallow unknown classes](/docs/eslint#class-validation).
-<video className="aspect:2/1 r:2x max-w:screen-xs w:full" autoPlay loop muted playsInline>
-    <source src="/videos/disallow-unknown-class.webm" type="video/webm" />
-</video>
+<Image className="aspect:2/1 r:2x max-w:screen-xs w:full" src={require('~/public/disallow-unknown-class.webp').default} alt="Disallow unknown classes" unoptimized />
 
 (x) <span className="text:error">"btn" is not a valid or known class.</span>
 ```html
@@ -115,9 +109,7 @@ Restart the VSCode ESLint server to read the modified Master CSS configuration.
 The class you added may collide with existing classes due to human error or having the same declarations as a third-party custom syntax.
 
 (i) With the [class collision rule](/docs/eslint#class-collision), you'll no longer collide with existing classes.
-<video className="aspect:2/1 r:2x max-w:screen-xs w:full" autoPlay loop muted playsInline>
-    <source src="/videos/class-collision-detection.webm" type="video/webm" />
-</video>
+<Image className="aspect:2/1 r:2x max-w:screen-xs w:full" src={require('~/public/class-collision-detection.webp').default} alt="Class collision detection" unoptimized />
 
 (!) <span className="text:warning">"m:10" applies the same CSS declarations as "m:20".</span><br/><span className="text:warning">"m:20" applies the same CSS declarations as "m:10".</span>
 ```html
@@ -129,22 +121,20 @@ The class you added may collide with existing classes due to human error or havi
 ```
 It can also detect whether declarations with the same selector and media query state collide!
 
-(!) <span className="text:warning">"m:40@sm" applies the same CSS declarations as "m:12x@sm".</span><br/><span className="text:warning">"m:12x@sm" applies the same CSS declarations as "m:40@sm".</span>
+(!) <span className="text:warning">"m:40@sm" applies the same CSS declarations as "m:50@sm".</span><br/><span className="text:warning">"m:50@sm" applies the same CSS declarations as "m:40@sm".</span>
 ```html
-<div class="**m:40@sm** **m:12x@sm**">…</div>
+<div class="**m:40@sm** **m:50@sm**">…</div>
 ```
 (o) Fix this @master/css/class-collision problem by removing other colliding classes.
 ```html
-<div class="m:12x@sm">…</div>
+<div class="m:50@sm">…</div>
 ```
 
 ### Supports JS utilities
 You may be using [clsx](https://github.com/lukeed/clsx) or [class variant](https://github.com/master-co/styled) to conditionally apply classes, but unfortunately, they're just pure strings in JavaScript.
 
 (i) You can make arguments of JavaScript [callees](/docs/eslint#calleematching) have Master CSS code linting.
-<video className="aspect:2/1 r:2x max-w:screen-xs w:full" autoPlay loop muted playsInline>
-    <source src="/videos/supports-js-utilities.webm" type="video/webm" />
-</video>
+<Image className="aspect:2/1 r:2x max-w:screen-xs w:full" src={require('~/public/supports-js-utilities.webp').default} alt="Supports JS utilities" unoptimized />
 
 (x) <span className="text:error">Invalid value for `display` property.</span>
 ```tsx
diff --git a/website/app/[locale]/(root)/roadmap/content.mdx b/website/app/[locale]/(root)/roadmap/content.mdx
index f94c3d666..ed3116600 100644
--- a/website/app/[locale]/(root)/roadmap/content.mdx
+++ b/website/app/[locale]/(root)/roadmap/content.mdx
@@ -35,9 +35,12 @@ We will submit it to the Nuxt.js's [modules](https://nuxt.com/modules) 🤩
 
 ### Master CSS ESLint
 One of our proud products, Master CSS ESLint, the first CSS framework with syntax-error checking in template `class=""`.
-<video className="aspect:2/1 r:2x max-w:screen-xs w:full" autoPlay loop muted playsInline>
-    <source src="/videos/syntax-error-checks.webm" type="video/webm" />
-</video>
+<Image className="aspect:2/1 r:2x max-w:screen-xs w:full" src={require('~/public/syntax-error-checks.webp').default} alt="Syntax error checks" unoptimized />
+
+(x) <span className="text:error">Invalid value for \`font\` property.</span>
+```html
+<div class="**font:**">…</div>
+```
 This is just one of the features, see the [Code Linting](/docs/code-linting) for complete details.
 
 ### Master Colors
@@ -78,7 +81,7 @@ The protagonist of v2 is here - a brand-new [configuration API](/docs/configurat
 ### Master Theme Mode
 Used for setting and switching theme modes, the "packages/theme-mode" has been spun off into a new repository [master-co/theme-mode](https://github.com/master-co/theme-mode).
 <figure>
-    <Image src={require('~/public/theme-mode.gif').default} className="r:2x" alt="Master Theme Mode" />
+    <Image src={require('~/public/theme-modes.webp').default} className="r:2x" alt="Master Theme Modes" unoptimized />
     <figcaption>Theme mode switching and system preference synchronization</figcaption>
 </figure>
 In addition to Vanilla, React, and Vue integrations, we also added Svelte support during the migration process ✨
@@ -192,13 +195,13 @@ What's heartening so far is that the community is still eagerly awaiting Master
 
 > Master UI is a **framework-agnostic** and **framework-friendly** UI library.
 
-Just using a basic button provides four different ways of integration.
+Even a basic button provides four different ways of use.
 <Demo>
     <button className="center-content inline-flex bg:indigo fg:white font:14 font:medium h:10x px:4x r:2x">Submit</button>
 </Demo>
 We've designed a solution supporting React, Vue, Svelte, Angular, and more popular frameworks.
 
-(i) 1. Install and import the React integrated button.
+(i) A. Install and import the React integrated button.
 ```tsx name=App.tsx
 import { Button } from '@master/ui.react'
 
@@ -208,7 +211,7 @@ export default function App() {
     )
 }
 ```
-(i) 2. Use CLI to clone the React button into the project and modify the source directly.
+(i) B. Use CLI to clone the React button into the project and modify the source directly.
 ```sh
 npx @master/ui add Button.tsx
 ```
@@ -216,13 +219,13 @@ Great, but what about framework-agnostic?
 
 > Master UI can be an **Atomic CSS** or **Semantic CSS** UI library.
 
-(i) 3. Copy atomic source code from the documentation and modify directly.
+(i) C. Copy atomic source code from the documentation and modify directly.
 ```html
 <button class="inline-flex bg:indigo fg:white font:14 ...">Submit</button>
 ```
 Or embrace semantics again!
 
-(i) 4. Import all Master UI [styles](/docs/styles) in the configuration.
+(i) D. Import all Master UI [styles](/docs/styles) in the configuration.
 ```js name=master.css.js
 export default {
     extends: [
diff --git a/website/app/[locale]/(root)/roadmap/metadata.ts b/website/app/[locale]/(root)/roadmap/metadata.ts
index c1b85e72e..6f00e9543 100644
--- a/website/app/[locale]/(root)/roadmap/metadata.ts
+++ b/website/app/[locale]/(root)/roadmap/metadata.ts
@@ -4,7 +4,7 @@ import version from '~/version'
 const metadata: Metadata = {
     title: 'Roadmap',
     description: 'v2 is coming soon.',
-    date: '2024-03-12T11:53:08.408Z',
+    date: '2024-03-12T14:16:36.232Z',
     category: 'v' + version,
     authors: [{ name: 'Aron' }]
 }
diff --git a/website/package.json b/website/package.json
index 7eaf0b236..0baef9a02 100644
--- a/website/package.json
+++ b/website/package.json
@@ -20,7 +20,7 @@
         "@master/css.react": "workspace:^",
         "@master/eslint-config-css": "workspace:^",
         "@master/eslint-plugin-css": "workspace:^",
-        "@master/normal.css": "^2.0.0",
+        "@master/normal.css": "^2.1.0",
         "@master/styled.react": "^2.0.2",
         "@master/theme-mode.react": "^1.1.0",
         "@monaco-editor/react": "^4.6.0",
diff --git a/website/public/class-collision-detection.mov b/website/public/class-collision-detection.mov
new file mode 100644
index 000000000..2457de8b7
Binary files /dev/null and b/website/public/class-collision-detection.mov differ
diff --git a/website/public/class-collision-detection.webp b/website/public/class-collision-detection.webp
new file mode 100644
index 000000000..c7a5015d2
Binary files /dev/null and b/website/public/class-collision-detection.webp differ
diff --git a/website/public/consistent-class-order.mov b/website/public/consistent-class-order.mov
new file mode 100644
index 000000000..c1d957ce8
Binary files /dev/null and b/website/public/consistent-class-order.mov differ
diff --git a/website/public/consistent-class-order.webp b/website/public/consistent-class-order.webp
new file mode 100644
index 000000000..6d9591285
Binary files /dev/null and b/website/public/consistent-class-order.webp differ
diff --git a/website/public/disallow-unknown-class.mov b/website/public/disallow-unknown-class.mov
new file mode 100644
index 000000000..1e72fd9fe
Binary files /dev/null and b/website/public/disallow-unknown-class.mov differ
diff --git a/website/public/disallow-unknown-class.webp b/website/public/disallow-unknown-class.webp
new file mode 100644
index 000000000..fe6f2343b
Binary files /dev/null and b/website/public/disallow-unknown-class.webp differ
diff --git a/website/public/supports-js-utilities.mov b/website/public/supports-js-utilities.mov
new file mode 100644
index 000000000..a620516c3
Binary files /dev/null and b/website/public/supports-js-utilities.mov differ
diff --git a/website/public/supports-js-utilities.webp b/website/public/supports-js-utilities.webp
new file mode 100644
index 000000000..0e1ef9204
Binary files /dev/null and b/website/public/supports-js-utilities.webp differ
diff --git a/website/public/syntax-error-checks.mov b/website/public/syntax-error-checks.mov
new file mode 100644
index 000000000..a51e3eca2
Binary files /dev/null and b/website/public/syntax-error-checks.mov differ
diff --git a/website/public/syntax-error-checks.webp b/website/public/syntax-error-checks.webp
new file mode 100644
index 000000000..c16e4280d
Binary files /dev/null and b/website/public/syntax-error-checks.webp differ
diff --git a/website/public/theme-mode.gif b/website/public/theme-mode.gif
deleted file mode 100644
index 119ce8919..000000000
Binary files a/website/public/theme-mode.gif and /dev/null differ
diff --git a/website/public/theme-modes.webp b/website/public/theme-modes.webp
new file mode 100644
index 000000000..a7d156595
Binary files /dev/null and b/website/public/theme-modes.webp differ
diff --git a/website/public/videos/class-collision-detection.webm b/website/public/videos/class-collision-detection.webm
deleted file mode 100644
index 71a3ff650..000000000
Binary files a/website/public/videos/class-collision-detection.webm and /dev/null differ
diff --git a/website/public/videos/consistent-class-order.webm b/website/public/videos/consistent-class-order.webm
deleted file mode 100644
index 7b60d5a8d..000000000
Binary files a/website/public/videos/consistent-class-order.webm and /dev/null differ
diff --git a/website/public/videos/disallow-unknown-class.webm b/website/public/videos/disallow-unknown-class.webm
deleted file mode 100644
index 7fc40f0bf..000000000
Binary files a/website/public/videos/disallow-unknown-class.webm and /dev/null differ
diff --git a/website/public/videos/supports-js-utilities.webm b/website/public/videos/supports-js-utilities.webm
deleted file mode 100644
index 07a8f4944..000000000
Binary files a/website/public/videos/supports-js-utilities.webm and /dev/null differ
diff --git a/website/public/videos/syntax-error-checks.webm b/website/public/videos/syntax-error-checks.webm
deleted file mode 100644
index 4ca8b4943..000000000
Binary files a/website/public/videos/syntax-error-checks.webm and /dev/null differ