docs: fix core concepts documentation

 - Fix N/M base character for 27/37
  - Remove misleading CSS optimization examples
  - Simplify type inference system explanation with csstype property

Author: abyss-s

apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx

@@ -21,10 +21,8 @@ Devup UI uses a custom N/M base numbering system to generate compact, collision-
 
 The N/M base system uses two character sets:
 
-- **N Base**: `a-z` (26 characters)
-- **M Base**: `a-z` (26 characters)
-
-This creates a base-26 system that can represent any number using only lowercase letters.
+- **N Base**: `a-z, _` (27 characters)
+- **M Base**: `a-z, 0-9, _` (37 characters)
 
 ### **Number Conversion**
 

apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx

@@ -18,7 +18,7 @@ Devup UI optimizes CSS values by:
 - **Removing unnecessary zeros**: `0px` becomes `0`
 - **Shortening decimals**: `0.5000` becomes `0.5`
 - **Optimizing units**: `0px` becomes `0` when appropriate
-- **Converting to smallest units**: `px` values are converted to `%` when more appropriate
+- **Converting to alternative units**: `0px` is converted to `0%` in CSS functions where unit-less zero is not allowed
 - **Removing redundant spaces**: `margin: 0 0 0 0` becomes `margin:0`
 
 ```
@@ -104,7 +104,6 @@ Global CSS blocks are optimized by:
 - **Removing comments**: `/* comment */` is stripped
 - **Minifying whitespace**: Multiple spaces become single spaces
 - **Removing semicolons**: Last property in a block doesn't need semicolon
-- **Optimizing selectors**: Redundant selectors are merged
 
 ```css
 /* Before optimization */
@@ -155,28 +154,14 @@ Values are converted to their most appropriate units:
 Numeric values are automatically interpreted as pixel units, while string-based values with explicit units (e.g., rem, %) are preserved for accurate rendering.
 
 ```
-// Numbers without units are treated as pixels
-<Box w={16} /> // width: 16px
+// Numbers without units are treated as pixels (multiplied by 4)
+<Box w={16} /> // width: 64px
 
 // Strings with units are preserved
 <Box w="16rem" /> // width: 16rem
 <Box w="100%" /> // width: 100%
 ```
 
-### **Mathematical Optimization**
-
-Mathematical expressions are optimized to their most efficient form:
-
-```
-// Before
-<Box w="calc(100% - 32px)" />
-<Box w="calc(50% + 16px)" />
-
-// After (optimized)
-<Box w="calc(100% - 2rem)" /> // px converted to rem for better scalability
-<Box w="calc(50% + 1rem)" /> // px converted to rem for better scalability
-```
-
 ### **Zero Value Optimization**
 
 Zero values are optimized:
@@ -207,24 +192,6 @@ Identical style rules across multiple components are automatically merged into a
 // .red-white{background:red;color:white}
 ```
 
-### **Property Deduplication**
-
-Duplicate CSS properties within the same rule are automatically removed, keeping only the last valid declaration for consistency and cleaner output.
-
-```
-// Input
-<Box
-  style={{
-    margin: '0',
-    padding: '0',
-    margin: '0', // duplicate
-  }}
-/>
-
-// Output: Duplicate margin removed
-<Box style={{ margin: '0', padding: '0' }} />
-```
-
 ### **Advantages**
 
 Devup UI offers complete flexibility in how you implement and optimize styles — while maintaining measurable performance gains.

apps/landing/src/app/(detail)/docs/core-concepts/type-inference-system/page.mdx

@@ -12,58 +12,28 @@ Unlike traditional CSS-in-JS libraries, Devup UI **derives types directly from C
 
 ## How It Works
 
-The type inference process consists of four main steps:
+Devup UI uses the **csstype** package to automatically generate types for CSS properties. Instead of manually defining types, Devup UI reads the standard CSS definitions from csstype and uses them directly.
 
-1. **Parsing** – analyzes JSX/TSX code
-2. **Property Lookup** – checks against the CSS property map
-3. **Type Generation** – produces corresponding TypeScript types
-4. **Validation** – enforces compile-time correctness
+### 1. Reading CSS Standards
 
-### 1. CSS Property Mapping
+Devup UI reads all CSS property definitions from the **csstype** package, which contains the official CSS standards. This includes both regular properties (like `width`, `color`) and shorthand properties (like `margin`, `padding`).
 
-All CSS properties are defined in a Rust-based mapping table.
+### 2. Auto-Converting Selectors
 
-```rust
-pub(super) static GLOBAL_STYLE_PROPERTY: phf::Map<&str, &[&str]> = phf_map! {
-    "bg" => &["background"],
-    "bgColor" => &["background-color"],
-    "m" => &["margin"],
-    "w" => &["width"],
-    "h" => &["height"],
-    // ...
-};
+When you use CSS states like `:hover` or `:focus`, Devup UI automatically converts them into props you can use. For example, `:hover` becomes `_hover` so you can write `<Box _hover={{ bg: 'red' }} />`.
 
-```
+When `csstype` is updated with new CSS standards, Devup UI automatically gets these updates without needing a library update.
 
-### 2. Type Generation
+### 3. Catching Mistakes Early
 
-TypeScript types are automatically derived from CSS property names and value patterns.
-
-It supports various value types — such as lengths, colors, and percentages — and
-
-ensures **type-safe responsive arrays** for breakpoint-based styles.
-
-```tsx
-<Box w={[100, 200, 300]} />
-```
-
-### 3. Special Property Handling
-
-Certain properties are excluded from inference, such as React-specific or HTML attributes.
-
-```rust
-static SPECIAL_PROPERTIES: phf::Set<&str> = phf_set! {
-    "children", "ref", "key", "className", "id", "style",
-};
-
-```
+TypeScript checks your CSS properties while you're coding. If you try to use an invalid property or value, you'll get an error right away instead of discovering it later.
 
 ## Advantages
 
-Devup UI’s type inference system provides several key benefits:
+Devup UI's type inference system provides several key benefits:
 
-- **Automatic updates** – New CSS properties are supported immediately when standards evolve, without requiring library updates.
-- **Type safety** – All properties and values are strictly typed, preventing invalid or misspelled declarations at compile time.
-- **Extensibility** – Experimental or custom CSS features can be easily extended within the system.
+- **Automatic updates** – New CSS properties are supported immediately when the csstype package is updated. Simply update the package without requiring devup-ui library updates.
+- **Type safety** – All properties and values are strictly typed based on CSS standards, preventing invalid or misspelled declarations at compile time.
+- **Standards compliance** – Types are always aligned with official CSS specifications, ensuring accuracy and consistency across all CSS standards.
 
 This type inference system is automatic, reliable, and future-ready, allowing developers to focus on design and logic rather than manual type management.