Update documentation and KeyCap styling

website/app/[locale]/(root)/docs/introduction/content.mdx

@@ -438,26 +438,6 @@ Reducing [critical CSS](https://web.dev/articles/codelab-extract-and-inline-crit
 
 ---
 
-## How to use documentation
-A few notes on using these documents:
-
-1. Get an overview of almost all the documents via the navigation on the left side of the screen, and there are only a few categories.
-2. On the right side, you'll see a table of contents that makes navigating between page sections easier.
-3. Click the search box on the left side or use the shortcut <KeyCap>Ctrl+K</KeyCap> or <KeyCap>Command+K</KeyCap> to search the entire site.
-4. Every class name in the document can preview the generated CSS rules by hovering.
-    ```html
-    <div class="**hidden@<sm&>md**">Try hovering over the class</div>
-    ```
-
-Also, you can use the official [Master CSS Play](/play) to edit, preview, view the generated size, and even share your design online.
-
-<figure>
-    <Image src={require('~/public/images/play.png').default} placeholder="blur" alt="Master CSS Play" className="b:1|frame r:2x" />
-    <figcaption>A real-time code editor for Master CSS</figcaption>
-</figure>
-
----
-
 ## Join our community
 If you have questions about Master CSS, you're always welcome to ask our community on:
 
@@ -472,3 +452,27 @@ We're here to support your Master CSS journey!
 ---
 
 ## Start your Master CSS journey
+A few notes on using these documents:
+
+1. Get an overview of almost all the documents via the navigation on the left side of the screen, and there are only a few categories:
+    - **Getting Started** for installation, setting up developer tools, and migration guides.
+    - **Syntax Tutorial** for learning the core syntax.
+    - **Fundamentals** for understanding core principles and concepts.
+    - **Design Variables** for customizing design tokens.
+    - **Configuration** for customizing your syntax.
+    - **Production Optimization** for minimization and performance.
+    - **Syntax** for all syntax references.
+
+2. On the right side, you'll see a table of contents that makes navigating between page sections easier.
+3. Click the search box on the left side or use the shortcut <KeyCap>Ctrl</KeyCap> + <KeyCap>K</KeyCap> or <KeyCap>Command</KeyCap> + <KeyCap>K</KeyCap> to search the entire site.
+4. Every class name in the document can preview the generated CSS rules by hovering.
+    ```html
+    <div class="**hidden@<sm&>md**">Try hovering over the class</div>
+    ```
+
+Also, you can use the official [Master CSS Play](/play) to edit, preview, view the generated size, and even share your design online.
+
+<figure>
+    <Image src={require('~/public/images/play.png').default} placeholder="blur" alt="Master CSS Play" className="b:1|frame r:2x" />
+    <figcaption>A real-time code editor for Master CSS</figcaption>
+</figure>

website/components/KeyCap.tsx

@@ -1,3 +1,3 @@
 import { styled } from '@master/css.react'
 
-export default styled.span`bg:surface r:1x p:1x b:1|frame s:01 font:12 fg:strong`
+export default styled.span`bg:surface r:1x p:1x|2x b:1|frame s:01 font:12 fg:strong`