Redesign ViGet as a first-class Progmasoft product surface1.0.0

6 files changed, 883 insertions, 102 deletions

diff --git a/frontend/src/components/RepositoryFooter.astro b/frontend/src/components/RepositoryFooter.astro
new file mode 100644
index 0000000..58b82af
--- /dev/null
+++ b/frontend/src/components/RepositoryFooter.astro
@@ -0,0 +1,37 @@
+---
+// SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com>
+// SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.0
+---
+
+<footer class="registry-footer">
+  <div class="registry-shell registry-footer-grid">
+    <div class="registry-footer-brand">
+      <a class="registry-brand" href="https://www.progmasoft.com/" aria-label="Progmasoft home">
+        <span class="progmasoft-mark" aria-hidden="true">
+          <span class="progmasoft-tile tile-slate"></span>
+          <span class="progmasoft-tile tile-teal"></span>
+          <span class="progmasoft-tile tile-violet"></span>
+          <span class="progmasoft-tile tile-orange"></span>
+        </span>
+        <strong>Progmasoft</strong>
+      </a>
+      <p>ViGet is the package and Kotlin DSL plugin registry for the Visual X# ecosystem.</p>
+    </div>
+    <div class="registry-footer-links">
+      <strong>Registry</strong>
+      <a href="https://viget.progmasoft.com/">Packages</a>
+      <a href="https://viget.progmasoft.com/dslplugins/">DSL plugins</a>
+      <a href="https://xsharp-lang.xyz/">Visual X#</a>
+    </div>
+    <div class="registry-footer-links">
+      <strong>Progmasoft</strong>
+      <a href="https://account.progmasoft.com/">Account</a>
+      <a href="mailto:support@progmasoft.com">Support</a>
+      <a href="https://github.com/Progmasoft/website">Source</a>
+    </div>
+  </div>
+  <div class="registry-shell registry-footer-bottom">
+    <span>© 2026 Progmasoft</span>
+    <span>ViGet Package Registry by Progmasoft</span>
+  </div>
+</footer>
diff --git a/frontend/src/components/RepositoryHeader.astro b/frontend/src/components/RepositoryHeader.astro
index 625bf2c..3fbc8f9 100644
--- a/frontend/src/components/RepositoryHeader.astro
+++ b/frontend/src/components/RepositoryHeader.astro
@@ -2,8 +2,6 @@
 // SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com>
 // SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.0
 
-import Icon from "./Icon.astro";
-
 interface Props {
   authenticated?: boolean;
 }
