diff --git a/telcoinwiki-react/src/App.css b/telcoinwiki-react/src/App.module.css
similarity index 86%
rename from telcoinwiki-react/src/App.css
rename to telcoinwiki-react/src/App.module.css
index b9d355d..b42fb09 100644
--- a/telcoinwiki-react/src/App.css
+++ b/telcoinwiki-react/src/App.module.css
@@ -1,4 +1,4 @@
-#root {
+:global(#root) {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
@@ -11,10 +11,16 @@
   will-change: filter;
   transition: filter 300ms;
 }
+
+.react {}
+
+.spin {}
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
-.logo.react:hover {
+
+.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
@@ -28,7 +34,7 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
+  .spin {
     animation: logo-spin infinite 20s linear;
   }
 }
@@ -37,6 +43,6 @@
   padding: 2em;
 }
 
-.read-the-docs {
+.readTheDocs {
   color: #888;
 }
diff --git a/telcoinwiki-react/src/App.tsx b/telcoinwiki-react/src/App.tsx
index 785136e..8618e07 100644
--- a/telcoinwiki-react/src/App.tsx
+++ b/telcoinwiki-react/src/App.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
-import './App.css'
+import styles from './App.module.css'
 
 function App() {
   const [count, setCount] = useState(0)
@@ -10,14 +10,18 @@ function App() {
     <>
       <div>
         <a href="https://vite.dev" target="_blank" rel="noreferrer">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
+          <img src={viteLogo} className={styles.logo} alt="Vite logo" />
         </a>
         <a href="https://react.dev" target="_blank" rel="noreferrer">
-          <img src={reactLogo} className="logo react" alt="React logo" />
+          <img
+            src={reactLogo}
+            className={`${styles.logo} ${styles.react} ${styles.spin}`}
+            alt="React logo"
+          />
         </a>
       </div>
       <h1>Vite + React</h1>
-      <div className="card">
+      <div className={styles.card}>
         <button onClick={() => setCount((count) => count + 1)}>
           count is {count}
         </button>
@@ -25,7 +29,7 @@ function App() {
           Edit <code>src/App.tsx</code> and save to test HMR
         </p>
       </div>
-      <p className="read-the-docs">
+      <p className={styles.readTheDocs}>
         Click on the Vite and React logos to learn more
       </p>
     </>
diff --git a/telcoinwiki-react/src/index.css b/telcoinwiki-react/src/index.css
deleted file mode 100644
index 08a3ac9..0000000
--- a/telcoinwiki-react/src/index.css
+++ /dev/null
@@ -1,68 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/telcoinwiki-react/src/main.tsx b/telcoinwiki-react/src/main.tsx
index bef5202..b5d9579 100644
--- a/telcoinwiki-react/src/main.tsx
+++ b/telcoinwiki-react/src/main.tsx
@@ -1,6 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
+import './styles/global.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
diff --git a/telcoinwiki-react/src/styles/brand.css b/telcoinwiki-react/src/styles/brand.css
new file mode 100644
index 0000000..676942f
--- /dev/null
+++ b/telcoinwiki-react/src/styles/brand.css
@@ -0,0 +1,362 @@
+/* styles/brand.css — Telcoin Wiki polish layer
+   NOTE: loads AFTER dist/styles.css so it can override gently.
+*/
+:root {
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --container: clamp(16rem, 92vw, 1200px);
+  --gap-1: 0.25rem;
+  --gap-2: 0.5rem;
+  --gap-3: 0.75rem;
+  --gap-4: 1rem;
+  --gap-5: 1.5rem;
+  --gap-6: 2rem;
+  --header-pad-y: clamp(10px, 1.2vw, 18px);
+  --logo-min: 36px;
+  --logo-max: 64px;
+}
+
+html,
+body {
+  padding-top: 0;
+}
+
+.site-header {
+  padding-top: 0;
+}
+
+
+.site-shell {
+  padding-bottom: calc(var(--gap-6) + var(--safe-bottom));
+}
+
+/* --- Page chrome ------------------------------------------------------- */
+body {
+  background:
+    radial-gradient(1200px 800px at 10% -10%, rgba(69, 188, 241, 0.14), transparent 65%),
+    linear-gradient(180deg, #10255e 0%, var(--tc-bg) 60%);
+}
+
+.container {
+  max-width: var(--container);
+  margin-inline: auto;
+  padding-inline: var(--gap-4);
+}
+
+/* --- Header ------------------------------------------------------------ */
+/* Responsive header layout */
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: rgba(14, 27, 63, 0.9);
+  backdrop-filter: blur(18px);
+  border-bottom: 1px solid var(--tc-border);
+}
+.site-header__inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: clamp(12px, 2vw, 28px);
+  padding-block: var(--header-pad-y);
+}
+.site-brand {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+  text-decoration: none;
+  margin-right: clamp(12px, 2vw, 28px);
+  border-radius: 0.75rem;
+}
+.site-brand:hover,
+.site-brand:focus-visible {
+  text-decoration: none;
+}
+.site-brand .site-logo,
+img.site-logo {
+  display: block;
+  height: clamp(var(--logo-min), 7.5vw, var(--logo-max));
+  width: auto;
+  max-height: none !important;
+  padding: 0;
+  border-radius: 0.75rem;
+}
+
+/* Nav pills (desktop) */
+.top-nav { order: 2; flex: 1 1 auto; min-width: 320px; }
+.pill-nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+.pill-nav > li {
+  list-style: none;
+}
+
+/* Menu button for mobile */
+.menu-btn { order: 3; display: none; align-items: center; justify-content: center; height: 40px; padding: 0 1rem; border-radius: 999px; background: var(--tc-surface); border: 1px solid var(--tc-border); color: var(--tc-ink); font-weight: 600; }
+@media (max-width: 960px) { .menu-btn { display: inline-flex; } .top-nav { display: none; } }
+
+/* Search */
+.header-search {
+  order: 4;
+  flex: 1 0 280px;
+  display: flex;
+  align-items: center;
+  min-width: clamp(200px, 45vw, 320px);
+}
+.search-input { width: 100%; height: 42px; padding: 0 1rem; background: rgba(18,30,68,.92); border: 1px solid var(--tc-border); border-radius: 999px; color: var(--tc-ink); }
+.search-input::placeholder { color: rgba(255,255,255,.55); }
+
+/* Mobile drawer */
+.drawer { position: fixed; inset: 64px 1rem auto 1rem; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: 1rem; box-shadow: var(--tc-shadow); padding: .75rem; display: none; z-index: 120; }
+.drawer.is-open { display: block; }
+.drawer ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
+.drawer a { display: block; padding: .75rem 1rem; border-radius: .75rem; color: var(--tc-ink); }
+.drawer a:hover, .drawer a:focus-visible { background: var(--tc-surface-2); text-decoration: none; }
+
+/* Remove obsolete elements */
+.header-pill,
+.search-underline,
+.header__decor,
+.last-updated,
+.header-updated,
+[data-last-updated],
+.search-panel {
+  display: none !important;
+}
+
+/* --- Cards/sections polish -------------------------------------------- */
+.tc-card {
+  border: 1px solid var(--tc-border);
+  background: var(--tc-surface);
+  border-radius: 1.25rem;
+  box-shadow: var(--tc-shadow);
+  backdrop-filter: blur(24px);
+}
+
+.tc-card a {
+  display: inline;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+.page-intro.tc-card,
+.site-main.tc-card {
+  border-radius: 1.25rem;
+  padding: var(--gap-6);
+}
+
+.sidebar__inner.tc-card {
+  border-radius: 1rem;
+  padding: var(--gap-4);
+}
+
+/* Remove accidental “pill” backgrounds on headings on mobile */
+.site-main h2,
+.site-main h3 {
+  background: transparent;
+  box-shadow: none;
+  border: 0;
+  border-radius: 0;
+}
+
+/* ===== Learning Pathways + FAQ (Home) ===== */
+.lp { margin-block: clamp(24px, 4vw, 48px); }
+.lp h2 { font-size: clamp(1.25rem, 1.8vw, 1.75rem); margin-bottom: .75rem; }
+.lp-lead { opacity:.85; margin-bottom: 1rem; }
+.lp-grid { display:grid; gap: clamp(16px, 2.5vw, 24px); grid-template-columns: 1fr; }
+@media (min-width:768px){ .lp-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
+.lp-card{ display:flex; flex-direction:column; min-height: 180px; border-radius:16px; padding:clamp(14px,2.2vw,18px);
+  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow: 0 4px 18px rgba(0,0,0,.25); }
+.lp-eyebrow{ font-size:.85rem; letter-spacing:.03em; opacity:.85; display:block; margin-bottom:.25rem; }
+.lp-title{ font-size: clamp(1.05rem,1.6vw,1.25rem); margin:.25rem 0 .5rem; }
+.lp-body{ opacity:.9; }
+.lp-cta{ margin-top:auto; }
+.lp-cta a{ display:inline-block; padding:.55rem .85rem; border-radius:999px; border:1px solid rgba(255,255,255,.25); text-decoration:none; }
+.lp-cta a:hover{ border-color: rgba(255,255,255,.45); }
+.lp-card a{ text-decoration:none; }
+.lp-eyebrow, .lp-title{ pointer-events:none; }
+
+.faq{ margin-block: clamp(16px, 3.5vw, 48px); }
+.faq h2{ font-size: clamp(1.25rem, 1.8vw, 1.75rem); margin-bottom:.75rem; }
+.faq-group{ margin-top: clamp(12px,2vw,20px); }
+.faq details{ border-radius:14px; padding:.75rem 1rem; margin:.5rem 0; background: rgba(255,255,255,.04); }
+.faq summary{ cursor:pointer; list-style:none; font-weight:600; }
+.faq summary::-webkit-details-marker{ display:none; }
+.faq details[open]{ background: rgba(255,255,255,.06); }
+.faq .answer{ margin-top:.5rem; opacity:.92; }
+
+/* ===== Header cleanup / dropdowns ===== */
+.site-brand .site-logo,
+img.site-logo { height: clamp(28px, 6.5vw, 52px); }
+
+.nav-item { position: relative; }
+.nav-button {
+  display: inline-flex; align-items: center; gap: .4rem;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-pill);
+  background: transparent; border: 1px solid var(--color-border-subtle);
+  color: var(--color-text); cursor: pointer; font-weight: 600;
+  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
+}
+.nav-caret { display:inline-block; transform: translateY(1px); opacity:.8; }
+.nav-menu {
+  position: absolute; top: calc(100% + .4rem); left: 0; min-width: 16rem; display: none;
+  background: var(--color-surface); border: 1px solid var(--color-border-subtle);
+  box-shadow: var(--shadow-sm); border-radius: var(--radius-md); padding: .4rem; z-index: 60;
+}
+.nav-item[data-open="true"] .nav-menu { display: grid; gap: .25rem; }
+.nav-menu a {
+  display: flex; align-items: center; gap: .5rem;
+  padding: .6rem .75rem; border-radius: .55rem; height: auto;
+  color: var(--color-text-muted); text-decoration: none;
+}
+.nav-menu a:hover, .nav-menu a:focus-visible {
+  background: var(--color-surface-alt); color: var(--color-text);
+}
+.nav-item[data-open="true"] .nav-button,
+.nav-button:hover,
+.nav-button:focus-visible {
+  background: var(--color-surface-alt);
+  border-color: var(--color-border);
+  color: var(--color-text);
+}
+.pill-nav .nav-menu a {
+  box-shadow: none; border: 1px solid var(--color-border-subtle);
+  border-radius: .55rem; padding: .6rem .75rem; height: auto;
+}
+@media (max-width: 1024px) {
+  .nav-menu { position: static; display: grid; box-shadow: none; margin-top: .35rem; }
+  .nav-button { width: 100%; justify-content: space-between; }
+  .nav-item { width: 100%; }
+  .nav-item + .nav-item { margin-top: .25rem; }
+}
+
+/* Deep-dive pathways ---------------------------------------------------- */
+#deep-dive .guide-grid { display: grid; gap: 1rem; grid-template-columns: repeat(12, 1fr); }
+#deep-dive .guide-card { grid-column: span 12; padding: 1.25rem; border-radius: 1rem; }
+@media (min-width: 768px) { #deep-dive .guide-card { grid-column: span 4; } }
+
+/* Eyebrow label */
+#deep-dive .eyebrow {
+  display: inline-flex;
+  align-items: center;
+  padding: .25rem .6rem;
+  margin-bottom: .5rem;
+  font-size: .8rem;
+  letter-spacing: .02em;
+  background: var(--tc-surface-2);
+  border: 1px solid var(--tc-border);
+  border-radius: 999px;
+  color: var(--tc-ink-subtle);
+}
+
+/* Headings & body copy */
+#deep-dive h3 { margin: .25rem 0 .4rem; font-size: 1.4rem; line-height: 1.25; color: var(--tc-ink); }
+#deep-dive p { margin: .4rem 0; color: var(--tc-ink); }
+
+/* Only CTAs are links */
+#deep-dive a { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; display: inline; }
+#deep-dive .chip-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: .35rem;
+  padding: .4rem .7rem;
+  border-radius: .75rem;
+  background: var(--tc-surface-2);
+  border: 1px solid var(--tc-border);
+  font-weight: 600;
+  white-space: nowrap;
+}
+#deep-dive .chip-cta:hover,
+#deep-dive .chip-cta:focus-visible {
+  background: var(--tc-surface);
+  text-decoration: none;
+}
+
+/* --- Responsive tweaks ------------------------------------------------- */
+@media (max-width: 640px) {
+  .container {
+    padding-inline: var(--gap-3);
+  }
+}
+
+@media (min-width: 961px) {
+  .top-nav {
+    display: block;
+    margin-left: 0;
+  }
+}
+
+/* Improve list and paragraph rhythm slightly */
+.site-main p,
+.site-main li {
+  font-size: 1rem;
+  line-height: 1.7;
+}
+:root{
+  --link: #7cc8ff;
+  --link-hover: #b3e1ff;
+  --focus-ring: 0 0 0 3px rgba(124,200,255,.35);
+  --sticky-offset: 84px; /* header height for scroll-margin */
+}
+
+/* === Base content container === */
+.content, main .container, .md-content { max-width: 1120px; margin-inline:auto; }
+
+/* === Prose defaults (covers all Markdown-y pages) === */
+.prose :where(h1,h2,h3,h4){ line-height:1.2; }
+.prose :where(h2){ margin-top:clamp(24px,4vw,40px); }
+.prose :where(p,ul,ol){ color: rgba(255,255,255,.92); }
+.prose :where(code,kbd,pre){ background: rgba(255,255,255,.06); border-radius:8px; padding:.15em .35em; }
+
+/* === Link system === */
+a{ color:var(--link); text-underline-offset: 3px; text-decoration-thickness:.08em; }
+a:hover{ color:var(--link-hover); text-decoration: underline; }
+a:focus-visible{ outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
+a:visited{ color:var(--link); } /* kill purple */
+
+/* Button-like links */
+.link-btn{ display:inline-block; padding:.55rem .85rem; border-radius:999px;
+  border:1px solid rgba(255,255,255,.22); text-decoration:none; }
+.link-btn:hover{ border-color:rgba(255,255,255,.45); }
+
+/* External link affordance (added by JS via .is-external) */
+a.is-external::after{
+  content:"↗"; font-size:.85em; margin-left:.35em; opacity:.85;
+}
+
+/* Anchored headings don’t hide under sticky header */
+:where(h2,h3,h4)[id]{ scroll-margin-top: var(--sticky-offset); }
+
+/* === Left rail / Knowledge base === */
+aside nav ul, .left-rail nav ul, .knowledge-base ul{
+  list-style:none; padding-left:0; margin: .25rem 0 0;
+}
+aside nav li, .left-rail nav li, .knowledge-base li{ margin:.35rem 0; }
+aside nav a, .left-rail nav a, .knowledge-base a{
+  display:inline-flex; align-items:center; gap:.35rem;
+  padding:.25rem .35rem; border-radius:8px; color:rgba(255,255,255,.9); text-decoration:none;
+}
+aside nav a:hover, .left-rail nav a:hover, .knowledge-base a:hover{
+  background: rgba(255,255,255,.06); color:#fff; text-decoration:none;
+}
+aside nav a:focus-visible, .left-rail nav a:focus-visible, .knowledge-base a:focus-visible{
+  box-shadow: var(--focus-ring);
+}
+
+/* === Auto-hero wrapper for subpages (matches Home hero styling) === */
+.page-intro.auto-hero{ margin-top: clamp(12px,3vw,20px); }
+.page-intro.auto-hero .page-intro__title{ margin-bottom:.35rem; }
+.page-intro.auto-hero .page-intro__lede{ opacity:.9; }
diff --git a/telcoinwiki-react/src/styles/critical.css b/telcoinwiki-react/src/styles/critical.css
new file mode 100644
index 0000000..ee7e3fe
--- /dev/null
+++ b/telcoinwiki-react/src/styles/critical.css
@@ -0,0 +1,581 @@
+:root {
+  color-scheme: dark;
+  --font-family-base: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
+  --font-family-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
+  --line-height-base: 1.6;
+
+  --color-bg: var(--tc-bg);
+  --color-surface: var(--tc-surface);
+  --color-surface-alt: var(--tc-surface-2);
+  --color-surface-soft: var(--tc-surface);
+  --color-border: var(--tc-border-strong);
+  --color-border-subtle: var(--tc-border);
+  --color-text: var(--tc-ink);
+  --color-text-muted: var(--tc-ink-muted);
+  --color-text-soft: var(--tc-ink-subtle);
+  --color-text-inverse: #050f2d;
+
+  --color-primary: var(--tc-primary-500);
+  --color-primary-strong: var(--tc-primary-700);
+  --color-primary-soft: rgba(64, 102, 222, 0.22);
+  --color-secondary: var(--tc-accent);
+  --color-secondary-soft: rgba(69, 188, 241, 0.18);
+  --color-highlight: var(--tc-primary-300);
+  --color-warning: #facc15;
+  --color-warning-soft: rgba(250, 204, 21, 0.18);
+  --color-info-soft: rgba(69, 188, 241, 0.18);
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 2.5rem;
+  --space-8: 3rem;
+  --space-9: 4rem;
+
+  --radius-xs: 0.5rem;
+  --radius-sm: var(--radius-card);
+  --radius-md: var(--radius-card);
+  --radius-lg: var(--radius-big);
+
+  --shadow-sm: var(--shadow-glass);
+  --max-width-content: 72rem;
+  --max-width-wide: 90rem;
+  --sidebar-width: clamp(16rem, 18vw, 20rem);
+  --header-height: 4.25rem;
+  --transition-base: 0.25s ease;
+}
+
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+  color: var(--tc-ink);
+  background:
+    radial-gradient(1200px 800px at 10% -10%, rgba(69, 188, 241, 0.14), transparent 70%),
+    linear-gradient(180deg, #10255e 0%, var(--tc-bg) 60%);
+  min-height: 100vh;
+}
+
+main {
+  display: block;
+}
+
+a {
+  color: var(--tc-accent);
+  text-decoration: none;
+  transition: color var(--transition-base);
+}
+
+a:hover,
+a:focus-visible {
+  text-decoration: underline;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-card);
+}
+
+p {
+  margin: 0 0 var(--space-4);
+  color: var(--tc-ink-muted);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--color-text);
+  margin: 0 0 var(--space-3);
+}
+
+h1 {
+  font-size: clamp(2.2rem, 4vw, 3.2rem);
+}
+
+h2 {
+  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
+}
+
+h3 {
+  font-size: clamp(1.25rem, 2vw, 1.6rem);
+}
+
+ul,
+ol {
+  margin: 0 0 var(--space-4);
+  padding-left: var(--space-5);
+  color: var(--color-text-muted);
+}
+
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-primary);
+  color: #fff;
+  border-radius: var(--radius-sm);
+  z-index: 200;
+  transition: top var(--transition-base);
+}
+
+.skip-link:focus {
+  top: var(--space-3);
+}
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 120;
+  background: var(--tc-surface);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-bottom: 1px solid var(--tc-border);
+  box-shadow: var(--shadow-glass);
+}
+
+.site-header__inner {
+  max-width: var(--max-width-wide);
+  margin: 0 auto;
+  padding: 0.75rem 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.site-logo {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  font-weight: 600;
+  transition: background var(--transition-base), transform var(--transition-base);
+}
+
+.site-logo:hover,
+.site-logo:focus-visible {
+  background: var(--color-surface-alt);
+  text-decoration: none;
+  transform: translateY(-1px);
+}
+
+.site-logo span {
+  font-size: 1rem;
+}
+
+.sidebar-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-left: auto;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--tc-border);
+  background: var(--tc-surface-2);
+  color: var(--tc-ink);
+  font-size: 0.95rem;
+}
+
+.top-nav {
+  display: none;
+  flex: 1 1 auto;
+}
+
+.top-nav__list {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+}
+
+.top-nav__link {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.625rem 0.875rem;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--tc-border);
+  background: var(--tc-surface);
+  color: var(--tc-ink-muted);
+  font-size: 0.95rem;
+  text-decoration: none;
+  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
+}
+
+.top-nav__link:hover,
+.top-nav__link:focus-visible {
+  text-decoration: none;
+  color: var(--tc-ink);
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--tc-border-strong);
+  box-shadow: var(--shadow-focus);
+}
+
+.top-nav__link.is-active {
+  color: var(--tc-ink);
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--tc-border-strong);
+}
+
+.site-header__actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.last-updated {
+  font-size: 0.75rem;
+  color: var(--color-text-soft);
+}
+
+.header-search {
+  position: relative;
+  flex: 0 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.tc-tabbar {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+
+.nav-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.875rem;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--tc-border);
+  background: var(--tc-surface);
+  color: var(--tc-ink-muted);
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+
+.nav-btn:hover,
+.nav-btn:focus-visible {
+  color: var(--tc-ink);
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--tc-border-strong);
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+
+.nav-btn.is-active {
+  color: var(--tc-ink);
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--tc-border-strong);
+}
+
+.header-search {
+  width: clamp(14rem, 36vw, 20rem);
+}
+
+@media (max-width: 959px) {
+  .top-nav__list {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .top-nav__link,
+  .nav-btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 1024px) {
+  .site-header__actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .header-search {
+    width: min(100%, 20rem);
+  }
+}
+
+.search-input {
+  width: 100%;
+  padding: 0 1rem;
+  min-height: 2.25rem;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--tc-border);
+  background: rgba(17, 31, 68, 0.92);
+  color: var(--tc-ink);
+}
+
+.search-panel {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  right: 0;
+  width: clamp(18rem, 32vw, 26rem);
+  background: var(--tc-surface);
+  border: 1px solid var(--tc-border);
+  box-shadow: var(--shadow-glass);
+  border-radius: var(--radius-card);
+  padding: var(--space-3);
+  display: grid;
+  gap: var(--space-3);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+}
+
+.site-shell {
+  max-width: 75rem;
+  margin: 0 auto;
+  display: flex;
+  gap: 2rem;
+  padding: 3rem 1rem 4rem;
+  align-items: flex-start;
+}
+
+.sidebar {
+  position: sticky;
+  top: calc(var(--header-height) + 1rem);
+  align-self: start;
+  max-height: calc(100vh - var(--header-height) - 3rem);
+}
+
+.sidebar__inner {
+  padding: 1.5rem;
+  border-radius: var(--radius-card);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+}
+
+.sidebar__heading {
+  margin: 0 0 var(--space-3);
+  font-size: 0.9rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-text-soft);
+}
+
+.sidebar__list,
+.sidebar__sublist {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--space-2);
+}
+
+.sidebar__link {
+  color: var(--color-text-muted);
+}
+
+.sidebar__link.is-active {
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+.site-main {
+  border-radius: var(--radius-big);
+  padding: 1.5rem;
+  display: grid;
+  gap: 1.5rem;
+}
+
+.site-main h2,
+.site-main h3 {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: 0.85rem;
+  margin-bottom: var(--space-4);
+  color: var(--color-text-soft);
+}
+
+.page-intro {
+  display: grid;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  border-radius: var(--radius-big);
+  margin-bottom: var(--space-6);
+}
+
+.page-intro__eyebrow {
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--color-secondary);
+  margin: 0;
+}
+
+.page-intro__lede {
+  font-size: 1.1rem;
+}
+
+.notice {
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  background: var(--color-surface-alt);
+  border: 1px solid var(--color-border-subtle);
+  color: var(--color-text);
+  box-shadow: var(--shadow-xs);
+}
+
+@media (max-width: 1024px) {
+  .site-shell {
+    flex-direction: column;
+    padding-top: var(--space-5);
+  }
+
+  .sidebar {
+    position: static;
+    inset: auto;
+    transform: none;
+    opacity: 1;
+    pointer-events: auto;
+    width: 100%;
+  }
+
+  .sidebar__inner {
+    position: relative;
+    max-height: none;
+  }
+
+  .site-header__actions {
+    gap: var(--space-2);
+  }
+
+  .site-main {
+    padding: var(--space-5);
+  }
+}
+
+@media (min-width: 960px) {
+  .site-header__inner {
+    flex-wrap: nowrap;
+  }
+
+  .sidebar-toggle {
+    display: none;
+  }
+
+  .top-nav {
+    display: flex;
+    margin-left: var(--space-3);
+  }
+
+  .site-header__actions {
+    flex: 0 0 auto;
+    justify-content: flex-end;
+    gap: var(--space-4);
+    margin-left: auto;
+  }
+
+  .last-updated {
+    font-size: 0.8rem;
+  }
+
+  .header-search {
+    width: clamp(14rem, 32vw, 20rem);
+  }
+}
+
+/* --- Logo ~2× (responsive), keep proportions --- */
+.site-logo img { height: clamp(36px, 7.5vw, 64px); }
+
+/* --- Dropdown nav scaffolding --- */
+.nav-item { position: relative; }
+.nav-button {
+  display:inline-flex; align-items:center; gap:.4rem;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  background: transparent; border: 1px solid transparent;
+  color: var(--color-text); cursor: pointer;
+}
+.nav-button:hover,
+.nav-button[aria-expanded="true"] { background: var(--color-surface-alt); }
+.nav-caret { display:inline-block; transform: translateY(1px); opacity:.8; }
+
+/* Dropdown panel */
+.nav-menu{
+  position:absolute; top:calc(100% + .4rem); left:0; min-width:16rem; display:none;
+  background:var(--color-surface); border:1px solid var(--color-border-subtle);
+  box-shadow:var(--shadow-sm); border-radius:var(--radius-md); padding:.4rem; z-index:60;
+}
+.nav-item[data-open="true"] .nav-menu { display:grid; gap:.25rem; }
+.nav-menu a{
+  display:flex; align-items:center; gap:.5rem;
+  padding:.6rem .75rem; border-radius:.55rem;
+  color:var(--color-text-muted); text-decoration:none;
+}
+.nav-menu a:hover,.nav-menu a:focus-visible{ background:var(--color-surface-alt); color:var(--color-text); }
+
+/* Mobile: inline panel */
+@media (max-width:1024px){ .nav-menu{ position:static; display:grid; box-shadow:none; border-radius:var(--radius-sm);} }
+
+/* Normalize sitewide link styling (keep header pills un-underlined) */
+a{ color:var(--tc-accent); text-decoration:underline; text-underline-offset:2px; }
+a:hover{ text-decoration:underline; }
+a.top-nav__link, .nav-button, .nav-menu a{ text-decoration:none; }
+
+/* Deep-Dive TOC chips & accordions */
+.toc-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin: var(--space-3) 0 var(--space-5); }
+.toc-chip{
+  display:inline-flex; align-items:center; gap:.4rem;
+  padding:.5rem .75rem; border-radius:var(--radius-sm);
+  border:1px solid var(--color-border-subtle);
+  background:var(--color-surface); color:var(--color-text);
+  text-decoration:none; font-weight:600; font-size:.9rem;
+}
+.toc-chip:hover{ background:var(--color-surface-alt); text-decoration:none; }
+
+.dd-section{ margin-bottom: var(--space-6); }
+.dd-section>h2{ margin-bottom: var(--space-3); }
+
+.dd-accordion{ display:grid; gap:.5rem; }
+.dd-accordion details{
+  border:1px solid var(--color-border-subtle);
+  background:var(--color-surface);
+  border-radius:var(--radius-md);
+  padding:.25rem .5rem;
+}
+.dd-accordion summary{
+  cursor:pointer; list-style:none; color:var(--color-text);
+  padding:.75rem; border-radius:.6rem; font-weight:600;
+}
+.dd-accordion summary::-webkit-details-marker{ display:none; }
+.dd-accordion details[open]{ background:var(--color-surface); }
+.dd-accordion .dd-body{ padding:0 .75rem .9rem .9rem; color:var(--color-text-muted); }
diff --git a/telcoinwiki-react/src/styles/global.css b/telcoinwiki-react/src/styles/global.css
new file mode 100644
index 0000000..703d0f9
--- /dev/null
+++ b/telcoinwiki-react/src/styles/global.css
@@ -0,0 +1,19 @@
+/* telcoinwiki-react/src/styles/global.css
+   Aggregates legacy Telcoin Wiki global styles for the Vite app.
+*/
+@import './tokens.css';
+@import './variables.css';
+@import './critical.css';
+@import './site.css';
+@import './brand.css';
+
+/* Vite root reset: ensure the SPA mount point behaves like the static site */
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+}
diff --git a/telcoinwiki-react/src/styles/index.css b/telcoinwiki-react/src/styles/index.css
new file mode 100644
index 0000000..622e889
--- /dev/null
+++ b/telcoinwiki-react/src/styles/index.css
@@ -0,0 +1,2 @@
+@import url('./variables.css');
+@import url('./site.css');
diff --git a/telcoinwiki-react/src/styles/site.css b/telcoinwiki-react/src/styles/site.css
new file mode 100644
index 0000000..dca53cf
--- /dev/null
+++ b/telcoinwiki-react/src/styles/site.css
@@ -0,0 +1,1737 @@
+@charset "UTF-8";
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+  color: var(--tc-ink);
+  background:
+    radial-gradient(1200px 800px at 10% -10%, rgba(69, 188, 241, 0.14), transparent 70%),
+    linear-gradient(180deg, #10255e 0%, var(--tc-bg) 60%);
+  min-height: 100vh;
+}
+
+main {
+  display: block;
+}
+
+a {
+  color: var(--tc-accent);
+  text-decoration: none;
+  transition: color var(--transition-base);
+}
+
+a:hover,
+a:focus-visible {
+  text-decoration: underline;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-card);
+}
+
+p {
+  margin: 0 0 var(--space-4);
+  color: var(--tc-ink-muted);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--color-text);
+  margin: 0 0 var(--space-3);
+}
+
+h1 {
+  font-size: clamp(2.2rem, 4vw, 3.2rem);
+}
+
+h2 {
+  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
+}
+
+h3 {
+  font-size: clamp(1.25rem, 2vw, 1.6rem);
+}
+
+h4 {
+  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
+}
+
+ul,
+ol {
+  margin: 0 0 var(--space-4);
+  padding-left: var(--space-5);
+  color: var(--color-text-muted);
+}
+
+li + li {
+  margin-top: var(--space-2);
+}
+
+code,
+pre {
+  font-family: var(--font-family-mono);
+}
+
+pre {
+  background: var(--tc-surface);
+  border: 1px solid var(--tc-border);
+  border-radius: var(--radius-card);
+  padding: var(--space-4);
+  overflow-x: auto;
+  color: var(--tc-ink);
+  margin-bottom: var(--space-4);
+  box-shadow: var(--shadow-glass);
+}
+
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-primary);
+  color: #fff;
+  border-radius: var(--radius-sm);
+  z-index: 200;
+  transition: top var(--transition-base);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.skip-link:focus {
+  top: var(--space-3);
+}
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 120;
+  background: var(--tc-surface);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-bottom: 1px solid var(--tc-border);
+  box-shadow: var(--shadow-glass);
+}
+
+.site-header__inner {
+  max-width: var(--max-width-wide);
+  margin: 0 auto;
+  padding: 0.75rem 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.site-logo {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  font-weight: 600;
+  transition: background var(--transition-base), transform var(--transition-base);
+}
+
+.site-logo img {
+  width: 40px;
+  height: 40px;
+  border-radius: 0;
+}
+
+.site-logo span {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: inherit;
+}
+
+.site-logo:focus-visible,
+.site-logo:hover {
+  background: var(--color-surface-alt);
+  transform: translateY(-1px);
+  text-decoration: none;
+}
+
+.sidebar-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--tc-border);
+  background: var(--tc-surface-2);
+  color: var(--tc-ink);
+  padding: var(--space-2) var(--space-3);
+  font-size: 0.95rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background var(--transition-base), transform var(--transition-base);
+}
+
+.sidebar-toggle:hover,
+.sidebar-toggle:focus-visible {
+  background: var(--color-surface);
+  transform: translateY(-1px);
+}
+
+.top-nav {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+}
+
+.top-nav__list {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+}
+
+.top-nav__link {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.625rem 0.875rem;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--tc-border);
+  background: var(--tc-surface);
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--tc-ink-muted);
+  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+
+.top-nav__link:hover,
+.top-nav__link:focus-visible {
+  text-decoration: none;
+  color: var(--tc-ink);
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--tc-border-strong);
+  box-shadow: var(--shadow-focus);
+}
+
+.top-nav__link.is-active {
+  color: var(--tc-ink);
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--tc-border-strong);
+}
+
+.site-header__actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+
+@media (max-width: 1024px) {
+  .site-header__actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .header-search {
+    width: min(100%, 20rem);
+  }
+}
+
+.last-updated {
+  font-size: 0.75rem;
+  color: var(--color-text-soft);
+}
+
+.header-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 0 1 auto;
+  width: clamp(14rem, 36vw, 20rem);
+}
+
+.tc-tabbar {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+
+.nav-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.875rem;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--tc-border);
+  background: var(--tc-surface);
+  color: var(--tc-ink-muted);
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+
+.nav-btn:hover,
+.nav-btn:focus-visible {
+  color: var(--tc-ink);
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--tc-border-strong);
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+
+.nav-btn.is-active {
+  color: var(--tc-ink);
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--tc-border-strong);
+}
+
+@media (max-width: 959px) {
+  .top-nav__list {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .top-nav__link,
+  .nav-btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+.search-input {
+  width: 100%;
+  padding: 0 1rem;
+  min-height: 2.25rem;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--tc-border);
+  background: rgba(17, 31, 68, 0.92);
+  color: var(--tc-ink);
+  font-size: 0.95rem;
+  transition: border-color var(--transition-base), background var(--transition-base);
+}
+
+.search-input::placeholder {
+  color: var(--color-text-soft);
+}
+
+.search-input:focus-visible {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-soft);
+  background: rgba(24, 42, 88, 0.98);
+}
+
+.search-panel {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  right: 0;
+  width: clamp(18rem, 32vw, 26rem);
+  max-height: 26rem;
+  overflow-y: auto;
+  background: var(--tc-surface);
+  border: 1px solid var(--tc-border);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-glass);
+  padding: var(--space-2);
+  display: none;
+  z-index: 140;
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+}
+
+.search-panel[aria-hidden="false"] {
+  display: block;
+}
+
+.search-panel__group + .search-panel__group {
+  margin-top: var(--space-3);
+}
+
+.search-panel__title {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--color-text-soft);
+  margin-bottom: var(--space-2);
+}
+
+.search-result {
+  display: block;
+  border-radius: var(--radius-card);
+  padding: var(--space-2) var(--space-3);
+  color: var(--tc-ink-muted);
+  border: 1px solid transparent;
+  transition: background var(--transition-base), border-color var(--transition-base);
+}
+
+.search-result strong {
+  color: var(--tc-ink);
+}
+
+.search-result mark {
+  background: rgba(69, 188, 241, 0.25);
+  color: var(--tc-ink);
+  border-radius: var(--radius-xs);
+  padding: 0 var(--space-1);
+}
+
+.search-result:hover,
+.search-result:focus-visible {
+  text-decoration: none;
+  background: var(--tc-surface-2);
+  border-color: var(--tc-border);
+  color: var(--tc-ink);
+}
+
+.site-shell {
+  position: relative;
+  display: flex;
+  gap: 2rem;
+  max-width: 75rem;
+  margin: 0 auto;
+  padding: 3rem 1rem 4rem;
+  align-items: flex-start;
+}
+
+.sidebar {
+  flex: 0 0 var(--sidebar-width);
+  position: relative;
+}
+
+.sidebar__inner {
+  position: sticky;
+  top: calc(var(--header-height) + 1rem);
+  max-height: calc(100vh - var(--header-height) - 3rem);
+  overflow-y: auto;
+  padding: 1.5rem;
+  border-radius: var(--radius-card);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+}
+
+.sidebar__heading {
+  font-size: 0.75rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-text-soft);
+  margin-bottom: var(--space-3);
+}
+
+.sidebar__list,
+.sidebar__sublist {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sidebar__item + .sidebar__item {
+  margin-top: var(--space-2);
+}
+
+.sidebar__link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  border-radius: var(--radius-card);
+  padding: var(--space-2) var(--space-3);
+  color: var(--tc-ink-muted);
+  border: 1px solid transparent;
+  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
+}
+
+.sidebar__link:hover,
+.sidebar__link:focus-visible {
+  color: var(--tc-ink);
+  border-color: var(--tc-border);
+  background: var(--tc-surface-2);
+  text-decoration: none;
+}
+
+.sidebar__link.is-active {
+  color: var(--tc-ink);
+  border-color: var(--tc-border-strong);
+  background: var(--tc-surface-2);
+}
+
+.sidebar__sublist {
+  margin-top: var(--space-2);
+  padding-left: var(--space-3);
+  border-left: 2px solid var(--color-border-subtle);
+}
+
+.sidebar__subitem + .sidebar__subitem {
+  margin-top: var(--space-1);
+}
+
+.sidebar__sublink {
+  display: inline-flex;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-pill);
+  font-size: 0.85rem;
+  color: var(--tc-ink-subtle);
+  transition: background var(--transition-base), color var(--transition-base);
+}
+
+.sidebar__sublink:hover,
+.sidebar__sublink:focus-visible {
+  color: var(--tc-ink);
+  background: var(--tc-surface-2);
+  text-decoration: none;
+}
+
+.site-main {
+  flex: 1;
+  min-width: 0;
+  padding: 1.5rem;
+  border-radius: var(--radius-big);
+  display: grid;
+  gap: 1.5rem;
+}
+
+.site-main h2,
+.site-main h3 {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+.breadcrumbs {
+  font-size: 0.85rem;
+  color: var(--color-text-soft);
+  margin-bottom: var(--space-4);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  align-items: center;
+}
+
+.breadcrumbs a {
+  color: inherit;
+}
+
+.breadcrumbs__separator {
+  opacity: 0.45;
+}
+
+.page-intro {
+  background: var(--tc-surface);
+  border: 1px solid var(--tc-border);
+  border-radius: var(--radius-big);
+  padding: 1.5rem;
+  box-shadow: var(--shadow-glass);
+  margin-bottom: var(--space-6);
+}
+
+.page-intro__eyebrow {
+  font-size: 0.75rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-secondary);
+  margin-bottom: var(--space-3);
+}
+
+.page-intro__title {
+  margin-bottom: var(--space-3);
+}
+
+.page-intro__lede {
+  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
+  color: var(--color-text-muted);
+  max-width: 42rem;
+}
+
+.card-grid {
+  display: grid;
+  gap: var(--space-4);
+}
+
+@media (min-width: 640px) {
+  .card-grid--cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 960px) {
+  .card-grid--cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .top-nav {
+    display: flex;
+    margin-left: var(--space-3);
+  }
+
+  .sidebar-toggle {
+    display: none;
+  }
+
+  .site-header__inner {
+    flex-wrap: nowrap;
+  }
+
+  .site-header__actions {
+    flex: 0 0 auto;
+    justify-content: flex-end;
+    gap: var(--space-4);
+    margin-left: auto;
+  }
+
+  .last-updated {
+    font-size: 0.8rem;
+  }
+
+  .header-search {
+    width: clamp(14rem, 32vw, 20rem);
+  }
+}
+
+.card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  box-shadow: var(--shadow-xs);
+  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
+}
+
+.card--link {
+  display: block;
+  height: 100%;
+}
+
+.card--link:hover,
+.card--link:focus-visible {
+  transform: translateY(-4px);
+  border-color: var(--color-border);
+  box-shadow: var(--shadow-md);
+  text-decoration: none;
+}
+
+.card__title {
+  margin-bottom: var(--space-2);
+}
+
+.card__meta {
+  font-size: 0.85rem;
+  color: var(--color-text-soft);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  margin-bottom: var(--space-2);
+}
+
+.card__cta {
+  margin-top: var(--space-3);
+  font-size: 0.9rem;
+  color: var(--color-secondary);
+  font-weight: 500;
+}
+
+.getting-started {
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border-subtle);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xs);
+  backdrop-filter: blur(24px);
+}
+
+.getting-started__toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.getting-started__toggle:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 4px;
+}
+
+.getting-started__toggle-text {
+  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
+  font-weight: 600;
+}
+
+.getting-started__toggle-icon {
+  flex-shrink: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 9999px;
+  background: var(--color-primary-soft);
+  position: relative;
+  transition: background var(--transition-base);
+  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
+}
+
+.getting-started__toggle-icon::before,
+.getting-started__toggle-icon::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1rem;
+  height: 2px;
+  background: var(--color-primary);
+  border-radius: 9999px;
+  transform: translate(-50%, -50%);
+}
+
+.getting-started__toggle-icon::after {
+  transform: translate(-50%, -50%) rotate(90deg);
+  transition: opacity var(--transition-base);
+}
+
+.getting-started.is-open .getting-started__toggle-icon {
+  background: rgba(64, 102, 222, 0.32);
+}
+
+.getting-started.is-open .getting-started__toggle-icon::after {
+  opacity: 0;
+}
+
+.getting-started__panel {
+  border-top: 1px solid var(--color-border-subtle);
+  padding: 0 var(--space-4) var(--space-5);
+}
+
+.getting-started__intro {
+  margin: var(--space-4) 0;
+  color: var(--color-text-muted);
+}
+
+.getting-started__grid {
+  margin-top: var(--space-4);
+}
+
+.getting-started-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xs);
+  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
+}
+
+.getting-started-card:hover,
+.getting-started-card:focus-within,
+.getting-started-card.is-open {
+  transform: translateY(-4px);
+  border-color: var(--color-border);
+  box-shadow: var(--shadow-md);
+}
+
+.getting-started-card__summary {
+  width: 100%;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  cursor: pointer;
+}
+
+.getting-started-card__summary:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
+.getting-started-card__summary .card__title {
+  margin: 0;
+}
+
+.getting-started-card__chevron {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+  background: var(--color-primary-soft);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--transition-base), background var(--transition-base);
+}
+
+.getting-started-card__chevron::before {
+  content: '';
+  display: inline-block;
+  width: 0.45rem;
+  height: 0.45rem;
+  border: 2px solid var(--color-primary);
+  border-top: none;
+  border-left: none;
+  transform: rotate(45deg);
+}
+
+.getting-started-card.is-open .getting-started-card__chevron {
+  transform: rotate(180deg);
+  background: rgba(78, 163, 255, 0.28);
+}
+
+.getting-started-card__content {
+  border-top: 1px solid var(--color-border-subtle);
+  padding: 0 var(--space-4) var(--space-4);
+}
+
+.getting-started-card__content p {
+  margin-top: var(--space-4);
+  margin-bottom: var(--space-3);
+}
+
+.getting-started-card__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-secondary);
+  font-weight: 600;
+}
+
+.getting-started-card__cta::after {
+  content: '→';
+  font-size: 0.95em;
+}
+
+.getting-started-card__cta:hover,
+.getting-started-card__cta:focus-visible {
+  text-decoration: none;
+  color: var(--color-secondary);
+}
+
+.notice {
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  border: 1px solid var(--color-border-subtle);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xs);
+  margin-bottom: var(--space-4);
+}
+
+.notice--info {
+  border-color: rgba(64, 102, 222, 0.35);
+  background: var(--color-info-soft);
+}
+
+.notice--warning {
+  border-color: rgba(250, 204, 21, 0.4);
+  background: var(--color-warning-soft);
+  color: var(--color-warning);
+}
+
+.notice__title {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  margin-bottom: var(--space-2);
+}
+
+.tag-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  border-radius: var(--radius-pill);
+  padding: var(--space-1) var(--space-3);
+  font-size: 0.85rem;
+  border: 1px solid var(--color-border-subtle);
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
+}
+
+.tag-pill:hover,
+.tag-pill:focus-visible {
+  text-decoration: none;
+  background: var(--color-surface-alt);
+  color: var(--color-text);
+}
+
+.tag-pill.is-active {
+  background: var(--color-surface-alt);
+  border-color: var(--color-border);
+  color: var(--color-text);
+}
+
+.faq-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-4);
+}
+
+.faq-controls__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.faq-search {
+  position: relative;
+  width: min(100%, 24rem);
+}
+
+.faq-search input {
+  width: 100%;
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--color-border-subtle);
+  background: rgba(17, 31, 68, 0.88);
+  color: var(--color-text);
+}
+
+.faq-search input:focus-visible {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-soft);
+}
+
+.faq-list {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.accordion {
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xs);
+}
+
+.accordion__summary {
+  width: 100%;
+  background: none;
+  border: none;
+  color: inherit;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  text-align: left;
+  padding: var(--space-4);
+  gap: var(--space-3);
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.accordion__summary:hover,
+.accordion__summary:focus-visible {
+  background: var(--color-surface-alt);
+}
+
+.accordion__icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  border: 1px solid var(--color-border-subtle);
+  background: var(--color-surface);
+  font-size: 0.9rem;
+  transition: transform var(--transition-base);
+}
+
+.accordion.is-open .accordion__icon {
+  transform: rotate(180deg);
+}
+
+.accordion__content {
+  padding: 0 var(--space-4) var(--space-4);
+  color: var(--color-text-muted);
+}
+
+.accordion__permalink {
+  font-size: 0.9rem;
+  color: var(--color-secondary);
+  text-decoration: none;
+}
+
+.accordion__permalink:hover,
+.accordion__permalink:focus-visible {
+  text-decoration: underline;
+}
+
+.accordion__sources {
+  margin-top: var(--space-3);
+}
+
+.faq-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.faq-card__summary {
+  width: 100%;
+}
+
+.faq-card__summary-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+}
+
+.faq-card__summary-text p {
+  margin: 0;
+  color: var(--color-text-soft);
+}
+
+.faq-card__content {
+  border-top: 1px solid var(--color-border-subtle);
+  padding-top: var(--space-4);
+}
+
+.faq-card__answer p:last-child {
+  margin-bottom: 0;
+}
+
+.faq-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
+}
+
+.faq-card__cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(78, 163, 255, 0.6);
+  background: rgba(78, 163, 255, 0.12);
+  color: var(--color-primary);
+  font-weight: 600;
+  text-decoration: none;
+  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
+}
+
+.faq-card__cta:hover,
+.faq-card__cta:focus-visible {
+  text-decoration: none;
+  border-color: rgba(78, 163, 255, 0.8);
+  background: rgba(78, 163, 255, 0.2);
+}
+
+.faq-card__sources {
+  margin-top: var(--space-4);
+}
+
+.source-box {
+  margin-top: var(--space-6);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border-subtle);
+  background: var(--color-surface);
+  padding: var(--space-4);
+  box-shadow: var(--shadow-xs);
+}
+
+.source-box__title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  margin-bottom: var(--space-2);
+  color: var(--color-text);
+}
+
+.source-box__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.source-box__links li {
+  margin: 0;
+}
+
+.source-box__link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--color-border-subtle);
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  font-size: 0.88rem;
+  transition: background var(--transition-base), border-color var(--transition-base);
+}
+
+.source-box__link:hover,
+.source-box__link:focus-visible {
+  text-decoration: none;
+  background: var(--color-surface-alt);
+  border-color: var(--color-border);
+  color: var(--color-text);
+}
+
+.results-list {
+  list-style: none;
+  margin: var(--space-2) 0 0;
+  padding: 0;
+}
+
+.results-list__item + .results-list__item {
+  margin-top: var(--space-2);
+}
+
+.results-list__link {
+  display: block;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  color: var(--color-text-muted);
+}
+
+.results-list__link:hover,
+.results-list__link:focus-visible {
+  text-decoration: none;
+  border-color: var(--color-border-subtle);
+  background: var(--color-surface-alt);
+  color: var(--color-text);
+}
+
+.context-box {
+  border-radius: var(--radius-lg);
+  border: 1px dashed rgba(69, 188, 241, 0.45);
+  background: rgba(69, 188, 241, 0.12);
+  padding: var(--space-4);
+  margin-bottom: var(--space-4);
+}
+
+.context-box__title {
+  font-size: 0.95rem;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--color-text);
+  margin-bottom: var(--space-2);
+}
+
+.section-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+}
+
+.section-header h2 {
+  margin: 0;
+}
+
+.section-header .btn-primary,
+.section-header .btn-secondary {
+  flex-shrink: 0;
+}
+
+.entry-list {
+  list-style: none;
+  margin: var(--space-4) 0 0;
+  padding: 0;
+  display: grid;
+  gap: var(--space-3);
+}
+
+.entry-list__item {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: rgba(14, 25, 52, 0.8);
+  padding: var(--space-4);
+}
+
+.entry-list__item--deprecated {
+  border-color: rgba(250, 204, 21, 0.32);
+  background: var(--color-warning-soft);
+}
+
+.entry-list__item--archived {
+  border-color: rgba(78, 163, 255, 0.28);
+  background: rgba(78, 163, 255, 0.12);
+}
+
+.entry-list__item--deprecated .entry-list__label,
+.entry-list__item--deprecated .entry-list__meta,
+.entry-list__item--archived .entry-list__label,
+.entry-list__item--archived .entry-list__meta {
+  color: var(--color-text);
+}
+
+.entry-list__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.entry-list__label {
+  margin: 0;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--color-text-muted);
+}
+
+.entry-list__value {
+  margin: var(--space-1) 0 0;
+  font-size: 1.35rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.entry-list__meta {
+  margin: var(--space-3) 0 0;
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
+}
+
+.table-scroll {
+  width: 100%;
+  overflow-x: auto;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border-subtle);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xs);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 40rem;
+}
+
+th,
+td {
+  padding: var(--space-3);
+  text-align: left;
+  font-size: 0.95rem;
+  border-bottom: 1px solid var(--color-border-subtle);
+  color: var(--color-text-muted);
+}
+
+th {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--color-text);
+  background: var(--color-surface-alt);
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+.table-name {
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.table-note {
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
+}
+
+.metric-value {
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.value-change {
+  margin-top: var(--space-1);
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+}
+
+.value-change.positive,
+.positive {
+  color: var(--color-secondary);
+}
+
+.value-change.negative,
+.negative {
+  color: var(--color-warning);
+}
+
+.value-change.neutral,
+.neutral {
+  color: var(--color-text-muted);
+}
+
+.refresh-banner {
+  margin: var(--space-4) 0 var(--space-3);
+  display: grid;
+  gap: var(--space-2);
+}
+
+.refresh-banner__label {
+  font-size: 0.75rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--color-text-soft);
+}
+
+.refresh-progress {
+  position: relative;
+  height: 0.4rem;
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-alt);
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity 0.6s var(--transition-smooth);
+}
+
+.refresh-progress.is-active {
+  opacity: 1;
+}
+
+.refresh-progress.is-complete {
+  opacity: 0;
+}
+
+.refresh-progress__indicator {
+  position: absolute;
+  inset: 0;
+  width: 0%;
+  background: linear-gradient(90deg, rgba(69, 188, 241, 0.7), rgba(64, 102, 222, 0.85));
+  border-radius: inherit;
+  transform-origin: left center;
+}
+
+.refresh-progress.is-active .refresh-progress__indicator {
+  animation: progressFill 1.8s var(--transition-smooth) forwards;
+}
+
+.refresh-progress.is-complete .refresh-progress__indicator {
+  animation: none;
+  width: 100%;
+}
+
+.refresh-progress.is-error .refresh-progress__indicator {
+  background: linear-gradient(90deg, rgba(250, 204, 21, 0.65), rgba(248, 113, 113, 0.75));
+}
+
+@keyframes progressFill {
+  from {
+    width: 0%;
+  }
+
+  to {
+    width: 100%;
+  }
+}
+
+.skeleton-row td {
+  border-bottom: none;
+  color: transparent;
+}
+
+.skeleton {
+  display: block;
+  height: 0.75rem;
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-alt);
+  position: relative;
+  overflow: hidden;
+}
+
+.skeleton + .skeleton {
+  margin-top: var(--space-1);
+}
+
+.skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
+  transform: translateX(-100%);
+  animation: skeletonSweep 1.8s ease-in-out infinite;
+}
+
+.skeleton--name {
+  width: clamp(6rem, 26vw, 11rem);
+  height: 1rem;
+  border-radius: var(--radius-sm);
+}
+
+.skeleton--chip {
+  width: 5.5rem;
+  height: 1.2rem;
+}
+
+.skeleton--value {
+  width: clamp(5rem, 22vw, 8rem);
+  height: 0.95rem;
+  border-radius: var(--radius-sm);
+}
+
+.skeleton--change {
+  width: clamp(3.5rem, 14vw, 6rem);
+  height: 0.75rem;
+  border-radius: var(--radius-sm);
+  opacity: 0.65;
+}
+
+.skeleton--wide {
+  width: clamp(8rem, 34vw, 15rem);
+  height: 0.9rem;
+  border-radius: var(--radius-sm);
+}
+
+@keyframes skeletonSweep {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  60% {
+    transform: translateX(120%);
+  }
+
+  100% {
+    transform: translateX(120%);
+  }
+}
+
+.status-chip,
+.tc-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-pill);
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: none;
+  color: var(--tc-ink-muted);
+  background: var(--tc-surface);
+  border: 1px solid var(--tc-border);
+  box-shadow: var(--shadow-glass);
+  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base),
+    box-shadow var(--transition-base);
+}
+
+.tc-chip.is-active {
+  background: rgba(69, 188, 241, 0.18);
+  border-color: rgba(69, 188, 241, 0.4);
+  color: #dff6ff;
+}
+
+.tc-chip.is-archived {
+  background: rgba(64, 102, 222, 0.18);
+  border-color: rgba(64, 102, 222, 0.4);
+  color: var(--tc-ink);
+}
+
+.tc-chip.is-deprecated {
+  background: rgba(250, 204, 21, 0.18);
+  border-color: rgba(250, 204, 21, 0.42);
+  color: #fff3b0;
+}
+
+.btn,
+.btn-primary,
+.btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: #fff;
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-primary:hover,
+.btn-primary:focus-visible {
+  transform: translateY(-1px);
+  background: var(--color-primary-strong);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-secondary {
+  background: var(--color-surface);
+  border-color: var(--color-border-subtle);
+  color: var(--color-text);
+}
+
+.btn-secondary:hover,
+.btn-secondary:focus-visible {
+  transform: translateY(-1px);
+  border-color: var(--color-border);
+  background: var(--color-surface-alt);
+  box-shadow: var(--shadow-xs);
+}
+
+.btn:disabled,
+.btn[disabled],
+.btn-primary:disabled,
+.btn-primary[disabled],
+.btn-secondary:disabled,
+.btn-secondary[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.footer {
+  margin-top: auto;
+  background: rgba(14, 27, 63, 0.92);
+  border-top: 1px solid var(--color-border-subtle);
+}
+
+.footer__inner {
+  max-width: var(--max-width-wide);
+  margin: 0 auto;
+  padding: var(--space-6) var(--space-4);
+  display: grid;
+  gap: var(--space-5);
+}
+
+.footer__cols {
+  display: grid;
+  gap: var(--space-4);
+}
+
+@media (min-width: 720px) {
+  .footer__cols {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.footer__title {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--color-text-soft);
+  margin-bottom: var(--space-2);
+}
+
+.footer__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--space-1);
+  font-size: 0.95rem;
+  color: var(--color-text-muted);
+}
+
+.footer__note {
+  font-size: 0.85rem;
+  color: var(--color-text-soft);
+  border-top: 1px solid var(--color-border-subtle);
+  padding-top: var(--space-4);
+}
+
+.sidebar-overlay {
+  display: none;
+}
+
+@media (max-width: 959px) {
+  .site-shell {
+    flex-direction: column;
+    padding-top: var(--space-5);
+  }
+
+  .sidebar {
+    position: static;
+    inset: auto;
+    transform: none;
+    opacity: 1;
+    pointer-events: auto;
+    width: 100%;
+  }
+
+  .sidebar__inner {
+    position: relative;
+    max-height: none;
+  }
+
+  .sidebar-overlay {
+    display: none !important;
+  }
+}
+
+@media (max-width: 639px) {
+  .card-grid--cols-2,
+  .card-grid--cols-3 {
+    grid-template-columns: 1fr;
+  }
+
+  table {
+    min-width: 32rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .search-panel {
+    left: 0;
+    right: auto;
+    width: 100%;
+  }
+}
+
+.empty-state {
+  padding: var(--space-4);
+  text-align: center;
+  color: var(--color-text-soft);
+  border-radius: var(--radius-lg);
+  border: 1px dashed rgba(69, 188, 241, 0.4);
+  background: rgba(69, 188, 241, 0.12);
+}
+
+.anchor-offset {
+  scroll-margin-top: calc(var(--header-height) + var(--space-4));
+}
+
+mark {
+  background: rgba(69, 188, 241, 0.3);
+  color: inherit;
+  border-radius: var(--radius-xs);
+  padding: 0 var(--space-1);
+}
+
+/* === HEADER FIX (telco.in style) ========================================= */
+.site-header__inner{
+  display:grid !important;
+  grid-template-columns:auto 1fr auto;
+  align-items:center;
+  gap:12px;
+}
+
+/* Desktop nav in a single row with scroll on overflow */
+.top-nav{ display:block !important; }
+.top-nav__list{
+  display:flex;
+  flex-wrap:nowrap;                 /* keep one row */
+  gap:8px;
+  align-items:center;
+  margin:0;
+  padding:0;
+  overflow-x:auto;                  /* graceful overflow */
+  scrollbar-width:none;
+}
+.top-nav__list::-webkit-scrollbar{ display:none; }
+
+/* Pill buttons */
+.top-nav__link{
+  white-space:nowrap;
+  display:inline-flex;
+  align-items:center;
+  padding:10px 14px;
+  border-radius:9999px;
+  border:1px solid var(--color-border-subtle);
+  background:var(--color-surface-alt);
+  color:var(--color-text);
+  font-weight:600;
+  text-decoration:none;
+}
+.top-nav__link:hover,
+.top-nav__link:focus-visible{
+  background:var(--color-surface);
+  border-color:rgba(255,255,255,.18);
+  text-decoration:none;
+}
+.top-nav__link.is-active{
+  background:var(--color-surface);
+  border-color:rgba(255,255,255,.18);
+}
+
+/* Right-side actions */
+.last-updated{ margin-left:16px; white-space:nowrap; color:var(--color-text-soft); font-size:.85rem; }
+.site-header__actions{ display:flex; align-items:center; justify-content:flex-end; gap:12px; }
+.header-search{ min-width:320px; max-width:360px; }
+.search-input{
+  height:36px; padding:0 14px;
+  border:1px solid var(--color-border-subtle);
+  border-radius:9999px;
+  background:rgba(17,31,68,.92);
+  color:var(--color-text);
+}
+
+/* Hide the ghost bar / panel unless JS opens it */
+.search-panel[hidden]{ display:none !important; }
+.header-divider, .search-ghost{ display:none !important; }
+
+/* Responsive: allow wrap on medium; hide desktop nav on mobile */
+@media (max-width:1200px){
+  .site-header__inner{
+    grid-template-columns:auto 1fr;
+    grid-template-areas:
+      "logo actions"
+      "nav  nav";
+  }
+  .top-nav{ grid-area:nav; }
+  .site-header__actions{ grid-area:actions; }
+}
+@media (max-width:920px){
+  .top-nav{ display:none !important; }      /* mobile menu remains */
+  .header-search{ min-width:0; max-width:100%; }
+}
+
+/* Ensure logo link doesn’t stretch */
+.site-logo{ display:inline-flex; align-items:center; gap:8px; }
diff --git a/telcoinwiki-react/src/styles/tokens.css b/telcoinwiki-react/src/styles/tokens.css
new file mode 100644
index 0000000..3af6aec
--- /dev/null
+++ b/telcoinwiki-react/src/styles/tokens.css
@@ -0,0 +1,65 @@
+:root {
+  /* Telcoin palette */
+  --tc-primary: #4066DE;
+  --tc-primary-50: #E4ECF7;
+  --tc-primary-300: #7F86D2;
+  --tc-primary-500: #4066DE;
+  --tc-primary-700: #2C2C7A;
+  --tc-accent: #45BCF1;
+
+  --tc-ink: rgba(255, 255, 255, 0.92);
+  --tc-ink-muted: rgba(255, 255, 255, 0.8);
+  --tc-ink-subtle: rgba(255, 255, 255, 0.65);
+
+  --tc-bg: #0f1a3a;
+  --tc-surface: rgba(255, 255, 255, 0.05);
+  --tc-surface-2: rgba(255, 255, 255, 0.08);
+  --tc-border: rgba(255, 255, 255, 0.1);
+  --tc-border-strong: rgba(255, 255, 255, 0.18);
+
+  --tc-radius: 1rem;
+  --tc-radius-lg: 1.25rem;
+  --tc-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+
+.tc-card {
+  border: 1px solid var(--tc-border);
+  background: var(--tc-surface);
+  border-radius: var(--tc-radius-lg);
+  box-shadow: var(--tc-shadow);
+}
+
+.tc-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--tc-radius);
+  border: 1px solid var(--tc-border);
+  background: var(--tc-surface);
+  color: var(--tc-ink);
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.tc-tabbar {
+  display: inline-flex;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border-radius: var(--tc-radius-lg);
+  background: var(--tc-surface);
+}
+
+.tc-tabbar button[aria-pressed="true"] {
+  background: var(--tc-surface-2);
+  color: var(--tc-ink);
+  border-radius: 0.75rem;
+}
+
+.tc-link {
+  color: var(--tc-accent);
+}
+
+.tc-link:hover {
+  text-decoration: underline;
+}
diff --git a/telcoinwiki-react/src/styles/variables.css b/telcoinwiki-react/src/styles/variables.css
new file mode 100644
index 0000000..e4a1675
--- /dev/null
+++ b/telcoinwiki-react/src/styles/variables.css
@@ -0,0 +1,58 @@
+:root {
+  color-scheme: dark;
+  --font-family-base: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
+  --font-family-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
+  --line-height-base: 1.6;
+
+  --color-bg: var(--tc-bg);
+  --color-surface: var(--tc-surface);
+  --color-surface-alt: var(--tc-surface-2);
+  --color-surface-soft: var(--tc-surface);
+  --color-border: var(--tc-border-strong);
+  --color-border-subtle: var(--tc-border);
+  --color-text: var(--tc-ink);
+  --color-text-muted: var(--tc-ink-muted);
+  --color-text-soft: var(--tc-ink-subtle);
+  --color-text-inverse: #050f2d;
+
+  --color-primary: var(--tc-primary-500);
+  --color-primary-strong: var(--tc-primary-700);
+  --color-primary-soft: rgba(64, 102, 222, 0.22);
+  --color-secondary: var(--tc-accent);
+  --color-secondary-soft: rgba(69, 188, 241, 0.18);
+  --color-highlight: var(--tc-primary-300);
+  --color-warning: #facc15;
+  --color-warning-soft: rgba(250, 204, 21, 0.18);
+  --color-info-soft: rgba(69, 188, 241, 0.18);
+
+  --space-0: 0rem;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 2.5rem;
+  --space-8: 3rem;
+  --space-9: 4rem;
+
+  --radius-xs: 0.5rem;
+  --radius-sm: var(--radius-card);
+  --radius-md: var(--radius-card);
+  --radius-lg: var(--radius-big);
+  --radius-xl: var(--radius-big);
+  --radius-pill: var(--radius-pill);
+
+  --shadow-xs: var(--shadow-glass);
+  --shadow-sm: var(--shadow-glass);
+  --shadow-md: var(--shadow-glass);
+  --shadow-lg: var(--shadow-glass);
+
+  --max-width-content: 72rem;
+  --max-width-wide: 90rem;
+  --sidebar-width: clamp(16rem, 18vw, 20rem);
+  --header-height: 4.25rem;
+  --transition-base: 0.25s ease;
+  --transition-smooth: cubic-bezier(.22, .61, .36, 1);
+}
+
diff --git a/telcoinwiki-react/vite.config.ts b/telcoinwiki-react/vite.config.ts
index 5273f3c..e2b7605 100644
--- a/telcoinwiki-react/vite.config.ts
+++ b/telcoinwiki-react/vite.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
 import react from '@vitejs/plugin-react-swc'
 
 // https://vite.dev/config/