Update installation guide and references to use the latest plugin version; adjust font weights for consistency

Author: 1aron

site/app/[locale]/guide/code-linting/components/Footer.mdx

@@ -11,7 +11,7 @@ Typical setup for Visual Studio Code users.
             Install the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) in the Visual Studio Marketplace.
         </StepL>
         <StepR>
-            <a className="app-object app-object-interactive flex:col px:25 h:48 font:14 font:semibold r:4 leading:1 flex:row!" href="vscode:extension/dbaeumer.vscode-eslint">
+            <a className="app-object app-object-interactive flex:col px:25 h:48 font:14 font:medium r:4 leading:1 flex:row!" href="vscode:extension/dbaeumer.vscode-eslint">
                 <VSCodeSvg className="ml:-4 mr:10" width="20" height="20" />
                 <span>Install to Visual Studio Code</span>
             </a>

site/app/[locale]/guide/code-linting/vscode/content.mdx

@@ -7,7 +7,7 @@ import VSCodeSvg from '~/site/public/icons/visualstudiocode.svg'
             Install the [VSCode ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) in the Visual Studio Marketplace if you haven't already.
         </StepL>
         <StepR>
-            <a className="app-object app-object-interactive flex:col px:25 h:48 font:14 font:semibold r:4 leading:1 flex:row!" href="vscode:extension/dbaeumer.vscode-eslint">
+            <a className="app-object app-object-interactive flex:col px:25 h:48 font:14 font:medium r:4 leading:1 flex:row!" href="vscode:extension/dbaeumer.vscode-eslint">
                 <VSCodeSvg className="ml:-4 mr:10" width="20" height="20" />
                 <span>Install to Visual Studio Code</span>
             </a>

site/app/[locale]/guide/conditional-queries/components/StartingStyleExample.tsx

@@ -4,7 +4,7 @@ export default () => <>
     <Demo>
         <button className='btn btn-md yellow touch-yellow' popoverTarget="my-popover">Open Popover</button>
         <div id="my-popover" popover="auto" className="~transform|.3s b:1|frame-light p:8x r:3x bg:surface max-w:90vw bg:black/.3::backdrop scale(0)@starting-style">
-            <div className='text:20 font:semibold text:center'>@starting-style</div>
+            <div className='text:20 font:medium text:center'>@starting-style</div>
             <div className='text:14 mt:4x'>Hello! I&apos;m a popover with zoom-in effect ✨</div>
             <button className='btn btn-md yellow mt:6x w:full touch-yellow' popoverTarget="my-popover" popoverTargetAction="hide">Close</button>
         </div>

site/app/[locale]/guide/installation/(main)/layout.tsx