@@ -11,28 +9,32 @@ interface Props {
 const { authenticated = false } = Astro.props;
 ---
 
-<header class="repository-header glass-panel">
-  <a class="brand" href="https://viget.progmasoft.com/" aria-label="Visual X# package registry home">
-    <img class="brand-mark" src="/xsharp-logo.webp" width="38" height="38" alt="" />
-    <span class="brand-name">Visual X#</span>
-    <span class="brand-channel">package registry</span>
-  </a>
-  <nav class="repository-navigation" aria-label="Registry navigation">
-    <a href="https://viget.progmasoft.com/">Packages</a>
-    <a href="https://viget.progmasoft.com/dslplugins/">DSL plugins</a>
-    {
-      authenticated ? (
-        <a href="https://account.progmasoft.com/">Account</a>
-      ) : (
-        <>
-          <a href="https://account.progmasoft.com/login">Log in</a>
-          <a class="repository-register" href="https://account.progmasoft.com/register">Register</a>
-        </>
-      )
-    }
-    <a class="repository-source" href="https://github.com/Progmasoft/visual-xsharp" target="_blank" rel="noreferrer">
-      <Icon name="github" />
-      <span>GitHub</span>
+<header class="registry-header">
+  <div class="registry-shell registry-header-inner">
+    <a class="registry-brand" href="https://www.progmasoft.com/" aria-label="Progmasoft home">
+      <span class="progmasoft-mark" aria-hidden="true">
+        <span class="progmasoft-tile tile-slate"></span>
+        <span class="progmasoft-tile tile-teal"></span>
+        <span class="progmasoft-tile tile-violet"></span>
+        <span class="progmasoft-tile tile-orange"></span>
+      </span>
+      <strong>Progmasoft</strong>
+      <span class="registry-product">ViGet</span>
     </a>
-  </nav>
+    <nav class="repository-navigation" aria-label="Registry navigation">
+      <a href="https://viget.progmasoft.com/">Packages</a>
+      <a href="https://viget.progmasoft.com/dslplugins/">DSL plugins</a>
+      {
+        authenticated ? (
+          <a href="https://account.progmasoft.com/">Account</a>
+        ) : (
+          <>
+            <a href="https://account.progmasoft.com/login">Log in</a>
+            <a class="repository-register" href="https://account.progmasoft.com/register">Register</a>
+          </>
+        )
+      }
+      <a href="https://github.com/Progmasoft/visual-xsharp" target="_blank" rel="noreferrer">GitHub</a>
+    </nav>
+  </div>
 </header>
diff --git a/frontend/src/layouts/SiteLayout.astro b/frontend/src/layouts/SiteLayout.astro
index 9da8235..ee29aae 100644
--- a/frontend/src/layouts/SiteLayout.astro
+++ b/frontend/src/layouts/SiteLayout.astro
@@ -3,13 +3,15 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.0
 
 import "../styles/global.css";
+import "../styles/registry.css";
 
 interface Props {
   title: string;
   description: string;
+  theme?: "visual-xsharp" | "progmasoft";
 }
 
-const { title, description } = Astro.props;
+const { title, description, theme = "visual-xsharp" } = Astro.props;
 ---
 
 <!doctype html>
@@ -18,13 +20,13 @@ const { title, description } = Astro.props;
     <meta charset="UTF-8" />
     <meta name="description" content={description} />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#0c111b" />
-    <link rel="icon" type="image/png" href="/xsharp-logo.png" />
+    <meta name="theme-color" content={theme === "progmasoft" ? "#ffffff" : "#0c111b"} />
+    <link rel="icon" type={theme === "progmasoft" ? "image/svg+xml" : "image/png"} href={theme === "progmasoft" ? "/progmasoft-mark.svg" : "/xsharp-logo.png"} />
     <link rel="preload" href="/fonts/AlfaSlabOne-Regular.woff2" as="font" type="font/woff2" crossorigin />
     <link rel="preload" href="/fonts/FiraSans-Regular.woff2" as="font" type="font/woff2" crossorigin />
     <title>{title}</title>
   </head>
-  <body>
+  <body class:list={{ "registry-theme": theme === "progmasoft" }}>
     <slot />
   </body>
 </html>
diff --git a/frontend/src/pages/repo/dslplugins/index.astro b/frontend/src/pages/repo/dslplugins/index.astro
index 10eb985..52e3ce3 100644
--- a/frontend/src/pages/repo/dslplugins/index.astro
+++ b/frontend/src/pages/repo/dslplugins/index.astro
@@ -2,7 +2,7 @@
 // SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com>
 // SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.0
 
-import Icon from "../../../components/Icon.astro";
+import RepositoryFooter from "../../../components/RepositoryFooter.astro";
 import RepositoryHeader from "../../../components/RepositoryHeader.astro";
 import SiteLayout from "../../../layouts/SiteLayout.astro";
 ---
@@ -10,45 +10,41 @@ import SiteLayout from "../../../layouts/SiteLayout.astro";
 <SiteLayout
   title="DSL Plugins · ViGet Package Registry by Progmasoft"
   description="The ViGet Kotlin DSL plugin catalog is online, but no plugins have been published yet."
+  theme="progmasoft"
 >
-  <section class="repository-surface">
-    <div class="ambient" aria-hidden="true">
-      <span class="ambient-orb ambient-orb-a"></span>
-      <span class="ambient-orb ambient-orb-b"></span>
-    </div>
+  <section class="registry-surface">
     <RepositoryHeader />
-    <main class="repository-main">
-      <div class="repository-status glass-panel">
-        <span class="repository-status-icon"><Icon name="modules" /></span>
-        DSL plugin catalog online
-      </div>
-      <p class="eyebrow">Kotlin DSL plugins</p>
-      <h1>No DSL plugins<br /><em>published yet.</em></h1>
-      <p class="repository-lede">
-        Kotlin DSL plugins are distributed as JAR artifacts under
-        <code>/dslplugins/&lt;Publisher&gt;/&lt;Name&gt;/</code>. The catalog is ready, but it does not contain any public
-        plugin releases yet.
-      </p>
-      <div class="repository-actions">
-        <a class="button primary" href="https://viget.progmasoft.com/">
-          Browse Visual X# packages
-          <Icon name="arrow" />
-        </a>
-        <a class="button secondary glass-panel" href="https://github.com/Progmasoft/visual-xsharp" target="_blank" rel="noreferrer">
-          Follow development
-        </a>
-      </div>
-      <div class="repository-note glass-panel">
-        <Icon name="terminal" />
-        <div>
-          <strong>Publishing is not available yet</strong>
-          <span>No placeholder artifacts or package identities are shown before real plugins are published.</span>
+    <main>
+      <section class="registry-subhero">
+        <div class="registry-shell registry-subhero-grid">
+          <div>
+            <p class="registry-eyebrow">ViGet · Kotlin DSL plugins</p>
+            <h1>Extend the project model.</h1>
+            <p>Kotlin DSL plugins are JAR artifacts for Visual.XSharp.kts. They are separate from Visual X# .vipkg packages.</p>
+            <div class="registry-actions">
+              <a class="registry-button registry-button-secondary" href="https://viget.progmasoft.com/">Back to packages</a>
+              <a class="registry-text-link" href="https://github.com/Progmasoft/visual-xsharp">Follow development →</a>
+            </div>
+          </div>
+          <aside class="registry-availability" aria-labelledby="plugin-availability-title">
+            <div class="registry-availability-heading">
+              <span class="registry-status-dot" aria-hidden="true"></span>
+              <span>Catalog available</span>
+            </div>
+            <h2 id="plugin-availability-title">No public DSL plugins yet.</h2>
+            <p>The catalog is ready and intentionally contains no placeholder artifacts.</p>
+            <code class="registry-coordinate">/dslplugins/&lt;Publisher&gt;/&lt;Name&gt;/</code>
+          </aside>
         </div>
-      </div>
+      </section>
+      <section class="registry-guidance">
+        <div class="registry-shell registry-guidance-grid">
+          <div><span>Format</span><strong>Kotlin JAR</strong><p>DSL plugins run as Kotlin/JVM project extensions.</p></div>
+          <div><span>Location</span><strong>Dedicated catalog</strong><p>Plugin coordinates always begin with /dslplugins.</p></div>
+          <div><span>Availability</span><strong>Publishing closed</strong><p>Publishing opens only after the signed plugin contract is complete.</p></div>
+        </div>
+      </section>
     </main>
-    <footer class="repository-footer">
-      <span>viget.progmasoft.com/dslplugins</span>
-      <span>Kotlin DSL plugin catalog</span>
-    </footer>
+    <RepositoryFooter />
   </section>
 </SiteLayout>
diff --git a/frontend/src/pages/repo/index.astro b/frontend/src/pages/repo/index.astro
index 014aa5b..5871a36 100644
--- a/frontend/src/pages/repo/index.astro
+++ b/frontend/src/pages/repo/index.astro
@@ -2,7 +2,7 @@
 // SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com>
 // SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.0
 
-import Icon from "../../components/Icon.astro";
+import RepositoryFooter from "../../components/RepositoryFooter.astro";
 import RepositoryHeader from "../../components/RepositoryHeader.astro";
 import SiteLayout from "../../layouts/SiteLayout.astro";
 ---
@@ -10,44 +10,84 @@ import SiteLayout from "../../layouts/SiteLayout.astro";
 <SiteLayout
   title="ViGet Package Registry by Progmasoft"
   description="The Visual X# package registry is online, but no packages have been published yet."
+  theme="progmasoft"
 >
-  <section class="repository-surface">
-    <div class="ambient" aria-hidden="true">
-      <span class="ambient-orb ambient-orb-a"></span>
-      <span class="ambient-orb ambient-orb-b"></span>
-    </div>
+  <section class="registry-surface">
     <RepositoryHeader />
-    <main class="repository-main">
-      <div class="repository-status glass-panel">
-        <span class="repository-status-icon"><Icon name="modules" /></span>
-        Registry online
-      </div>
-      <p class="eyebrow">Visual X# package registry</p>
-      <h1>No packages<br /><em>published yet.</em></h1>
-      <p class="repository-lede">
-        The registry is ready for the next stage of Visual X# development, but it does not contain any
-        public package releases yet.
-      </p>
-      <div class="repository-actions">
-        <a class="button primary" href="https://xsharp-lang.xyz/">
-          Visit Visual X# language
-          <Icon name="arrow" />
-        </a>
-        <a class="button secondary glass-panel" href="https://github.com/Progmasoft/visual-xsharp" target="_blank" rel="noreferrer">
-          Follow development
-        </a>
-      </div>
-      <div class="repository-note glass-panel">
-        <Icon name="terminal" />
-        <div>
-          <strong>Publishing is not available yet</strong>
-          <span>Visual X# packages use .vipkg coordinates; Kotlin DSL plugins have a separate JAR catalog under /dslplugins.</span>
+    <main>
+      <section class="registry-hero">
+        <div class="registry-shell registry-hero-grid">
+          <div class="registry-hero-copy">
+            <p class="registry-eyebrow">ViGet package registry</p>
+            <h1>Packages for the<br /><span>Visual X# ecosystem.</span></h1>
+            <p class="registry-lede">
+              ViGet is the canonical source for Visual X# packages and project DSL plugins, operated directly by
+              Progmasoft.
+            </p>
+            <div class="registry-actions">
+              <a class="registry-button registry-button-primary" href="https://account.progmasoft.com/register">Create account</a>
+              <a class="registry-button registry-button-secondary" href="https://xsharp-lang.xyz/">Explore Visual X#</a>
+            </div>
+          </div>
+          <aside class="registry-availability" aria-labelledby="availability-title">
+            <div class="registry-availability-heading">
+              <span class="registry-status-dot" aria-hidden="true"></span>
+              <span>Registry available</span>
+            </div>
+            <h2 id="availability-title">The public catalog is empty.</h2>
+            <p>No package releases have been published yet. ViGet will show real packages here as they become available.</p>
+            <dl>
+              <div><dt>Package format</dt><dd>.vipkg</dd></div>
+              <div><dt>Publisher identity</dt><dd>Progmasoft Account</dd></div>
+              <div><dt>Publishing</dt><dd>Not open yet</dd></div>
+            </dl>
+          </aside>
         </div>
-      </div>
+      </section>
+
+      <section class="registry-catalogs">
+        <div class="registry-shell">
+          <div class="registry-section-heading">
+            <div>
+              <p class="registry-eyebrow">Catalogs</p>
+              <h2>Two artifact types, one registry.</h2>
+            </div>
+            <p>Packages and project DSL plugins have separate, predictable coordinate spaces.</p>
+          </div>
+          <div class="registry-catalog-grid">
+            <article class="registry-catalog-card registry-catalog-card-primary">
+              <span class="registry-card-index">01</span>
+              <p>Visual X# packages</p>
+              <h3>ViPkg catalog</h3>
+              <code>viget.progmasoft.com/&lt;Publisher&gt;/&lt;Name&gt;/</code>
+              <span class="registry-card-copy">Libraries and applications authored in Visual X#, distributed as .vipkg artifacts.</span>
+            </article>
+            <a class="registry-catalog-card" href="https://viget.progmasoft.com/dslplugins/">
+              <span class="registry-card-index">02</span>
+              <p>Project extensions</p>
+              <h3>Kotlin DSL plugins</h3>
+              <code>viget.progmasoft.com/dslplugins/&lt;Publisher&gt;/&lt;Name&gt;/</code>
+              <span class="registry-card-copy">Kotlin JAR plugins that extend Visual.XSharp.kts project configuration.</span>
+              <strong>Open catalog →</strong>
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <section class="registry-principles">
+        <div class="registry-shell registry-principles-grid">
+          <div>
+            <p class="registry-eyebrow">Registry contract</p>
+            <h2>Clear ownership from identity to artifact.</h2>
+          </div>
+          <ol>
+            <li><span>01</span><div><strong>One account name</strong><p>Your Progmasoft Account name is also your ViGet publisher name.</p></div></li>
+            <li><span>02</span><div><strong>Case-sensitive coordinates</strong><p>Publisher and package names retain their exact public spelling.</p></div></li>
+            <li><span>03</span><div><strong>No placeholder releases</strong><p>The catalog stays honestly empty until a real signed artifact is published.</p></div></li>
+          </ol>
+        </div>
+      </section>
     </main>
-    <footer class="repository-footer">
-      <span>viget.progmasoft.com</span>
-      <span>Package registry preview</span>
-    </footer>
+    <RepositoryFooter />
   </section>
 </SiteLayout>
diff --git a/frontend/src/styles/registry.css b/frontend/src/styles/registry.css
new file mode 100644
index 0000000..8100927
--- /dev/null
+++ b/frontend/src/styles/registry.css
@@ -0,0 +1,704 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com>
+ * SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.0
+ */
+
+/* ViGet deliberately shares Progmasoft's restrained, light visual language. */
+.registry-theme {
+  --registry-blue: #0066b8;
+  --registry-blue-dark: #004e8c;
+  --registry-blue-soft: #e8f3fb;
+  --registry-ink: #121417;
+  --registry-muted: #5c6670;
+  --registry-line: #d9e0e6;
+  --registry-surface: #ffffff;
+  --registry-surface-soft: #f5f8fa;
+  background: var(--registry-surface);
+  color: var(--registry-ink);
+  color-scheme: light;
+  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
+}
+
+.registry-theme main {
+  width: 100%;
+  margin: 0;
+}
+
+.registry-theme h1,
+.registry-theme h2,
+.registry-theme h3,
+.registry-theme p {
+  font-family: inherit;
+}
+
+.registry-theme a {
+  color: inherit;
+}
+
+.registry-surface {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  background: var(--registry-surface);
+}
+
+.registry-shell {
+  width: min(1180px, calc(100% - 48px));
+  margin-inline: auto;
+}
+
+/* Header and brand */
+.registry-theme .registry-header {
+  position: sticky;
+  z-index: 20;
+  top: 0;
+  width: 100%;
+  border-bottom: 1px solid var(--registry-line);
+  background: rgb(255 255 255 / 96%);
+  backdrop-filter: blur(14px);
+}
+
+.registry-header-inner {
+  display: flex;
+  min-height: 68px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 28px;
+}
+
+.registry-brand {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 10px;
+  text-decoration: none;
+}
+
+.registry-brand strong {
+  color: #8e0000;
+  font-size: 1.1rem;
+  font-weight: 720;
+  letter-spacing: -0.02em;
+}
+
+.progmasoft-mark {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 2px;
+}
+
+.progmasoft-tile {
+  display: block;
+}
+
+.tile-slate { background: #3b4658; }
+.tile-teal { background: #1e7188; }
+.tile-violet { background: #7655fa; }
+.tile-orange { background: #dc7644; }
+
+.registry-product {
+  margin-left: 4px;
+  padding-left: 14px;
+  border-left: 1px solid var(--registry-line);
+  color: #39434d;
+  font-size: 0.98rem;
+  font-weight: 650;
+}
+
+.registry-theme .repository-navigation {
+  display: flex;
+  align-items: center;
+  gap: 26px;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.registry-theme .repository-navigation a {
+  padding: 8px 0;
+  color: #38434c;
+  text-decoration: none;
+}
+
+.registry-theme .repository-navigation a:hover {
+  color: var(--registry-blue);
+}
+
+.registry-theme .repository-navigation .repository-register {
+  padding: 9px 16px;
+  border: 1px solid var(--registry-blue);
+  background: var(--registry-blue);
+  color: #fff;
+}
+
+.registry-theme .repository-navigation .repository-register:hover {
+  border-color: var(--registry-blue-dark);
+  background: var(--registry-blue-dark);
+  color: #fff;
+}
+
+/* Shared typography and controls */
+.registry-eyebrow {
+  margin: 0 0 18px;
+  color: var(--registry-blue-dark);
+  font-size: 0.76rem;
+  font-weight: 750;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.registry-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-top: 34px;
+}
+
+.registry-button {
+  display: inline-flex;
+  min-height: 44px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  border: 1px solid transparent;
+  font-size: 0.92rem;
+  font-weight: 700;
+  text-decoration: none;
+  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
+}
+
+.registry-button-primary {
+  background: var(--registry-blue);
+  color: #fff !important;
+}
+
+.registry-button-primary:hover {
+  background: var(--registry-blue-dark);
+}
+
+.registry-button-secondary {
+  border-color: #aebbc5;
+  background: #fff;
+  color: #26313a !important;
+}
+
+.registry-button-secondary:hover {
+  border-color: var(--registry-blue);
+  color: var(--registry-blue-dark) !important;
+}
+
+.registry-text-link {
+  color: var(--registry-blue-dark) !important;
+  font-size: 0.92rem;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.registry-theme a:focus-visible {
+  outline: 3px solid #70b5e8;
+  outline-offset: 3px;
+}
+
+/* Registry landing page */
+.registry-hero {
+  position: relative;
+  overflow: hidden;
+  padding: 92px 0 88px;
+  border-bottom: 1px solid var(--registry-line);
+  background:
+    linear-gradient(90deg, transparent 0 67%, rgb(0 102 184 / 4%) 67% 100%),
+    linear-gradient(180deg, #fff, #fbfdff);
+}
+
+.registry-hero::after {
+  position: absolute;
+  top: -130px;
+  right: -160px;
+  width: 520px;
+  height: 520px;
+  border: 1px solid rgb(0 102 184 / 10%);
+  border-radius: 50%;
+  content: "";
+}
+
+.registry-hero-grid,
+.registry-subhero-grid {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  align-items: center;
+  grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.75fr);
+  gap: 76px;
+}
+
+.registry-hero-copy h1,
+.registry-subhero h1 {
+  max-width: 760px;
+  margin: 0;
+  color: var(--registry-ink);
+  font-size: clamp(3rem, 6.2vw, 5.55rem);
+  font-weight: 650;
+  letter-spacing: -0.055em;
+  line-height: 0.99;
+}
+
+.registry-hero-copy h1 span {
+  color: var(--registry-blue);
+}
+
+.registry-lede,
+.registry-subhero-grid > div > p:not(.registry-eyebrow) {
+  max-width: 670px;
+  margin: 27px 0 0;
+  color: var(--registry-muted);
+  font-size: 1.13rem;
+  line-height: 1.65;
+}
+
+.registry-availability {
+  position: relative;
+  padding: 30px;
+  border: 1px solid #cbd6de;
+  border-top: 4px solid var(--registry-blue);
+  background: #fff;
+  box-shadow: 0 18px 55px rgb(29 51 68 / 10%);
+}
+
+.registry-availability-heading {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  color: #35505f;
+  font-size: 0.78rem;
+  font-weight: 750;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.registry-status-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #168451;
+  box-shadow: 0 0 0 4px #dff3e8;
+}
+
+.registry-availability h2 {
+  margin: 24px 0 12px;
+  color: var(--registry-ink);
+  font-size: 1.65rem;
+  font-weight: 680;
+  letter-spacing: -0.025em;
+  line-height: 1.2;
+}
+
+.registry-availability > p {
+  margin: 0;
+  color: var(--registry-muted);
+  line-height: 1.58;
+}
+
+.registry-availability dl {
+  display: grid;
+  gap: 12px;
+  margin: 27px 0 0;
+}
+
+.registry-availability dl div {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  padding-top: 12px;
+  border-top: 1px solid var(--registry-line);
+}
+
+.registry-availability dt {
+  color: #66717a;
+  font-size: 0.82rem;
+}
+
+.registry-availability dd {
+  margin: 0;
+  color: #1e2931;
+  font-size: 0.82rem;
+  font-weight: 700;
+  text-align: right;
+}
+
+.registry-catalogs {
+  padding: 90px 0 100px;
+  background: var(--registry-surface);
+}
+
+.registry-section-heading {
+  display: grid;
+  align-items: end;
+  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.6fr);
+  gap: 70px;
+  margin-bottom: 42px;
+}
+
+.registry-section-heading h2,
+.registry-principles h2 {
+  max-width: 680px;
+  margin: 0;
+  color: var(--registry-ink);
+  font-size: clamp(2rem, 4vw, 3.35rem);
+  font-weight: 650;
+  letter-spacing: -0.045em;
+  line-height: 1.06;
+}
+
+.registry-section-heading > p {
+  margin: 0;
+  color: var(--registry-muted);
+  line-height: 1.65;
+}
+
+.registry-catalog-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 22px;
+}
+
+.registry-catalog-card {
+  display: flex;
+  min-height: 340px;
+  flex-direction: column;
+  padding: 32px;
+  border: 1px solid var(--registry-line);
+  background: #fff;
+  color: var(--registry-ink);
+  text-decoration: none;
+  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
+}
+
+a.registry-catalog-card:hover {
+  border-color: #87afd0;
+  box-shadow: 0 16px 40px rgb(37 73 99 / 10%);
+  transform: translateY(-3px);
+}
+
+.registry-catalog-card-primary {
+  border-color: var(--registry-blue-dark);
+  background: var(--registry-blue-dark);
+  color: #fff;
+}
+
+.registry-card-index {
+  align-self: flex-end;
+  color: #81909a;
+  font-size: 0.75rem;
+  font-weight: 750;
+  letter-spacing: 0.08em;
+}
+
+.registry-catalog-card-primary .registry-card-index,
+.registry-catalog-card-primary .registry-card-copy {
+  color: #cfe7f8;
+}
+
+.registry-catalog-card > p {
+  margin: 28px 0 6px;
+  color: inherit;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  opacity: 0.76;
+  text-transform: uppercase;
+}
+
+.registry-catalog-card h3 {
+  margin: 0 0 24px;
+  color: inherit;
+  font-size: 2rem;
+  font-weight: 650;
+  letter-spacing: -0.035em;
+}
+
+.registry-catalog-card code,
+.registry-coordinate {
+  overflow-wrap: anywhere;
+  color: inherit;
+  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
+  font-size: 0.85rem;
+  line-height: 1.6;
+}
+
+.registry-card-copy {
+  margin-top: auto;
+  padding-top: 34px;
+  color: var(--registry-muted);
+  line-height: 1.55;
+}
+
+.registry-catalog-card > strong {
+  margin-top: 18px;
+  color: var(--registry-blue-dark);
+  font-size: 0.88rem;
+}
+
+.registry-principles {
+  padding: 92px 0;
+  background: var(--registry-surface-soft);
+}
+
+.registry-principles-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr);
+  gap: 90px;
+}
+
+.registry-principles ol {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.registry-principles li {
+  display: grid;
+  grid-template-columns: 50px 1fr;
+  gap: 18px;
+  padding: 24px 0;
+  border-top: 1px solid #cdd7de;
+}
+
+.registry-principles li > span {
+  color: var(--registry-blue);
+  font-size: 0.77rem;
+  font-weight: 750;
+}
+
+.registry-principles li strong {
+  color: var(--registry-ink);
+  font-size: 1.04rem;
+}
+
+.registry-principles li p {
+  margin: 7px 0 0;
+  color: var(--registry-muted);
+  line-height: 1.55;
+}
+
+/* DSL plugin catalog */
+.registry-subhero {
+  padding: 86px 0 96px;
+  border-bottom: 1px solid var(--registry-line);
+  background: linear-gradient(135deg, #f6fafd 0%, #fff 58%);
+}
+
+.registry-subhero h1 {
+  font-size: clamp(3rem, 5.5vw, 4.8rem);
+}
+
+.registry-coordinate {
+  display: block;
+  margin-top: 28px;
+  padding: 13px 14px;
+  background: #eef4f8;
+  color: #24455c;
+}
+
+.registry-guidance {
+  padding: 80px 0 96px;
+}
+
+.registry-guidance-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  border-top: 1px solid var(--registry-line);
+  border-bottom: 1px solid var(--registry-line);
+}
+
+.registry-guidance-grid > div {
+  min-height: 220px;
+  padding: 30px;
+  border-right: 1px solid var(--registry-line);
+}
+
+.registry-guidance-grid > div:last-child {
+  border-right: 0;
+}
+
+.registry-guidance-grid span {
+  display: block;
+  margin-bottom: 28px;
+  color: var(--registry-blue-dark);
+  font-size: 0.75rem;
+  font-weight: 750;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.registry-guidance-grid strong {
+  color: var(--registry-ink);
+  font-size: 1.25rem;
+}
+
+.registry-guidance-grid p {
+  margin: 13px 0 0;
+  color: var(--registry-muted);
+  line-height: 1.58;
+}
+
+/* Footer */
+.registry-theme .registry-footer {
+  width: 100%;
+  margin: auto 0 0;
+  padding: 58px 0 24px;
+  border-top: 1px solid var(--registry-line);
+  background: #fff;
+  color: var(--registry-ink);
+}
+
+.registry-footer-grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 1.7fr) repeat(2, minmax(140px, 0.55fr));
+  gap: 70px;
+}
+
+.registry-footer-brand > p {
+  max-width: 420px;
+  margin: 22px 0 0;
+  color: var(--registry-muted);
+  line-height: 1.6;
+}
+
+.registry-footer-links {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.registry-footer-links strong {
+  margin-bottom: 4px;
+  font-size: 0.82rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.registry-footer-links a {
+  color: var(--registry-muted);
+  fon