docs(design): 解压 Maestro Design System 到 design/（重构参照材料）

phosphor console v1.1 设计系统（从现网 web/style.css 演化）：tokens(colors/effects/
typography/fonts) + components(core/forms/surfaces .jsx) + ui_kits(console + console_mobile)
+ assets/icons(15 双色 SVG) + guidelines + CLAUDE/SKILL/readme。供 B1–B6 重构任务对照实现。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

design/components/surfaces/Timeline.jsx

@@ -0,0 +1,28 @@
+const css = `
+.m-tl{display:grid;font-family:var(--mono)}
+.m-tl-item{display:flex;gap:12px;align-items:baseline;padding:5px 0 5px 14px;font-size:12px;border-left:2px solid var(--line);position:relative;color:var(--ink)}
+.m-tl-item::before{content:'';position:absolute;left:-4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--m-tl-c,var(--muted))}
+.m-tl-time{flex:none;color:var(--faint);font-size:11px;min-width:130px}
+.m-tl-text{color:var(--ink)}
+.m-tl-who{color:var(--muted);font-size:11px}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-tl-css')) return;
+  const s = document.createElement('style'); s.id = 'm-tl-css'; s.textContent = css;
+  document.head.appendChild(s);
+}
+
+export function Timeline({ items = [], style }) {
+  ensureCss();
+  return (
+    <div className="m-tl" style={style}>
+      {items.map((it, i) => (
+        <div key={i} className="m-tl-item" style={it.color ? { '--m-tl-c': it.color } : null}>
+          <span className="m-tl-time">{it.time}</span>
+          <span className="m-tl-text">{it.text}</span>
+          {it.who ? <span className="m-tl-who">{it.who}</span> : null}
+        </div>
+      ))}
+    </div>
+  );
+}