@@ -10,7 +10,7 @@ export default async function Layout(props: any) {
     const $ = createTranslation(locale)
     return (
         <DocLayout {...props} pageCategories={pageCategories} pageFileURL={import.meta.url} metadata={metadata}>
-            <p className='italic'>Adopt runtime, zero-runtime, or hydration — it’s your call.</p>
+            <p className='italic'>Runtime, zero-runtime, or hydration — it’s your call.</p>
             <Tabs className="mb:8x">
                 <Tab href='/guide/installation'>{$('Quick Start')} <TabBadge>{$('Recommanded')}</TabBadge></Tab>
                 <Tab href='/guide/installation/cli'>{$('Standalone CLI')}</Tab>

site/app/[locale]/guide/installation/astro/content.mdx

@@ -14,7 +14,7 @@
     <Step $row>
         <StepL>
             ### <StepNum />Install Master CSS
-            Install `@master/css.astro` plugin into your project.
+            Install [`@master/css.astro`](/reference/astro) plugin into your project.
         </StepL>
         <StepR>
             ```bash action=install
@@ -44,14 +44,9 @@
             ```js name=astro.config.js
             import { defineConfig } from 'astro/config'
             import masterCSS from '@master/css.astro' // [!code highlight]
-            import sitemap from '@astrojs/sitemap'
 
-            // https://astro.build/config
             export default defineConfig({
-                compressHTML: true,
-                trailingSlash: 'never',
                 integrations: [
-                    sitemap(),
                     masterCSS() // [!code highlight]
                 ]
             })

site/app/[locale]/guide/installation/nuxtjs/content.mdx

@@ -14,7 +14,7 @@
     <Step $row>
         <StepL>
             ### <StepNum />Install Master CSS
-            Install `@master/css.nuxt` plugin into your project.
+            Install [`@master/css.nuxt`](/reference/nuxt) plugin into your project.
         </StepL>
         <StepR>
             ```bash action=install
@@ -36,12 +36,12 @@
     <Step $row>
         <StepL>
             ### <StepNum />Set up Master CSS
-            Add a `@master/css.nuxt` module in `nuxt.config.ts`.
+            Add a [`@master/css.nuxt`](/reference/nuxt) module in `nuxt.config.ts`.
 
             - By default, `options.mode` is set to `progressive`.
         </StepL>
         <StepR>
-            ```js name=nuxt.config.ts
+            ```ts name=nuxt.config.ts
             export default defineNuxtConfig({
                 modules: [
                     '@master/css.nuxt' // [!code highlight]

site/app/[locale]/guide/installation/vite/content.mdx

@@ -13,7 +13,7 @@
     <Step $row>
         <StepL>
             ### <StepNum />Install Master CSS
-            Install `@master/css.vite` plugin into your project.
+            Install [`@master/css.vite`](/reference/vite) plugin into your project.
         </StepL>
         <StepR>
             ```bash action=install

site/app/[locale]/guide/introduction/components/PrematureAbstraction.mdx

@@ -52,7 +52,7 @@ export const code3 = `
     <div class="flex translateY(-5):hover ~transform|.2s overflow:hidden bg:white r:10">
         <img class="object:cover w:140 aspect:16/9" … />
         <div class="p:25">
-            <div class="font:semibold text:18">Mountain</div>
+            <div class="font:medium text:18">Mountain</div>
             <div class="text:14 lines:2">A mountain is an elevated portion of the Earth's crust, generally with steep sides that show significant exposed bedrock.</div>
         </div>
     </div>
@@ -66,7 +66,7 @@ You always abstract your style, even when unsure about its reusability.
         <div className="flex translateY(-5):hover ~transform|.2s overflow:hidden bg:surface r:10 s:panel center-content">
             <Image className="object:cover aspect:1/1 flex:0|0|auto" src={mountainImage} placeholder="blur" width={140} height={140} priority={true} alt="Markup-driven CSS Overview" />
             <div className="p:25">
-                <div className="fg:strong font:semibold text:18">Mountain</div>
+                <div className="fg:strong font:medium text:18">Mountain</div>
                 <div className="text:14 lines:2">A mountain is an elevated portion of the Earth's crust, generally with steep sides that show significant exposed bedrock.</div>
             </div>
         </div>

site/app/[locale]/guide/introduction/content.mdx

@@ -268,7 +268,7 @@ export default {
             '': 'flex translateY(-5):hover ~transform|.2s overflow:hidden bg:white r:10',
             image: 'object:cover w:140 aspect:16/9',
             content: 'p:25',
-            title: 'font:semibold text:18',
+            title: 'font:medium text:18',
             text: 'text:14 lines:2'
         }
     }

site/app/[locale]/guide/language-service/components/Features.tsx

@@ -8,28 +8,28 @@ export default () => (
         <Feature>
             <IconEyeHeart className="app-icon-primary" />
             <div>
-                <p className='text:18!'><b className="font:semibold">Syntax highlighting</b></p>
+                <p className='text:18!'><b className="font:medium">Syntax highlighting</b></p>
                 <p>Improve the readability and recognition of classes</p>
             </div>
         </Feature>
         <Feature>
             <IconZoomCode className="app-icon-primary" />
             <div>
-                <p className='text:18!'><b className="font:semibold">Syntax inspection</b></p>
+                <p className='text:18!'><b className="font:medium">Syntax inspection</b></p>
                 <p>Preview generated CSS and references on hover or list</p>
             </div>
         </Feature>
         <Feature>
             <IconFocusAuto className="app-icon-primary" />
             <div>
-                <p className='text:18!'><b className="font:semibold">Code completion</b></p>
+                <p className='text:18!'><b className="font:medium">Code completion</b></p>
                 <p>Hints and auto-completion of available syntax</p>
             </div>
         </Feature>
         <Feature>
             <IconWand className="app-icon-primary" />
             <div>
-                <p className='text:18!'><b className="font:semibold">Color preview</b></p>
+                <p className='text:18!'><b className="font:medium">Color preview</b></p>
                 <p>Calculate and render syntax colors within a document</p>
             </div>
         </Feature>