style: navbar 分两行——第一行教程（书架+六章），第二行设计系统四册（虚线分隔+组标签），不再同行

apps/tutorial/src/lib/ui.tsx

@@ -40,9 +40,11 @@ export function Page({
   return (
     <main className="mx-auto max-w-[1200px] px-6 py-8 text-content text-body">
       <header
-        className="mb-8 flex flex-wrap items-center gap-1.5 rounded-2xl border-2 border-ink bg-paper p-2.5 shadow-hard"
+        className="mb-8 rounded-2xl border-2 border-ink bg-paper p-2.5 shadow-hard"
         style={{ viewTransitionName: 'site-header' }}
       >
+        {/* 第一行：教程（书架 + 六章） */}
+        <div className="flex flex-wrap items-center gap-1.5">
           <a href="/index.html" className="mr-2 rounded-lg bg-ink px-2.5 py-1 font-mono text-[13px] font-bold text-paper no-underline">
             stack·教程
           </a>
@@ -61,7 +63,10 @@ export function Page({
               </a>
             )
           })}
-        <span className="mx-1 h-4 w-[2px] rounded bg-ink/20" aria-hidden />
+        </div>
+        {/* 第二行：设计系统四册 */}
+        <div className="mt-2 flex flex-wrap items-center gap-1.5 border-t border-dashed border-ink/20 pt-2">
+          <span className="t-small-mute mr-1">设计系统</span>
           {DESIGN.map((n) => {
             const on = n.key === active
             return (
@@ -72,10 +77,11 @@ export function Page({
                   on ? 'bg-ink text-paper' : 'text-body hover:bg-black/5'
                 }`}
               >
-              设计·{n.label}
+                {n.label}
               </a>
             )
           })}
+        </div>
       </header>
       {(title || desc) && (
         <div className="mb-7">