style: update border-radius and padding values across components

- standardize border-radius from 8px to 6px for consistent styling
- adjust padding values from 1rem to 0.75rem for better visual hierarchy
- remove redundant overflow-y properties for cleaner code

docs/.vitepress/theme/components/appendix/agent-intro/AgentArchitectureDemo.vue

@@ -156,7 +156,7 @@ const current = ref(modules[0])
 .icon {
   width: 28px;
   height: 28px;
-  border-radius: 8px;
+  border-radius: 6px;
   display: grid;
   place-items: center;
   background: var(--vp-c-bg-soft);

docs/.vitepress/theme/components/appendix/agent-intro/AgentMemoryDemo.vue

@@ -261,7 +261,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
   padding: 12px;
   min-height: 120px;
   max-height: 160px;
-  overflow-y: auto;
+  
 }
 
 .msg-row {
@@ -421,7 +421,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
   gap: 8px;
   padding: 10px 14px;
   background: #dcfce7;
-  border-radius: 8px;
+  border-radius: 6px;
   margin-bottom: 16px;
   font-size: 12px;
   color: #166534;
@@ -433,7 +433,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
   gap: 8px;
   padding: 10px 14px;
   background: var(--vp-c-brand-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 12px;
   color: var(--vp-c-text-1);
 }

docs/.vitepress/theme/components/appendix/agent-intro/AgentMemoryPrinciple.vue

@@ -588,7 +588,7 @@ const truncate = (str, len) => str?.length > len ? str.slice(0, len) + '...' : s
 /* 对话区 */
 .chat-area {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 12px;
   margin-bottom: 16px;
 }
@@ -613,7 +613,7 @@ const truncate = (str, len) => str?.length > len ? str.slice(0, len) + '...' : s
 
 .messages {
   max-height: 200px;
-  overflow-y: auto;
+  
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -732,7 +732,7 @@ const truncate = (str, len) => str?.length > len ? str.slice(0, len) + '...' : s
 .memory-panel {
   background: var(--vp-c-bg-soft);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.3s;
@@ -778,7 +778,7 @@ const truncate = (str, len) => str?.length > len ? str.slice(0, len) + '...' : s
   padding: 10px;
   min-height: 80px;
   max-height: 120px;
-  overflow-y: auto;
+  
 }
 
 .empty {
@@ -1060,7 +1060,7 @@ const truncate = (str, len) => str?.length > len ? str.slice(0, len) + '...' : s
   gap: 12px;
   padding: 12px;
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .practice-icon {

docs/.vitepress/theme/components/appendix/agent-intro/AgentMultiToolPrinciple.vue

@@ -435,7 +435,7 @@ const truncate = (str, len) => str.length > len ? str.slice(0, len) + '...' : st
 .phase {
   margin-bottom: 12px;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
   opacity: 0.5;
   transition: all 0.3s;
@@ -525,7 +525,7 @@ const truncate = (str, len) => str.length > len ? str.slice(0, len) + '...' : st
   gap: 12px;
   padding: 12px;
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   border: 2px solid transparent;
   transition: all 0.3s;
   position: relative;
@@ -685,7 +685,7 @@ const truncate = (str, len) => str.length > len ? str.slice(0, len) + '...' : st
 .final-output {
   padding: 12px;
   background: #dcfce7;
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .output-bubble {
@@ -704,7 +704,7 @@ const truncate = (str, len) => str.length > len ? str.slice(0, len) + '...' : st
 
 .control-btn {
   padding: 10px 24px;
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 14px;
   cursor: pointer;
   transition: all 0.2s;
@@ -762,7 +762,7 @@ const truncate = (str, len) => str.length > len ? str.slice(0, len) + '...' : st
 .explanation-card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 14px;
   text-align: center;
 }
@@ -788,7 +788,7 @@ const truncate = (str, len) => str.length > len ? str.slice(0, len) + '...' : st
 .comparison-section {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 14px;
 }
 

docs/.vitepress/theme/components/appendix/agent-intro/AgentPlanningDemo.vue

@@ -304,7 +304,7 @@ reset()
 .goal-bar {
   background: var(--vp-c-brand-soft);
   border-left: 3px solid var(--vp-c-brand);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 10px 14px;
   margin-bottom: 16px;
   font-size: 14px;
@@ -403,7 +403,7 @@ reset()
 .log-box, .thought-box {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
 }
 
@@ -431,7 +431,7 @@ reset()
   padding: 10px 12px;
   min-height: 100px;
   max-height: 140px;
-  overflow-y: auto;
+  
 }
 
 .empty {
@@ -534,7 +534,7 @@ reset()
   gap: 8px;
   padding: 10px 14px;
   background: var(--vp-c-brand-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 12px;
   color: var(--vp-c-text-1);
 }

docs/.vitepress/theme/components/appendix/agent-intro/AgentQuickStartDemo.vue

@@ -476,7 +476,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
 .thinking-section {
   margin-bottom: 10px;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
 }
 
@@ -516,7 +516,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
 .tools-section {
   margin-bottom: 10px;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
 }
 
@@ -530,7 +530,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
   gap: 10px;
   padding: 10px;
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   margin-bottom: 8px;
   border: 1px solid var(--vp-c-divider);
   transition: all 0.3s;
@@ -603,7 +603,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
   padding: 12px;
   background: #dcfce7;
   border: 1px solid #86efac;
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .response-header {
@@ -628,7 +628,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
   background: var(--vp-c-brand);
   color: white;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 13px;
   cursor: pointer;
   transition: background 0.2s;
@@ -651,7 +651,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
   margin-top: 16px;
   padding: 12px 16px;
   background: var(--vp-c-brand-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 13px;
 }
 

docs/.vitepress/theme/components/appendix/agent-intro/AgentTaskFlowDemo.vue

@@ -163,7 +163,7 @@ const steps = [
 .n {
   width: 26px;
   height: 26px;
-  border-radius: 8px;
+  border-radius: 6px;
   display: grid;
   place-items: center;
   background: var(--vp-c-bg-soft);

docs/.vitepress/theme/components/appendix/agent-intro/AgentToolUseDemo.vue

@@ -266,7 +266,7 @@ const reset = () => { currentStep.value = 0 }
 .user-input-bar {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 10px 14px;
   margin-bottom: 16px;
   font-size: 14px;
@@ -460,7 +460,7 @@ const reset = () => { currentStep.value = 0 }
 .final-result {
   background: var(--vp-c-brand-soft);
   border-left: 3px solid var(--vp-c-brand);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 12px 14px;
   margin-bottom: 16px;
   font-size: 13px;
@@ -513,7 +513,7 @@ const reset = () => { currentStep.value = 0 }
   gap: 8px;
   padding: 10px 14px;
   background: var(--vp-c-brand-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 12px;
   color: var(--vp-c-text-1);
 }

docs/.vitepress/theme/components/appendix/agent-intro/AgentWorkflowDemo.vue

@@ -179,7 +179,7 @@ const reset = () => {
 .icon {
   width: 28px;
   height: 28px;
-  border-radius: 8px;
+  border-radius: 6px;
   display: grid;
   place-items: center;
   background: var(--vp-c-bg-soft);

docs/.vitepress/theme/components/appendix/ai-history/AttentionMechanismDemo.vue

@@ -140,7 +140,7 @@ const getInsight = (index) => {
   margin-bottom: 24px;
   padding: 16px;
   background-color: var(--vp-c-bg-alt);
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .word-token {

docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue

@@ -234,7 +234,7 @@ onMounted(() => {
   display: flex;
   justify-content: center;
   background-color: var(--vp-c-bg-alt);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 10px;
 }
 

docs/.vitepress/theme/components/appendix/ai-history/CombinatorialExplosionDemo.vue

@@ -213,7 +213,7 @@ watch([featureCount, valuesPerFeature], () => {
   text-align: center;
   background-color: var(--vp-c-bg-alt);
   padding: 16px;
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .formula-suffix {
@@ -234,7 +234,7 @@ watch([featureCount, valuesPerFeature], () => {
   width: 50px;
   height: 50px;
   border: 2px solid;
-  border-radius: 8px;
+  border-radius: 6px;
   display: flex;
   flex-direction: column;
   align-items: center;

docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue

@@ -208,7 +208,7 @@ const mode = ref('discriminative')
   gap: 10px;
   background-color: var(--vp-c-bg);
   padding: 16px;
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .io-box {

docs/.vitepress/theme/components/appendix/ai-history/GPTEvolutionDemo.vue

@@ -149,7 +149,7 @@ const handleTabClick = (tab) => {
 }
 
 .main-card {
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .card-header {

docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue

@@ -334,7 +334,7 @@ const isConnectionFocus = (c) => {
   display: flex;
   justify-content: center;
   background-color: var(--vp-c-bg-alt);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 10px;
 }
 

docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue

@@ -274,7 +274,7 @@ const train = () => {
 .result-box {
   background-color: var(--vp-c-bg-alt);
   padding: 12px;
-  border-radius: 8px;
+  border-radius: 6px;
   border: 1px solid var(--vp-c-divider);
   text-align: center;
 }

docs/.vitepress/theme/components/appendix/api-design/DocumentationDemo.vue

@@ -300,7 +300,7 @@ const currentTool = computed(() =>
   gap: 8px;
   padding: 12px 16px;
   border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg);
   cursor: pointer;
   transition: all 0.2s ease;
@@ -330,7 +330,7 @@ const currentTool = computed(() =>
 .tool-detail {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
 }
 

docs/.vitepress/theme/components/appendix/api-design/ErrorHandlingDemo.vue

@@ -188,7 +188,7 @@ const errorCodeItems = [
   flex: 1;
   padding: 12px;
   border: 2px solid;
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
@@ -227,7 +227,7 @@ const errorCodeItems = [
 
 .comparison {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
 }
 

docs/.vitepress/theme/components/appendix/api-design/HttpMethodsDemo.vue

@@ -268,7 +268,7 @@ const currentMethod = computed(() =>
 .method-detail {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
 }
 
@@ -306,7 +306,7 @@ const currentMethod = computed(() =>
   align-items: center;
   padding: 12px;
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   border: 1px solid var(--vp-c-divider);
   opacity: 0.6;
   transition: all 0.2s ease;
@@ -361,7 +361,7 @@ const currentMethod = computed(() =>
 .example-item {
   background: var(--vp-c-bg-soft);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 12px;
   margin-bottom: 12px;
 }

docs/.vitepress/theme/components/appendix/api-design/RequestStructureDemo.vue

@@ -48,7 +48,7 @@
 <style scoped>
 .demo-container {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   background: var(--vp-c-bg-soft);
 }
@@ -82,7 +82,7 @@
 
 .section {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   border-left: 4px solid var(--vp-c-brand);
 }

docs/.vitepress/theme/components/appendix/api-design/ResourceAnalogy.vue

@@ -39,7 +39,7 @@
 <style scoped>
 .demo-container {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   background: var(--vp-c-bg-soft);
 }
@@ -77,7 +77,7 @@
   gap: 12px;
   padding: 12px;
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .icon {

docs/.vitepress/theme/components/appendix/api-design/ResponseStructureDemo.vue

@@ -237,7 +237,7 @@ function getStatusClass(status) {
 .response-detail {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
 }
 

docs/.vitepress/theme/components/appendix/api-design/RestfulDesignDemo.vue

@@ -194,9 +194,9 @@ const activePrinciple = computed(() =>
 .restful-design-demo {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .header {
@@ -225,8 +225,8 @@ const activePrinciple = computed(() =>
 .principle-card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   cursor: pointer;
   transition: all 0.2s;
   text-align: center;
@@ -260,7 +260,7 @@ const activePrinciple = computed(() =>
 .detail-panel {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 1.25rem;
 }
 

docs/.vitepress/theme/components/appendix/api-design/StatusCodeDemo.vue

@@ -417,7 +417,7 @@ function toggleExpand(number) {
   align-items: center;
   padding: 12px 20px;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg);
   cursor: pointer;
   transition: all 0.2s ease;
@@ -465,7 +465,7 @@ function toggleExpand(number) {
 .status-card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.2s ease;

docs/.vitepress/theme/components/appendix/api-design/VersioningStrategyDemo.vue

@@ -239,7 +239,7 @@ const currentStrategy = computed(() =>
 .strategy-card {
   background: var(--vp-c-bg);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -290,7 +290,7 @@ const currentStrategy = computed(() =>
 .strategy-detail {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
 }
 

docs/.vitepress/theme/components/appendix/api-intro/ApiConceptDemo.vue

@@ -250,7 +250,7 @@ function sendRequest() {
   background: var(--vp-c-brand);
   color: white;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   font-weight: 600;
   cursor: pointer;
   transition: opacity 0.2s;
@@ -303,7 +303,7 @@ function sendRequest() {
   font-family: monospace;
   font-size: 12px;
   overflow-x: auto;
-  overflow-y: auto;
+  
   max-height: 200px;
   margin: 0;
 }

docs/.vitepress/theme/components/appendix/api-intro/ApiDocumentDemo.vue

@@ -150,7 +150,7 @@ const isHuman = ref(false)
 
 .api-doc {
   background: #1e293b;
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   color: #e2e8f0;
   font-family: monospace;

docs/.vitepress/theme/components/appendix/api-intro/ApiMethodDemo.vue

@@ -237,7 +237,7 @@
 .method-examples {
   background: var(--vp-c-bg-soft);
   padding: 12px;
-  border-radius: 8px;
+  border-radius: 6px;
   margin-bottom: 12px;
 }
 
@@ -249,7 +249,7 @@
 
 .method-tip {
   padding: 10px 12px;
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 12px;
   line-height: 1.5;
 }
@@ -339,7 +339,7 @@ tr:last-child td {
 .tips {
   background: var(--vp-c-bg);
   padding: 16px;
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 14px;
   line-height: 1.8;
   color: var(--vp-c-text-2);

docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue

@@ -345,7 +345,7 @@ function sendRequest() {
   background: var(--vp-c-brand);
   color: white;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   font-weight: 600;
   cursor: pointer;
   margin-top: 8px;
@@ -415,7 +415,7 @@ function sendRequest() {
   padding: 12px;
   margin-bottom: 12px;
   overflow-x: auto;
-  overflow-y: auto;
+  
   max-height: 180px;
 }
 

docs/.vitepress/theme/components/appendix/api-intro/ApiQuickStartDemo.vue

@@ -143,7 +143,7 @@ function callApi() {
 .response-card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   animation: slideUp 0.3s ease-out;
 }

docs/.vitepress/theme/components/appendix/api-intro/RealWorldApiDemo.vue

@@ -349,7 +349,7 @@ async function runDemo() {
   background: #1e293b;
   color: #e2e8f0;
   padding: 12px;
-  border-radius: 8px;
+  border-radius: 6px;
   font-family: 'Monaco', 'Menlo', monospace;
   font-size: 12px;
   line-height: 1.6;
@@ -371,7 +371,7 @@ async function runDemo() {
 .summary {
   background: var(--vp-c-bg-soft);
   padding: 16px;
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 14px;
   line-height: 1.8;
 }
@@ -443,7 +443,7 @@ async function runDemo() {
 .result-body {
   background: #f0fdf4;
   border: 2px solid #86efac;
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   font-size: 14px;
   line-height: 1.6;

docs/.vitepress/theme/components/appendix/api-intro/RequestResponseFlow.vue

@@ -163,7 +163,7 @@ function send() {
   padding: 10px 20px;
   font-size: 14px;
   font-weight: bold;
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s;
 }
@@ -183,7 +183,7 @@ function send() {
 
 .result-box {
   padding: 12px 16px;
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 14px;
   font-weight: 500;
 }

docs/.vitepress/theme/components/appendix/audio-intro/ASRvsTTSDemo.vue

@@ -378,7 +378,7 @@ onMounted(() => {
 
 .flow-section {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
 }
 
@@ -418,7 +418,7 @@ onMounted(() => {
   padding: 16px;
   background: var(--vp-c-bg-soft);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -458,14 +458,14 @@ onMounted(() => {
   padding: 12px;
   background: var(--vp-c-bg-soft);
   border: 1px dashed var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   color: var(--vp-c-text-2);
 }
 
 .audio-preview {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 12px;
 }
 
@@ -479,7 +479,7 @@ onMounted(() => {
   background: var(--vp-c-brand);
   color: white;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   font-weight: 500;
   display: flex;
@@ -512,7 +512,7 @@ onMounted(() => {
 
 .result-box {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   border: 1px solid var(--vp-c-divider);
 }
@@ -540,7 +540,7 @@ textarea {
   width: 100%;
   padding: 12px;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
   font-size: 14px;
   resize: vertical;
@@ -654,7 +654,7 @@ textarea {
 
 .comparison-section {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   margin-bottom: 20px;
 }
@@ -673,7 +673,7 @@ textarea {
 
 .comp-card {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   text-align: center;
 }
@@ -705,7 +705,7 @@ textarea {
 
 .pipeline-comparison {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   margin-bottom: 20px;
 }
@@ -724,7 +724,7 @@ textarea {
 
 .pipeline {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
 }
 
@@ -761,7 +761,7 @@ textarea {
   gap: 12px;
   padding: 16px;
   background: var(--vp-c-bg-mute);
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 13px;
   line-height: 1.6;
 }

docs/.vitepress/theme/components/appendix/audio-intro/AudioQuickStartDemo.vue

@@ -462,7 +462,7 @@ onUnmounted(() => {
   width: 100%;
   padding: 12px;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 14px;
   resize: vertical;
   background: var(--vp-c-bg);
@@ -504,7 +504,7 @@ onUnmounted(() => {
 .action-btn {
   padding: 12px 24px;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-mute);
   cursor: pointer;
   font-size: 14px;
@@ -557,7 +557,7 @@ onUnmounted(() => {
   width: 100%;
   padding: 16px;
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .result-label {
@@ -592,7 +592,7 @@ onUnmounted(() => {
   gap: 12px;
   padding: 16px;
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   opacity: 0.5;
   transition: all 0.2s;
 }
@@ -692,7 +692,7 @@ onUnmounted(() => {
 .embedding-viz {
   padding: 16px;
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .viz-title {
@@ -720,7 +720,7 @@ onUnmounted(() => {
 .waveform-container {
   padding: 16px;
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .waveform-container canvas {
@@ -777,7 +777,7 @@ onUnmounted(() => {
   gap: 8px;
   padding: 12px;
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 13px;
 }
 

docs/.vitepress/theme/components/appendix/audio-intro/AudioTokenizationDemo.vue

@@ -334,7 +334,7 @@ onMounted(() => {
 
 <style scoped>
 .audio-tokenization-demo {
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .header-title {
@@ -352,7 +352,7 @@ onMounted(() => {
 
 .codec-flow {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
 }
 
@@ -385,7 +385,7 @@ onMounted(() => {
 
 .step-visual {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 12px;
   margin-bottom: 8px;
   min-height: 80px;
@@ -484,7 +484,7 @@ onMounted(() => {
 
 .bitrate-comparison {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
 }
 
@@ -502,7 +502,7 @@ onMounted(() => {
 
 .bitrate-card {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   text-align: center;
   cursor: pointer;
@@ -549,7 +549,7 @@ onMounted(() => {
 
 .token-visualization {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
 }
 
@@ -561,7 +561,7 @@ onMounted(() => {
 
 .token-display {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   overflow-x: auto;
 }
@@ -619,7 +619,7 @@ onMounted(() => {
 
 .applications {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
 }
 
@@ -637,7 +637,7 @@ onMounted(() => {
 
 .app-card {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   text-align: center;
 }

docs/.vitepress/theme/components/appendix/audio-intro/AudioWaveformDemo.vue

@@ -56,7 +56,7 @@
 <style scoped>
 .waveform-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   background: var(--vp-c-bg-soft);
   margin: 20px 0;

docs/.vitepress/theme/components/appendix/audio-intro/EmotionControlDemo.vue

@@ -319,7 +319,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
 
 <style scoped>
 .emotion-control-demo {
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .header-title {
@@ -337,7 +337,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
 
 .emotion-selector {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
 }
 
@@ -354,7 +354,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
 
 .emotion-card {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   text-align: center;
   cursor: pointer;
@@ -389,7 +389,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
 
 .emotion-embedding {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
 }
 
@@ -404,7 +404,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
   height: auto;
   max-height: 200px;
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .embedding-legend {
@@ -430,7 +430,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
 
 .parameter-controls {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
 }
 
@@ -447,7 +447,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
 
 .control-item {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
 }
 
@@ -468,7 +468,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
 
 .preview-section {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
 }
 
@@ -488,7 +488,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
 
 .tech-explanation {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
 }
 

docs/.vitepress/theme/components/appendix/audio-intro/MelSpectrogramDemo.vue

@@ -342,7 +342,7 @@ watch([selectedType, fftSize, melBins], updateVisualization)
   margin-bottom: 24px;
   padding: 16px;
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .audio-types {
@@ -405,7 +405,7 @@ watch([selectedType, fftSize, melBins], updateVisualization)
 
 .visualization {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   margin-bottom: 20px;
 }
@@ -416,7 +416,7 @@ watch([selectedType, fftSize, melBins], updateVisualization)
 
 .viz-section.highlight {
   border: 2px solid #67c23a;
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 12px;
 }
 
@@ -486,7 +486,7 @@ watch([selectedType, fftSize, melBins], updateVisualization)
 
 .explanation {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   margin-bottom: 20px;
 }
@@ -518,7 +518,7 @@ watch([selectedType, fftSize, melBins], updateVisualization)
   height: 80px;
   padding: 10px;
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .freq-bars .bar {
@@ -545,7 +545,7 @@ watch([selectedType, fftSize, melBins], updateVisualization)
   gap: 12px;
   padding: 16px;
   background: var(--vp-c-bg-mute);
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 13px;
   line-height: 1.6;
 }

docs/.vitepress/theme/components/appendix/audio-intro/TTSPipelineDemo.vue

@@ -301,7 +301,7 @@ watch([selectedArch, activeStage], drawVisualization)
 .arch-btn {
   padding: 12px 20px;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg);
   cursor: pointer;
   display: flex;
@@ -344,7 +344,7 @@ watch([selectedArch, activeStage], drawVisualization)
   flex-wrap: wrap;
   padding: 20px;
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   margin-bottom: 20px;
 }
 
@@ -358,7 +358,7 @@ watch([selectedArch, activeStage], drawVisualization)
 .stage-content {
   background: var(--vp-c-bg-soft);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 12px 16px;
   text-align: center;
   transition: all 0.2s;
@@ -406,7 +406,7 @@ watch([selectedArch, activeStage], drawVisualization)
 
 .stage-detail {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   margin-bottom: 20px;
 }
@@ -433,7 +433,7 @@ watch([selectedArch, activeStage], drawVisualization)
 
 .detail-canvas {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   margin-bottom: 16px;
 }
 
@@ -459,7 +459,7 @@ watch([selectedArch, activeStage], drawVisualization)
 
 .comparison-table {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   margin-bottom: 20px;
 }
@@ -475,7 +475,7 @@ watch([selectedArch, activeStage], drawVisualization)
   flex-direction: column;
   gap: 1px;
   background: var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
 }
 
@@ -510,7 +510,7 @@ watch([selectedArch, activeStage], drawVisualization)
 
 .models-section {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   margin-bottom: 20px;
 }
@@ -529,7 +529,7 @@ watch([selectedArch, activeStage], drawVisualization)
 
 .model-card {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   text-align: center;
   border: 2px solid transparent;
@@ -567,7 +567,7 @@ watch([selectedArch, activeStage], drawVisualization)
   gap: 12px;
   padding: 16px;
   background: var(--vp-c-bg-mute);
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 13px;
   line-height: 1.6;
 }

docs/.vitepress/theme/components/appendix/audio-intro/VoiceCloningDemo.vue

@@ -369,7 +369,7 @@ onMounted(() => {
 
 .demo-area {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   margin-bottom: 20px;
 }
@@ -412,7 +412,7 @@ onMounted(() => {
 .audio-card {
   background: var(--vp-c-bg-soft);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   text-align: center;
   cursor: pointer;
@@ -472,7 +472,7 @@ onMounted(() => {
   width: 100%;
   padding: 12px;
   border: 2px dashed var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
   cursor: pointer;
   color: var(--vp-c-text-2);
@@ -499,7 +499,7 @@ onMounted(() => {
   gap: 8px;
   padding: 12px 16px;
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   opacity: 0.5;
   transition: all 0.3s;
 }
@@ -525,7 +525,7 @@ onMounted(() => {
 
 .feature-viz {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   text-align: center;
 }
@@ -545,7 +545,7 @@ onMounted(() => {
   width: 100%;
   padding: 12px;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
   font-size: 14px;
   resize: vertical;
@@ -558,7 +558,7 @@ onMounted(() => {
   background: linear-gradient(120deg, #409eff, #67c23a);
   color: white;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 15px;
   font-weight: 500;
   cursor: pointer;
@@ -595,7 +595,7 @@ onMounted(() => {
   margin-top: 16px;
   padding: 16px;
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   border: 2px solid #67c23a;
 }
 
@@ -653,7 +653,7 @@ onMounted(() => {
 
 .tips-section {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   margin-bottom: 20px;
 }
@@ -675,7 +675,7 @@ onMounted(() => {
   gap: 12px;
   padding: 16px;
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .tip-icon {
@@ -699,7 +699,7 @@ onMounted(() => {
   gap: 12px;
   padding: 16px;
   background: var(--vp-c-bg-mute);
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 13px;
   line-height: 1.6;
 }

docs/.vitepress/theme/components/appendix/auth-design/AuthBasicsDemo.vue

@@ -131,9 +131,9 @@ const active = computed(
 .auth-basics-demo {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .header {
@@ -197,8 +197,8 @@ const active = computed(
 .card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .card-title {
@@ -233,7 +233,7 @@ const active = computed(
 .box {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-alt);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
 }
 

docs/.vitepress/theme/components/appendix/auth-design/AuthEvolutionDemo.vue

@@ -127,9 +127,9 @@ const active = computed(
 .auth-evolution-demo {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .header {
@@ -151,13 +151,13 @@ const active = computed(
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .stage {
   text-align: left;
   padding: 0.75rem;
-  border-radius: 8px;
+  border-radius: 6px;
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg);
   cursor: pointer;
@@ -193,8 +193,8 @@ const active = computed(
 .card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .card-title {
@@ -219,7 +219,7 @@ const active = computed(
 .box {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-alt);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
 }
 

docs/.vitepress/theme/components/appendix/auth-design/AuthInteractiveLoginDemo.vue

@@ -377,9 +377,9 @@ const resetDemo = () => {
 .auth-interactive-login {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .header {
@@ -421,7 +421,7 @@ const resetDemo = () => {
 .mode-btn {
   padding: 0.6rem 1.2rem;
   border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg);
   cursor: pointer;
   font-size: 0.9rem;
@@ -616,8 +616,8 @@ const resetDemo = () => {
 
 .flow-stage {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   border: 1px solid var(--vp-c-divider);
   animation: slideIn 0.4s ease;
 }
@@ -827,7 +827,7 @@ const resetDemo = () => {
 .reset-btn {
   padding: 0.75rem 2rem;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   background: #64748b;
   color: white;
   font-weight: 600;

docs/.vitepress/theme/components/appendix/auth-design/AuthNvsAuthZDemo.vue

@@ -149,9 +149,9 @@ const decisionLog = computed(() => {
 .authn-authz-demo {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .header {
@@ -179,8 +179,8 @@ const decisionLog = computed(() => {
 .card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .card-title {
@@ -229,7 +229,7 @@ const decisionLog = computed(() => {
 .result {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-alt);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
   margin-bottom: 0.75rem;
 }

docs/.vitepress/theme/components/appendix/auth-design/CSRFDefenseDemo.vue

@@ -153,9 +153,9 @@ const reset = () => {
 .csrf-demo {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .header {
@@ -218,8 +218,8 @@ const reset = () => {
 .card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .card-title {
@@ -237,7 +237,7 @@ const reset = () => {
   margin-top: 0.75rem;
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-alt);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
 }
 
@@ -272,7 +272,7 @@ const reset = () => {
   margin-top: 0.75rem;
   border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
   background: rgba(var(--vp-c-brand-rgb), 0.06);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
 }
 

docs/.vitepress/theme/components/appendix/auth-design/JWTWorkflowDemo.vue

@@ -174,9 +174,9 @@ const copy = async (text) => {
 .jwt-workflow-demo {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .header {
@@ -239,8 +239,8 @@ const copy = async (text) => {
 .card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .card-title {
@@ -277,7 +277,7 @@ const copy = async (text) => {
   min-width: 220px;
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-alt);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
   opacity: 0.6;
 }
@@ -308,7 +308,7 @@ const copy = async (text) => {
   margin-top: 0.75rem;
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-alt);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
 }
 
@@ -339,7 +339,7 @@ const copy = async (text) => {
   margin-top: 0.75rem;
   border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
   background: rgba(var(--vp-c-brand-rgb), 0.06);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
 }
 

docs/.vitepress/theme/components/appendix/auth-design/OAuth2FlowDemo.vue

@@ -200,9 +200,9 @@ const copy = async (text) => {
 .oauth2-demo {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .header {
@@ -265,8 +265,8 @@ const copy = async (text) => {
 .card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .card-title {
@@ -300,7 +300,7 @@ const copy = async (text) => {
   margin-top: 0.75rem;
   border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
   background: rgba(var(--vp-c-brand-rgb), 0.06);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
 }
 

docs/.vitepress/theme/components/appendix/auth-design/PasswordHashingDemo.vue

@@ -227,9 +227,9 @@ onMounted(() => {
 .password-hashing-demo {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .header {
@@ -258,8 +258,8 @@ onMounted(() => {
 .card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .card-title {
@@ -345,7 +345,7 @@ onMounted(() => {
 .mono-box {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-alt);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
   overflow-x: auto;
 }
@@ -366,7 +366,7 @@ onMounted(() => {
   margin-top: 0.75rem;
   border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
   background: rgba(var(--vp-c-brand-rgb), 0.06);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
 }
 

docs/.vitepress/theme/components/appendix/auth-design/SessionCookieDemo.vue

@@ -193,9 +193,9 @@ Set-Cookie: session_id=; Max-Age=0`
 .session-demo {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .header {
@@ -258,8 +258,8 @@ Set-Cookie: session_id=; Max-Age=0`
 .card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .card-title {
@@ -271,7 +271,7 @@ Set-Cookie: session_id=; Max-Age=0`
 .box {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-alt);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
   margin-bottom: 0.75rem;
 }
@@ -339,7 +339,7 @@ Set-Cookie: session_id=; Max-Age=0`
   margin-top: 0.75rem;
   border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
   background: rgba(var(--vp-c-brand-rgb), 0.06);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
 }
 

docs/.vitepress/theme/components/appendix/auth-design/SessionVsJWTDemo.vue

@@ -194,9 +194,9 @@ const recommendation = computed(() => {
 .session-vs-jwt-demo {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .header {
@@ -224,8 +224,8 @@ const recommendation = computed(() => {
 .card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .card-title {
@@ -294,7 +294,7 @@ const recommendation = computed(() => {
 .box {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-alt);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
   margin-top: 0.75rem;
 }

docs/.vitepress/theme/components/appendix/backend-evolution/ArchitectureComparisonDemo.vue

@@ -112,51 +112,49 @@ const currentEra = computed(() => {
 <style scoped>
 .architecture-comparison-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
-  overflow-y: auto;
 }
 
 .demo-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.4rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
-  padding-bottom: 0.75rem;
+  padding-bottom: 0.4rem;
   border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .demo-header .icon {
-  font-size: 1.25rem;
+  font-size: 1rem;
 }
 
 .demo-header .title {
   font-weight: bold;
-  font-size: 1rem;
+  font-size: 0.9rem;
   color: var(--vp-c-text-1);
 }
 
 .demo-header .subtitle {
   color: var(--vp-c-text-2);
-  font-size: 0.85rem;
+  font-size: 0.75rem;
-  margin-left: 0.5rem;
+  margin-left: 0.4rem;
 }
 
 .comparison-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 0.75rem;
+  gap: 0.4rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .era-card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 4px;
-  padding: 1rem;
+  padding: 0.5rem;
   text-align: center;
   cursor: pointer;
   transition: all 0.2s;
@@ -164,7 +162,7 @@ const currentEra = computed(() => {
 
 .era-card:hover {
   border-color: var(--vp-c-brand);
-  transform: translateY(-2px);
+  transform: translateY(-1px);
 }
 
 .era-card.active {
@@ -173,86 +171,86 @@ const currentEra = computed(() => {
 }
 
 .era-icon {
-  font-size: 1.5rem;
+  font-size: 1rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
 }
 
 .era-name {
   font-weight: 600;
-  font-size: 0.9rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-1);
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.1rem;
 }
 
 .era-year {
-  font-size: 0.75rem;
+  font-size: 0.6rem;
   color: var(--vp-c-text-3);
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
 }
 
 .era-tag {
   display: inline-block;
-  padding: 0.15rem 0.5rem;
+  padding: 0.1rem 0.3rem;
   background: var(--vp-c-bg-soft);
-  border-radius: 10px;
+  border-radius: 6px;
-  font-size: 0.7rem;
+  font-size: 0.55rem;
   color: var(--vp-c-text-2);
 }
 
 .detail-panel {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 4px;
-  padding: 1.5rem;
+  padding: 0.5rem;
 }
 
 .detail-header {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.4rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.5rem;
-  padding-bottom: 1rem;
+  padding-bottom: 0.4rem;
   border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .detail-icon {
-  font-size: 1.5rem;
+  font-size: 1rem;
 }
 
 .detail-header h5 {
   margin: 0;
-  font-size: 1.1rem;
+  font-size: 0.85rem;
   color: var(--vp-c-text-1);
 }
 
 .detail-content {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 1.5rem;
+  gap: 0.4rem;
 }
 
 .feature-section {
   background: var(--vp-c-bg-soft);
-  border-radius: 6px;
+  border-radius: 4px;
-  padding: 1rem;
+  padding: 0.4rem;
 }
 
 .feature-section h6 {
-  margin: 0 0 0.75rem 0;
+  margin: 0 0 0.3rem 0;
-  font-size: 0.85rem;
+  font-size: 0.7rem;
   color: var(--vp-c-brand);
 }
 
 .feature-section ul {
   margin: 0;
-  padding-left: 1.25rem;
+  padding-left: 0.75rem;
-  font-size: 0.85rem;
+  font-size: 0.65rem;
   color: var(--vp-c-text-2);
 }
 
 .feature-section li {
-  margin-bottom: 0.4rem;
+  margin-bottom: 0.15rem;
-  line-height: 1.5;
+  line-height: 1.3;
 }
 
 .feature-section li:last-child {
@@ -262,40 +260,40 @@ const currentEra = computed(() => {
 .tech-stack {
   grid-column: 1 / -1;
   background: var(--vp-c-bg-soft);
-  border-radius: 6px;
+  border-radius: 4px;
-  padding: 1rem;
+  padding: 0.4rem;
 }
 
 .tech-stack h6 {
-  margin: 0 0 0.75rem 0;
+  margin: 0 0 0.3rem 0;
-  font-size: 0.85rem;
+  font-size: 0.7rem;
   color: var(--vp-c-brand);
 }
 
 .tech-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
 .tech-tag {
-  padding: 0.25rem 0.75rem;
+  padding: 0.15rem 0.4rem;
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 4px;
+  border-radius: 3px;
-  font-size: 0.8rem;
+  font-size: 0.6rem;
   color: var(--vp-c-text-2);
 }
 
 .info-box {
   background: var(--vp-c-bg-alt);
-  padding: 0.75rem;
+  padding: 0.5rem;
-  border-radius: 6px;
+  border-radius: 4px;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-2);
-  margin-top: 0.75rem;
+  margin-top: 0.5rem;
   display: flex;
-  gap: 0.25rem;
+  gap: 0.2rem;
 }
 
 .info-box .icon {

docs/.vitepress/theme/components/appendix/backend-evolution/BackendEvolutionDemo.vue

@@ -433,8 +433,8 @@ const stages = [
 .server-box {
   background: #cbd5e1;
   border: 2px solid #94a3b8;
-  padding: 1rem;
+  padding: 0.75rem;
-  border-radius: 8px;
+  border-radius: 6px;
   text-align: center;
 }
 .file-system {
@@ -464,7 +464,7 @@ const stages = [
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4px;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 .module {
   background: #bfdbfe;

docs/.vitepress/theme/components/appendix/backend-evolution/BackendQuickStartDemo.vue

@@ -367,7 +367,7 @@ const currentStageData = computed(() => stageData[currentStage.value])
   gap: 10px;
   padding: 10px 12px;
   background: rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 13px;
 }
 

docs/.vitepress/theme/components/appendix/backend-evolution/ContainerDockerDemo.vue

@@ -73,52 +73,50 @@ const benefits = [
 <style scoped>
 .container-docker-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
-  overflow-y: auto;
 }
 
 .demo-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.4rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
-  padding-bottom: 0.75rem;
+  padding-bottom: 0.4rem;
   border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .demo-header .icon {
-  font-size: 1.25rem;
+  font-size: 1rem;
 }
 
 .demo-header .title {
   font-weight: bold;
-  font-size: 1rem;
+  font-size: 0.9rem;
   color: var(--vp-c-text-1);
 }
 
 .demo-header .subtitle {
   color: var(--vp-c-text-2);
-  font-size: 0.85rem;
+  font-size: 0.75rem;
-  margin-left: 0.5rem;
+  margin-left: 0.4rem;
 }
 
 .docker-visualization {
   display: flex;
-  gap: 1rem;
+  gap: 0.5rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.75rem;
   align-items: stretch;
 }
 
 .layer {
   flex: 1;
   background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
+  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 4px;
-  padding: 1rem;
+  padding: 0.5rem;
   cursor: pointer;
   transition: all 0.3s;
 }
@@ -129,9 +127,9 @@ const benefits = [
 }
 
 .layer h5 {
-  margin: 0 0 1rem 0;
+  margin: 0 0 0.5rem 0;
   text-align: center;
-  font-size: 0.95rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-1);
 }
 
@@ -139,14 +137,14 @@ const benefits = [
 .docker-stack {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
 .layer-item {
-  padding: 0.6rem;
+  padding: 0.3rem;
-  border-radius: 4px;
+  border-radius: 3px;
   text-align: center;
-  font-size: 0.8rem;
+  font-size: 0.65rem;
 }
 
 .layer-item.app {
@@ -181,47 +179,47 @@ const benefits = [
 .containers {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
 .container-box {
   background: rgba(102, 126, 234, 0.1);
   border: 1px solid rgba(102, 126, 234, 0.3);
-  border-radius: 6px;
+  border-radius: 4px;
-  padding: 0.5rem;
+  padding: 0.25rem;
   text-align: center;
 }
 
 .container-app {
   font-weight: 600;
-  font-size: 0.8rem;
+  font-size: 0.65rem;
   color: var(--vp-c-brand);
-  margin-bottom: 0.2rem;
+  margin-bottom: 0.1rem;
 }
 
 .container-deps {
-  font-size: 0.7rem;
+  font-size: 0.55rem;
   color: var(--vp-c-text-2);
 }
 
 .docker-engine {
-  padding: 0.6rem;
+  padding: 0.3rem;
   background: rgba(16, 185, 129, 0.1);
   border: 1px solid rgba(16, 185, 129, 0.3);
-  border-radius: 4px;
+  border-radius: 3px;
   text-align: center;
-  font-size: 0.8rem;
+  font-size: 0.65rem;
   font-weight: 600;
   color: #059669;
 }
 
 .host-os,
 .hardware {
-  padding: 0.6rem;
+  padding: 0.3rem;
   background: var(--vp-c-bg-soft);
-  border-radius: 4px;
+  border-radius: 3px;
   text-align: center;
-  font-size: 0.8rem;
+  font-size: 0.65rem;
   color: var(--vp-c-text-2);
 }
 
@@ -230,45 +228,45 @@ const benefits = [
   align-items: center;
   font-weight: 700;
   color: var(--vp-c-text-3);
-  font-size: 0.9rem;
+  font-size: 0.75rem;
 }
 
 .benefits-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(4, 1fr);
-  gap: 1rem;
+  gap: 0.4rem;
 }
 
 .benefit-card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 4px;
-  padding: 1rem;
+  padding: 0.5rem;
   text-align: center;
   transition: all 0.2s;
 }
 
 .benefit-card:hover {
   border-color: var(--vp-c-brand);
-  transform: translateY(-2px);
+  transform: translateY(-1px);
 }
 
 .benefit-icon {
-  font-size: 2rem;
+  font-size: 1.25rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
 }
 
 .benefit-title {
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-1);
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.1rem;
 }
 
 .benefit-desc {
-  font-size: 0.8rem;
+  font-size: 0.65rem;
   color: var(--vp-c-text-2);
-  line-height: 1.4;
+  line-height: 1.3;
 }
 
 @media (max-width: 768px) {
@@ -278,23 +276,23 @@ const benefits = [
 
   .vs-divider {
     justify-content: center;
-    padding: 0.5rem 0;
+    padding: 0.25rem 0;
   }
 
   .benefits-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 .info-box {
   background: var(--vp-c-bg-alt);
-  padding: 0.75rem;
+  padding: 0.5rem;
-  border-radius: 6px;
+  border-radius: 4px;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-2);
-  margin-top: 1rem;
+  margin-top: 0.5rem;
   display: flex;
-  gap: 0.25rem;
+  gap: 0.2rem;
 }
 
 .info-box .icon {

docs/.vitepress/theme/components/appendix/backend-evolution/DeploymentFlowDemo.vue

@@ -96,10 +96,10 @@ const steps = [
 <style scoped>
 .deployment-flow-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
@@ -185,7 +185,7 @@ const steps = [
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
   border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .step-detail h5 {

docs/.vitepress/theme/components/appendix/backend-evolution/EvolutionIntroDemo.vue

@@ -123,50 +123,48 @@ const stages = [
 <style scoped>
 .evolution-intro-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
-  overflow-y: auto;
 }
 
 .demo-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.4rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
-  padding-bottom: 0.75rem;
+  padding-bottom: 0.4rem;
   border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .demo-header .icon {
-  font-size: 1.25rem;
+  font-size: 1rem;
 }
 
 .demo-header .title {
   font-weight: bold;
-  font-size: 1rem;
+  font-size: 0.9rem;
   color: var(--vp-c-text-1);
 }
 
 .demo-header .subtitle {
   color: var(--vp-c-text-2);
-  font-size: 0.85rem;
+  font-size: 0.75rem;
-  margin-left: 0.5rem;
+  margin-left: 0.4rem;
 }
 
 .timeline-cards {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 0.75rem;
+  gap: 0.4rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 
 .stage-card {
   background: var(--vp-c-bg);
-  border: 2px solid transparent;
+  border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: 4px;
   padding: 0.75rem 0.5rem;
   text-align: center;
   cursor: pointer;
@@ -175,68 +173,67 @@ const stages = [
 
 .stage-card:hover {
   border-color: var(--vp-c-brand);
-  transform: translateY(-2px);
+  transform: translateY(-1px);
 }
 
 .stage-card.active {
   border-color: var(--vp-c-brand);
   background: var(--vp-c-brand-soft);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .stage-era {
-  font-size: 0.7rem;
+  font-size: 0.6rem;
   color: var(--vp-c-text-3);
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.1rem;
 }
 
 .stage-icon {
-  font-size: 1.5rem;
+  font-size: 1rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.2rem;
 }
 
 .stage-name {
-  font-size: 0.85rem;
+  font-size: 0.7rem;
   font-weight: 600;
   color: var(--vp-c-text-1);
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.1rem;
 }
 
 .stage-arch {
-  font-size: 0.7rem;
+  font-size: 0.55rem;
   color: var(--vp-c-text-3);
 }
 
 .stage-detail {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 4px;
-  padding: 1rem;
+  padding: 0.5rem;
 }
 
 .detail-panel {
-  animation: fadeIn 0.4s ease;
+  animation: fadeIn 0.3s ease;
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
+  from { opacity: 0; transform: translateY(5px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
 .detail-header {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.4rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
-  padding-bottom: 0.75rem;
+  padding-bottom: 0.4rem;
   border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .detail-icon {
-  font-size: 1.5rem;
+  font-size: 1rem;
 }
 
 .detail-header h4 {
-  font-size: 1rem;
+  font-size: 0.85rem;
   font-weight: 600;
   margin: 0;
   color: var(--vp-c-text-1);
@@ -244,31 +241,32 @@ const stages = [
 
 .detail-content {
   display: grid;
-  gap: 0.75rem;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.4rem;
 }
 
 .detail-section h5 {
-  font-size: 0.85rem;
+  font-size: 0.7rem;
   font-weight: 600;
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 0.3rem 0;
   color: var(--vp-c-brand);
 }
 
 .detail-section p {
-  font-size: 0.8rem;
+  font-size: 0.65rem;
-  line-height: 1.6;
+  line-height: 1.4;
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 0.3rem 0;
   color: var(--vp-c-text-2);
 }
 
 .detail-section ul {
   margin: 0;
-  padding-left: 1rem;
+  padding-left: 0.75rem;
 }
 
 .detail-section li {
-  font-size: 0.8rem;
+  font-size: 0.6rem;
-  line-height: 1.6;
+  line-height: 1.4;
   margin-bottom: 0.25rem;
   color: var(--vp-c-text-2);
 }

docs/.vitepress/theme/components/appendix/backend-evolution/KubernetesDemo.vue

@@ -240,10 +240,10 @@ const resetCluster = () => {
 <style scoped>
 .container-docker-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
@@ -273,8 +273,8 @@ const resetCluster = () => {
   flex: 1;
   background: var(--vp-c-bg);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   cursor: pointer;
   transition: all 0.3s;
 }
@@ -398,8 +398,8 @@ const resetCluster = () => {
 .benefit-card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   text-align: center;
   transition: all 0.2s;
 }

docs/.vitepress/theme/components/appendix/backend-evolution/MicroserviceLatencyDemo.vue

@@ -150,7 +150,7 @@ const insightIcon = computed(() => {
 .architecture {
   background: var(--vp-c-bg);
   border-radius: 10px;
-  padding: 1rem;
+  padding: 0.75rem;
   border: 1px solid var(--vp-c-divider);
 }
 
@@ -248,7 +248,7 @@ const insightIcon = computed(() => {
   margin-top: 1.5rem;
   padding: 0.75rem 1rem;
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   border: 1px solid var(--vp-c-divider);
 }
 

docs/.vitepress/theme/components/appendix/backend-evolution/MicroservicesDemo.vue

@@ -134,10 +134,10 @@ const resetFlow = () => {
 <style scoped>
 .microservices-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
@@ -166,8 +166,8 @@ const resetFlow = () => {
 .service-card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   cursor: pointer;
   transition: all 0.2s;
 }
@@ -249,8 +249,8 @@ const resetFlow = () => {
 .communication-flow {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .communication-flow h5 {

docs/.vitepress/theme/components/appendix/backend-evolution/MonolithDemo.vue

@@ -131,52 +131,50 @@ const reset = () => {
 <style scoped>
 .monolith-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
-  overflow-y: auto;
 }
 
 .demo-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.4rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
-  padding-bottom: 0.75rem;
+  padding-bottom: 0.4rem;
   border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .demo-header .icon {
-  font-size: 1.25rem;
+  font-size: 1rem;
 }
 
 .demo-header .title {
   font-weight: bold;
-  font-size: 1rem;
+  font-size: 0.9rem;
   color: var(--vp-c-text-1);
 }
 
 .demo-header .subtitle {
   color: var(--vp-c-text-2);
-  font-size: 0.85rem;
+  font-size: 0.75rem;
-  margin-left: 0.5rem;
+  margin-left: 0.4rem;
 }
 
 .monolith-diagram {
   display: flex;
-  gap: 1.5rem;
+  gap: 0.75rem;
   align-items: flex-start;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .monolith-box {
   flex: 1;
   background: var(--vp-c-bg);
   border: 2px solid var(--vp-c-brand);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.5rem;
   transition: all 0.3s;
 }
 
@@ -189,23 +187,24 @@ const reset = () => {
   text-align: center;
   font-weight: 600;
   color: var(--vp-c-brand);
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.25rem;
   border-bottom: 1px solid var(--vp-c-divider);
+  font-size: 0.75rem;
 }
 
 .modules-container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
+  gap: 0.4rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 
 .module-box {
   background: var(--vp-c-bg-soft);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
+  border-radius: 4px;
-  padding: 0.75rem;
+  padding: 0.4rem;
   text-align: center;
   cursor: pointer;
   transition: all 0.2s;
@@ -226,21 +225,21 @@ const reset = () => {
 }
 
 .module-icon {
-  font-size: 1.5rem;
+  font-size: 1rem;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.1rem;
 }
 
 .module-name {
-  font-size: 0.8rem;
+  font-size: 0.65rem;
   font-weight: 600;
   color: var(--vp-c-text-1);
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.1rem;
 }
 
 .module-status {
-  font-size: 0.7rem;
+  font-size: 0.55rem;
-  padding: 0.1rem 0.4rem;
+  padding: 0.05rem 0.25rem;
-  border-radius: 10px;
+  border-radius: 6px;
   display: inline-block;
 }
 
@@ -263,38 +262,38 @@ const reset = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: 0.3rem;
-  padding: 0.75rem;
+  padding: 0.4rem;
   background: var(--vp-c-bg-soft);
   border: 1px dashed var(--vp-c-divider);
-  border-radius: 6px;
+  border-radius: 4px;
 }
 
 .db-icon {
-  font-size: 1.25rem;
+  font-size: 1rem;
 }
 
 .db-label {
-  font-size: 0.8rem;
+  font-size: 0.65rem;
   color: var(--vp-c-text-2);
 }
 
 .request-flow {
-  width: 150px;
+  width: 100px;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
 .flow-request {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.25rem;
-  padding: 0.5rem;
+  padding: 0.3rem;
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
+  border-radius: 4px;
-  font-size: 0.75rem;
+  font-size: 0.6rem;
 }
 
 .flow-request.active {
@@ -317,19 +316,19 @@ const reset = () => {
 
 .controls {
   display: flex;
-  gap: 0.75rem;
+  gap: 0.4rem;
   justify-content: center;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.75rem;
   flex-wrap: wrap;
 }
 
 .control-btn {
-  padding: 0.5rem 1rem;
+  padding: 0.3rem 0.6rem;
-  border-radius: 6px;
+  border-radius: 4px;
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg);
   color: var(--vp-c-text-1);
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   cursor: pointer;
   transition: all 0.2s;
 }
@@ -347,34 +346,6 @@ const reset = () => {
   background: rgba(239, 68, 68, 0.1);
 }
 
-.demo-explanation {
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--vp-c-divider);
-}
-
-.demo-explanation h5 {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin: 0 0 0.75rem 0;
-}
-
-.demo-explanation ul {
-  margin: 0 0 1rem 0;
-  padding-left: 1.25rem;
-}
-
-.demo-explanation li {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  margin-bottom: 0.4rem;
-}
-
-.demo-explanation li strong {
-  color: var(--vp-c-text-1);
-}
-
 @media (max-width: 768px) {
   .monolith-diagram {
     flex-direction: column;
@@ -389,13 +360,13 @@ const reset = () => {
 
 .info-box {
   background: var(--vp-c-bg-alt);
-  padding: 0.75rem;
+  padding: 0.5rem;
-  border-radius: 6px;
+  border-radius: 4px;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-2);
-  margin-top: 1rem;
+  margin-top: 0.5rem;
   display: flex;
-  gap: 0.25rem;
+  gap: 0.2rem;
 }
 
 .info-box .icon {

docs/.vitepress/theme/components/appendix/backend-evolution/MonolithReleaseRiskDemo.vue

@@ -159,7 +159,7 @@ const deployRelease = () => {
 
 .module-btn {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg);
   padding: 0.5rem;
   font-size: 0.9rem;
@@ -186,7 +186,7 @@ const deployRelease = () => {
 .risk-meter {
   background: var(--vp-c-bg);
   border-radius: 10px;
-  padding: 1rem;
+  padding: 0.75rem;
   border: 1px solid var(--vp-c-divider);
 }
 
@@ -217,7 +217,7 @@ const deployRelease = () => {
   margin-top: 1rem;
   width: 100%;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.6rem;
   background: var(--vp-c-brand);
   color: #fff;
@@ -229,7 +229,7 @@ const deployRelease = () => {
   margin-top: 0.75rem;
   font-size: 0.9rem;
   padding: 0.5rem 0.75rem;
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg);
   border: 1px dashed var(--vp-c-divider);
 }

docs/.vitepress/theme/components/appendix/backend-evolution/MonolithVsMicroserviceDemo.vue

@@ -79,10 +79,10 @@ const reset = () => {
 <style scoped>
 .monolith-microservice-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .controls {
@@ -129,8 +129,8 @@ const reset = () => {
 .architecture-block {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -146,8 +146,8 @@ const reset = () => {
 .server-container {
   border: 2px solid #3b82f6;
   background: #eff6ff;
-  padding: 1rem;
+  padding: 0.75rem;
-  border-radius: 8px;
+  border-radius: 6px;
   width: 100%;
   text-align: center;
   transition: all 0.3s;

docs/.vitepress/theme/components/appendix/backend-evolution/PhysicalServerDemo.vue

@@ -173,88 +173,86 @@ const sendRequest = async () => {
 <style scoped>
 .physical-server-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
-  overflow-y: auto;
 }
 
 .demo-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.4rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
-  padding-bottom: 0.75rem;
+  padding-bottom: 0.4rem;
   border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .demo-header .icon {
-  font-size: 1.25rem;
+  font-size: 1rem;
 }
 
 .demo-header .title {
   font-weight: bold;
-  font-size: 1rem;
+  font-size: 0.9rem;
   color: var(--vp-c-text-1);
 }
 
 .demo-header .subtitle {
   color: var(--vp-c-text-2);
-  font-size: 0.85rem;
+  font-size: 0.75rem;
-  margin-left: 0.5rem;
+  margin-left: 0.4rem;
 }
 
 .demo-stage {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
-  gap: 1rem;
+  gap: 0.5rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .client-zone,
 .server-zone {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.5rem;
 }
 
 .zone-title {
-  font-size: 0.85rem;
+  font-size: 0.7rem;
   font-weight: 600;
   color: var(--vp-c-brand);
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.4rem;
   text-align: center;
 }
 
 .request-queue {
-  min-height: 60px;
+  min-height: 40px;
   background: var(--vp-c-bg-soft);
-  border-radius: 6px;
+  border-radius: 4px;
-  padding: 0.5rem;
+  padding: 0.3rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.4rem;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.15rem;
 }
 
 .request-card {
   background: var(--vp-c-brand);
   color: white;
-  border-radius: 4px;
+  border-radius: 3px;
-  padding: 0.4rem 0.5rem;
+  padding: 0.25rem 0.3rem;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.3rem;
-  font-size: 0.75rem;
+  font-size: 0.6rem;
 }
 
 .req-method {
   background: rgba(255, 255, 255, 0.2);
-  padding: 0.1rem 0.3rem;
+  padding: 0.05rem 0.2rem;
-  border-radius: 3px;
+  border-radius: 2px;
   font-weight: 600;
 }
 
@@ -263,9 +261,9 @@ const sendRequest = async () => {
   background: var(--vp-c-brand);
   color: white;
   border: none;
-  border-radius: 6px;
+  border-radius: 4px;
-  padding: 0.6rem;
+  padding: 0.4rem;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   cursor: pointer;
   transition: all 0.2s;
 }
@@ -284,12 +282,12 @@ const sendRequest = async () => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-width: 60px;
+  min-width: 40px;
 }
 
 .network-line {
-  width: 3px;
+  width: 2px;
-  height: 120px;
+  height: 80px;
   background: var(--vp-c-divider);
   border-radius: 2px;
   position: relative;
@@ -303,29 +301,29 @@ const sendRequest = async () => {
 }
 
 .latency-display {
-  margin-top: 0.5rem;
+  margin-top: 0.3rem;
-  font-size: 0.75rem;
+  font-size: 0.6rem;
   color: var(--vp-c-brand);
   font-weight: 600;
 }
 
 .server-status {
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.4rem;
 }
 
 .status-indicator {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.3rem;
-  padding: 0.5rem;
+  padding: 0.3rem;
   background: var(--vp-c-bg-soft);
-  border-radius: 6px;
+  border-radius: 4px;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.3rem;
 }
 
 .status-dot {
-  width: 8px;
+  width: 6px;
-  height: 8px;
+  height: 6px;
   border-radius: 50%;
   background: var(--vp-c-success);
 }
@@ -341,59 +339,59 @@ const sendRequest = async () => {
 }
 
 .status-text {
-  font-size: 0.8rem;
+  font-size: 0.65rem;
   color: var(--vp-c-text-2);
 }
 
 .cpu-usage {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.3rem;
 }
 
 .cpu-bar {
   flex: 1;
-  height: 6px;
+  height: 4px;
   background: var(--vp-c-bg-soft);
-  border-radius: 3px;
+  border-radius: 2px;
   overflow: hidden;
 }
 
 .cpu-fill {
   height: 100%;
   background: var(--vp-c-danger);
-  border-radius: 3px;
+  border-radius: 2px;
   transition: width 0.1s ease;
 }
 
 .cpu-text {
-  font-size: 0.7rem;
+  font-size: 0.55rem;
   color: var(--vp-c-text-2);
-  min-width: 60px;
+  min-width: 50px;
   text-align: right;
 }
 
 .process-queue {
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;
+  gap: 0.25rem;
 }
 
 .process-item {
   background: var(--vp-c-bg-soft);
-  border-radius: 6px;
+  border-radius: 4px;
-  padding: 0.5rem;
+  padding: 0.3rem;
 }
 
 .proc-name {
   display: block;
-  font-size: 0.7rem;
+  font-size: 0.55rem;
   color: var(--vp-c-text-2);
-  margin-bottom: 0.3rem;
+  margin-bottom: 0.2rem;
 }
 
 .proc-progress {
-  height: 4px;
+  height: 3px;
   background: var(--vp-c-bg);
   border-radius: 2px;
   overflow: hidden;
@@ -406,76 +404,32 @@ const sendRequest = async () => {
   transition: width 0.1s linear;
 }
 
-.demo-explanation {
-  margin-top: 1.5rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--vp-c-divider);
-}
-
-.demo-explanation h5 {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin: 0 0 0.75rem 0;
-}
-
-.demo-explanation ul {
-  margin: 0 0 1rem 0;
-  padding-left: 1.25rem;
-}
-
-.demo-explanation li {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  margin-bottom: 0.4rem;
-}
-
-.demo-explanation li strong {
-  color: var(--vp-c-text-1);
-}
-
-.demo-conclusion {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  margin: 0;
-  padding: 0.75rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-}
-
-.highlight {
-  color: var(--vp-c-brand);
-  font-weight: 600;
-}
-
 @media (max-width: 768px) {
   .demo-stage {
     grid-template-columns: 1fr;
-    gap: 1rem;
+    gap: 0.5rem;
   }
 
   .connection-zone {
     flex-direction: row;
-    height: 60px;
+    height: 40px;
   }
 
   .network-line {
     width: 100%;
-    height: 3px;
+    height: 2px;
   }
 }
 
 .info-box {
   background: var(--vp-c-bg-alt);
-  padding: 0.75rem;
+  padding: 0.5rem;
-  border-radius: 6px;
+  border-radius: 4px;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-2);
-  margin-top: 1rem;
+  margin-top: 0.5rem;
   display: flex;
-  gap: 0.25rem;
+  gap: 0.2rem;
 }
 
 .info-box .icon {

docs/.vitepress/theme/components/appendix/backend-evolution/ScalingStrategyDemo.vue

@@ -62,10 +62,10 @@ const comparisonData = [
 <style scoped>
 .scaling-strategy-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {

docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessCostAutoScaleDemo.vue

@@ -142,7 +142,7 @@ const scaleHint = computed(() => {
 .card {
   background: var(--vp-c-bg);
   border-radius: 12px;
-  padding: 1rem;
+  padding: 0.75rem;
   border: 1px solid var(--vp-c-divider);
 }
 

docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessDemo.vue

@@ -161,10 +161,10 @@ onUnmounted(() => {
 <style scoped>
 .serverless-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
   padding: 1.5rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
@@ -199,8 +199,8 @@ onUnmounted(() => {
 .function-card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   cursor: pointer;
   transition: all 0.2s;
   text-align: center;
@@ -276,8 +276,8 @@ onUnmounted(() => {
 .auto-scaling-panel {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .scaling-title {
@@ -335,8 +335,8 @@ onUnmounted(() => {
 .traffic-simulator {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   margin-bottom: 1.5rem;
 }
 

docs/.vitepress/theme/components/appendix/backend-evolution/TechStackTimelineDemo.vue

@@ -103,139 +103,127 @@ const eras = [
 <style scoped>
 .tech-stack-timeline-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
-  overflow-y: auto;
 }
 
 .demo-header {
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 
 .demo-header h4 {
-  margin: 0 0 0.25rem 0;
+  margin: 0 0 0.15rem 0;
-  font-size: 1rem;
+  font-size: 0.9rem;
   color: var(--vp-c-text-1);
 }
 
 .demo-header p {
   margin: 0;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-2);
 }
 
 .timeline {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: repeat(4, 1fr);
-  gap: 0.5rem;
+  gap: 0.4rem;
 }
 
 .era-section {
   display: flex;
-  gap: 0.75rem;
+  flex-direction: column;
+  gap: 0.25rem;
   cursor: pointer;
   transition: all 0.2s;
+  background: var(--vp-c-bg);
+  border-radius: 4px;
+  padding: 0.4rem;
 }
 
 .era-section:hover,
 .era-section.active {
-  background: var(--vp-c-bg);
+  background: var(--vp-c-brand-soft);
-  border-radius: 6px;
 }
 
 .era-marker {
-  display: flex;
+  display: none;
-  flex-direction: column;
-  align-items: center;
-  width: 24px;
 }
 
 .era-dot {
-  width: 12px;
+  display: none;
-  height: 12px;
-  border-radius: 50%;
-  background: var(--vp-c-divider);
-  border: 2px solid var(--vp-c-bg);
-  transition: all 0.2s;
 }
 
 .era-section.active .era-dot {
-  background: var(--vp-c-brand);
+  display: none;
-  border-color: var(--vp-c-brand);
-  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
 }
 
 .era-line {
-  flex: 1;
+  display: none;
-  width: 2px;
-  background: var(--vp-c-divider);
-  margin: 4px 0;
 }
 
 .era-content {
   flex: 1;
-  padding: 0.5rem 0.5rem 0.5rem 0;
 }
 
 .era-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.25rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.3rem;
+  flex-wrap: wrap;
 }
 
 .era-icon {
-  font-size: 1.25rem;
+  font-size: 1rem;
 }
 
 .era-name {
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: 0.7rem;
   color: var(--vp-c-text-1);
 }
 
 .era-period {
-  font-size: 0.75rem;
+  font-size: 0.6rem;
   color: var(--vp-c-text-3);
   background: var(--vp-c-bg-soft);
-  padding: 0.1rem 0.4rem;
+  padding: 0.05rem 0.25rem;
-  border-radius: 4px;
+  border-radius: 3px;
 }
 
 .tech-categories {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(2, 1fr);
+  flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.2rem;
 }
 
 .category {
   background: var(--vp-c-bg-soft);
-  border-radius: 4px;
+  border-radius: 3px;
-  padding: 0.5rem;
+  padding: 0.25rem;
 }
 
 .category-name {
-  font-size: 0.75rem;
+  font-size: 0.6rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.1rem;
 }
 
 .tech-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.25rem;
+  gap: 0.15rem;
 }
 
 .tech-tag {
-  font-size: 0.7rem;
+  font-size: 0.55rem;
-  padding: 0.1rem 0.35rem;
+  padding: 0.05rem 0.2rem;
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 3px;
+  border-radius: 2px;
   color: var(--vp-c-text-2);
 }
 
@@ -246,20 +234,20 @@ const eras = [
 }
 
 @media (max-width: 768px) {
-  .tech-categories {
+  .timeline {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 .info-box {
   background: var(--vp-c-bg-alt);
-  padding: 0.75rem;
+  padding: 0.5rem;
-  border-radius: 6px;
+  border-radius: 4px;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-2);
-  margin-top: 1rem;
+  margin-top: 0.5rem;
   display: flex;
-  gap: 0.25rem;
+  gap: 0.2rem;
 }
 
 .info-box .icon {

docs/.vitepress/theme/components/appendix/backend-languages/BackendLanguagesDemo.vue

@@ -230,12 +230,12 @@ const getCurrentLang = () => {
 <style scoped>
 .backend-languages-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
+  
-  overflow-y: auto;
+  
 }
 
 .demo-header {
@@ -286,10 +286,10 @@ const getCurrentLang = () => {
 }
 
 .language-card {
-  padding: 1rem;
+  padding: 0.75rem;
   background: var(--vp-c-bg-soft);
   border: 2px solid transparent;
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s ease;
   text-align: center;
@@ -338,8 +338,8 @@ const getCurrentLang = () => {
 
 .lang-detail {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   margin-top: 0.75rem;
   border: 1px solid var(--vp-c-divider);
 }

docs/.vitepress/theme/components/appendix/backend-languages/ConcurrencyModelDemo.vue

@@ -149,12 +149,12 @@ const getModelInfo = () => {
 <style scoped>
 .concurrency-model-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
+  
-  overflow-y: auto;
+  
 }
 
 .demo-header {

docs/.vitepress/theme/components/appendix/backend-languages/DeveloperEfficiencyDemo.vue

@@ -93,12 +93,12 @@ const maxTime = computed(() => {
 <style scoped>
 .developer-efficiency-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
+  
-  overflow-y: auto;
+  
 }
 
 .demo-header {

docs/.vitepress/theme/components/appendix/backend-languages/LanguageComparisonDemo.vue

@@ -174,12 +174,12 @@ const getBarClass = (score) => {
 <style scoped>
 .language-comparison-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
+  
-  overflow-y: auto;
+  
 }
 
 .demo-header {

docs/.vitepress/theme/components/appendix/backend-languages/LanguageEcosystemDemo.vue

@@ -89,12 +89,12 @@ const ecosystems = [
 <style scoped>
 .language-ecosystem-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
+  
-  overflow-y: auto;
+  
 }
 
 .demo-header {

docs/.vitepress/theme/components/appendix/backend-languages/LanguageSelectorDemo.vue

@@ -165,12 +165,12 @@ const reset = () => {
 <style scoped>
 .language-selector-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
+  
-  overflow-y: auto;
+  
 }
 
 .demo-header {
@@ -282,8 +282,8 @@ const reset = () => {
 
 .recommendation-panel {
   background: var(--vp-c-bg);
-  padding: 1rem;
+  padding: 0.75rem;
-  border-radius: 8px;
+  border-radius: 6px;
   margin-bottom: 1rem;
   border: 2px solid var(--vp-c-brand);
 }

docs/.vitepress/theme/components/appendix/backend-languages/MemoryManagementDemo.vue

@@ -64,12 +64,12 @@ const models = [
 <style scoped>
 .memory-management-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
+  
-  overflow-y: auto;
+  
 }
 
 .demo-header {
@@ -118,7 +118,7 @@ const models = [
 
 .model-card {
   background: var(--vp-c-bg);
-  padding: 1rem;
+  padding: 0.75rem;
   border-radius: 6px;
   text-align: center;
   border: 1px solid var(--vp-c-divider);

docs/.vitepress/theme/components/appendix/backend-languages/PerformanceBenchmarkDemo.vue

@@ -157,12 +157,12 @@ runBenchmark()
 <style scoped>
 .performance-benchmark-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
+  
-  overflow-y: auto;
+  
 }
 
 .demo-header {

docs/.vitepress/theme/components/appendix/backend-languages/SyntaxComparisonDemo.vue

@@ -122,12 +122,12 @@ const getLineCount = (lang) => {
 <style scoped>
 .syntax-comparison-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
-  max-height: 600px;
+  
-  overflow-y: auto;
+  
 }
 
 .demo-header {
@@ -256,7 +256,7 @@ const getLineCount = (lang) => {
 
 .code-content {
   margin: 0;
-  padding: 1rem;
+  padding: 0.75rem;
   background: #1e1e1e;
   color: #d4d4d4;
   font-family: 'Monaco', 'Menlo', monospace;

docs/.vitepress/theme/components/appendix/backend-layered-architecture/CleanArchitectureDemo.vue

@@ -276,7 +276,7 @@ const tabs = [
   gap: 8px;
   padding: 20px;
   background: #f8f9fa;
-  border-radius: 8px;
+  border-radius: 6px;
   margin-bottom: 20px;
 }
 
@@ -284,7 +284,7 @@ const tabs = [
   width: 100%;
   max-width: 400px;
   padding: 16px;
-  border-radius: 8px;
+  border-radius: 6px;
   text-align: center;
   border-left: 4px solid;
 }
@@ -329,7 +329,7 @@ const tabs = [
 .arch-characteristics {
   padding: 16px;
   background: #f8f9fa;
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .arch-characteristics h5 {
@@ -357,7 +357,7 @@ const tabs = [
   gap: 16px;
   padding: 20px;
   background: #f8f9fa;
-  border-radius: 8px;
+  border-radius: 6px;
   margin-bottom: 20px;
 }
 
@@ -369,7 +369,7 @@ const tabs = [
 
 .clean-layer {
   padding: 12px 16px;
-  border-radius: 8px;
+  border-radius: 6px;
   border-left: 4px solid;
 }
 
@@ -407,7 +407,7 @@ const tabs = [
 
 .dependency-rule {
   background: white;
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   text-align: center;
   border: 2px dashed #1890ff;
@@ -485,7 +485,7 @@ const tabs = [
 
 .rec-card {
   background: #f8f9fa;
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   position: relative;
 }

docs/.vitepress/theme/components/appendix/backend-layered-architecture/ControllerLayerDemo.vue

@@ -250,7 +250,7 @@ const toggleDetails = (section) => {
   margin-top: 12px;
   padding: 16px;
   background: #f0f7ff;
-  border-radius: 8px;
+  border-radius: 6px;
   border-left: 4px solid #409eff;
 }
 
@@ -297,7 +297,7 @@ const toggleDetails = (section) => {
   text-align: center;
   padding: 16px 12px;
   background: #f8f9fa;
-  border-radius: 8px;
+  border-radius: 6px;
   transition: all 0.3s ease;
 }
 

docs/.vitepress/theme/components/appendix/backend-layered-architecture/DependencyDirectionDemo.vue

@@ -180,7 +180,7 @@
 .layer-box {
   padding: 16px 20px;
   background: #f5f7fa;
-  border-radius: 8px;
+  border-radius: 6px;
   font-weight: 500;
   color: #303133;
   text-align: center;

docs/.vitepress/theme/components/appendix/backend-layered-architecture/DtoFlowDemo.vue

@@ -202,7 +202,7 @@ const viewMode = ref('conversion')
 
 .flow-step {
   background: #f8f9fa;
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
   border-left: 4px solid #409eff;
 }
@@ -286,7 +286,7 @@ const viewMode = ref('conversion')
 
 .table-header {
   background: #f5f7fa;
-  border-radius: 8px;
+  border-radius: 6px;
   font-weight: 600;
   color: #303133;
   font-size: 13px;

docs/.vitepress/theme/components/appendix/backend-layered-architecture/LayeredArchitectureDemo.vue

@@ -334,7 +334,7 @@ const layerInfo = computed(() => {
   margin-top: 16px;
   background: #f6ffed;
   border: 1px solid #b7eb8f;
-  border-radius: 8px;
+  border-radius: 6px;
   color: #389e0d;
   font-size: 13px;
 }

docs/.vitepress/theme/components/appendix/backend-layered-architecture/RepositoryLayerDemo.vue

@@ -596,7 +596,7 @@ const principles = [
   margin-bottom: 20px;
   padding: 16px;
   background: white;
-  border-radius: 8px;
+  border-radius: 6px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
@@ -670,7 +670,7 @@ const principles = [
 
 .flow-step {
   background: #f8f9fa;
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.3s ease;
@@ -813,7 +813,7 @@ const principles = [
   padding: 10px 20px;
   border: 2px solid #dcdfe6;
   background: white;
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
@@ -880,7 +880,7 @@ const principles = [
 
 .code-block {
   background: #2d2d2d;
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 16px;
   margin: 0;
   overflow-x: auto;
@@ -897,7 +897,7 @@ const principles = [
   margin-top: 20px;
   padding: 16px;
   background: white;
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .problems-list h5 {
@@ -952,7 +952,7 @@ const principles = [
 
 .table-header {
   background: #f5f7fa;
-  border-radius: 8px;
+  border-radius: 6px;
   font-weight: 600;
   color: #303133;
   font-size: 13px;
@@ -1029,7 +1029,7 @@ const principles = [
   .table-row {
     padding: 16px;
     border: 1px solid #ebeef5;
-    border-radius: 8px;
+    border-radius: 6px;
     margin-bottom: 12px;
   }
 }

docs/.vitepress/theme/components/appendix/backend-layered-architecture/ServiceLayerDemo.vue

@@ -422,7 +422,7 @@ const principles = [
   margin-bottom: 20px;
   padding: 16px;
   background: white;
-  border-radius: 8px;
+  border-radius: 6px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
@@ -496,7 +496,7 @@ const principles = [
 
 .flow-step {
   background: #f8f9fa;
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.3s ease;
@@ -644,7 +644,7 @@ const principles = [
 .principle-card {
   padding: 14px;
   background: #f8f9fa;
-  border-radius: 8px;
+  border-radius: 6px;
   border-left: 3px solid #e6a23c;
 }
 

docs/.vitepress/theme/components/appendix/browser-devtools/BrowserDevToolsDemo.vue

@@ -1523,7 +1523,7 @@ onUnmounted(() => {
 }
 .console-output {
   flex: 1;
-  overflow-y: auto;
+  
   font-family: Consolas, 'Lucida Console', monospace;
   font-size: 11px;
 }

docs/.vitepress/theme/components/appendix/browser-devtools/BrowserDevToolsLiveDemo.vue

@@ -400,7 +400,7 @@ const selectNode = (node) => {
 /* Virtual Page Preview */
 .virtual-page-container {
   border: 1px solid #d0d7de;
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
   background: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
@@ -471,7 +471,7 @@ const selectNode = (node) => {
 /* DevTools Simulator (Enhanced) */
 .browser-devtools-demo {
   border: 1px solid #d0d7de;
-  border-radius: 8px;
+  border-radius: 6px;
   background-color: #ffffff;
   color: #202124;
   font-family: 'Segoe UI', '.SFNSDisplay', 'Roboto', sans-serif;

docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsConsoleDemo.vue

@@ -152,7 +152,7 @@ const runShortcut = (cmd) => {
 
 .console-body {
   height: 250px;
-  overflow-y: auto;
+  
   background-color: #f5f7fa;
   border: 1px solid #e4e7ed;
   border-radius: 4px;

docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsElementsDemo.vue

@@ -154,7 +154,7 @@ const updateStyle = (prop, value) => {
 
 .dom-content, .style-content {
   padding: 10px;
-  overflow-y: auto;
+  
   flex: 1;
 }
 

docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsSourcesDemo.vue

@@ -311,7 +311,7 @@ const flatNext = () => {
 .code-area {
   flex: 2;
   background: #f5f7fa;
-  overflow-y: auto;
+  
   font-family: monospace;
   border-right: 1px solid #dcdfe6;
 }

docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/CompositeDemo.vue

@@ -125,10 +125,10 @@ function getResultLayerStyle(layer) {
 <style scoped>
 .composite-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
@@ -160,7 +160,7 @@ function getResultLayerStyle(layer) {
 .demo-content {
   background: var(--vp-c-bg);
   border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .layers-stage {

docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/DomToRenderTreeDemo.vue

@@ -127,10 +127,10 @@
 <style scoped>
 .dom-render-tree-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
@@ -162,7 +162,7 @@
 .demo-content {
   background: var(--vp-c-bg);
   border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .trees-container {

docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/LayoutReflowDemo.vue

@@ -122,10 +122,10 @@ function resetDemo() {
 <style scoped>
 .layout-reflow-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
@@ -142,7 +142,7 @@ function resetDemo() {
 .demo-content {
   background: var(--vp-c-bg);
   border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .control-panel {
@@ -199,7 +199,7 @@ function resetDemo() {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  padding: 1rem;
+  padding: 0.75rem;
   background: var(--vp-c-bg-soft);
   border-radius: 6px;
   min-height: 150px;

docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/MacroMicroTaskDemo.vue

@@ -154,10 +154,10 @@ function sleep(ms) {
 <style scoped>
 .macro-micro-task-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
@@ -189,7 +189,7 @@ function sleep(ms) {
 .demo-content {
   background: var(--vp-c-bg);
   border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .event-loop-flow {
@@ -216,7 +216,7 @@ function sleep(ms) {
 .execution-box {
   background: var(--vp-c-bg-soft);
   border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   min-height: 80px;
   display: flex;
   align-items: center;

docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/PaintLayerDemo.vue

@@ -126,10 +126,10 @@ function clearHighlight() {
 <style scoped>
 .paint-layer-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
@@ -146,7 +146,7 @@ function clearHighlight() {
 .demo-content {
   background: var(--vp-c-bg);
   border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .layer-visualization {
@@ -158,7 +158,7 @@ function clearHighlight() {
   height: 200px;
   background: var(--vp-c-bg-soft);
   border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   overflow: hidden;
 }
 

docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPerformanceDemo.vue

@@ -105,10 +105,10 @@
 <style scoped>
 .rendering-performance-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
@@ -140,7 +140,7 @@
 .demo-content {
   background: var(--vp-c-bg);
   border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .performance-comparison {

docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPipelineDemo.vue

@@ -108,10 +108,10 @@ const currentStage = computed(() => {
 <style scoped>
 .rendering-pipeline-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
@@ -158,7 +158,7 @@ const currentStage = computed(() => {
   position: relative;
   cursor: pointer;
   padding: 0.5rem;
-  border-radius: 8px;
+  border-radius: 6px;
   transition: all 0.2s ease;
 }
 
@@ -173,7 +173,7 @@ const currentStage = computed(() => {
 .stage-icon {
   width: 40px;
   height: 40px;
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-brand);
   display: flex;
   align-items: center;
@@ -217,8 +217,8 @@ const currentStage = computed(() => {
 
 .stage-detail {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   margin-top: 0.75rem;
   border: 1px solid var(--vp-c-divider);
 }

docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureDemo.vue

@@ -121,10 +121,10 @@ const simulateRequest = () => {
 <style scoped>
 .cache-architecture-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
@@ -166,7 +166,7 @@ const simulateRequest = () => {
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
-  padding: 1rem;
+  padding: 0.75rem;
   border-radius: 12px;
   transition: all 0.3s;
 }
@@ -316,7 +316,7 @@ const simulateRequest = () => {
   background: var(--vp-c-brand);
   color: white;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 0.95rem;
   font-weight: 600;
   cursor: pointer;

docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureOverview.vue

@@ -142,10 +142,10 @@ const layers = [
 <style scoped>
 .cache-architecture-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
@@ -185,7 +185,7 @@ const layers = [
 .layer {
   width: 100%;
   max-width: 400px;
-  border-radius: 8px;
+  border-radius: 6px;
   transition: all 0.3s;
 }
 

docs/.vitepress/theme/components/appendix/cache-design/CacheHierarchyDemo.vue

@@ -141,10 +141,10 @@ const simulateFlow = () => {
 <style scoped>
 .cache-hierarchy-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
   max-width: 600px;
 }
 
@@ -187,8 +187,8 @@ const simulateFlow = () => {
   max-width: 400px;
   background: var(--vp-c-bg);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   cursor: pointer;
   transition: all 0.3s;
 }
@@ -262,8 +262,8 @@ const simulateFlow = () => {
 
 .data-flow {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   margin-bottom: 1rem;
   border: 1px solid var(--vp-c-divider);
 }
@@ -288,7 +288,7 @@ const simulateFlow = () => {
   gap: 1rem;
   padding: 0.75rem 1rem;
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
+  border-radius: 6px;
   border: 2px solid var(--vp-c-divider);
   transition: all 0.3s;
   width: 100%;
@@ -335,7 +335,7 @@ const simulateFlow = () => {
   background: var(--vp-c-brand);
   color: white;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
@@ -349,8 +349,8 @@ const simulateFlow = () => {
 
 .comparison-table {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 1rem;
+  padding: 0.75rem;
   margin-bottom: 1rem;
   border: 1px solid var(--vp-c-divider);
 }

docs/.vitepress/theme/components/appendix/cache-design/CacheLifecycleDemo.vue

@@ -338,7 +338,7 @@ onUnmounted(() => {
 .cache-entry {
   background: var(--vp-c-bg-soft);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
   transition: all 0.3s;
 }
@@ -456,7 +456,7 @@ onUnmounted(() => {
 .action-btn {
   padding: 0.75rem 1rem;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   font-weight: 600;
   transition: all 0.2s;
@@ -508,7 +508,7 @@ onUnmounted(() => {
   flex-direction: column;
   gap: 0.5rem;
   max-height: 200px;
-  overflow-y: auto;
+  
 }
 
 .event {
@@ -555,9 +555,9 @@ onUnmounted(() => {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
-  padding: 1rem;
+  padding: 0.75rem;
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   border: 1px solid var(--vp-c-divider);
 }
 

docs/.vitepress/theme/components/appendix/cache-design/CacheMonitoringDashboardDemo.vue

@@ -246,10 +246,10 @@ onUnmounted(() => {
 <style scoped>
 .cache-monitoring-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
@@ -288,7 +288,7 @@ onUnmounted(() => {
 .metric-card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0.75rem;
   display: flex;
   gap: 0.75rem;
@@ -367,7 +367,7 @@ onUnmounted(() => {
 .request-log {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   margin-bottom: 1rem;
   overflow: hidden;
 }
@@ -400,7 +400,7 @@ onUnmounted(() => {
 
 .log-list {
   max-height: 180px;
-  overflow-y: auto;
+  
   padding: 0.5rem;
 }