diff --git a/.gitignore b/.gitignore
index 4b21ab0..fbd17f3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,9 @@ __pycache__/
 # Approved, versioned brand resources are package source assets.
 !packages/brand/assets/**/*.png
 !packages/brand/docs/logo-preview.png
+/apps/studio/public/brand/
+/apps/studio/public/favicon.ico
+/apps/studio/public/apple-touch-icon.png
+/apps/waterfall-wiki/public/brand/
+/apps/waterfall-wiki/public/favicon.ico
+/apps/waterfall-wiki/public/apple-touch-icon.png
diff --git a/Dockerfile b/Dockerfile
index 67928ef..f081c17 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,14 +7,15 @@ RUN apt-get update \
     && rm -rf /var/lib/apt/lists/*
 
 FROM base AS dependencies
+WORKDIR /repo/apps/waterfall-wiki
 LABEL io.entroia.wiki.build="true"
 RUN corepack enable && corepack prepare pnpm@11.25.0 --activate
 COPY apps/waterfall-wiki/pnpm-lock.yaml ./
-COPY pnpm-workspace.yaml /tmp/monorepo-policy.yaml
-RUN node -e "const fs=require('fs');const text=fs.readFileSync('/tmp/monorepo-policy.yaml','utf8');fs.writeFileSync('pnpm-workspace.yaml', text.slice(text.indexOf('allowBuilds:')));"
-RUN pnpm fetch --frozen-lockfile --fetch-timeout=300000 --network-concurrency=8
+COPY pnpm-workspace.yaml /repo/pnpm-workspace.yaml
+COPY packages/brand/ /repo/packages/brand/
+RUN pnpm --ignore-workspace fetch --frozen-lockfile --fetch-timeout=300000 --network-concurrency=8
 COPY apps/waterfall-wiki/package.json ./
-RUN pnpm install --offline --frozen-lockfile
+RUN pnpm --filter @prompt/waterfall-wiki install --offline --frozen-lockfile
 
 FROM dependencies AS build
 # .dockerignore excludes docs and operational notes without extra legacy COPY snapshots.
@@ -28,9 +29,9 @@ CMD ["npm", "run", "test:integration"]
 FROM base AS runtime
 ENV NODE_ENV=production HOSTNAME=0.0.0.0 PORT=3000 \
     FFMPEG_PATH=/usr/bin/ffmpeg FFPROBE_PATH=/usr/bin/ffprobe
-COPY --from=build --chown=node:node /app/.next/standalone/ ./
-COPY --from=build --chown=node:node /app/dist/worker.cjs /app/dist/bootstrap.cjs /app/dist/publish-learning-series.cjs /app/dist/auth-cli.cjs ./
-COPY --from=build --chown=node:node /app/db/ ./db/
+COPY --from=build --chown=node:node /repo/apps/waterfall-wiki/.next/standalone/ ./
+COPY --from=build --chown=node:node /repo/apps/waterfall-wiki/dist/worker.cjs /repo/apps/waterfall-wiki/dist/bootstrap.cjs /repo/apps/waterfall-wiki/dist/publish-learning-series.cjs /repo/apps/waterfall-wiki/dist/auth-cli.cjs ./
+COPY --from=build --chown=node:node /repo/apps/waterfall-wiki/db/ ./db/
 COPY --chown=node:node apps/waterfall-wiki/scripts/container-health.mjs ./
 COPY --chown=node:node apps/waterfall-wiki/scripts/import-character-packs.mjs apps/waterfall-wiki/scripts/verify-character-pack.mjs ./scripts/
 COPY --chown=node:node apps/waterfall-wiki/seed/characters/ ./seed/characters/
diff --git a/apps/studio/Dockerfile b/apps/studio/Dockerfile
index e05abfa..8338c32 100644
--- a/apps/studio/Dockerfile
+++ b/apps/studio/Dockerfile
@@ -1,23 +1,24 @@
 FROM node:24-bookworm-slim AS build
-WORKDIR /app
+WORKDIR /repo/apps/studio
 RUN corepack enable && corepack prepare pnpm@11.25.0 --activate
 COPY apps/studio/pnpm-lock.yaml ./
-COPY pnpm-workspace.yaml /tmp/monorepo-policy.yaml
-RUN node -e "const fs=require('fs');const text=fs.readFileSync('/tmp/monorepo-policy.yaml','utf8');fs.writeFileSync('pnpm-workspace.yaml', text.slice(text.indexOf('allowBuilds:')));"
-RUN pnpm fetch --frozen-lockfile --fetch-timeout=300000 --network-concurrency=8
+COPY pnpm-workspace.yaml /repo/pnpm-workspace.yaml
+COPY packages/brand/ /repo/packages/brand/
+RUN pnpm --ignore-workspace fetch --frozen-lockfile --fetch-timeout=300000 --network-concurrency=8
 COPY apps/studio/package.json ./
-RUN pnpm install --offline --frozen-lockfile
+RUN pnpm --filter @prompt/studio install --offline --frozen-lockfile
 COPY apps/studio/ .
 # Compare the two public parameter validators inside the isolated CI build.
-COPY apps/waterfall-wiki/src/lib/layout-parameters.ts /waterfall-wiki/src/lib/layout-parameters.ts
-COPY apps/waterfall-wiki/src/lib/series.ts /waterfall-wiki/src/lib/series.ts
-COPY apps/waterfall-wiki/src/lib/canvas-document.ts /waterfall-wiki/src/lib/canvas-document.ts
+COPY apps/waterfall-wiki/src/lib/layout-parameters.ts /repo/apps/waterfall-wiki/src/lib/layout-parameters.ts
+COPY apps/waterfall-wiki/src/lib/series.ts /repo/apps/waterfall-wiki/src/lib/series.ts
+COPY apps/waterfall-wiki/src/lib/canvas-document.ts /repo/apps/waterfall-wiki/src/lib/canvas-document.ts
 RUN pnpm typecheck && pnpm test && pnpm build && pnpm test:smoke
 FROM node:24-bookworm-slim
 WORKDIR /app
 ENV NODE_ENV=production HOSTNAME=0.0.0.0 PORT=3000
-COPY --from=build --chown=node:node /app/.next/standalone/ ./
-COPY --from=build --chown=node:node /app/.next/static/ ./.next/static/
+COPY --from=build --chown=node:node /repo/apps/studio/.next/standalone/ ./
+COPY --from=build --chown=node:node /repo/apps/studio/.next/static/ ./.next/static/
+COPY --from=build --chown=node:node /repo/apps/studio/public/ ./public/
 USER node
 EXPOSE 3000
 CMD ["node", "server.js"]
diff --git a/apps/studio/package.json b/apps/studio/package.json
index e8cc3c3..0b75aab 100644
--- a/apps/studio/package.json
+++ b/apps/studio/package.json
@@ -2,18 +2,20 @@
   "name": "@prompt/studio",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3001",
-    "build": "next build",
+    "dev": "pnpm brand:prepare && next dev -p 3001",
+    "build": "pnpm brand:prepare && next build",
     "start": "next start",
     "typecheck": "next typegen && tsc --noEmit",
     "test": "node --test tests/*.test.mjs",
-    "test:smoke": "node scripts/smoke.mjs"
+    "test:smoke": "node scripts/smoke.mjs",
+    "brand:prepare": "node ../../packages/brand/scripts/prepare-app.mjs"
   },
   "dependencies": {
     "next": "16.4.2",
     "react": "19.3.1",
     "react-dom": "19.3.1",
-    "lucide-react": "1.61.0"
+    "lucide-react": "1.61.0",
+    "@endoleap/brand": "workspace:*"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "4.3.3",
diff --git a/apps/studio/pnpm-lock.yaml b/apps/studio/pnpm-lock.yaml
index 5def37e..d65df4b 100644
--- a/apps/studio/pnpm-lock.yaml
+++ b/apps/studio/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@endoleap/brand':
+        specifier: workspace:*
+        version: link:../../packages/brand
       lucide-react:
         specifier: 1.61.0
         version: 1.61.0(@types/react@19.3.0)(react@19.3.1)
diff --git a/apps/studio/src/components/Brand.tsx b/apps/studio/src/components/Brand.tsx
new file mode 100644
index 0000000..8a55954
--- /dev/null
+++ b/apps/studio/src/components/Brand.tsx
@@ -0,0 +1,4 @@
+/** The approved mark is copied from @endoleap/brand during the remote build. */
+export function Brand({ compact = false }: { compact?: boolean }) {
+  return <span className="endoleap-brand"><img src="/studio/brand/logo-light.svg" className="endoleap-mark endoleap-mark-light" alt="" width={32} height={32}/><img src="/studio/brand/logo-dark.svg" className="endoleap-mark endoleap-mark-dark" alt="" width={32} height={32}/><span className="endoleap-wordmark">啡跃{!compact && <small>Endoleap</small>}</span></span>;
+}
diff --git a/apps/studio/src/components/LayoutSelection.tsx b/apps/studio/src/components/LayoutSelection.tsx
index 144bf27..9683bb0 100644
--- a/apps/studio/src/components/LayoutSelection.tsx
+++ b/apps/studio/src/components/LayoutSelection.tsx
@@ -10,5 +10,5 @@ export function LayoutSelection(){
  async function download(format:'svg'|'json'){
   try{setStatus('正在生成…');const r=await fetch('/studio/api/export/layout-selection?format='+format,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({layoutId:layout.id,...current})});if(!r.ok)throw Error();const url=URL.createObjectURL(await r.blob()),a=document.createElement('a');a.href=url;a.download=layout.id+'.'+format;a.click();setTimeout(()=>URL.revokeObjectURL(url),500);setStatus('已导出当前模板。')}catch{setStatus('导出失败，请重试。')}
  }
- return <main className="template-trial"><Head><title>三种排版 · Studio 工具</title></Head><header className="trial-nav"><a href={tutorialPost}>← PROMPT 使用教程</a><span>STUDIO / LAYOUT SELECTION</span></header><section className="trial-intro"><div><small>REF-01 / REF-07 / REF-26</small><h1>三个构图，各有位置。</h1><p>切换真实原图对应的模板，分别试文字与配色。图位与装饰按教程构件重建为干净矢量；当前只放占位内容。</p></div></section><div className="trial-workspace"><aside className="trial-controls"><h2>选择与编辑</h2><label>排版<select value={active} onChange={e=>{setActive(Number(e.target.value));setStatus('')}}>{selections.map((l,i)=><option key={l.id} value={i}>{l.id} · {l.name}</option>)}</select></label>{layout.slots.filter(s=>s.kind==='text').map(s=><label key={s.id}>{s.id} · {s.role}<textarea rows={current.fields[s.id]?.includes('\n')?3:1} maxLength={120} value={current.fields[s.id]||''} onChange={e=>update({fields:{...current.fields,[s.id]:e.target.value}})}/></label>)}<div className="trial-colors"><label>主图色<input type="color" value={current.color} onChange={e=>update({color:e.target.value})}/></label><label>副图色<input type="color" value={current.accent} onChange={e=>update({accent:e.target.value})}/></label></div><label className="trial-switch"><input type="checkbox" checked={guides} onChange={e=>setGuides(e.target.checked)}/>显示构件边界</label><div className="trial-actions"><button className="trial-primary" onClick={()=>void download('svg')}>下载当前 SVG</button><button onClick={()=>void download('json')}>下载参数 JSON</button></div><p className="trial-help">每张模板单独保留本页修改，刷新恢复初始值。下载 SVG 为无边界线的正式图；原始低分辨率图层在 JSON 中保留作对照。</p><p role="status">{status}</p></aside><div><div className="selection-preview"><SourceCover layout={layout} values={current} guides={guides}/></div><div className="selection-thumbs">{selections.map((l,i)=><button key={l.id} aria-pressed={active===i} onClick={()=>setActive(i)}><SourceCover layout={l} values={values[i]}/><span>{l.id}</span></button>)}</div><details className="trial-reference"><summary>原图与构件坐标</summary><div className="trial-reference-body"><img src={referencePreview(layout.referenceUrl)} alt={layout.name+'原图'}/><div><a href={layout.tutorialUrl}>阅读这张原图的教程 ↗</a><table><thead><tr><th>ID</th><th>构件</th><th>x,y,w,h</th></tr></thead><tbody>{layout.slots.map(s=><tr key={s.id}><td>{s.id}</td><td>{s.role}</td><td>{s.box.join(', ')}</td></tr>)}</tbody></table></div></div></details></div></div></main>;
+ return <main className="template-trial"><Head><title>三种排版 · 啡跃 Endoleap 工具</title></Head><header className="trial-nav"><a href={tutorialPost}>← 啡跃使用教程</a><span>STUDIO / LAYOUT SELECTION</span></header><section className="trial-intro"><div><small>REF-01 / REF-07 / REF-26</small><h1>三个构图，各有位置。</h1><p>切换真实原图对应的模板，分别试文字与配色。图位与装饰按教程构件重建为干净矢量；当前只放占位内容。</p></div></section><div className="trial-workspace"><aside className="trial-controls"><h2>选择与编辑</h2><label>排版<select value={active} onChange={e=>{setActive(Number(e.target.value));setStatus('')}}>{selections.map((l,i)=><option key={l.id} value={i}>{l.id} · {l.name}</option>)}</select></label>{layout.slots.filter(s=>s.kind==='text').map(s=><label key={s.id}>{s.id} · {s.role}<textarea rows={current.fields[s.id]?.includes('\n')?3:1} maxLength={120} value={current.fields[s.id]||''} onChange={e=>update({fields:{...current.fields,[s.id]:e.target.value}})}/></label>)}<div className="trial-colors"><label>主图色<input type="color" value={current.color} onChange={e=>update({color:e.target.value})}/></label><label>副图色<input type="color" value={current.accent} onChange={e=>update({accent:e.target.value})}/></label></div><label className="trial-switch"><input type="checkbox" checked={guides} onChange={e=>setGuides(e.target.checked)}/>显示构件边界</label><div className="trial-actions"><button className="trial-primary" onClick={()=>void download('svg')}>下载当前 SVG</button><button onClick={()=>void download('json')}>下载参数 JSON</button></div><p className="trial-help">每张模板单独保留本页修改，刷新恢复初始值。下载 SVG 为无边界线的正式图；原始低分辨率图层在 JSON 中保留作对照。</p><p role="status">{status}</p></aside><div><div className="selection-preview"><SourceCover layout={layout} values={current} guides={guides}/></div><div className="selection-thumbs">{selections.map((l,i)=><button key={l.id} aria-pressed={active===i} onClick={()=>setActive(i)}><SourceCover layout={l} values={values[i]}/><span>{l.id}</span></button>)}</div><details className="trial-reference"><summary>原图与构件坐标</summary><div className="trial-reference-body"><img src={referencePreview(layout.referenceUrl)} alt={layout.name+'原图'}/><div><a href={layout.tutorialUrl}>阅读这张原图的教程 ↗</a><table><thead><tr><th>ID</th><th>构件</th><th>x,y,w,h</th></tr></thead><tbody>{layout.slots.map(s=><tr key={s.id}><td>{s.id}</td><td>{s.role}</td><td>{s.box.join(', ')}</td></tr>)}</tbody></table></div></div></details></div></div></main>;
 }
diff --git a/apps/studio/src/components/LayoutWorkbench.tsx b/apps/studio/src/components/LayoutWorkbench.tsx
index 51ad834..b0c57a5 100644
--- a/apps/studio/src/components/LayoutWorkbench.tsx
+++ b/apps/studio/src/components/LayoutWorkbench.tsx
@@ -1,3 +1,5 @@
+import { ThemeToggle } from "./ThemeToggle";
+import { Brand } from "./Brand";
 import {CurvedCopy} from './NativeCurvedCopy';
 import {useEffect,useRef,useState,type CSSProperties,type KeyboardEvent,type PointerEvent} from 'react';
 import {ArrowLeft,MousePointer2,Type,Square,Circle,ImagePlus,Layers,SlidersHorizontal,Undo2,Redo2,Copy,Trash2,Eye,EyeOff,Lock,Unlock,ChevronUp,ChevronDown,Minus,Plus,Scan,Save} from 'lucide-react';
@@ -55,7 +57,7 @@ export function LayoutWorkbench({layout,design:initialDesign}:LayoutPageProps){
  const selectedColor=slot?(slot.kind==='text'?params.texts[slot.id]?.color||textColor(layout.id,slot):slot.kind==='image'?params.images[slot.id]?.color||String(imageShape(layout,slot).backgroundColor):params.decorations[slot.id]?.color||'#83908a'):'';
  return <main className={'native-layout-page'+(editing?' is-editing':'')}>
   <Head><title>{name} · Prompt</title><meta name="description" content={layout.name+' · 可直接编辑的排版页面'}/></Head>
-  {editing&&<header className="workbench-top"><a href="/explore/8eb8c76500580f7a4b56ba3c" aria-label="返回目录"><ArrowLeft size={18}/></a><span className="studio-mark">P<span>STUDIO</span></span><input aria-label="页面名称" value={name} maxLength={120} onChange={e=>{setName(e.target.value);setDirty(true)}}/><span className="save-indicator">{busy?'正在处理…':dirty?'有未保存的修改':design?'已保存':'尚未保存'}</span><button title="撤销 ⌘Z" disabled={!history.length||busy} onClick={undo}><Undo2 size={17}/></button><button title="重做 ⇧⌘Z" disabled={!future.length||busy} onClick={redo}><Redo2 size={17}/></button><button onClick={()=>{setEditing(false);setTextEditing(null);setSelected(null)}}>查看页面</button><button className="primary" disabled={busy||!name.trim()} onClick={()=>void save()}><Save size={15}/>保存</button></header>}
+  {editing&&<header className="workbench-top"><a href="/explore/8eb8c76500580f7a4b56ba3c" aria-label="返回目录"><ArrowLeft size={18}/></a><a href="/workspace" className="studio-mark"><Brand compact/></a><ThemeToggle/><input aria-label="页面名称" value={name} maxLength={120} onChange={e=>{setName(e.target.value);setDirty(true)}}/><span className="save-indicator">{busy?'正在处理…':dirty?'有未保存的修改':design?'已保存':'尚未保存'}</span><button title="撤销 ⌘Z" disabled={!history.length||busy} onClick={undo}><Undo2 size={17}/></button><button title="重做 ⇧⌘Z" disabled={!future.length||busy} onClick={redo}><Redo2 size={17}/></button><button onClick={()=>{setEditing(false);setTextEditing(null);setSelected(null)}}>查看页面</button><button className="primary" disabled={busy||!name.trim()} onClick={()=>void save()}><Save size={15}/>保存</button></header>}
   {editing&&<aside className={'workbench-layers '+(panel==='layers'?'mobile-open':'')} inert={busy}><div className="panel-heading"><Layers size={16}/><strong>图层与素材</strong><span>{elements.length}</span></div><div className="insert-tools"><button onClick={()=>add('text')}><Type/>文字</button><button onClick={()=>add('decoration','rectangle')}><Square/>矩形</button><button onClick={()=>add('decoration','ellipse')}><Circle/>椭圆</button><button onClick={()=>add('image')}><ImagePlus/>图片</button></div><div className="layers-caption">{layout.id.toUpperCase()} <span>从上到下排列</span></div><div className="layer-list">{[...elements].sort((a,b)=>(layer(b).z??(b.kind==='text'?3:b.kind==='image'?1:2))-(layer(a).z??(a.kind==='text'?3:a.kind==='image'?1:2))).map(s=><div key={s.id} className={'layer-row '+(selected===s.id?'active':'')+(layer(s).hidden?' muted':'')}><button className="layer-select" onClick={()=>{setSelected(s.id);setTextEditing(null)}}>{s.kind==='text'?<Type size={14}/>:s.kind==='image'?<ImagePlus size={14}/>:<Square size={14}/>}<span>{s.role}</span></button><button title="显示或隐藏图层" aria-label={s.role+'显示或隐藏'} onClick={()=>updateLayer(s,{hidden:!layer(s).hidden})}>{layer(s).hidden?<EyeOff size={13}/>:<Eye size={13}/>}</button><button title="锁定或解锁图层" aria-label={s.role+'锁定或解锁'} onClick={()=>updateLayer(s,{locked:!layer(s).locked})}>{layer(s).locked?<Lock size={13}/>:<Unlock size={13}/>}</button></div>)}</div><p className="workbench-tip">拖动移动 · 双击文字改写<br/>⌘/Ctrl D 复制 · 方向键微调<br/>Shift + 方向键移动 10 单位</p></aside>}
   <div ref={viewport} className={editing?'workbench-viewport':'page-viewport'} onClick={e=>{if(e.target===e.currentTarget){setSelected(null);setTextEditing(null)}}}>
   {editing&&<div className="canvas-caption">{layout.name}<span>{layout.width} × {layout.height}</span></div>}
diff --git a/apps/studio/src/components/TemplateTrial.tsx b/apps/studio/src/components/TemplateTrial.tsx
index 7600d62..d60ce6e 100644
--- a/apps/studio/src/components/TemplateTrial.tsx
+++ b/apps/studio/src/components/TemplateTrial.tsx
@@ -12,8 +12,8 @@ export function TemplateTrial({idea}:{idea:Idea}){
  const download=(text:string,type:string,name:string)=>{const url=URL.createObjectURL(new Blob([text],{type})),a=document.createElement('a');a.href=url;a.download=name;a.click();setTimeout(()=>URL.revokeObjectURL(url),500)};
  async function exportSvg(){await document.fonts.ready;const svg=document.querySelector(`[data-proof="${selected.key}"] svg`);if(!svg)return;download(new XMLSerializer().serializeToString(svg),'image/svg+xml',`ref-17-${selected.key}.svg`);setNotice('已下载当前封面 SVG，可继续编辑文字与图形。')}
  const reset=()=>{setSlides(idea.slides);setMasthead(template.masthead);setGuides(false);setNotice('已恢复初始试版。')};
- return <main className="template-trial"><Head><title>{idea.title} · Studio</title><link rel="alternate" type="text/markdown" href={'/studio/api/export/'+idea.slug+'?format=markdown'}/></Head>
-  <header className="trial-nav"><a href={tutorialPost}>← PROMPT 使用教程</a><span>STUDIO / TEMPLATE PROOF</span><a href={template.tutorialUrl} target="_blank" rel="noreferrer">排版教程 ↗</a></header>
+ return <main className="template-trial"><Head><title>{idea.title} · 啡跃 Endoleap</title><link rel="alternate" type="text/markdown" href={'/studio/api/export/'+idea.slug+'?format=markdown'}/></Head>
+  <header className="trial-nav"><a href={tutorialPost}>← 啡跃使用教程</a><span>STUDIO / TEMPLATE PROOF</span><a href={template.tutorialUrl} target="_blank" rel="noreferrer">排版教程 ↗</a></header>
   <section className="trial-intro"><div><small>REF-17 · 同一母版 / 四张试版</small><h1>先试封面，再填内容。</h1><p>英文刊头、圆形叠标、左下主图与右侧窄栏保持同一套坐标。三组合集先用主题占位，暂不放入具体 Skills。</p></div><div className="trial-source"><b>01 母版</b><span>02 笔记复习</span><span>03 教学资料</span><span>04 英语学习</span></div></section>
   <div className="trial-workspace"><aside className="trial-controls"><h2>试一试</h2><label>当前封面<select value={active} onChange={e=>{setActive(Number(e.target.value));setNotice('')}}>{slides.map((s,i)=><option value={i} key={s.key}>{s.label}</option>)}</select></label>
    <fieldset><legend>共享英文刊头</legend><label>第一行<input value={masthead[0]} maxLength={8} onChange={e=>setMasthead([e.target.value.toUpperCase().replace(/[^A-Z ]/g,''),masthead[1]])}/></label><label>第二行<input value={masthead[1]} maxLength={8} onChange={e=>setMasthead([masthead[0],e.target.value.replace(/[^A-Za-z ]/g,'')])}/></label></fieldset>
diff --git a/apps/studio/src/components/ThemeToggle.tsx b/apps/studio/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..6270c2e
--- /dev/null
+++ b/apps/studio/src/components/ThemeToggle.tsx
@@ -0,0 +1,7 @@
+import { useEffect, useState } from 'react';
+export function ThemeToggle() {
+  const [dark, setDark] = useState(false);
+  const [ready, setReady] = useState(false);
+  useEffect(() => { const sync = () => setDark(document.documentElement.dataset.mode === 'dark'); sync(); setReady(true); window.addEventListener('endoleap-theme', sync); return () => window.removeEventListener('endoleap-theme', sync); }, []);
+  return <button type="button" data-theme-ready={ready} className="endoleap-theme-toggle" aria-label="切换明暗主题" title={dark ? '切换浅色模式' : '切换深色模式'} onClick={() => { const mode = document.documentElement.dataset.mode === 'dark' ? 'light' : 'dark'; const scope = document.documentElement.dataset.theme?.startsWith('canvas-') ? 'canvas' : 'home'; document.documentElement.dataset.mode = mode; document.documentElement.dataset.theme = `${scope}-${mode}`; try { localStorage.setItem('endoleap.theme', mode); } catch {} window.dispatchEvent(new Event('endoleap-theme')); }}>◐<span>{dark ? '浅色' : '深色'}</span></button>;
+}
diff --git a/apps/studio/src/pages/_app.tsx b/apps/studio/src/pages/_app.tsx
index f7a5d61..680063e 100644
--- a/apps/studio/src/pages/_app.tsx
+++ b/apps/studio/src/pages/_app.tsx
@@ -1,3 +1,8 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
 import type { AppProps } from "next/app";
 import "../styles/globals.css";
-export default function App({Component,pageProps}:AppProps){return <Component {...pageProps}/>;}
+import "../styles/brand.css";
+export default function App({Component,pageProps}:AppProps){const router = useRouter();
+  useEffect(() => { const scope = /^\/(?:graphic|infinite_canvas|layouts|template-layout)(?:\/|$)/.test(router.pathname) ? 'canvas' : 'home'; document.documentElement.dataset.theme = `${scope}-${document.documentElement.dataset.mode === 'dark' ? 'dark' : 'light'}`; }, [router.pathname]);
+  return <Component {...pageProps}/>;}
diff --git a/apps/studio/src/pages/_document.tsx b/apps/studio/src/pages/_document.tsx
new file mode 100644
index 0000000..68e90da
--- /dev/null
+++ b/apps/studio/src/pages/_document.tsx
@@ -0,0 +1,3 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+const initializeTheme = String.raw`(function(){try{var mode=localStorage.getItem('endoleap.theme')==='dark'?'dark':'light';var canvas=/^\/(?:studio\/)?(?:graphic|infinite_canvas|layouts|template-layout)(?:\/|$)/.test(location.pathname);document.documentElement.dataset.mode=mode;document.documentElement.dataset.theme=(canvas?'canvas':'home')+'-'+mode;}catch(e){}})();`;
+export default function Document() { return <Html lang="zh-CN" data-theme="home-light" data-mode="light" suppressHydrationWarning><Head><link rel="icon" href="/studio/favicon.ico?v=endoleap-1.2" sizes="any"/><link rel="icon" type="image/svg+xml" href="/studio/brand/icon-dark.svg?v=endoleap-1.2"/><link rel="apple-touch-icon" href="/studio/apple-touch-icon.png"/><script dangerouslySetInnerHTML={{__html:initializeTheme}}/></Head><body><Main/><NextScript/></body></Html>; }
diff --git a/apps/studio/src/pages/graphic/index.tsx b/apps/studio/src/pages/graphic/index.tsx
index 456034f..0a66ae1 100644
--- a/apps/studio/src/pages/graphic/index.tsx
+++ b/apps/studio/src/pages/graphic/index.tsx
@@ -1,3 +1,5 @@
+import { ThemeToggle } from "../../components/ThemeToggle";
+import { Brand } from "../../components/Brand";
 import Head from 'next/head';
 import {useEffect,useRef,useState,type PointerEvent} from 'react';
 import {MousePointer2,Type,Square,Circle,Plus,Minus,Undo2,Redo2,Download,Layers,ImagePlus,Trash2,Copy,Eye,EyeOff,Lock,Unlock,Scan,ChevronRight,ArrowUpRight,PenTool,X,Hand,Link2,BookOpen,PanelLeft,PanelRight} from 'lucide-react';
@@ -34,13 +36,13 @@ export default function Graphic(){
  function download(content:string,type:string,extension:string){const url=URL.createObjectURL(new Blob([content],{type}));const a=document.createElement('a');a.href=url;a.download=doc.name+'.'+extension;a.click();setTimeout(()=>URL.revokeObjectURL(url),1000)}
  function exportSVG(){const esc=(s:string)=>s.replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&apos;'}[c]!));const svg=doc.items.filter(i=>!i.hidden).map(i=>i.kind==='text'?`<text x="${i.x}" y="${i.y+i.size}" font-family="sans-serif" font-size="${i.size}" fill="${esc(i.fill)}">${i.text.split('\n').map((line,n)=>`<tspan x="${i.x}" dy="${n?i.size*1.3:0}">${esc(line)}</tspan>`).join('')}</text>`:i.kind==='image'?`<image x="${i.x}" y="${i.y}" width="${i.w}" height="${i.h}" href="${esc(i.src||'')}" preserveAspectRatio="xMidYMid slice"/>`:i.kind==='ellipse'?`<ellipse cx="${i.x+i.w/2}" cy="${i.y+i.h/2}" rx="${i.w/2}" ry="${i.h/2}" fill="${esc(i.fill)}"/>`:`<rect x="${i.x}" y="${i.y}" width="${i.w}" height="${i.h}" fill="${esc(i.fill)}"/>`).join('');download(`<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1000" viewBox="0 0 800 1000"><rect width="800" height="1000" fill="${esc(doc.background)}"/>${svg}</svg>`,'image/svg+xml','svg');}
  async function account(e:React.FormEvent<HTMLFormElement>){e.preventDefault();setBusy(true);setMessage('');const data=new FormData(e.currentTarget);try{const r=await fetch('/api/account/'+mode,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:data.get('email'),password:data.get('password')})});const d=await r.json();setMessage(d.error||d.message||'登录成功');if(r.ok){await refresh();if(mode==='login')setAuth(false);}}catch{setMessage('账户服务暂时无法连接')}finally{setBusy(false)}}
- return <div className={styles.app} data-layers={showLayers} data-properties={showProps}><Head><title>{doc.name + " · Studio Graphic"}</title><meta name="description" content="在 Studio 中自由编排文字、图形与图片。"/></Head>
- <header className={styles.top}><a href="/workspace" className={styles.brand}><span>✳</span> studio<span className={styles.badge}>GRAPHIC</span></a><button aria-label="切换图层面板" aria-pressed={showLayers} onClick={()=>setShowLayers(v=>!v)}><PanelLeft size={17}/></button><button aria-label="切换属性面板" aria-pressed={showProps} onClick={()=>setShowProps(v=>!v)}><PanelRight size={17}/></button><ChevronRight size={14}/><input aria-label="设计名称" value={doc.name} maxLength={100} onChange={e=>change({...doc,name:e.target.value})}/><span className={styles.saved} role="status">{status}</span><button title="撤销" aria-label="撤销" disabled={!past.length} onClick={undo}><Undo2 size={17}/></button><button title="重做" aria-label="重做" disabled={!future.length} onClick={redo}><Redo2 size={17}/></button><button onClick={()=>setAuth(true)} className={styles.account}>{user?user.email:'邮箱登录'}</button><button className={styles.primary} onClick={exportSVG}><Download size={15}/>导出 SVG</button></header>
+ return <div className={styles.app} data-layers={showLayers} data-properties={showProps}><Head><title>{doc.name + " · 啡跃 Endoleap Graphic"}</title><meta name="description" content="在 Studio 中自由编排文字、图形与图片。"/></Head>
+ <header className={styles.top}><a href="/workspace" className={styles.brand}><Brand compact/><span className={styles.badge}>GRAPHIC</span></a><button aria-label="切换图层面板" aria-pressed={showLayers} onClick={()=>setShowLayers(v=>!v)}><PanelLeft size={17}/></button><button aria-label="切换属性面板" aria-pressed={showProps} onClick={()=>setShowProps(v=>!v)}><PanelRight size={17}/></button><ChevronRight size={14}/><input aria-label="设计名称" value={doc.name} maxLength={100} onChange={e=>change({...doc,name:e.target.value})}/><span className={styles.saved} role="status">{status}</span><button title="撤销" aria-label="撤销" disabled={!past.length} onClick={undo}><Undo2 size={17}/></button><button title="重做" aria-label="重做" disabled={!future.length} onClick={redo}><Redo2 size={17}/></button><ThemeToggle/><button onClick={()=>setAuth(true)} className={styles.account}>{user?user.email:'邮箱登录'}</button><button className={styles.primary} onClick={exportSVG}><Download size={15}/>导出 SVG</button></header>
  <div className={styles.body}><aside className={styles.left}><div className={styles.tabs}>{['图层','素材','Agent'].map(t=><button key={t} aria-pressed={tab===t} onClick={()=>setTab(t)}>{t}</button>)}</div><div className={styles.pageTitle}><span>页面 01</span><span>800 × 1000</span></div>{tab==='Agent'?<div className={styles.agentPanel}><Link2 size={24}/><h3>与你的 Agent 一起设计</h3><p>将接入文档交给 coding agent，使用已有的模板与创作 API。</p><a href="/studio/api" target="_blank" rel="noreferrer">查看接入文档 ↗</a><a href="/documents" target="_blank" rel="noreferrer"><BookOpen size={15}/>知识与教程 ↗</a><small>在 Agent 中打开文档，查看可用的创作接口与使用方式。</small></div>:tab==='图层'?<><div className={styles.layers}>{[...doc.items].reverse().map(i=><div className={styles.layer} data-selected={i.id===selected} key={i.id}><button onClick={()=>setSelected(i.id)}>{i.kind==='text'?<Type size={14}/>:<Square size={14}/>}<span>{i.name}</span></button><button aria-label={i.hidden?'显示图层':'隐藏图层'} onClick={()=>change({...doc,items:doc.items.map(n=>n.id===i.id?{...n,hidden:!n.hidden}:n)})}>{i.hidden?<EyeOff size={13}/>:<Eye size={13}/>}</button><button aria-label={i.locked?'解锁图层':'锁定图层'} onClick={()=>change({...doc,items:doc.items.map(n=>n.id===i.id?{...n,locked:!n.locked}:n)})}>{i.locked?<Lock size={13}/>:<Unlock size={13}/>}</button></div>)}{!doc.items.length&&<div className={styles.emptyLayers}><Layers size={23}/><p>好设计，从第一笔开始</p><small>从下方工具栏添加文字与图形</small></div>}</div><button className={styles.addLayer} onClick={()=>add('text')}><Plus size={15}/>添加图层</button></>:<div className={styles.assets}><h3>基础元素</h3><button onClick={()=>add('rect')}><Square/>矩形</button><button onClick={()=>add('ellipse')}><Circle/>椭圆</button><button onClick={()=>add('text')}><Type/>文字</button><button onClick={()=>upload.current?.click()}><ImagePlus/>上传图片</button><p>你的画布，由你定义。支持 PNG、JPEG、WebP。</p></div>}<div className={styles.leftFooter}><a href="/infinite_canvas">Infinite Canvas <ArrowUpRight size={14}/></a><small>⌘ Z 撤销 · 方向键微调 · Delete 删除</small></div></aside>
  <main ref={viewport} className={styles.viewport} onPointerDown={e=>{setSelected('');panBoard(e)}}><div className={styles.canvasLabel}>画板 01 <span>800 × 1000</span></div><div className={styles.boardWrap} style={{width:800*zoom,height:1000*zoom,transform:`translate(${offset.x}px,${offset.y}px)`}}><div ref={board} className={styles.board} style={{background:doc.background,transform:`scale(${zoom})`}}>{doc.items.filter(i=>!i.hidden).map(i=><div key={i.id} tabIndex={0} role="button" aria-label={i.name} aria-pressed={selected===i.id} onFocus={()=>setSelected(i.id)} onPointerDown={e=>drag(e,i)} className={styles.element} data-selected={selected===i.id} style={{left:i.x,top:i.y,width:i.w,height:i.h,borderRadius:i.kind==='ellipse'?'50%':0,background:i.kind==='rect'||i.kind==='ellipse'?i.fill:undefined,color:i.fill,fontSize:i.size,whiteSpace:'pre-wrap'}}>{i.kind==='text'?i.text:i.kind==='image'?<img src={i.src} alt={i.name} draggable={false}/>:null}{selected===i.id&&<><i className={styles.corner} onPointerDown={resize}/><span className={styles.measure}>{Math.round(i.w)} × {Math.round(i.h)}</span></>}</div>)}{!doc.items.length&&<div className={styles.blankHint}><PenTool size={34} strokeWidth={1}/><h1>留白，是创作的起点。</h1><p>添加文字、图形，或放入你的第一张图片。</p><button onPointerDown={e=>e.stopPropagation()} onClick={()=>add('text')}>开始设计 <ArrowUpRight size={16}/></button></div>}</div></div><div className={styles.tools} onPointerDown={e=>e.stopPropagation()}><button title="选择" aria-label="选择工具" aria-pressed={tool==='select'} onClick={()=>{setTool('select');setSelected('')}}><MousePointer2 size={20}/></button><button title="抓手工具" aria-label="抓手工具" aria-pressed={tool==='hand'} onClick={()=>setTool('hand')}><Hand size={19}/></button><button title="文字" aria-label="添加文字" onClick={()=>add('text')}><Type size={20}/></button><button title="矩形" aria-label="添加矩形" onClick={()=>add('rect')}><Square size={19}/></button><button title="椭圆" aria-label="添加椭圆" onClick={()=>add('ellipse')}><Circle size={19}/></button><button title="图片" aria-label="上传图片" onClick={()=>upload.current?.click()}><ImagePlus size={19}/></button><span/><button aria-label="缩小" onClick={()=>setZoom(z=>Math.max(.15,z-.1))}><Minus size={16}/></button><output>{Math.round(zoom*100)}%</output><button aria-label="放大" onClick={()=>setZoom(z=>Math.min(2,z+.1))}><Plus size={16}/></button><button aria-label="适应画布" onClick={fit}><Scan size={18}/></button></div></main>
  <aside className={styles.right}><div className={styles.inspectorTitle}>设计属性<span>Design</span></div>{item?<div className={styles.props}><label>图层名称<input maxLength={200} value={item.name} disabled={item.locked} onChange={e=>patch({name:e.target.value})}/></label><h3>布局</h3><div className={styles.fields}>{(['x','y','w','h'] as const).map(k=><label key={k}>{({x:'X',y:'Y',w:'宽',h:'高'})[k]}<input type="number" value={Math.round(item[k])} disabled={item.locked} onChange={e=>{const value=Number(e.target.value);if(Number.isFinite(value))patch({[k]:k==='w'||k==='h'?Math.max(1,Math.min(4000,value)):Math.max(-4000,Math.min(4000,value))})}}/></label>)}</div>{item.kind==='text'&&<><h3>文字</h3><textarea aria-label="文字内容" value={item.text} maxLength={4000} disabled={item.locked} onChange={e=>patch({text:e.target.value})}/><label>字号<input type="number" min={8} max={240} value={item.size} disabled={item.locked} onChange={e=>patch({size:Math.max(8,Math.min(240,Number(e.target.value)||8))})}/></label></>}<h3>填色</h3><label className={styles.color}><input type="color" value={item.fill} disabled={item.locked} onChange={e=>patch({fill:e.target.value})}/>{item.fill.toUpperCase()}</label><div className={styles.actions}><button onClick={duplicate}><Copy size={15}/>复制</button><button disabled={item.locked} onClick={remove}><Trash2 size={15}/>删除</button></div><button disabled={item.locked} onClick={()=>{const n=doc.items.findIndex(i=>i.id===item.id);if(n>0){const items=[...doc.items];[items[n-1],items[n]]=[items[n],items[n-1]];change({...doc,items})}}}>下移一层</button></div>:<div className={styles.props}><h3>画板</h3><p>自由画布 · 竖版</p><div className={styles.dimensions}>W <b>800</b> H <b>1000</b></div><h3>背景颜色</h3><label className={styles.color}><input type="color" value={doc.background} onChange={e=>change({...doc,background:e.target.value})}/>{doc.background.toUpperCase()}</label><div className={styles.note}><MousePointer2 size={20}/><p>选中一个图层，<br/>调整属于它的每个细节。</p></div></div>}<div className={styles.rightFooter}><button onClick={()=>download(JSON.stringify(doc,null,2),'application/json','json')}><Download size={15}/>备份设计 JSON</button><button onClick={()=>restore.current?.click()}>导入设计 JSON</button><p>草稿仅保存在此浏览器。<br/>邮箱登录共用全站账户。</p></div></aside></div>
  <input ref={restore} hidden type="file" accept="application/json,.json" onChange={async e=>{const f=e.target.files?.[0];e.target.value='';if(!f)return;try{if(f.size>5*1024*1024)throw Error('文件不得超过 5MB');const restored=parseGraphicDocument(await f.text());change(restored);setSelected('');}catch(error){setStatus(error instanceof Error?error.message:'导入失败')}}}/>
  <input ref={upload} hidden type="file" accept="image/png,image/jpeg,image/webp" onChange={e=>{const f=e.target.files?.[0];if(!f)return;if(f.size>3*1024*1024||!['image/png','image/jpeg','image/webp'].includes(f.type)){setStatus('请使用 3MB 以内的 PNG / JPEG / WebP');return}const reader=new FileReader();reader.onload=()=>add('image',String(reader.result));reader.readAsDataURL(f);e.target.value=''}}/>
- {auth&&<div className={styles.overlay}><div ref={dialog} className={styles.modal} role="dialog" aria-modal="true" aria-label="邮箱账户"><button className={styles.close} aria-label="关闭" onClick={()=>setAuth(false)}><X size={20}/></button><span className={styles.modalIcon}>✳</span><h2>{user?'你的 Studio 账户':'把灵感带进 Studio'}</h2>{user?<><p>{user.email}</p><button onClick={async()=>{try{const r=await fetch('/api/account/logout',{method:'POST',headers:{'Content-Type':'application/json'},body:'{}'});if(!r.ok)throw Error();setUser(null);setAuth(false)}catch{setMessage('退出失败，请重试')}}}>退出登录</button></>:<><p>使用知识站的同一个邮箱账户</p><div className={styles.tabs}>{[['login','登录'],['register','注册'],['resend','重发邮件']].map(([v,t])=><button key={v} aria-pressed={mode===v} onClick={()=>setMode(v)}>{t}</button>)}</div><form onSubmit={account}><label>邮箱<input autoFocus required type="email" name="email" autoComplete="email" maxLength={254}/></label><label>密码<input required type="password" name="password" minLength={12} maxLength={256} autoComplete={mode==='register'?'new-password':'current-password'}/></label><small>密码至少 12 字符；新账户需通过邮件验证。</small><button className={styles.primary} disabled={busy}>{busy?'处理中…':mode==='login'?'登录 Studio':mode==='register'?'创建账户':'重发验证邮件'}</button></form></>}<p role="status">{message}</p></div></div>}
+ {auth&&<div className={styles.overlay}><div ref={dialog} className={styles.modal} role="dialog" aria-modal="true" aria-label="邮箱账户"><button className={styles.close} aria-label="关闭" onClick={()=>setAuth(false)}><X size={20}/></button><span className={styles.modalIcon}><Brand compact/></span><h2>{user?'你的 Studio 账户':'把灵感带进 Studio'}</h2>{user?<><p>{user.email}</p><button onClick={async()=>{try{const r=await fetch('/api/account/logout',{method:'POST',headers:{'Content-Type':'application/json'},body:'{}'});if(!r.ok)throw Error();setUser(null);setAuth(false)}catch{setMessage('退出失败，请重试')}}}>退出登录</button></>:<><p>使用知识站的同一个邮箱账户</p><div className={styles.tabs}>{[['login','登录'],['register','注册'],['resend','重发邮件']].map(([v,t])=><button key={v} aria-pressed={mode===v} onClick={()=>setMode(v)}>{t}</button>)}</div><form onSubmit={account}><label>邮箱<input autoFocus required type="email" name="email" autoComplete="email" maxLength={254}/></label><label>密码<input required type="password" name="password" minLength={12} maxLength={256} autoComplete={mode==='register'?'new-password':'current-password'}/></label><small>密码至少 12 字符；新账户需通过邮件验证。</small><button className={styles.primary} disabled={busy}>{busy?'处理中…':mode==='login'?'登录 Studio':mode==='register'?'创建账户':'重发验证邮件'}</button></form></>}<p role="status">{message}</p></div></div>}
  </div>
 }
diff --git a/apps/studio/src/pages/ideas/[slug].tsx b/apps/studio/src/pages/ideas/[slug].tsx
index 85072bc..2b3174f 100644
--- a/apps/studio/src/pages/ideas/[slug].tsx
+++ b/apps/studio/src/pages/ideas/[slug].tsx
@@ -5,6 +5,6 @@ import {LayoutSelection} from '../../components/LayoutSelection';
 import {tutorialPost} from '../../content/tool-links';
 import {TemplateTrial} from '../../components/TemplateTrial';
 import {ideas,type Idea} from '../../content/ideas';
-export default function IdeaPage({idea}:{idea:Idea}){if(idea.tool==='layout-selection')return <LayoutSelection/>;if(idea.template)return <TemplateTrial idea={idea}/>;return <main className="editor"><Head><title>{idea.title} · 创作站</title><link rel="alternate" type="text/markdown" href={'/studio/api/export/'+idea.slug+'?format=markdown'}/></Head><header><a href={tutorialPost}>← PROMPT 使用教程</a><a href={'/studio/api/export/'+idea.slug}>导出内容包 ↓</a><a href={'/studio/api/export/'+idea.slug+'?format=markdown'}>Markdown ↓</a><button onClick={()=>window.print()}>打印 / PDF</button></header><h1>{idea.title}</h1><p>{idea.summary}</p><div className="slides">{idea.slides.map((s,i)=><article className="slide" key={i} style={{background:s.color}}><small>PROMPT STUDIO / {String(i+1).padStart(2,'0')}</small><h2>{s.heading}</h2><p>{s.body}</p><footer>记录灵感 · 自由表达</footer></article>)}</div></main>}
+export default function IdeaPage({idea}:{idea:Idea}){if(idea.tool==='layout-selection')return <LayoutSelection/>;if(idea.template)return <TemplateTrial idea={idea}/>;return <main className="editor"><Head><title>{idea.title} · 创作站</title><link rel="alternate" type="text/markdown" href={'/studio/api/export/'+idea.slug+'?format=markdown'}/></Head><header><a href={tutorialPost}>← 啡跃使用教程</a><a href={'/studio/api/export/'+idea.slug}>导出内容包 ↓</a><a href={'/studio/api/export/'+idea.slug+'?format=markdown'}>Markdown ↓</a><button onClick={()=>window.print()}>打印 / PDF</button></header><h1>{idea.title}</h1><p>{idea.summary}</p><div className="slides">{idea.slides.map((s,i)=><article className="slide" key={i} style={{background:s.color}}><small>ENDOLEAP / {String(i+1).padStart(2,'0')}</small><h2>{s.heading}</h2><p>{s.body}</p><footer>记录灵感 · 自由表达</footer></article>)}</div></main>}
 export const getStaticPaths:GetStaticPaths=async()=>({paths:ideas.map(i=>({params:{slug:i.slug}})),fallback:false});
 export const getStaticProps:GetStaticProps=async({params})=>{const idea=ideas.find(i=>i.slug===params?.slug);return idea?{props:{idea}}:{notFound:true}};
diff --git a/apps/studio/src/pages/infinite_canvas/index.tsx b/apps/studio/src/pages/infinite_canvas/index.tsx
index 499ebd6..0b78adc 100644
--- a/apps/studio/src/pages/infinite_canvas/index.tsx
+++ b/apps/studio/src/pages/infinite_canvas/index.tsx
@@ -1,3 +1,5 @@
+import { ThemeToggle } from "../../components/ThemeToggle";
+import { Brand } from "../../components/Brand";
 import Head from 'next/head';
 import {useEffect,useRef,useState} from 'react';
 import {ArrowLeft,Plus,MousePointer2,Hand,ImagePlus,Type,Workflow,Undo2,Redo2,Minus,Maximize,Download,Upload,Trash2,Link2,Sparkles,ChevronRight,Sun,Moon} from 'lucide-react';
@@ -10,16 +12,16 @@ const example:Doc={version:1,cards:[{id:'brief',kind:'text',title:'01 / 创意
 const initial:Doc={version:1,cards:[],links:[]};
 const key='studio.infinite-canvas.v1';
 export default function InfiniteCanvas(){
- const [doc,setDoc]=useState<Doc>(initial),[selected,select]=useState('shot'),[zoom,setZoom]=useState(.8),[pan,setPan]=useState({x:0,y:0}),[tool,setTool]=useState('select'),[past,setPast]=useState<Doc[]>([]),[future,setFuture]=useState<Doc[]>([]),[status,setStatus]=useState('示例项目 · 尚未保存'),[ready,setReady]=useState(false),[email,setEmail]=useState(''),[link,setLink]=useState(''),[menu,setMenu]=useState<{x:number;y:number}|null>(null),[theme,setTheme]=useState<'light'|'dark'>('dark'),[editing,setEditing]=useState(''),[refMenu,setRefMenu]=useState(''),[taskFeedback,setTaskFeedback]=useState(''),[composerTarget,setComposerTarget]=useState(''),[pickerRequest,setPickerRequest]=useState(0);
+ const [doc,setDoc]=useState<Doc>(initial),[selected,select]=useState('shot'),[zoom,setZoom]=useState(.8),[pan,setPan]=useState({x:0,y:0}),[tool,setTool]=useState('select'),[past,setPast]=useState<Doc[]>([]),[future,setFuture]=useState<Doc[]>([]),[status,setStatus]=useState('示例项目 · 尚未保存'),[ready,setReady]=useState(false),[email,setEmail]=useState(''),[link,setLink]=useState(''),[menu,setMenu]=useState<{x:number;y:number}|null>(null),[editing,setEditing]=useState(''),[refMenu,setRefMenu]=useState(''),[taskFeedback,setTaskFeedback]=useState(''),[composerTarget,setComposerTarget]=useState(''),[pickerRequest,setPickerRequest]=useState(0);
  const file=useRef<HTMLInputElement>(null),json=useRef<HTMLInputElement>(null),viewport=useRef<HTMLDivElement>(null),drag=useRef<{id:string;x:number;y:number;ox:number;oy:number;before:Doc;resize?:boolean}|null>(null);
  const pickerSequence=useRef(0),agent=useRef<CanvasAgentHandle>(null);
  const active=doc.cards.find(c=>c.id===selected);
- useEffect(()=>{try{const raw=localStorage.getItem(key);if(raw){const d=parseCanvasDocument(raw);setDoc(d);setStatus('已恢复本机草稿')}}catch{setStatus('草稿读取失败，可导入 JSON 恢复')}try{const v=JSON.parse(localStorage.getItem(key+'.view')||'null');if(v&&Number.isFinite(v.zoom)&&v.zoom>=.2&&v.zoom<=2&&Number.isFinite(v.x)&&Number.isFinite(v.y)){setZoom(v.zoom);setPan({x:v.x,y:v.y})}}catch{}try{const t=localStorage.getItem(key+'.theme');setTheme(t==='light'?'light':'dark')}catch{}setReady(true);fetch('/api/account/session').then(r=>r.ok?r.json():null).then(d=>setEmail(d?.user?.email||'')).catch(()=>{});},[]);
+ useEffect(()=>{try{const raw=localStorage.getItem(key);if(raw){const d=parseCanvasDocument(raw);setDoc(d);setStatus('已恢复本机草稿')}}catch{setStatus('草稿读取失败，可导入 JSON 恢复')}try{const v=JSON.parse(localStorage.getItem(key+'.view')||'null');if(v&&Number.isFinite(v.zoom)&&v.zoom>=.2&&v.zoom<=2&&Number.isFinite(v.x)&&Number.isFinite(v.y)){setZoom(v.zoom);setPan({x:v.x,y:v.y})}}catch{}setReady(true);fetch('/api/account/session').then(r=>r.ok?r.json():null).then(d=>setEmail(d?.user?.email||'')).catch(()=>{});},[]);
  useEffect(()=>{if(!ready)return;try{localStorage.setItem(key,JSON.stringify(doc));setStatus('已保存到此浏览器')}catch{setStatus('本机空间不足，请导出项目备份')}},[doc,ready]);
  useEffect(()=>{if(ready)try{localStorage.setItem(key+'.view',JSON.stringify({...pan,zoom}))}catch{}},[pan,zoom,ready]);
  useEffect(()=>{const el=viewport.current;if(!el)return;const block=(e:WheelEvent)=>{if(!(e.target as HTMLElement).closest('textarea,input,select'))e.preventDefault()};el.addEventListener('wheel',block,{passive:false});return()=>el.removeEventListener('wheel',block)},[]);
  useEffect(()=>{const keys=(e:KeyboardEvent)=>{if(e.key==='Escape'){setMenu(null);setRefMenu('');setEditing('');return}if((e.target as HTMLElement).closest('input,textarea,select,[contenteditable]'))return;if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='z'){e.preventDefault();if(e.shiftKey)redo();else undo()}if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='d'){e.preventDefault();duplicate()}};window.addEventListener('keydown',keys);return()=>window.removeEventListener('keydown',keys)});
- useEffect(()=>{if(ready)try{localStorage.setItem(key+'.theme',theme)}catch{}},[theme,ready]);
+
  function scaleAt(next:number,cx?:number,cy?:number){const el=viewport.current;if(!el)return;const r=el.getBoundingClientRect(),x=cx===undefined?r.width/2:cx-r.left,y=cy===undefined?r.height/2:cy-r.top;const z=Math.max(.2,Math.min(2,next));setPan({x:x-(x-pan.x)*z/zoom,y:y-(y-pan.y)*z/zoom});setZoom(z)}
  function duplicate(){if(!active||doc.cards.length>=80)return;const id=Array.from(crypto.getRandomValues(new Uint8Array(16)),b=>b.toString(16).padStart(2,'0')).join('');commit({...doc,cards:[...doc.cards,{...active,id,title:active.title.slice(0,197)+' 副本',x:active.x+40,y:active.y+40}]});select(id)}
  function commit(next:Doc){setPast(p=>[...p.slice(-29),doc]);setFuture([]);setDoc(next)}
@@ -41,8 +43,8 @@ export default function InfiniteCanvas(){
  function connect(from:string,to:string){try{const next=connectNodes(doc,from,to);if(next!==doc)commit(next);setTaskFeedback('')}catch(e){setTaskFeedback(e instanceof Error?e.message:'无法引用节点')}}
  function exportTask(id:string){try{const task=agentTask(doc,id),url=URL.createObjectURL(new Blob([JSON.stringify(task,null,2)],{type:'application/json'}));const a=document.createElement('a');a.href=url;a.download=`canvas-task-${id}.json`;a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);setTaskFeedback('Agent 任务已导出')}catch(e){setTaskFeedback(e instanceof Error?e.message:'无法导出任务')}}
  function exportDoc(){const url=URL.createObjectURL(new Blob([JSON.stringify(doc,null,2)],{type:'application/json'}));const a=document.createElement('a');a.href=url;a.download='studio-canvas.json';a.click();setTimeout(()=>URL.revokeObjectURL(url),1000)}
- return <main className={s.app} data-theme={theme}><Head><title>无限画布 · Studio</title><meta name="description" content="在无限画布上组织灵感、参考素材与镜头提示词"/></Head>
- <header className={s.header}><a href="/workspace" className={s.back} aria-label="返回 Studio"><ArrowLeft size={18}/></a><a href="/workspace" className={s.brand}>STUDIO<span>✳</span></a><i/><span className={s.crumb}>工作空间 <ChevronRight size={13}/></span><strong>未命名的灵感宇宙</strong><span className={s.badge}>本机草稿</span><div className={s.spacer}/><CanvasAgentPanel ref={agent} document={doc} email={email} onLoad={next=>{setDoc(next);setPast([]);setFuture([]);setEditing('');select('')}} onFeedback={setTaskFeedback}/><button aria-label="切换明暗主题" title={theme==='dark'?'切换浅色模式':'切换深色模式'} onClick={()=>setTheme(t=>t==='dark'?'light':'dark')}>{theme==='dark'?<Sun size={17}/>:<Moon size={17}/>}</button><a href="/account">{email||'登录账户'}</a><button className={s.export} onClick={exportDoc}><Download size={15}/>导出项目</button></header>
+ return <main className={s.app}><Head><title>无限画布 · 啡跃 Endoleap</title><meta name="description" content="在无限画布上组织灵感、参考素材与镜头提示词"/></Head>
+ <header className={s.header}><a href="/workspace" className={s.back} aria-label="返回 Studio"><ArrowLeft size={18}/></a><a href="/workspace" className={s.brand}><Brand compact/></a><i/><span className={s.crumb}>工作空间 <ChevronRight size={13}/></span><strong>未命名的灵感宇宙</strong><span className={s.badge}>本机草稿</span><div className={s.spacer}/><CanvasAgentPanel ref={agent} document={doc} email={email} onLoad={next=>{setDoc(next);setPast([]);setFuture([]);setEditing('');select('')}} onFeedback={setTaskFeedback}/><ThemeToggle/><a href="/account">{email||'登录账户'}</a><button className={s.export} onClick={exportDoc}><Download size={15}/>导出项目</button></header>
  <div className={s.workspace}><nav className={s.rail} aria-label="画布工具"><button title="选择工具" aria-label="选择工具" aria-pressed={tool==='select'} onClick={()=>setTool('select')}><MousePointer2/></button><button title="移动画布" aria-label="移动画布" aria-pressed={tool==='hand'} onClick={()=>setTool('hand')}><Hand/></button><hr/><button title="添加笔记" aria-label="添加笔记" onClick={()=>add('text')}><Type/></button><button title="上传图片" aria-label="上传图片" onClick={()=>file.current?.click()}><ImagePlus/></button><button title="添加提示词" aria-label="添加提示词" onClick={()=>add('prompt')}><Sparkles/></button><button title="导入项目" aria-label="导入项目" onClick={()=>json.current?.click()}><Upload/></button><div className={s.spacer}/><span>∞</span></nav>
  <section className={s.canvasArea}>{!doc.cards.length&&<div className={s.startPanel}><span>YOUR NEXT IDEA STARTS HERE</span><h2>给想法，一个无限的空间。</h2><p>双击画布添加节点，或选择一个起点。</p><div><button onClick={()=>add('text')}><Type size={19}/>灵感笔记</button><button onClick={()=>file.current?.click()}><ImagePlus size={19}/>参考图片</button><button onClick={()=>add('prompt')}><Sparkles size={19}/>创作提示词</button></div><button onClick={()=>{commit(example);select('');setPan({x:0,y:0});setZoom(.7)}}>从示例开始 ↗</button><a href="/studio/api" target="_blank" rel="noreferrer">连接你的 coding agent · 接入文档 ↗</a></div>}<div className={s.canvasTitle}><span className={s.eyebrow}>YOUR IDEAS, CONNECTED</span><h1>无限画布<span> / Infinite canvas</span></h1><p>从一个灵感，连接所有可能。</p></div>
  <div className={s.viewport} style={{backgroundPosition:`${pan.x}px ${pan.y}px`,backgroundSize:`${24*zoom*Math.max(1,2**Math.ceil(Math.log2(1/zoom)))}px ${24*zoom*Math.max(1,2**Math.ceil(Math.log2(1/zoom)))}px`}} ref={viewport} onDoubleClick={e=>{if(e.target===e.currentTarget){setMenu(null);add('text')}}} onContextMenu={e=>{e.preventDefault();const id=(e.target as HTMLElement).closest('[data-node-id]')?.getAttribute('data-node-id');select(id||'');setMenu({x:Math.min(e.clientX,window.innerWidth-250),y:Math.min(e.clientY,window.innerHeight-330)})}} onWheel={e=>{const target=e.target as HTMLElement;if(drag.current)return;if(target.closest('textarea,input,select'))return;if(e.ctrlKey||e.metaKey){scaleAt(zoom*Math.exp(-e.deltaY*.002),e.clientX,e.clientY)}else setPan(p=>({x:p.x-e.deltaX,y:p.y-e.deltaY}))}} onPointerDown={e=>{setMenu(null);setRefMenu('');if(e.target===e.currentTarget){setEditing('');select('')};if(e.target===e.currentTarget||(tool==='hand'&&!(e.target as HTMLElement).closest('input,textarea,button,select'))||e.button===1){e.currentTarget.setPointerCapture(e.pointerId);drag.current={id:'pan',x:e.clientX,y:e.clientY,ox:pan.x,oy:pan.y,before:doc}}}} onPointerMove={e=>{const d=drag.current;if(!d)return;if(d.id==='pan')setPan({x:d.ox+e.clientX-d.x,y:d.oy+e.clientY-d.y});else {if(!d.resize&&Math.hypot(e.clientX-d.x,e.clientY-d.y)<4)return;e.currentTarget.setPointerCapture(e.pointerId);setDoc({...d.before,cards:d.before.cards.map(c=>c.id===d.id?(d.resize?{...c,width:Math.max(260,Math.min(1200,d.ox+(e.clientX-d.x)/zoom)),height:Math.max(300,Math.min(1200,d.oy+(e.clientY-d.y)/zoom))}:{...c,x:d.ox+(e.clientX-d.x)/zoom,y:d.oy+(e.clientY-d.y)/zoom}):c)})}}} onPointerUp={e=>{const d=drag.current;if(d?.id==='pan'&&tool==='select'&&Math.hypot(e.clientX-d.x,e.clientY-d.y)<4){select('');setMenu({x:Math.min(e.clientX,window.innerWidth-250),y:Math.min(e.clientY,window.innerHeight-230)})}if(d&&d.id!=='pan'&&doc!==d.before){setPast(p=>[...p.slice(-29),d.before]);setFuture([])}drag.current=null}} onPointerCancel={()=>{if(drag.current?.id!=='pan'&&drag.current)setDoc(drag.current.before);drag.current=null}}>
diff --git a/apps/studio/src/styles/brand.css b/apps/studio/src/styles/brand.css
new file mode 100644
index 0000000..f8285f1
--- /dev/null
+++ b/apps/studio/src/styles/brand.css
@@ -0,0 +1,24 @@
+/* Shared chrome uses the canonical package tokens; artwork keeps its own palette. */
+html,body{background:var(--background);color:var(--foreground);color-scheme:inherit}
+body{margin:0}
+.endoleap-brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;line-height:1.15;vertical-align:middle;letter-spacing:normal;font-weight:650}
+.endoleap-brand .endoleap-mark{width:32px;height:32px;object-fit:contain;flex-shrink:0}
+.endoleap-mark-dark{display:none!important}
+[data-theme$="-dark"] .endoleap-mark-light{display:none!important}
+[data-theme$="-dark"] .endoleap-mark-dark{display:block!important}
+.endoleap-wordmark{display:flex!important;flex-direction:column;font-size:17px!important;color:var(--foreground-strong)!important;letter-spacing:.02em!important;margin:0!important;gap:3px}
+.endoleap-wordmark small{display:block;font-size:9px;font-weight:500;letter-spacing:.08em;color:var(--muted-foreground)}
+button.endoleap-theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--border);background:var(--surface);color:var(--foreground);border-radius:8px;padding:7px 9px;font-size:12px;line-height:1.2;flex-shrink:0;cursor:pointer}
+button.endoleap-theme-toggle:hover{background:var(--row-hover)}
+:where(a,button,input,textarea,select):focus-visible{outline:2px solid var(--ring);outline-offset:3px}
+::selection{background:var(--selection);color:var(--foreground)}
+@media(max-width:600px){.endoleap-theme-toggle span{display:none}.endoleap-brand{gap:5px}.endoleap-brand .endoleap-mark{width:26px;height:26px}.endoleap-wordmark{font-size:14px!important}}
+
+button:disabled{cursor:default}
+input,textarea,select{accent-color:var(--primary)}
+
+.is-editing.native-layout-page{background:var(--background);color:var(--foreground)}
+.studio-mark,.page-tools,.workbench-top,.workbench-layers,.workbench-properties,.element-popover,.page-edit-info{color:var(--foreground)}
+.workbench-top button.primary,.page-tools .page-save,.trial-actions .trial-primary{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}
+.workbench-top button.primary:hover,.page-tools .page-save:hover{background:var(--primary-hover)}
+.native-element.is-selected,.proof-active .proof-select{outline-color:var(--selection-border)}
diff --git a/apps/studio/src/styles/canvas-agent.module.css b/apps/studio/src/styles/canvas-agent.module.css
index 482071d..123bf34 100644
--- a/apps/studio/src/styles/canvas-agent.module.css
+++ b/apps/studio/src/styles/canvas-agent.module.css
@@ -1,3 +1,3 @@
-.root{position:static}.panel{position:absolute;left:0;top:calc(100% + 12px);width:min(390px,calc(100vw - 32px));max-height:75dvh;overflow:auto;padding:20px;border:1px solid #414141;border-radius:16px;background:#242424;color:#ddd;box-shadow:0 15px 70px #0005;z-index:12;display:grid;gap:14px;font-size:12px}.panel header,.actions,.conflict{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.panel button{font-size:11px!important;padding:7px 10px!important;background:#333!important;color:inherit!important;border:1px solid #555!important}.panel button:disabled{opacity:.45}.panel textarea{width:100%;height:150px;resize:vertical;background:#181818;color:#ddd;border:1px solid #444;border-radius:8px;padding:10px;font:10px/1.7 monospace}.panel p{margin:0;color:#aaa;line-height:1.7}.panel small{color:#aaa;font-size:10px}.panel label{display:grid;gap:8px}.panel select{width:100%;background:#333;color:inherit;padding:8px;border-radius:6px}.panel ul{padding:0;margin:0;list-style:none;display:grid;gap:12px}.panel li{display:grid;gap:5px;border-top:1px solid #444;padding-top:10px}.panel li button{justify-self:start}.panel a{color:inherit!important;text-decoration:underline!important}:global([data-theme=light]) .panel{background:white;color:#333;border-color:#ccc}:global([data-theme=light]) .panel button{background:#f3f3f3!important;border-color:#ddd!important}
+.root{position:static}.panel{position:absolute;left:0;top:calc(100% + 12px);width:min(390px,calc(100vw - 32px));max-height:75dvh;overflow:auto;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--foreground);box-shadow:0 15px 70px var(--shadow);z-index:12;display:grid;gap:14px;font-size:12px}.panel header,.actions,.conflict{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.panel button{font-size:11px!important;padding:7px 10px!important;background:var(--surface)!important;color:inherit!important;border:1px solid var(--border)!important}.panel button:disabled{opacity:.45}.panel textarea{width:100%;height:150px;resize:vertical;background:var(--surface);color:var(--foreground);border:1px solid var(--input);border-radius:8px;padding:10px;font:10px/1.7 monospace}.panel p{margin:0;color:var(--muted-foreground);line-height:1.7}.panel small{color:var(--muted-foreground);font-size:10px}.panel label{display:grid;gap:8px}.panel select{width:100%;background:var(--surface);color:inherit;padding:8px;border-radius:6px}.panel ul{padding:0;margin:0;list-style:none;display:grid;gap:12px}.panel li{display:grid;gap:5px;border-top:1px solid var(--border);padding-top:10px}.panel li button{justify-self:start}.panel a{color:inherit!important;text-decoration:underline!important}
 
 :global(header):has(> .root .panel){z-index:12}
diff --git a/apps/studio/src/styles/canvas-composer.module.css b/apps/studio/src/styles/canvas-composer.module.css
index f9da111..59b8088 100644
--- a/apps/studio/src/styles/canvas-composer.module.css
+++ b/apps/studio/src/styles/canvas-composer.module.css
@@ -1,4 +1,4 @@
-.composer{position:fixed;z-index:6;left:50%;bottom:92px;transform:translateX(-50%);width:min(900px,calc(100vw - 40px));height:280px;border:1px solid #414141;border-radius:22px;padding:20px 24px;background:#242424;color:#ddd;display:flex;flex-direction:column;box-shadow:0 15px 70px #0003}.composer[data-expanded=true]{height:min(65dvh,650px)}.composer header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}.composer header>span,.composer header>div{display:flex;align-items:center;gap:8px}.composer header button,.composer footer button{background:#303030;border-color:#414141;font-size:11px;padding:7px 10px}.composer textarea{display:block;flex:1;min-height:50px;width:100%;resize:none;padding:17px 0;border:0;background:transparent;color:inherit;font:inherit;line-height:1.8;outline:none}.composer footer{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:#888}.references{display:flex;gap:10px;padding-top:15px;flex-shrink:0;overflow:auto}.reference{width:70px;height:65px;border:1px solid #555;border-radius:8px;position:relative;display:grid;place-items:center;flex-shrink:0;overflow:hidden;background:#333}.reference img{width:100%;height:100%;object-fit:cover}.reference>span{position:absolute;top:3px;left:4px;background:#151515;color:white;border-radius:50%;padding:1px 4px;font-size:9px}.reference small{position:absolute;bottom:0;width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#222b;font-size:8px;padding:3px}.reference button{position:absolute;top:1px;right:1px;padding:2px!important;background:#222c!important;border:0!important}.picker{position:absolute;bottom:calc(100% + 10px);left:0;background:#242424;border:1px solid #444;border-radius:14px;padding:10px;max-height:200px;overflow:auto;display:grid;gap:5px;min-width:220px}.picker button{justify-content:flex-start;background:transparent;border:0}.picker>span{font-size:11px;padding:12px}:global([data-theme=light]) .composer,:global([data-theme=light]) .picker{background:#fff;color:#333;border-color:#ccc}:global([data-theme=light]) .composer button{background:#f1f1f1;color:#333;border-color:#ddd}@media(max-width:600px){.composer{width:calc(100vw - 20px);padding:15px;bottom:80px;height:260px;border-radius:16px}.composer header>span{max-width:95px;overflow:hidden;white-space:nowrap;font-size:10px}.composer header button{padding:5px;font-size:10px}.composer header{gap:4px}.composer header>div{gap:4px}}
+.composer{position:fixed;z-index:6;left:50%;bottom:92px;transform:translateX(-50%);width:min(900px,calc(100vw - 40px));height:280px;border:1px solid var(--border);border-radius:22px;padding:20px 24px;background:var(--surface);color:var(--foreground);display:flex;flex-direction:column;box-shadow:0 15px 70px var(--shadow)}.composer[data-expanded=true]{height:min(65dvh,650px)}.composer header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}.composer header>span,.composer header>div{display:flex;align-items:center;gap:8px}.composer header button,.composer footer button{background:var(--surface);border-color:var(--border);font-size:11px;padding:7px 10px}.composer textarea{display:block;flex:1;min-height:50px;width:100%;resize:none;padding:17px 0;border:0;background:transparent;color:inherit;font:inherit;line-height:1.8;outline:none}.composer footer{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted-foreground)}.references{display:flex;gap:10px;padding-top:15px;flex-shrink:0;overflow:auto}.reference{width:70px;height:65px;border:1px solid var(--border);border-radius:8px;position:relative;display:grid;place-items:center;flex-shrink:0;overflow:hidden;background:var(--surface)}.reference img{width:100%;height:100%;object-fit:cover}.reference>span{position:absolute;top:3px;left:4px;background:var(--surface);color:var(--foreground);border-radius:50%;padding:1px 4px;font-size:9px}.reference small{position:absolute;bottom:0;width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--surface);font-size:8px;padding:3px}.reference button{position:absolute;top:1px;right:1px;padding:2px!important;background:var(--surface)!important;border:0!important}.picker{position:absolute;bottom:calc(100% + 10px);left:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px;max-height:200px;overflow:auto;display:grid;gap:5px;min-width:220px}.picker button{justify-content:flex-start;background:transparent;border:0}.picker>span{font-size:11px;padding:12px}@media(max-width:600px){.composer{width:calc(100vw - 20px);padding:15px;bottom:80px;height:260px;border-radius:16px}.composer header>span{max-width:95px;overflow:hidden;white-space:nowrap;font-size:10px}.composer header button{padding:5px;font-size:10px}.composer header{gap:4px}.composer header>div{gap:4px}}
 .composer header input{width:200px;max-width:25vw;min-width:0;border:0;background:transparent;color:inherit;font:inherit;outline:none}
 
 .composer footer>div{display:flex;gap:8px;flex-shrink:0}@media(max-width:600px){.composer footer>div{gap:4px}.composer footer button{font-size:10px;padding:6px}.composer footer>span{min-width:0}}
diff --git a/apps/studio/src/styles/canvas-node.module.css b/apps/studio/src/styles/canvas-node.module.css
index 0f98852..8f2f135 100644
--- a/apps/studio/src/styles/canvas-node.module.css
+++ b/apps/studio/src/styles/canvas-node.module.css
@@ -1,3 +1,3 @@
-.node{position:absolute;background:#242424;border:1px solid #414141;border-radius:13px;color:#ddd;pointer-events:auto;touch-action:none;cursor:grab;outline:none}.node[data-selected=true]{border-color:#999}.node[data-editing=true]{border:2px solid #aaa;cursor:default}.title{position:absolute;top:-31px;left:0;right:0;display:flex;gap:7px;align-items:center;height:26px;color:#969696;font-size:12px;white-space:nowrap}.title>span{overflow:hidden;text-overflow:ellipsis}.title>button{margin-left:auto;padding:3px!important;background:transparent!important;border:0!important}.content,.image{height:100%;overflow:hidden;border-radius:12px}.content{padding:25px;white-space:pre-wrap;overflow:auto;scrollbar-width:thin}.content p{margin:0;line-height:1.7;pointer-events:none}.image{position:relative;display:grid;place-items:center}.image img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}.empty{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;color:#777}.empty button{background:transparent!important;border:0!important;color:#bbb!important;font-size:12px!important}.node>textarea{width:100%;height:100%;border:0;border-radius:12px;background:transparent;color:inherit;outline:none;resize:none;padding:25px;line-height:1.7;touch-action:auto}.format{position:absolute;bottom:calc(100% + 48px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:#242424;border:1px solid #444;border-radius:12px;padding:6px;white-space:nowrap;z-index:3}.format input{width:24px;height:24px;padding:0;border:0;background:transparent}.format select{max-width:100px;background:transparent;color:#ddd;border:0;padding:6px}.format button{padding:5px!important;border:0!important;background:transparent!important}.format button[aria-pressed=true]{background:#4b4b4b!important}.reference{position:absolute!important;right:-38px;top:calc(50% - 14px);width:28px;height:28px;border-radius:50%!important;border:1px solid #777!important;padding:2px!important;background:#202020!important;color:#ddd!important}.resize{position:absolute!important;right:3px;bottom:3px;padding:3px!important;border:0!important;background:transparent!important;color:#888!important;cursor:nwse-resize!important}.upscale{position:absolute;bottom:10px;left:10px;font-size:10px!important;background:#242424df!important}.node:focus-visible{outline:2px solid #a6c579;outline-offset:3px}:global([data-theme=light]) .node{background:white;color:#333;border-color:#d0d0d0}:global([data-theme=light]) .node[data-selected=true]{border-color:#555}:global([data-theme=light]) .empty button{color:#555!important}:global([data-theme=light]) .format{background:white;border-color:#ccc}:global([data-theme=light]) .format select{color:#333}
+.node{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:13px;color:var(--foreground);pointer-events:auto;touch-action:none;cursor:grab;outline:none}.node[data-selected=true]{border-color:var(--selection-border)}.node[data-editing=true]{border:2px solid var(--border);cursor:default}.title{position:absolute;top:-31px;left:0;right:0;display:flex;gap:7px;align-items:center;height:26px;color:var(--muted-foreground);font-size:12px;white-space:nowrap}.title>span{overflow:hidden;text-overflow:ellipsis}.title>button{margin-left:auto;padding:3px!important;background:transparent!important;border:0!important}.content,.image{height:100%;overflow:hidden;border-radius:12px}.content{padding:25px;white-space:pre-wrap;overflow:auto;scrollbar-width:thin}.content p{margin:0;line-height:1.7;pointer-events:none}.image{position:relative;display:grid;place-items:center}.image img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}.empty{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;color:var(--muted-foreground)}.empty button{background:transparent!important;border:0!important;color:var(--muted-foreground)!important;font-size:12px!important}.node>textarea{width:100%;height:100%;border:0;border-radius:12px;background:transparent;color:inherit;outline:none;resize:none;padding:25px;line-height:1.7;touch-action:auto}.format{position:absolute;bottom:calc(100% + 48px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;white-space:nowrap;z-index:3}.format input{width:24px;height:24px;padding:0;border:0;background:transparent}.format select{max-width:100px;background:transparent;color:var(--foreground);border:0;padding:6px}.format button{padding:5px!important;border:0!important;background:transparent!important}.format button[aria-pressed=true]{background:var(--selection)!important}.reference{position:absolute!important;right:-38px;top:calc(50% - 14px);width:28px;height:28px;border-radius:50%!important;border:1px solid var(--border)!important;padding:2px!important;background:var(--surface)!important;color:var(--foreground)!important}.resize{position:absolute!important;right:3px;bottom:3px;padding:3px!important;border:0!important;background:transparent!important;color:var(--muted-foreground)!important;cursor:nwse-resize!important}.upscale{position:absolute;bottom:10px;left:10px;font-size:10px!important;background:var(--surface)!important}.node:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
 .title>input{min-width:0;width:100%;border:0!important;background:transparent!important;padding:0!important;color:inherit;font:inherit;outline:none}.title>button{flex-shrink:0}
 .incoming{right:auto!important;left:-38px}
diff --git a/apps/studio/src/styles/globals.css b/apps/studio/src/styles/globals.css
index 2dbdb52..d8126d6 100644
--- a/apps/studio/src/styles/globals.css
+++ b/apps/studio/src/styles/globals.css
@@ -1,36 +1,38 @@
 @import "tailwindcss";
-*{box-sizing:border-box}body{margin:0;color:#242424;background:#faf9f7;font-family:Arial,"PingFang SC",sans-serif}a{color:inherit;text-decoration:none}button,a{cursor:pointer}button{border:0;padding:12px 22px;border-radius:24px}.workspace{display:grid;grid-template-columns:240px 1fr;min-height:100vh}aside{padding:38px 26px;border-right:1px solid #eee;background:white}aside a{display:block;margin-top:30px}.logo{color:#ff2442}section{padding:70px 6vw}h1{font-size:40px;letter-spacing:-1.5px}section>p,.hint{color:#888}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,340px));gap:24px;margin-top:45px}.card{background:white;padding:14px;border-radius:22px;border:1px solid #eee}.cover{background:#ffe5df;aspect-ratio:4/5;border-radius:14px;padding:36px;display:flex;align-items:center;font-size:35px;font-weight:bold}.card h2{font-size:18px}.card p{line-height:1.8;color:#888}.card span{color:#ff2442}.hint{margin-top:40px;font-size:13px}.editor{max-width:1200px;margin:auto;padding:30px}header{display:flex;align-items:center;gap:24px}header a:first-child{margin-right:auto}.slides{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}.slide{aspect-ratio:3/4;padding:35px;border-radius:20px;display:flex;flex-direction:column}.slide h2{font-size:38px;margin-top:auto}.slide p{line-height:1.9}.slide footer{margin-top:auto;font-size:12px}@media(max-width:760px){.workspace{grid-template-columns:1fr}aside{border-bottom:1px solid #eee}aside a{display:inline-block;margin:20px 20px 0 0}section{padding:30px}.slides{grid-template-columns:1fr}header{flex-wrap:wrap}h1{font-size:30px}}@media print{header{display:none}.slides{display:block}.slide{width:180mm;height:240mm;break-after:page;print-color-adjust:exact;border-radius:0}.editor>h1,.editor>p{display:none}}
+@import "@endoleap/brand/themes.css";
+@import "@endoleap/brand/tailwind.css";
+*{box-sizing:border-box}body{margin:0;color:var(--foreground-strong);background:var(--selection);font-family:Arial,"PingFang SC",sans-serif}a{color:inherit;text-decoration:none}button,a{cursor:pointer}button{border:0;padding:12px 22px;border-radius:24px}.workspace{display:grid;grid-template-columns:240px 1fr;min-height:100vh}aside{padding:38px 26px;border-right:1px solid var(--border);background:var(--surface)}aside a{display:block;margin-top:30px}.logo{color:var(--primary)}section{padding:70px 6vw}h1{font-size:40px;letter-spacing:-1.5px}section>p,.hint{color:var(--muted-foreground)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,340px));gap:24px;margin-top:45px}.card{background:var(--surface);padding:14px;border-radius:22px;border:1px solid var(--border)}.cover{background:var(--selection);aspect-ratio:4/5;border-radius:14px;padding:36px;display:flex;align-items:center;font-size:35px;font-weight:bold}.card h2{font-size:18px}.card p{line-height:1.8;color:var(--muted-foreground)}.card span{color:var(--primary)}.hint{margin-top:40px;font-size:13px}.editor{max-width:1200px;margin:auto;padding:30px}header{display:flex;align-items:center;gap:24px}header a:first-child{margin-right:auto}.slides{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}.slide{aspect-ratio:3/4;padding:35px;border-radius:20px;display:flex;flex-direction:column}.slide h2{font-size:38px;margin-top:auto}.slide p{line-height:1.9}.slide footer{margin-top:auto;font-size:12px}@media(max-width:760px){.workspace{grid-template-columns:1fr}aside{border-bottom:1px solid var(--border)}aside a{display:inline-block;margin:20px 20px 0 0}section{padding:30px}.slides{grid-template-columns:1fr}header{flex-wrap:wrap}h1{font-size:30px}}@media print{header{display:none}.slides{display:block}.slide{width:180mm;height:240mm;break-after:page;print-color-adjust:exact;border-radius:0}.editor>h1,.editor>p{display:none}}
 
 /* The reference art stays inside its native 113:174 canvas. */
 .cover-template{padding:0;border-radius:0;display:block;aspect-ratio:113/174;background:#f4f2eb}
-.template-trial{max-width:1480px;margin:auto;padding:28px 40px 70px;color:#28362f}
-.trial-nav{padding-bottom:24px;border-bottom:1px solid #dedfd8;font-size:13px;letter-spacing:.04em}
-.trial-nav span{color:#7c847d}.trial-nav a:last-child{margin-left:auto}
+.template-trial{max-width:1480px;margin:auto;padding:28px 40px 70px;color:var(--foreground-strong)}
+.trial-nav{padding-bottom:24px;border-bottom:1px solid var(--border);font-size:13px;letter-spacing:.04em}
+.trial-nav span{color:var(--muted-foreground)}.trial-nav a:last-child{margin-left:auto}
 .trial-intro{padding:48px 0 34px;display:flex;gap:32px;justify-content:space-between;align-items:end}
-.trial-intro small{font-size:11px;letter-spacing:.12em;color:#758276}.trial-intro h1{font-size:44px;margin:16px 0;letter-spacing:-2px;line-height:1.2}.trial-intro p{max-width:650px;line-height:1.8;font-size:14px;color:#727b72}
-.trial-source{display:grid;gap:10px;font-size:12px;min-width:140px;color:#758276}.trial-source b{color:#28362f}
+.trial-intro small{font-size:11px;letter-spacing:.12em;color:var(--muted-foreground)}.trial-intro h1{font-size:44px;margin:16px 0;letter-spacing:-2px;line-height:1.2}.trial-intro p{max-width:650px;line-height:1.8;font-size:14px;color:var(--muted-foreground)}
+.trial-source{display:grid;gap:10px;font-size:12px;min-width:140px;color:var(--muted-foreground)}.trial-source b{color:var(--foreground-strong)}
 .trial-workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}
-.trial-controls{padding:22px;border:1px solid #dedfd8;background:#fff;border-radius:8px;position:sticky;top:20px}
-.trial-controls h2{font-size:18px;margin:0 0 20px}.trial-controls label{display:block;font-size:12px;margin:14px 0;color:#4d594f}.trial-controls small{font-size:10px;color:#879087;margin-left:4px}
-.trial-controls input:not([type=checkbox]),.trial-controls select,.trial-controls textarea{display:block;width:100%;border:1px solid #d8dcd5;border-radius:4px;padding:9px;margin-top:7px;background:#fafbf8;color:#28362f;font:inherit;line-height:1.5}
-.trial-controls fieldset{border:0;border-top:1px solid #e5e8df;padding:12px 0 0;margin:20px 0}.trial-controls legend{font-size:11px;padding-right:8px;color:#879087}.trial-controls fieldset label{margin:8px 0}
-.trial-colors{display:flex;gap:16px}.trial-colors label{flex:1}.trial-controls input[type=color]{height:36px;padding:4px}.trial-controls .trial-switch{display:flex;align-items:center;gap:8px;padding:12px 0}.trial-switch input{accent-color:#44614b}
-.trial-actions{display:grid;gap:8px}.trial-actions button{padding:11px 8px;border:1px solid #dce1d7;border-radius:4px;font-size:12px;background:#fff;color:#455443}.trial-actions .trial-primary{background:#344f3c;color:white;border-color:#344f3c}.trial-actions button:hover{filter:brightness(.94)}
-.trial-help{font-size:11px;line-height:1.7;color:#8a9288;margin-top:16px}.trial-notice{font-size:11px;color:#346844;min-height:16px}
-.trial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.proof-card{margin:0;min-width:0}.proof-select{display:block;width:100%;padding:0;border-radius:0;background:#f4f2eb;box-shadow:0 3px 14px #28362f14;outline:1px solid #dddcd3;outline-offset:0;transition:outline-color .15s}.proof-active .proof-select{outline:2px solid #617d65;outline-offset:5px}.proof-select:focus-visible{outline:3px solid #346844;outline-offset:5px}.proof-card figcaption{display:flex;gap:10px;align-items:center;padding:16px 0 0;font-size:11px;flex-wrap:wrap}.proof-card figcaption b{font-weight:500}.proof-card figcaption span{color:#92988e}.proof-card figcaption a{margin-left:auto;text-decoration:underline;text-underline-offset:3px;color:#61735e}
-.trial-reference{margin-top:36px;padding:20px 0;border-top:1px solid #dedfd8;font-size:12px}.trial-reference summary{cursor:pointer}.trial-reference-body{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;margin-top:22px;line-height:1.8}.trial-reference img{width:150px;height:auto;align-self:start}.trial-reference table{width:100%;border-collapse:collapse;font-size:11px;margin:16px 0}.trial-reference th,.trial-reference td{text-align:left;border-bottom:1px solid #dedfd8;padding:6px}.trial-reference a{text-decoration:underline}
+.trial-controls{padding:22px;border:1px solid var(--border);background:var(--surface);border-radius:8px;position:sticky;top:20px}
+.trial-controls h2{font-size:18px;margin:0 0 20px}.trial-controls label{display:block;font-size:12px;margin:14px 0;color:var(--foreground)}.trial-controls small{font-size:10px;color:var(--muted-foreground);margin-left:4px}
+.trial-controls input:not([type=checkbox]),.trial-controls select,.trial-controls textarea{display:block;width:100%;border:1px solid var(--input);border-radius:4px;padding:9px;margin-top:7px;background:var(--selection);color:var(--foreground-strong);font:inherit;line-height:1.5}
+.trial-controls fieldset{border:0;border-top:1px solid var(--border);padding:12px 0 0;margin:20px 0}.trial-controls legend{font-size:11px;padding-right:8px;color:var(--muted-foreground)}.trial-controls fieldset label{margin:8px 0}
+.trial-colors{display:flex;gap:16px}.trial-colors label{flex:1}.trial-controls input[type=color]{height:36px;padding:4px}.trial-controls .trial-switch{display:flex;align-items:center;gap:8px;padding:12px 0}.trial-switch input{accent-color:var(--ring)}
+.trial-actions{display:grid;gap:8px}.trial-actions button{padding:11px 8px;border:1px solid var(--border);border-radius:4px;font-size:12px;background:var(--surface);color:var(--foreground)}.trial-actions .trial-primary{background:var(--primary);color:var(--primary-foreground);border-color:var(--selection-border)}.trial-actions button:hover{filter:brightness(.94)}
+.trial-help{font-size:11px;line-height:1.7;color:var(--muted-foreground);margin-top:16px}.trial-notice{font-size:11px;color:var(--success);min-height:16px}
+.trial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.proof-card{margin:0;min-width:0}.proof-select{display:block;width:100%;padding:0;border-radius:0;background:var(--selection);box-shadow:0 3px 14px var(--shadow);outline:1px solid var(--ring);outline-offset:0;transition:outline-color .15s}.proof-active .proof-select{outline:2px solid var(--ring);outline-offset:5px}.proof-select:focus-visible{outline:3px solid var(--ring);outline-offset:5px}.proof-card figcaption{display:flex;gap:10px;align-items:center;padding:16px 0 0;font-size:11px;flex-wrap:wrap}.proof-card figcaption b{font-weight:500}.proof-card figcaption span{color:var(--muted-foreground)}.proof-card figcaption a{margin-left:auto;text-decoration:underline;text-underline-offset:3px;color:var(--muted-foreground)}
+.trial-reference{margin-top:36px;padding:20px 0;border-top:1px solid var(--border);font-size:12px}.trial-reference summary{cursor:pointer}.trial-reference-body{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;margin-top:22px;line-height:1.8}.trial-reference img{width:150px;height:auto;align-self:start}.trial-reference table{width:100%;border-collapse:collapse;font-size:11px;margin:16px 0}.trial-reference th,.trial-reference td{text-align:left;border-bottom:1px solid var(--border);padding:6px}.trial-reference a{text-decoration:underline}
 @media(min-width:1300px){.trial-grid{gap:40px}.trial-workspace{gap:48px}}
 @media(max-width:900px){.template-trial{padding:22px}.trial-workspace{grid-template-columns:220px minmax(0,1fr);gap:24px}.trial-grid{gap:20px}.trial-controls{padding:16px}.trial-source{display:none}.trial-intro h1{font-size:36px}.trial-nav span{display:none}}
 @media(max-width:650px){.trial-workspace{grid-template-columns:1fr}.trial-controls{position:static}.trial-controls fieldset{display:grid;grid-template-columns:1fr 1fr;gap:12px}.trial-actions{grid-template-columns:1fr 1fr}.trial-reference-body{grid-template-columns:1fr}.trial-grid{gap:24px}.trial-intro{padding:32px 0}.trial-intro h1{font-size:30px}}
 @media(max-width:440px){.trial-grid{grid-template-columns:1fr}.trial-nav{gap:10px}.template-trial{padding:18px}}
 @page ref17Proof{size:113mm 174mm;margin:0}
 @media print{.template-trial{padding:0;max-width:none}.trial-nav,.trial-intro,.trial-controls,.trial-reference,.proof-card figcaption{display:none}.trial-workspace,.trial-grid{display:block}.proof-card{page:ref17Proof;break-after:page;width:113mm;height:174mm}.proof-card:last-child{break-after:auto}.proof-select,.proof-active .proof-select{outline:none;box-shadow:none;width:113mm;height:174mm}.proof-select svg{width:113mm!important;height:174mm!important;print-color-adjust:exact}.proof-select svg g[aria-hidden=true]{display:none}}
-.selection-preview{max-width:540px;margin:auto;box-shadow:0 3px 15px #28362f14}.selection-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}.selection-thumbs button{padding:0;border-radius:0;border:1px solid #d8dcd5;background:#fff}.selection-thumbs button[aria-pressed=true]{outline:2px solid #617d65;outline-offset:4px}.selection-thumbs span{display:block;font-size:12px;padding:10px}
+.selection-preview{max-width:540px;margin:auto;box-shadow:0 3px 15px var(--shadow)}.selection-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}.selection-thumbs button{padding:0;border-radius:0;border:1px solid var(--input);background:var(--surface)}.selection-thumbs button[aria-pressed=true]{outline:2px solid var(--ring);outline-offset:4px}.selection-thumbs span{display:block;font-size:12px;padding:10px}
 
-.trial-controls details{border-top:1px solid #dedfd8;padding:12px 0}.trial-controls summary{cursor:pointer;margin-bottom:12px}.trial-controls label small{display:block;font-weight:400;line-height:1.6;color:#687268}.trial-controls textarea{width:100%;box-sizing:border-box}.trial-controls>label input:not([type=checkbox]):not([type=color]){width:100%;box-sizing:border-box}.trial-actions button:disabled{opacity:.5;cursor:wait}
+.trial-controls details{border-top:1px solid var(--border);padding:12px 0}.trial-controls summary{cursor:pointer;margin-bottom:12px}.trial-controls label small{display:block;font-weight:400;line-height:1.6;color:var(--muted-foreground)}.trial-controls textarea{width:100%;box-sizing:border-box}.trial-controls>label input:not([type=checkbox]):not([type=color]){width:100%;box-sizing:border-box}.trial-actions button:disabled{opacity:.5;cursor:wait}
 
 /* These are the pages themselves: live type and CSS geometry, no reference raster. */
-.native-layout-page{min-height:100vh;background:#f5f5ef;padding-bottom:90px;color:#28312e}
+.native-layout-page{min-height:100vh;background:var(--selection);padding-bottom:90px;color:var(--foreground-strong)}
 .native-layout{position:relative;isolation:isolate;container-type:inline-size;width:min(100%,860px);margin:0 auto;overflow:hidden;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
 .native-element{position:absolute;outline-offset:3px;min-width:0;min-height:0}
 .native-image{z-index:1}.native-decoration{z-index:2}.native-text{z-index:3}
@@ -51,22 +53,22 @@
 .decoration-rings{border:.4cqw solid currentColor;border-radius:50%;box-shadow:0 0 0 1.5cqw #f5f5ef,0 0 0 1.8cqw currentColor,0 0 0 3.2cqw #f5f5ef,0 0 0 3.5cqw currentColor,0 0 0 5cqw #f5f5ef,0 0 0 5.3cqw currentColor;transform:scale(.92)}
 .decoration-curve{border:.3cqw solid currentColor;border-left:0;border-radius:0 75% 50% 0;transform:rotate(15deg)}
 .decoration-diagonal{border-left:.3cqw solid currentColor;transform:rotate(12deg)}.decoration-band{transform:rotate(-15deg)}
-.is-editing .native-element{cursor:pointer}.is-editing .native-element:hover{outline:1px dashed #ff2442}.is-editing .native-element.is-selected{outline:2px solid #ff2442}.is-editing .native-copy[contenteditable=plaintext-only]{cursor:text}.native-element:focus-visible{outline:2px solid #ff2442}
-.page-tools{position:fixed;z-index:30;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:5px;align-items:center;width:max-content;max-width:calc(100% - 24px);padding:6px;border:1px solid #e1e3dc;background:#fffffff2;box-shadow:0 5px 30px #25312b14;border-radius:32px;backdrop-filter:blur(12px);font-size:13px;white-space:nowrap}
-.page-tools a{padding:10px}.page-tools button{background:transparent;color:#28312e;padding:10px 14px;font:inherit}.page-tools .page-save{background:#283e32;color:#fff}.page-tools button:disabled{opacity:.4;cursor:default}.page-layout-number{font-size:10px;letter-spacing:.08em;color:#7e8881;padding:0 5px}.page-dirty{color:#ff2442;padding-right:8px}
-.page-edit-info{position:relative;max-width:860px;margin:20px auto 0;padding:18px 20px;background:#fff;border-top:1px solid #e1e3dc;font-size:13px}.page-edit-info p{margin:0 0 16px;color:#657168}.page-edit-info label{display:flex;gap:10px;align-items:center}.page-edit-info input:not([type=color]){flex:1;min-width:0}.page-edit-options{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;align-items:center}
-.page-edit-info input,.page-edit-info select,.element-popover input:not([type=checkbox]),.element-popover select,.element-popover textarea{border:1px solid #dbe0d8;border-radius:5px;background:#fff;color:#28312e;padding:7px;font:inherit;max-width:100%}.page-edit-info input[type=color],.element-popover input[type=color]{width:40px;height:32px;padding:2px}.page-edit-info button,.element-popover button{font:inherit;background:#f2f4ee;border-radius:5px;padding:9px 12px;color:#28312e}
-.element-popover{position:fixed;right:18px;bottom:86px;z-index:40;width:290px;max-width:calc(100vw - 24px);max-height:60dvh;overflow:auto;border:1px solid #dbe0d8;border-radius:14px;padding:16px;background:#fffffff7;box-shadow:0 10px 40px #25312b24;font-size:13px;backdrop-filter:blur(14px)}
-.element-popover-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.element-popover-heading button{padding:3px 8px;background:transparent;font-size:22px}.element-popover label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}.element-popover input[type=range]{width:150px}.element-popover .element-text-edit{display:block}.element-text-edit textarea{display:block;width:100%;margin-top:8px;resize:vertical}.element-popover>button{margin:5px 8px 0 0}.page-status{position:fixed;z-index:45;bottom:80px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);margin:0;padding:10px 16px;background:#283e32;color:#fff;border-radius:8px;font-size:13px;box-shadow:0 4px 20px #0002}
+.is-editing .native-element{cursor:pointer}.is-editing .native-element:hover{outline:1px dashed var(--ring)}.is-editing .native-element.is-selected{outline:2px solid var(--ring)}.is-editing .native-copy[contenteditable=plaintext-only]{cursor:text}.native-element:focus-visible{outline:2px solid var(--ring)}
+.page-tools{position:fixed;z-index:30;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:5px;align-items:center;width:max-content;max-width:calc(100% - 24px);padding:6px;border:1px solid var(--border);background:var(--background);box-shadow:0 5px 30px var(--shadow);border-radius:32px;backdrop-filter:blur(12px);font-size:13px;white-space:nowrap}
+.page-tools a{padding:10px}.page-tools button{background:transparent;color:var(--foreground-strong);padding:10px 14px;font:inherit}.page-tools .page-save{background:var(--primary);color:var(--primary-foreground)}.page-tools button:disabled{opacity:.4;cursor:default}.page-layout-number{font-size:10px;letter-spacing:.08em;color:var(--muted-foreground);padding:0 5px}.page-dirty{color:var(--primary);padding-right:8px}
+.page-edit-info{position:relative;max-width:860px;margin:20px auto 0;padding:18px 20px;background:var(--background);border-top:1px solid var(--border);font-size:13px}.page-edit-info p{margin:0 0 16px;color:var(--muted-foreground)}.page-edit-info label{display:flex;gap:10px;align-items:center}.page-edit-info input:not([type=color]){flex:1;min-width:0}.page-edit-options{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;align-items:center}
+.page-edit-info input,.page-edit-info select,.element-popover input:not([type=checkbox]),.element-popover select,.element-popover textarea{border:1px solid var(--input);border-radius:5px;background:var(--surface);color:var(--foreground-strong);padding:7px;font:inherit;max-width:100%}.page-edit-info input[type=color],.element-popover input[type=color]{width:40px;height:32px;padding:2px}.page-edit-info button,.element-popover button{font:inherit;background:var(--selection);border-radius:5px;padding:9px 12px;color:var(--foreground-strong)}
+.element-popover{position:fixed;right:18px;bottom:86px;z-index:40;width:290px;max-width:calc(100vw - 24px);max-height:60dvh;overflow:auto;border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--surface);box-shadow:0 10px 40px var(--shadow);font-size:13px;backdrop-filter:blur(14px)}
+.element-popover-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.element-popover-heading button{padding:3px 8px;background:transparent;font-size:22px}.element-popover label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}.element-popover input[type=range]{width:150px}.element-popover .element-text-edit{display:block}.element-text-edit textarea{display:block;width:100%;margin-top:8px;resize:vertical}.element-popover>button{margin:5px 8px 0 0}.page-status{position:fixed;z-index:45;bottom:80px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);margin:0;padding:10px 16px;background:var(--primary);color:var(--primary-foreground);border-radius:8px;font-size:13px;box-shadow:0 4px 20px var(--shadow)}
 @media(max-width:600px){.page-layout-number{display:none}.page-tools{bottom:12px}.page-tools button{padding:10px}.element-popover{right:12px;bottom:76px;width:260px}.page-edit-info{margin-top:0}.page-edit-options{gap:10px}}
 @media print{.native-layout-page{padding:0;background:none}.native-layout{width:100%;margin:0;print-color-adjust:exact}.page-tools,.page-edit-info,.element-popover,.page-status{display:none!important}.native-element{outline:none!important}}
 
 .native-copy.native-arc{position:relative;overflow:visible;white-space:pre;writing-mode:horizontal-tb;letter-spacing:0}.native-arc span{position:absolute;display:block}
 /* Native design workspace: chrome is mounted only while editing. */
-.is-editing.native-layout-page{height:100dvh;min-height:0;padding:58px 272px 0 232px;overflow:hidden;background:#f1f2f4;color:#20232b;font-family:Arial,"PingFang SC",sans-serif}
-.workbench-top{position:fixed;inset:0 0 auto;height:58px;z-index:60;display:flex;align-items:center;gap:10px;padding:0 16px;background:#fff;border-bottom:1px solid #e6e7eb;font-size:12px}.studio-mark{display:flex;align-items:center;gap:7px;font-weight:800;font-size:23px;color:#6857e8}.studio-mark span{font-size:10px;letter-spacing:.1em;color:#262831}.workbench-top input{border:0;background:transparent;font-size:13px;min-width:80px;width:240px;padding:8px}.save-indicator{margin-left:auto;color:#7a7f8b;font-size:11px;white-space:nowrap}.workbench-top button,.workbench-bottom button,.workbench-layers button,.workbench-properties button,.conflict-notice button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:6px;background:transparent;color:inherit;padding:8px;cursor:pointer;font:inherit}.workbench-top button:hover,.workbench-bottom button:hover,.workbench-layers button:hover,.workbench-properties button:hover{background:#f0eefc}.workbench-top button.primary{background:#6857e8;color:#fff;padding:9px 16px}.is-editing button:disabled{opacity:.35;cursor:default}.workbench-layers,.workbench-properties{position:fixed;top:58px;bottom:0;background:#fff;z-index:45;font-size:12px;overflow:auto}.workbench-layers{left:0;width:232px;border-right:1px solid #e3e5e9;display:flex;flex-direction:column}.workbench-properties{right:0;width:272px;border-left:1px solid #e3e5e9}.panel-heading{height:53px;display:flex;align-items:center;gap:8px;padding:16px;border-bottom:1px solid #eeeff2;flex-shrink:0}.panel-heading span{margin-left:auto;font-size:10px;color:#8e929d;max-width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.insert-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:16px}.insert-tools button{background:#f7f7f9;border:1px solid #ececf1;font-size:11px;padding:12px 5px}.insert-tools svg{width:16px;height:16px}.layers-caption{padding:12px 16px;color:#797e8c;font-size:10px;display:flex;justify-content:space-between}.layers-caption span{font-size:10px;color:#a0a4ae}.layer-list{padding:0 8px;flex:1}.layer-row{display:flex;align-items:center;gap:0;border-radius:5px;margin:2px 0;min-height:37px}.layer-row.active{background:#eeeaff;color:#6752d9}.layer-row.muted{opacity:.5}.layer-row button{padding:6px 4px}.layer-row .layer-select{flex:1;justify-content:flex-start;gap:8px;min-width:0;padding:9px 7px}.layer-select span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.layer-select svg{flex-shrink:0}.workbench-tip{font-size:10px;line-height:1.9;color:#9195a0;padding:16px;border-top:1px solid #eee;margin:20px 0 0}.workbench-viewport{height:100%;overflow:auto;padding:38px 48px 100px;background-image:radial-gradient(#cdd0d8 .7px,transparent .7px);background-size:14px 14px;display:flex;flex-direction:column;align-items:center}.canvas-caption{display:flex;justify-content:space-between;width:100%;font-size:10px;color:#858b98;margin-bottom:12px;gap:24px;max-width:860px}.is-editing .native-layout{flex-shrink:0;box-shadow:0 10px 35px #20232b13;overflow:visible}.is-editing .native-element{touch-action:none}.is-editing .native-element:hover{outline-color:#8570ee}.is-editing .native-element.is-selected{outline:1.5px solid #7761e5;outline-offset:0}.is-editing .native-element .native-copy{cursor:move}.is-editing .native-copy[contenteditable=plaintext-only]{cursor:text;user-select:text}.native-element .resize-handle{position:absolute;right:-5px;bottom:-5px;width:9px;height:9px;background:#fff;border:1.5px solid #7761e5;padding:0;border-radius:1px;cursor:nwse-resize;z-index:10}.native-element .rotate-handle{position:absolute;left:calc(50% - 10px);top:-29px;width:20px;height:20px;border:1px solid #7761e5;background:#fff;color:#7761e5;padding:0;border-radius:50%;cursor:grab;font-size:14px;z-index:10}.workbench-properties section{padding:18px 16px;border-bottom:1px solid #eeeff2}.workbench-properties h3{margin:0 0 16px;font-size:12px;font-weight:600;display:flex;justify-content:space-between;gap:10px}.workbench-properties h3 span{font-size:9px;color:#9b9eaa;font-weight:400}.workbench-properties label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0;color:#737885;font-size:11px}.workbench-properties input,.workbench-properties select,.workbench-properties textarea{min-width:0;border:1px solid transparent;border-radius:5px;background:#f5f5f8;color:#353947;padding:8px;font:inherit}.workbench-properties input:focus,.workbench-properties textarea:focus,.workbench-properties select:focus{outline:1px solid #8170de;background:#fff}.workbench-properties input[type=color]{width:45px;height:30px;padding:3px}.workbench-properties input[type=range]{width:125px;padding:0;accent-color:#7761e5}.workbench-properties textarea{width:100%;resize:vertical;line-height:1.5}.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.property-grid label{margin:0;display:flex;background:#f5f5f8;border-radius:5px;padding-left:9px;white-space:nowrap;font-size:10px}.property-grid input{width:100%;padding:8px 4px}.property-actions{display:flex;gap:8px;margin-top:12px}.property-actions button{flex:1;background:#f6f5fa;border:1px solid #eeedf3}.property-hint{color:#969aa5;font-size:11px;line-height:2;margin:0}.workbench-properties fieldset{border:0;margin:0;padding:0;min-width:0}.workbench-properties fieldset:disabled{opacity:.5}.workbench-bottom{position:fixed;z-index:55;bottom:22px;left:calc(50% - 20px);transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid #e3e3eb;border-radius:12px;background:#fff;box-shadow:0 5px 20px #30364b14;font-size:11px}.workbench-bottom>span:not(.toolbar-divider){min-width:37px;text-align:center}.toolbar-divider{height:20px;width:1px;background:#e9e9ee;margin:0 4px}.workbench-bottom .active{color:#6857e8;background:#eeeaff}.decoration-solid{background:currentColor}.conflict-notice{position:fixed;z-index:80;left:50%;top:80px;transform:translateX(-50%);width:350px;max-width:90vw;background:#fff;padding:20px;border:1px solid #e4d6b3;border-radius:12px;box-shadow:0 8px 40px #0002;font-size:12px}.conflict-notice p{line-height:1.8;color:#737885}.is-editing .page-status{bottom:85px;background:#383545}.is-editing .native-image-fill,.is-editing .native-decoration{pointer-events:none}
-@media(max-width:1100px){.is-editing.native-layout-page{padding-left:0}.workbench-layers{display:none;box-shadow:8px 0 30px #0001}.workbench-layers.mobile-open{display:flex}.workbench-top .studio-mark span{display:none}.workbench-top input{width:160px}.save-indicator{font-size:10px}.workbench-bottom{left:calc((100% - 272px)/2)}}
-@media(max-width:760px){.is-editing.native-layout-page{padding-right:0}.workbench-properties{display:none;bottom:82px;box-shadow:-8px 0 30px #0001}.workbench-properties.mobile-open{display:block}.workbench-layers{bottom:82px}.workbench-top{gap:3px;padding:0 8px}.workbench-top input{width:110px;flex:1}.save-indicator{display:none}.workbench-top button{padding:7px;font-size:11px}.workbench-top .studio-mark{font-size:20px}.workbench-viewport{padding:28px 24px 100px}.workbench-bottom{left:50%}.canvas-caption{font-size:9px}}
+.is-editing.native-layout-page{height:100dvh;min-height:0;padding:58px 272px 0 232px;overflow:hidden;background:var(--background);color:var(--foreground-strong);font-family:Arial,"PingFang SC",sans-serif}
+.workbench-top{position:fixed;inset:0 0 auto;height:58px;z-index:60;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border);font-size:12px}.studio-mark{display:flex;align-items:center;gap:7px;font-weight:800;font-size:23px;color:var(--primary)}.studio-mark span{font-size:10px;letter-spacing:.1em;color:var(--foreground-strong)}.workbench-top input{border:0;background:transparent;font-size:13px;min-width:80px;width:240px;padding:8px}.save-indicator{margin-left:auto;color:var(--muted-foreground);font-size:11px;white-space:nowrap}.workbench-top button,.workbench-bottom button,.workbench-layers button,.workbench-properties button,.conflict-notice button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:6px;background:transparent;color:inherit;padding:8px;cursor:pointer;font:inherit}.workbench-top button:hover,.workbench-bottom button:hover,.workbench-layers button:hover,.workbench-properties button:hover{background:var(--selection)}.workbench-top button.primary{background:var(--primary);color:var(--primary-foreground);padding:9px 16px}.is-editing button:disabled{opacity:.35;cursor:default}.workbench-layers,.workbench-properties{position:fixed;top:58px;bottom:0;background:var(--surface);z-index:45;font-size:12px;overflow:auto}.workbench-layers{left:0;width:232px;border-right:1px solid var(--border);display:flex;flex-direction:column}.workbench-properties{right:0;width:272px;border-left:1px solid var(--border)}.panel-heading{height:53px;display:flex;align-items:center;gap:8px;padding:16px;border-bottom:1px solid var(--border);flex-shrink:0}.panel-heading span{margin-left:auto;font-size:10px;color:var(--muted-foreground);max-width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.insert-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:16px}.insert-tools button{background:var(--surface);border:1px solid var(--border);font-size:11px;padding:12px 5px}.insert-tools svg{width:16px;height:16px}.layers-caption{padding:12px 16px;color:var(--muted-foreground);font-size:10px;display:flex;justify-content:space-between}.layers-caption span{font-size:10px;color:var(--muted-foreground)}.layer-list{padding:0 8px;flex:1}.layer-row{display:flex;align-items:center;gap:0;border-radius:5px;margin:2px 0;min-height:37px}.layer-row.active{background:var(--selection);color:var(--primary)}.layer-row.muted{opacity:.5}.layer-row button{padding:6px 4px}.layer-row .layer-select{flex:1;justify-content:flex-start;gap:8px;min-width:0;padding:9px 7px}.layer-select span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.layer-select svg{flex-shrink:0}.workbench-tip{font-size:10px;line-height:1.9;color:var(--muted-foreground);padding:16px;border-top:1px solid var(--border);margin:20px 0 0}.workbench-viewport{height:100%;overflow:auto;padding:38px 48px 100px;background-image:radial-gradient(var(--grid) .7px,transparent .7px);background-size:14px 14px;display:flex;flex-direction:column;align-items:center}.canvas-caption{display:flex;justify-content:space-between;width:100%;font-size:10px;color:var(--muted-foreground);margin-bottom:12px;gap:24px;max-width:860px}.is-editing .native-layout{flex-shrink:0;box-shadow:0 10px 35px #20232b13;overflow:visible}.is-editing .native-element{touch-action:none}.is-editing .native-element:hover{outline-color:var(--ring)}.is-editing .native-element.is-selected{outline:1.5px solid var(--ring);outline-offset:0}.is-editing .native-element .native-copy{cursor:move}.is-editing .native-copy[contenteditable=plaintext-only]{cursor:text;user-select:text}.native-element .resize-handle{position:absolute;right:-5px;bottom:-5px;width:9px;height:9px;background:var(--surface);border:1.5px solid var(--selection-border);padding:0;border-radius:1px;cursor:nwse-resize;z-index:10}.native-element .rotate-handle{position:absolute;left:calc(50% - 10px);top:-29px;width:20px;height:20px;border:1px solid var(--selection-border);background:var(--surface);color:var(--primary);padding:0;border-radius:50%;cursor:grab;font-size:14px;z-index:10}.workbench-properties section{padding:18px 16px;border-bottom:1px solid var(--border)}.workbench-properties h3{margin:0 0 16px;font-size:12px;font-weight:600;display:flex;justify-content:space-between;gap:10px}.workbench-properties h3 span{font-size:9px;color:var(--muted-foreground);font-weight:400}.workbench-properties label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0;color:var(--muted-foreground);font-size:11px}.workbench-properties input,.workbench-properties select,.workbench-properties textarea{min-width:0;border:1px solid transparent;border-radius:5px;background:var(--surface);color:var(--foreground-strong);padding:8px;font:inherit}.workbench-properties input:focus,.workbench-properties textarea:focus,.workbench-properties select:focus{outline:1px solid var(--ring);background:var(--surface)}.workbench-properties input[type=color]{width:45px;height:30px;padding:3px}.workbench-properties input[type=range]{width:125px;padding:0;accent-color:var(--ring)}.workbench-properties textarea{width:100%;resize:vertical;line-height:1.5}.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.property-grid label{margin:0;display:flex;background:var(--surface);border-radius:5px;padding-left:9px;white-space:nowrap;font-size:10px}.property-grid input{width:100%;padding:8px 4px}.property-actions{display:flex;gap:8px;margin-top:12px}.property-actions button{flex:1;background:var(--selection);border:1px solid var(--border)}.property-hint{color:var(--muted-foreground);font-size:11px;line-height:2;margin:0}.workbench-properties fieldset{border:0;margin:0;padding:0;min-width:0}.workbench-properties fieldset:disabled{opacity:.5}.workbench-bottom{position:fixed;z-index:55;bottom:22px;left:calc(50% - 20px);transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 5px 20px var(--shadow);font-size:11px}.workbench-bottom>span:not(.toolbar-divider){min-width:37px;text-align:center}.toolbar-divider{height:20px;width:1px;background:var(--surface-muted);margin:0 4px}.workbench-bottom .active{color:var(--primary);background:var(--selection)}.decoration-solid{background:currentColor}.conflict-notice{position:fixed;z-index:80;left:50%;top:80px;transform:translateX(-50%);width:350px;max-width:90vw;background:var(--surface);padding:20px;border:1px solid var(--success);border-radius:12px;box-shadow:0 8px 40px var(--shadow);font-size:12px}.conflict-notice p{line-height:1.8;color:var(--muted-foreground)}.is-editing .page-status{bottom:85px;background:var(--primary);color:var(--primary-foreground)}.is-editing .native-image-fill,.is-editing .native-decoration{pointer-events:none}
+@media(max-width:1100px){.is-editing.native-layout-page{padding-left:0}.workbench-layers{display:none;box-shadow:8px 0 30px var(--shadow)}.workbench-layers.mobile-open{display:flex}.workbench-top .studio-mark span{display:none}.workbench-top input{width:160px}.save-indicator{font-size:10px}.workbench-bottom{left:calc((100% - 272px)/2)}}
+@media(max-width:760px){.is-editing.native-layout-page{padding-right:0}.workbench-properties{display:none;bottom:82px;box-shadow:-8px 0 30px var(--shadow)}.workbench-properties.mobile-open{display:block}.workbench-layers{bottom:82px}.workbench-top{gap:3px;padding:0 8px}.workbench-top input{width:110px;flex:1}.save-indicator{display:none}.workbench-top button{padding:7px;font-size:11px}.workbench-top .studio-mark{font-size:20px}.workbench-viewport{padding:28px 24px 100px}.workbench-bottom{left:50%}.canvas-caption{font-size:9px}}
 @media print{.workbench-top,.workbench-layers,.workbench-properties,.workbench-bottom,.canvas-caption,.conflict-notice{display:none!important}.is-editing.native-layout-page{height:auto;padding:0;overflow:visible}.workbench-viewport{display:block;padding:0;overflow:visible}.is-editing .native-layout{width:100%!important;min-width:0!important;box-shadow:none;overflow:hidden}.resize-handle,.rotate-handle{display:none}}
 .workbench-layers,.workbench-properties{padding:0}.workbench-top{flex-wrap:nowrap}.workbench-top a:first-child{margin-right:0}
 
@@ -79,7 +81,7 @@
 .ref-04 .native-copy,.ref-20 .native-copy{font-weight:350;letter-spacing:.08em}
 .ref-16 .native-copy,.ref-23 .native-copy{font-weight:600;letter-spacing:.035em}
 .ref-21 .direction-rotated,.ref-24 .direction-angled,.ref-26 .native-text[data-element=T01] .native-copy,.ref-26 .native-text[data-element=T02] .native-copy,.ref-26 .native-text[data-element=T03] .native-copy{font-family:Georgia,"Songti SC",serif;font-weight:400;letter-spacing:-.055em}
-.studio-library{max-width:1440px;margin:auto;padding:48px 5vw 80px}.library-nav{display:flex;justify-content:space-between;font-size:13px}.studio-library h1{font-size:clamp(32px,5vw,64px);letter-spacing:-.05em;margin:64px 0 16px}.library-intro{max-width:640px;line-height:1.8;color:#69716e}.library-heading{margin:64px 0 24px;display:flex;align-items:baseline;gap:18px}.library-heading h2{margin:0;font-size:24px}.library-heading a{font-size:13px;text-decoration:underline}.library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}.library-item{min-width:0}.library-item .native-layout{width:100%;pointer-events:none}.library-item h3{font-size:13px;font-weight:500;margin:14px 0 5px}.library-item p{font-size:11px;color:#7b837e;margin:0}.library-item>a:focus-visible{outline:2px solid #48786a;outline-offset:5px}.library-standard{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:40px;align-items:center}.library-standard p{max-width:480px;line-height:1.9;color:#69716e}.library-standard code{font-size:13px}.library-standard a{text-decoration:underline}.library-item:hover .native-layout{filter:brightness(1.025)}
+.studio-library{max-width:1440px;margin:auto;padding:48px 5vw 80px}.library-nav{display:flex;justify-content:space-between;font-size:13px}.studio-library h1{font-size:clamp(32px,5vw,64px);letter-spacing:-.05em;margin:64px 0 16px}.library-intro{max-width:640px;line-height:1.8;color:var(--muted-foreground)}.library-heading{margin:64px 0 24px;display:flex;align-items:baseline;gap:18px}.library-heading h2{margin:0;font-size:24px}.library-heading a{font-size:13px;text-decoration:underline}.library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}.library-item{min-width:0}.library-item .native-layout{width:100%;pointer-events:none}.library-item h3{font-size:13px;font-weight:500;margin:14px 0 5px}.library-item p{font-size:11px;color:var(--muted-foreground);margin:0}.library-item>a:focus-visible{outline:2px solid var(--ring);outline-offset:5px}.library-standard{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:40px;align-items:center}.library-standard p{max-width:480px;line-height:1.9;color:var(--muted-foreground)}.library-standard code{font-size:13px}.library-standard a{text-decoration:underline}.library-item:hover .native-layout{filter:brightness(1.025)}
 @media(max-width:950px){.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:650px){.library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}.library-standard{grid-template-columns:1fr}.library-standard .native-layout{max-width:280px}.studio-library{padding:28px 20px 60px}.library-nav{gap:12px}}
 
 /* Keep the cross-axis line box inside narrow vertical title slots. */
@@ -88,6 +90,6 @@
 .ref-19 .native-text:is([data-element=T01],[data-element=T02],[data-element=T03],[data-element=T04]) .native-copy{font-weight:700;letter-spacing:-.06em}
 
 /* Saved series contain artwork and page order only. Export lays out at final pixels. */
-.native-series{padding-top:24px}.series-page{margin:0 auto 32px}.series-page-number{text-align:center;font-size:12px;letter-spacing:.14em;color:#68716b;margin:14px 0 0}
+.native-series{padding-top:24px}.series-page{margin:0 auto 32px}.series-page-number{text-align:center;font-size:12px;letter-spacing:.14em;color:var(--muted-foreground);margin:14px 0 0}
 .native-export{padding:0;background:transparent;min-height:0}.native-export .series-page{margin:0}.native-export .native-layout{width:1080px;max-width:none;margin:0}
 @media print{.native-series{padding:0}.series-page{margin:0;break-after:page}.series-page:last-child{break-after:auto}.series-page-number{display:none}}
diff --git a/apps/studio/src/styles/graphic.module.css b/apps/studio/src/styles/graphic.module.css
index 2c1f0bf..1fb7265 100644
--- a/apps/studio/src/styles/graphic.module.css
+++ b/apps/studio/src/styles/graphic.module.css
@@ -1,7 +1,16 @@
-.app{height:100dvh;min-height:580px;overflow:hidden;background:#f4f5f8;color:#30313b;font-family:Inter,-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;font-size:12px}.app button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid transparent;border-radius:7px;padding:8px;color:inherit;font:inherit;cursor:pointer}.app button:hover{background:#f0f0f6}.app button:disabled{opacity:.35;cursor:default}.app button:focus-visible,.app a:focus-visible{outline:2px solid #7762ed;outline-offset:2px}.app input,.app textarea{font:inherit;color:inherit;outline:none}.app input:focus,.app textarea:focus{border-color:#7a67ed!important}.top{height:64px;padding:0 20px;gap:14px;border-bottom:1px solid #e5e6ec;background:white;display:flex;white-space:nowrap}.top a:first-child{margin:0}.brand{font-size:20px;font-weight:650;display:flex;align-items:center;gap:9px;letter-spacing:-.6px}.brand>span:first-child{font-size:30px;color:#7160dc}.badge{font-size:9px;letter-spacing:1px;font-weight:500;margin-left:8px;color:#9696a6}.top>input{border:0;background:transparent;width:180px;padding:8px}.saved{margin-left:auto;font-size:11px;color:#9596a2}.saved:before{content:'●';color:#79a593;margin-right:7px}.app .primary{background:#7160df;color:white;padding:10px 15px}.app .primary:hover{background:#5c49c7}.account{max-width:160px;overflow:hidden;text-overflow:ellipsis}.body{display:grid;grid-template-columns:240px minmax(240px,1fr) 264px;height:calc(100% - 64px)}.left,.right{padding:0;background:#fff;border-right:1px solid #e4e5eb;display:flex;flex-direction:column;overflow:auto}.right{border-right:0;border-left:1px solid #e4e5eb}.tabs{display:flex;gap:5px;padding:16px;border-bottom:1px solid #ededf2}.tabs button{padding:7px 13px;color:#9596a3}.tabs button[aria-pressed=true]{color:#40364f;background:#f0eef9;font-weight:600}.pageTitle{display:flex;justify-content:space-between;padding:24px 20px 18px;font-size:11px}.pageTitle span:last-child{color:#a0a0ac;font-size:10px}.layers{flex:1}.layer{display:flex;margin:2px 8px;border-radius:6px}.layer[data-selected=true]{background:#edeafb;color:#6a51cf}.layer>button:first-child{flex:1;min-width:0;justify-content:start;padding:11px 8px}.layer span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer>button{padding:5px}.emptyLayers{text-align:center;padding:55px 10px;color:#9494a4}.emptyLayers>svg{margin:auto;color:#b0abbe}.emptyLayers p{margin-top:18px;font-size:12px}.emptyLayers small{font-size:10px;color:#aaaab7}.app .addLayer{margin:16px;border:1px dashed #dbd9e6;color:#8c889e}.leftFooter{margin-top:auto;padding:20px;border-top:1px solid #ededf2}.leftFooter a{display:flex;justify-content:space-between;font-size:11px}.leftFooter small{display:block;color:#a0a0ad;font-size:9px;margin-top:17px}.assets{padding:18px}.assets h3{font-size:12px;margin-bottom:20px}.assets button{border:1px solid #eeeef4;width:calc(50% - 8px);margin:4px;flex-direction:column;padding:18px 5px;gap:12px}.assets p{color:#999;line-height:1.8;margin-top:24px;font-size:11px}.viewport{position:relative;overflow:auto;display:flex;align-items:center;flex-direction:column;padding:38px 48px 100px;background-image:radial-gradient(#d8dae4 .7px,transparent .7px);background-size:16px 16px}.canvasLabel{width:100%;max-width:650px;color:#888a9b;font-size:10px;display:flex;justify-content:space-between;margin-bottom:14px}.boardWrap{flex-shrink:0;position:relative;margin:auto;box-shadow:0 8px 55px #292b4210,0 0 0 1px #e7e7ed}.board{position:relative;width:800px;height:1000px;transform-origin:top left;isolation:isolate}.element{position:absolute;touch-action:none;cursor:move;line-height:1.3;overflow:visible;outline:none;user-select:none}.element>img{width:100%;height:100%;object-fit:cover;pointer-events:none}.element[data-selected=true]{outline:2px solid #8b6ff1;z-index:1}.corner{position:absolute;width:9px;height:9px;border:2px solid #8b6ff1;background:white;right:-5px;bottom:-5px}.measure{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);font-size:13px;background:#8264e3;padding:4px 8px;color:white;white-space:nowrap;border-radius:4px}.blankHint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#b2afbe;pointer-events:none}.blankHint h1{font-weight:400;font-size:27px;letter-spacing:2px;margin:30px 0 5px}.blankHint p{font-size:15px;color:#c0bec9}.blankHint button{pointer-events:auto;margin-top:25px;font-size:15px;color:#8678b3}.tools{position:fixed;bottom:28px;left:calc(50% - 12px);transform:translateX(-50%);display:flex;align-items:center;gap:3px;background:white;border:1px solid #e4e3ec;border-radius:14px;box-shadow:0 8px 30px #34324b12;padding:8px;z-index:5}.tools button{width:35px;height:36px}.tools button:first-child{background:#edeafa;color:#7560d7}.tools span{height:20px;border-left:1px solid #e8e7ee;margin:0 7px}.tools output{width:36px;text-align:center;font-size:11px}.inspectorTitle{display:flex;justify-content:space-between;padding:24px 20px;border-bottom:1px solid #ededf2;font-weight:600}.inspectorTitle span{font-size:10px;color:#a4a3ae;font-weight:400}.props{padding:22px 20px}.props h3{font-size:11px;margin:6px 0 17px}.props h3:not(:first-child){margin-top:28px}.props p{font-size:11px;color:#9694a2}.dimensions{display:flex;gap:18px;background:#f7f7fa;border-radius:6px;padding:12px;font-size:10px;color:#a09ba9;margin:18px 0 28px}.dimensions b{font-weight:400;color:#5d596b}.props label,.modal label{display:flex;flex-direction:column;gap:9px;font-size:11px;color:#7d788b}.props input:not([type=color]),.props textarea,.modal input{width:100%;padding:9px 10px;border:1px solid #e8e6ed;border-radius:6px;background:#fafafd}.props textarea{height:100px;resize:vertical;margin-bottom:18px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.props .color{display:flex;flex-direction:row;align-items:center;border:1px solid #e8e6ed;border-radius:6px;padding:6px 10px;font-size:10px}.color input{width:25px;height:25px;padding:0;border:0;background:none;margin-right:10px}.note{margin-top:45px;padding:30px 0;text-align:center;color:#aaa6b8;border-top:1px solid #eee}.note svg{margin:auto}.note p{line-height:1.9}.actions{display:flex;gap:8px;margin:25px 0}.actions button{border:1px solid #eee!important;flex:1}.rightFooter{margin-top:auto;padding:20px;border-top:1px solid #eee}.rightFooter button{font-size:11px}.rightFooter p{font-size:10px;color:#aaa6b3;line-height:1.8}.overlay{position:fixed;inset:0;background:#24213566;backdrop-filter:blur(5px);display:grid;place-items:center;z-index:20}.modal{background:white;width:min(440px,calc(100% - 32px));padding:38px;border-radius:18px;position:relative;box-shadow:0 20px 100px #15112633}.modal h2{font-size:25px;margin:18px 0 10px;letter-spacing:-.7px}.modal p{color:#8c879a;line-height:1.8}.modalIcon{color:#7860de;font-size:38px}.app .close{position:absolute;right:16px;top:16px}.modal .tabs{padding:14px 0;margin-bottom:22px}.modal form{display:grid;gap:18px}.modal small{font-size:10px;color:#9e97ae}.modal .primary{width:100%}@media(max-width:1100px){.body{grid-template-columns:190px minmax(200px,1fr) 220px}.saved,.badge{display:none}.top{gap:8px}.top>input{width:140px}.viewport{padding-left:25px;padding-right:25px}.tools{left:calc(50% - 15px)}}@media(max-width:760px){.body{grid-template-columns:1fr 200px}.left{display:none}.top{padding:0 10px}.top>input{width:110px}.brand{font-size:16px}.account{max-width:95px}.tools{left:calc(50% - 100px);gap:0;max-width:calc(100vw - 210px);flex-wrap:wrap;justify-content:center}.viewport{padding:25px 20px 120px}.top>svg,.top>button[title]{display:none}}@media(max-width:480px){.body{grid-template-columns:1fr}.right{display:none}.tools{left:50%;max-width:none;width:max-content}.top>input{width:85px}.top .primary{font-size:10px;padding:8px}.account{font-size:10px!important}.brand>span:first-child{font-size:24px}}
+.app{height:100dvh;min-height:580px;overflow:hidden;background:var(--selection);color:var(--foreground-strong);font-family:Inter,-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;font-size:12px}.app button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid transparent;border-radius:7px;padding:8px;color:inherit;font:inherit;cursor:pointer}.app button:hover{background:var(--selection)}.app button:disabled{opacity:.35;cursor:default}.app button:focus-visible,.app a:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.app input,.app textarea{font:inherit;color:inherit;outline:none}.app input:focus,.app textarea:focus{border-color:var(--selection-border)!important}.top{height:64px;padding:0 20px;gap:14px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;white-space:nowrap}.top a:first-child{margin:0}.brand{font-size:20px;font-weight:650;display:flex;align-items:center;gap:9px;letter-spacing:-.6px}.brand>span:first-child{font-size:30px;color:var(--primary)}.badge{font-size:9px;letter-spacing:1px;font-weight:500;margin-left:8px;color:var(--muted-foreground)}.top>input{border:0;background:transparent;width:180px;padding:8px}.saved{margin-left:auto;font-size:11px;color:var(--muted-foreground)}.saved:before{content:'●';color:var(--muted-foreground);margin-right:7px}.app .primary{background:var(--primary);color:var(--primary-foreground);padding:10px 15px}.app .primary:hover{background:var(--primary-hover)}.account{max-width:160px;overflow:hidden;text-overflow:ellipsis}.body{display:grid;grid-template-columns:240px minmax(240px,1fr) 264px;height:calc(100% - 64px)}.left,.right{padding:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:auto}.right{border-right:0;border-left:1px solid var(--border)}.tabs{display:flex;gap:5px;padding:16px;border-bottom:1px solid var(--border)}.tabs button{padding:7px 13px;color:var(--muted-foreground)}.tabs button[aria-pressed=true]{color:var(--foreground);background:var(--selection);font-weight:600}.pageTitle{display:flex;justify-content:space-between;padding:24px 20px 18px;font-size:11px}.pageTitle span:last-child{color:var(--muted-foreground);font-size:10px}.layers{flex:1}.layer{display:flex;margin:2px 8px;border-radius:6px}.layer[data-selected=true]{background:var(--selection);color:var(--primary)}.layer>button:first-child{flex:1;min-width:0;justify-content:start;padding:11px 8px}.layer span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer>button{padding:5px}.emptyLayers{text-align:center;padding:55px 10px;color:var(--muted-foreground)}.emptyLayers>svg{margin:auto;color:var(--muted-foreground)}.emptyLayers p{margin-top:18px;font-size:12px}.emptyLayers small{font-size:10px;color:var(--muted-foreground)}.app .addLayer{margin:16px;border:1px dashed var(--selection-border);color:var(--muted-foreground)}.leftFooter{margin-top:auto;padding:20px;border-top:1px solid var(--border)}.leftFooter a{display:flex;justify-content:space-between;font-size:11px}.leftFooter small{display:block;color:var(--muted-foreground);font-size:9px;margin-top:17px}.assets{padding:18px}.assets h3{font-size:12px;margin-bottom:20px}.assets button{border:1px solid var(--selection-border);width:calc(50% - 8px);margin:4px;flex-direction:column;padding:18px 5px;gap:12px}.assets p{color:var(--muted-foreground);line-height:1.8;margin-top:24px;font-size:11px}.viewport{position:relative;overflow:auto;display:flex;align-items:center;flex-direction:column;padding:38px 48px 100px;background-image:radial-gradient(var(--background) .7px,transparent .7px);background-size:16px 16px}.canvasLabel{width:100%;max-width:650px;color:var(--muted-foreground);font-size:10px;display:flex;justify-content:space-between;margin-bottom:14px}.boardWrap{flex-shrink:0;position:relative;margin:auto;box-shadow:0 8px 55px var(--shadow),0 0 0 1px var(--shadow)}.board{position:relative;width:800px;height:1000px;transform-origin:top left;isolation:isolate}.element{position:absolute;touch-action:none;cursor:move;line-height:1.3;overflow:visible;outline:none;user-select:none}.element>img{width:100%;height:100%;object-fit:cover;pointer-events:none}.element[data-selected=true]{outline:2px solid var(--ring);z-index:1}.corner{position:absolute;width:9px;height:9px;border:2px solid var(--selection-border);background:var(--surface);right:-5px;bottom:-5px}.measure{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);font-size:13px;background:var(--primary);padding:4px 8px;color:var(--primary-foreground);white-space:nowrap;border-radius:4px}.blankHint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted-foreground);pointer-events:none}.blankHint h1{font-weight:400;font-size:27px;letter-spacing:2px;margin:30px 0 5px}.blankHint p{font-size:15px;color:var(--muted-foreground)}.blankHint button{pointer-events:auto;margin-top:25px;font-size:15px;color:var(--primary)}.tools{position:fixed;bottom:28px;left:calc(50% - 12px);transform:translateX(-50%);display:flex;align-items:center;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 30px var(--shadow);padding:8px;z-index:5}.tools button{width:35px;height:36px}.tools button:first-child{background:var(--selection);color:var(--primary)}.tools span{height:20px;border-left:1px solid var(--border);margin:0 7px}.tools output{width:36px;text-align:center;font-size:11px}.inspectorTitle{display:flex;justify-content:space-between;padding:24px 20px;border-bottom:1px solid var(--border);font-weight:600}.inspectorTitle span{font-size:10px;color:var(--muted-foreground);font-weight:400}.props{padding:22px 20px}.props h3{font-size:11px;margin:6px 0 17px}.props h3:not(:first-child){margin-top:28px}.props p{font-size:11px;color:var(--muted-foreground)}.dimensions{display:flex;gap:18px;background:var(--selection);border-radius:6px;padding:12px;font-size:10px;color:var(--muted-foreground);margin:18px 0 28px}.dimensions b{font-weight:400;color:var(--foreground)}.props label,.modal label{display:flex;flex-direction:column;gap:9px;font-size:11px;color:var(--muted-foreground)}.props input:not([type=color]),.props textarea,.modal input{width:100%;padding:9px 10px;border:1px solid var(--input);border-radius:6px;background:var(--selection)}.props textarea{height:100px;resize:vertical;margin-bottom:18px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.props .color{display:flex;flex-direction:row;align-items:center;border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:10px}.color input{width:25px;height:25px;padding:0;border:0;background:none;margin-right:10px}.note{margin-top:45px;padding:30px 0;text-align:center;color:var(--muted-foreground);border-top:1px solid var(--border)}.note svg{margin:auto}.note p{line-height:1.9}.actions{display:flex;gap:8px;margin:25px 0}.actions button{border:1px solid var(--border)!important;flex:1}.rightFooter{margin-top:auto;padding:20px;border-top:1px solid var(--border)}.rightFooter button{font-size:11px}.rightFooter p{font-size:10px;color:var(--muted-foreground);line-height:1.8}.overlay{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(5px);display:grid;place-items:center;z-index:20}.modal{background:var(--surface);width:min(440px,calc(100% - 32px));padding:38px;border-radius:18px;position:relative;box-shadow:0 20px 100px var(--shadow)}.modal h2{font-size:25px;margin:18px 0 10px;letter-spacing:-.7px}.modal p{color:var(--muted-foreground);line-height:1.8}.modalIcon{color:var(--primary);font-size:38px}.app .close{position:absolute;right:16px;top:16px}.modal .tabs{padding:14px 0;margin-bottom:22px}.modal form{display:grid;gap:18px}.modal small{font-size:10px;color:var(--muted-foreground)}.modal .primary{width:100%}@media(max-width:1100px){.body{grid-template-columns:190px minmax(200px,1fr) 220px}.saved,.badge{display:none}.top{gap:8px}.top>input{width:140px}.viewport{padding-left:25px;padding-right:25px}.tools{left:calc(50% - 15px)}}@media(max-width:760px){.body{grid-template-columns:1fr 200px}.left{display:none}.top{padding:0 10px}.top>input{width:110px}.brand{font-size:16px}.account{max-width:95px}.tools{left:calc(50% - 100px);gap:0;max-width:calc(100vw - 210px);flex-wrap:wrap;justify-content:center}.viewport{padding:25px 20px 120px}.top>svg,.top>button[title]{display:none}}@media(max-width:480px){.body{grid-template-columns:1fr}.right{display:none}.tools{left:50%;max-width:none;width:max-content}.top>input{width:85px}.top .primary{font-size:10px;padding:8px}.account{font-size:10px!important}.brand>span:first-child{font-size:24px}}
 
 /* Compact design chrome, with a neutral stage and contextual selection. */
-.app{background:#e5e5e5;color:#303030}.top{height:52px;border-color:#e5e5e5;padding:0 16px;gap:12px}.body{height:calc(100% - 52px);grid-template-columns:248px minmax(240px,1fr) 264px}.brand>span:first-child{color:#1685e8}.app .primary{background:#1685e8}.viewport{background:#e5e5e5;background-image:none;touch-action:none}.boardWrap{will-change:transform}.tabs{padding:10px;gap:4px}.tabs button{flex:1;padding:8px}.tabs button[aria-pressed=true]{background:#f0f0f0;color:#222}.canvasLabel{color:#888}.tools{bottom:16px;border-radius:13px;padding:7px;border-color:#ddd;box-shadow:0 3px 12px #0002}.tools button:first-child{background:transparent;color:inherit}.tools button[aria-pressed=true]{background:#1685e8;color:white}.element[data-selected=true]{outline-color:#1685e8}.corner{border-color:#1685e8;cursor:nwse-resize;width:11px;height:11px}.measure{background:#1685e8}.agentPanel{padding:30px 20px;display:flex;flex-direction:column;gap:18px}.agentPanel>svg{color:#1685e8}.agentPanel h3{font-size:15px;font-weight:500;margin:0}.agentPanel p,.agentPanel small{font-size:11px;line-height:1.9;color:#888}.agentPanel a{display:flex;gap:8px;align-items:center;font-size:12px;color:#1685e8}.agentPanel small{border-top:1px solid #eee;padding-top:20px}.layer[data-selected=true]{background:#e5f2ff}.pageTitle{border-bottom:1px solid #eee}.top .badge{color:#888}@media(max-width:1100px){.body{grid-template-columns:190px minmax(200px,1fr) 220px}}@media(max-width:760px){.body{grid-template-columns:1fr 200px}}@media(max-width:480px){.body{grid-template-columns:1fr}}
+.app{background:var(--surface-muted);color:var(--foreground-strong)}.top{height:52px;border-color:var(--border);padding:0 16px;gap:12px}.body{height:calc(100% - 52px);grid-template-columns:248px minmax(240px,1fr) 264px}.brand>span:first-child{color:var(--primary)}.app .primary{background:var(--primary);color:var(--primary-foreground)}.viewport{background:var(--background);background-image:none;touch-action:none}.boardWrap{will-change:transform}.tabs{padding:10px;gap:4px}.tabs button{flex:1;padding:8px}.tabs button[aria-pressed=true]{background:var(--selection);color:var(--foreground-strong)}.canvasLabel{color:var(--muted-foreground)}.tools{bottom:16px;border-radius:13px;padding:7px;border-color:var(--border);box-shadow:0 3px 12px var(--shadow)}.tools button:first-child{background:transparent;color:inherit}.tools button[aria-pressed=true]{background:var(--selection);color:var(--foreground)}.element[data-selected=true]{outline-color:var(--ring)}.corner{border-color:var(--selection-border);cursor:nwse-resize;width:11px;height:11px}.measure{background:var(--primary);color:var(--primary-foreground)}.agentPanel{padding:30px 20px;display:flex;flex-direction:column;gap:18px}.agentPanel>svg{color:var(--primary)}.agentPanel h3{font-size:15px;font-weight:500;margin:0}.agentPanel p,.agentPanel small{font-size:11px;line-height:1.9;color:var(--muted-foreground)}.agentPanel a{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--primary)}.agentPanel small{border-top:1px solid var(--border);padding-top:20px}.layer[data-selected=true]{background:var(--selection)}.pageTitle{border-bottom:1px solid var(--border)}.top .badge{color:var(--muted-foreground)}@media(max-width:1100px){.body{grid-template-columns:190px minmax(200px,1fr) 220px}}@media(max-width:760px){.body{grid-template-columns:1fr 200px}}@media(max-width:480px){.body{grid-template-columns:1fr}}
 
 .app[data-layers=false] .left,.app[data-properties=false] .right{display:none}.app[data-layers=false] .body{grid-template-columns:minmax(240px,1fr) 264px}.app[data-properties=false] .body{grid-template-columns:248px minmax(240px,1fr)}.app[data-layers=false][data-properties=false] .body{grid-template-columns:1fr}.app[data-layers=false] .tools{left:calc((100% - 264px)/2)}.app[data-properties=false] .tools{left:calc(248px + (100% - 248px)/2)}.app[data-layers=false][data-properties=false] .tools{left:50%}@media(max-width:1100px){.app[data-layers=false] .body{grid-template-columns:minmax(200px,1fr) 220px}.app[data-properties=false] .body{grid-template-columns:190px minmax(200px,1fr)}.app[data-layers=false] .tools{left:calc((100% - 220px)/2)}.app[data-properties=false] .tools{left:calc(190px + (100% - 190px)/2)}}@media(max-width:760px){.app[data-layers=false] .body{grid-template-columns:1fr 200px}.app[data-properties=false] .body{grid-template-columns:1fr}.app[data-properties=false] .tools{left:50%;max-width:calc(100vw - 20px)}}@media(max-width:480px){.app[data-layers=false] .body{grid-template-columns:1fr}.app[data-layers=false] .tools{left:50%}}
 @media(max-width:480px){.tools{max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center}.top{gap:3px}.top>input{width:60px;min-width:0;flex:1}.brand{gap:4px}.account{max-width:55px}.top>button{padding:5px}.top .primary{padding:6px;font-size:9px;gap:4px}}
+
+.app,.viewport{background:var(--background);color:var(--foreground)}
+.top,.left,.right,.tools,.modal{background:var(--surface);color:var(--foreground);border-color:var(--border)}
+.app .primary,.tools button[aria-pressed=true]{background:var(--primary);color:var(--primary-foreground)}
+.app .primary:hover{background:var(--primary-hover)}
+.layer[data-selected=true],.tabs button[aria-pressed=true]{background:var(--selection);color:var(--foreground)}
+.element[data-selected=true],.corner{outline-color:var(--selection-border);border-color:var(--selection-border)}
+/* The artwork board is deliberately independent of dark UI chrome. */
+.blankHint{color:#49372E}
diff --git a/apps/studio/src/styles/infinite-canvas.module.css b/apps/studio/src/styles/infinite-canvas.module.css
index 53f48a8..b9759b4 100644
--- a/apps/studio/src/styles/infinite-canvas.module.css
+++ b/apps/studio/src/styles/infinite-canvas.module.css
@@ -1,13 +1,22 @@
-.app{height:100dvh;min-height:640px;background:#141618;color:#e6e7e8;font-family:Arial,'PingFang SC',sans-serif;font-size:13px;overflow:hidden}.app *{box-sizing:border-box}.app button,.app input,.app textarea,.app select{font:inherit}.app button,.app a{color:inherit}.app button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #35383c;background:#25282b;border-radius:7px;cursor:pointer;padding:9px 12px}.app button:hover{background:#34393c}.app button:disabled{opacity:.35;cursor:default}.app button:focus-visible,.app a:focus-visible{outline:2px solid #dcf391;outline-offset:3px}.header{height:70px;display:flex;align-items:center;padding:0 24px;gap:16px;border-bottom:1px solid #303236;background:#1a1c1f}.header a{text-decoration:none}.header i,.controls i{height:22px;width:1px;background:#393c40}.brand{font-size:19px;font-weight:800;letter-spacing:2px}.brand span{color:#e0f3a0;margin-left:6px}.back{display:flex}.crumb{display:flex;align-items:center;gap:10px;color:#898e94}.badge{font-size:10px;padding:4px 7px;background:#292d31;color:#a0a6ac;border-radius:4px}.spacer{flex:1}.header .export{background:#d9ef9b;color:#263019;border:0}.workspace{display:flex;height:calc(100% - 70px)}.rail{width:72px;flex-shrink:0;border-right:1px solid #303236;background:#1a1c1f;display:flex;align-items:center;gap:12px;flex-direction:column;padding:26px 0 18px}.rail button{width:42px;height:42px;background:transparent;border:0;padding:10px;color:#999fa5}.rail button[aria-pressed=true]{background:#d9ef9b;color:#24301d}.rail svg{width:19px}.rail hr{width:28px;border:0;border-top:1px solid #373a3d;margin:5px}.rail>span{font-size:30px;color:#aab095}.canvasArea{flex:1;min-width:0;position:relative;background-image:radial-gradient(#35383b .7px,transparent .7px);background-size:22px 22px}.canvasTitle{position:absolute;top:32px;left:34px;pointer-events:none;z-index:2}.eyebrow{font-size:9px;letter-spacing:2px;color:#9ba58a}.canvasTitle h1{font-size:22px;letter-spacing:.3px;margin:10px 0}.canvasTitle h1 span{color:#737a80;font-size:13px;font-weight:400}.canvasTitle p{color:#757d83;margin:0}.viewport{position:absolute;inset:120px 0 64px;overflow:hidden;touch-action:none}.world{position:absolute;transform-origin:0 0;pointer-events:none}.wires{position:absolute;left:-10000px;top:-10000px;width:20000px;height:20000px;overflow:visible}.wires path{transform:translate(10000px,10000px);fill:none;stroke:#a7bb76;stroke-width:2;opacity:.6}.card{position:absolute;width:320px;background:#222629;border:1px solid #42484d;border-radius:12px;pointer-events:auto;box-shadow:0 12px 32px #0003;overflow:visible}.selected{border-color:#d9ef9b;box-shadow:0 0 0 3px #d9ef9b12,0 12px 32px #0004}.cardHead{height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#292d30;border-radius:12px 12px 0 0;cursor:grab;touch-action:none;color:#bac0c4}.cardHead>span:first-child{display:flex;align-items:center;gap:10px}.cardBody{padding:25px 22px 20px;min-height:205px}.nodeType{font-size:10px;color:#a4af89;letter-spacing:1px}.cardBody p{white-space:pre-wrap;font-size:15px;line-height:1.9;overflow-wrap:anywhere;color:#d0d3d4;margin:17px 0 0;max-height:210px;overflow:auto}.card footer{border-top:1px solid #363b3e;padding:13px 20px;color:#80898f;font-size:11px;position:relative}.port{position:absolute;width:10px;height:10px;background:#d9ef9b;right:-6px;top:14px;border-radius:50%;box-shadow:0 0 0 4px #1a1d20}.image{cursor:pointer;height:228px;position:relative;overflow:hidden}.image img{width:100%;height:100%;object-fit:contain}.landscape{height:100%;background:linear-gradient(115deg,transparent 48%,#dae7b344 49%,transparent 55%),linear-gradient(35deg,#33483b,#738273 45%,#d0c7a1);padding:27px;color:#eef0db;display:flex;flex-direction:column;justify-content:center}.landscape span{font-size:10px;letter-spacing:4px}.landscape b{font-size:32px;margin:12px 0;font-family:serif;font-weight:400}.landscape small{font-size:8px;letter-spacing:3px}.sample{position:absolute;bottom:12px;left:18px;font-size:10px;color:#faf8df;background:#18201b88;border-radius:5px;padding:5px 8px}.disconnected{font-size:11px;color:#acb59b;padding:0 20px 18px}.canvasBottom{position:absolute;bottom:22px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;gap:12px}.canvasBottom>span{font-size:10px;color:#818b80}.controls{display:flex;align-items:center;background:#24272a;border:1px solid #3a3e42;box-shadow:0 4px 20px #0004;border-radius:9px;padding:4px;gap:4px}.controls button{border:0;background:transparent;padding:8px}.controls>span{font-size:11px;width:38px;text-align:center}.inspector{width:290px;background:#1c1f22;border-left:1px solid #34383c;padding:0 22px 24px;overflow:auto;flex-shrink:0}.panelHeading{display:flex;align-items:center;gap:9px;height:66px;margin-bottom:26px;border-bottom:1px solid #34383c}.panelHeading>span{margin-left:auto;font-size:10px;color:#7e878d}.inspector h2{font-size:18px;margin:12px 0 27px;font-weight:500}.inspector label{display:block;color:#959ea4;font-size:11px;margin:20px 0 10px}.inspector input,.inspector textarea,.inspector select{display:block;width:100%;margin-top:10px;background:#141719;color:#d3d8db;border:1px solid #383f44;border-radius:7px;padding:12px;outline-color:#d9ef9b}.inspector textarea{height:155px;resize:vertical;line-height:1.8}.inspector select{font-size:11px}.wide{width:100%;margin-top:10px}.notice{border:1px solid #47523a;background:#29312455;padding:17px;border-radius:8px;margin-top:24px;color:#c7d4b4}.notice strong{display:block;font-size:12px;margin:12px 0}.notice p{font-size:11px;line-height:1.9;color:#929e8b;margin:0}.connection{width:100%;margin-top:9px;font-size:10px!important;justify-content:space-between!important}.connection span{color:#9aa488}.delete{margin-top:28px;color:#c9928b!important;background:transparent!important;border:0!important;padding-left:0!important}.help{margin-top:35px;padding-top:18px;border-top:1px solid #33393e;font-size:10px;line-height:2;color:#737e85}@media(min-width:1600px){.inspector{width:330px}.canvasTitle{top:45px}.viewport{top:150px}}@media(max-width:1000px){.inspector{width:240px;padding:0 15px 20px}.header{gap:10px;padding:0 15px}.crumb,.badge{display:none}.canvasTitle{left:20px}.canvasBottom{left:12px;right:12px}.canvasBottom>span{max-width:100px}}@media(max-width:700px){.app{height:auto;min-height:100dvh;overflow:auto}.header{height:60px}.header strong,.header>i,.header>a:not(.brand):not(.back){display:none}.brand{font-size:16px}.workspace{height:auto;flex-wrap:wrap}.rail{width:52px;height:640px;padding-top:20px;gap:7px}.rail button{width:37px;height:37px}.canvasArea{width:calc(100% - 52px);height:640px;flex:none}.canvasTitle h1{font-size:19px}.canvasTitle h1 span{display:block;font-size:11px;margin-top:8px}.canvasTitle p{font-size:11px}.canvasBottom{flex-direction:column;align-items:flex-start;bottom:15px}.canvasBottom>span{max-width:none}.inspector{width:100%;border-left:0;border-top:1px solid #34383c;padding:0 24px 24px}.panelHeading{margin-bottom:20px}.inspector textarea{height:120px}.help{margin-top:18px}}
+.app{height:100dvh;min-height:640px;background:var(--background);color:var(--foreground);font-family:Arial,'PingFang SC',sans-serif;font-size:13px;overflow:hidden}.app *{box-sizing:border-box}.app button,.app input,.app textarea,.app select{font:inherit}.app button,.app a{color:inherit}.app button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);background:var(--surface);border-radius:7px;cursor:pointer;padding:9px 12px}.app button:hover{background:var(--row-hover)}.app button:disabled{opacity:.35;cursor:default}.app button:focus-visible,.app a:focus-visible{outline:2px solid var(--ring);outline-offset:3px}.header{height:70px;display:flex;align-items:center;padding:0 24px;gap:16px;border-bottom:1px solid var(--border);background:var(--surface)}.header a{text-decoration:none}.header i,.controls i{height:22px;width:1px;background:var(--surface)}.brand{font-size:19px;font-weight:800;letter-spacing:2px}.brand span{color:var(--primary);margin-left:6px}.back{display:flex}.crumb{display:flex;align-items:center;gap:10px;color:var(--muted-foreground)}.badge{font-size:10px;padding:4px 7px;background:var(--surface);color:var(--muted-foreground);border-radius:4px}.spacer{flex:1}.header .export{background:var(--primary);color:var(--primary-foreground);border:0}.workspace{display:flex;height:calc(100% - 70px)}.rail{width:72px;flex-shrink:0;border-right:1px solid var(--border);background:var(--surface);display:flex;align-items:center;gap:12px;flex-direction:column;padding:26px 0 18px}.rail button{width:42px;height:42px;background:transparent;border:0;padding:10px;color:var(--muted-foreground)}.rail button[aria-pressed=true]{background:var(--selection);color:var(--primary)}.rail svg{width:19px}.rail hr{width:28px;border:0;border-top:1px solid var(--border);margin:5px}.rail>span{font-size:30px;color:var(--muted-foreground)}.canvasArea{flex:1;min-width:0;position:relative;background-image:radial-gradient(var(--grid) .7px,transparent .7px);background-size:22px 22px}.canvasTitle{position:absolute;top:32px;left:34px;pointer-events:none;z-index:2}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--muted-foreground)}.canvasTitle h1{font-size:22px;letter-spacing:.3px;margin:10px 0}.canvasTitle h1 span{color:var(--muted-foreground);font-size:13px;font-weight:400}.canvasTitle p{color:var(--muted-foreground);margin:0}.viewport{position:absolute;inset:120px 0 64px;overflow:hidden;touch-action:none}.world{position:absolute;transform-origin:0 0;pointer-events:none}.wires{position:absolute;left:-10000px;top:-10000px;width:20000px;height:20000px;overflow:visible}.wires path{transform:translate(10000px,10000px);fill:none;stroke:var(--connector);stroke-width:2;opacity:.6}.card{position:absolute;width:320px;background:var(--surface);border:1px solid var(--border);border-radius:12px;pointer-events:auto;box-shadow:0 12px 32px var(--shadow);overflow:visible}.selected{border-color:var(--selection-border);box-shadow:0 0 0 3px var(--shadow),0 12px 32px var(--shadow)}.cardHead{height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:var(--surface);border-radius:12px 12px 0 0;cursor:grab;touch-action:none;color:var(--muted-foreground)}.cardHead>span:first-child{display:flex;align-items:center;gap:10px}.cardBody{padding:25px 22px 20px;min-height:205px}.nodeType{font-size:10px;color:var(--muted-foreground);letter-spacing:1px}.cardBody p{white-space:pre-wrap;font-size:15px;line-height:1.9;overflow-wrap:anywhere;color:var(--foreground);margin:17px 0 0;max-height:210px;overflow:auto}.card footer{border-top:1px solid var(--border);padding:13px 20px;color:var(--muted-foreground);font-size:11px;position:relative}.port{position:absolute;width:10px;height:10px;background:var(--selection);right:-6px;top:14px;border-radius:50%;box-shadow:0 0 0 4px var(--shadow)}.image{cursor:pointer;height:228px;position:relative;overflow:hidden}.image img{width:100%;height:100%;object-fit:contain}.landscape{height:100%;background:linear-gradient(115deg,transparent 48%,#dae7b344 49%,transparent 55%),linear-gradient(35deg,#33483b,#738273 45%,#d0c7a1);padding:27px;color:#eef0db;display:flex;flex-direction:column;justify-content:center}.landscape span{font-size:10px;letter-spacing:4px}.landscape b{font-size:32px;margin:12px 0;font-family:serif;font-weight:400}.landscape small{font-size:8px;letter-spacing:3px}.sample{position:absolute;bottom:12px;left:18px;font-size:10px;color:#faf8df;background:#18201b88;border-radius:5px;padding:5px 8px}.disconnected{font-size:11px;color:var(--muted-foreground);padding:0 20px 18px}.canvasBottom{position:absolute;bottom:22px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;gap:12px}.canvasBottom>span{font-size:10px;color:var(--muted-foreground)}.controls{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);box-shadow:0 4px 20px var(--shadow);border-radius:9px;padding:4px;gap:4px}.controls button{border:0;background:transparent;padding:8px}.controls>span{font-size:11px;width:38px;text-align:center}.inspector{width:290px;background:var(--surface);border-left:1px solid var(--border);padding:0 22px 24px;overflow:auto;flex-shrink:0}.panelHeading{display:flex;align-items:center;gap:9px;height:66px;margin-bottom:26px;border-bottom:1px solid var(--border)}.panelHeading>span{margin-left:auto;font-size:10px;color:var(--muted-foreground)}.inspector h2{font-size:18px;margin:12px 0 27px;font-weight:500}.inspector label{display:block;color:var(--muted-foreground);font-size:11px;margin:20px 0 10px}.inspector input,.inspector textarea,.inspector select{display:block;width:100%;margin-top:10px;background:var(--surface);color:var(--foreground);border:1px solid var(--input);border-radius:7px;padding:12px;outline-color:var(--ring)}.inspector textarea{height:155px;resize:vertical;line-height:1.8}.inspector select{font-size:11px}.wide{width:100%;margin-top:10px}.notice{border:1px solid var(--success);background:var(--success-background);padding:17px;border-radius:8px;margin-top:24px;color:var(--success)}.notice strong{display:block;font-size:12px;margin:12px 0}.notice p{font-size:11px;line-height:1.9;color:var(--muted-foreground);margin:0}.connection{width:100%;margin-top:9px;font-size:10px!important;justify-content:space-between!important}.connection span{color:var(--muted-foreground)}.delete{margin-top:28px;color:var(--danger)!important;background:transparent!important;border:0!important;padding-left:0!important}.help{margin-top:35px;padding-top:18px;border-top:1px solid var(--border);font-size:10px;line-height:2;color:var(--muted-foreground)}@media(min-width:1600px){.inspector{width:330px}.canvasTitle{top:45px}.viewport{top:150px}}@media(max-width:1000px){.inspector{width:240px;padding:0 15px 20px}.header{gap:10px;padding:0 15px}.crumb,.badge{display:none}.canvasTitle{left:20px}.canvasBottom{left:12px;right:12px}.canvasBottom>span{max-width:100px}}@media(max-width:700px){.app{height:auto;min-height:100dvh;overflow:auto}.header{height:60px}.header strong,.header>i,.header>a:not(.brand):not(.back){display:none}.brand{font-size:16px}.workspace{height:auto;flex-wrap:wrap}.rail{width:52px;height:640px;padding-top:20px;gap:7px}.rail button{width:37px;height:37px}.canvasArea{width:calc(100% - 52px);height:640px;flex:none}.canvasTitle h1{font-size:19px}.canvasTitle h1 span{display:block;font-size:11px;margin-top:8px}.canvasTitle p{font-size:11px}.canvasBottom{flex-direction:column;align-items:flex-start;bottom:15px}.canvasBottom>span{max-width:none}.inspector{width:100%;border-left:0;border-top:1px solid var(--border);padding:0 24px 24px}.panelHeading{margin-bottom:20px}.inspector textarea{height:120px}.help{margin-top:18px}}
 /* Nodes are real editors in world coordinates. The header alone owns node movement. */
-.card{display:flex;flex-direction:column;overflow:hidden;min-width:260px;min-height:300px}.cardHead{flex-shrink:0;user-select:none}.cardHead>span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cardBody{flex:1;min-height:0;padding:16px;display:flex;flex-direction:column;gap:12px}.cardBody input,.cardBody textarea{width:100%;color:#e0e4e5;background:#181c1f;border:1px solid #3c454b;border-radius:6px;padding:10px;outline-color:#d9ef9b}.cardBody textarea{flex:1;min-height:55px;resize:none;line-height:1.7;touch-action:auto}.cardBody input{flex-shrink:0}.card footer{flex-shrink:0}.image{flex:1;min-height:0}.resize{position:absolute!important;right:0;bottom:0;width:25px;height:25px;padding:0!important;border:0!important;border-radius:5px 0 0!important;cursor:nwse-resize!important;touch-action:none}.viewport{overscroll-behavior:contain}.disconnected{flex-shrink:0}.port{right:0}.world{width:0;height:0}
-.card{overflow:visible}.cardBody{overflow:hidden}.inputPort,.outputPort{position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border:2px solid #1a1d20;border-radius:50%;background:#d9ef9b;pointer-events:none}.inputPort{left:-5px}.outputPort{right:-5px}.cardHead:active{cursor:grabbing}
+.card{display:flex;flex-direction:column;overflow:hidden;min-width:260px;min-height:300px}.cardHead{flex-shrink:0;user-select:none}.cardHead>span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cardBody{flex:1;min-height:0;padding:16px;display:flex;flex-direction:column;gap:12px}.cardBody input,.cardBody textarea{width:100%;color:var(--foreground);background:var(--surface);border:1px solid var(--input);border-radius:6px;padding:10px;outline-color:var(--ring)}.cardBody textarea{flex:1;min-height:55px;resize:none;line-height:1.7;touch-action:auto}.cardBody input{flex-shrink:0}.card footer{flex-shrink:0}.image{flex:1;min-height:0}.resize{position:absolute!important;right:0;bottom:0;width:25px;height:25px;padding:0!important;border:0!important;border-radius:5px 0 0!important;cursor:nwse-resize!important;touch-action:none}.viewport{overscroll-behavior:contain}.disconnected{flex-shrink:0}.port{right:0}.world{width:0;height:0}
+.card{overflow:visible}.cardBody{overflow:hidden}.inputPort,.outputPort{position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border:2px solid var(--input);border-radius:50%;background:var(--selection);pointer-events:none}.inputPort{left:-5px}.outputPort{right:-5px}.cardHead:active{cursor:grabbing}
 /* Full-screen canvas: chrome floats above the world and never reserves layout space. */
-.app{height:100dvh;min-height:0;overflow:hidden}.workspace{position:absolute;inset:0;height:100%;display:block}.canvasArea{position:absolute;inset:0;width:100%;height:100%;background:none}.viewport{inset:0;background-color:#16191c;background-image:radial-gradient(circle,#556068 1px,transparent 1px);background-size:24px 24px}.canvasTitle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.header{position:absolute;z-index:5;top:16px;left:16px;right:auto;height:48px;max-width:calc(100% - 32px);padding:6px 10px;gap:12px;background:#202529eb;border:1px solid #424a51;border-radius:12px;box-shadow:0 8px 24px #0003;backdrop-filter:blur(12px)}.header strong,.header>i,.header .crumb,.header .badge{display:none}.header .brand{font-size:14px}.header .brand span{font-size:18px}.header a[href='/account']{font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header .export{padding:8px}.rail{position:absolute;z-index:4;left:16px;top:50%;transform:translateY(-50%);width:48px;height:auto;padding:6px;gap:5px;border:1px solid #424a51;border-radius:12px;background:#202529eb;box-shadow:0 8px 24px #0003;backdrop-filter:blur(12px)}.rail button{width:34px;height:34px;padding:8px}.rail>.spacer,.rail>span{display:none}.rail hr{margin:3px}.canvasBottom{z-index:3;bottom:16px;left:16px;right:16px;pointer-events:none;flex-direction:row;align-items:center}.canvasBottom>span{max-width:none;padding:7px 10px;border-radius:7px;background:#202529c9}.controls{pointer-events:auto}.inspector{display:none;position:absolute;z-index:4;top:76px;left:16px;width:280px;max-height:calc(100dvh - 160px);height:auto;border:1px solid #424a51;border-radius:12px;padding:0 18px 20px;box-shadow:0 12px 32px #0005}.inspectorOpen{display:block}.inspectorClosed{display:none}.panelHeading{height:48px;margin-bottom:18px}.inspector h2{font-size:16px;margin-bottom:16px}.inspector .help{margin-top:18px}@media(max-width:700px){.header{top:10px;left:10px;max-width:calc(100% - 20px);gap:8px}.header>a:not(.brand):not(.back){display:none}.header .brand{font-size:12px}.header .export{font-size:11px}.rail{left:10px}.canvasBottom{left:10px;right:10px;bottom:10px;align-items:flex-end;gap:6px}.canvasBottom>span{max-width:110px;font-size:9px}.controls{gap:1px}.controls button{padding:6px}.inspector{left:10px;top:68px;width:min(280px,calc(100vw - 20px))}}
+.app{height:100dvh;min-height:0;overflow:hidden}.workspace{position:absolute;inset:0;height:100%;display:block}.canvasArea{position:absolute;inset:0;width:100%;height:100%;background:none}.viewport{inset:0;background-color:var(--background);background-image:radial-gradient(circle,var(--grid) 1px,transparent 1px);background-size:24px 24px}.canvasTitle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.header{position:absolute;z-index:5;top:16px;left:16px;right:auto;height:48px;max-width:calc(100% - 32px);padding:6px 10px;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px var(--shadow);backdrop-filter:blur(12px)}.header strong,.header>i,.header .crumb,.header .badge{display:none}.header .brand{font-size:14px}.header .brand span{font-size:18px}.header a[href='/account']{font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header .export{padding:8px}.rail{position:absolute;z-index:4;left:16px;top:50%;transform:translateY(-50%);width:48px;height:auto;padding:6px;gap:5px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 8px 24px var(--shadow);backdrop-filter:blur(12px)}.rail button{width:34px;height:34px;padding:8px}.rail>.spacer,.rail>span{display:none}.rail hr{margin:3px}.canvasBottom{z-index:3;bottom:16px;left:16px;right:16px;pointer-events:none;flex-direction:row;align-items:center}.canvasBottom>span{max-width:none;padding:7px 10px;border-radius:7px;background:var(--surface)}.controls{pointer-events:auto}.inspector{display:none;position:absolute;z-index:4;top:76px;left:16px;width:280px;max-height:calc(100dvh - 160px);height:auto;border:1px solid var(--border);border-radius:12px;padding:0 18px 20px;box-shadow:0 12px 32px var(--shadow)}.inspectorOpen{display:block}.inspectorClosed{display:none}.panelHeading{height:48px;margin-bottom:18px}.inspector h2{font-size:16px;margin-bottom:16px}.inspector .help{margin-top:18px}@media(max-width:700px){.header{top:10px;left:10px;max-width:calc(100% - 20px);gap:8px}.header>a:not(.brand):not(.back){display:none}.header .brand{font-size:12px}.header .export{font-size:11px}.rail{left:10px}.canvasBottom{left:10px;right:10px;bottom:10px;align-items:flex-end;gap:6px}.canvasBottom>span{max-width:110px;font-size:9px}.controls{gap:1px}.controls button{padding:6px}.inspector{left:10px;top:68px;width:min(280px,calc(100vw - 20px))}}
 /* Dock and contextual actions leave both sides of the canvas clear. */
-.rail{left:50%;top:auto;bottom:18px;transform:translateX(-50%);width:auto;height:58px;flex-direction:row;padding:7px 10px;gap:8px;border-radius:19px}.rail hr{width:1px;height:27px;border:0;background:#465059}.rail button{width:40px;height:40px;border-radius:11px;transition:transform .16s,background .16s}.rail button:hover{transform:translateY(-5px) scale(1.08)}.canvasBottom{top:16px;bottom:auto;left:auto;right:16px;flex-direction:column;align-items:flex-end}.canvasBottom>span{display:none}.contextMenu{position:absolute;z-index:10;width:240px;max-height:min(420px,calc(100dvh - 24px));overflow:auto;padding:8px;background:#252b30f5;border:1px solid #47525b;border-radius:14px;box-shadow:0 16px 50px #0005;backdrop-filter:blur(18px)}.contextMenu>button{display:flex;width:100%;justify-content:flex-start;border:0;background:transparent}.menuTitle{display:flex;align-items:center;justify-content:space-between;padding:3px 6px 8px;font-size:11px;color:#aebac4}.menuTitle button{padding:3px 8px}.contextMenu label{display:block;padding:8px;font-size:11px}.contextMenu select{display:block;width:100%;padding:8px;margin-top:6px;background:#171c20;color:inherit;border:1px solid #46515a;border-radius:6px}.card footer{display:flex;align-items:center;justify-content:space-between;padding:7px 12px}.card footer button{padding:2px 8px;border:0;background:transparent}.app[data-theme=light]{color-scheme:light;color:#25323b;background:#f5f6f8}.app[data-theme=dark]{color-scheme:dark}.app[data-theme=light] .viewport{background-color:#f5f6f8;background-image:radial-gradient(circle,#b8c3cc 1px,transparent 1px)}.app[data-theme=light] .header,.app[data-theme=light] .rail,.app[data-theme=light] .controls,.app[data-theme=light] .contextMenu{background:#ffffffed;border-color:#d3dce3;box-shadow:0 8px 28px #3c52601a}.app[data-theme=light] button{background:#edf1f4;border-color:#d5dfe5;color:#344650}.app[data-theme=light] button:hover{background:#dde6eb}.app[data-theme=light] .card{background:#fff;border-color:#b8c8d2;box-shadow:0 10px 30px #31465918}.app[data-theme=light] .cardHead{background:#eef3f6;color:#405663}.app[data-theme=light] .cardBody input,.app[data-theme=light] .cardBody textarea,.app[data-theme=light] .contextMenu select{background:#f7f9fa;color:#243641;border-color:#d6e0e6}.app[data-theme=light] .nodeType,.app[data-theme=light] .disconnected,.app[data-theme=light] .menuTitle{color:#567047}.app[data-theme=light] .selected{border-color:#60863b}.app[data-theme=light] .card footer{border-color:#e1e7eb;color:#526878}.app[data-theme=light] .wires path{stroke:#628e3e;opacity:.9}.app[data-theme=light] .brand span{color:#60863b}.app[data-theme=light] .rail button[aria-pressed=true]{background:#d8e9c4;color:#34501d}@media(max-width:700px){.rail{left:50%;bottom:12px;gap:4px;height:54px;padding:5px 8px}.rail button{width:36px;height:36px}.canvasBottom{top:70px;right:10px;bottom:auto}.controls{gap:0}.controls button{padding:5px}}
-.rail button{background:transparent;color:#bfcbd3}.rail button[aria-pressed=true]{background:#d9ef9b;color:#24301d}.app[data-theme=light] .rail button{background:transparent;color:#405663}.app[data-theme=light] .rail button[aria-pressed=true]{background:#d8e9c4;color:#34501d}
+.rail{left:50%;top:auto;bottom:18px;transform:translateX(-50%);width:auto;height:58px;flex-direction:row;padding:7px 10px;gap:8px;border-radius:19px}.rail hr{width:1px;height:27px;border:0;background:var(--surface-muted)}.rail button{width:40px;height:40px;border-radius:11px;transition:transform .16s,background .16s}.rail button:hover{transform:translateY(-5px) scale(1.08)}.canvasBottom{top:16px;bottom:auto;left:auto;right:16px;flex-direction:column;align-items:flex-end}.canvasBottom>span{display:none}.contextMenu{position:absolute;z-index:10;width:240px;max-height:min(420px,calc(100dvh - 24px));overflow:auto;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 50px var(--shadow);backdrop-filter:blur(18px)}.contextMenu>button{display:flex;width:100%;justify-content:flex-start;border:0;background:transparent}.menuTitle{display:flex;align-items:center;justify-content:space-between;padding:3px 6px 8px;font-size:11px;color:var(--muted-foreground)}.menuTitle button{padding:3px 8px}.contextMenu label{display:block;padding:8px;font-size:11px}.contextMenu select{display:block;width:100%;padding:8px;margin-top:6px;background:var(--surface);color:inherit;border:1px solid var(--input);border-radius:6px}.card footer{display:flex;align-items:center;justify-content:space-between;padding:7px 12px}.card footer button{padding:2px 8px;border:0;background:transparent}@media(max-width:700px){.rail{left:50%;bottom:12px;gap:4px;height:54px;padding:5px 8px}.rail button{width:36px;height:36px}.canvasBottom{top:70px;right:10px;bottom:auto}.controls{gap:0}.controls button{padding:5px}}
+.rail button{background:transparent;color:var(--muted-foreground)}.rail button[aria-pressed=true]{background:var(--selection);color:var(--primary)}
 /* Preview cards drag from any content area; editing is an explicit mode. */
-.preview{cursor:grab;user-select:none;touch-action:none}.preview:active{cursor:grabbing}.preview input,.preview textarea{pointer-events:none;user-select:none}.preview .image{cursor:grab}.preview img{-webkit-user-drag:none;pointer-events:none}.editing{cursor:default}.editing .cardBody{user-select:text}.editing .image{cursor:pointer}.editing{outline:2px solid #93b569;outline-offset:3px}.card footer{gap:6px}.card footer>button:first-of-type{margin-left:auto}
+.preview{cursor:grab;user-select:none;touch-action:none}.preview:active{cursor:grabbing}.preview input,.preview textarea{pointer-events:none;user-select:none}.preview .image{cursor:grab}.preview img{-webkit-user-drag:none;pointer-events:none}.editing{cursor:default}.editing .cardBody{user-select:text}.editing .image{cursor:pointer}.editing{outline:2px solid var(--ring);outline-offset:3px}.card footer{gap:6px}.card footer>button:first-of-type{margin-left:auto}
 
-.startPanel{position:absolute;z-index:3;left:50%;top:46%;transform:translate(-50%,-50%);width:min(700px,calc(100% - 40px));text-align:center;pointer-events:none}.startPanel>span{font-size:9px;letter-spacing:3px;color:#8d9884}.startPanel h2{font-size:30px;font-weight:400;letter-spacing:-1px;margin:18px 0}.startPanel p{font-size:12px;opacity:.5;margin-bottom:30px}.startPanel>div{display:flex;justify-content:center;gap:12px}.startPanel button,.startPanel a{pointer-events:auto}.startPanel>div button{padding:18px 24px;border-radius:12px;gap:15px}.startPanel>button{margin-top:25px;border:0;background:transparent;font-size:11px;opacity:.65}.startPanel>a{display:block;font-size:10px;margin-top:25px;opacity:.5;text-decoration:none}.app[data-theme=light] .startPanel>button{background:transparent}@media(max-width:700px){.startPanel h2{font-size:23px}.startPanel>div{flex-wrap:wrap;gap:8px}.startPanel>div button{padding:12px;font-size:11px}}
+.startPanel{position:absolute;z-index:3;left:50%;top:46%;transform:translate(-50%,-50%);width:min(700px,calc(100% - 40px));text-align:center;pointer-events:none}.startPanel>span{font-size:9px;letter-spacing:3px;color:var(--muted-foreground)}.startPanel h2{font-size:30px;font-weight:400;letter-spacing:-1px;margin:18px 0}.startPanel p{font-size:12px;opacity:.5;margin-bottom:30px}.startPanel>div{display:flex;justify-content:center;gap:12px}.startPanel button,.startPanel a{pointer-events:auto}.startPanel>div button{padding:18px 24px;border-radius:12px;gap:15px}.startPanel>button{margin-top:25px;border:0;background:transparent;font-size:11px;opacity:.65}.startPanel>a{display:block;font-size:10px;margin-top:25px;opacity:.5;text-decoration:none}@media(max-width:700px){.startPanel h2{font-size:23px}.startPanel>div{flex-wrap:wrap;gap:8px}.startPanel>div button{padding:12px;font-size:11px}}
+
+/* The canvas and its chrome share the canonical root theme. */
+.viewport{background-color:var(--background);background-image:radial-gradient(circle,var(--grid) 1px,transparent 1px)}
+.header,.rail,.controls,.contextMenu,.inspector{background:var(--surface);color:var(--foreground);border-color:var(--border)}
+.rail button[aria-pressed=true]{background:var(--selection);color:var(--primary)}
+.header .export{background:var(--primary);color:var(--primary-foreground)}
+.header .export:hover{background:var(--primary-hover)}
+.wires path{stroke:var(--connector)}
+.brand{display:inline-flex;align-items:center;letter-spacing:normal}
diff --git a/apps/waterfall-wiki/Dockerfile b/apps/waterfall-wiki/Dockerfile
index f996f56..5098e00 100644
--- a/apps/waterfall-wiki/Dockerfile
+++ b/apps/waterfall-wiki/Dockerfile
@@ -6,13 +6,14 @@ RUN apt-get update \
     && rm -rf /var/lib/apt/lists/*
 
 FROM base AS dependencies
+WORKDIR /repo/apps/waterfall-wiki
 RUN corepack enable && corepack prepare pnpm@11.25.0 --activate
 COPY apps/waterfall-wiki/pnpm-lock.yaml ./
-COPY pnpm-workspace.yaml /tmp/monorepo-policy.yaml
-RUN node -e "const fs=require('fs');const text=fs.readFileSync('/tmp/monorepo-policy.yaml','utf8');fs.writeFileSync('pnpm-workspace.yaml', text.slice(text.indexOf('allowBuilds:')));"
-RUN pnpm fetch --frozen-lockfile --fetch-timeout=300000 --network-concurrency=8
+COPY pnpm-workspace.yaml /repo/pnpm-workspace.yaml
+COPY packages/brand/ /repo/packages/brand/
+RUN pnpm --ignore-workspace fetch --frozen-lockfile --fetch-timeout=300000 --network-concurrency=8
 COPY apps/waterfall-wiki/package.json ./
-RUN pnpm install --offline --frozen-lockfile
+RUN pnpm --filter @prompt/waterfall-wiki install --offline --frozen-lockfile
 
 FROM dependencies AS build
 # .dockerignore excludes docs and operational notes without extra legacy COPY snapshots.
@@ -26,9 +27,9 @@ CMD ["npm", "run", "test:integration"]
 FROM base AS runtime
 ENV NODE_ENV=production HOSTNAME=0.0.0.0 PORT=3000 \
     FFMPEG_PATH=/usr/bin/ffmpeg FFPROBE_PATH=/usr/bin/ffprobe
-COPY --from=build --chown=node:node /app/.next/standalone/ ./
-COPY --from=build --chown=node:node /app/dist/worker.cjs /app/dist/bootstrap.cjs /app/dist/publish-learning-series.cjs /app/dist/auth-cli.cjs ./
-COPY --from=build --chown=node:node /app/db/ ./db/
+COPY --from=build --chown=node:node /repo/apps/waterfall-wiki/.next/standalone/ ./
+COPY --from=build --chown=node:node /repo/apps/waterfall-wiki/dist/worker.cjs /repo/apps/waterfall-wiki/dist/bootstrap.cjs /repo/apps/waterfall-wiki/dist/publish-learning-series.cjs /repo/apps/waterfall-wiki/dist/auth-cli.cjs ./
+COPY --from=build --chown=node:node /repo/apps/waterfall-wiki/db/ ./db/
 COPY --chown=node:node apps/waterfall-wiki/scripts/container-health.mjs ./
 COPY --chown=node:node apps/waterfall-wiki/scripts/import-character-packs.mjs apps/waterfall-wiki/scripts/verify-character-pack.mjs ./scripts/
 COPY --chown=node:node apps/waterfall-wiki/seed/characters/ ./seed/characters/
diff --git a/apps/waterfall-wiki/package.json b/apps/waterfall-wiki/package.json
index 71b593c..6cff118 100644
--- a/apps/waterfall-wiki/package.json
+++ b/apps/waterfall-wiki/package.json
@@ -6,8 +6,8 @@
     "node": ">=24 <25"
   },
   "scripts": {
-    "dev": "next dev",
-    "build": "next build && esbuild src/worker.ts --bundle --platform=node --format=cjs --external:pg-native --external:playwright-core --outfile=dist/worker.cjs && esbuild scripts/bootstrap.ts --bundle --platform=node --format=cjs --external:pg-native --external:playwright-core --outfile=dist/bootstrap.cjs && esbuild scripts/publish-learning-series.ts --bundle --platform=node --format=cjs --external:pg-native --external:playwright-core --outfile=dist/publish-learning-series.cjs && esbuild scripts/auth-cli.ts --bundle --platform=node --format=cjs --external:pg-native --outfile=dist/auth-cli.cjs && node scripts/prepare-standalone.mjs",
+    "dev": "pnpm brand:prepare && next dev",
+    "build": "pnpm brand:prepare && next build && esbuild src/worker.ts --bundle --platform=node --format=cjs --external:pg-native --external:playwright-core --outfile=dist/worker.cjs && esbuild scripts/bootstrap.ts --bundle --platform=node --format=cjs --external:pg-native --external:playwright-core --outfile=dist/bootstrap.cjs && esbuild scripts/publish-learning-series.ts --bundle --platform=node --format=cjs --external:pg-native --external:playwright-core --outfile=dist/publish-learning-series.cjs && esbuild scripts/auth-cli.ts --bundle --platform=node --format=cjs --external:pg-native --outfile=dist/auth-cli.cjs && node scripts/prepare-standalone.mjs",
     "start": "next start",
     "typecheck": "next typegen && tsc --noEmit",
     "test": "tsx --test tests/api-documentation.test.ts tests/health.test.ts tests/model.test.ts tests/learning-series.test.ts tests/skill-docs.test.ts tests/wiki.test.ts tests/explore.test.ts tests/preview.test.ts tests/note-markdown.test.tsx tests/api-publication.test.ts tests/discovery.test.ts tests/auth.test.ts tests/account.test.ts tests/guidance.test.ts tests/guidance-publishing.test.ts",
@@ -15,7 +15,8 @@
     "storage:prepare": "tsx scripts/bootstrap.ts",
     "content:publish-learning": "tsx scripts/publish-learning-series.ts",
     "worker": "tsx src/worker.ts",
-    "test:integration": "tsx --test tests/integration.test.ts"
+    "test:integration": "tsx --test tests/integration.test.ts",
+    "brand:prepare": "node ../../packages/brand/scripts/prepare-app.mjs"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "3.1155.0",
@@ -32,7 +33,8 @@
     "react-markdown": "10.1.0",
     "remark-gfm": "4.0.1",
     "sharp": "0.35.5",
-    "zod": "4.6.7"
+    "zod": "4.6.7",
+    "@endoleap/brand": "workspace:*"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "4.3.3",
diff --git a/apps/waterfall-wiki/pnpm-lock.yaml b/apps/waterfall-wiki/pnpm-lock.yaml
index e71a565..946ad48 100644
--- a/apps/waterfall-wiki/pnpm-lock.yaml
+++ b/apps/waterfall-wiki/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@aws-sdk/client-s3':
         specifier: 3.1155.0
         version: 3.1155.0
+      '@endoleap/brand':
+        specifier: workspace:*
+        version: link:../../packages/brand
       formidable:
         specifier: 3.5.4
         version: 3.5.4
diff --git a/apps/waterfall-wiki/src/components/Brand.tsx b/apps/waterfall-wiki/src/components/Brand.tsx
new file mode 100644
index 0000000..15d833b
--- /dev/null
+++ b/apps/waterfall-wiki/src/components/Brand.tsx
@@ -0,0 +1,4 @@
+/** The approved mark is copied from @endoleap/brand during the remote build. */
+export function Brand({ compact = false }: { compact?: boolean }) {
+  return <span className="endoleap-brand"><img src="/brand/logo-light.svg" className="endoleap-mark endoleap-mark-light" alt="" width={32} height={32}/><img src="/brand/logo-dark.svg" className="endoleap-mark endoleap-mark-dark" alt="" width={32} height={32}/><span className="endoleap-wordmark">啡跃{!compact && <small>Endoleap</small>}</span></span>;
+}
diff --git a/apps/waterfall-wiki/src/components/ExploreDetail.tsx b/apps/waterfall-wiki/src/components/ExploreDetail.tsx
index 6eac498..3f08d32 100644
--- a/apps/waterfall-wiki/src/components/ExploreDetail.tsx
+++ b/apps/waterfall-wiki/src/components/ExploreDetail.tsx
@@ -35,7 +35,7 @@ export function ExploreDetail({entry:initial,background}:{entry:ExploreEntry;bac
  async function archive(){
   setArchiveBusy(true);setCopyError('');try{const r=await fetch('/api/posts/'+entry.id+'/archive',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({archived:!entry.archived})});const d=await r.json();if(!r.ok)throw Error(d.error||'操作失败');const state=await fetch('/api/notes/'+entry.id).then(r=>r.json());setEntry(state.entry);void router.replace(router.asPath,undefined,{scroll:false})}catch(e){setCopyError(e instanceof Error?e.message:'操作失败')}finally{setArchiveBusy(false)}
  }
- return <Shell><Head><title>{entry.title} · PROMPT</title><link rel="canonical" href={exploreUrl(entry.id)}/><link rel="alternate" type="text/plain" href={exploreUrl(entry.id)+'?agent_mode=True'}/></Head>
+ return <Shell><Head><title>{entry.title} · 啡跃 Endoleap</title><link rel="canonical" href={exploreUrl(entry.id)}/><link rel="alternate" type="text/plain" href={exploreUrl(entry.id)+'?agent_mode=True'}/></Head>
  <div aria-hidden="true" inert><ExploreFeed key={entry.revision} initial={background.map(e=>e.id===entry.id?entry:e)}/></div>
  <div className="note-overlay" onClick={()=>{if(!editing)close()}}><div className="note-dialog" ref={detailRef} role="dialog" aria-modal="true" aria-labelledby="note-title" onClick={e=>e.stopPropagation()}>
  <button className="note-close" ref={closeRef} aria-label={editing?'取消编辑':'关闭详情'} onClick={close}><X/></button>
diff --git a/apps/waterfall-wiki/src/components/Feed.tsx b/apps/waterfall-wiki/src/components/Feed.tsx
index 9849683..eff4273 100644
--- a/apps/waterfall-wiki/src/components/Feed.tsx
+++ b/apps/waterfall-wiki/src/components/Feed.tsx
@@ -31,12 +31,12 @@ export function Feed({initial,section='',tagPath=''}:{initial:FeedData;section?:
  useEffect(()=>{generation.current++;setPosts(initial.posts);setCursor(initial.nextCursor);setError('');setBusy(false);},[initial,router.query.q]);
  const current=sections.find(s=>s.path===section);const target=initial.tags.find(t=>t.path===tagPath);const children=initial.tags;
  async function load(){const gen=generation.current;setBusy(true);setError('');try{const q=new URLSearchParams({section,path:tagPath,cursor:cursor||'',q:String(router.query.q||'')});const res=await fetch('/api/feed?'+q);const d=await res.json();if(!res.ok)throw new Error(d.error);if(gen===generation.current){setPosts(old=>[...old,...d.posts.filter((p:Post)=>!old.some(a=>a.id===p.id))]);setCursor(d.nextCursor);}}catch{if(gen===generation.current)setError('加载没有完成，点击重试。');}finally{if(gen===generation.current)setBusy(false);}}
- return <Shell><Head><title>{target?.name||current?.name||'灵感首页'} · PROMPT</title><meta name="description" content="自己的图文、视频与声音创作空间"/><link rel="alternate" type="text/markdown" href="/index.md" title="Agent 文档入口"/></Head>
+ return <Shell><Head><title>{target?.name||current?.name||'灵感首页'} · 啡跃 Endoleap</title><meta name="description" content="自己的图文、视频与声音创作空间"/><link rel="alternate" type="text/markdown" href="/index.md" title="Agent 文档入口"/></Head>
   {current&&<header className="page-header feed-heading"><div><h1>{target?.name||current.name}</h1><p>{current.hint}</p></div></header>}
   {tagPath&&<div className="breadcrumbs"><Link href={`/${section}`}>全部{current?.name}</Link>{tagPath.split('/').map((_,i)=>{const path=tagPath.split('/').slice(0,i+1).join('/');return <span key={path}> / <Link href={`/${section}/${path}`}>{initial.tags.find(t=>t.path===path)?.name}</Link></span>;})}</div>}
   <div className="feed-toolbar"><div className="feed-tabs">{!section?<><Link className="selected" href="/">全部</Link>{sections.map(s=><Link key={s.path} href={`/${s.path}`}>{s.name}</Link>)}</>:<><Link className={!tagPath?'selected':''} href={`/${section}`}>全部</Link>{children.map(t=><Link key={t.id} href={`/${section}/${t.path}`}>{t.name}</Link>)}</>}</div><span className="sort-label"><ArrowDown size={13}/>最近收录</span></div>
   {initial.unavailable?<div className="empty-state"><Layers/><h2>素材库暂时没有连接上</h2><p>请稍后刷新，已保存的内容不会因此丢失。</p></div>:(posts.length||(!section&&skillCatalog.some(s=>(s.title+s.description+s.category).toLowerCase().includes(String(router.query.q||'').toLowerCase()))))?<Masonry posts={posts} includeSkills={!section} q={String(router.query.q||'')}/>:<div className="empty-state"><div className="empty-art"><span/><ImageIcon size={42} strokeWidth={1.2}/><i><AudioLines size={18}/></i><b><Film size={19}/></b></div><span className="eyebrow">A LITTLE SPACE FOR SOMETHING GOOD</span><h2>{router.query.q?'还没有找到这份灵感':'这里还没有内容'}</h2><p>{router.query.q?'换一个词试试看。':'导入图片、视频或声音，开始整理你的素材。'}</p><Link className="primary-button" href={`/library/import${current&&['image','video','audio'].includes(current.kind)?'?kind='+current.kind:''}`}><Upload size={16}/>导入素材<ArrowUpRight size={16}/></Link><small>图文和动态作品通过代码加入，自由决定每一个像素。</small></div>}
   {cursor&&<div className="load-more"><button disabled={busy} onClick={load}>{busy?'正在翻找…':error||'再看一些'}<ArrowDown size={14}/></button></div>}
-  <footer className="page-footer">PROMPT <span>·</span> PROBABLY RENDERING ONE MORE PIXEL TONIGHT</footer>
+  <footer className="page-footer">啡跃 <span>·</span> Endoleap</footer>
  </Shell>;
 }
diff --git a/apps/waterfall-wiki/src/components/GuidanceIndex.tsx b/apps/waterfall-wiki/src/components/GuidanceIndex.tsx
index 8af6d8a..99aa4c9 100644
--- a/apps/waterfall-wiki/src/components/GuidanceIndex.tsx
+++ b/apps/waterfall-wiki/src/components/GuidanceIndex.tsx
@@ -4,7 +4,7 @@ import {Shell} from './Shell';
 import {SkillCard} from './SkillCard';
 import {skillCatalog} from '@/content/skills/catalog';
 import {guidanceDocuments,humanDocumentUrl} from '@/content/skills/guidance';
-export function GuidanceIndex(){return <Shell><Head><title>指导文档 · PROMPT</title><link rel="canonical" href="/skills"/><link rel="alternate" type="text/markdown" href="/skills/index.md" title="指导文档"/></Head>
+export function GuidanceIndex(){return <Shell><Head><title>指导文档 · 啡跃 Endoleap</title><link rel="canonical" href="/skills"/><link rel="alternate" type="text/markdown" href="/skills/index.md" title="指导文档"/></Head>
  <header className="page-header"><div><h1>指导文档</h1><p>每篇都有独立地址，网页与 Markdown 一一对应。沿着引用，找到需要的方法。</p></div></header>
  <article className="docs-body"><h2>全部文档</h2><p>这些分组只帮助浏览。任何一篇都可以独立进入，也可以引用其他文档。</p><div className="guidance-directory">{guidanceDocuments.map(doc=><div key={doc.path}><Link href={humanDocumentUrl(doc.path)}>{doc.title}</Link><small>{doc.collection}</small><a href={`${humanDocumentUrl(doc.path)}/index.md`}>Markdown ↗</a></div>)}</div></article>
  <h2>按创作主题浏览</h2>
diff --git a/apps/waterfall-wiki/src/components/GuidanceReader.tsx b/apps/waterfall-wiki/src/components/GuidanceReader.tsx
index 3e6eaf2..84d451c 100644
--- a/apps/waterfall-wiki/src/components/GuidanceReader.tsx
+++ b/apps/waterfall-wiki/src/components/GuidanceReader.tsx
@@ -333,7 +333,7 @@ export default function GuidanceReader({
                 <dt>来源</dt>
                 <dd>
                   {source === "example"
-                    ? "织页协议样例"
+                    ? "啡跃协议样例"
                     : canEdit
                       ? "你的文档"
                       : "社区作者"}
diff --git a/apps/waterfall-wiki/src/components/GuidanceShell.tsx b/apps/waterfall-wiki/src/components/GuidanceShell.tsx
index 8eb3de9..858db64 100644
--- a/apps/waterfall-wiki/src/components/GuidanceShell.tsx
+++ b/apps/waterfall-wiki/src/components/GuidanceShell.tsx
@@ -1,3 +1,5 @@
+import { ThemeToggle } from "./ThemeToggle";
+import { Brand } from "./Brand";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -110,12 +112,7 @@ export default function GuidanceShell({
           href="/"
           onClick={() => dialog.current?.close()}
         >
-          <span className={s.brandMark}>
-            <Waypoints size={22} strokeWidth={2.2} />
-          </span>
-          <span>
-            织页<small>KNOWLEDGE FOR AGENTS</small>
-          </span>
+          <Brand/>
         </Link>
         <div className={s.workspaceLabel}>
           <Globe2 size={16} />
@@ -194,7 +191,7 @@ export default function GuidanceShell({
     <AccountContext.Provider value={{ user, loading, error, refresh }}>
       <div className={s.site}>
         <Head>
-          <title>{`${title} · 织页`}</title>
+          <title>{`${title} · 啡跃`}</title>
           <meta
             name="description"
             content="为 Agent 编写、发现和连接可独立使用的指导文档。"
@@ -230,7 +227,7 @@ export default function GuidanceShell({
               <ChevronRight size={14} />
               <strong>{title}</strong>
             </div>
-            <div className={s.topbarActions}>
+            <div className={s.topbarActions}><ThemeToggle/>
               <Link className={s.topbarProtocol} href="/protocol">
                 <span className={s.statusDot} />
                 Linked Guidance 0.1
@@ -253,7 +250,7 @@ export default function GuidanceShell({
             {children}
           </main>
           <footer className={s.workspaceFooter}>
-            <span>织页 · 让知识按需连接</span>
+            <span>啡跃 · 让知识按需连接</span>
             <Link href="/protocol">
               文档协议 <ArrowUpRight size={12} />
             </Link>
diff --git a/apps/waterfall-wiki/src/components/Shell.tsx b/apps/waterfall-wiki/src/components/Shell.tsx
index e21ddaf..125851f 100644
--- a/apps/waterfall-wiki/src/components/Shell.tsx
+++ b/apps/waterfall-wiki/src/components/Shell.tsx
@@ -1,3 +1,5 @@
+import { ThemeToggle } from "./ThemeToggle";
+import { Brand } from "./Brand";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Grid2X2,Image,Film,AudioLines,BookOpen,Clapperboard,Sparkles,ArrowUpRight,Layers,Tags,Upload,Menu,X,Search } from "lucide-react";
@@ -7,9 +9,9 @@ export function Shell({children}:{children:ReactNode}){
  const router=useRouter();const [open,setOpen]=useState(false);const [query,setQuery]=useState(String(router.query.q||''));
  useEffect(()=>setQuery(String(router.query.q||'')),[router.query.q]);
  return <div className="app-shell"><button className="mobile-menu icon-button" aria-label={open?"关闭导航":"展开导航"} aria-expanded={open} onClick={()=>setOpen(!open)}>{open?<X size={22}/>:<Menu size={22}/>}</button>
-  <aside className={`sidebar ${open?'is-open':''}`}><Link href="/" className="brand" aria-label="PROMPT 首页" onClick={()=>setOpen(false)}><img className="brand-mark" src="/brand-mark.svg" width={40} height={40} alt=""/><strong>PROMPT</strong></Link>
+  <aside className={`sidebar ${open?'is-open':''}`}><Link href="/" className="brand" aria-label="啡跃 Endoleap 首页" onClick={()=>setOpen(false)}><Brand/></Link>
    <nav>{groups.map((g,i)=><div className="nav-group" key={i}>{g.label&&<p>{g.label}</p>}{g.items.map(item=>{const active=item.href==='/'?router.asPath.split('?')[0]==='/':router.asPath.split('?')[0].startsWith(item.href);return <Link key={item.href} href={item.href} title={item.label} className={`nav-item ${active?'active':''}`} onClick={()=>setOpen(false)}><item.icon size={24} strokeWidth={active?2.2:1.8}/><span>{item.label}</span></Link>;})}</div>)}</nav>
 
-  <button className="auth-logout" onClick={async()=>{const response=await fetch('/api/auth/logout',{method:'POST'});if(response.ok)window.location.assign('/login');}}>退出登录</button></aside><main className="main-content"><div className="global-topbar"><form className="global-search" role="search" onSubmit={e=>{e.preventDefault();const path=router.asPath.split('?')[0];const destination=path==='/categories'?path:'/';void router.push({pathname:destination,query:{...(destination==='/categories'&&router.query.category?{category:router.query.category}:{}),...(query.trim()?{q:query.trim()}:{})}});}}><Search size={24}/><input aria-label="搜索笔记全文" placeholder="搜索知识、灵感和素材" value={query} onChange={e=>setQuery(e.target.value)}/>{query&&<button type="button" aria-label="清空搜索" onClick={()=>{setQuery('');void router.push({pathname:router.pathname==='/categories'?'/categories':'/',query:router.query.category?{category:router.query.category}:{}})}}><X size={20}/></button>}<button type="submit" className="search-submit">搜索</button></form></div>{children}</main>{open&&<button className="nav-scrim" aria-label="关闭导航" onClick={()=>setOpen(false)}/>}
+  <button className="auth-logout" onClick={async()=>{const response=await fetch('/api/auth/logout',{method:'POST'});if(response.ok)window.location.assign('/login');}}>退出登录</button></aside><main className="main-content"><div className="global-topbar"><ThemeToggle/><form className="global-search" role="search" onSubmit={e=>{e.preventDefault();const path=router.asPath.split('?')[0];const destination=path==='/categories'?path:'/';void router.push({pathname:destination,query:{...(destination==='/categories'&&router.query.category?{category:router.query.category}:{}),...(query.trim()?{q:query.trim()}:{})}});}}><Search size={24}/><input aria-label="搜索笔记全文" placeholder="搜索知识、灵感和素材" value={query} onChange={e=>setQuery(e.target.value)}/>{query&&<button type="button" aria-label="清空搜索" onClick={()=>{setQuery('');void router.push({pathname:router.pathname==='/categories'?'/categories':'/',query:router.query.category?{category:router.query.category}:{}})}}><X size={20}/></button>}<button type="submit" className="search-submit">搜索</button></form></div>{children}</main>{open&&<button className="nav-scrim" aria-label="关闭导航" onClick={()=>setOpen(false)}/>}
  </div>;
 }
diff --git a/apps/waterfall-wiki/src/components/SkillDocs.tsx b/apps/waterfall-wiki/src/components/SkillDocs.tsx
index 1a52684..f5e0984 100644
--- a/apps/waterfall-wiki/src/components/SkillDocs.tsx
+++ b/apps/waterfall-wiki/src/components/SkillDocs.tsx
@@ -26,7 +26,7 @@ export function SkillDocs({documentPath,documentId='index',skillId='street-peopl
    setCopied(true);
   }catch{setCopied(false)}
  }
- return <Shell><Head><title>{doc.title} · 指导文档 · PROMPT</title><link rel="canonical" href={humanDocumentUrl(path)}/><link rel="alternate" type="text/markdown" href={markdownDocumentUrl(path)} title={doc.title}/></Head>
+ return <Shell><Head><title>{doc.title} · 指导文档 · 啡跃 Endoleap</title><link rel="canonical" href={humanDocumentUrl(path)}/><link rel="alternate" type="text/markdown" href={markdownDocumentUrl(path)} title={doc.title}/></Head>
   <div className="docs-top"><Link href="/skills">← 全部指导文档</Link><button onClick={()=>setOpen(v=>!v)} aria-expanded={open}><PanelRight size={16}/>文档与来源 · {doc.resources.length}</button></div>
   <div className={`docs-layout ${open?'with-sources':''}`}><article className="docs-body">
    <div className="docs-eyebrow">{doc.collection} / 指导文档</div><h1>{doc.title}</h1>
diff --git a/apps/waterfall-wiki/src/components/ThemeToggle.tsx b/apps/waterfall-wiki/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..6270c2e
--- /dev/null
+++ b/apps/waterfall-wiki/src/components/ThemeToggle.tsx
@@ -0,0 +1,7 @@
+import { useEffect, useState } from 'react';
+export function ThemeToggle() {
+  const [dark, setDark] = useState(false);
+  const [ready, setReady] = useState(false);
+  useEffect(() => { const sync = () => setDark(document.documentElement.dataset.mode === 'dark'); sync(); setReady(true); window.addEventListener('endoleap-theme', sync); return () => window.removeEventListener('endoleap-theme', sync); }, []);
+  return <button type="button" data-theme-ready={ready} className="endoleap-theme-toggle" aria-label="切换明暗主题" title={dark ? '切换浅色模式' : '切换深色模式'} onClick={() => { const mode = document.documentElement.dataset.mode === 'dark' ? 'light' : 'dark'; const scope = document.documentElement.dataset.theme?.startsWith('canvas-') ? 'canvas' : 'home'; document.documentElement.dataset.mode = mode; document.documentElement.dataset.theme = `${scope}-${mode}`; try { localStorage.setItem('endoleap.theme', mode); } catch {} window.dispatchEvent(new Event('endoleap-theme')); }}>◐<span>{dark ? '浅色' : '深色'}</span></button>;
+}
diff --git a/apps/waterfall-wiki/src/pages/_app.tsx b/apps/waterfall-wiki/src/pages/_app.tsx
index 6ed669b..d213127 100644
--- a/apps/waterfall-wiki/src/pages/_app.tsx
+++ b/apps/waterfall-wiki/src/pages/_app.tsx
@@ -1,8 +1,13 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
 import type { AppProps } from "next/app";
 import "@/styles/globals.css";
 import "@/styles/skill-docs.css";
 import "@/styles/learning-series.css";
+import "@/styles/brand.css";
 
 export default function App({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+  useEffect(() => { const scope = /^\/(?:graphic|infinite_canvas|layouts|template-layout)(?:\/|$)/.test(router.pathname) ? 'canvas' : 'home'; document.documentElement.dataset.theme = `${scope}-${document.documentElement.dataset.mode === 'dark' ? 'dark' : 'light'}`; }, [router.pathname]);
   return <Component {...pageProps} />;
 }
diff --git a/apps/waterfall-wiki/src/pages/_document.tsx b/apps/waterfall-wiki/src/pages/_document.tsx
new file mode 100644
index 0000000..0d59c4b
--- /dev/null
+++ b/apps/waterfall-wiki/src/pages/_document.tsx
@@ -0,0 +1,3 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+const initializeTheme = String.raw`(function(){try{var mode=localStorage.getItem('endoleap.theme')==='dark'?'dark':'light';var canvas=/^\/(?:studio\/)?(?:graphic|infinite_canvas|layouts|template-layout)(?:\/|$)/.test(location.pathname);document.documentElement.dataset.mode=mode;document.documentElement.dataset.theme=(canvas?'canvas':'home')+'-'+mode;}catch(e){}})();`;
+export default function Document() { return <Html lang="zh-CN" data-theme="home-light" data-mode="light" suppressHydrationWarning><Head><link rel="icon" href="/favicon.ico?v=endoleap-1.2" sizes="any"/><link rel="icon" type="image/svg+xml" href="/brand/icon-dark.svg?v=endoleap-1.2"/><link rel="apple-touch-icon" href="/apple-touch-icon.png"/><script dangerouslySetInnerHTML={{__html:initializeTheme}}/></Head><body><Main/><NextScript/></body></Html>; }
diff --git a/apps/waterfall-wiki/src/pages/account.tsx b/apps/waterfall-wiki/src/pages/account.tsx
index 3853cd3..de71eab 100644
--- a/apps/waterfall-wiki/src/pages/account.tsx
+++ b/apps/waterfall-wiki/src/pages/account.tsx
@@ -1,3 +1,4 @@
+import { Brand } from "../components/Brand";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState, type FormEvent } from "react";
@@ -81,7 +82,7 @@ function AccountContent() {
         setFeedback({ tone: "success", text: "邮箱已验证，现在可以登录。" });
       } else if (name === "login") {
         setPassword("");
-        setFeedback({ tone: "success", text: "登录成功，欢迎回到织页。" });
+        setFeedback({ tone: "success", text: "登录成功，欢迎回到啡跃。" });
       } else if (name === "logout") {
         setPassword("");
         setFeedback({ tone: "success", text: "已退出登录。" });
@@ -115,7 +116,7 @@ function AccountContent() {
     <div className={s.accountLayout}>
       <section className={s.accountIntro}>
         <span className={s.accountSymbol}>
-          <Waypoints size={28} />
+          <Brand compact/>
         </span>
         <span className={s.eyebrow}>YOUR KNOWLEDGE, CONNECTED</span>
         <h1>
@@ -229,7 +230,7 @@ function AccountContent() {
               className={s.primaryButton}
               href={localNext(router.query.next)}
             >
-              继续使用织页
+              继续使用啡跃
               <ArrowRight size={15} />
             </Link>
             <div className={s.authSecondary}>
diff --git a/apps/waterfall-wiki/src/pages/categories.tsx b/apps/waterfall-wiki/src/pages/categories.tsx
index 4765624..c1f79e2 100644
--- a/apps/waterfall-wiki/src/pages/categories.tsx
+++ b/apps/waterfall-wiki/src/pages/categories.tsx
@@ -8,7 +8,7 @@ import {tags} from '@/lib/library';
 import {systemTags} from '@/lib/system-tags';
 export default function Categories({categories,category,entries,cursor,q,total,unavailable=false}:{categories:string[];category:string;entries:ExploreEntry[];cursor:string|null;q:string;total?:number;unavailable?:boolean}){
  const link=(value:string)=>({pathname:'/categories',query:{...(value?{category:value}:{}),...(q?{q}:{})}});
- return <Shell><Head><title>分类 · PROMPT</title></Head><nav className="discovery-tabs" aria-label="系统标签分类"><Link href={link('')} className={!category?'selected':''}>全部</Link>{categories.map(c=><Link className={c===category?'selected':''} href={link(c)} key={c}>{c}</Link>)}</nav>{category&&!categories.includes(category)&&<div className="ordinary-tag-filter">#{category}<Link href={link('')}>清除筛选 ×</Link></div>}{unavailable&&<p role="status">分类暂时无法读取，请稍后重试。</p>}<ExploreFeed key={JSON.stringify([category,q])} initial={entries} cursor={cursor} q={q} category={category} total={total}/></Shell>;
+ return <Shell><Head><title>分类 · 啡跃 Endoleap</title></Head><nav className="discovery-tabs" aria-label="系统标签分类"><Link href={link('')} className={!category?'selected':''}>全部</Link>{categories.map(c=><Link className={c===category?'selected':''} href={link(c)} key={c}>{c}</Link>)}</nav>{category&&!categories.includes(category)&&<div className="ordinary-tag-filter">#{category}<Link href={link('')}>清除筛选 ×</Link></div>}{unavailable&&<p role="status">分类暂时无法读取，请稍后重试。</p>}<ExploreFeed key={JSON.stringify([category,q])} initial={entries} cursor={cursor} q={q} category={category} total={total}/></Shell>;
 }
 export const getServerSideProps:GetServerSideProps=async({query})=>{
  const category=String(query.category||'').slice(0,200),q=String(query.q||'').slice(0,200);try{const [all,data]=await Promise.all([tags(),exploreFeed(q,category)]);return {props:{categories:all.filter(t=>t.kind==='system').map(t=>t.name),category,q,entries:data.entries,cursor:data.nextCursor,total:data.total}};}catch{return {props:{categories:systemTags.map(t=>t.name),category,q,entries:[],cursor:null,unavailable:true}}}
diff --git a/apps/waterfall-wiki/src/pages/index.tsx b/apps/waterfall-wiki/src/pages/index.tsx
index abb847a..433c3c0 100644
--- a/apps/waterfall-wiki/src/pages/index.tsx
+++ b/apps/waterfall-wiki/src/pages/index.tsx
@@ -1,10 +1,12 @@
+import { ThemeToggle } from "../components/ThemeToggle";
+import { Brand } from "../components/Brand";
 import Head from 'next/head';
 import {ArrowUpRight, MousePointer2, Plus, Type, Image, Sparkles, Workflow, Layers, ArrowRight} from 'lucide-react';
 import s from '@/styles/landing.module.css';
 export default function Home(){return <main className={s.page}>
-<Head><title>织页 Studio · 让灵感，有形。</title><meta name="description" content="连接你的 coding agent，在图形编辑器与无限画布中，把想法组织成作品。"/></Head>
-<nav className={s.nav}><a className={s.logo} href="/">✳ <b>织页</b><span>STUDIO</span></a><div><a href="#tools">创作工具</a><a href="/documents">知识与教程</a><a href="#workflow">工作方式</a></div><a href="/account?next=/workspace">登录</a><a className={s.dark} href="/account?next=/workspace">进入工作台 <ArrowUpRight size={15}/></a></nav>
-<section className={s.hero}><p className={s.eyebrow}>A SPACE FOR HUMAN IDEAS & AGENTS</p><h1>想法不该停在对话里。<br/><span>让灵感，有形。</span></h1><p className={s.intro}>从一闪而过的念头，到值得分享的作品。<br/>连接你的 coding agent，在一张画布上，把创作继续下去。</p><div className={s.actions}><a className={s.dark} href="/account?next=/workspace">开始创作 <ArrowRight size={17}/></a><a href="#tools">探索你的创作空间 ↓</a></div><div className={s.product}><div className={s.productBar}><b>✳ STUDIO</b><span>日常的另一种可能 / 创意探索</span><span>本机草稿</span></div><div className={s.demo}><aside>工作空间<hr/>图层与素材<p>◈ 创意简报</p><p>▧ 视觉探索</p><p>✳ 镜头构思</p><small>把线索连接起来</small></aside><div className={s.demoWorld}><svg viewBox="0 0 800 330" preserveAspectRatio="none"><path d="M190 170 C300 170 260 120 360 120 S520 240 620 240"/></svg><article className={s.note}><small>01 / THE IDEA</small><h3>把日常，<br/>拍成一场电影。</h3><p>自然光、细腻颗粒，<br/>让每一帧都有呼吸感。</p></article><article className={s.art}><small>02 / VISUAL STUDY</small><div className={s.orbit}/><h3>光的形状</h3><span>LIGHT / SPACE / EMOTION</span></article><article className={s.prompt}><Sparkles size={17}/><small>03 / PROMPT</small><h3>留住清晨的光。</h3><p>窗边的植物，安静的房间。<br/>35mm 胶片，缓慢推进。</p></article><div className={s.dock}><MousePointer2/><Plus/><Type/><Image/><Sparkles/></div></div></div></div><p className={s.caption}>一个创作场景示意。你的想法、素材与工具，在这里相遇。</p></section>
+<Head><title>啡跃 啡跃 Endoleap · 让灵感，有形。</title><meta name="description" content="连接你的 coding agent，在图形编辑器与无限画布中，把想法组织成作品。"/></Head>
+<nav className={s.nav}><a className={s.logo} href="/"><Brand/></a><div><a href="#tools">创作工具</a><a href="/documents">知识与教程</a><a href="#workflow">工作方式</a></div><ThemeToggle/><a href="/account?next=/workspace">登录</a><a className={s.dark} href="/account?next=/workspace">进入工作台 <ArrowUpRight size={15}/></a></nav>
+<section className={s.hero}><p className={s.eyebrow}>A SPACE FOR HUMAN IDEAS & AGENTS</p><h1>想法不该停在对话里。<br/><span>让灵感，有形。</span></h1><p className={s.intro}>从一闪而过的念头，到值得分享的作品。<br/>连接你的 coding agent，在一张画布上，把创作继续下去。</p><div className={s.actions}><a className={s.dark} href="/account?next=/workspace">开始创作 <ArrowRight size={17}/></a><a href="#tools">探索你的创作空间 ↓</a></div><div className={s.product}><div className={s.productBar}><Brand compact/><span>日常的另一种可能 / 创意探索</span><span>本机草稿</span></div><div className={s.demo}><aside>工作空间<hr/>图层与素材<p>◈ 创意简报</p><p>▧ 视觉探索</p><p>✳ 镜头构思</p><small>把线索连接起来</small></aside><div className={s.demoWorld}><svg viewBox="0 0 800 330" preserveAspectRatio="none"><path d="M190 170 C300 170 260 120 360 120 S520 240 620 240"/></svg><article className={s.note}><small>01 / THE IDEA</small><h3>把日常，<br/>拍成一场电影。</h3><p>自然光、细腻颗粒，<br/>让每一帧都有呼吸感。</p></article><article className={s.art}><small>02 / VISUAL STUDY</small><div className={s.orbit}/><h3>光的形状</h3><span>LIGHT / SPACE / EMOTION</span></article><article className={s.prompt}><Sparkles size={17}/><small>03 / PROMPT</small><h3>留住清晨的光。</h3><p>窗边的植物，安静的房间。<br/>35mm 胶片，缓慢推进。</p></article><div className={s.dock}><MousePointer2/><Plus/><Type/><Image/><Sparkles/></div></div></div></div><p className={s.caption}>一个创作场景示意。你的想法、素材与工具，在这里相遇。</p></section>
 <section className={s.tools} id="tools"><p className={s.eyebrow}>TWO TOOLS. ONE CREATIVE FLOW.</p><h2>给不同的想法，<br/>恰好的空间。</h2><div className={s.toolGrid}><a href="/graphic"><Layers/><span>01 / GRAPHIC</span><h3>把灵感排成作品。</h3><p>文字、图形与图片自由编排。精确调整图层和位置，把设计导出为 SVG。</p><div className={s.poster}><span>MAKE<br/>ROOM<br/><i>for ideas.</i></span><b>✳</b></div><strong>打开图形编辑器 <ArrowUpRight size={17}/></strong></a><a href="/infinite_canvas"><Workflow/><span>02 / INFINITE CANVAS</span><h3>让思路，自由生长。</h3><p>把笔记、参考图与提示词连成线索。在无限画布上平移、缩放，整理下一次创作。</p><div className={s.miniCanvas}><b>一个念头</b><i>⟶</i><b>一张参考</b><i>⟶</i><b>新的可能</b></div><strong>打开无限画布 <ArrowUpRight size={17}/></strong></a></div></section>
 <section className={s.workflow} id="workflow"><div><p className={s.eyebrow}>YOUR AGENT. YOUR WORKFLOW.</p><h2>用熟悉的 Agent，<br/>继续你的创作。</h2><p>通过项目已有的 API 与文档，让 coding agent 理解模板和创作内容。画布负责呈现，你来决定下一步。</p><a href="/studio/api">查看 Agent 接入文档 <ArrowUpRight size={16}/></a></div><ol><li><b>01</b><div><h3>找到起点</h3><p>从空白设计、素材或一段灵感出发。</p></div></li><li><b>02</b><div><h3>连接工作方式</h3><p>将接入文档交给你的 coding agent。</p></div></li><li><b>03</b><div><h3>亲手打磨，保存作品</h3><p>在编辑器中调整细节，导出并保留备份。</p></div></li></ol></section>
-<section className={s.end}><span>✳</span><h2>下一件作品，<br/>从这里开始。</h2><a className={s.dark} href="/account?next=/workspace">进入你的工作台 <ArrowRight size={17}/></a></section><footer className={s.footer}><a className={s.logo} href="/">✳ 织页 STUDIO</a><span>给想法留白，给创作空间。</span><a href="/documents">知识与教程 ↗</a></footer></main>}
+<section className={s.end}><span><Brand compact/></span><h2>下一件作品，<br/>从这里开始。</h2><a className={s.dark} href="/account?next=/workspace">进入你的工作台 <ArrowRight size={17}/></a></section><footer className={s.footer}><a className={s.logo} href="/"><Brand/></a><span>给想法留白，给创作空间。</span><a href="/documents">知识与教程 ↗</a></footer></main>}
diff --git a/apps/waterfall-wiki/src/pages/library/import.tsx b/apps/waterfall-wiki/src/pages/library/import.tsx
index 6f0a991..162ae86 100644
--- a/apps/waterfall-wiki/src/pages/library/import.tsx
+++ b/apps/waterfall-wiki/src/pages/library/import.tsx
@@ -12,7 +12,7 @@ export default function Import({allTags}:{allTags:Tag[]}){
  const [files,setFiles]=useState<File[]>([]);const [title,setTitle]=useState('');const [description,setDescription]=useState('');const [selected,setSelected]=useState<string[]>([]);const [busy,setBusy]=useState(false);const [error,setError]=useState('');
  function choose(list:FileList|null){if(!list)return;const items=Array.from(list);setFiles(items);if(!title&&items[0])setTitle(items[0].name.replace(/\.[^.]+$/,''));}
  async function submit(e:FormEvent){e.preventDefault();setError('');setBusy(true);try{const data=new FormData();data.set('kind',kind);data.set('title',title);data.set('description',description);data.set('tags',JSON.stringify(selected));files.forEach(f=>data.append('files',f));const res=await fetch('/api/upload',{method:'POST',body:data});const result=await res.json();if(!res.ok)throw new Error(result.error);await router.push('/explore/'+result.id);}catch(e){setError(e instanceof Error?e.message:'上传失败');}finally{setBusy(false);}}
- return <Shell><Head><title>素材入库 · PROMPT</title></Head><header className="page-header"><div><span className="eyebrow">MAKE ROOM FOR INSPIRATION</span><h1>导入素材</h1><p>支持多文件导入。同一组素材收录为一个素材包，每份文件都可以再次引用。</p></div></header><form className="editor-panel" onSubmit={submit}>
+ return <Shell><Head><title>素材入库 · 啡跃 Endoleap</title></Head><header className="page-header"><div><span className="eyebrow">MAKE ROOM FOR INSPIRATION</span><h1>导入素材</h1><p>支持多文件导入。同一组素材收录为一个素材包，每份文件都可以再次引用。</p></div></header><form className="editor-panel" onSubmit={submit}>
   <div className="kind-picker">{[{id:'image',name:'图片',Icon:Image},{id:'video',name:'视频',Icon:Film},{id:'audio',name:'声音',Icon:AudioLines}].map(t=><button type="button" key={t.id} disabled={busy} className={kind===t.id?'selected':''} onClick={()=>{setKind(t.id);setFiles([]);}}><t.Icon size={19}/>{t.name}</button>)}</div>
   <label className="drop-zone" onDragOver={e=>e.preventDefault()} onDrop={e=>{e.preventDefault();if(!busy)choose(e.dataTransfer.files);}}><input type="file" multiple disabled={busy} accept={kind==='image'?'image/jpeg,image/png,image/webp,image/gif,image/avif':kind+'/*'} onChange={e=>choose(e.target.files)}/><span className="upload-circle"><Upload size={24}/></span><strong>选择文件或拖放到这里</strong><span>最多 16 个文件，单个不超过 250 MB</span></label>
   {files.length>0&&<ul className="file-list">{files.map((f,i)=><li key={i}><Check size={15}/><span>{f.name}</span><small>{(f.size/1024/1024).toFixed(1)} MB</small><button type="button" aria-label={`移除 ${f.name}`} disabled={busy} onClick={()=>setFiles(a=>a.filter((_,j)=>i!==j))}><X size={14}/></button></li>)}</ul>}
diff --git a/apps/waterfall-wiki/src/pages/login.tsx b/apps/waterfall-wiki/src/pages/login.tsx
index df909a5..3a5c4a5 100644
--- a/apps/waterfall-wiki/src/pages/login.tsx
+++ b/apps/waterfall-wiki/src/pages/login.tsx
@@ -13,5 +13,5 @@ export default function Login() {
    window.location.assign(typeof next === 'string' && next.startsWith('/') && !next.startsWith('//') && !/[\\\r\n]/.test(next) && !next.startsWith('/login') ? next : '/');
   } catch { setError('暂时无法连接，请稍后重试'); } finally { setBusy(false); }
  }
- return <><Head><title>动态码登录 · PROMPT</title><meta name="robots" content="noindex,nofollow"/></Head><main className="auth-page"><form className="auth-card" onSubmit={submit}><img className="auth-logo" src="/brand-mark.svg" width={64} height={64} alt="Prompt"/><h1>输入动态码</h1><p className="auth-description">打开验证器，输入当前的 6 位动态码。</p><label htmlFor="auth-code">动态码</label><input id="auth-code" autoFocus inputMode="numeric" autoComplete="one-time-code" pattern="[0-9]{6}" maxLength={6} required value={code} onChange={e=>setCode(e.target.value.replace(/\D/g,''))} placeholder="000000" aria-describedby="auth-error"/><div id="auth-error" role="alert" className="auth-error">{error}</div><button type="submit" disabled={busy || code.length !== 6}>{busy ? '正在验证…' : '进入知识库'}</button><p className="auth-footnote">尚未绑定验证器？请联系管理员。</p></form></main></>;
+ return <><Head><title>动态码登录 · 啡跃 Endoleap</title><meta name="robots" content="noindex,nofollow"/></Head><main className="auth-page"><form className="auth-card" onSubmit={submit}><img className="auth-logo" src="/brand/icon-dark.svg" width={64} height={64} alt="啡跃 Endoleap"/><h1>输入动态码</h1><p className="auth-description">打开验证器，输入当前的 6 位动态码。</p><label htmlFor="auth-code">动态码</label><input id="auth-code" autoFocus inputMode="numeric" autoComplete="one-time-code" pattern="[0-9]{6}" maxLength={6} required value={code} onChange={e=>setCode(e.target.value.replace(/\D/g,''))} placeholder="000000" aria-describedby="auth-error"/><div id="auth-error" role="alert" className="auth-error">{error}</div><button type="submit" disabled={busy || code.length !== 6}>{busy ? '正在验证…' : '进入知识库'}</button><p className="auth-footnote">尚未绑定验证器？请联系管理员。</p></form></main></>;
 }
diff --git a/apps/waterfall-wiki/src/pages/tools/doodle.tsx b/apps/waterfall-wiki/src/pages/tools/doodle.tsx
index 3cd5585..169b88c 100644
--- a/apps/waterfall-wiki/src/pages/tools/doodle.tsx
+++ b/apps/waterfall-wiki/src/pages/tools/doodle.tsx
@@ -16,5 +16,5 @@ export default function Doodle(){
  const [selected,setSelected]=useState(0);const [color,setColor]=useState('#fffaf0');const [copied,setCopied]=useState(false);
  const svg=()=>`<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 128 128"><path d="${strokes[selected].path}" fill="none" stroke="${color}" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
  function download(){const url=URL.createObjectURL(new Blob([svg()],{type:'image/svg+xml'}));const a=document.createElement('a');a.href=url;a.download=`prompt-doodle-${selected+1}.svg`;a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);}
- return <Shell><Head><title>线条灵感 · PROMPT</title></Head><header className="page-header"><div><span className="eyebrow">SMALL LINES, LITTLE STORIES</span><h1>线条工具</h1><p>选择图形、调整颜色，下载后用于照片涂鸦。</p></div><span className="pill"><Sparkles size={14}/>照片涂鸦工具箱</span></header><div className="doodle-layout"><section className="doodle-catalog">{strokes.map((s,i)=><button key={s.name} onClick={()=>{setSelected(i);setCopied(false);}} className={`doodle-card ${i===selected?'selected':''}`}><div><svg viewBox="0 0 128 128"><path d={s.path} fill="none" stroke={color} strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"/></svg></div><strong>{s.name}</strong><small>{s.hint}</small></button>)}</section><aside className="surface doodle-inspector"><span className="eyebrow">A LITTLE MARK</span><div className="doodle-large"><svg viewBox="0 0 128 128"><path d={strokes[selected].path} fill="none" stroke={color} strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"/></svg></div><h2>{strokes[selected].name}</h2><p>{strokes[selected].hint}</p><div className="swatches">{['#fffaf0','#332c28','#ef6954','#ecc75b'].map(c=><button aria-label={`线条颜色 ${c}`} key={c} style={{background:c}} className={c===color?'selected':''} onClick={()=>setColor(c)}/>)}</div><button className="primary-button" onClick={download}><Download size={16}/>下载透明底 SVG</button><button className="secondary-button" onClick={async()=>{await navigator.clipboard.writeText(svg());setCopied(true);}}><Copy size={16}/>{copied?'已复制':'复制线条'}</button><p className="form-note">小图用来挑选造型与记录想法。正式画进照片时，位置、比例与笔触仍需要顺着画面调整。</p></aside></div></Shell>;
+ return <Shell><Head><title>线条灵感 · 啡跃 Endoleap</title></Head><header className="page-header"><div><span className="eyebrow">SMALL LINES, LITTLE STORIES</span><h1>线条工具</h1><p>选择图形、调整颜色，下载后用于照片涂鸦。</p></div><span className="pill"><Sparkles size={14}/>照片涂鸦工具箱</span></header><div className="doodle-layout"><section className="doodle-catalog">{strokes.map((s,i)=><button key={s.name} onClick={()=>{setSelected(i);setCopied(false);}} className={`doodle-card ${i===selected?'selected':''}`}><div><svg viewBox="0 0 128 128"><path d={s.path} fill="none" stroke={color} strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"/></svg></div><strong>{s.name}</strong><small>{s.hint}</small></button>)}</section><aside className="surface doodle-inspector"><span className="eyebrow">A LITTLE MARK</span><div className="doodle-large"><svg viewBox="0 0 128 128"><path d={strokes[selected].path} fill="none" stroke={color} strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"/></svg></div><h2>{strokes[selected].name}</h2><p>{strokes[selected].hint}</p><div className="swatches">{['#fffaf0','#332c28','#ef6954','#ecc75b'].map(c=><button aria-label={`线条颜色 ${c}`} key={c} style={{background:c}} className={c===color?'selected':''} onClick={()=>setColor(c)}/>)}</div><button className="primary-button" onClick={download}><Download size={16}/>下载透明底 SVG</button><button className="secondary-button" onClick={async()=>{await navigator.clipboard.writeText(svg());setCopied(true);}}><Copy size={16}/>{copied?'已复制':'复制线条'}</button><p className="form-note">小图用来挑选造型与记录想法。正式画进照片时，位置、比例与笔触仍需要顺着画面调整。</p></aside></div></Shell>;
 }
diff --git a/apps/waterfall-wiki/src/pages/workspace.tsx b/apps/waterfall-wiki/src/pages/workspace.tsx
index 3a5b04e..451e7e6 100644
--- a/apps/waterfall-wiki/src/pages/workspace.tsx
+++ b/apps/waterfall-wiki/src/pages/workspace.tsx
@@ -1,5 +1,7 @@
+import { ThemeToggle } from "../components/ThemeToggle";
+import { Brand } from "../components/Brand";
 import Head from 'next/head';
 import {useEffect,useState} from 'react';
 import {ArrowUpRight, Layers, Workflow, BookOpen, Link2} from 'lucide-react';
 import s from '@/styles/workspace.module.css';
-export default function Workspace(){const [email,setEmail]=useState(''),[state,setState]=useState('loading');useEffect(()=>{fetch('/api/account/session').then(async r=>{if(!r.ok)throw Error();const d=await r.json();if(!d.user){window.location.replace('/account?next=/workspace');return}setEmail(d.user.email);setState('ready')}).catch(()=>setState('error'))},[]);return <main className={s.app}><Head><title>工作台 · 织页 Studio</title></Head><aside><a className={s.brand} href="/">✳ 织页 <small>STUDIO</small></a><span>你的工作空间</span><a aria-current="page" href="/workspace">◈ 创作概览</a><a href="/graphic"><Layers size={16}/>图形设计</a><a href="/infinite_canvas"><Workflow size={16}/>无限画布</a><a href="/documents"><BookOpen size={16}/>知识与教程</a><a href="/studio/api"><Link2 size={16}/>Agent 接入文档</a><a className={s.account} href="/account">{email||'账户设置'} ↗</a></aside><section>{state==='loading'?<p role="status">正在打开你的工作台…</p>:state==='error'?<p role="alert">暂时无法读取账户。<a href="/account?next=/workspace">重新登录</a></p>:<><header><span>WORKSPACE / OVERVIEW</span><a href="/account">账户设置 ↗</a></header><p className={s.kicker}>MAKE SOMETHING THAT MATTERS.</p><h1>今天，让哪个想法成形？</h1><p className={s.sub}>选一个空间，开始你的下一次创作。</p><div className={s.grid}><a href="/graphic"><Layers/><small>GRAPHIC</small><h2>图形设计</h2><p>在文字、图形与图像之间，找到你的表达。</p><div className={s.poster}>Ideas,<br/><i>in shape.</i><b>✳</b></div><strong>打开编辑器 <ArrowUpRight size={18}/></strong></a><a href="/infinite_canvas"><Workflow/><small>INFINITE CANVAS</small><h2>无限画布</h2><p>收集灵感、连接参考，让思路自由生长。</p><div className={s.canvas}><span>灵感</span>⟶<span>参考</span>⟶<span>作品</span></div><strong>打开画布 <ArrowUpRight size={18}/></strong></a></div><div className={s.agent}><Link2/><div><h3>带上你的 coding agent</h3><p>从接入文档开始，使用已有的创作 API。连接由你的 Agent 发起。</p></div><a href="/studio/api">查看文档 ↗</a></div><p className={s.hint}>编辑器草稿保存在当前浏览器。更换设备前，请先导出项目备份。</p></>}</section></main>}
+export default function Workspace(){const [email,setEmail]=useState(''),[state,setState]=useState('loading');useEffect(()=>{fetch('/api/account/session').then(async r=>{if(!r.ok)throw Error();const d=await r.json();if(!d.user){window.location.replace('/account?next=/workspace');return}setEmail(d.user.email);setState('ready')}).catch(()=>setState('error'))},[]);return <main className={s.app}><Head><title>工作台 · 啡跃 Studio</title></Head><aside><a className={s.brand} href="/"><Brand/></a><span>你的工作空间</span><a aria-current="page" href="/workspace">◈ 创作概览</a><a href="/graphic"><Layers size={16}/>图形设计</a><a href="/infinite_canvas"><Workflow size={16}/>无限画布</a><a href="/documents"><BookOpen size={16}/>知识与教程</a><a href="/studio/api"><Link2 size={16}/>Agent 接入文档</a><a className={s.account} href="/account">{email||'账户设置'} ↗</a></aside><section>{state==='loading'?<p role="status">正在打开你的工作台…</p>:state==='error'?<p role="alert">暂时无法读取账户。<a href="/account?next=/workspace">重新登录</a></p>:<><header><span>WORKSPACE / OVERVIEW</span><ThemeToggle/><a href="/account">账户设置 ↗</a></header><p className={s.kicker}>MAKE SOMETHING THAT MATTERS.</p><h1>今天，让哪个想法成形？</h1><p className={s.sub}>选一个空间，开始你的下一次创作。</p><div className={s.grid}><a href="/graphic"><Layers/><small>GRAPHIC</small><h2>图形设计</h2><p>在文字、图形与图像之间，找到你的表达。</p><div className={s.poster}>Ideas,<br/><i>in shape.</i><b>✳</b></div><strong>打开编辑器 <ArrowUpRight size={18}/></strong></a><a href="/infinite_canvas"><Workflow/><small>INFINITE CANVAS</small><h2>无限画布</h2><p>收集灵感、连接参考，让思路自由生长。</p><div className={s.canvas}><span>灵感</span>⟶<span>参考</span>⟶<span>作品</span></div><strong>打开画布 <ArrowUpRight size={18}/></strong></a></div><div className={s.agent}><Link2/><div><h3>带上你的 coding agent</h3><p>从接入文档开始，使用已有的创作 API。连接由你的 Agent 发起。</p></div><a href="/studio/api">查看文档 ↗</a></div><p className={s.hint}>编辑器草稿保存在当前浏览器。更换设备前，请先导出项目备份。</p></>}</section></main>}
diff --git a/apps/waterfall-wiki/src/styles/brand.css b/apps/waterfall-wiki/src/styles/brand.css
new file mode 100644
index 0000000..e539c99
--- /dev/null
+++ b/apps/waterfall-wiki/src/styles/brand.css
@@ -0,0 +1,21 @@
+/* Shared chrome uses the canonical package tokens; artwork keeps its own palette. */
+html,body{background:var(--background);color:var(--foreground);color-scheme:inherit}
+body{margin:0}
+.endoleap-brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;line-height:1.15;vertical-align:middle;letter-spacing:normal;font-weight:650}
+.endoleap-brand .endoleap-mark{width:32px;height:32px;object-fit:contain;flex-shrink:0}
+.endoleap-mark-dark{display:none!important}
+[data-theme$="-dark"] .endoleap-mark-light{display:none!important}
+[data-theme$="-dark"] .endoleap-mark-dark{display:block!important}
+.endoleap-wordmark{display:flex!important;flex-direction:column;font-size:17px!important;color:var(--foreground-strong)!important;letter-spacing:.02em!important;margin:0!important;gap:3px}
+.endoleap-wordmark small{display:block;font-size:9px;font-weight:500;letter-spacing:.08em;color:var(--muted-foreground)}
+button.endoleap-theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--border);background:var(--surface);color:var(--foreground);border-radius:8px;padding:7px 9px;font-size:12px;line-height:1.2;flex-shrink:0;cursor:pointer}
+button.endoleap-theme-toggle:hover{background:var(--row-hover)}
+:where(a,button,input,textarea,select):focus-visible{outline:2px solid var(--ring);outline-offset:3px}
+::selection{background:var(--selection);color:var(--foreground)}
+@media(max-width:600px){.endoleap-theme-toggle span{display:none}.endoleap-brand{gap:5px}.endoleap-brand .endoleap-mark{width:26px;height:26px}.endoleap-wordmark{font-size:14px!important}}
+
+button:disabled{cursor:default}
+input,textarea,select{accent-color:var(--primary)}
+
+.primary-button,.auth-submit{background:var(--primary);color:var(--primary-foreground)}
+.primary-button:hover,.auth-submit:hover{background:var(--primary-hover)}
diff --git a/apps/waterfall-wiki/src/styles/documents.module.css b/apps/waterfall-wiki/src/styles/documents.module.css
index 626814a..58c0557 100644
--- a/apps/waterfall-wiki/src/styles/documents.module.css
+++ b/apps/waterfall-wiki/src/styles/documents.module.css
@@ -1 +1 @@
-.page{max-width:850px;margin:0 auto;padding:40px 24px 100px;color:#202326;font-family:system-ui,sans-serif;line-height:1.7}.page nav{margin-bottom:32px}.page a{color:#276750}.page h1{font-size:36px;letter-spacing:-1px}.page label{display:block;margin:18px 0}.page input:not([type=checkbox]),.page textarea,.page select{display:block;width:100%;padding:12px;border:1px solid #d8ded8;border-radius:8px;background:#fff;color:inherit;font:inherit;box-sizing:border-box}.page button{padding:10px 18px;background:#264e40;color:#fff;border:0;border-radius:7px;cursor:pointer}.page article{border-top:1px solid #d8ded8;padding:22px 0}.page pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f1f4ef;padding:18px}.body{white-space:pre-wrap}.page fieldset{border:1px solid #d8ded8;border-radius:8px;margin:14px 0}
+.page{max-width:850px;margin:0 auto;padding:40px 24px 100px;color:var(--foreground-strong);font-family:system-ui,sans-serif;line-height:1.7}.page nav{margin-bottom:32px}.page a{color:var(--primary)}.page h1{font-size:36px;letter-spacing:-1px}.page label{display:block;margin:18px 0}.page input:not([type=checkbox]),.page textarea,.page select{display:block;width:100%;padding:12px;border:1px solid var(--input);border-radius:8px;background:var(--surface);color:inherit;font:inherit;box-sizing:border-box}.page button{padding:10px 18px;background:var(--primary);color:var(--primary-foreground);border:0;border-radius:7px;cursor:pointer}.page article{border-top:1px solid var(--border);padding:22px 0}.page pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--selection);padding:18px}.body{white-space:pre-wrap}.page fieldset{border:1px solid var(--border);border-radius:8px;margin:14px 0}
diff --git a/apps/waterfall-wiki/src/styles/globals.css b/apps/waterfall-wiki/src/styles/globals.css
index cbc8c49..bc67d95 100644
--- a/apps/waterfall-wiki/src/styles/globals.css
+++ b/apps/waterfall-wiki/src/styles/globals.css
@@ -1,68 +1,70 @@
 @import "tailwindcss";
+@import "@endoleap/brand/themes.css";
+@import "@endoleap/brand/tailwind.css";
 @theme{--font-sans:"Inter","PingFang SC","Microsoft YaHei",Arial,sans-serif}
-:root{--ink:#202020;--muted:#767676;--line:#e9e9e9;--accent:#ff2442;--green:#2f702f}*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font:16px var(--font-sans);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit;border:0;background:transparent}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible{outline:3px solid #b4d5fa;outline-offset:3px}input,textarea,select{outline:none}img{display:block;max-width:100%}.sidebar{position:fixed;inset:0 auto 0 0;width:208px;display:flex;flex-direction:column;padding:30px 16px 24px;border-right:1px solid #f0f0f0;background:#fff;z-index:30;overflow-y:auto}.brand{display:flex;align-items:center;gap:10px;padding:0 8px;margin-bottom:35px;letter-spacing:-1px}.brand strong{font-size:23px;font-weight:800}.brand-mark{display:block;width:40px;height:40px;flex-shrink:0}.nav-group{margin-bottom:14px}.nav-group>p{font-size:12px;color:#999;margin:10px 18px 6px}.nav-item{display:flex;align-items:center;gap:16px;padding:13px 20px;min-height:51px;border-radius:30px;font-size:17px;font-weight:500;margin:2px 0;transition:background .15s}.nav-item svg{flex-shrink:0}.nav-item:hover{background:#f7f7f7}.nav-item.active{background:#f1f1f1;font-weight:700}.sidebar-bottom{margin-top:auto;padding-top:20px}.import-link{display:flex;align-items:center;gap:13px;padding:15px 18px;border-radius:28px;font-size:15px}.import-link:hover{background:#f2f2f2}.import-link svg:last-child{margin-left:auto}.main-content{margin-left:208px;padding:0 28px 30px}.global-topbar{height:96px;display:flex;align-items:center;gap:20px;position:sticky;top:0;z-index:15;background:#fff;margin:0 -4px 18px;padding:16px 4px}.global-search{flex:1;height:56px;background:#ededeb;border-radius:30px;display:flex;align-items:center;gap:12px;padding:0 20px;color:#70706d}.global-search:focus-within{outline:4px solid #b9d9fa}.global-search input{width:100%;min-width:0;border:0;background:transparent;color:#222;font-size:16px}.global-search input::placeholder{color:#777}.global-search button{display:grid;place-items:center}.page-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0 28px}.page-header h1{font-size:28px;font-weight:700;margin:0 0 12px;letter-spacing:-.5px}.page-header p{font-size:14px;color:#767676;margin:0;line-height:1.8}.eyebrow,.brand-caption,.page-footer{display:none}.feed-heading h1{font-size:24px}.feed-heading{margin-bottom:24px}.feed-toolbar{display:flex;justify-content:space-between;align-items:center;margin:0 0 24px;gap:16px}.feed-tabs{display:flex;gap:10px;overflow:auto;white-space:nowrap;min-height:46px}.feed-tabs a{padding:12px 18px;border-radius:25px;font-size:16px;color:#666;font-weight:500}.feed-tabs a:hover{background:#f7f7f7}.feed-tabs a.selected{color:#111;background:#f1f1f1;font-weight:650}.sort-label{display:flex;align-items:center;gap:6px;font-size:12px;color:#8a8a8a;white-space:nowrap;padding-right:5px}.masonry{display:grid;gap:20px;align-items:start}.masonry-column{min-width:0}.post-card{display:block;width:100%;margin-bottom:26px}.post-cover{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#f1f1f1}.post-cover:after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .18s;pointer-events:none}.post-card:hover .post-cover:after{opacity:.08}.post-cover>img{width:100%;height:100%;object-fit:cover}.post-card h3{font-size:15px;line-height:1.55;font-weight:550;margin:10px 8px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.post-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;white-space:nowrap;line-height:18px;padding:0 8px;font-size:12px;color:#888}.post-meta>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.type-dot{display:inline-block;vertical-align:-2px;margin-right:6px;width:15px;height:15px;border-radius:50%;background:#e5e5e5;border:4px solid #f2f2f2}.type-dot.video{background:#c9ceda}.type-dot.audio{background:#c8baa8}.post-meta time{font-size:11px;flex-shrink:0}.post-meta>svg{flex-shrink:0}.cover-count,.cover-badge{position:absolute;right:11px;top:11px;color:white;font-size:12px;background:#0005;padding:5px 8px;border-radius:14px;display:flex;align-items:center;gap:4px;z-index:1}.cover-badge{top:auto;bottom:11px}.cover-audio{background:#ede8e1;aspect-ratio:1}.waveform{display:flex;gap:3px;align-items:center;justify-content:center;height:100%;padding:20px}.waveform i{width:3px;background:#8f7b66;border-radius:5px}.cover-symbol{display:flex;align-items:center;justify-content:center;flex-direction:column;height:100%;gap:14px;color:#999}.empty-state{min-height:390px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:40px 20px;color:#aaa}.empty-state h2{color:#333;font-size:21px;font-weight:600;margin:22px 0 12px}.empty-state p{white-space:pre-line;line-height:1.8;color:#888;font-size:14px;margin:0 0 24px}.empty-state>small{font-size:12px;color:#aaa;margin-top:22px}.empty-art{position:relative;display:flex;align-items:center;justify-content:center;color:#777;width:110px;height:94px;background:#f5f5f5;border:1px solid #e7e7e7;border-radius:18px;transform:rotate(-5deg)}.empty-art>span{position:absolute;inset:-8px 10px 10px -8px;border:1px solid #ebebeb;border-radius:17px;transform:rotate(12deg);z-index:-1}.empty-art>i,.empty-art>b{position:absolute;width:36px;height:36px;background:white;border:1px solid #e7e7e7;border-radius:10px;display:flex;align-items:center;justify-content:center;right:-17px;bottom:2px;transform:rotate(12deg)}.empty-art>b{top:-12px;left:-17px;transform:rotate(-12deg)}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 23px;border-radius:26px;background:var(--accent);color:white;font-size:15px;font-weight:600;border:1px solid transparent;min-height:48px}.primary-button:hover{background:#e91e3b}.secondary-button{background:#f1f1f1;color:#333}.secondary-button:hover{background:#e7e7e7}.text-link{font-size:13px;display:inline-flex;align-items:center;gap:7px;color:#777}.breadcrumbs{font-size:14px;color:#888;margin:0 0 24px}.breadcrumbs a:hover{text-decoration:underline}.load-more{text-align:center;margin:30px 0}.load-more button{padding:14px 25px;background:#f1f1f1;border-radius:25px;display:inline-flex;align-items:center;gap:12px;font-size:14px;color:#555}.icon-button{background:white;border:1px solid #e8e8e8;border-radius:50%;padding:10px;display:inline-flex;align-items:center;justify-content:center}.mobile-menu{display:none}.detail-top{display:flex;justify-content:space-between;margin:8px 0 22px;font-size:14px;color:#777}.detail-top>a{display:flex;align-items:center;gap:8px}.detail-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.8fr);gap:0;border:1px solid #ededed;border-radius:26px;overflow:hidden;box-shadow:0 6px 25px #00000009;max-width:1250px;margin:0 auto}.detail-media{min-width:0;background:#f8f8f8}.media-stage{position:relative;background:#f7f7f7;min-height:480px;height:70vh;overflow:hidden;display:flex;align-items:center;justify-content:center}.media-stage>img,.media-stage>video{max-width:100%;max-height:100%;object-fit:contain}.stage-video{background:#191919}.gallery-prev,.gallery-next{position:absolute;top:50%;left:14px;opacity:.85}.gallery-next{left:auto;right:14px}.gallery-position{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:12px;border-radius:20px;background:#0006;color:white;padding:6px 12px}.thumbnail-strip{display:flex;gap:10px;padding:18px;overflow:auto}.thumbnail-strip button{height:64px;width:64px;flex-shrink:0;background:#eee;border-radius:10px;overflow:hidden;border:2px solid transparent;color:#888;font-size:12px}.thumbnail-strip button.selected{border-color:#333}.thumbnail-strip img{height:100%;width:100%;object-fit:cover}.detail-info{padding:30px;min-width:0;background:white}.detail-info h1{font-size:24px;line-height:1.5;font-weight:650;margin:0 0 15px}.detail-date{font-size:12px;color:#999;line-height:1.8}.detail-date span{margin-left:9px}.description p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.9;color:#444;margin:26px 0}.tag-list{display:flex;gap:8px;flex-wrap:wrap}.tag-list>a{font-size:14px;color:#31516c;padding:4px 0}.asset-facts{border-top:1px solid var(--line);margin-top:32px;padding-top:22px}.asset-facts h3{font-size:14px;font-weight:550}.asset-facts dl{display:grid;grid-template-columns:65px 1fr;font-size:12px;gap:14px;margin:20px 0}.asset-facts dt{color:#999}.asset-facts dd{color:#666;margin:0;overflow-wrap:anywhere}.asset-facts .secondary-button{font-size:12px;padding:10px 14px;min-height:38px;margin-right:14px}.pill{font-size:12px;display:inline-flex;align-items:center;gap:6px;background:#f1f1f1;color:#555;border-radius:18px;padding:7px 11px}.video-companion{padding:18px;margin:0 18px 18px;background:white;border:1px solid #e8e8e8;border-radius:16px}.video-companion>div:first-child{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.video-companion small{font-size:12px;color:#888}.bound-audio{margin-top:20px;display:grid;gap:12px;font-size:14px;color:#555}.bound-audio>span{display:flex;align-items:center;gap:7px}.bound-audio audio{width:100%;height:42px}.audio-stage{text-align:center;padding:35px;width:100%;color:#555}.audio-stage h3{font-size:15px;font-weight:500;margin:30px 0 20px}.audio-stage audio{width:100%;max-width:400px}.vinyl{height:180px;width:180px;border-radius:50%;margin:auto;background:repeating-radial-gradient(circle,#444 0 2px,#292929 3px 4px);display:grid;place-items:center;box-shadow:0 12px 25px #0002}.vinyl>span{height:66px;width:66px;border-radius:50%;background:#c9b2a0;border:25px solid #e8d9cf}.editor-panel{max-width:1000px;margin:0 auto;padding:32px;border:1px solid #eee;border-radius:24px;box-shadow:0 5px 20px #00000005}.kind-picker{display:flex;gap:8px;margin-bottom:25px}.kind-picker button{display:flex;align-items:center;gap:8px;padding:13px 24px;border-radius:26px;color:#666;font-size:15px;background:#f4f4f4}.kind-picker .selected{background:#222;color:white}.drop-zone{position:relative;cursor:pointer;border:2px dashed #d4d4d4;background:#f5f5f5;border-radius:20px;min-height:230px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:17px;color:#888}.drop-zone:hover{background:#efefef}.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.drop-zone strong{font-size:17px;color:#444;font-weight:600}.drop-zone>span:last-child{font-size:13px}.upload-circle{width:54px;height:54px;border-radius:50%;background:white;display:grid;place-items:center;color:#555}.form-field{margin-top:27px}.form-field>label,.compact-form>label{display:block;font-size:14px;color:#444;margin-bottom:12px}.form-field small{color:#999;font-size:12px;margin-left:6px}.form-field input,.form-field textarea,.compact-form input,.compact-form select{display:block;width:100%;border:1px solid #d9d9d9;padding:14px 16px;border-radius:14px;color:#333;background:#fff;font-size:15px}.form-field input:focus,.form-field textarea:focus,.compact-form input:focus,.compact-form select:focus{outline:3px solid #b9d9fa;border-color:#9baec5}.form-field textarea{resize:vertical;line-height:1.8}.form-field input::placeholder,.form-field textarea::placeholder,.compact-form input::placeholder{color:#aaa}.form-actions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:25px;margin-top:27px;gap:15px}.form-actions>span{font-size:12px;color:#999}.form-note{font-size:13px;color:#888;line-height:1.8;margin:20px 0}.file-list{list-style:none;padding:0;margin:15px 0}.file-list li{display:flex;gap:10px;align-items:center;font-size:14px;color:#555;padding:12px;border-bottom:1px solid var(--line)}.file-list li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.file-list small{font-size:12px;color:#999}.file-list button{display:flex}.tag-picker{display:flex;gap:10px;flex-wrap:wrap}.tag-picker>label{display:flex;align-items:center;gap:8px;font-size:13px;padding:10px 14px;border:1px solid #ddd;border-radius:22px;color:#666}.tag-picker input{width:14px;accent-color:#333}.error-message{color:#b7263f;font-size:14px;padding:14px;background:#fff0f3;border-radius:12px}.surface{border:1px solid #e9e9e9;border-radius:22px;padding:28px}.surface>h2{font-size:20px;font-weight:650;margin:0 0 24px}.surface h2>small{font-size:13px;margin-left:14px;color:#999;font-weight:400}.management-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(290px,.8fr);gap:25px;align-items:start}.compact-form>label{margin-top:24px}.compact-form input,.compact-form select{margin-top:10px}.compact-form>label small{font-size:12px;display:block;margin-top:10px;color:#999}.compact-form>button{margin-top:20px}.taxonomy-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:18px 0;font-size:15px;color:#555}.taxonomy-row strong{font-weight:550}.taxonomy-row code{font-size:12px;color:#aaa;margin-left:auto;overflow-wrap:anywhere}.quiet-empty{padding:70px 10px;text-align:center;font-size:14px;color:#999}.asset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.asset-tile{overflow:hidden}.asset-preview{height:245px;background:#f4f4f4;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:18px}.asset-preview img,.asset-preview video{max-height:100%;width:100%;object-fit:contain}.asset-preview p{padding:20px;color:#666;font-size:14px;white-space:pre-wrap}.asset-preview audio{width:90%}.asset-tile-info{padding:13px 6px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.asset-tile h3{margin:0;width:100%;font-size:14px;font-weight:550;overflow-wrap:anywhere}.asset-tile-info>span{font-size:12px;color:#999}.asset-tile-info button{font-size:12px;display:flex;align-items:center;gap:5px;color:#555;margin-left:auto}.doodle-layout{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:start}.doodle-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.doodle-card{text-align:left;border:2px solid transparent;border-radius:20px;overflow:hidden;padding:0 0 15px;transition:transform .15s}.doodle-card:hover{transform:translateY(-3px)}.doodle-card.selected{border-color:#222}.doodle-card>div{aspect-ratio:1.15;background:#777c7b;display:grid;place-items:center;border-radius:18px}.doodle-card:nth-child(3n+2)>div{background:#a18b7e}.doodle-card:nth-child(3n)>div{background:#737a8b}.doodle-card svg{width:70%;height:80%}.doodle-card strong{font-size:16px;font-weight:600;display:block;margin:15px 13px 7px}.doodle-card small{display:block;font-size:12px;color:#888;margin:0 13px;line-height:1.6}.doodle-inspector{text-align:left;position:sticky;top:115px;padding:22px}.doodle-large{background:#777c7b;border-radius:18px;padding:25px;margin-bottom:24px}.doodle-large svg{width:100%;height:170px}.doodle-inspector h2{font-size:22px;margin:0 0 10px}.doodle-inspector>p{font-size:14px;color:#888;line-height:1.8}.swatches{display:flex;gap:15px;margin:26px 0}.swatches button{height:29px;width:29px;border-radius:50%;border:1px solid #ddd}.swatches button.selected{outline:2px solid #333;outline-offset:3px}.doodle-inspector>.primary-button,.doodle-inspector>.secondary-button{display:flex;width:100%;margin-top:12px;font-size:14px}.coded-detail{grid-template-columns:minmax(0,1fr)}
+:root{--ink:var(--foreground);--line:var(--border);--green:var(--selection)}*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--ink);font:16px var(--font-sans);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit;border:0;background:transparent}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible{outline:3px solid var(--ring);outline-offset:3px}input,textarea,select{outline:none}img{display:block;max-width:100%}.sidebar{position:fixed;inset:0 auto 0 0;width:208px;display:flex;flex-direction:column;padding:30px 16px 24px;border-right:1px solid var(--border);background:var(--surface);z-index:30;overflow-y:auto}.brand{display:flex;align-items:center;gap:10px;padding:0 8px;margin-bottom:35px;letter-spacing:-1px}.brand strong{font-size:23px;font-weight:800}.brand-mark{display:block;width:40px;height:40px;flex-shrink:0}.nav-group{margin-bottom:14px}.nav-group>p{font-size:12px;color:var(--muted-foreground);margin:10px 18px 6px}.nav-item{display:flex;align-items:center;gap:16px;padding:13px 20px;min-height:51px;border-radius:30px;font-size:17px;font-weight:500;margin:2px 0;transition:background .15s}.nav-item svg{flex-shrink:0}.nav-item:hover{background:var(--row-hover)}.nav-item.active{background:var(--selection);font-weight:700}.sidebar-bottom{margin-top:auto;padding-top:20px}.import-link{display:flex;align-items:center;gap:13px;padding:15px 18px;border-radius:28px;font-size:15px}.import-link:hover{background:var(--row-hover)}.import-link svg:last-child{margin-left:auto}.main-content{margin-left:208px;padding:0 28px 30px}.global-topbar{height:96px;display:flex;align-items:center;gap:20px;position:sticky;top:0;z-index:15;background:var(--surface);margin:0 -4px 18px;padding:16px 4px}.global-search{flex:1;height:56px;background:var(--surface-muted);border-radius:30px;display:flex;align-items:center;gap:12px;padding:0 20px;color:var(--muted-foreground)}.global-search:focus-within{outline:4px solid var(--ring)}.global-search input{width:100%;min-width:0;border:0;background:transparent;color:var(--foreground-strong);font-size:16px}.global-search input::placeholder{color:var(--muted-foreground)}.global-search button{display:grid;place-items:center}.page-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0 28px}.page-header h1{font-size:28px;font-weight:700;margin:0 0 12px;letter-spacing:-.5px}.page-header p{font-size:14px;color:var(--muted-foreground);margin:0;line-height:1.8}.eyebrow,.brand-caption,.page-footer{display:none}.feed-heading h1{font-size:24px}.feed-heading{margin-bottom:24px}.feed-toolbar{display:flex;justify-content:space-between;align-items:center;margin:0 0 24px;gap:16px}.feed-tabs{display:flex;gap:10px;overflow:auto;white-space:nowrap;min-height:46px}.feed-tabs a{padding:12px 18px;border-radius:25px;font-size:16px;color:var(--foreground);font-weight:500}.feed-tabs a:hover{background:var(--row-hover)}.feed-tabs a.selected{color:var(--foreground-strong);background:var(--selection);font-weight:650}.sort-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted-foreground);white-space:nowrap;padding-right:5px}.masonry{display:grid;gap:20px;align-items:start}.masonry-column{min-width:0}.post-card{display:block;width:100%;margin-bottom:26px}.post-cover{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--surface)}.post-cover:after{content:"";position:absolute;inset:0;background:var(--surface);opacity:0;transition:opacity .18s;pointer-events:none}.post-card:hover .post-cover:after{opacity:.08}.post-cover>img{width:100%;height:100%;object-fit:cover}.post-card h3{font-size:15px;line-height:1.55;font-weight:550;margin:10px 8px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.post-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;white-space:nowrap;line-height:18px;padding:0 8px;font-size:12px;color:var(--muted-foreground)}.post-meta>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.type-dot{display:inline-block;vertical-align:-2px;margin-right:6px;width:15px;height:15px;border-radius:50%;background:var(--surface-muted);border:4px solid var(--border)}.type-dot.video{background:var(--selection)}.type-dot.audio{background:var(--selection)}.post-meta time{font-size:11px;flex-shrink:0}.post-meta>svg{flex-shrink:0}.cover-count,.cover-badge{position:absolute;right:11px;top:11px;color:var(--foreground);font-size:12px;background:var(--surface);padding:5px 8px;border-radius:14px;display:flex;align-items:center;gap:4px;z-index:1}.cover-badge{top:auto;bottom:11px}.cover-audio{background:var(--selection);aspect-ratio:1}.waveform{display:flex;gap:3px;align-items:center;justify-content:center;height:100%;padding:20px}.waveform i{width:3px;background:var(--surface-muted);border-radius:5px}.cover-symbol{display:flex;align-items:center;justify-content:center;flex-direction:column;height:100%;gap:14px;color:var(--muted-foreground)}.empty-state{min-height:390px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:40px 20px;color:var(--muted-foreground)}.empty-state h2{color:var(--foreground-strong);font-size:21px;font-weight:600;margin:22px 0 12px}.empty-state p{white-space:pre-line;line-height:1.8;color:var(--muted-foreground);font-size:14px;margin:0 0 24px}.empty-state>small{font-size:12px;color:var(--muted-foreground);margin-top:22px}.empty-art{position:relative;display:flex;align-items:center;justify-content:center;color:var(--muted-foreground);width:110px;height:94px;background:var(--surface);border:1px solid var(--border);border-radius:18px;transform:rotate(-5deg)}.empty-art>span{position:absolute;inset:-8px 10px 10px -8px;border:1px solid var(--border);border-radius:17px;transform:rotate(12deg);z-index:-1}.empty-art>i,.empty-art>b{position:absolute;width:36px;height:36px;background:var(--surface);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;right:-17px;bottom:2px;transform:rotate(12deg)}.empty-art>b{top:-12px;left:-17px;transform:rotate(-12deg)}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 23px;border-radius:26px;background:var(--primary);color:var(--primary-foreground);font-size:15px;font-weight:600;border:1px solid transparent;min-height:48px}.primary-button:hover{background:var(--primary-hover)}.secondary-button{background:var(--surface);color:var(--foreground-strong)}.secondary-button:hover{background:var(--row-hover)}.text-link{font-size:13px;display:inline-flex;align-items:center;gap:7px;color:var(--muted-foreground)}.breadcrumbs{font-size:14px;color:var(--muted-foreground);margin:0 0 24px}.breadcrumbs a:hover{text-decoration:underline}.load-more{text-align:center;margin:30px 0}.load-more button{padding:14px 25px;background:var(--surface);border-radius:25px;display:inline-flex;align-items:center;gap:12px;font-size:14px;color:var(--foreground)}.icon-button{background:var(--surface);border:1px solid var(--border);border-radius:50%;padding:10px;display:inline-flex;align-items:center;justify-content:center}.mobile-menu{display:none}.detail-top{display:flex;justify-content:space-between;margin:8px 0 22px;font-size:14px;color:var(--muted-foreground)}.detail-top>a{display:flex;align-items:center;gap:8px}.detail-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.8fr);gap:0;border:1px solid var(--border);border-radius:26px;overflow:hidden;box-shadow:0 6px 25px var(--shadow);max-width:1250px;margin:0 auto}.detail-media{min-width:0;background:var(--surface)}.media-stage{position:relative;background:var(--surface);min-height:480px;height:70vh;overflow:hidden;display:flex;align-items:center;justify-content:center}.media-stage>img,.media-stage>video{max-width:100%;max-height:100%;object-fit:contain}.stage-video{background:var(--surface)}.gallery-prev,.gallery-next{position:absolute;top:50%;left:14px;opacity:.85}.gallery-next{left:auto;right:14px}.gallery-position{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:12px;border-radius:20px;background:var(--surface);color:var(--foreground);padding:6px 12px}.thumbnail-strip{display:flex;gap:10px;padding:18px;overflow:auto}.thumbnail-strip button{height:64px;width:64px;flex-shrink:0;background:var(--surface);border-radius:10px;overflow:hidden;border:2px solid transparent;color:var(--muted-foreground);font-size:12px}.thumbnail-strip button.selected{border-color:var(--selection-border)}.thumbnail-strip img{height:100%;width:100%;object-fit:cover}.detail-info{padding:30px;min-width:0;background:var(--surface)}.detail-info h1{font-size:24px;line-height:1.5;font-weight:650;margin:0 0 15px}.detail-date{font-size:12px;color:var(--muted-foreground);line-height:1.8}.detail-date span{margin-left:9px}.description p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.9;color:var(--foreground);margin:26px 0}.tag-list{display:flex;gap:8px;flex-wrap:wrap}.tag-list>a{font-size:14px;color:var(--foreground);padding:4px 0}.asset-facts{border-top:1px solid var(--line);margin-top:32px;padding-top:22px}.asset-facts h3{font-size:14px;font-weight:550}.asset-facts dl{display:grid;grid-template-columns:65px 1fr;font-size:12px;gap:14px;margin:20px 0}.asset-facts dt{color:var(--muted-foreground)}.asset-facts dd{color:var(--foreground);margin:0;overflow-wrap:anywhere}.asset-facts .secondary-button{font-size:12px;padding:10px 14px;min-height:38px;margin-right:14px}.pill{font-size:12px;display:inline-flex;align-items:center;gap:6px;background:var(--surface);color:var(--foreground);border-radius:18px;padding:7px 11px}.video-companion{padding:18px;margin:0 18px 18px;background:var(--surface);border:1px solid var(--border);border-radius:16px}.video-companion>div:first-child{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.video-companion small{font-size:12px;color:var(--muted-foreground)}.bound-audio{margin-top:20px;display:grid;gap:12px;font-size:14px;color:var(--foreground)}.bound-audio>span{display:flex;align-items:center;gap:7px}.bound-audio audio{width:100%;height:42px}.audio-stage{text-align:center;padding:35px;width:100%;color:var(--foreground)}.audio-stage h3{font-size:15px;font-weight:500;margin:30px 0 20px}.audio-stage audio{width:100%;max-width:400px}.vinyl{height:180px;width:180px;border-radius:50%;margin:auto;background:repeating-radial-gradient(circle,var(--surface) 0 2px,var(--surface) 3px 4px);display:grid;place-items:center;box-shadow:0 12px 25px var(--shadow)}.vinyl>span{height:66px;width:66px;border-radius:50%;background:var(--selection);border:25px solid var(--selection-border)}.editor-panel{max-width:1000px;margin:0 auto;padding:32px;border:1px solid var(--border);border-radius:24px;box-shadow:0 5px 20px var(--shadow)}.kind-picker{display:flex;gap:8px;margin-bottom:25px}.kind-picker button{display:flex;align-items:center;gap:8px;padding:13px 24px;border-radius:26px;color:var(--foreground);font-size:15px;background:var(--surface)}.kind-picker .selected{background:var(--selection);color:var(--foreground)}.drop-zone{position:relative;cursor:pointer;border:2px dashed var(--border);background:var(--surface);border-radius:20px;min-height:230px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:17px;color:var(--muted-foreground)}.drop-zone:hover{background:var(--row-hover)}.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.drop-zone strong{font-size:17px;color:var(--foreground);font-weight:600}.drop-zone>span:last-child{font-size:13px}.upload-circle{width:54px;height:54px;border-radius:50%;background:var(--surface);display:grid;place-items:center;color:var(--foreground)}.form-field{margin-top:27px}.form-field>label,.compact-form>label{display:block;font-size:14px;color:var(--foreground);margin-bottom:12px}.form-field small{color:var(--muted-foreground);font-size:12px;margin-left:6px}.form-field input,.form-field textarea,.compact-form input,.compact-form select{display:block;width:100%;border:1px solid var(--input);padding:14px 16px;border-radius:14px;color:var(--foreground-strong);background:var(--surface);font-size:15px}.form-field input:focus,.form-field textarea:focus,.compact-form input:focus,.compact-form select:focus{outline:3px solid var(--ring);border-color:var(--selection-border)}.form-field textarea{resize:vertical;line-height:1.8}.form-field input::placeholder,.form-field textarea::placeholder,.compact-form input::placeholder{color:var(--muted-foreground)}.form-actions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:25px;margin-top:27px;gap:15px}.form-actions>span{font-size:12px;color:var(--muted-foreground)}.form-note{font-size:13px;color:var(--muted-foreground);line-height:1.8;margin:20px 0}.file-list{list-style:none;padding:0;margin:15px 0}.file-list li{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--foreground);padding:12px;border-bottom:1px solid var(--line)}.file-list li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.file-list small{font-size:12px;color:var(--muted-foreground)}.file-list button{display:flex}.tag-picker{display:flex;gap:10px;flex-wrap:wrap}.tag-picker>label{display:flex;align-items:center;gap:8px;font-size:13px;padding:10px 14px;border:1px solid var(--border);border-radius:22px;color:var(--foreground)}.tag-picker input{width:14px;accent-color:var(--ring)}.error-message{color:var(--danger);font-size:14px;padding:14px;background:var(--danger-background);border-radius:12px}.surface{border:1px solid var(--border);border-radius:22px;padding:28px}.surface>h2{font-size:20px;font-weight:650;margin:0 0 24px}.surface h2>small{font-size:13px;margin-left:14px;color:var(--muted-foreground);font-weight:400}.management-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(290px,.8fr);gap:25px;align-items:start}.compact-form>label{margin-top:24px}.compact-form input,.compact-form select{margin-top:10px}.compact-form>label small{font-size:12px;display:block;margin-top:10px;color:var(--muted-foreground)}.compact-form>button{margin-top:20px}.taxonomy-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:18px 0;font-size:15px;color:var(--foreground)}.taxonomy-row strong{font-weight:550}.taxonomy-row code{font-size:12px;color:var(--muted-foreground);margin-left:auto;overflow-wrap:anywhere}.quiet-empty{padding:70px 10px;text-align:center;font-size:14px;color:var(--muted-foreground)}.asset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.asset-tile{overflow:hidden}.asset-preview{height:245px;background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:18px}.asset-preview img,.asset-preview video{max-height:100%;width:100%;object-fit:contain}.asset-preview p{padding:20px;color:var(--foreground);font-size:14px;white-space:pre-wrap}.asset-preview audio{width:90%}.asset-tile-info{padding:13px 6px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.asset-tile h3{margin:0;width:100%;font-size:14px;font-weight:550;overflow-wrap:anywhere}.asset-tile-info>span{font-size:12px;color:var(--muted-foreground)}.asset-tile-info button{font-size:12px;display:flex;align-items:center;gap:5px;color:var(--foreground);margin-left:auto}.doodle-layout{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:start}.doodle-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.doodle-card{text-align:left;border:2px solid transparent;border-radius:20px;overflow:hidden;padding:0 0 15px;transition:transform .15s}.doodle-card:hover{transform:translateY(-3px)}.doodle-card.selected{border-color:var(--selection-border)}.doodle-card>div{aspect-ratio:1.15;background:#777c7b;display:grid;place-items:center;border-radius:18px}.doodle-card:nth-child(3n+2)>div{background:var(--surface-muted)}.doodle-card:nth-child(3n)>div{background:var(--surface-muted)}.doodle-card svg{width:70%;height:80%}.doodle-card strong{font-size:16px;font-weight:600;display:block;margin:15px 13px 7px}.doodle-card small{display:block;font-size:12px;color:var(--muted-foreground);margin:0 13px;line-height:1.6}.doodle-inspector{text-align:left;position:sticky;top:115px;padding:22px}.doodle-large{background:#777c7b;border-radius:18px;padding:25px;margin-bottom:24px}.doodle-large svg{width:100%;height:170px}.doodle-inspector h2{font-size:22px;margin:0 0 10px}.doodle-inspector>p{font-size:14px;color:var(--muted-foreground);line-height:1.8}.swatches{display:flex;gap:15px;margin:26px 0}.swatches button{height:29px;width:29px;border-radius:50%;border:1px solid #ddd}.swatches button.selected{outline:2px solid #333;outline-offset:3px}.doodle-inspector>.primary-button,.doodle-inspector>.secondary-button{display:flex;width:100%;margin-top:12px;font-size:14px}.coded-detail{grid-template-columns:minmax(0,1fr)}
 @media(min-width:1800px){.main-content{padding-left:35px;padding-right:35px}.doodle-catalog{grid-template-columns:repeat(4,minmax(0,1fr))}.asset-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
 @media(max-width:1200px){.sidebar{width:180px;padding:26px 12px}.main-content{margin-left:180px;padding:0 24px 25px}.brand{gap:7px}.brand strong{font-size:20px}.brand-mark{height:35px;width:35px}.nav-item{font-size:16px;padding:13px 17px;gap:13px}.asset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.doodle-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-layout{grid-template-columns:minmax(0,1fr) minmax(285px,.8fr)}.detail-info{padding:25px}}
 @media(max-width:950px){.sidebar{width:88px;padding:26px 14px}.brand{padding:0;margin:0 auto 30px}.brand strong,.nav-item span,.nav-group>p,.import-link span,.import-link svg:last-child{display:none}.nav-item{justify-content:center;padding:16px 10px;min-height:56px;gap:0}.nav-group{margin-bottom:10px}.import-link{justify-content:center;padding:15px 10px}.main-content{margin-left:88px;padding:0 22px 25px}.detail-layout,.management-grid{grid-template-columns:1fr}.media-stage{height:65vh;min-height:400px}.doodle-layout{grid-template-columns:1fr 260px;gap:20px}.doodle-catalog{gap:16px}.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-header p{font-size:13px}.sort-label{display:none}.feed-tabs{gap:3px}.feed-tabs a{font-size:14px;padding:11px 14px}}
-@media(max-width:650px){.sidebar{transform:translateX(-100%);width:210px;padding:25px 15px;transition:transform .2s}.sidebar.is-open{transform:translateX(0)}.sidebar .brand{margin:0 10px 25px}.sidebar .brand strong,.sidebar .nav-item span,.sidebar .nav-group>p,.sidebar .import-link span{display:block}.sidebar .nav-item,.sidebar .import-link{justify-content:flex-start;gap:15px;padding:13px 18px}.main-content{margin-left:0;padding:0 16px 25px}.global-topbar{height:83px;padding-left:45px;gap:12px;margin-bottom:18px}.global-search{height:46px;padding:0 13px;gap:8px}.global-search>svg{width:20px;flex-shrink:0}.global-search input{font-size:14px}.mobile-menu{display:flex;position:fixed;top:22px;left:12px;z-index:40;border:0;background:white}.mobile-menu[aria-expanded="true"]{top:28px;left:169px;padding:4px}.nav-scrim{position:fixed;inset:0;background:#0005;z-index:25}.page-header{margin:0 0 24px;align-items:flex-start;flex-direction:column;gap:16px}.page-header h1{font-size:25px}.page-header p{font-size:13px}.feed-tabs a{font-size:14px;padding:10px 14px}.feed-toolbar{margin-bottom:19px}.post-cover{border-radius:14px}.masonry{gap:14px}.post-card h3{font-size:14px;margin:9px 4px 7px}.post-meta{font-size:11px;padding:0 4px}.empty-state p{font-size:13px}.empty-state>small{font-size:11px}.detail-top{margin-top:0;font-size:13px}.detail-layout{border-radius:18px}.media-stage{height:58vh;min-height:300px}.detail-info{padding:23px}.detail-info h1{font-size:21px}.editor-panel{padding:20px;border-radius:20px}.drop-zone{min-height:210px}.drop-zone strong{font-size:15px}.drop-zone>span:last-child{font-size:11px}.form-actions{align-items:flex-start;flex-direction:column}.form-actions button{width:100%}.kind-picker button{padding:11px 18px;font-size:14px}.asset-grid{gap:16px}.asset-preview{height:200px}.asset-tile-info{padding:11px 3px}.asset-tile-info>span{font-size:11px}.asset-tile h3{font-size:13px}.management-grid .surface{padding:23px 18px}.taxonomy-row code{font-size:11px;max-width:45%}.doodle-layout{grid-template-columns:1fr}.doodle-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.doodle-inspector{position:static}.doodle-card strong{font-size:15px}.doodle-card small{font-size:11px}}
+@media(max-width:650px){.sidebar{transform:translateX(-100%);width:210px;padding:25px 15px;transition:transform .2s}.sidebar.is-open{transform:translateX(0)}.sidebar .brand{margin:0 10px 25px}.sidebar .brand strong,.sidebar .nav-item span,.sidebar .nav-group>p,.sidebar .import-link span{display:block}.sidebar .nav-item,.sidebar .import-link{justify-content:flex-start;gap:15px;padding:13px 18px}.main-content{margin-left:0;padding:0 16px 25px}.global-topbar{height:83px;padding-left:45px;gap:12px;margin-bottom:18px}.global-search{height:46px;padding:0 13px;gap:8px}.global-search>svg{width:20px;flex-shrink:0}.global-search input{font-size:14px}.mobile-menu{display:flex;position:fixed;top:22px;left:12px;z-index:40;border:0;background:var(--surface)}.mobile-menu[aria-expanded="true"]{top:28px;left:169px;padding:4px}.nav-scrim{position:fixed;inset:0;background:var(--scrim);z-index:25}.page-header{margin:0 0 24px;align-items:flex-start;flex-direction:column;gap:16px}.page-header h1{font-size:25px}.page-header p{font-size:13px}.feed-tabs a{font-size:14px;padding:10px 14px}.feed-toolbar{margin-bottom:19px}.post-cover{border-radius:14px}.masonry{gap:14px}.post-card h3{font-size:14px;margin:9px 4px 7px}.post-meta{font-size:11px;padding:0 4px}.empty-state p{font-size:13px}.empty-state>small{font-size:11px}.detail-top{margin-top:0;font-size:13px}.detail-layout{border-radius:18px}.media-stage{height:58vh;min-height:300px}.detail-info{padding:23px}.detail-info h1{font-size:21px}.editor-panel{padding:20px;border-radius:20px}.drop-zone{min-height:210px}.drop-zone strong{font-size:15px}.drop-zone>span:last-child{font-size:11px}.form-actions{align-items:flex-start;flex-direction:column}.form-actions button{width:100%}.kind-picker button{padding:11px 18px;font-size:14px}.asset-grid{gap:16px}.asset-preview{height:200px}.asset-tile-info{padding:11px 3px}.asset-tile-info>span{font-size:11px}.asset-tile h3{font-size:13px}.management-grid .surface{padding:23px 18px}.taxonomy-row code{font-size:11px;max-width:45%}.doodle-layout{grid-template-columns:1fr}.doodle-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.doodle-inspector{position:static}.doodle-card strong{font-size:15px}.doodle-card small{font-size:11px}}
 .media-stage{max-height:760px}
 
-.skill-card{display:grid;grid-template-columns:minmax(220px,380px) 1fr;max-width:1000px;border:1px solid #e9e5df;border-radius:24px;overflow:hidden}.skill-card>div:last-child{padding:42px}.skill-card h2{display:flex;align-items:center;gap:20px;font-size:30px;margin:22px 0 16px}.skill-card p,.skill-doc p,.skill-doc li{color:#736c63;line-height:1.9}.skill-card span:last-child{font-size:14px}.skill-art{background-color:#ede8df;background-image:linear-gradient(45deg,#e3ddd3 25%,transparent 25%),linear-gradient(-45deg,#e3ddd3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3ddd3 75%),linear-gradient(-45deg,transparent 75%,#e3ddd3 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;display:grid;place-items:center;padding:28px}.skill-art img{height:340px;object-fit:contain}.skill-doc{max-width:1200px;margin:auto}.skill-hero{display:grid;grid-template-columns:1.5fr 1fr;background:#f7f3eb;border-radius:26px;overflow:hidden}.skill-hero>div:first-child{padding:45px}.skill-hero h1{font-size:clamp(28px,3vw,44px);line-height:1.4;letter-spacing:-1px;margin:24px 0}.skill-hero p{margin-bottom:25px}.skill-doc-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:45px;margin:40px 0}.skill-doc h2{font-size:21px;margin:32px 0 16px}.skill-doc pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f6f5f2;border:1px solid #e9e5dd;padding:24px;border-radius:16px;line-height:1.8;font-size:13px;color:#51483e}.skill-doc li{padding-left:8px;margin:12px 0}.skill-sidebar{align-self:start;position:sticky;top:112px}.skill-sidebar h2{margin-top:0}.skill-sidebar p{font-size:13px}.skill-sidebar code{display:block;font-size:12px;overflow-wrap:anywhere;margin:16px 0}.skill-sidebar .secondary-button{display:flex;margin:12px 0;padding:12px;font-size:13px}@media(max-width:800px){.skill-doc-grid{grid-template-columns:1fr;gap:10px}.skill-sidebar{position:static}.skill-hero{grid-template-columns:1fr}.skill-hero>div:first-child{padding:28px}.skill-hero .skill-art img{height:260px}.skill-card{grid-template-columns:1fr}.skill-card>div:last-child{padding:26px}}
+.skill-card{display:grid;grid-template-columns:minmax(220px,380px) 1fr;max-width:1000px;border:1px solid var(--border);border-radius:24px;overflow:hidden}.skill-card>div:last-child{padding:42px}.skill-card h2{display:flex;align-items:center;gap:20px;font-size:30px;margin:22px 0 16px}.skill-card p,.skill-doc p,.skill-doc li{color:var(--muted-foreground);line-height:1.9}.skill-card span:last-child{font-size:14px}.skill-art{background-color:var(--selection);background-image:linear-gradient(45deg,var(--selection) 25%,transparent 25%),linear-gradient(-45deg,var(--selection) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--selection) 75%),linear-gradient(-45deg,transparent 75%,var(--selection) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;display:grid;place-items:center;padding:28px}.skill-art img{height:340px;object-fit:contain}.skill-doc{max-width:1200px;margin:auto}.skill-hero{display:grid;grid-template-columns:1.5fr 1fr;background:var(--selection);border-radius:26px;overflow:hidden}.skill-hero>div:first-child{padding:45px}.skill-hero h1{font-size:clamp(28px,3vw,44px);line-height:1.4;letter-spacing:-1px;margin:24px 0}.skill-hero p{margin-bottom:25px}.skill-doc-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:45px;margin:40px 0}.skill-doc h2{font-size:21px;margin:32px 0 16px}.skill-doc pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--selection);border:1px solid var(--selection-border);padding:24px;border-radius:16px;line-height:1.8;font-size:13px;color:var(--foreground)}.skill-doc li{padding-left:8px;margin:12px 0}.skill-sidebar{align-self:start;position:sticky;top:112px}.skill-sidebar h2{margin-top:0}.skill-sidebar p{font-size:13px}.skill-sidebar code{display:block;font-size:12px;overflow-wrap:anywhere;margin:16px 0}.skill-sidebar .secondary-button{display:flex;margin:12px 0;padding:12px;font-size:13px}@media(max-width:800px){.skill-doc-grid{grid-template-columns:1fr;gap:10px}.skill-sidebar{position:static}.skill-hero{grid-template-columns:1fr}.skill-hero>div:first-child{padding:28px}.skill-hero .skill-art img{height:260px}.skill-card{grid-template-columns:1fr}.skill-card>div:last-child{padding:26px}}
 
 /* Wiki discovery and reading surfaces */
-.wiki-tabs{display:flex;gap:12px;overflow:auto;padding:10px 0 20px}.wiki-tabs a{padding:10px 20px;border-radius:30px;white-space:nowrap}.wiki-tabs .selected{background:#f2f2f2;font-weight:700}.wiki-intro{padding:28px 0 36px}.wiki-intro>span{font-size:11px;letter-spacing:3px;color:#aaa}.wiki-intro h1{font-size:34px;letter-spacing:-1px;margin:14px 0}.wiki-intro p,.wiki-card p{color:#888}.wiki-cards{columns:4 220px;column-gap:22px}.wiki-card{display:inline-block;width:100%;break-inside:avoid;margin-bottom:28px;color:inherit;text-decoration:none}.wiki-cover{border-radius:18px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;min-height:260px}.wiki-cover small{font-size:11px;letter-spacing:2px}.wiki-cover strong{font-size:35px;line-height:1.4;letter-spacing:-1px}.wiki-cover>span{font-size:12px;opacity:.5}.wiki-card h2{font-size:16px;margin:14px 2px 6px}.wiki-card p{font-size:13px;line-height:1.7;margin:0 2px 10px}.wiki-card footer{display:flex;align-items:center;gap:8px;font-size:12px;color:#888}.wiki-card footer>span:last-child{margin-left:auto;font-size:20px}.wiki-avatar{background:#ff2442;color:white;border-radius:50%;width:23px;height:23px;text-align:center;line-height:23px}.wiki-bottom{display:flex;justify-content:space-between;padding:30px 0;color:#888}.wiki-article{max-width:800px;margin:40px auto;padding:40px;border:1px solid #eee;border-radius:24px}.wiki-label{color:#ff2442;font-size:13px}.wiki-article h1{font-size:38px}.wiki-summary{color:#888}.wiki-body{line-height:2;font-size:17px;margin:40px 0;white-space:pre-wrap}.wiki-article footer{border-top:1px solid #eee;padding-top:24px;font-size:13px}.wiki-empty{padding:50px;border-radius:20px;background:#faf8f5}@media(max-width:600px){.wiki-intro h1{font-size:26px}.wiki-cards{columns:2;column-gap:12px}.wiki-cover{padding:18px;min-height:220px!important}.wiki-cover strong{font-size:25px}.wiki-article{padding:22px;margin:20px 0}.wiki-article h1{font-size:28px}}
+.wiki-tabs{display:flex;gap:12px;overflow:auto;padding:10px 0 20px}.wiki-tabs a{padding:10px 20px;border-radius:30px;white-space:nowrap}.wiki-tabs .selected{background:var(--selection);font-weight:700}.wiki-intro{padding:28px 0 36px}.wiki-intro>span{font-size:11px;letter-spacing:3px;color:var(--muted-foreground)}.wiki-intro h1{font-size:34px;letter-spacing:-1px;margin:14px 0}.wiki-intro p,.wiki-card p{color:var(--muted-foreground)}.wiki-cards{columns:4 220px;column-gap:22px}.wiki-card{display:inline-block;width:100%;break-inside:avoid;margin-bottom:28px;color:inherit;text-decoration:none}.wiki-cover{border-radius:18px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;min-height:260px}.wiki-cover small{font-size:11px;letter-spacing:2px}.wiki-cover strong{font-size:35px;line-height:1.4;letter-spacing:-1px}.wiki-cover>span{font-size:12px;opacity:.5}.wiki-card h2{font-size:16px;margin:14px 2px 6px}.wiki-card p{font-size:13px;line-height:1.7;margin:0 2px 10px}.wiki-card footer{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted-foreground)}.wiki-card footer>span:last-child{margin-left:auto;font-size:20px}.wiki-avatar{background:var(--primary);color:var(--primary-foreground);border-radius:50%;width:23px;height:23px;text-align:center;line-height:23px}.wiki-bottom{display:flex;justify-content:space-between;padding:30px 0;color:var(--muted-foreground)}.wiki-article{max-width:800px;margin:40px auto;padding:40px;border:1px solid var(--border);border-radius:24px}.wiki-label{color:var(--primary);font-size:13px}.wiki-article h1{font-size:38px}.wiki-summary{color:var(--muted-foreground)}.wiki-body{line-height:2;font-size:17px;margin:40px 0;white-space:pre-wrap}.wiki-article footer{border-top:1px solid var(--border);padding-top:24px;font-size:13px}.wiki-empty{padding:50px;border-radius:20px;background:var(--selection)}@media(max-width:600px){.wiki-intro h1{font-size:26px}.wiki-cards{columns:2;column-gap:12px}.wiki-cover{padding:18px;min-height:220px!important}.wiki-cover strong{font-size:25px}.wiki-article{padding:22px;margin:20px 0}.wiki-article h1{font-size:28px}}
 
 /* Discovery and addressable note dialog */
-.discovery-tabs{display:flex;gap:12px;overflow:auto;white-space:nowrap;padding:12px 0 24px}.discovery-tabs a{padding:10px 22px;border-radius:30px;color:#777}.discovery-tabs .selected{background:#f4f4f4;color:#222;font-weight:600}.discovery-grid{columns:4 220px;column-gap:22px;padding-bottom:30px}.discovery-card{display:inline-block;width:100%;break-inside:avoid;margin-bottom:25px;text-decoration:none;color:#282828}.discovery-cover{border-radius:17px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:28px;position:relative}.discovery-cover:has(img){padding:0}.discovery-cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.discovery-cover strong{font-size:32px;line-height:1.45}.discovery-cover small,.discovery-cover>span{font-size:11px;letter-spacing:2px;opacity:.6}.discovery-card h2{font-size:16px;margin:11px 2px;line-height:1.5}.discovery-card footer{display:flex;gap:7px;align-items:center;color:#888;font-size:12px}.discovery-card footer>span:last-child{margin-left:auto;font-size:20px}.note-overlay{position:fixed;z-index:1000;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;padding:38px 7vw;backdrop-filter:blur(2px)}.note-dialog{width:min(1180px,100%);height:min(860px,88vh);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(350px,1fr);background:white;border-radius:24px;position:relative;box-shadow:0 20px 90px #0002}.note-close{position:absolute;left:-56px;top:0;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:#fff;color:#444;cursor:pointer}.note-stage{position:relative;min-width:0;min-height:0;background:#f8f8f8;display:flex;align-items:center;justify-content:center;border-radius:24px 0 0 24px;overflow:hidden}.note-stage>img,.note-stage>video{width:100%;height:100%;object-fit:contain}.note-stage:has(video){background:#000}.note-title-cover{width:100%;height:100%;padding:55px;display:flex;flex-direction:column;justify-content:space-between}.note-title-cover strong{font-size:clamp(32px,4vw,62px);line-height:1.5;letter-spacing:-2px}.note-title-cover small,.note-title-cover>span{font-size:13px;letter-spacing:3px;opacity:.6}.note-prev,.note-next{position:absolute;top:48%;width:35px;height:35px;background:#fff9;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer}.note-prev{left:15px}.note-next{right:15px}.note-prev:disabled,.note-next:disabled{opacity:.2}.note-count{position:absolute;right:15px;top:15px;border-radius:20px;background:#0005;color:white;padding:4px 10px;font-size:12px}.note-dots{position:absolute;bottom:24px;display:flex;gap:8px;left:0;right:0;justify-content:center}.note-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#9997;cursor:pointer}.note-dots .selected{background:#ff2442}.note-info{display:flex;flex-direction:column;min-height:0;min-width:0}.note-info>header{display:flex;align-items:center;gap:12px;padding:26px 28px;flex-shrink:0}.note-author-avatar{width:40px;height:40px;display:grid;place-items:center;background:#ff2442;color:#fff;border-radius:50%;font-weight:700}.note-info header b{font-size:15px}.note-info header small{display:block;color:#999;font-size:11px;margin-top:4px}.note-category-button{margin-left:auto;border:1px solid #ff2442;color:#ff2442;padding:8px 17px;border-radius:24px;font-size:13px}.note-content{overflow:auto;flex:1;padding:8px 28px 28px;overscroll-behavior:contain}.note-content h1{font-size:22px;line-height:1.6;margin:0 0 14px}.note-content h3{font-size:16px;margin:24px 0 10px}.note-content p{font-size:15px;line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 20px}.note-content pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.7;background:#faf9f6;padding:14px;border-radius:12px}.note-content a,.note-tags{color:#315775}.note-id{font-size:11px;color:#aaa;margin-top:25px;overflow-wrap:anywhere}.note-info>footer{border-top:1px solid #eee;display:flex;gap:18px;align-items:center;padding:19px 25px;flex-wrap:wrap}.note-info footer button,.note-info footer a{font:inherit;background:none;border:0;display:flex;gap:5px;align-items:center;font-size:12px;color:#777;cursor:pointer}.note-audio{width:80%;text-align:center}.note-audio>span{font-size:100px;display:block;margin-bottom:40px}.note-audio audio{width:100%}.discovery-empty{padding:50px;color:#999;text-align:center}
-@media(max-width:760px){.discovery-grid{columns:2;column-gap:12px}.discovery-cover{padding:20px}.discovery-cover strong{font-size:24px}.discovery-card h2{font-size:14px}.note-overlay{padding:0;background:#fff;align-items:flex-start;overflow:auto}.note-dialog{display:flex;flex-direction:column;width:100%;height:auto;min-height:100dvh;border-radius:0;box-shadow:none}.note-close{z-index:3;left:14px;top:14px;background:#fffc}.note-stage{height:56dvh;min-height:320px;flex-shrink:0;border-radius:0}.note-info{min-height:44dvh}.note-info>header{padding:20px}.note-content{overflow:visible;padding:0 20px 25px}.note-content h1{font-size:20px}.note-info>footer{position:sticky;bottom:0;background:white}.note-title-cover{padding:45px}.note-title-cover strong{font-size:34px}}
+.discovery-tabs{display:flex;gap:12px;overflow:auto;white-space:nowrap;padding:12px 0 24px}.discovery-tabs a{padding:10px 22px;border-radius:30px;color:var(--muted-foreground)}.discovery-tabs .selected{background:var(--selection);color:var(--foreground-strong);font-weight:600}.discovery-grid{columns:4 220px;column-gap:22px;padding-bottom:30px}.discovery-card{display:inline-block;width:100%;break-inside:avoid;margin-bottom:25px;text-decoration:none;color:var(--foreground-strong)}.discovery-cover{border-radius:17px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:28px;position:relative}.discovery-cover:has(img){padding:0}.discovery-cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.discovery-cover strong{font-size:32px;line-height:1.45}.discovery-cover small,.discovery-cover>span{font-size:11px;letter-spacing:2px;opacity:.6}.discovery-card h2{font-size:16px;margin:11px 2px;line-height:1.5}.discovery-card footer{display:flex;gap:7px;align-items:center;color:var(--muted-foreground);font-size:12px}.discovery-card footer>span:last-child{margin-left:auto;font-size:20px}.note-overlay{position:fixed;z-index:1000;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:38px 7vw;backdrop-filter:blur(2px)}.note-dialog{width:min(1180px,100%);height:min(860px,88vh);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(350px,1fr);background:var(--surface);border-radius:24px;position:relative;box-shadow:0 20px 90px var(--shadow)}.note-close{position:absolute;left:-56px;top:0;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--surface);color:var(--foreground);cursor:pointer}.note-stage{position:relative;min-width:0;min-height:0;background:var(--surface);display:flex;align-items:center;justify-content:center;border-radius:24px 0 0 24px;overflow:hidden}.note-stage>img,.note-stage>video{width:100%;height:100%;object-fit:contain}.note-stage:has(video){background:var(--surface)}.note-title-cover{width:100%;height:100%;padding:55px;display:flex;flex-direction:column;justify-content:space-between}.note-title-cover strong{font-size:clamp(32px,4vw,62px);line-height:1.5;letter-spacing:-2px}.note-title-cover small,.note-title-cover>span{font-size:13px;letter-spacing:3px;opacity:.6}.note-prev,.note-next{position:absolute;top:48%;width:35px;height:35px;background:var(--surface);border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer}.note-prev{left:15px}.note-next{right:15px}.note-prev:disabled,.note-next:disabled{opacity:.2}.note-count{position:absolute;right:15px;top:15px;border-radius:20px;background:var(--surface);color:var(--foreground);padding:4px 10px;font-size:12px}.note-dots{position:absolute;bottom:24px;display:flex;gap:8px;left:0;right:0;justify-content:center}.note-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--surface-muted);cursor:pointer}.note-dots .selected{background:var(--selection)}.note-info{display:flex;flex-direction:column;min-height:0;min-width:0}.note-info>header{display:flex;align-items:center;gap:12px;padding:26px 28px;flex-shrink:0}.note-author-avatar{width:40px;height:40px;display:grid;place-items:center;background:var(--primary);color:var(--primary-foreground);border-radius:50%;font-weight:700}.note-info header b{font-size:15px}.note-info header small{display:block;color:var(--muted-foreground);font-size:11px;margin-top:4px}.note-category-button{margin-left:auto;border:1px solid var(--selection-border);color:var(--primary);padding:8px 17px;border-radius:24px;font-size:13px}.note-content{overflow:auto;flex:1;padding:8px 28px 28px;overscroll-behavior:contain}.note-content h1{font-size:22px;line-height:1.6;margin:0 0 14px}.note-content h3{font-size:16px;margin:24px 0 10px}.note-content p{font-size:15px;line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 20px}.note-content pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.7;background:var(--selection);padding:14px;border-radius:12px}.note-content a,.note-tags{color:var(--foreground)}.note-id{font-size:11px;color:var(--muted-foreground);margin-top:25px;overflow-wrap:anywhere}.note-info>footer{border-top:1px solid var(--border);display:flex;gap:18px;align-items:center;padding:19px 25px;flex-wrap:wrap}.note-info footer button,.note-info footer a{font:inherit;background:none;border:0;display:flex;gap:5px;align-items:center;font-size:12px;color:var(--muted-foreground);cursor:pointer}.note-audio{width:80%;text-align:center}.note-audio>span{font-size:100px;display:block;margin-bottom:40px}.note-audio audio{width:100%}.discovery-empty{padding:50px;color:var(--muted-foreground);text-align:center}
+@media(max-width:760px){.discovery-grid{columns:2;column-gap:12px}.discovery-cover{padding:20px}.discovery-cover strong{font-size:24px}.discovery-card h2{font-size:14px}.note-overlay{padding:0;background:var(--scrim);align-items:flex-start;overflow:auto}.note-dialog{display:flex;flex-direction:column;width:100%;height:auto;min-height:100dvh;border-radius:0;box-shadow:none}.note-close{z-index:3;left:14px;top:14px;background:var(--surface)}.note-stage{height:56dvh;min-height:320px;flex-shrink:0;border-radius:0}.note-info{min-height:44dvh}.note-info>header{padding:20px}.note-content{overflow:visible;padding:0 20px 25px}.note-content h1{font-size:20px}.note-info>footer{position:sticky;bottom:0;background:var(--surface)}.note-title-cover{padding:45px}.note-title-cover strong{font-size:34px}}
 
 /* Independent notes: description, topic tags and image count, with no author chrome. */
-.discovery-note-link{display:block;color:inherit;text-decoration:none}.discovery-description{font-size:13px;line-height:1.8;color:#777;margin:0 2px 9px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}.discovery-tags{display:flex;gap:5px 12px;flex-wrap:wrap;margin:0 2px;font-size:12px;line-height:1.7;color:#466478}.discovery-tags a:hover{text-decoration:underline}.discovery-cover>.discovery-image-count{position:absolute;z-index:1;right:12px;top:12px;display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:14px;background:#0007;color:#fff;opacity:1;letter-spacing:0;font-size:13px;line-height:1.4;backdrop-filter:blur(4px)}.note-info>.note-content{padding-top:32px}.note-content>.note-description{color:#7b7b7b;font-size:14px;line-height:1.8;margin:0 0 12px}.note-content>.note-tags{display:flex;gap:6px 12px;flex-wrap:wrap;margin-bottom:25px;font-size:13px}.note-content>.note-tags a{color:#466478}@media(max-width:760px){.discovery-description{font-size:12px;-webkit-line-clamp:3}.discovery-tags{font-size:11px;gap:3px 8px}.discovery-cover>.discovery-image-count{right:9px;top:9px;font-size:12px}.note-info>.note-content{padding-top:24px}}
+.discovery-note-link{display:block;color:inherit;text-decoration:none}.discovery-description{font-size:13px;line-height:1.8;color:var(--muted-foreground);margin:0 2px 9px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}.discovery-tags{display:flex;gap:5px 12px;flex-wrap:wrap;margin:0 2px;font-size:12px;line-height:1.7;color:var(--foreground)}.discovery-tags a:hover{text-decoration:underline}.discovery-cover>.discovery-image-count{position:absolute;z-index:1;right:12px;top:12px;display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:14px;background:var(--surface);color:var(--foreground);opacity:1;letter-spacing:0;font-size:13px;line-height:1.4;backdrop-filter:blur(4px)}.note-info>.note-content{padding-top:32px}.note-content>.note-description{color:var(--muted-foreground);font-size:14px;line-height:1.8;margin:0 0 12px}.note-content>.note-tags{display:flex;gap:6px 12px;flex-wrap:wrap;margin-bottom:25px;font-size:13px}.note-content>.note-tags a{color:var(--foreground)}@media(max-width:760px){.discovery-description{font-size:12px;-webkit-line-clamp:3}.discovery-tags{font-size:11px;gap:3px 8px}.discovery-cover>.discovery-image-count{right:9px;top:9px;font-size:12px}.note-info>.note-content{padding-top:24px}}
 
-.note-content a.note-inline-link{display:inline-flex;align-items:baseline;gap:4px;max-width:100%;padding:0 5px;border-radius:5px;background:#f2f5f7;color:#456278;text-decoration:none;vertical-align:baseline;overflow-wrap:anywhere}
+.note-content a.note-inline-link{display:inline-flex;align-items:baseline;gap:4px;max-width:100%;padding:0 5px;border-radius:5px;background:var(--selection);color:var(--foreground);text-decoration:none;vertical-align:baseline;overflow-wrap:anywhere}
 .note-inline-link svg{flex-shrink:0;align-self:center;opacity:.65}
-.note-content a.note-inline-link:hover{background:#e8eff4;text-decoration:underline;text-underline-offset:3px}
-.note-content a.note-inline-link:focus-visible{outline:2px solid #6888a0;outline-offset:2px}
+.note-content a.note-inline-link:hover{background:var(--selection);text-decoration:underline;text-underline-offset:3px}
+.note-content a.note-inline-link:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
 .tag-input-selected,.tag-input-suggestions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
-.tag-input-selected button,.tag-input-suggestions button{border:0;background:#f2f3f4;color:#526373;border-radius:16px;padding:6px 10px;cursor:pointer;font-size:13px}
-.tag-input-selected span{margin-left:8px;color:#888}
+.tag-input-selected button,.tag-input-suggestions button{border:0;background:var(--surface);color:var(--foreground);border-radius:16px;padding:6px 10px;cursor:pointer;font-size:13px}
+.tag-input-selected span{margin-left:8px;color:var(--muted-foreground)}
 .tag-input-row{display:flex;align-items:center;gap:10px}.tag-input-row input{min-width:0;flex:1}.tag-input-row button{flex-shrink:0}
 
 .note-markdown{font-size:15px;line-height:1.9;overflow-wrap:anywhere}
 .note-markdown ul,.note-markdown ol{margin:12px 0 22px;padding-left:1.6em;list-style-position:outside}
 .note-markdown ul{list-style-type:disc}.note-markdown ol{list-style-type:decimal}
 .note-markdown ul ul{list-style-type:circle}.note-markdown ul ul ul{list-style-type:square}
-.note-markdown li{display:list-item;margin:5px 0;padding-left:3px}.note-markdown li::marker{color:#777}
+.note-markdown li{display:list-item;margin:5px 0;padding-left:3px}.note-markdown li::marker{color:var(--muted-foreground)}
 .note-markdown li>p{margin:0 0 6px;white-space:normal}.note-markdown li>ul,.note-markdown li>ol{margin:5px 0 9px}
-.note-markdown .contains-task-list{list-style:none;padding-left:0}.note-markdown .task-list-item input{margin-right:8px;accent-color:#607687}
+.note-markdown .contains-task-list{list-style:none;padding-left:0}.note-markdown .task-list-item input{margin-right:8px;accent-color:var(--ring)}
 .note-markdown h2{font-size:19px;margin:26px 0 12px}.note-markdown h3{font-size:17px}.note-markdown h4{font-size:15px;margin:20px 0 8px}
-.note-markdown blockquote{margin:18px 0;border-left:3px solid #d9e1e7;padding:3px 0 3px 14px;color:#647583}
-.note-markdown table{display:block;overflow-x:auto;border-collapse:collapse;margin:16px 0;max-width:100%}.note-markdown th,.note-markdown td{border:1px solid #e4e8ec;padding:7px 10px;white-space:normal}.note-markdown th{background:#f5f7f8}
-.note-markdown :not(pre)>code{font-size:.87em;background:#f3f4f5;border-radius:4px;padding:2px 4px}.note-markdown pre code{background:none;padding:0}
-.note-editor fieldset{border:0;padding:0;margin:0;min-width:0}.note-editor .form-field{margin:18px 0}.note-editor .form-field>label{display:block;font-size:14px;margin-bottom:8px}.note-editor label small{color:#999;font-size:11px;font-weight:400}
-.note-editor input,.note-editor textarea{width:100%;box-sizing:border-box;border:1px solid #dce1e5;border-radius:9px;padding:10px 12px;font:inherit;font-size:14px;line-height:1.7;background:#fff}.note-editor textarea{resize:vertical}.note-editor input:focus,.note-editor textarea:focus{outline:2px solid #aebfcd;outline-offset:1px}
-.note-editor .note-editor-body{font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px;min-height:260px;tab-size:2}.note-editor details{margin:16px 0}.note-editor summary{cursor:pointer;font-size:13px;color:#526c80}
-.note-editor-actions{display:flex;justify-content:flex-end;gap:12px;position:sticky;bottom:-28px;padding:14px 0;background:#fff;border-top:1px solid #eee;margin-top:24px}
+.note-markdown blockquote{margin:18px 0;border-left:3px solid var(--selection-border);padding:3px 0 3px 14px;color:var(--muted-foreground)}
+.note-markdown table{display:block;overflow-x:auto;border-collapse:collapse;margin:16px 0;max-width:100%}.note-markdown th,.note-markdown td{border:1px solid var(--border);padding:7px 10px;white-space:normal}.note-markdown th{background:var(--surface)}
+.note-markdown :not(pre)>code{font-size:.87em;background:var(--surface);border-radius:4px;padding:2px 4px}.note-markdown pre code{background:none;padding:0}
+.note-editor fieldset{border:0;padding:0;margin:0;min-width:0}.note-editor .form-field{margin:18px 0}.note-editor .form-field>label{display:block;font-size:14px;margin-bottom:8px}.note-editor label small{color:var(--muted-foreground);font-size:11px;font-weight:400}
+.note-editor input,.note-editor textarea{width:100%;box-sizing:border-box;border:1px solid var(--input);border-radius:9px;padding:10px 12px;font:inherit;font-size:14px;line-height:1.7;background:var(--surface)}.note-editor textarea{resize:vertical}.note-editor input:focus,.note-editor textarea:focus{outline:2px solid var(--ring);outline-offset:1px}
+.note-editor .note-editor-body{font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px;min-height:260px;tab-size:2}.note-editor details{margin:16px 0}.note-editor summary{cursor:pointer;font-size:13px;color:var(--muted-foreground)}
+.note-editor-actions{display:flex;justify-content:flex-end;gap:12px;position:sticky;bottom:-28px;padding:14px 0;background:var(--surface);border-top:1px solid var(--border);margin-top:24px}
 .note-editor .tag-input-row input{width:0}.note-editor .tag-input-selected button,.note-editor .tag-input-suggestions button{font:inherit;font-size:12px}
-.brand strong{font-size:17px;letter-spacing:-.6px;overflow-wrap:anywhere}.global-search .search-submit{font-size:13px;white-space:nowrap;padding:7px 12px;border-radius:18px;background:#fff;color:#444}.backlink-count{display:inline-flex;align-items:center;gap:5px;color:#737b79;font-size:12px;margin:0 2px 10px}.backlink-count:hover{color:#315775;text-decoration:underline}.search-results-heading{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 24px;font-size:15px}.search-results-heading span{color:#888;font-size:12px}.discovery-card .search-excerpt{font-size:12px;line-height:1.7;color:#6a746c;border-left:2px solid #ccd5ce;padding-left:9px;margin:0 2px 12px;overflow-wrap:anywhere}.note-backlinks{border-top:1px solid #eee;margin-top:26px;padding-top:18px}.note-backlinks h2{font-size:15px;font-weight:600}.note-backlinks ul{list-style:none;padding:0;display:grid;gap:12px}.note-backlinks a{font-size:13px;line-height:1.7}.note-backlinks p{font-size:13px;color:#888}
+.brand strong{font-size:17px;letter-spacing:-.6px;overflow-wrap:anywhere}.global-search .search-submit{font-size:13px;white-space:nowrap;padding:7px 12px;border-radius:18px;background:var(--primary);color:var(--primary-foreground)}.backlink-count{display:inline-flex;align-items:center;gap:5px;color:var(--muted-foreground);font-size:12px;margin:0 2px 10px}.backlink-count:hover{color:var(--foreground);text-decoration:underline}.search-results-heading{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 24px;font-size:15px}.search-results-heading span{color:var(--muted-foreground);font-size:12px}.discovery-card .search-excerpt{font-size:12px;line-height:1.7;color:var(--muted-foreground);border-left:2px solid var(--border);padding-left:9px;margin:0 2px 12px;overflow-wrap:anywhere}.note-backlinks{border-top:1px solid var(--border);margin-top:26px;padding-top:18px}.note-backlinks h2{font-size:15px;font-weight:600}.note-backlinks ul{list-style:none;padding:0;display:grid;gap:12px}.note-backlinks a{font-size:13px;line-height:1.7}.note-backlinks p{font-size:13px;color:var(--muted-foreground)}
 
 /* Dynamic-code sign in: Prompt red with warm paper and blush tones. */
-.auth-page{min-height:100dvh;display:grid;place-items:center;padding:32px 24px;background:radial-gradient(ellipse at 12% 8%,#ffe8e9 0,transparent 55%),radial-gradient(ellipse at 95% 95%,#fae9df 0,transparent 50%),#fff7f3;color:#3b282d}
-.auth-card{width:100%;max-width:400px;padding:40px 32px 32px;background:#fffdfb;border:1px solid #efdcdb;border-radius:28px;box-shadow:0 20px 70px #9d46500b,0 2px 8px #9d465005}
-.auth-logo{display:block;width:64px;height:64px;margin:0 0 30px;filter:drop-shadow(0 8px 14px #ff24421a)}
-.auth-card h1{font-size:28px;font-weight:650;margin:0 0 12px;letter-spacing:-1px}.auth-description,.auth-footnote{font-size:14px;line-height:1.8;color:#8c747a}.auth-description{margin:0}
-.auth-card label{display:block;font-size:13px;font-weight:550;color:#71545d;margin:28px 0 10px}
-.auth-card input{box-sizing:border-box;width:100%;min-width:0;padding:15px 14px;border:1px solid #e7cfd3;border-radius:14px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:30px;font-variant-numeric:tabular-nums;letter-spacing:.3em;text-align:center;color:#4e3038;caret-color:var(--accent);background:#fff8f6;transition:border-color .18s,box-shadow .18s}.auth-card input::placeholder{color:#c5a9af;opacity:1}.auth-card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px #ff244212;background:#fff}
-.auth-card>button{width:100%;min-height:50px;padding:14px;border:0;border-radius:14px;background:var(--accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .18s,box-shadow .18s}.auth-card>button:hover:not(:disabled){background:#eb1735;box-shadow:0 5px 16px #ff244224}.auth-card>button:focus-visible{outline:3px solid #ff24424d;outline-offset:3px}.auth-card>button:disabled{background:#edc2c7;color:#fffafa;opacity:1;cursor:default}
-.auth-error{font-size:13px;color:#bf354d;min-height:44px;padding-top:10px;line-height:1.6}.auth-footnote{text-align:center;font-size:12px;margin:24px 0 0;color:#a18a90}
-.auth-logout{margin:24px 16px;padding:10px 14px;border:1px solid #e5e7eb;border-radius:10px;background:white;color:#737986;cursor:pointer}
+.auth-page{min-height:100dvh;display:grid;place-items:center;padding:32px 24px;background:radial-gradient(ellipse at 12% 8%,var(--selection) 0,transparent 55%),radial-gradient(ellipse at 95% 95%,var(--selection) 0,transparent 50%),var(--selection);color:var(--foreground-strong)}
+.auth-card{width:100%;max-width:400px;padding:40px 32px 32px;background:var(--selection);border:1px solid var(--selection-border);border-radius:28px;box-shadow:0 20px 70px var(--shadow),0 2px 8px var(--shadow)}
+.auth-logo{display:block;width:64px;height:64px;margin:0 0 30px;filter:drop-shadow(0 8px 14px var(--muted-foreground))}
+.auth-card h1{font-size:28px;font-weight:650;margin:0 0 12px;letter-spacing:-1px}.auth-description,.auth-footnote{font-size:14px;line-height:1.8;color:var(--muted-foreground)}.auth-description{margin:0}
+.auth-card label{display:block;font-size:13px;font-weight:550;color:var(--foreground);margin:28px 0 10px}
+.auth-card input{box-sizing:border-box;width:100%;min-width:0;padding:15px 14px;border:1px solid var(--selection-border);border-radius:14px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:30px;font-variant-numeric:tabular-nums;letter-spacing:.3em;text-align:center;color:var(--primary);caret-color:var(--primary);background:var(--selection);transition:border-color .18s,box-shadow .18s}.auth-card input::placeholder{color:var(--muted-foreground);opacity:1}.auth-card input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--shadow);background:var(--surface)}
+.auth-card>button{width:100%;min-height:50px;padding:14px;border:0;border-radius:14px;background:var(--primary);color:var(--primary-foreground);font-size:15px;font-weight:600;cursor:pointer;transition:background .18s,box-shadow .18s}.auth-card>button:hover:not(:disabled){background:var(--primary-hover);box-shadow:0 5px 16px var(--shadow)}.auth-card>button:focus-visible{outline:3px solid var(--muted-foreground);outline-offset:3px}.auth-card>button:disabled{background:var(--primary);color:var(--primary-foreground);opacity:1;cursor:default}
+.auth-error{font-size:13px;color:var(--danger);min-height:44px;padding-top:10px;line-height:1.6}.auth-footnote{text-align:center;font-size:12px;margin:24px 0 0;color:var(--muted-foreground)}
+.auth-logout{margin:24px 16px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted-foreground);cursor:pointer}
 @media(max-width:420px){.auth-page{padding:24px 18px}.auth-card{padding:32px 24px 28px;border-radius:24px}.auth-logo{width:56px;height:56px;margin-bottom:26px}.auth-card h1{font-size:26px}}
 /* Compact feed: ordinary tags and inbound references share one quiet metadata row. */
-.brand strong{font-size:23px;letter-spacing:-1px}.discovery-card{position:relative;margin-bottom:22px}.discovery-cover{max-height:340px;border-radius:14px}.discovery-cover img{object-fit:contain}.discovery-card h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:17px;line-height:1.55;margin:10px 2px 7px;font-weight:550}.discovery-card-meta{display:flex;align-items:center;gap:8px;min-height:24px;margin:0 2px}.discovery-card-meta .discovery-tags{display:flex;flex:1;gap:5px;min-width:0;overflow:hidden;white-space:nowrap;margin:0;font-size:13px;line-height:22px}.discovery-card-meta .discovery-tags a{overflow:hidden;text-overflow:ellipsis;max-width:110px}.discovery-card-meta .discovery-tags>span{color:#999}.discovery-card-meta .backlink-count{margin:0;display:flex;align-items:center;gap:4px;font-size:13px;color:#888;flex-shrink:0}.quick-tags-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;color:#999;flex-shrink:0;border-radius:4px}.quick-tags-trigger:hover{background:#eee;color:#444}.discovery-system-tags{position:absolute;left:10px;top:10px;display:flex;gap:4px;flex-wrap:wrap;max-width:calc(100% - 68px);z-index:2}.discovery-system-tags>span{font-size:12px;line-height:20px;padding:2px 8px;border-radius:12px;background:#fffE;color:#3b4a42;letter-spacing:0;box-shadow:0 1px 4px #0001}.ordinary-tag-filter{font-size:13px;color:#51715c;margin:0 0 20px;display:flex;gap:16px}.ordinary-tag-filter a{color:#888}.system-tag-pill{display:inline-block;font-size:11px;padding:3px 8px;background:#f0f3ef;border-radius:12px;margin-right:6px}.note-tags{display:flex;gap:7px;align-items:center;flex-wrap:wrap;position:relative}.tag-popover{position:absolute;right:0;top:100%;z-index:12;background:#fff;border:1px solid #e2e6df;border-radius:14px;padding:18px;width:min(350px,calc(100vw - 32px));box-shadow:0 12px 40px #0002;color:#333;font-size:13px;max-height:65vh;overflow:auto;white-space:normal}.tag-popover header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.tag-popover header button{display:flex}.tag-popover .form-field{margin-bottom:16px}.tag-popover .tag-input-row{gap:6px}.tag-popover .tag-input-row .secondary-button{padding:7px 11px;min-height:34px;font-size:12px}.tag-popover .primary-button{min-height:34px;padding:8px 14px;font-size:12px}.system-tag-picker{margin:16px 0;border:1px solid #e5e8e2;padding:12px;border-radius:8px}.system-tag-picker legend{font-size:13px}.system-tag-picker small{font-size:10px;color:#999;margin-left:6px}.system-tag-picker>input{width:100%;border:1px solid #e3e6de;border-radius:6px;padding:7px;margin:4px 0 10px}.system-tag-picker>div{display:flex;gap:12px;flex-wrap:wrap}.system-tag-picker label{display:flex;align-items:center;gap:5px;font-size:12px}.system-tag-picker input[type=checkbox]{accent-color:#59715e}.tag-input-selected button,.tag-input-suggestions button{font-size:12px}.tag-popover .error-message{font-size:11px}
+.brand strong{font-size:23px;letter-spacing:-1px}.discovery-card{position:relative;margin-bottom:22px}.discovery-cover{max-height:340px;border-radius:14px}.discovery-cover img{object-fit:contain}.discovery-card h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:17px;line-height:1.55;margin:10px 2px 7px;font-weight:550}.discovery-card-meta{display:flex;align-items:center;gap:8px;min-height:24px;margin:0 2px}.discovery-card-meta .discovery-tags{display:flex;flex:1;gap:5px;min-width:0;overflow:hidden;white-space:nowrap;margin:0;font-size:13px;line-height:22px}.discovery-card-meta .discovery-tags a{overflow:hidden;text-overflow:ellipsis;max-width:110px}.discovery-card-meta .discovery-tags>span{color:var(--muted-foreground)}.discovery-card-meta .backlink-count{margin:0;display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted-foreground);flex-shrink:0}.quick-tags-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;color:var(--muted-foreground);flex-shrink:0;border-radius:4px}.quick-tags-trigger:hover{background:var(--row-hover);color:var(--foreground)}.discovery-system-tags{position:absolute;left:10px;top:10px;display:flex;gap:4px;flex-wrap:wrap;max-width:calc(100% - 68px);z-index:2}.discovery-system-tags>span{font-size:12px;line-height:20px;padding:2px 8px;border-radius:12px;background:var(--surface);color:var(--foreground);letter-spacing:0;box-shadow:0 1px 4px var(--shadow)}.ordinary-tag-filter{font-size:13px;color:var(--foreground);margin:0 0 20px;display:flex;gap:16px}.ordinary-tag-filter a{color:var(--muted-foreground)}.system-tag-pill{display:inline-block;font-size:11px;padding:3px 8px;background:var(--surface);border-radius:12px;margin-right:6px}.note-tags{display:flex;gap:7px;align-items:center;flex-wrap:wrap;position:relative}.tag-popover{position:absolute;right:0;top:100%;z-index:12;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;width:min(350px,calc(100vw - 32px));box-shadow:0 12px 40px var(--shadow);color:var(--foreground-strong);font-size:13px;max-height:65vh;overflow:auto;white-space:normal}.tag-popover header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.tag-popover header button{display:flex}.tag-popover .form-field{margin-bottom:16px}.tag-popover .tag-input-row{gap:6px}.tag-popover .tag-input-row .secondary-button{padding:7px 11px;min-height:34px;font-size:12px}.tag-popover .primary-button{min-height:34px;padding:8px 14px;font-size:12px}.system-tag-picker{margin:16px 0;border:1px solid var(--border);padding:12px;border-radius:8px}.system-tag-picker legend{font-size:13px}.system-tag-picker small{font-size:10px;color:var(--muted-foreground);margin-left:6px}.system-tag-picker>input{width:100%;border:1px solid var(--input);border-radius:6px;padding:7px;margin:4px 0 10px}.system-tag-picker>div{display:flex;gap:12px;flex-wrap:wrap}.system-tag-picker label{display:flex;align-items:center;gap:5px;font-size:12px}.system-tag-picker input[type=checkbox]{accent-color:var(--ring)}.tag-input-selected button,.tag-input-suggestions button{font-size:12px}.tag-popover .error-message{font-size:11px}
 @media(max-width:760px){.discovery-card h2{font-size:16px;margin-top:9px;margin-bottom:7px}.discovery-card-meta{gap:5px}.discovery-card-meta .discovery-tags{font-size:12px}.discovery-card-meta .backlink-count{font-size:12px}.discovery-system-tags{top:8px;left:8px}.discovery-system-tags>span{font-size:11px;padding:1px 7px}.tag-popover{position:fixed;top:auto;bottom:18px;left:16px;right:16px;width:auto;z-index:1100}}
 .discovery-card-meta .discovery-tags a{font-size:inherit;line-height:inherit;margin:0;padding:0}.discovery-system-tags{opacity:1;letter-spacing:0}
 @media(min-width:761px){.tag-popover{position:fixed;left:50%;right:auto;top:50%;width:min(380px,calc(100vw - 32px));transform:translate(-50%,-50%);z-index:1100}}
 
 .discovery-card-meta .backlink-count svg{width:16px;height:16px}.discovery-card .discovery-image-count svg{width:15px;height:15px}
 
-.note-archive-status{background:#fff1db;color:#795d31;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.6}.note-info>footer{flex-wrap:wrap}
+.note-archive-status{background:var(--selection);color:var(--primary);padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.6}.note-info>footer{flex-wrap:wrap}
diff --git a/apps/waterfall-wiki/src/styles/guidance.module.css b/apps/waterfall-wiki/src/styles/guidance.module.css
index 7a9d730..f2c3a01 100644
--- a/apps/waterfall-wiki/src/styles/guidance.module.css
+++ b/apps/waterfall-wiki/src/styles/guidance.module.css
@@ -1,14 +1,14 @@
 .site {
-  --bg: #f8f9fc;
-  --panel: #fff;
-  --ink: #182230;
-  --muted: #667085;
-  --faint: #667085;
-  --line: #eaecf0;
-  --strong-line: #d0d5dd;
-  --primary: #4f46e5;
-  --primary-hover: #4338ca;
-  --tint: #eef2ff;
+  --bg: var(--background);
+  --panel: var(--surface);
+  --ink: var(--foreground);
+
+  --faint: var(--muted-foreground);
+  --line: var(--border);
+  --strong-line: var(--input);
+
+
+  --tint: var(--selection);
   min-height: 100dvh;
   background: var(--bg);
   color: var(--ink);
@@ -72,7 +72,7 @@
   left: 250px;
   transform: translateY(-200%);
   background: var(--ink);
-  color: #fff !important;
+  color: var(--foreground) !important;
   padding: 10px 16px;
   border-radius: 8px;
 }
@@ -83,7 +83,7 @@
   position: fixed;
   inset: 0 auto 0 0;
   width: 232px;
-  background: #fbfcfe;
+  background: var(--selection);
   border-right: 1px solid var(--line);
   display: flex;
   flex-direction: column;
@@ -113,11 +113,11 @@
   display: grid;
   place-items: center;
   background: var(--primary);
-  color: #fff;
+  color:var(--primary-foreground);
   border-radius: 10px;
   width: 36px;
   height: 36px;
-  box-shadow: 0 2px 3px #4f46e51a;
+  box-shadow: 0 2px 3px var(--shadow);
 }
 .workspaceLabel {
   display: flex;
@@ -127,12 +127,12 @@
   padding: 11px 9px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: #fff;
+  background: var(--surface);
   font-size: 12px;
   font-weight: 500;
 }
 .workspaceLabel > svg {
-  color: var(--muted);
+  color: var(--muted-foreground);
 }
 .workspaceTag {
   margin-left: auto;
@@ -160,7 +160,7 @@
   gap: 11px;
   padding: 10px 13px;
   min-height: 40px;
-  color: #667085;
+  color: var(--muted-foreground);
   font-size: 13px;
   border-radius: 7px;
   font-weight: 500;
@@ -169,7 +169,7 @@
     color 0.15s;
 }
 .navigation > a:hover {
-  background: #f0f2f6;
+  background: var(--selection);
   color: var(--ink);
 }
 .navigation > a.navActive {
@@ -188,19 +188,19 @@
 .sidebarHelp {
   margin: 0 6px 24px;
   padding: 14px 12px;
-  background: #f2f4f8;
-  border: 1px solid #e9edf3;
+  background: var(--selection);
+  border: 1px solid var(--selection-border);
   border-radius: 9px;
 }
 .smallLabel {
   font-size: 12px;
   font-weight: 600;
-  color: #475467;
+  color: var(--foreground);
 }
 .sidebarHelp p {
   font-size: 11px;
   line-height: 1.8;
-  color: #667085;
+  color: var(--muted-foreground);
   margin: 7px 0 12px;
 }
 .sidebarHelp a {
@@ -208,7 +208,7 @@
   align-items: center;
   gap: 5px;
   font-size: 11px;
-  color: #596579;
+  color: var(--muted-foreground);
   font-weight: 500;
 }
 .userArea {
@@ -221,9 +221,9 @@
 .avatar {
   width: 32px;
   height: 32px;
-  border: 1px solid #e0e4eb;
-  background: #f2f4f7;
-  color: #667085;
+  border: 1px solid var(--selection-border);
+  background: var(--selection);
+  color: var(--muted-foreground);
   border-radius: 50%;
   display: grid;
   place-items: center;
@@ -266,7 +266,7 @@
   min-height: 67px;
   padding: 14px 32px;
   border-bottom: 1px solid var(--line);
-  background: #ffffffed;
+  background: var(--surface);
   position: sticky;
   top: 0;
   z-index: 20;
@@ -282,7 +282,7 @@
 }
 .breadcrumb strong {
   font-weight: 500;
-  color: #475467;
+  color: var(--foreground);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -297,21 +297,21 @@
   display: flex;
   align-items: center;
   gap: 7px;
-  color: #667085 !important;
+  color: var(--muted-foreground) !important;
   font-size: 11px;
 }
 .statusDot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
-  background: #98a2b3;
+  background: var(--surface-muted);
 }
 .topbarLogin {
   display: flex;
   gap: 6px;
   align-items: center;
   font-size: 12px;
-  color: var(--muted) !important;
+  color: var(--muted-foreground) !important;
 }
 .content {
   width: 100%;
@@ -330,7 +330,7 @@
   border-top: 1px solid var(--line);
   font-size: 11px;
   color: var(--faint);
-  background: #fbfcfe;
+  background: var(--selection);
 }
 .workspaceFooter a {
   display: flex;
@@ -344,7 +344,7 @@
 .mobileDialog {
   border: 0;
   padding: 28px 16px 16px;
-  background: #fbfcfe;
+  background: var(--selection);
   color: var(--ink);
   width: 280px;
   max-width: 90vw;
@@ -355,7 +355,7 @@
   overflow-y: auto;
 }
 .mobileDialog::backdrop {
-  background: #10182866;
+  background: var(--scrim);
 }
 .mobileDialog[open] {
   display: flex;
@@ -368,7 +368,7 @@
   position: absolute;
   right: 12px;
   top: 13px;
-  color: var(--muted);
+  color: var(--muted-foreground);
   padding: 5px;
 }
 .primaryButton,
@@ -394,40 +394,40 @@
 }
 .primaryButton {
   background: var(--primary);
-  color: #fff !important;
+  color: var(--primary-foreground) !important;
   border-color: var(--primary);
-  box-shadow: 0 1px 2px #1018280d;
+  box-shadow: 0 1px 2px var(--shadow);
 }
 .primaryButton:hover {
   background: var(--primary-hover);
   border-color: var(--primary-hover);
 }
 .secondaryButton {
-  background: #fff;
+  background: var(--surface);
   border-color: var(--strong-line);
-  color: #344054 !important;
-  box-shadow: 0 1px 2px #10182806;
+  color: var(--foreground) !important;
+  box-shadow: 0 1px 2px var(--shadow);
 }
 .secondaryButton:hover {
-  background: #f9fafb;
-  border-color: #aeb7c4;
+  background: var(--selection);
+  border-color: var(--border);
 }
 .quietButton {
   background: transparent;
-  color: var(--muted) !important;
+  color: var(--muted-foreground) !important;
   padding: 7px 9px;
 }
 .quietButton:hover {
-  background: #f2f4f7;
+  background: var(--selection);
   color: var(--ink) !important;
 }
 .dangerButton {
-  background: #fff;
-  border-color: #fecdca;
-  color: #b42318 !important;
+  background: var(--danger-background);
+  border-color: var(--danger);
+  color: var(--danger) !important;
 }
 .dangerButton:hover {
-  background: #fff4f3;
+  background: var(--danger-background);
 }
 .iconButton {
   width: 31px;
@@ -436,11 +436,11 @@
   place-items: center;
   border: 1px solid var(--line);
   border-radius: 6px;
-  color: var(--muted);
-  background: #fff;
+  color: var(--muted-foreground);
+  background: var(--surface);
 }
 .iconButton:hover {
-  background: #f9fafb;
+  background: var(--selection);
 }
 .copyControl {
   display: inline-flex;
@@ -450,7 +450,7 @@
 }
 .copyError {
   font-size: 11px;
-  color: #b42318;
+  color: var(--danger);
 }
 .buttonRow {
   display: flex;
@@ -485,7 +485,7 @@
 }
 .pageHeading p {
   margin-top: 9px;
-  color: var(--muted);
+  color: var(--muted-foreground);
   font-size: 13px;
   line-height: 1.8;
 }
@@ -504,10 +504,10 @@
   flex-shrink: 0;
 }
 .panel {
-  background: #fff;
+  background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 12px;
-  box-shadow: 0 1px 3px #10182803;
+  box-shadow: 0 1px 3px var(--shadow);
   min-width: 0;
 }
 .panelHeader {
@@ -524,7 +524,7 @@
 }
 .panelHeader p {
   font-size: 12px;
-  color: var(--muted);
+  color: var(--muted-foreground);
   margin-top: 5px;
 }
 .panelBody {
@@ -545,24 +545,24 @@
   margin-top: 1px;
 }
 .noticeinfo {
-  background: #f5f7ff;
-  border-color: #e2e7ff;
-  color: #40489c;
+  background: var(--success-background);
+  border-color: var(--success);
+  color: var(--success);
 }
 .noticesuccess {
-  background: #f0fdf7;
-  border-color: #d1fadf;
-  color: #067647;
+  background: var(--success-background);
+  border-color: var(--success);
+  color: var(--success);
 }
 .noticeerror {
-  background: #fff5f4;
-  border-color: #fee4e2;
-  color: #b42318;
+  background: var(--danger-background);
+  border-color: var(--danger);
+  color: var(--danger);
 }
 .noticewarning {
-  background: #fffbeb;
-  border-color: #fef0c7;
-  color: #92400e;
+  background: var(--success-background);
+  border-color: var(--success);
+  color: var(--success);
 }
 .notice a {
   text-decoration: underline !important;
@@ -580,10 +580,10 @@
   width: 48px;
   height: 48px;
   border: 1px solid var(--line);
-  background: #f9fafb;
+  background: var(--selection);
   border-radius: 12px;
-  color: #667085;
-  box-shadow: 0 2px 4px #10182803;
+  color: var(--muted-foreground);
+  box-shadow: 0 2px 4px var(--shadow);
   margin-bottom: 18px;
 }
 .emptyState h3 {
@@ -593,7 +593,7 @@
 .emptyState p {
   max-width: 360px;
   font-size: 12px;
-  color: var(--muted);
+  color: var(--muted-foreground);
   line-height: 1.8;
   margin: 8px 0 20px;
 }
@@ -609,28 +609,28 @@
   white-space: nowrap;
 }
 .guide {
-  background: #eef4ff;
-  border-color: #dfe9ff;
-  color: #3b65b0;
+  background: var(--selection);
+  border-color: var(--selection-border);
+  color: var(--muted-foreground);
 }
 .context {
-  background: #f4f3ff;
-  border-color: #e9e5ff;
-  color: #7456b2;
+  background: var(--selection);
+  border-color: var(--selection-border);
+  color: var(--primary);
 }
 .evidence {
-  background: #ecfdf3;
-  border-color: #d9f7e4;
-  color: #387e5c;
+  background: var(--selection);
+  border-color: var(--selection-border);
+  color: var(--primary);
 }
 .neutralBadge {
   display: inline-flex;
   align-items: center;
   padding: 3px 7px;
-  background: #f9fafb;
+  background: var(--selection);
   border: 1px solid var(--line);
   border-radius: 5px;
-  color: var(--muted);
+  color: var(--muted-foreground);
   font-size: 11px;
   font-weight: 500;
   white-space: nowrap;
@@ -651,7 +651,7 @@
   background: transparent;
   border: 0;
   border-bottom: 2px solid transparent;
-  color: var(--muted);
+  color: var(--muted-foreground);
   padding: 16px 0 13px;
   white-space: nowrap;
   font-size: 12px;
@@ -662,11 +662,11 @@
   border-bottom-color: var(--primary);
 }
 .tabs button > span {
-  background: #f2f4f7;
+  background: var(--selection);
   border-radius: 5px;
   padding: 1px 5px;
   font-size: 11px;
-  color: var(--muted);
+  color: var(--muted-foreground);
 }
 .tabs button[aria-selected="true"] > span {
   background: var(--tint);
@@ -678,7 +678,7 @@
   gap: 18px;
   padding: 23px 26px;
   margin-bottom: 28px;
-  background: #fff;
+  background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 12px;
   position: relative;
@@ -689,9 +689,9 @@
   height: 46px;
   display: grid;
   place-items: center;
-  background: #eef2ff;
+  background: var(--selection);
   color: var(--primary);
-  border: 1px solid #e0e7ff;
+  border: 1px solid var(--selection-border);
   border-radius: 12px;
   flex-shrink: 0;
 }
@@ -702,7 +702,7 @@
 }
 .introCard p {
   font-size: 12px;
-  color: var(--muted);
+  color: var(--muted-foreground);
   margin-top: 6px;
   line-height: 1.75;
 }
@@ -714,25 +714,25 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  color: #c1c8d5;
+  color: var(--muted-foreground);
   margin-left: auto;
   padding: 0 28px;
 }
 .introDiagram span {
-  border: 1px solid #dce2ef;
+  border: 1px solid var(--selection-border);
   border-radius: 7px;
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 9px 11px;
   font-size: 11px;
-  color: #687794;
-  background: #fafbff;
+  color: var(--muted-foreground);
+  background: var(--selection);
 }
 .introDiagram span:first-child {
-  border-color: #c8d1ff;
-  background: #f1f3ff;
-  color: #5b5de0;
+  border-color: var(--selection-border);
+  background: var(--selection);
+  color: var(--primary);
 }
 .catalogToolbar {
   display: flex;
@@ -753,11 +753,11 @@
   border: 1px solid var(--strong-line);
   border-radius: 7px;
   color: var(--faint);
-  background: #fff;
+  background: var(--surface);
 }
 .catalogSearch:focus-within {
-  outline: 2px solid #c7d2fe;
-  border-color: #a5b4fc;
+  outline: 2px solid var(--ring);
+  border-color: var(--selection-border);
 }
 .catalogSearch input {
   width: 100%;
@@ -769,12 +769,12 @@
   font-size: 12px;
 }
 .catalogSearch input::placeholder {
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .catalogSearch button {
   display: grid;
   place-items: center;
-  color: var(--muted);
+  color: var(--muted-foreground);
   padding: 3px;
 }
 .catalogTools {
@@ -786,8 +786,8 @@
 .catalogTools select {
   border: 1px solid var(--strong-line);
   border-radius: 7px;
-  background: #fff;
-  color: #475467;
+  background: var(--surface);
+  color: var(--foreground);
   font-size: 11px;
   min-height: 36px;
   padding: 7px 25px 7px 10px;
@@ -802,7 +802,7 @@
   color: var(--faint);
   font-size: 11px;
   border-bottom: 1px solid var(--line);
-  background: #fdfdfe;
+  background: var(--selection);
 }
 .catalogStatus p {
   display: flex;
@@ -811,7 +811,7 @@
 }
 .catalogStatus button {
   font-size: 11px;
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .catalogStatus button:hover {
   color: var(--primary);
@@ -828,7 +828,7 @@
   font-size: 11px;
   font-weight: 500;
   color: var(--faint);
-  background: #fcfcfd;
+  background: var(--selection);
   border-bottom: 1px solid var(--line);
 }
 .documentRow {
@@ -840,7 +840,7 @@
   border-bottom: 0;
 }
 .documentRow:hover {
-  background: #fafbff;
+  background: var(--selection);
 }
 .documentPrimary {
   display: flex;
@@ -853,9 +853,9 @@
   height: 40px;
   display: grid;
   place-items: center;
-  border: 1px solid #e5e9f2;
-  background: #f8faff;
-  color: #7285ac;
+  border: 1px solid var(--selection-border);
+  background: var(--selection);
+  color: var(--muted-foreground);
   border-radius: 7px;
   flex-shrink: 0;
 }
@@ -870,7 +870,7 @@
 }
 .documentSummary {
   font-size: 12px;
-  color: var(--muted);
+  color: var(--muted-foreground);
   margin-top: 5px !important;
   line-height: 1.7;
   display: -webkit-box;
@@ -887,7 +887,7 @@
     SFMono-Regular,
     Consolas,
     monospace;
-  color: #667085;
+  color: var(--muted-foreground);
   margin-top: 8px !important;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -895,17 +895,17 @@
   max-width: 480px;
 }
 .documentVersion {
-  color: #667085;
+  color: var(--muted-foreground);
   font:
     11px ui-monospace,
     monospace;
 }
 .documentSource {
   font-size: 11px;
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .documentArrow {
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .documentMobileMeta {
   display: none;
@@ -920,7 +920,7 @@
   margin-top: 18px;
 }
 .catalogFootnote a {
-  color: #667085;
+  color: var(--muted-foreground);
   display: flex;
   gap: 5px;
   align-items: center;
@@ -935,15 +935,15 @@
   flex-wrap: wrap;
 }
 .topics button {
-  border: 1px solid #e3e7ed;
+  border: 1px solid var(--selection-border);
   border-radius: 5px;
   padding: 3px 8px;
-  background: #fff;
-  color: #667085;
+  background: var(--surface);
+  color: var(--muted-foreground);
   font-size: 11px;
 }
 .topics button:hover {
-  border-color: #c7d2fe;
+  border-color: var(--selection-border);
   color: var(--primary);
 }
 .skeletonRow {
@@ -956,7 +956,7 @@
 }
 .skeletonBox,
 .skeletonLine {
-  background: #f0f2f6;
+  background: var(--selection);
   border-radius: 5px;
 }
 .skeletonBox {
@@ -986,7 +986,7 @@
   gap: 6px;
   align-items: center;
   font-size: 11px;
-  color: var(--muted) !important;
+  color: var(--muted-foreground) !important;
   margin-bottom: 24px;
 }
 .documentBadges {
@@ -1004,7 +1004,7 @@
 }
 .readingSummary {
   font-size: 14px;
-  color: var(--muted);
+  color: var(--muted-foreground);
   line-height: 1.9;
   margin-top: 11px !important;
   max-width: 760px;
@@ -1052,34 +1052,34 @@
   align-items: center;
   font-size: 15px;
   font-weight: 600;
-  color: #344054;
+  color: var(--foreground);
   margin-bottom: 13px;
 }
 .proseSection h2 > svg {
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .proseBody {
   font-size: 15px;
   line-height: 1.95;
-  color: #475467;
+  color: var(--foreground);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
 .appliesCard {
-  background: #f6f7ff;
-  border: 1px solid #e6e9ff;
+  background: var(--selection);
+  border: 1px solid var(--selection-border);
   border-radius: 8px;
   padding: 18px 20px;
 }
 .appliesCard h2 {
   font-size: 12px;
-  color: #4f46a9;
+  color: var(--primary);
   margin-bottom: 9px;
 }
 .appliesCard p {
   font-size: 13px;
   line-height: 1.85;
-  color: #5b6094;
+  color: var(--primary);
 }
 .stepList {
   display: grid;
@@ -1094,17 +1094,17 @@
   gap: 12px;
   font-size: 13px;
   line-height: 1.8;
-  color: #475467;
+  color: var(--foreground);
   counter-increment: step;
 }
 .stepList li:before {
   content: counter(step);
   width: 24px;
   height: 24px;
-  background: #f3f4f8;
-  border: 1px solid #e6e9ef;
+  background: var(--selection);
+  border: 1px solid var(--selection-border);
   border-radius: 6px;
-  color: #758197;
+  color: var(--muted-foreground);
   font-size: 11px;
   font-weight: 600;
   display: grid;
@@ -1117,7 +1117,7 @@
   margin: 0;
   display: grid;
   gap: 9px;
-  color: #475467;
+  color: var(--foreground);
   font-size: 13px;
   line-height: 1.8;
   list-style: disc;
@@ -1131,23 +1131,23 @@
   border: 1px solid var(--line);
   border-radius: 8px;
   margin-top: 10px;
-  background: #fff;
+  background: var(--surface);
 }
 .relationCard:hover {
-  border-color: #c7d2fe;
-  background: #fcfcff;
+  border-color: var(--selection-border);
+  background: var(--selection);
 }
 .relationCard strong {
   display: block;
   font-size: 13px;
   font-weight: 600;
-  color: #344054;
+  color: var(--foreground);
   margin-bottom: 7px;
 }
 .relationCard p {
   font-size: 11px;
   line-height: 1.8;
-  color: var(--muted);
+  color: var(--muted-foreground);
 }
 .relationCard small {
   display: flex;
@@ -1158,12 +1158,12 @@
   color: var(--faint);
 }
 .relationCard > svg {
-  color: #667085;
+  color: var(--muted-foreground);
   margin-top: 2px;
 }
 .unresolved {
-  background: #fffcf6;
-  border-color: #f5e8ce;
+  background: var(--selection);
+  border-color: var(--selection-border);
 }
 .readingSidebar {
   display: grid;
@@ -1173,7 +1173,7 @@
 }
 .sideCard {
   padding: 20px;
-  background: #fff;
+  background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 10px;
 }
@@ -1195,20 +1195,20 @@
   gap: 10px;
 }
 .metadataList dt {
-  color: var(--muted);
+  color: var(--muted-foreground);
 }
 .metadataList dd {
   margin: 0;
   text-align: right;
-  color: #475467;
+  color: var(--foreground);
 }
 .metadataList select {
   font-size: 11px;
-  background: #fff;
+  background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 5px;
   padding: 4px 6px;
-  color: #475467;
+  color: var(--foreground);
 }
 .machineAddress {
   display: block;
@@ -1218,9 +1218,9 @@
     Consolas,
     monospace;
   overflow-wrap: anywhere;
-  color: #667085;
-  background: #f8fafc;
-  border: 1px solid #eef0f4;
+  color: var(--muted-foreground);
+  background: var(--selection);
+  border: 1px solid var(--selection-border);
   border-radius: 6px;
   padding: 10px;
   margin: 12px 0;
@@ -1228,7 +1228,7 @@
 .sideCard p {
   font-size: 11px;
   line-height: 1.8;
-  color: var(--muted);
+  color: var(--muted-foreground);
 }
 .sideCard .copyControl,
 .sideCard .copyControl > button {
@@ -1240,9 +1240,9 @@
 }
 .toc a {
   font-size: 11px;
-  color: #667085;
+  color: var(--muted-foreground);
   padding-left: 10px;
-  border-left: 2px solid #eaecf0;
+  border-left: 2px solid var(--border);
 }
 .toc a:hover {
   color: var(--primary);
@@ -1254,7 +1254,7 @@
 }
 .sideLinks a {
   font-size: 11px;
-  color: #667085;
+  color: var(--muted-foreground);
   line-height: 1.7;
 }
 .sideLinks a:hover {
@@ -1277,7 +1277,7 @@
   font:
     11px ui-monospace,
     monospace;
-  color: var(--muted);
+  color: var(--muted-foreground);
 }
 .codeBlock {
   margin: 0;
@@ -1289,8 +1289,8 @@
     Consolas,
     monospace;
   padding: 24px;
-  color: #cbd5e1;
-  background: #182230;
+  color: var(--foreground);
+  background: var(--surface-muted);
   border-radius: 0 0 12px 12px;
   max-height: 720px;
   overflow: auto;
@@ -1316,21 +1316,21 @@
 }
 .versionRow p {
   font-size: 11px;
-  color: var(--muted);
+  color: var(--muted-foreground);
   margin-top: 5px;
 }
 .modal {
   border: 1px solid var(--line);
   padding: 0;
   border-radius: 14px;
-  background: #fff;
+  background: var(--surface);
   color: var(--ink);
   width: 460px;
   max-width: calc(100vw - 32px);
-  box-shadow: 0 20px 60px #10182826;
+  box-shadow: 0 20px 60px var(--shadow);
 }
 .modal::backdrop {
-  background: #10182866;
+  background: var(--scrim);
 }
 .modalBody {
   padding: 26px;
@@ -1343,7 +1343,7 @@
 .modalBody p {
   font-size: 13px;
   line-height: 1.9;
-  color: var(--muted);
+  color: var(--muted-foreground);
 }
 .modalActions {
   padding: 18px 26px;
@@ -1351,7 +1351,7 @@
   display: flex;
   justify-content: flex-end;
   gap: 9px;
-  background: #fcfcfd;
+  background: var(--selection);
 }
 .largeModal {
   width: 800px;
@@ -1381,12 +1381,12 @@
 .protocolArticle p {
   font-size: 13px;
   line-height: 1.95;
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .protocolArticle ol {
   font-size: 13px;
   line-height: 1.95;
-  color: #667085;
+  color: var(--muted-foreground);
   margin: 12px 0 0;
   padding-left: 20px;
   list-style: decimal;
@@ -1413,13 +1413,13 @@
 }
 .protocolCallout {
   padding: 17px 20px;
-  border: 1px solid #e2e7ff;
+  border: 1px solid var(--selection-border);
   border-radius: 8px;
-  background: #f6f7ff;
+  background: var(--selection);
   margin-top: 20px;
 }
 .protocolCallout p {
-  color: #656aa0;
+  color: var(--primary);
   font-size: 12px;
 }
 .formGrid {
@@ -1445,12 +1445,12 @@
   margin-bottom: 7px !important;
 }
 .formSectionTitle svg {
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .formDescription {
   font-size: 11px;
   line-height: 1.8;
-  color: var(--muted);
+  color: var(--muted-foreground);
   margin-bottom: 22px !important;
 }
 .formField {
@@ -1466,16 +1466,16 @@
 .fieldLabel {
   font-size: 12px;
   font-weight: 500;
-  color: #344054;
+  color: var(--foreground);
 }
 .required {
-  color: #8b91a2;
+  color: var(--muted-foreground);
   margin-left: 3px;
 }
 .fieldHint {
   font-size: 11px;
   line-height: 1.75;
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .input,
 .textarea,
@@ -1484,24 +1484,24 @@
   min-width: 0;
   border: 1px solid var(--strong-line);
   border-radius: 7px;
-  color: #344054;
-  background: #fff;
+  color: var(--foreground);
+  background: var(--surface);
   padding: 9px 11px;
   line-height: 1.6;
   font-size: 12px !important;
-  box-shadow: 0 1px 2px #10182803;
+  box-shadow: 0 1px 2px var(--shadow);
   outline: none;
 }
 .input:focus,
 .textarea:focus,
 .select:focus {
-  border-color: #a5b4fc;
-  box-shadow: 0 0 0 3px #eef2ff;
+  border-color: var(--selection-border);
+  box-shadow: 0 0 0 3px var(--shadow);
   outline: none !important;
 }
 .input:disabled {
-  background: #f9fafb;
-  color: #667085;
+  background: var(--selection);
+  color: var(--muted-foreground);
 }
 .textarea {
   resize: vertical;
@@ -1519,7 +1519,7 @@
     Consolas,
     monospace !important;
   min-height: 480px;
-  background: #fafbfd;
+  background: var(--selection);
   tab-size: 2;
 }
 .fieldColumns {
@@ -1535,7 +1535,7 @@
   border-radius: 8px;
   padding: 18px;
   margin-top: 14px;
-  background: #fcfcfe;
+  background: var(--selection);
 }
 .linkEditorHeader {
   display: flex;
@@ -1545,7 +1545,7 @@
   margin-bottom: 16px;
   font-size: 11px;
   font-weight: 500;
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .linkEditor .fieldColumns {
   margin-bottom: 16px;
@@ -1555,18 +1555,18 @@
 }
 .linkEmpty {
   padding: 20px;
-  border: 1px dashed #d6dce7;
-  background: #fcfcfe;
+  border: 1px dashed var(--selection-border);
+  background: var(--selection);
   border-radius: 8px;
   font-size: 12px;
-  color: #667085;
+  color: var(--muted-foreground);
   line-height: 1.8;
   margin-bottom: 15px;
 }
 .editorTabs {
   display: flex;
   gap: 4px;
-  background: #eef0f4;
+  background: var(--selection);
   padding: 4px;
   border-radius: 8px;
   width: max-content;
@@ -1576,12 +1576,12 @@
   padding: 7px 14px;
   border-radius: 5px;
   font-size: 11px;
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .editorTabs button[aria-pressed="true"] {
-  background: #fff;
-  color: #344054;
-  box-shadow: 0 1px 3px #1018280d;
+  background: var(--surface);
+  color: var(--foreground);
+  box-shadow: 0 1px 3px var(--shadow);
 }
 .publishSidebar {
   position: sticky;
@@ -1605,7 +1605,7 @@
   padding: 0;
   list-style: none;
   font-size: 11px;
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .publishChecklist li {
   display: flex;
@@ -1613,13 +1613,13 @@
   gap: 8px;
 }
 .publishChecklist .completed {
-  color: #5c7391;
+  color: var(--muted-foreground);
 }
 .publishChecklist svg {
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .publishChecklist .completed svg {
-  color: #6176dd;
+  color: var(--primary);
 }
 .publishMeta {
   display: flex;
@@ -1629,7 +1629,7 @@
   margin-bottom: 16px;
   border-bottom: 1px solid var(--line);
   font-size: 11px;
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .publishButtons {
   display: grid;
@@ -1676,7 +1676,7 @@
   place-items: center;
   width: 31px;
   height: 31px;
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .accountLayout {
   display: grid;
@@ -1694,10 +1694,10 @@
   height: 54px;
   display: grid;
   place-items: center;
-  background: #eef2ff;
-  border: 1px solid #e0e7ff;
+  background: var(--selection);
+  border: 1px solid var(--selection-border);
   border-radius: 14px;
-  color: #5b58cf;
+  color: var(--primary);
   margin-bottom: 28px;
 }
 .accountIntro h1 {
@@ -1710,7 +1710,7 @@
 .accountIntro > p {
   font-size: 13px;
   line-height: 1.9;
-  color: var(--muted);
+  color: var(--muted-foreground);
   max-width: 360px;
 }
 .accountFeatures {
@@ -1724,7 +1724,7 @@
   gap: 12px;
 }
 .accountFeatures svg {
-  color: #8793aa;
+  color: var(--muted-foreground);
   margin-top: 2px;
 }
 .accountFeatures strong {
@@ -1734,7 +1734,7 @@
 }
 .accountFeatures p {
   font-size: 11px;
-  color: #667085;
+  color: var(--muted-foreground);
   line-height: 1.8;
   margin-top: 5px;
 }
@@ -1742,8 +1742,8 @@
   padding: 28px;
   border: 1px solid var(--line);
   border-radius: 12px;
-  background: #fff;
-  box-shadow: 0 4px 16px #10182803;
+  background: var(--surface);
+  box-shadow: 0 4px 16px var(--shadow);
 }
 .authCard h2 {
   font-size: 20px;
@@ -1753,14 +1753,14 @@
 .authCard > .authDescription {
   font-size: 12px;
   line-height: 1.8;
-  color: var(--muted);
+  color: var(--muted-foreground);
   margin-top: 9px;
   margin-bottom: 23px;
 }
 .authTabs {
   display: flex;
   gap: 3px;
-  background: #f2f4f7;
+  background: var(--selection);
   border-radius: 7px;
   padding: 4px;
   margin-bottom: 23px;
@@ -1769,13 +1769,13 @@
   padding: 8px;
   flex: 1;
   font-size: 12px;
-  color: #667085;
+  color: var(--muted-foreground);
   border-radius: 5px;
 }
 .authTabs button[aria-pressed="true"] {
-  background: #fff;
-  color: #344054;
-  box-shadow: 0 1px 3px #1018280a;
+  background: var(--surface);
+  color: var(--foreground);
+  box-shadow: 0 1px 3px var(--shadow);
   font-weight: 500;
 }
 .authCard .primaryButton {
@@ -1792,7 +1792,7 @@
   margin-top: 23px !important;
   font-size: 11px;
   line-height: 1.8;
-  color: #667085;
+  color: var(--muted-foreground);
   text-align: center;
 }
 .authSecondary {
@@ -1800,18 +1800,18 @@
   justify-content: center;
   margin-top: 16px;
   font-size: 11px;
-  color: var(--muted);
+  color: var(--muted-foreground);
 }
 .authSecondary button {
   font-size: 11px;
-  color: #667085;
+  color: var(--muted-foreground);
   text-decoration: underline;
   text-underline-offset: 3px;
 }
 .verificationCard {
   padding: 17px;
-  border: 1px solid #dfe5ff;
-  background: #f7f8ff;
+  border: 1px solid var(--selection-border);
+  background: var(--selection);
   border-radius: 8px;
   margin: 18px 0;
 }
@@ -1821,12 +1821,12 @@
   gap: 7px;
   font-size: 13px;
   font-weight: 600;
-  color: #5254a7;
+  color: var(--primary);
 }
 .verificationCard p {
   font-size: 11px;
   line-height: 1.8;
-  color: #60658e;
+  color: var(--muted-foreground);
   margin-top: 9px;
   margin-bottom: 13px;
 }
@@ -1843,9 +1843,9 @@
   width: 44px;
   height: 44px;
   font-size: 17px;
-  background: #eef2ff;
-  color: #625be2;
-  border-color: #e0e7ff;
+  background: var(--selection);
+  color: var(--primary);
+  border-color: var(--selection-border);
 }
 .loggedUser strong {
   font-size: 13px;
@@ -1856,13 +1856,13 @@
   display: inline-flex;
   gap: 5px;
   align-items: center;
-  color: #348561;
+  color: var(--success);
   font-size: 11px;
   margin-top: 5px;
 }
 .accountInfo {
   padding: 17px;
-  background: #f9fafc;
+  background: var(--selection);
   border: 1px solid var(--line);
   border-radius: 8px;
   margin-bottom: 20px;
@@ -1870,11 +1870,11 @@
 .accountInfo p {
   font-size: 11px;
   line-height: 1.85;
-  color: #667085;
+  color: var(--muted-foreground);
 }
 .accountInfo strong {
   font-weight: 500;
-  color: #475467;
+  color: var(--foreground);
 }
 .authCard .notice {
   font-size: 11px;
@@ -1883,7 +1883,7 @@
   padding: 35px 0;
   text-align: center;
   font-size: 12px;
-  color: var(--muted);
+  color: var(--muted-foreground);
 }
 @media (min-width: 1650px) {
   .content {
@@ -2036,7 +2036,7 @@
     display: grid;
     place-items: center;
     padding: 4px;
-    color: #667085;
+    color: var(--muted-foreground);
     margin-right: 1px;
   }
   .mobileClose {
@@ -2158,7 +2158,7 @@
     gap: 8px;
     align-items: center;
     margin-top: 10px;
-    color: #667085;
+    color: var(--muted-foreground);
     font-size: 11px;
   }
   .documentMobileMeta .kindBadge {
@@ -2375,3 +2375,8 @@
 .formPanel > .fieldColumns {
   margin-bottom: 20px;
 }
+
+.brand{background:transparent;color:var(--foreground-strong)}
+.primaryButton,.primaryButton:hover{color:var(--primary-foreground);background:var(--primary)}
+.primaryButton:hover{background:var(--primary-hover)}
+.primaryButton:disabled{background:var(--disabled-background);color:var(--disabled-foreground)}
diff --git a/apps/waterfall-wiki/src/styles/landing.module.css b/apps/waterfall-wiki/src/styles/landing.module.css
index d482f6c..1538b30 100644
--- a/apps/waterfall-wiki/src/styles/landing.module.css
+++ b/apps/waterfall-wiki/src/styles/landing.module.css
@@ -1 +1,7 @@
-.page{background:#faf9f6;color:#242622;font-family:Arial,'PingFang SC',sans-serif}.page *{box-sizing:border-box}.page a{text-decoration:none;color:inherit}.nav{max-width:1320px;margin:auto;height:92px;display:flex;align-items:center;gap:28px;padding:0 38px;border-bottom:1px solid #dedfd8}.logo{display:flex;align-items:center;gap:10px;font-size:24px}.logo span{font-size:11px;letter-spacing:2px;color:#7c8075}.nav>div{display:flex;gap:30px;flex:1;margin-left:60px;font-size:13px}.nav>a:not(.logo){font-size:13px}.dark{display:inline-flex;align-items:center;justify-content:center;gap:16px;background:#252a23;color:#fff!important;border-radius:7px;padding:14px 20px;font-size:14px}.dark:hover{background:#47513d}.hero{text-align:center;padding:78px 32px 40px;max-width:1320px;margin:auto}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#68725b;font-weight:600}.hero h1{font-size:clamp(36px,4.6vw,68px);line-height:1.24;letter-spacing:-3px;font-weight:600;margin:28px 0}.hero h1>span{color:#75865d}.intro{font-size:16px;line-height:1.95;color:#7b7e73}.actions{display:flex;align-items:center;justify-content:center;gap:28px;margin:28px 0 55px;font-size:13px}.product{text-align:left;border:1px solid #d8dcd0;border-radius:13px;overflow:hidden;box-shadow:0 20px 65px #39442b0c;background:white}.productBar{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 23px;border-bottom:1px solid #e0e3d9;font-size:10px;color:#8c9284}.productBar b{letter-spacing:2px;color:#3a4434}.demo{display:flex;min-height:385px}.demo>aside{width:175px;flex-shrink:0;padding:26px 20px;border-right:1px solid #e0e3d9;font-size:11px;color:#707969}.demo hr{border:0;border-top:1px solid #e0e3d9;margin:20px 0}.demo aside p{padding:8px 0}.demo aside small{display:block;margin-top:90px;font-size:9px}.demoWorld{position:relative;flex:1;min-width:0;background:radial-gradient(#cdd4c4 .7px,transparent .7px) 0 0/18px 18px,#f1f3ec}.demoWorld>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#8fa174;stroke-width:1.5}.demoWorld>article{position:absolute;border:1px solid #d6ddcb;box-shadow:0 8px 20px #39442b09;border-radius:7px;padding:23px;width:23%;background:#fff}.demoWorld small{font-size:8px;letter-spacing:1px;color:#7b886d}.demoWorld h3{font-size:22px;font-weight:500;line-height:1.5;margin:18px 0 12px}.demoWorld p{font-size:10px;line-height:1.9;color:#7f8775}.note{left:5%;top:55px;transform:rotate(-3deg)}.demoWorld>.art{left:36%;top:35px;width:25%;height:260px;overflow:hidden;background:#c9d3b1;color:#34452c}.art h3{position:absolute;bottom:24px;z-index:1}.art>span{position:absolute;bottom:23px;font-size:6px;letter-spacing:2px}.orbit{width:165px;height:165px;border-radius:50%;background:linear-gradient(135deg,#f7f2d8,#7f9469);box-shadow:20px 10px 30px #52613e44;position:absolute;right:-28px;top:25px}.prompt{left:69%;top:100px;transform:rotate(3deg)}.prompt>svg{display:block;margin-bottom:16px;color:#748361}.dock{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:23px;padding:12px 18px;border:1px solid #dbe1d2;background:#fff;border-radius:10px}.dock svg{width:17px;color:#647353}.caption{font-size:10px;color:#8a8e82;margin-top:23px}.tools{max-width:1160px;padding:75px 32px;margin:auto}.page h2{font-size:clamp(30px,3.5vw,47px);line-height:1.3;letter-spacing:-1.8px;font-weight:500;margin:20px 0 35px}.toolGrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.toolGrid>a{border:1px solid #dedfd6;padding:30px;border-radius:12px;background:#fff;transition:transform .2s}.toolGrid>a:hover{transform:translateY(-4px)}.toolGrid>a>svg{width:21px;vertical-align:middle;color:#788462}.toolGrid>a>span{font-size:9px;letter-spacing:2px;margin-left:13px;color:#7a8170}.toolGrid h3{font-size:27px;letter-spacing:-1px;margin:25px 0 14px;font-weight:500}.toolGrid p{font-size:13px;line-height:1.9;color:#85887e;max-width:370px}.toolGrid strong{display:flex;justify-content:space-between;font-weight:400;font-size:12px;margin-top:24px}.poster,.miniCanvas{height:225px;margin-top:30px;overflow:hidden;background:#ebeedf;position:relative;border-radius:6px}.poster>span{display:block;font-size:48px;letter-spacing:-3px;font-weight:700;line-height:1;padding:28px;color:#434e32}.poster i{font-family:Georgia,serif;font-weight:400}.poster>b{position:absolute;right:20px;top:20px;font-size:175px;line-height:1;color:#9cae79;transform:rotate(15deg)}.miniCanvas{display:flex;align-items:center;justify-content:center;gap:10px;background:radial-gradient(#ccd3c5 .7px,transparent .7px) 0 0/15px 15px,#f0f2eb}.miniCanvas b{font-size:11px;font-weight:400;padding:20px 13px;border:1px solid #cfd8c1;background:#fff;border-radius:6px}.miniCanvas i{color:#92a17c}.workflow{max-width:1160px;margin:20px auto;padding:65px 32px 90px;display:grid;grid-template-columns:1fr 1fr;gap:100px;border-top:1px solid #dddfd4}.workflow p{font-size:13px;line-height:1.9;color:#85897d}.workflow a{display:inline-flex;gap:10px;font-size:12px;margin-top:20px}.workflow ol{list-style:none;padding:0}.workflow li{display:flex;gap:25px;border-bottom:1px solid #dedfd6;padding:22px 0}.workflow li>b{font-size:12px;color:#98a38a;padding-top:6px}.workflow h3{font-size:18px;font-weight:500;margin:0}.end{text-align:center;padding:75px 25px 95px;background:#eef0e7;border-top:1px solid #dfe2d5}.end>span{font-size:55px;color:#8c9c70}.footer{max-width:1240px;display:flex;justify-content:space-between;gap:25px;align-items:center;margin:auto;padding:35px;font-size:11px;color:#7a8171}.footer .logo{font-size:16px}.page a:focus-visible{outline:2px solid #647c48;outline-offset:5px}@media(max-width:760px){.nav{padding:0 20px;height:72px;gap:14px}.nav>div{display:none}.nav .logo{flex:1}.nav .logo span{display:none}.nav .dark{padding:10px}.hero{padding:50px 18px 20px}.hero h1{letter-spacing:-1.5px}.intro{font-size:13px}.actions{gap:15px}.demo>aside{display:none}.demo{min-height:340px}.demoWorld>article{padding:12px}.demoWorld h3{font-size:16px}.demoWorld p{font-size:8px}.demoWorld small{font-size:6px}.demoWorld>.art{height:220px}.prompt{left:68%}.orbit{width:110px;height:110px}.productBar span:last-child{display:none}.toolGrid{grid-template-columns:1fr}.tools{padding:50px 20px}.workflow{grid-template-columns:1fr;gap:20px;padding:45px 20px}.footer{flex-wrap:wrap;padding:25px 20px}.footer>span{display:none}}
+.page{background:var(--selection);color:var(--foreground-strong);font-family:Arial,'PingFang SC',sans-serif}.page *{box-sizing:border-box}.page a{text-decoration:none;color:inherit}.nav{max-width:1320px;margin:auto;height:92px;display:flex;align-items:center;gap:28px;padding:0 38px;border-bottom:1px solid var(--border)}.logo{display:flex;align-items:center;gap:10px;font-size:24px}.logo span{font-size:11px;letter-spacing:2px;color:var(--muted-foreground)}.nav>div{display:flex;gap:30px;flex:1;margin-left:60px;font-size:13px}.nav>a:not(.logo){font-size:13px}.dark{display:inline-flex;align-items:center;justify-content:center;gap:16px;background:var(--primary);color:var(--primary-foreground)!important;border-radius:7px;padding:14px 20px;font-size:14px}.dark:hover{background:var(--primary-hover)}.hero{text-align:center;padding:78px 32px 40px;max-width:1320px;margin:auto}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--muted-foreground);font-weight:600}.hero h1{font-size:clamp(36px,4.6vw,68px);line-height:1.24;letter-spacing:-3px;font-weight:600;margin:28px 0}.hero h1>span{color:var(--muted-foreground)}.intro{font-size:16px;line-height:1.95;color:var(--muted-foreground)}.actions{display:flex;align-items:center;justify-content:center;gap:28px;margin:28px 0 55px;font-size:13px}.product{text-align:left;border:1px solid var(--border);border-radius:13px;overflow:hidden;box-shadow:0 20px 65px var(--shadow);background:var(--surface)}.productBar{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 23px;border-bottom:1px solid var(--border);font-size:10px;color:var(--muted-foreground)}.productBar b{letter-spacing:2px;color:var(--foreground-strong)}.demo{display:flex;min-height:385px}.demo>aside{width:175px;flex-shrink:0;padding:26px 20px;border-right:1px solid var(--border);font-size:11px;color:var(--muted-foreground)}.demo hr{border:0;border-top:1px solid var(--border);margin:20px 0}.demo aside p{padding:8px 0}.demo aside small{display:block;margin-top:90px;font-size:9px}.demoWorld{position:relative;flex:1;min-width:0;background:radial-gradient(var(--grid) .7px,transparent .7px) 0 0/18px 18px,var(--background)}.demoWorld>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--connector);stroke-width:1.5}.demoWorld>article{position:absolute;border:1px solid var(--selection-border);box-shadow:0 8px 20px var(--shadow);border-radius:7px;padding:23px;width:23%;background:var(--background)}.demoWorld small{font-size:8px;letter-spacing:1px;color:var(--muted-foreground)}.demoWorld h3{font-size:22px;font-weight:500;line-height:1.5;margin:18px 0 12px}.demoWorld p{font-size:10px;line-height:1.9;color:var(--muted-foreground)}.note{left:5%;top:55px;transform:rotate(-3deg)}.demoWorld>.art{left:36%;top:35px;width:25%;height:260px;overflow:hidden;background:var(--background);color:var(--primary)}.art h3{position:absolute;bottom:24px;z-index:1}.art>span{position:absolute;bottom:23px;font-size:6px;letter-spacing:2px}.orbit{width:165px;height:165px;border-radius:50%;background:linear-gradient(135deg,#f7f2d8,#7f9469);box-shadow:20px 10px 30px #52613e44;position:absolute;right:-28px;top:25px}.prompt{left:69%;top:100px;transform:rotate(3deg)}.prompt>svg{display:block;margin-bottom:16px;color:var(--muted-foreground)}.dock{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:23px;padding:12px 18px;border:1px solid var(--border);background:var(--surface);border-radius:10px}.dock svg{width:17px;color:var(--foreground)}.caption{font-size:10px;color:var(--muted-foreground);margin-top:23px}.tools{max-width:1160px;padding:75px 32px;margin:auto}.page h2{font-size:clamp(30px,3.5vw,47px);line-height:1.3;letter-spacing:-1.8px;font-weight:500;margin:20px 0 35px}.toolGrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.toolGrid>a{border:1px solid var(--border);padding:30px;border-radius:12px;background:var(--surface);transition:transform .2s}.toolGrid>a:hover{transform:translateY(-4px)}.toolGrid>a>svg{width:21px;vertical-align:middle;color:var(--muted-foreground)}.toolGrid>a>span{font-size:9px;letter-spacing:2px;margin-left:13px;color:var(--muted-foreground)}.toolGrid h3{font-size:27px;letter-spacing:-1px;margin:25px 0 14px;font-weight:500}.toolGrid p{font-size:13px;line-height:1.9;color:var(--muted-foreground);max-width:370px}.toolGrid strong{display:flex;justify-content:space-between;font-weight:400;font-size:12px;margin-top:24px}.poster,.miniCanvas{height:225px;margin-top:30px;overflow:hidden;background:#ebeedf;position:relative;border-radius:6px}.poster>span{display:block;font-size:48px;letter-spacing:-3px;font-weight:700;line-height:1;padding:28px;color:#434e32}.poster i{font-family:Georgia,serif;font-weight:400}.poster>b{position:absolute;right:20px;top:20px;font-size:175px;line-height:1;color:#9cae79;transform:rotate(15deg)}.miniCanvas{display:flex;align-items:center;justify-content:center;gap:10px;background:radial-gradient(var(--grid) .7px,transparent .7px) 0 0/15px 15px,var(--background)}.miniCanvas b{font-size:11px;font-weight:400;padding:20px 13px;border:1px solid var(--selection-border);background:var(--background);border-radius:6px}.miniCanvas i{color:var(--muted-foreground)}.workflow{max-width:1160px;margin:20px auto;padding:65px 32px 90px;display:grid;grid-template-columns:1fr 1fr;gap:100px;border-top:1px solid var(--border)}.workflow p{font-size:13px;line-height:1.9;color:var(--muted-foreground)}.workflow a{display:inline-flex;gap:10px;font-size:12px;margin-top:20px}.workflow ol{list-style:none;padding:0}.workflow li{display:flex;gap:25px;border-bottom:1px solid var(--border);padding:22px 0}.workflow li>b{font-size:12px;color:var(--muted-foreground);padding-top:6px}.workflow h3{font-size:18px;font-weight:500;margin:0}.end{text-align:center;padding:75px 25px 95px;background:var(--selection);border-top:1px solid var(--border)}.end>span{font-size:55px;color:var(--muted-foreground)}.footer{max-width:1240px;display:flex;justify-content:space-between;gap:25px;align-items:center;margin:auto;padding:35px;font-size:11px;color:var(--muted-foreground)}.footer .logo{font-size:16px}.page a:focus-visible{outline:2px solid var(--ring);outline-offset:5px}@media(max-width:760px){.nav{padding:0 20px;height:72px;gap:14px}.nav>div{display:none}.nav .logo{flex:1}.nav .logo span{display:none}.nav .dark{padding:10px}.hero{padding:50px 18px 20px}.hero h1{letter-spacing:-1.5px}.intro{font-size:13px}.actions{gap:15px}.demo>aside{display:none}.demo{min-height:340px}.demoWorld>article{padding:12px}.demoWorld h3{font-size:16px}.demoWorld p{font-size:8px}.demoWorld small{font-size:6px}.demoWorld>.art{height:220px}.prompt{left:68%}.orbit{width:110px;height:110px}.productBar span:last-child{display:none}.toolGrid{grid-template-columns:1fr}.tools{padding:50px 20px}.workflow{grid-template-columns:1fr;gap:20px;padding:45px 20px}.footer{flex-wrap:wrap;padding:25px 20px}.footer>span{display:none}}
+
+.nav .logo{flex-shrink:0}.nav>div{margin-left:24px}.nav .dark,.actions .dark,.end .dark{background:var(--primary);color:var(--primary-foreground)!important}
+.dark:hover{background:var(--primary-hover)}
+.hero h1>span{color:var(--primary)}
+.end>span{display:inline-flex}.end>span :global(.endoleap-mark){width:64px;height:64px}.end>span :global(.endoleap-wordmark){display:none!important}
+.demoWorld,.miniCanvas{background-color:#FAFAFA;background-image:radial-gradient(var(--grid) .7px,transparent .7px);color:#49372E}
diff --git a/apps/waterfall-wiki/src/styles/learning-series.css b/apps/waterfall-wiki/src/styles/learning-series.css
index 93630a3..2027664 100644
--- a/apps/waterfall-wiki/src/styles/learning-series.css
+++ b/apps/waterfall-wiki/src/styles/learning-series.css
@@ -1,5 +1,5 @@
-.learning-reader{--learning-ink:#282b23;--learning-paper:#fbfaf5;background:#eeeee9;color:var(--learning-ink);padding:25px 28px;border-radius:20px}.learning-reader button{cursor:pointer}.learning-reader button:focus-visible,.learning-reader a:focus-visible{outline:3px solid #709443;outline-offset:4px}.learning-reader-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:780px;margin:0 auto 24px}.learning-reader-bar>div{display:grid;gap:9px}.learning-reader-badge{font-size:11px;letter-spacing:1px;color:#737869}.learning-reader-bar strong{font-size:15px;font-weight:550}.learning-reader-bar>button{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap;background:#fff;padding:10px 13px;border-radius:25px;border:1px solid #dfdfd7}.learning-boards{max-width:720px;margin:auto;outline-offset:6px;container-type:inline-size}.learning-boards.is-continuous{display:grid;gap:24px}.learning-cover,.learning-sheet{width:100%;aspect-ratio:3/4;box-shadow:0 5px 22px #343b2810;overflow:hidden}.learning-cover img{display:block;width:100%;height:100%;object-fit:contain}.learning-sheet{position:relative;background:var(--learning-paper);padding:5.6cqw 6.8cqw;color:var(--learning-ink);font-size:1.8cqw;line-height:1.5}.learning-sheet-top{display:flex;justify-content:space-between;align-items:center;letter-spacing:.08em;font-size:1.25cqw;color:#707665;padding-bottom:2.6cqw;border-bottom:1px solid #dcded1}.learning-sheet-top>span:last-child{font-family:Arial,sans-serif;font-size:1.15cqw}.learning-sheet-footer{position:absolute;bottom:3.3cqw;left:6.8cqw;right:6.8cqw;border-top:1px solid #dcded1;padding-top:1.9cqw;display:flex;justify-content:space-between;font-size:1.2cqw;color:#787c70}.learning-sheet-footer b{margin-left:2cqw;color:#34392b;font-weight:600}.learning-intro{padding-top:4.5cqw;margin-bottom:3.6cqw}.learning-chapter{font-size:1.5cqw;letter-spacing:.08em;color:#727963}.learning-intro h2,.learning-ending h2{font-size:5.8cqw;line-height:1.28;font-weight:800;letter-spacing:-.04em;margin:2.6cqw 0 2cqw}.learning-sheet mark{color:inherit;background:linear-gradient(transparent 45%,var(--learning-accent) 45%,var(--learning-accent) 93%,transparent 93%);padding:0 .15em}.learning-intro>p,.learning-ending>p{color:#676e5f;font-size:1.85cqw;margin:0}.learning-audience{display:inline-block;font-size:1.35cqw;letter-spacing:.02em;margin-top:2.2cqw;padding:.7cqw 1.4cqw;border:1px solid #d6d9cb;border-radius:20px}.learning-index{display:grid;grid-template-columns:1fr;gap:0}.learning-index button{display:flex;text-align:left;align-items:center;gap:1.6cqw;padding:1.35cqw 0;border-bottom:1px solid #e2e4d9;background:transparent}.learning-index button>span{font-family:Georgia,serif;font-size:3.2cqw;min-width:4cqw;color:#84916a;font-style:italic}.learning-index button>div{flex:1;min-width:0}.learning-index strong{font-size:2cqw;font-weight:650;display:block}.learning-index small{font-size:1.2cqw;color:#858c79;display:block;line-height:1.55}.learning-index svg{width:2.3cqw;flex-shrink:0;color:#7e886c}.learning-index-note{display:flex;align-items:center;gap:1cqw;font-size:1.4cqw;color:#727b63;margin-top:2.4cqw}.learning-index-note svg{width:2cqw}.learning-pair-title{padding:3.7cqw 0 2.7cqw}.learning-pair-title>span{font-size:1.3cqw;color:#7c846d}.learning-pair-title h2{margin:.6cqw 0 0;font-size:3.5cqw;font-weight:750;letter-spacing:-.035em}.learning-skill{padding:2.6cqw 0;border-top:1px solid #d9ddcf}.learning-skill-heading{display:flex;gap:1.9cqw;align-items:center}.learning-number{font-family:Georgia,serif;font-size:5.3cqw;font-style:italic;line-height:1;color:#343b2a;min-width:6.7cqw;position:relative;z-index:0}.learning-number:after{content:"";position:absolute;left:0;right:-.2cqw;height:2cqw;bottom:.1cqw;z-index:-1;background:var(--learning-accent);transform:rotate(-5deg)}.learning-category{font-size:1.2cqw;color:#778168;letter-spacing:.08em}.learning-skill h3{font-size:2.7cqw;line-height:1.4;font-weight:750;letter-spacing:-.025em;margin:.3cqw 0 0}.learning-skill-name{margin:1.15cqw 0 1.55cqw 8.6cqw;display:flex;gap:.7cqw;align-items:center;width:fit-content;max-width:calc(100% - 8.6cqw);font-size:1.25cqw;font-family:Arial,sans-serif;color:#717b62;overflow-wrap:anywhere}.learning-skill-name svg{width:1.4cqw;height:1.4cqw;flex-shrink:0}.learning-io{display:grid;gap:.75cqw;margin-bottom:1.7cqw}.learning-io p{display:flex;align-items:baseline;gap:1.2cqw;margin:0;font-size:1.7cqw;line-height:1.6}.learning-io b{font-size:1.35cqw;flex-shrink:0;font-weight:600;padding:.2cqw .8cqw;background:#e8eadd;border-radius:4px;color:#626c53}.learning-sample{border:1px solid #dce0d1;border-radius:.9cqw;padding:1.2cqw 1.9cqw;background:#fffefa;position:relative;margin-bottom:1.7cqw}.sample-label{font-size:1.05cqw;display:block;color:#939987;margin-bottom:.8cqw}.learning-sample>div{display:flex;align-items:center;gap:1.2cqw;font-size:1.5cqw;padding:.4cqw 0}.learning-sample>div>span{font-family:Arial,sans-serif;font-size:1cqw;color:#9ca48e}.learning-sample p{margin:0;flex:1}.learning-sample svg{color:#849c59;width:1.6cqw;height:1.6cqw}.sample-1{background:repeating-linear-gradient(#fffefa 0,#fffefa 3.05cqw,#e8eade 3.05cqw,#e8eade 3.15cqw)}.sample-2>div:first-of-type p{background:linear-gradient(transparent 55%,var(--learning-accent) 55%);width:fit-content;flex:initial}.learning-prompt{display:flex;gap:1.2cqw;align-items:baseline}.learning-prompt>span{font-size:1.2cqw;white-space:nowrap;font-weight:600;color:#63714f}.learning-prompt p{font-size:1.55cqw;line-height:1.8;margin:0}.learning-caveat{font-size:1.2cqw;line-height:1.6;color:#858c79;margin:1.1cqw 0 0}.learning-ending{padding:5cqw 0 3cqw}.learning-ending h2{font-size:5.2cqw}.learning-workflow{list-style:none;padding:0;margin:1cqw 0 3.5cqw;display:grid;gap:1cqw}.learning-workflow li{position:relative;display:flex;align-items:center;gap:1.6cqw;padding:1.4cqw 1.8cqw;background:#ecefdf;border-radius:.7cqw;font-size:1.9cqw}.learning-workflow b{font-family:Georgia,serif;font-size:2.6cqw;font-style:italic}.learning-workflow svg{margin-left:auto;width:2cqw;height:2cqw;color:#8b9579}.learning-source-box{border:1px solid #d5dac8;padding:2.5cqw;border-radius:.8cqw;background:#fffefa}.learning-source-box h3{display:flex;align-items:center;justify-content:space-between;font-size:2.3cqw;margin:0 0 1.6cqw;font-weight:700}.learning-source-box h3 svg{width:2.4cqw;height:2.4cqw}.learning-source-box>div{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5cqw}.learning-source-box a{display:flex;align-items:center;gap:.9cqw;font-family:Arial,sans-serif;font-size:1.25cqw;padding:1.1cqw 0;border-bottom:1px solid #e8ebdf;overflow-wrap:anywhere;min-width:0}.learning-source-box a>span{font-size:1cqw;color:#98a18b}.learning-source-box a svg{margin-left:auto;flex-shrink:0;width:1.3cqw;height:1.3cqw}.learning-source-box p{font-size:1.2cqw;line-height:1.8;color:#87917a;margin:1.8cqw 0 0}.learning-series-reminder{display:grid;gap:.9cqw;margin-top:3cqw;font-size:1.35cqw}.learning-series-reminder>b{color:#7e886d;font-size:1.2cqw}.learning-series-reminder a{display:flex;align-items:center;gap:.8cqw}.learning-series-reminder svg{width:1.4cqw;height:1.4cqw}.learning-pagination{display:flex;align-items:center;justify-content:center;gap:30px;margin:22px 0 18px}.learning-pagination>button{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid #dedfd5}.learning-pagination>button:disabled{opacity:.35;cursor:default}.learning-pagination>span{min-width:105px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}.learning-pagination small{display:block;font-size:10px;margin-top:5px;color:#7b826e}.learning-page-tabs{max-width:720px;margin:0 auto;display:flex;gap:7px;overflow-x:auto;padding:5px 2px 12px}.learning-page-tabs>button{flex:1;min-width:65px;display:grid;gap:5px;border:1px solid #dcdfd2;border-radius:9px;background:#f9faf5;padding:10px 8px;font-size:10px;color:#7e866f;white-space:nowrap}.learning-page-tabs>button>span{font-size:12px;font-family:Georgia,serif;font-style:italic}.learning-page-tabs>button.selected{background:#31372a;color:white;border-color:#31372a}.learning-related{max-width:720px;margin:22px auto 0;border-top:1px solid #d8dcce;padding-top:20px}.learning-related>span{font-size:11px;color:#7a836a}.learning-related>div{display:grid;gap:8px;margin-top:12px}.learning-related a{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:12px;color:#697358}.learning-related a>b{font-family:Georgia,serif;font-style:italic;font-size:19px;color:#8d9b76}.learning-related a>svg{margin-left:auto;flex-shrink:0}.learning-related a.selected{color:#303b22;font-weight:600}
+.learning-reader{--learning-ink:var(--foreground);--learning-paper:var(--surface);background:var(--surface-muted);color:var(--learning-ink);padding:25px 28px;border-radius:20px}.learning-reader button{cursor:pointer}.learning-reader button:focus-visible,.learning-reader a:focus-visible{outline:3px solid var(--ring);outline-offset:4px}.learning-reader-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:780px;margin:0 auto 24px}.learning-reader-bar>div{display:grid;gap:9px}.learning-reader-badge{font-size:11px;letter-spacing:1px;color:var(--muted-foreground)}.learning-reader-bar strong{font-size:15px;font-weight:550}.learning-reader-bar>button{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap;background:var(--surface);padding:10px 13px;border-radius:25px;border:1px solid var(--border)}.learning-boards{max-width:720px;margin:auto;outline-offset:6px;container-type:inline-size}.learning-boards.is-continuous{display:grid;gap:24px}.learning-cover,.learning-sheet{width:100%;aspect-ratio:3/4;box-shadow:0 5px 22px #343b2810;overflow:hidden}.learning-cover img{display:block;width:100%;height:100%;object-fit:contain}.learning-sheet{position:relative;background:var(--learning-paper);padding:5.6cqw 6.8cqw;color:var(--learning-ink);font-size:1.8cqw;line-height:1.5}.learning-sheet-top{display:flex;justify-content:space-between;align-items:center;letter-spacing:.08em;font-size:1.25cqw;color:var(--muted-foreground);padding-bottom:2.6cqw;border-bottom:1px solid var(--border)}.learning-sheet-top>span:last-child{font-family:Arial,sans-serif;font-size:1.15cqw}.learning-sheet-footer{position:absolute;bottom:3.3cqw;left:6.8cqw;right:6.8cqw;border-top:1px solid var(--border);padding-top:1.9cqw;display:flex;justify-content:space-between;font-size:1.2cqw;color:var(--muted-foreground)}.learning-sheet-footer b{margin-left:2cqw;color:var(--foreground-strong);font-weight:600}.learning-intro{padding-top:4.5cqw;margin-bottom:3.6cqw}.learning-chapter{font-size:1.5cqw;letter-spacing:.08em;color:var(--muted-foreground)}.learning-intro h2,.learning-ending h2{font-size:5.8cqw;line-height:1.28;font-weight:800;letter-spacing:-.04em;margin:2.6cqw 0 2cqw}.learning-sheet mark{color:inherit;background:linear-gradient(transparent 45%,var(--learning-accent) 45%,var(--learning-accent) 93%,transparent 93%);padding:0 .15em}.learning-intro>p,.learning-ending>p{color:var(--muted-foreground);font-size:1.85cqw;margin:0}.learning-audience{display:inline-block;font-size:1.35cqw;letter-spacing:.02em;margin-top:2.2cqw;padding:.7cqw 1.4cqw;border:1px solid var(--border);border-radius:20px}.learning-index{display:grid;grid-template-columns:1fr;gap:0}.learning-index button{display:flex;text-align:left;align-items:center;gap:1.6cqw;padding:1.35cqw 0;border-bottom:1px solid var(--border);background:transparent}.learning-index button>span{font-family:Georgia,serif;font-size:3.2cqw;min-width:4cqw;color:var(--muted-foreground);font-style:italic}.learning-index button>div{flex:1;min-width:0}.learning-index strong{font-size:2cqw;font-weight:650;display:block}.learning-index small{font-size:1.2cqw;color:var(--muted-foreground);display:block;line-height:1.55}.learning-index svg{width:2.3cqw;flex-shrink:0;color:var(--muted-foreground)}.learning-index-note{display:flex;align-items:center;gap:1cqw;font-size:1.4cqw;color:var(--muted-foreground);margin-top:2.4cqw}.learning-index-note svg{width:2cqw}.learning-pair-title{padding:3.7cqw 0 2.7cqw}.learning-pair-title>span{font-size:1.3cqw;color:var(--muted-foreground)}.learning-pair-title h2{margin:.6cqw 0 0;font-size:3.5cqw;font-weight:750;letter-spacing:-.035em}.learning-skill{padding:2.6cqw 0;border-top:1px solid var(--border)}.learning-skill-heading{display:flex;gap:1.9cqw;align-items:center}.learning-number{font-family:Georgia,serif;font-size:5.3cqw;font-style:italic;line-height:1;color:var(--foreground-strong);min-width:6.7cqw;position:relative;z-index:0}.learning-number:after{content:"";position:absolute;left:0;right:-.2cqw;height:2cqw;bottom:.1cqw;z-index:-1;background:var(--learning-accent);transform:rotate(-5deg)}.learning-category{font-size:1.2cqw;color:var(--muted-foreground);letter-spacing:.08em}.learning-skill h3{font-size:2.7cqw;line-height:1.4;font-weight:750;letter-spacing:-.025em;margin:.3cqw 0 0}.learning-skill-name{margin:1.15cqw 0 1.55cqw 8.6cqw;display:flex;gap:.7cqw;align-items:center;width:fit-content;max-width:calc(100% - 8.6cqw);font-size:1.25cqw;font-family:Arial,sans-serif;color:var(--muted-foreground);overflow-wrap:anywhere}.learning-skill-name svg{width:1.4cqw;height:1.4cqw;flex-shrink:0}.learning-io{display:grid;gap:.75cqw;margin-bottom:1.7cqw}.learning-io p{display:flex;align-items:baseline;gap:1.2cqw;margin:0;font-size:1.7cqw;line-height:1.6}.learning-io b{font-size:1.35cqw;flex-shrink:0;font-weight:600;padding:.2cqw .8cqw;background:var(--selection);border-radius:4px;color:var(--foreground)}.learning-sample{border:1px solid var(--border);border-radius:.9cqw;padding:1.2cqw 1.9cqw;background:var(--selection);position:relative;margin-bottom:1.7cqw}.sample-label{font-size:1.05cqw;display:block;color:#939987;margin-bottom:.8cqw}.learning-sample>div{display:flex;align-items:center;gap:1.2cqw;font-size:1.5cqw;padding:.4cqw 0}.learning-sample>div>span{font-family:Arial,sans-serif;font-size:1cqw;color:var(--muted-foreground)}.learning-sample p{margin:0;flex:1}.learning-sample svg{color:var(--primary);width:1.6cqw;height:1.6cqw}.sample-1{background:repeating-linear-gradient(#fffefa 0,#fffefa 3.05cqw,#e8eade 3.05cqw,#e8eade 3.15cqw)}.sample-2>div:first-of-type p{background:linear-gradient(transparent 55%,var(--learning-accent) 55%);width:fit-content;flex:initial}.learning-prompt{display:flex;gap:1.2cqw;align-items:baseline}.learning-prompt>span{font-size:1.2cqw;white-space:nowrap;font-weight:600;color:var(--foreground)}.learning-prompt p{font-size:1.55cqw;line-height:1.8;margin:0}.learning-caveat{font-size:1.2cqw;line-height:1.6;color:var(--muted-foreground);margin:1.1cqw 0 0}.learning-ending{padding:5cqw 0 3cqw}.learning-ending h2{font-size:5.2cqw}.learning-workflow{list-style:none;padding:0;margin:1cqw 0 3.5cqw;display:grid;gap:1cqw}.learning-workflow li{position:relative;display:flex;align-items:center;gap:1.6cqw;padding:1.4cqw 1.8cqw;background:var(--selection);border-radius:.7cqw;font-size:1.9cqw}.learning-workflow b{font-family:Georgia,serif;font-size:2.6cqw;font-style:italic}.learning-workflow svg{margin-left:auto;width:2cqw;height:2cqw;color:var(--muted-foreground)}.learning-source-box{border:1px solid var(--border);padding:2.5cqw;border-radius:.8cqw;background:var(--selection)}.learning-source-box h3{display:flex;align-items:center;justify-content:space-between;font-size:2.3cqw;margin:0 0 1.6cqw;font-weight:700}.learning-source-box h3 svg{width:2.4cqw;height:2.4cqw}.learning-source-box>div{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5cqw}.learning-source-box a{display:flex;align-items:center;gap:.9cqw;font-family:Arial,sans-serif;font-size:1.25cqw;padding:1.1cqw 0;border-bottom:1px solid var(--selection-border);overflow-wrap:anywhere;min-width:0}.learning-source-box a>span{font-size:1cqw;color:var(--muted-foreground)}.learning-source-box a svg{margin-left:auto;flex-shrink:0;width:1.3cqw;height:1.3cqw}.learning-source-box p{font-size:1.2cqw;line-height:1.8;color:var(--muted-foreground);margin:1.8cqw 0 0}.learning-series-reminder{display:grid;gap:.9cqw;margin-top:3cqw;font-size:1.35cqw}.learning-series-reminder>b{color:var(--muted-foreground);font-size:1.2cqw}.learning-series-reminder a{display:flex;align-items:center;gap:.8cqw}.learning-series-reminder svg{width:1.4cqw;height:1.4cqw}.learning-pagination{display:flex;align-items:center;justify-content:center;gap:30px;margin:22px 0 18px}.learning-pagination>button{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:var(--surface);border:1px solid var(--border)}.learning-pagination>button:disabled{opacity:.35;cursor:default}.learning-pagination>span{min-width:105px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}.learning-pagination small{display:block;font-size:10px;margin-top:5px;color:var(--muted-foreground)}.learning-page-tabs{max-width:720px;margin:0 auto;display:flex;gap:7px;overflow-x:auto;padding:5px 2px 12px}.learning-page-tabs>button{flex:1;min-width:65px;display:grid;gap:5px;border:1px solid var(--border);border-radius:9px;background:var(--selection);padding:10px 8px;font-size:10px;color:var(--muted-foreground);white-space:nowrap}.learning-page-tabs>button>span{font-size:12px;font-family:Georgia,serif;font-style:italic}.learning-page-tabs>button.selected{background:var(--selection);color:var(--foreground);border-color:var(--selection-border)}.learning-related{max-width:720px;margin:22px auto 0;border-top:1px solid var(--border);padding-top:20px}.learning-related>span{font-size:11px;color:var(--muted-foreground)}.learning-related>div{display:grid;gap:8px;margin-top:12px}.learning-related a{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:12px;color:var(--foreground)}.learning-related a>b{font-family:Georgia,serif;font-style:italic;font-size:19px;color:var(--muted-foreground)}.learning-related a>svg{margin-left:auto;flex-shrink:0}.learning-related a.selected{color:var(--primary);font-weight:600}
 @media(max-width:650px){.learning-reader{padding:16px 10px;border-radius:14px}.learning-reader-bar{gap:10px;margin-bottom:16px;padding:0 3px}.learning-reader-bar strong{font-size:12px;line-height:1.6}.learning-reader-bar>button{font-size:11px;padding:9px 10px}.learning-reader-badge{font-size:10px}.learning-related a{font-size:11px;line-height:1.7}.learning-pagination{margin-top:17px}.learning-sheet{font-synthesis:none}}
-.detail-layout.coded-detail{grid-template-columns:minmax(0,1fr);max-width:1050px;border:0;box-shadow:none;overflow:visible}.coded-detail .detail-media{background:transparent}.coded-detail .detail-info{margin:28px auto 0;max-width:780px;width:100%;border-top:1px solid #e5e7df}.coded-detail .detail-info>.eyebrow{display:none}
+.detail-layout.coded-detail{grid-template-columns:minmax(0,1fr);max-width:1050px;border:0;box-shadow:none;overflow:visible}.coded-detail .detail-media{background:transparent}.coded-detail .detail-info{margin:28px auto 0;max-width:780px;width:100%;border-top:1px solid var(--border)}.coded-detail .detail-info>.eyebrow{display:none}
 .learning-index button{padding:1cqw 0}
-.learning-standalone{width:1080px;height:1440px;margin:0;background:#fbfaf5;overflow:hidden}.learning-standalone .learning-boards{width:1080px;max-width:none;margin:0;container-type:inline-size}.learning-standalone .learning-cover,.learning-standalone .learning-sheet{box-shadow:none}.learning-html-cover svg{display:block;width:100%;height:100%}.snapshot-reader{padding:24px;background:#f2f2ef;border-radius:20px}.snapshot-reader>header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 auto 20px;max-width:800px}.snapshot-reader header p{font-size:12px;color:#888}.snapshot-reader header b{font-size:15px}.snapshot-reader header button{font-size:12px}.snapshot-stage{max-width:720px;margin:auto;aspect-ratio:3/4;background:white}.snapshot-stage img{display:block;width:100%;height:auto}.snapshot-placeholder{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;color:#888}.snapshot-reader>nav{display:flex;align-items:center;justify-content:center;gap:20px;font-size:13px;margin:20px 0}.snapshot-reader nav button{border-radius:50%;padding:9px;background:white}.snapshot-reader nav a{display:flex;align-items:center;gap:7px;color:#555}.snapshot-reader button:disabled{opacity:.4;cursor:default}.snapshot-thumbs{display:flex;max-width:720px;gap:8px;margin:auto}.snapshot-thumbs>button{width:calc(100% / 8);aspect-ratio:3/4;background:#e5e5df;border:2px solid transparent;border-radius:8px;overflow:hidden}.snapshot-thumbs>button[aria-pressed=true]{border-color:#333}.snapshot-thumbs img{width:100%;height:100%;object-fit:cover}
+.learning-standalone{width:1080px;height:1440px;margin:0;background:var(--selection);overflow:hidden}.learning-standalone .learning-boards{width:1080px;max-width:none;margin:0;container-type:inline-size}.learning-standalone .learning-cover,.learning-standalone .learning-sheet{box-shadow:none}.learning-html-cover svg{display:block;width:100%;height:100%}.snapshot-reader{padding:24px;background:var(--surface);border-radius:20px}.snapshot-reader>header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 auto 20px;max-width:800px}.snapshot-reader header p{font-size:12px;color:var(--muted-foreground)}.snapshot-reader header b{font-size:15px}.snapshot-reader header button{font-size:12px}.snapshot-stage{max-width:720px;margin:auto;aspect-ratio:3/4;background:var(--surface)}.snapshot-stage img{display:block;width:100%;height:auto}.snapshot-placeholder{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;color:var(--muted-foreground)}.snapshot-reader>nav{display:flex;align-items:center;justify-content:center;gap:20px;font-size:13px;margin:20px 0}.snapshot-reader nav button{border-radius:50%;padding:9px;background:var(--surface)}.snapshot-reader nav a{display:flex;align-items:center;gap:7px;color:var(--foreground)}.snapshot-reader button:disabled{opacity:.4;cursor:default}.snapshot-thumbs{display:flex;max-width:720px;gap:8px;margin:auto}.snapshot-thumbs>button{width:calc(100% / 8);aspect-ratio:3/4;background:var(--surface-muted);border:2px solid transparent;border-radius:8px;overflow:hidden}.snapshot-thumbs>button[aria-pressed=true]{border-color:var(--border)}.snapshot-thumbs img{width:100%;height:100%;object-fit:cover}
diff --git a/apps/waterfall-wiki/src/styles/skill-docs.css b/apps/waterfall-wiki/src/styles/skill-docs.css
index 834a1f4..0c4a3a5 100644
--- a/apps/waterfall-wiki/src/styles/skill-docs.css
+++ b/apps/waterfall-wiki/src/styles/skill-docs.css
@@ -1,3 +1,3 @@
-.skills-masonry{columns:4 230px;column-gap:24px}.skill-pin{display:block;break-inside:avoid;margin:0 0 28px}.skill-pin-cover{background:#f1eee8!important;aspect-ratio:4/5;display:grid;place-items:center;max-height:440px}.skill-pin-cover img{width:100%;height:100%;object-fit:contain!important;padding:24px}.docs-top{display:flex;justify-content:space-between;font-size:13px;color:#777;gap:15px;margin-bottom:28px}.docs-top button{display:flex;align-items:center;gap:8px}.docs-layout{max-width:1200px;margin:auto;display:grid;gap:35px;grid-template-columns:minmax(0,800px);justify-content:center}.docs-layout.with-sources{grid-template-columns:minmax(0,1fr) 340px}.docs-body{min-width:0;padding:18px 12px 70px}.docs-eyebrow{font-size:11px;color:#9b968b;letter-spacing:1.5px}.docs-body h1{font-size:38px;font-weight:700;margin:18px 0 24px;letter-spacing:-1px}.docs-body h2{font-size:23px;margin:40px 0 20px;font-weight:650}.docs-body>p{font-size:15px;color:#555;line-height:2;margin:22px 0}.docs-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px}.docs-actions button{display:flex;align-items:center;gap:8px;background:#252525;color:white;padding:12px 16px;border-radius:24px}.docs-actions a{color:#888}.docs-body>.docs-hint{font-size:12px;color:#999}.docs-body pre,.docs-resource-preview pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f5f5f2;padding:22px;border-radius:15px;font-size:12px;line-height:1.9;color:#666}.docs-inline-links{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.docs-inline-links a{display:flex;align-items:center;gap:7px;border:1px solid #e4e4df;border-radius:20px;padding:9px 12px;font-size:12px;color:#64705b}.docs-sources{position:sticky;top:105px;align-self:start;max-height:calc(100vh - 125px);overflow:auto;border:1px solid #e6e6e1;border-radius:18px;background:white;box-shadow:0 8px 35px #00000008;padding:20px}.docs-sources>header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;border-bottom:1px solid #eee;padding-bottom:18px}.docs-sources header b{font-size:16px}.docs-sources header small{display:block;font-size:11px;color:#aaa;margin-top:7px}.docs-sources h3{font-size:12px;color:#999;margin:21px 0 10px}.docs-sources section>button{display:flex;text-align:left;align-items:flex-start;gap:9px;width:100%;padding:12px 8px;border-radius:10px}.docs-sources section>button.selected,.docs-sources section>button:hover{background:#f2f3ed}.docs-sources section>button>span{font-size:9px;border:1px solid #ddd;padding:3px 4px;border-radius:5px;color:#92987f;flex-shrink:0}.docs-sources section>button>div{font-size:12px;color:#555;min-width:0}.docs-sources section small{display:block;font-size:10px;overflow-wrap:anywhere;color:#aaa;margin-top:5px}.docs-resource-preview{border-top:1px solid #ddd;margin-top:20px}.docs-resource-preview img{width:100%;max-height:350px;object-fit:contain;background:repeating-conic-gradient(#eee 0 25%,white 0 50%) 0/16px 16px}.docs-resource-preview pre{font-size:10px;max-height:330px;overflow:auto;padding:12px}.docs-resource-preview p,.docs-resource-preview code{font-size:11px;line-height:1.8;overflow-wrap:anywhere}.docs-resource-actions{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:#60724e;margin:18px 0}.docs-body a:focus-visible,.docs-sources button:focus-visible{outline:2px solid #81956d;outline-offset:3px}
-@media(max-width:1050px){.docs-layout.with-sources{grid-template-columns:minmax(0,1fr) 285px;gap:18px}}@media(max-width:760px){.docs-layout.with-sources{display:block}.docs-sources{position:fixed;right:12px;left:12px;top:95px;bottom:18px;max-height:none;z-index:45;box-shadow:0 0 0 100vmax #0005}.docs-body h1{font-size:30px}.docs-body{padding:10px 0 40px}.docs-body>p{font-size:14px}.skills-masonry{columns:2;column-gap:15px}.skill-pin-cover img{padding:12px}.snapshot-reader{padding:14px 8px}.snapshot-reader>header{align-items:flex-start;flex-direction:column}.snapshot-reader nav{gap:10px}.snapshot-reader nav a{font-size:11px}}
-.guidance-directory{border-top:1px solid #e4e4df;margin-top:24px}.guidance-directory>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid #e4e4df}.guidance-directory>div>a:first-child{font-size:15px;color:#3e4938}.guidance-directory small,.guidance-directory>div>a:last-child{font-size:12px;color:#888}@media(max-width:760px){.guidance-directory>div{grid-template-columns:minmax(0,1fr) auto;gap:8px}.guidance-directory small{grid-column:1;grid-row:2}.guidance-directory>div>a:last-child{grid-column:2;grid-row:1/3}}
+.skills-masonry{columns:4 230px;column-gap:24px}.skill-pin{display:block;break-inside:avoid;margin:0 0 28px}.skill-pin-cover{background:var(--selection)!important;aspect-ratio:4/5;display:grid;place-items:center;max-height:440px}.skill-pin-cover img{width:100%;height:100%;object-fit:contain!important;padding:24px}.docs-top{display:flex;justify-content:space-between;font-size:13px;color:var(--muted-foreground);gap:15px;margin-bottom:28px}.docs-top button{display:flex;align-items:center;gap:8px}.docs-layout{max-width:1200px;margin:auto;display:grid;gap:35px;grid-template-columns:minmax(0,800px);justify-content:center}.docs-layout.with-sources{grid-template-columns:minmax(0,1fr) 340px}.docs-body{min-width:0;padding:18px 12px 70px}.docs-eyebrow{font-size:11px;color:var(--muted-foreground);letter-spacing:1.5px}.docs-body h1{font-size:38px;font-weight:700;margin:18px 0 24px;letter-spacing:-1px}.docs-body h2{font-size:23px;margin:40px 0 20px;font-weight:650}.docs-body>p{font-size:15px;color:var(--foreground);line-height:2;margin:22px 0}.docs-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px}.docs-actions button{display:flex;align-items:center;gap:8px;background:var(--surface);color:var(--foreground);padding:12px 16px;border-radius:24px}.docs-actions a{color:var(--muted-foreground)}.docs-body>.docs-hint{font-size:12px;color:var(--muted-foreground)}.docs-body pre,.docs-resource-preview pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface);padding:22px;border-radius:15px;font-size:12px;line-height:1.9;color:var(--foreground)}.docs-inline-links{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.docs-inline-links a{display:flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:20px;padding:9px 12px;font-size:12px;color:var(--foreground)}.docs-sources{position:sticky;top:105px;align-self:start;max-height:calc(100vh - 125px);overflow:auto;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 8px 35px var(--shadow);padding:20px}.docs-sources>header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;border-bottom:1px solid var(--border);padding-bottom:18px}.docs-sources header b{font-size:16px}.docs-sources header small{display:block;font-size:11px;color:var(--muted-foreground);margin-top:7px}.docs-sources h3{font-size:12px;color:var(--muted-foreground);margin:21px 0 10px}.docs-sources section>button{display:flex;text-align:left;align-items:flex-start;gap:9px;width:100%;padding:12px 8px;border-radius:10px}.docs-sources section>button.selected,.docs-sources section>button:hover{background:var(--selection)}.docs-sources section>button>span{font-size:9px;border:1px solid var(--border);padding:3px 4px;border-radius:5px;color:var(--muted-foreground);flex-shrink:0}.docs-sources section>button>div{font-size:12px;color:var(--foreground);min-width:0}.docs-sources section small{display:block;font-size:10px;overflow-wrap:anywhere;color:var(--muted-foreground);margin-top:5px}.docs-resource-preview{border-top:1px solid var(--border);margin-top:20px}.docs-resource-preview img{width:100%;max-height:350px;object-fit:contain;background:repeating-conic-gradient(var(--surface) 0 25%,var(--surface) 0 50%) 0/16px 16px}.docs-resource-preview pre{font-size:10px;max-height:330px;overflow:auto;padding:12px}.docs-resource-preview p,.docs-resource-preview code{font-size:11px;line-height:1.8;overflow-wrap:anywhere}.docs-resource-actions{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--foreground);margin:18px 0}.docs-body a:focus-visible,.docs-sources button:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
+@media(max-width:1050px){.docs-layout.with-sources{grid-template-columns:minmax(0,1fr) 285px;gap:18px}}@media(max-width:760px){.docs-layout.with-sources{display:block}.docs-sources{position:fixed;right:12px;left:12px;top:95px;bottom:18px;max-height:none;z-index:45;box-shadow:0 0 0 100vmax var(--shadow)}.docs-body h1{font-size:30px}.docs-body{padding:10px 0 40px}.docs-body>p{font-size:14px}.skills-masonry{columns:2;column-gap:15px}.skill-pin-cover img{padding:12px}.snapshot-reader{padding:14px 8px}.snapshot-reader>header{align-items:flex-start;flex-direction:column}.snapshot-reader nav{gap:10px}.snapshot-reader nav a{font-size:11px}}
+.guidance-directory{border-top:1px solid var(--border);margin-top:24px}.guidance-directory>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--border)}.guidance-directory>div>a:first-child{font-size:15px;color:var(--foreground)}.guidance-directory small,.guidance-directory>div>a:last-child{font-size:12px;color:var(--muted-foreground)}@media(max-width:760px){.guidance-directory>div{grid-template-columns:minmax(0,1fr) auto;gap:8px}.guidance-directory small{grid-column:1;grid-row:2}.guidance-directory>div>a:last-child{grid-column:2;grid-row:1/3}}
diff --git a/apps/waterfall-wiki/src/styles/workspace.module.css b/apps/waterfall-wiki/src/styles/workspace.module.css
index 390eb6a..f3aa71e 100644
--- a/apps/waterfall-wiki/src/styles/workspace.module.css
+++ b/apps/waterfall-wiki/src/styles/workspace.module.css
@@ -1 +1 @@
-.app{display:flex;min-height:100dvh;background:#fafaf8;color:#30352c;font-family:Arial,'PingFang SC',sans-serif}.app *{box-sizing:border-box}.app a{color:inherit;text-decoration:none}.app>aside{width:230px;flex-shrink:0;border-right:1px solid #e0e3da;background:#f3f4ef;padding:30px 20px;display:flex;flex-direction:column;gap:9px}.brand{font-size:22px;font-weight:600;margin-bottom:45px}.brand small{font-size:9px;letter-spacing:1px;color:#87917c}.app aside>span{font-size:10px;color:#99a08f;margin-bottom:10px;padding-left:10px}.app aside>a:not(.brand){display:flex;align-items:center;gap:12px;font-size:12px;padding:12px;border-radius:7px}.app aside>a[aria-current]{background:#e5eadb}.app aside>.account{margin-top:auto;overflow-wrap:anywhere}.app>section{padding:35px 55px;max-width:1250px;width:100%;margin:auto;min-height:100dvh}.app header{display:flex;justify-content:space-between;color:#8d9582;font-size:10px;letter-spacing:1px}.kicker{font-size:10px;letter-spacing:2px;color:#8a9876;margin-top:65px}.app h1{font-size:34px;font-weight:500;letter-spacing:-1px;margin:18px 0}.sub{font-size:13px;color:#929887}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}.grid>a{background:white;border:1px solid #dfe3d6;border-radius:12px;padding:26px;transition:transform .2s}.grid>a:hover{transform:translateY(-3px)}.grid small{font-size:9px;letter-spacing:1.5px;margin-left:12px;color:#909b82}.grid>a>svg{vertical-align:middle;width:20px;color:#7b8c65}.grid h2{font-size:23px;font-weight:500;margin:24px 0 12px}.grid p{font-size:12px;color:#929a87;line-height:1.8}.poster,.canvas{height:190px;margin:25px 0;background:#ecf0e3;position:relative;overflow:hidden;border-radius:5px}.poster{padding:25px;font-size:40px;line-height:1;font-weight:600;letter-spacing:-2px}.poster i{font-family:Georgia,serif;font-weight:400}.poster b{position:absolute;right:0;top:12px;font-size:155px;color:#a7b88b}.canvas{display:flex;align-items:center;justify-content:center;gap:12px;background:radial-gradient(#c5cfb8 1px,transparent 1px) 0 0/18px 18px,#f3f5ef;color:#91a276}.canvas span{background:white;border:1px solid #d5ddc9;padding:20px 13px;font-size:12px;border-radius:6px;color:#59684a}.grid strong{display:flex;justify-content:space-between;font-size:12px;font-weight:400}.agent{display:flex;align-items:center;gap:18px;border:1px solid #dde3d1;border-radius:10px;padding:23px;margin-top:28px}.agent>svg{color:#83956c}.agent h3{font-size:14px;margin:0 0 8px}.agent p{font-size:11px;color:#8a947d;margin:0;line-height:1.8}.agent a{margin-left:auto;font-size:12px;white-space:nowrap}.hint{font-size:10px;color:#a1a793;margin-top:25px}.app a:focus-visible{outline:2px solid #718358;outline-offset:4px}@media(max-width:850px){.app>aside{width:180px}.app>section{padding:30px 25px}.grid{gap:15px}.grid>a{padding:20px}.app h1{font-size:28px}.canvas{gap:5px}.canvas span{padding:15px 8px}}@media(max-width:600px){.app{display:block}.app>aside{width:100%;flex-direction:row;flex-wrap:wrap;padding:18px;gap:5px;border-right:0;border-bottom:1px solid #ddd}.brand{margin:0;width:100%}.app aside>span,.app aside>.account{display:none}.app aside>a:not(.brand){padding:8px;font-size:10px}.grid{grid-template-columns:1fr}.kicker{margin-top:35px}.agent{flex-wrap:wrap}.agent a{margin-left:0}}
+.app{display:flex;min-height:100dvh;background:var(--background);color:var(--foreground-strong);font-family:Arial,'PingFang SC',sans-serif}.app *{box-sizing:border-box}.app a{color:inherit;text-decoration:none}.app>aside{width:230px;flex-shrink:0;border-right:1px solid var(--border);background:var(--selection);padding:30px 20px;display:flex;flex-direction:column;gap:9px}.brand{font-size:22px;font-weight:600;margin-bottom:45px}.brand small{font-size:9px;letter-spacing:1px;color:var(--muted-foreground)}.app aside>span{font-size:10px;color:var(--muted-foreground);margin-bottom:10px;padding-left:10px}.app aside>a:not(.brand){display:flex;align-items:center;gap:12px;font-size:12px;padding:12px;border-radius:7px}.app aside>a[aria-current]{background:var(--selection)}.app aside>.account{margin-top:auto;overflow-wrap:anywhere}.app>section{padding:35px 55px;max-width:1250px;width:100%;margin:auto;min-height:100dvh}.app header{display:flex;justify-content:space-between;color:var(--muted-foreground);font-size:10px;letter-spacing:1px}.kicker{font-size:10px;letter-spacing:2px;color:var(--muted-foreground);margin-top:65px}.app h1{font-size:34px;font-weight:500;letter-spacing:-1px;margin:18px 0}.sub{font-size:13px;color:var(--muted-foreground)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}.grid>a{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:26px;transition:transform .2s}.grid>a:hover{transform:translateY(-3px)}.grid small{font-size:9px;letter-spacing:1.5px;margin-left:12px;color:var(--muted-foreground)}.grid>a>svg{vertical-align:middle;width:20px;color:var(--muted-foreground)}.grid h2{font-size:23px;font-weight:500;margin:24px 0 12px}.grid p{font-size:12px;color:var(--muted-foreground);line-height:1.8}.poster,.canvas{height:190px;margin:25px 0;background:#ecf0e3;position:relative;overflow:hidden;border-radius:5px}.poster{padding:25px;font-size:40px;line-height:1;font-weight:600;letter-spacing:-2px}.poster i{font-family:Georgia,serif;font-weight:400}.poster b{position:absolute;right:0;top:12px;font-size:155px;color:#a7b88b}.canvas{display:flex;align-items:center;justify-content:center;gap:12px;background:radial-gradient(var(--selection) 1px,transparent 1px) 0 0/18px 18px,var(--selection);color:var(--muted-foreground)}.canvas span{background:var(--surface);border:1px solid var(--selection-border);padding:20px 13px;font-size:12px;border-radius:6px;color:var(--foreground)}.grid strong{display:flex;justify-content:space-between;font-size:12px;font-weight:400}.agent{display:flex;align-items:center;gap:18px;border:1px solid var(--selection-border);border-radius:10px;padding:23px;margin-top:28px}.agent>svg{color:var(--muted-foreground)}.agent h3{font-size:14px;margin:0 0 8px}.agent p{font-size:11px;color:var(--muted-foreground);margin:0;line-height:1.8}.agent a{margin-left:auto;font-size:12px;white-space:nowrap}.hint{font-size:10px;color:var(--muted-foreground);margin-top:25px}.app a:focus-visible{outline:2px solid var(--ring);outline-offset:4px}@media(max-width:850px){.app>aside{width:180px}.app>section{padding:30px 25px}.grid{gap:15px}.grid>a{padding:20px}.app h1{font-size:28px}.canvas{gap:5px}.canvas span{padding:15px 8px}}@media(max-width:600px){.app{display:block}.app>aside{width:100%;flex-direction:row;flex-wrap:wrap;padding:18px;gap:5px;border-right:0;border-bottom:1px solid var(--border)}.brand{margin:0;width:100%}.app aside>span,.app aside>.account{display:none}.app aside>a:not(.brand){padding:8px;font-size:10px}.grid{grid-template-columns:1fr}.kicker{margin-top:35px}.agent{flex-wrap:wrap}.agent a{margin-left:0}}
diff --git a/apps/waterfall-wiki/tests/brand-ui-integration.ts b/apps/waterfall-wiki/tests/brand-ui-integration.ts
new file mode 100644
index 0000000..f1de465
--- /dev/null
+++ b/apps/waterfall-wiki/tests/brand-ui-integration.ts
@@ -0,0 +1,53 @@
+/** CI-only checks against the disposable stack, never against personal documents. */
+import assert from 'node:assert/strict';
+import { chromium } from 'playwright-core';
+export async function verifyBrandUI(base: string) {
+  for (const prefix of process.env.VERIFY_CANVAS_UI === '1' ? ['', '/studio'] : ['']) {
+    const icon = await fetch(`${base}${prefix}/favicon.ico`);
+    assert.equal(icon.status, 200);
+    const bytes = new Uint8Array(await icon.arrayBuffer());
+    assert.deepEqual([...bytes.slice(0, 4)], [0, 0, 1, 0]);
+    assert.equal(bytes[4], 7, 'favicon includes seven resolutions');
+    for (const file of ['logo-light.svg', 'logo-dark.svg', 'icon-dark.svg']) {
+      const image = await fetch(`${base}${prefix}/brand/${file}`);
+      assert.equal(image.status, 200, prefix + '/' + file);
+      assert.match(await image.text(), /<svg/);
+    }
+  }
+  const browser = await chromium.launch({ executablePath: process.env.CHROMIUM_PATH || '/usr/bin/chromium', headless: true, args: ['--no-sandbox', '--disable-dev-shm-usage'] });
+  try {
+    const page = await browser.newPage({ viewport: { width: 1440, height: 960 } });
+    const visit = async (path: string, theme: string) => {
+      await page.goto(base + path, { waitUntil: 'commit' });
+      await page.locator('button[data-theme-ready="true"]').first().waitFor();
+      await page.waitForFunction(expected => document.documentElement.dataset.theme === expected, theme);
+    };
+    const background = (selector: string) => page.locator(selector).first().evaluate(el => getComputedStyle(el).backgroundColor);
+    await visit('/', 'home-light');
+    assert.equal(await background('body'), 'rgb(255, 246, 239)');
+    assert.ok((await page.title()).includes('啡跃'));
+    assert.ok((await page.locator('link[rel="icon"]').all()).length >= 2);
+    assert.equal(await page.locator('.endoleap-mark-light').first().isVisible(), true);
+    await page.getByRole('button', { name: '切换明暗主题', exact: true }).first().click();
+    await page.waitForFunction(() => document.documentElement.dataset.theme === 'home-dark');
+    assert.equal(await background('body'), 'rgb(28, 24, 22)');
+    assert.equal(await page.locator('.endoleap-mark-dark').first().isVisible(), true);
+    await visit('/account', 'home-dark');
+    if (process.env.VERIFY_CANVAS_UI === '1') {
+      await visit('/graphic', 'canvas-dark');
+      assert.equal(await background('body'), 'rgb(20, 20, 20)');
+      assert.equal(await page.locator('[class*="boardWrap"] > div').first().evaluate(el => getComputedStyle(el).backgroundColor), 'rgb(255, 255, 255)', 'artwork stays white in dark chrome');
+      await page.getByRole('button', { name: '切换明暗主题', exact: true }).first().click();
+      await page.waitForFunction(() => document.documentElement.dataset.theme === 'canvas-light');
+      await visit('/infinite_canvas', 'canvas-light');
+      assert.equal(await background('[class*="viewport"]'), 'rgb(250, 250, 250)');
+    } else {
+      await page.getByRole('button', { name: '切换明暗主题', exact: true }).first().click();
+    }
+    await visit('/', 'home-light');
+    await page.setViewportSize({ width: 390, height: 844 });
+    assert.equal(await page.locator('.endoleap-mark-light').first().isVisible(), true);
+    assert.ok(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth + 1), 'mobile home has no horizontal overflow');
+    console.log('Endoleap logos, both favicon paths, persisted home/canvas themes and artwork color isolation passed.');
+  } finally { await browser.close(); }
+}
diff --git a/apps/waterfall-wiki/tests/guidance-workspace-ui.ts b/apps/waterfall-wiki/tests/guidance-workspace-ui.ts
index 649d363..b76792b 100644
--- a/apps/waterfall-wiki/tests/guidance-workspace-ui.ts
+++ b/apps/waterfall-wiki/tests/guidance-workspace-ui.ts
@@ -115,7 +115,7 @@ export async function verifyGuidanceWorkspaceUI(base: string, browser: Browser)
     await page
       .getByRole("heading", { name: authored.title, exact: true })
       .waitFor();
-    assert.equal(await page.title(), "社区文档 · 织页");
+    assert.equal(await page.title(), "社区文档 · 啡跃");
     const search = page.getByRole("textbox", { name: "搜索文档" });
     await search.fill("不存在的文档");
     await search.press("Enter");
diff --git a/apps/waterfall-wiki/tests/integration.test.ts b/apps/waterfall-wiki/tests/integration.test.ts
index ca8c41a..297bed1 100644
--- a/apps/waterfall-wiki/tests/integration.test.ts
+++ b/apps/waterfall-wiki/tests/integration.test.ts
@@ -1,3 +1,4 @@
+import {verifyBrandUI} from './brand-ui-integration';
 import {verifyCanvasWorkspace} from './canvas-integration';
 import {verifyCanvasAgentUI} from './canvas-ui-integration';
 import assert from 'node:assert/strict';
@@ -33,6 +34,7 @@ test('real PostgreSQL + S3 notes, flat tags, resource sharing and video processi
  try{
   let ready=false;for(let i=0;i<60;i++){try{if((await fetch(base+'/api/health')).ok){ready=true;break;}}catch{}await setTimeout(250);}assert.ok(ready);
   for(const route of ['/','/images','/videos','/audio','/articles','/motion','/library/import','/tools/doodle','/tools/skills','/tools/skills/street-people','/tools/skills/shadow-puppet'])assert.equal((await fetch(base+route)).status,200,route);
+  await verifyBrandUI(base);
   await verifyEmailAccounts();
   await verifyCanvasWorkspace(base);
   if(process.env.VERIFY_CANVAS_UI==='1')await verifyCanvasAgentUI(base);
diff --git a/packages/brand/docs/integration.md b/packages/brand/docs/integration.md
index a0349bf..0709b27 100644
--- a/packages/brand/docs/integration.md
+++ b/packages/brand/docs/integration.md
@@ -4,7 +4,7 @@
 
 在消费应用的 `package.json` 声明 `"@endoleap/brand": "workspace:*"`，按仓库独立锁文件策略更新该应用锁文件。包为私有内部资源，无需 npm 发布、React peer dependency 或运行时主题库。
 
-当前 Studio / Wiki Dockerfile 把单个应用复制为孤立项目；增加 workspace 依赖时，必须一并调整 Docker 构建上下文和工作目录，复制根 workspace 配置、消费应用与 `packages/brand`，使 `workspace:*` 的相对位置保持有效。不要只加依赖后仍保留孤立安装流程。本 PR 不迁移这两套应用构建。
+Studio / Wiki 已声明 `workspace:*` 依赖。Docker 构建在 `/repo/apps/<app>` 保留与 `/repo/packages/brand` 的相对位置；运行镜像仍在 `/app` 执行 standalone 服务。保持消费应用与品牌包的相对位置，不恢复原有孤立安装流程。
 
 ## Tailwind CSS v4
 
@@ -48,7 +48,7 @@ CSS 与 JS 主题名称一致。ESM 使用 JSON import attributes；包提供类
 
 ## 静态图片
 
-SVG 可通过包文件路径由构建器处理。favicon、Apple Touch 与 PWA 图片需要在应用资源准备阶段复制到应用的 public 根目录，再由页面元信息引用。例如 favicon 源是 `@endoleap/brand/assets/icons/favicon.ico`。必须显式指定文件映射，不复制整个资产包到 public，也不提交人为维护的第二套图形源。
+SVG 可通过包文件路径由构建器处理。每个应用的 `brand:prepare` 在已授权的远程构建中调用 `scripts/prepare-app.mjs`，按明确映射复制三个 SVG、favicon 和 Apple Touch 图片到 public。生成副本被 gitignore 排除，唯一资产源仍在本包。PWA manifest 由应用另行配置。例如 favicon 源是 `@endoleap/brand/assets/icons/favicon.ico`。必须显式指定文件映射，不复制整个资产包到 public，也不提交人为维护的第二套图形源。
 
 应用有 basePath 时，按应用现有部署方式确认浏览器 URL；不要把内部包路径当作公开 URL。平台 manifest、主题切换和实际网页接入不由品牌包自动注入。
 
@@ -57,3 +57,7 @@ SVG 可通过包文件路径由构建器处理。favicon、Apple Touch 与 PWA 
 适配本仓库 Tailwind v4.3 与 CSS 变量式 shadcn/ui。Tailwind v3 需要另写 config 映射，本包不宣称已测试 v3。
 
 官方依据：[Tailwind theme variables](https://tailwindcss.com/docs/theme)、[shadcn/ui theming](https://ui.shadcn.com/docs/theming)。
+
+## 已接入的产品主题
+
+两个应用使用同源 `endoleap.theme` 偏好（light / dark），默认浅色。首屏脚本在绘制前恢复偏好；普通页面选择 home，图形编辑与无限画布选择 canvas。主题开关仅修改 UI 根节点与此偏好，不改任何草稿、模板或用户作品。浏览器 favicon 在普通路径与 `/studio` basePath 分别提供；固定版本查询参数用于替换旧缓存。
diff --git a/packages/brand/docs/overview.md b/packages/brand/docs/overview.md
index 4b927a8..5ff9dc9 100644
--- a/packages/brand/docs/overview.md
+++ b/packages/brand/docs/overview.md
@@ -17,6 +17,6 @@
 
 深色主题已正式确认纳入本包，直接位于 `tokens/`。应用是否启用深色、如何存储偏好由应用决定；导入 CSS 不自动修改页面背景、用户作品或系统偏好。
 
-本 PR 的交付范围是共享包、文档和远程验证。现有 Studio / Wiki 页面还没有接入新包，不声称网站已经更名、换色或替换 favicon。应用接入时，按 [集成说明](integration.md) 更新其依赖及 Docker 复制规则，并另做服务器视觉验收。
+Studio / Wiki 的产品 UI 通过 workspace 依赖消费本包，使用四套语义主题、固定 Logo 与 favicon。具体构建、主题偏好与 basePath 规则见 [集成说明](integration.md)。源码接入不等于线上部署；服务器视觉验收在用户手动合并、CI/CD 部署后完成。
 
 探索截图、图片模型提示词和 ZIP 交付包不属于运行资源。正式资产通过 Git 历史保留版本，不在包内堆积旧版目录。
diff --git a/packages/brand/scripts/prepare-app.mjs b/packages/brand/scripts/prepare-app.mjs
new file mode 100644
index 0000000..6e5aa32
--- /dev/null
+++ b/packages/brand/scripts/prepare-app.mjs
@@ -0,0 +1,11 @@
+// Run in the confirmed remote CI build (or an explicitly authorized dev environment).
+import { copyFile, mkdir, readFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+const app = JSON.parse(await readFile('package.json', 'utf8'));
+if (!['@prompt/studio', '@prompt/waterfall-wiki'].includes(app.name)) throw Error('Run from a consuming application directory');
+const source = new URL('../assets/', import.meta.url);
+await mkdir(resolve('public/brand'), {recursive:true});
+for (const name of ['logo-light.svg','logo-dark.svg','icon-dark.svg']) await copyFile(new URL(`svg/${name}`, source), resolve(`public/brand/${name}`));
+await copyFile(new URL('icons/favicon.ico', source), resolve('public/favicon.ico'));
+await copyFile(new URL('icons/apple-touch-icon.png', source), resolve('public/apple-touch-icon.png'));
+console.log('Prepared fixed Endoleap marks and multi-resolution favicon.');