refactor: reorganize CSS and Tool Workshop page

- Extract styles.css into styles/ directory (tokens, global, utilities, syntax-highlight, pages)
- Extract ToolWorkshopPage into components:
  - ToolTypeListSidebar, ToolTypeEditorPanel, ToolWorkshopMobileView
  - use-tool-workshop hook for state management
- Slim ToolWorkshopPage from 1,269 to 110 lines

Quality gates: tsc --noEmit passes, npm run build passes

apps/web/src/styles/tokens.css

@@ -0,0 +1,92 @@
+:root {
+	color-scheme: light;
+	font-family: "Inter", "IBM Plex Sans", "Segoe UI", sans-serif;
+	--bg: #f4f1ea;
+	--panel: #fffef9;
+	--ink: #1d1d1b;
+	--muted: #5f5b55;
+	--brand: #275d4b;
+	--brand-strong: #154236;
+	--border: #d8d0c5;
+	--primary: #275d4b;
+	--primary-fg: #fffef9;
+	--color-primary: #275d4b;
+	--success: #2f8f62;
+	--success-light: rgba(47, 143, 98, 0.14);
+	--warning: #c08a1e;
+	--warning-light: rgba(192, 138, 30, 0.14);
+	--danger: #b94a3c;
+	--danger-light: rgba(185, 74, 60, 0.14);
+	--info: #4f7fb8;
+	--info-light: rgba(79, 127, 184, 0.14);
+
+	/* Spacing Scale (4px base) */
+	--space-1: 0.25rem;
+	--space-2: 0.5rem;
+	--space-3: 0.75rem;
+	--space-4: 1rem;
+	--space-5: 1.5rem;
+	--space-6: 2rem;
+	--space-8: 3rem;
+	--space-10: 4rem;
+
+	/* Breakpoints */
+	--bp-sm: 480px;
+	--bp-md: 768px;
+	--bp-lg: 1024px;
+	--bp-xl: 1280px;
+
+	/* Fluid Typography */
+	--font-size-xs: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);
+	--font-size-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
+	--font-size-base: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
+	--font-size-lg: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
+	--font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
+	--font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
+}
+
+[data-theme="dark"] {
+	color-scheme: dark;
+	--bg: #171613;
+	--panel: #22201d;
+	--ink: #ece7df;
+	--muted: #a59d92;
+	--brand: #5fa889;
+	--brand-strong: #4d9175;
+	--border: #39342d;
+	--primary: #5fa889;
+	--primary-fg: #171613;
+	--color-primary: #5fa889;
+	--success: #22c55e;
+	--success-light: rgba(34, 197, 94, 0.15);
+	--warning: #f59e0b;
+	--warning-light: rgba(245, 158, 11, 0.15);
+	--danger: #ef4444;
+	--danger-light: rgba(239, 68, 68, 0.15);
+	--info: #3b82f6;
+	--info-light: rgba(59, 130, 246, 0.15);
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	background: var(--bg);
+	color: var(--ink);
+}
+
+html.terminal-page-open,
+body.terminal-page-open {
+	overflow: hidden;
+}
+
+[data-theme="dark"] body {
+	background: radial-gradient(circle at top right, #2a2520, var(--bg));
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}