fix: unify responsive design across documentation portal

app/pages/packages.wrn

@@ -11,9 +11,8 @@ page Packages {
       <a class="skip-link" href="#main">Skip to content</a>
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/support">Support</a></nav>
-        <a class="preview-pill" href="/access">Private preview · v0.2.15</a>
-        <button data-wire-theme-toggle class="theme-button" aria-label="Toggle theme">Theme</button>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/tutorial">Tutorial</a><a href="/packages">Packages</a><a href="/guides/project-structure">Guides</a><a href="/language">.wrn language</a><a href="/examples">Examples</a><a href="/search">Search</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.15</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
       <main class="page"><section class="hero compact"><span class="eyebrow">25 focused packages</span><h1>Package reference</h1><p>Everything in the framework, organized by responsibility and documented from the published 0.2.15 APIs.</p><input class="search" type="search" placeholder="Search packages, features, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter packages by category"><div class="category-row"><button type="button" @click="category = 'All'">All<span>25</span></button><button type="button" @click="category = 'AI'">AI<span>1</span></button><button type="button" @click="category = 'Security'">Security<span>5</span></button><button type="button" @click="category = 'Tooling'">Tooling<span>2</span></button><button type="button" @click="category = 'Core'">Core<span>3</span></button><button type="button" @click="category = 'Frontend'">Frontend<span>5</span></button><button type="button" @click="category = 'Data'">Data<span>3</span></button><button type="button" @click="category = 'Runtime'">Runtime<span>3</span></button><button type="button" @click="category = 'Native'">Native<span>2</span></button><button type="button" @click="category = 'Realtime'">Realtime<span>1</span></button></div><p>Showing <strong>{category}</strong> packages</p></section><section class="package-grid"><a class="package-card" href="/packages/ai" data-show="(category === 'All' ? true : category === 'AI') ? (query === '' ? true : 'ai ai server-side anthropic client with generation and streaming. '.includes(query.toLowerCase())) : false">
           <span class="category">AI</span><h2>@wrnexus/ai</h2><p>Server-side Anthropic client with generation and streaming.</p><span class="card-link">Open documentation →</span>