devglide 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (252) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +338 -0
  3. package/bin/claude-md-template.js +94 -0
  4. package/bin/devglide.js +387 -0
  5. package/package.json +85 -0
  6. package/pnpm-workspace.yaml +3 -0
  7. package/src/apps/coder/.turbo/turbo-lint.log +5 -0
  8. package/src/apps/coder/package.json +16 -0
  9. package/src/apps/coder/public/favicon.svg +7 -0
  10. package/src/apps/coder/public/page.css +275 -0
  11. package/src/apps/coder/public/page.js +528 -0
  12. package/src/apps/coder/server.js +3 -0
  13. package/src/apps/documentation/public/page.css +597 -0
  14. package/src/apps/documentation/public/page.js +609 -0
  15. package/src/apps/kanban/.turbo/turbo-lint.log +97 -0
  16. package/src/apps/kanban/.turbo/turbo-typecheck.log +5 -0
  17. package/src/apps/kanban/package.json +32 -0
  18. package/src/apps/kanban/public/favicon.svg +7 -0
  19. package/src/apps/kanban/public/page.css +1010 -0
  20. package/src/apps/kanban/public/page.js +1730 -0
  21. package/src/apps/kanban/public/vendor/marked.min.js +6 -0
  22. package/src/apps/kanban/public/vendor/sortable.min.js +2 -0
  23. package/src/apps/kanban/src/db.ts +319 -0
  24. package/src/apps/kanban/src/index.ts +14 -0
  25. package/src/apps/kanban/src/mcp-helpers.test.ts +88 -0
  26. package/src/apps/kanban/src/mcp-helpers.ts +60 -0
  27. package/src/apps/kanban/src/mcp.ts +59 -0
  28. package/src/apps/kanban/src/routes/attachments.ts +161 -0
  29. package/src/apps/kanban/src/routes/features.ts +233 -0
  30. package/src/apps/kanban/src/routes/issues.ts +373 -0
  31. package/src/apps/kanban/src/tools/feature-tools.ts +164 -0
  32. package/src/apps/kanban/src/tools/item-tools.ts +307 -0
  33. package/src/apps/kanban/src/tools/versioned-entry-tools.ts +72 -0
  34. package/src/apps/kanban/tsconfig.check.json +9 -0
  35. package/src/apps/kanban/tsconfig.json +9 -0
  36. package/src/apps/keymap/.turbo/turbo-lint.log +5 -0
  37. package/src/apps/keymap/package.json +16 -0
  38. package/src/apps/keymap/public/page.css +275 -0
  39. package/src/apps/keymap/public/page.js +294 -0
  40. package/src/apps/keymap/server.js +25 -0
  41. package/src/apps/log/.turbo/turbo-build.log +5 -0
  42. package/src/apps/log/.turbo/turbo-lint.log +45 -0
  43. package/src/apps/log/.turbo/turbo-typecheck.log +5 -0
  44. package/src/apps/log/node_modules/.bin/tsc +21 -0
  45. package/src/apps/log/node_modules/.bin/tsserver +21 -0
  46. package/src/apps/log/node_modules/.bin/tsx +21 -0
  47. package/src/apps/log/package.json +36 -0
  48. package/src/apps/log/public/console-sniffer.js +221 -0
  49. package/src/apps/log/public/favicon.svg +7 -0
  50. package/src/apps/log/public/page.css +322 -0
  51. package/src/apps/log/public/page.js +463 -0
  52. package/src/apps/log/src/index.ts +9 -0
  53. package/src/apps/log/src/mcp.ts +122 -0
  54. package/src/apps/log/src/routes/log.ts +333 -0
  55. package/src/apps/log/src/routes/status.ts +25 -0
  56. package/src/apps/log/src/server-sniffer.ts +118 -0
  57. package/src/apps/log/src/services/file-patterns.ts +39 -0
  58. package/src/apps/log/src/services/file-tailer.ts +228 -0
  59. package/src/apps/log/src/services/line-parser.ts +94 -0
  60. package/src/apps/log/src/services/log-writer.ts +39 -0
  61. package/src/apps/log/tsconfig.json +8 -0
  62. package/src/apps/prompts/.turbo/turbo-build.log +5 -0
  63. package/src/apps/prompts/.turbo/turbo-lint.log +24 -0
  64. package/src/apps/prompts/.turbo/turbo-typecheck.log +5 -0
  65. package/src/apps/prompts/mcp.ts +175 -0
  66. package/src/apps/prompts/node_modules/.bin/tsc +21 -0
  67. package/src/apps/prompts/node_modules/.bin/tsserver +21 -0
  68. package/src/apps/prompts/node_modules/.bin/tsx +21 -0
  69. package/src/apps/prompts/package.json +25 -0
  70. package/src/apps/prompts/public/page.css +315 -0
  71. package/src/apps/prompts/public/page.js +541 -0
  72. package/src/apps/prompts/services/prompt-store.ts +212 -0
  73. package/src/apps/prompts/src/index.ts +9 -0
  74. package/src/apps/prompts/tsconfig.json +8 -0
  75. package/src/apps/prompts/types.ts +27 -0
  76. package/src/apps/shell/.turbo/turbo-build.log +5 -0
  77. package/src/apps/shell/.turbo/turbo-lint.log +34 -0
  78. package/src/apps/shell/.turbo/turbo-typecheck.log +5 -0
  79. package/src/apps/shell/package.json +35 -0
  80. package/src/apps/shell/public/favicon.svg +7 -0
  81. package/src/apps/shell/public/page.css +407 -0
  82. package/src/apps/shell/public/page.js +1577 -0
  83. package/src/apps/shell/src/index.ts +150 -0
  84. package/src/apps/shell/src/mcp.ts +398 -0
  85. package/src/apps/shell/src/shell-types.ts +41 -0
  86. package/src/apps/shell/tsconfig.json +8 -0
  87. package/src/apps/test/.turbo/turbo-build.log +5 -0
  88. package/src/apps/test/.turbo/turbo-lint.log +27 -0
  89. package/src/apps/test/.turbo/turbo-typecheck.log +5 -0
  90. package/src/apps/test/node_modules/.bin/tsc +21 -0
  91. package/src/apps/test/node_modules/.bin/tsserver +21 -0
  92. package/src/apps/test/node_modules/.bin/tsx +21 -0
  93. package/src/apps/test/node_modules/.bin/uuid +21 -0
  94. package/src/apps/test/package.json +35 -0
  95. package/src/apps/test/public/favicon.svg +7 -0
  96. package/src/apps/test/public/page.css +499 -0
  97. package/src/apps/test/public/page.js +417 -0
  98. package/src/apps/test/public/scenario-runner.js +450 -0
  99. package/src/apps/test/src/index.ts +9 -0
  100. package/src/apps/test/src/mcp.ts +192 -0
  101. package/src/apps/test/src/routes/trigger.ts +285 -0
  102. package/src/apps/test/src/services/scenario-broadcaster.ts +60 -0
  103. package/src/apps/test/src/services/scenario-manager.ts +361 -0
  104. package/src/apps/test/src/services/scenario-store.ts +145 -0
  105. package/src/apps/test/tsconfig.json +8 -0
  106. package/src/apps/vocabulary/.turbo/turbo-build.log +5 -0
  107. package/src/apps/vocabulary/.turbo/turbo-lint.log +25 -0
  108. package/src/apps/vocabulary/.turbo/turbo-typecheck.log +5 -0
  109. package/src/apps/vocabulary/mcp.ts +173 -0
  110. package/src/apps/vocabulary/node_modules/.bin/tsc +21 -0
  111. package/src/apps/vocabulary/node_modules/.bin/tsserver +21 -0
  112. package/src/apps/vocabulary/node_modules/.bin/tsx +21 -0
  113. package/src/apps/vocabulary/package.json +25 -0
  114. package/src/apps/vocabulary/public/page.css +247 -0
  115. package/src/apps/vocabulary/public/page.js +444 -0
  116. package/src/apps/vocabulary/services/vocabulary-store.ts +179 -0
  117. package/src/apps/vocabulary/src/index.ts +10 -0
  118. package/src/apps/vocabulary/tsconfig.json +8 -0
  119. package/src/apps/vocabulary/types.ts +22 -0
  120. package/src/apps/voice/.turbo/turbo-build.log +5 -0
  121. package/src/apps/voice/.turbo/turbo-lint.log +43 -0
  122. package/src/apps/voice/.turbo/turbo-typecheck.log +5 -0
  123. package/src/apps/voice/node_modules/.bin/openai +21 -0
  124. package/src/apps/voice/node_modules/.bin/tsc +21 -0
  125. package/src/apps/voice/node_modules/.bin/tsserver +21 -0
  126. package/src/apps/voice/node_modules/.bin/tsx +21 -0
  127. package/src/apps/voice/package.json +35 -0
  128. package/src/apps/voice/public/favicon.svg +7 -0
  129. package/src/apps/voice/public/page.css +388 -0
  130. package/src/apps/voice/public/page.js +718 -0
  131. package/src/apps/voice/src/index.ts +10 -0
  132. package/src/apps/voice/src/mcp.ts +70 -0
  133. package/src/apps/voice/src/providers/index.ts +85 -0
  134. package/src/apps/voice/src/providers/openai-compatible.ts +94 -0
  135. package/src/apps/voice/src/providers/types.ts +27 -0
  136. package/src/apps/voice/src/routes/config.ts +118 -0
  137. package/src/apps/voice/src/routes/transcribe.ts +90 -0
  138. package/src/apps/voice/src/services/config-store.ts +129 -0
  139. package/src/apps/voice/src/services/stats.ts +108 -0
  140. package/src/apps/voice/src/transcribe.ts +11 -0
  141. package/src/apps/voice/src/utils/mime.ts +16 -0
  142. package/src/apps/voice/tsconfig.json +8 -0
  143. package/src/apps/workflow/.turbo/turbo-build.log +5 -0
  144. package/src/apps/workflow/.turbo/turbo-lint.log +96 -0
  145. package/src/apps/workflow/.turbo/turbo-typecheck.log +5 -0
  146. package/src/apps/workflow/engine/executors/decision-executor.ts +87 -0
  147. package/src/apps/workflow/engine/executors/file-executor.ts +90 -0
  148. package/src/apps/workflow/engine/executors/git-executor.ts +137 -0
  149. package/src/apps/workflow/engine/executors/http-executor.ts +65 -0
  150. package/src/apps/workflow/engine/executors/index.ts +28 -0
  151. package/src/apps/workflow/engine/executors/kanban-executor.ts +154 -0
  152. package/src/apps/workflow/engine/executors/llm-executor.ts +46 -0
  153. package/src/apps/workflow/engine/executors/log-executor.ts +62 -0
  154. package/src/apps/workflow/engine/executors/loop-executor.ts +14 -0
  155. package/src/apps/workflow/engine/executors/shell-executor.ts +107 -0
  156. package/src/apps/workflow/engine/executors/sub-workflow-executor.ts +61 -0
  157. package/src/apps/workflow/engine/executors/test-executor.ts +73 -0
  158. package/src/apps/workflow/engine/executors/trigger-executor.ts +39 -0
  159. package/src/apps/workflow/engine/expression-evaluator.ts +117 -0
  160. package/src/apps/workflow/engine/graph-runner.ts +438 -0
  161. package/src/apps/workflow/engine/node-executor.ts +104 -0
  162. package/src/apps/workflow/engine/node-registry.ts +15 -0
  163. package/src/apps/workflow/engine/variable-resolver.ts +109 -0
  164. package/src/apps/workflow/mcp.ts +223 -0
  165. package/src/apps/workflow/node_modules/.bin/tsc +21 -0
  166. package/src/apps/workflow/node_modules/.bin/tsserver +21 -0
  167. package/src/apps/workflow/node_modules/.bin/tsx +21 -0
  168. package/src/apps/workflow/package.json +25 -0
  169. package/src/apps/workflow/public/editor/canvas.js +366 -0
  170. package/src/apps/workflow/public/editor/drag-manager.js +326 -0
  171. package/src/apps/workflow/public/editor/edge-renderer.js +235 -0
  172. package/src/apps/workflow/public/editor/history-manager.js +147 -0
  173. package/src/apps/workflow/public/editor/layout-engine.js +159 -0
  174. package/src/apps/workflow/public/editor/node-renderer.js +199 -0
  175. package/src/apps/workflow/public/editor/selection-manager.js +193 -0
  176. package/src/apps/workflow/public/favicon.svg +7 -0
  177. package/src/apps/workflow/public/models/node-types.js +300 -0
  178. package/src/apps/workflow/public/models/workflow-model.js +257 -0
  179. package/src/apps/workflow/public/page.css +406 -0
  180. package/src/apps/workflow/public/page.js +658 -0
  181. package/src/apps/workflow/public/panels/inspector.js +360 -0
  182. package/src/apps/workflow/public/panels/palette.js +106 -0
  183. package/src/apps/workflow/public/panels/run-view.js +275 -0
  184. package/src/apps/workflow/public/panels/toolbar.js +232 -0
  185. package/src/apps/workflow/public/panels/workflow-list.js +237 -0
  186. package/src/apps/workflow/public/state/store.js +47 -0
  187. package/src/apps/workflow/services/custom-node-loader.ts +48 -0
  188. package/src/apps/workflow/services/legacy-converter.ts +72 -0
  189. package/src/apps/workflow/services/run-manager.ts +190 -0
  190. package/src/apps/workflow/services/workflow-store.ts +424 -0
  191. package/src/apps/workflow/services/workflow-validator.test.ts +103 -0
  192. package/src/apps/workflow/services/workflow-validator.ts +98 -0
  193. package/src/apps/workflow/src/index.ts +10 -0
  194. package/src/apps/workflow/templates/ci-pipeline.json +18 -0
  195. package/src/apps/workflow/templates/code-review.json +22 -0
  196. package/src/apps/workflow/templates/kanban-testing.json +24 -0
  197. package/src/apps/workflow/tsconfig.json +8 -0
  198. package/src/apps/workflow/types.ts +268 -0
  199. package/src/packages/auth-middleware.ts +14 -0
  200. package/src/packages/design-tokens/.turbo/turbo-build.log +10 -0
  201. package/src/packages/design-tokens/STYLEGUIDE.md +414 -0
  202. package/src/packages/design-tokens/build.js +413 -0
  203. package/src/packages/design-tokens/demo/index.html +1367 -0
  204. package/src/packages/design-tokens/demo/proposition-a.html +717 -0
  205. package/src/packages/design-tokens/demo/proposition-b.html +1239 -0
  206. package/src/packages/design-tokens/demo/proposition-c.html +1049 -0
  207. package/src/packages/design-tokens/dist/tailwind-preset.js +115 -0
  208. package/src/packages/design-tokens/dist/tokens.css +345 -0
  209. package/src/packages/design-tokens/dist/tokens.d.ts +229 -0
  210. package/src/packages/design-tokens/dist/tokens.js +386 -0
  211. package/src/packages/design-tokens/package.json +25 -0
  212. package/src/packages/design-tokens/tokens.json +228 -0
  213. package/src/packages/devtools-middleware.ts +22 -0
  214. package/src/packages/eslint-config/index.js +63 -0
  215. package/src/packages/eslint-config/node_modules/.bin/eslint +21 -0
  216. package/src/packages/eslint-config/package.json +18 -0
  217. package/src/packages/json-file-store.ts +232 -0
  218. package/src/packages/mcp-utils/.turbo/turbo-build.log +5 -0
  219. package/src/packages/mcp-utils/dist/index.d.ts +33 -0
  220. package/src/packages/mcp-utils/dist/index.d.ts.map +1 -0
  221. package/src/packages/mcp-utils/dist/index.js +126 -0
  222. package/src/packages/mcp-utils/dist/index.js.map +1 -0
  223. package/src/packages/mcp-utils/node_modules/.bin/tsc +21 -0
  224. package/src/packages/mcp-utils/node_modules/.bin/tsserver +21 -0
  225. package/src/packages/mcp-utils/package.json +32 -0
  226. package/src/packages/mcp-utils/src/index.ts +171 -0
  227. package/src/packages/mcp-utils/tsconfig.json +9 -0
  228. package/src/packages/paths.ts +18 -0
  229. package/src/packages/project-context/index.js +55 -0
  230. package/src/packages/project-context/package.json +13 -0
  231. package/src/packages/project-store.ts +127 -0
  232. package/src/packages/server-sniffer.ts +132 -0
  233. package/src/packages/shared-assets/favicon.svg +7 -0
  234. package/src/packages/shared-assets/keymap-registry.js +512 -0
  235. package/src/packages/shared-assets/logo.svg +6 -0
  236. package/src/packages/shared-assets/package.json +11 -0
  237. package/src/packages/shared-assets/ui-utils.js +48 -0
  238. package/src/packages/shared-assets/voice-widget.d.ts +37 -0
  239. package/src/packages/shared-assets/voice-widget.js +695 -0
  240. package/src/packages/shared-types/.turbo/turbo-build.log +5 -0
  241. package/src/packages/shared-types/dist/index.d.ts +39 -0
  242. package/src/packages/shared-types/dist/index.d.ts.map +1 -0
  243. package/src/packages/shared-types/node_modules/.bin/tsc +21 -0
  244. package/src/packages/shared-types/node_modules/.bin/tsserver +21 -0
  245. package/src/packages/shared-types/package.json +25 -0
  246. package/src/packages/shared-types/src/index.ts +41 -0
  247. package/src/packages/shared-types/tsconfig.json +11 -0
  248. package/src/packages/tsconfig/base.json +15 -0
  249. package/src/packages/tsconfig/next.json +14 -0
  250. package/src/packages/tsconfig/node.json +11 -0
  251. package/src/packages/tsconfig/package.json +10 -0
  252. package/turbo.json +25 -0
package/src/packages/design-tokens/demo/proposition-b.html ADDED
@@ -0,0 +1,1239 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>NERV ORANGE — Proposition B — Devglide Design System</title>
7
+ <style>
8
+ /* ══════════════════════════════════════════════════════════════════════
9
+ PROPOSITION B: NERV ORANGE
10
+ Faithful to the original NGE/NERV voice widget aesthetic.
11
+ All tokens hardcoded — no external dependencies.
12
+ ══════════════════════════════════════════════════════════════════════ */
13
+
14
+ /* ── Design Tokens ────────────────────────────────────────────────── */
15
+ :root {
16
+ /* Backgrounds */
17
+ --nerv-bg-base: #0e0800;
18
+ --nerv-bg-surface: #1a1000;
19
+ --nerv-bg-raised: #2a1a00;
20
+ --nerv-bg-overlay: #3a2400;
21
+
22
+ /* Accent */
23
+ --nerv-accent: #ff8c00;
24
+ --nerv-accent-bright: #ffaa33;
25
+ --nerv-accent-dim: #3d2200;
26
+ --nerv-accent-muted: #cc6600;
27
+
28
+ /* Text */
29
+ --nerv-text-primary: #e8d5b0;
30
+ --nerv-text-secondary: #a89070;
31
+ --nerv-text-muted: #6b5840;
32
+
33
+ /* Borders */
34
+ --nerv-border-subtle: #2a1a00;
35
+ --nerv-border-default: #3d2800;
36
+ --nerv-border-strong: #554000;
37
+ --nerv-border-accent: #ff8c00;
38
+
39
+ /* States */
40
+ --nerv-state-idle: #ff8c00;
41
+ --nerv-state-active: #ff6600;
42
+ --nerv-state-recording: #ff1500;
43
+ --nerv-state-processing: #e3b341;
44
+ --nerv-state-success: #4ade80;
45
+ --nerv-state-error: #ff0000;
46
+ --nerv-state-warning: #d29922;
47
+
48
+ /* Font */
49
+ --nerv-font-mono: 'Courier New', Courier, monospace;
50
+
51
+ /* Spacing */
52
+ --nerv-space-px: 1px;
53
+ --nerv-space-1: 4px;
54
+ --nerv-space-2: 8px;
55
+ --nerv-space-3: 12px;
56
+ --nerv-space-4: 16px;
57
+ --nerv-space-5: 20px;
58
+ --nerv-space-6: 24px;
59
+ --nerv-space-8: 32px;
60
+ --nerv-space-10: 40px;
61
+ --nerv-space-12: 48px;
62
+ --nerv-space-16: 64px;
63
+ --nerv-space-20: 80px;
64
+ --nerv-space-24: 96px;
65
+ }
66
+
67
+ /* ── Animations ───────────────────────────────────────────────────── */
68
+ @keyframes nerv-crt-sweep {
69
+ 0% { transform: translateY(-100%); }
70
+ 100% { transform: translateY(100vh); }
71
+ }
72
+ @keyframes nerv-glow-pulse {
73
+ 0%, 100% { filter: drop-shadow(0 0 6px rgba(255,140,0,0.3)); }
74
+ 50% { filter: drop-shadow(0 0 16px rgba(255,140,0,0.7)); }
75
+ }
76
+ @keyframes nerv-alert-pulse {
77
+ 0%, 100% { box-shadow: 0 0 8px rgba(255,21,0,0.3); }
78
+ 50% { box-shadow: 0 0 24px rgba(255,21,0,0.9), 0 0 48px rgba(255,0,0,0.4); }
79
+ }
80
+ @keyframes nerv-blink {
81
+ 0%, 100% { opacity: 1; }
82
+ 50% { opacity: 0; }
83
+ }
84
+ @keyframes nerv-hazard-scroll {
85
+ 0% { background-position: 0 0; }
86
+ 100% { background-position: 28.28px 0; }
87
+ }
88
+ @keyframes nerv-at-field-shimmer {
89
+ 0%, 100% { box-shadow: inset 0 0 20px rgba(255,140,0,0.1), 0 0 8px rgba(255,140,0,0.05); }
90
+ 25% { box-shadow: inset 0 0 30px rgba(255,140,0,0.2), 0 0 12px rgba(255,140,0,0.15); }
91
+ 50% { box-shadow: inset 0 0 40px rgba(255,140,0,0.25), 0 0 20px rgba(255,140,0,0.2); }
92
+ 75% { box-shadow: inset 0 0 30px rgba(255,140,0,0.15), 0 0 10px rgba(255,140,0,0.1); }
93
+ }
94
+ @keyframes nerv-larson {
95
+ 0% { left: 0; }
96
+ 50% { left: calc(100% - 60px); }
97
+ 100% { left: 0; }
98
+ }
99
+ @keyframes nerv-recording-pulse {
100
+ 0%, 100% { box-shadow: 0 0 4px rgba(255,21,0,0.4); transform: scale(1); }
101
+ 50% { box-shadow: 0 0 30px rgba(255,21,0,1), 0 0 60px rgba(255,0,0,0.5); transform: scale(1.05); }
102
+ }
103
+ @keyframes nerv-scanline-flicker {
104
+ 0% { opacity: 0.03; }
105
+ 50% { opacity: 0.06; }
106
+ 100% { opacity: 0.03; }
107
+ }
108
+
109
+ /* ── Reset ────────────────────────────────────────────────────────── */
110
+ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
111
+
112
+ /* ── Base ─────────────────────────────────────────────────────────── */
113
+ html { font-size: 13px; }
114
+ body {
115
+ background: var(--nerv-bg-base);
116
+ color: var(--nerv-text-primary);
117
+ font-family: var(--nerv-font-mono);
118
+ min-height: 100vh;
119
+ line-height: 1.5;
120
+ position: relative;
121
+ overflow-x: hidden;
122
+ }
123
+
124
+ /* ── Diagonal Grid Texture Overlay ────────────────────────────────── */
125
+ body::before {
126
+ content: '';
127
+ position: fixed;
128
+ inset: 0;
129
+ z-index: 0;
130
+ pointer-events: none;
131
+ background-image:
132
+ repeating-linear-gradient(
133
+ 45deg,
134
+ transparent,
135
+ transparent 20px,
136
+ rgba(255,140,0,0.025) 20px,
137
+ rgba(255,140,0,0.025) 21px
138
+ ),
139
+ repeating-linear-gradient(
140
+ -45deg,
141
+ transparent,
142
+ transparent 20px,
143
+ rgba(255,140,0,0.025) 20px,
144
+ rgba(255,140,0,0.025) 21px
145
+ );
146
+ animation: nerv-scanline-flicker 3s ease-in-out infinite;
147
+ }
148
+
149
+ /* ── CRT Scanline Sweep ───────────────────────────────────────────── */
150
+ body::after {
151
+ content: '';
152
+ position: fixed;
153
+ top: 0; left: 0;
154
+ width: 100%;
155
+ height: 120px;
156
+ background: linear-gradient(
157
+ to bottom,
158
+ transparent 0%,
159
+ rgba(255,140,0,0.04) 40%,
160
+ rgba(255,140,0,0.07) 50%,
161
+ rgba(255,140,0,0.04) 60%,
162
+ transparent 100%
163
+ );
164
+ z-index: 9999;
165
+ pointer-events: none;
166
+ animation: nerv-crt-sweep 5s linear infinite;
167
+ }
168
+
169
+ /* ── Layout ───────────────────────────────────────────────────────── */
170
+ .page {
171
+ position: relative;
172
+ z-index: 1;
173
+ max-width: 960px;
174
+ margin: 0 auto;
175
+ padding: 48px 24px;
176
+ }
177
+
178
+ /* ── Header ───────────────────────────────────────────────────────── */
179
+ .site-header {
180
+ border-bottom: 2px solid var(--nerv-border-accent);
181
+ padding: 32px 24px;
182
+ margin-bottom: 48px;
183
+ position: relative;
184
+ background: var(--nerv-bg-surface);
185
+ clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
186
+ }
187
+ /* Thick corner brackets on header */
188
+ .site-header::before,
189
+ .site-header::after {
190
+ content: '';
191
+ position: absolute;
192
+ width: 24px;
193
+ height: 24px;
194
+ border-color: var(--nerv-accent);
195
+ border-style: solid;
196
+ pointer-events: none;
197
+ z-index: 2;
198
+ }
199
+ .site-header::before { top: 6px; left: 6px; border-width: 3px 0 0 3px; }
200
+ .site-header::after { bottom: 6px; right: 6px; border-width: 0 3px 3px 0; }
201
+
202
+ .site-header h1 {
203
+ font-size: 18px;
204
+ font-weight: normal;
205
+ letter-spacing: 0.25em;
206
+ text-transform: uppercase;
207
+ color: var(--nerv-accent);
208
+ filter: drop-shadow(0 0 12px rgba(255,140,0,0.6));
209
+ }
210
+ .site-header .sub {
211
+ font-size: 10px;
212
+ letter-spacing: 0.2em;
213
+ color: var(--nerv-text-secondary);
214
+ text-transform: uppercase;
215
+ margin-top: 6px;
216
+ }
217
+ .site-header .classified {
218
+ position: absolute;
219
+ top: 10px;
220
+ right: 40px;
221
+ font-size: 9px;
222
+ letter-spacing: 0.3em;
223
+ text-transform: uppercase;
224
+ color: rgba(255,140,0,0.15);
225
+ transform: rotate(-5deg);
226
+ pointer-events: none;
227
+ }
228
+ .site-header .crt-overlay {
229
+ position: absolute;
230
+ inset: 0;
231
+ pointer-events: none;
232
+ background: repeating-linear-gradient(
233
+ to bottom,
234
+ transparent 0px,
235
+ transparent 2px,
236
+ rgba(255,140,0,0.02) 2px,
237
+ rgba(255,140,0,0.02) 4px
238
+ );
239
+ z-index: 1;
240
+ }
241
+
242
+ /* ── Nav ──────────────────────────────────────────────────────────── */
243
+ .nav {
244
+ display: flex;
245
+ flex-wrap: wrap;
246
+ gap: 4px;
247
+ margin-bottom: 48px;
248
+ border-bottom: 1px solid var(--nerv-border-subtle);
249
+ padding-bottom: 12px;
250
+ }
251
+ .nav a {
252
+ font-size: 10px;
253
+ letter-spacing: 0.15em;
254
+ text-transform: uppercase;
255
+ color: var(--nerv-text-secondary);
256
+ text-decoration: none;
257
+ padding: 4px 10px;
258
+ border: 1px solid transparent;
259
+ transition: all 150ms ease;
260
+ }
261
+ .nav a:hover {
262
+ color: var(--nerv-accent);
263
+ border-color: var(--nerv-border-default);
264
+ background: rgba(255,140,0,0.05);
265
+ }
266
+
267
+ /* ── Section ──────────────────────────────────────────────────────── */
268
+ .section { margin-bottom: 64px; }
269
+ .section-title {
270
+ font-size: 10px;
271
+ letter-spacing: 0.25em;
272
+ text-transform: uppercase;
273
+ color: var(--nerv-accent);
274
+ border-left: 3px solid var(--nerv-accent);
275
+ padding-left: 10px;
276
+ margin-bottom: 24px;
277
+ filter: drop-shadow(0 0 6px rgba(255,140,0,0.3));
278
+ }
279
+ .section-desc {
280
+ font-size: 11px;
281
+ color: var(--nerv-text-secondary);
282
+ letter-spacing: 0.05em;
283
+ margin-bottom: 20px;
284
+ margin-top: -12px;
285
+ }
286
+
287
+ /* ── Panel (angular clip-path card) ───────────────────────────────── */
288
+ .panel {
289
+ background: var(--nerv-bg-surface);
290
+ border: 1px solid var(--nerv-border-default);
291
+ clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
292
+ padding: 20px 24px;
293
+ position: relative;
294
+ }
295
+
296
+ /* Corner brackets — thicker, 3px */
297
+ .brackets { position: relative; }
298
+ .brackets::before, .brackets::after {
299
+ content: '';
300
+ position: absolute;
301
+ width: 16px;
302
+ height: 16px;
303
+ border-color: var(--nerv-accent);
304
+ border-style: solid;
305
+ pointer-events: none;
306
+ }
307
+ .brackets::before { top: 0; left: 0; border-width: 3px 0 0 3px; }
308
+ .brackets::after { bottom: 0; right: 0; border-width: 0 3px 3px 0; }
309
+
310
+ /* AT-Field frame effect */
311
+ .at-field {
312
+ box-shadow:
313
+ inset 0 0 1px rgba(255,140,0,0.4),
314
+ inset 0 0 20px rgba(255,140,0,0.05),
315
+ 0 0 8px rgba(255,140,0,0.1);
316
+ border: 1px solid var(--nerv-border-accent);
317
+ animation: nerv-at-field-shimmer 4s ease-in-out infinite;
318
+ }
319
+
320
+ /* ── Color Swatches ───────────────────────────────────────────────── */
321
+ .swatch-grid {
322
+ display: grid;
323
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
324
+ gap: 8px;
325
+ }
326
+ .swatch {
327
+ padding: 12px;
328
+ font-size: 10px;
329
+ letter-spacing: 0.1em;
330
+ text-transform: uppercase;
331
+ clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
332
+ }
333
+ .swatch-label { color: var(--nerv-text-primary); opacity: 0.85; margin-top: 8px; display: block; }
334
+ .swatch-hex { color: var(--nerv-text-primary); opacity: 0.5; font-size: 9px; }
335
+
336
+ .group-label {
337
+ font-size: 9px;
338
+ letter-spacing: 0.25em;
339
+ text-transform: uppercase;
340
+ color: var(--nerv-text-muted);
341
+ margin-bottom: 8px;
342
+ margin-top: 16px;
343
+ }
344
+ .group-label:first-child { margin-top: 0; }
345
+
346
+ /* ── Typography ───────────────────────────────────────────────────── */
347
+ .type-sample {
348
+ border-bottom: 1px solid var(--nerv-border-subtle);
349
+ padding: 12px 0;
350
+ display: flex;
351
+ align-items: baseline;
352
+ justify-content: space-between;
353
+ gap: 16px;
354
+ flex-wrap: wrap;
355
+ }
356
+ .type-meta {
357
+ font-size: 10px;
358
+ color: var(--nerv-text-muted);
359
+ letter-spacing: 0.15em;
360
+ text-transform: uppercase;
361
+ flex-shrink: 0;
362
+ width: 120px;
363
+ }
364
+ .type-specimen {
365
+ flex: 1;
366
+ min-width: 200px;
367
+ text-transform: uppercase;
368
+ }
369
+
370
+ /* ── Spacing Scale ────────────────────────────────────────────────── */
371
+ .space-row {
372
+ display: flex;
373
+ align-items: center;
374
+ gap: 12px;
375
+ margin-bottom: 8px;
376
+ }
377
+ .space-bar {
378
+ background: linear-gradient(90deg, var(--nerv-accent), var(--nerv-accent-muted));
379
+ height: 8px;
380
+ flex-shrink: 0;
381
+ clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 50%, calc(100% - 4px) 100%, 0 100%);
382
+ }
383
+ .space-meta {
384
+ font-size: 10px;
385
+ color: var(--nerv-text-secondary);
386
+ letter-spacing: 0.15em;
387
+ text-transform: uppercase;
388
+ }
389
+
390
+ /* ── Buttons ──────────────────────────────────────────────────────── */
391
+ .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
392
+ .btn {
393
+ font-family: var(--nerv-font-mono);
394
+ font-size: 11px;
395
+ letter-spacing: 0.2em;
396
+ text-transform: uppercase;
397
+ padding: 8px 20px;
398
+ cursor: pointer;
399
+ border: 1px solid;
400
+ transition: all 250ms ease;
401
+ outline: none;
402
+ clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
403
+ }
404
+ .btn-primary {
405
+ background: var(--nerv-accent);
406
+ border-color: var(--nerv-accent);
407
+ color: var(--nerv-bg-base);
408
+ font-weight: bold;
409
+ }
410
+ .btn-primary:hover {
411
+ background: var(--nerv-accent-bright);
412
+ box-shadow: 0 0 16px rgba(255,140,0,0.5);
413
+ filter: drop-shadow(0 0 8px rgba(255,140,0,0.6));
414
+ }
415
+ .btn-outline {
416
+ background: transparent;
417
+ border-color: var(--nerv-accent);
418
+ color: var(--nerv-accent);
419
+ }
420
+ .btn-outline:hover {
421
+ background: rgba(255,140,0,0.1);
422
+ box-shadow: 0 0 12px rgba(255,140,0,0.3);
423
+ }
424
+ .btn-ghost {
425
+ background: transparent;
426
+ border-color: transparent;
427
+ color: var(--nerv-text-secondary);
428
+ clip-path: none;
429
+ }
430
+ .btn-ghost:hover {
431
+ color: var(--nerv-accent);
432
+ text-shadow: 0 0 8px rgba(255,140,0,0.4);
433
+ }
434
+ .btn-danger {
435
+ background: rgba(255,0,0,0.1);
436
+ border-color: var(--nerv-state-error);
437
+ color: var(--nerv-state-error);
438
+ }
439
+ .btn-danger:hover {
440
+ background: repeating-linear-gradient(
441
+ 45deg,
442
+ rgba(255,0,0,0.15),
443
+ rgba(255,0,0,0.15) 10px,
444
+ rgba(26,0,0,0.8) 10px,
445
+ rgba(26,0,0,0.8) 20px
446
+ );
447
+ box-shadow: 0 0 20px rgba(255,0,0,0.4);
448
+ }
449
+ .btn:disabled {
450
+ opacity: 0.25;
451
+ cursor: not-allowed;
452
+ filter: grayscale(0.5);
453
+ }
454
+
455
+ /* ── Inputs ───────────────────────────────────────────────────────── */
456
+ .input-group { display: flex; flex-direction: column; gap: 8px; max-width: 400px; }
457
+ .input-label {
458
+ font-size: 10px;
459
+ letter-spacing: 0.25em;
460
+ text-transform: uppercase;
461
+ color: var(--nerv-text-secondary);
462
+ }
463
+ .input {
464
+ background: var(--nerv-bg-surface);
465
+ border: 1px solid var(--nerv-border-default);
466
+ color: var(--nerv-text-primary);
467
+ font-family: var(--nerv-font-mono);
468
+ font-size: 12px;
469
+ letter-spacing: 0.05em;
470
+ padding: 10px 14px;
471
+ outline: none;
472
+ transition: border-color 250ms ease, box-shadow 250ms ease;
473
+ clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
474
+ }
475
+ .input:focus {
476
+ border-color: var(--nerv-accent);
477
+ box-shadow: 0 0 12px rgba(255,140,0,0.3), inset 0 0 8px rgba(255,140,0,0.05);
478
+ }
479
+ .input::placeholder { color: var(--nerv-text-muted); }
480
+ select.input {
481
+ -webkit-appearance: none;
482
+ -moz-appearance: none;
483
+ appearance: none;
484
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ff8c00' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
485
+ background-repeat: no-repeat;
486
+ background-position: right 12px center;
487
+ padding-right: 32px;
488
+ }
489
+ textarea.input {
490
+ resize: vertical;
491
+ min-height: 80px;
492
+ }
493
+
494
+ /* ── Cards ────────────────────────────────────────────────────────── */
495
+ .card-grid {
496
+ display: grid;
497
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
498
+ gap: 16px;
499
+ }
500
+ .card {
501
+ background: var(--nerv-bg-surface);
502
+ border: 1px solid var(--nerv-border-default);
503
+ clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
504
+ padding: 24px;
505
+ position: relative;
506
+ transition: all 300ms ease;
507
+ }
508
+ .card:hover {
509
+ border-color: var(--nerv-accent-muted);
510
+ box-shadow: 0 0 20px rgba(255,140,0,0.15);
511
+ }
512
+ .card-title {
513
+ font-size: 11px;
514
+ letter-spacing: 0.2em;
515
+ text-transform: uppercase;
516
+ color: var(--nerv-accent);
517
+ margin-bottom: 8px;
518
+ }
519
+ .card-body {
520
+ font-size: 12px;
521
+ color: var(--nerv-text-secondary);
522
+ letter-spacing: 0.03em;
523
+ line-height: 1.6;
524
+ }
525
+ .card-hazard {
526
+ border-color: var(--nerv-state-error);
527
+ background:
528
+ repeating-linear-gradient(
529
+ 45deg,
530
+ rgba(255,0,0,0.04),
531
+ rgba(255,0,0,0.04) 10px,
532
+ transparent 10px,
533
+ transparent 20px
534
+ ),
535
+ var(--nerv-bg-surface);
536
+ box-shadow: 0 0 20px rgba(255,0,0,0.2), inset 0 0 30px rgba(255,0,0,0.05);
537
+ }
538
+ .card-hazard .card-title { color: var(--nerv-state-error); }
539
+
540
+ /* ── Badges ───────────────────────────────────────────────────────── */
541
+ .badge-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
542
+ .badge {
543
+ font-size: 9px;
544
+ letter-spacing: 0.2em;
545
+ text-transform: uppercase;
546
+ padding: 3px 10px;
547
+ border: 1px solid;
548
+ clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
549
+ }
550
+ .badge-idle { color: var(--nerv-state-idle); border-color: var(--nerv-state-idle); background: rgba(255,140,0,0.08); }
551
+ .badge-active { color: var(--nerv-state-active); border-color: var(--nerv-state-active); background: rgba(255,102,0,0.08); }
552
+ .badge-recording { color: var(--nerv-state-recording); border-color: var(--nerv-state-recording); background: rgba(255,21,0,0.1); animation: nerv-recording-pulse 1s ease-in-out infinite; }
553
+ .badge-processing { color: var(--nerv-state-processing); border-color: var(--nerv-state-processing); background: rgba(227,179,65,0.08); }
554
+ .badge-success { color: var(--nerv-state-success); border-color: var(--nerv-state-success); background: rgba(74,222,128,0.08); }
555
+ .badge-error { color: var(--nerv-state-error); border-color: var(--nerv-state-error); background: rgba(255,0,0,0.1); }
556
+ .badge-warning { color: var(--nerv-state-warning); border-color: var(--nerv-state-warning); background: rgba(210,153,34,0.08); }
557
+
558
+ /* ── State Indicators ─────────────────────────────────────────────── */
559
+ .state-grid {
560
+ display: grid;
561
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
562
+ gap: 10px;
563
+ }
564
+ .state-card {
565
+ background: var(--nerv-bg-surface);
566
+ border: 1px solid var(--nerv-border-default);
567
+ padding: 14px 16px;
568
+ display: flex;
569
+ align-items: center;
570
+ gap: 12px;
571
+ clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
572
+ }
573
+ .state-dot {
574
+ width: 10px;
575
+ height: 10px;
576
+ border-radius: 50%;
577
+ flex-shrink: 0;
578
+ }
579
+ .state-name {
580
+ font-size: 10px;
581
+ letter-spacing: 0.2em;
582
+ text-transform: uppercase;
583
+ }
584
+ .state-hex {
585
+ font-size: 9px;
586
+ color: var(--nerv-text-muted);
587
+ letter-spacing: 0.1em;
588
+ }
589
+
590
+ /* ── Animations Section ───────────────────────────────────────────── */
591
+ .anim-grid {
592
+ display: grid;
593
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
594
+ gap: 16px;
595
+ }
596
+ .anim-card {
597
+ background: var(--nerv-bg-surface);
598
+ border: 1px solid var(--nerv-border-default);
599
+ padding: 28px 20px;
600
+ text-align: center;
601
+ font-size: 10px;
602
+ letter-spacing: 0.2em;
603
+ text-transform: uppercase;
604
+ color: var(--nerv-text-secondary);
605
+ position: relative;
606
+ overflow: hidden;
607
+ clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
608
+ }
609
+ .anim-crt::after {
610
+ content: '';
611
+ position: absolute;
612
+ inset: 0;
613
+ background: linear-gradient(to bottom, transparent 0%, rgba(255,140,0,0.05) 50%, transparent 100%);
614
+ background-size: 100% 50px;
615
+ animation: nerv-crt-sweep 4s linear infinite;
616
+ pointer-events: none;
617
+ }
618
+ .anim-glow { animation: nerv-glow-pulse 2s ease-in-out infinite; }
619
+ .anim-brackets-inner { position: relative; }
620
+ .anim-brackets-inner::before, .anim-brackets-inner::after {
621
+ content: '';
622
+ position: absolute;
623
+ width: 14px;
624
+ height: 14px;
625
+ border-color: var(--nerv-accent);
626
+ border-style: solid;
627
+ pointer-events: none;
628
+ }
629
+ .anim-brackets-inner::before { top: 6px; left: 6px; border-width: 3px 0 0 3px; }
630
+ .anim-brackets-inner::after { bottom: 6px; right: 6px; border-width: 0 3px 3px 0; }
631
+
632
+ .cursor-blink {
633
+ display: inline-block;
634
+ width: 9px;
635
+ height: 15px;
636
+ background: var(--nerv-accent);
637
+ vertical-align: text-bottom;
638
+ animation: nerv-blink 0.8s step-start infinite;
639
+ margin-left: 2px;
640
+ }
641
+
642
+ /* Larson Scanner Bar */
643
+ .larson-track {
644
+ position: relative;
645
+ height: 6px;
646
+ background: var(--nerv-bg-raised);
647
+ border: 1px solid var(--nerv-border-default);
648
+ overflow: hidden;
649
+ margin-top: 12px;
650
+ }
651
+ .larson-bar {
652
+ position: absolute;
653
+ top: 0;
654
+ left: 0;
655
+ width: 60px;
656
+ height: 100%;
657
+ background: linear-gradient(90deg, transparent, var(--nerv-accent), var(--nerv-accent-bright), var(--nerv-accent), transparent);
658
+ filter: drop-shadow(0 0 8px rgba(255,140,0,0.8));
659
+ animation: nerv-larson 2s ease-in-out infinite;
660
+ }
661
+
662
+ /* Hazard stripe bar */
663
+ .hazard-bar {
664
+ height: 12px;
665
+ background: repeating-linear-gradient(
666
+ 45deg,
667
+ #ff0000,
668
+ #ff0000 10px,
669
+ #1a0000 10px,
670
+ #1a0000 20px
671
+ );
672
+ background-size: 28.28px 28.28px;
673
+ animation: nerv-hazard-scroll 0.5s linear infinite;
674
+ margin-top: 12px;
675
+ }
676
+
677
+ /* ── Sample App Header ────────────────────────────────────────────── */
678
+ .app-header {
679
+ height: 38px;
680
+ background: var(--nerv-bg-surface);
681
+ border: 1px solid var(--nerv-border-default);
682
+ border-bottom: 2px solid var(--nerv-accent);
683
+ display: flex;
684
+ align-items: center;
685
+ padding: 0 16px;
686
+ gap: 12px;
687
+ clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
688
+ position: relative;
689
+ }
690
+ .app-header-title {
691
+ font-size: 11px;
692
+ letter-spacing: 0.2em;
693
+ text-transform: uppercase;
694
+ color: var(--nerv-accent);
695
+ filter: drop-shadow(0 0 4px rgba(255,140,0,0.4));
696
+ }
697
+ .app-header-sep {
698
+ color: var(--nerv-text-muted);
699
+ font-size: 11px;
700
+ }
701
+ .app-header-label {
702
+ font-size: 10px;
703
+ letter-spacing: 0.15em;
704
+ text-transform: uppercase;
705
+ color: var(--nerv-text-secondary);
706
+ }
707
+ .app-header-status {
708
+ margin-left: auto;
709
+ display: flex;
710
+ align-items: center;
711
+ gap: 8px;
712
+ }
713
+ .app-header-dot {
714
+ width: 6px;
715
+ height: 6px;
716
+ border-radius: 50%;
717
+ background: var(--nerv-state-idle);
718
+ box-shadow: 0 0 6px var(--nerv-state-idle);
719
+ }
720
+
721
+ /* ── Utility Classes ──────────────────────────────────────────────── */
722
+ .text-accent { color: var(--nerv-accent); }
723
+ .text-muted { color: var(--nerv-text-secondary); }
724
+ .text-dim { color: var(--nerv-text-muted); }
725
+ .text-success { color: var(--nerv-state-success); }
726
+ .text-error { color: var(--nerv-state-error); }
727
+
728
+ hr {
729
+ border: none;
730
+ border-top: 1px solid var(--nerv-border-subtle);
731
+ margin: 8px 0 24px;
732
+ }
733
+
734
+ /* ── Responsive ───────────────────────────────────────────────────── */
735
+ @media (max-width: 600px) {
736
+ .swatch-grid { grid-template-columns: repeat(2, 1fr); }
737
+ .card-grid { grid-template-columns: 1fr; }
738
+ .state-grid { grid-template-columns: 1fr; }
739
+ .anim-grid { grid-template-columns: 1fr; }
740
+ }
741
+ </style>
742
+ </head>
743
+ <body>
744
+ <div class="page">
745
+
746
+ <!-- ═══════════════════════════════════════════════════════════════════
747
+ 01. HEADER
748
+ ═══════════════════════════════════════════════════════════════════ -->
749
+ <header class="site-header">
750
+ <div class="crt-overlay"></div>
751
+ <div class="classified">CLASSIFIED // NERV // GEHIRN</div>
752
+ <div style="position:relative;z-index:2">
753
+ <h1>DEVGLIDE DESIGN SYSTEM &mdash; PROPOSITION B: NERV ORANGE</h1>
754
+ <div class="sub">MAGI SYSTEM v0.3.0 &middot; 82 TOKENS &middot; EVANGELION TERMINAL AESTHETIC &middot; PATTERN ORANGE</div>
755
+ </div>
756
+ </header>
757
+
758
+ <!-- Nav -->
759
+ <nav class="nav">
760
+ <a href="#colors">MAGI PALETTE</a>
761
+ <a href="#typography">TYPOGRAPHY</a>
762
+ <a href="#spacing">SPACING</a>
763
+ <a href="#buttons">CONTROLS</a>
764
+ <a href="#inputs">INTERFACE</a>
765
+ <a href="#cards">PANELS</a>
766
+ <a href="#badges">STATUS</a>
767
+ <a href="#states">INDICATORS</a>
768
+ <a href="#animations">SYNC</a>
769
+ <a href="#app-header">HEADER</a>
770
+ </nav>
771
+
772
+ <!-- ═══════════════════════════════════════════════════════════════════
773
+ 02. COLOR PALETTE
774
+ ═══════════════════════════════════════════════════════════════════ -->
775
+ <section class="section" id="colors">
776
+ <div class="section-title">01 / MAGI SYSTEM REPORT &mdash; COLOR PALETTE</div>
777
+ <p class="section-desc">ALL VISUAL WAVELENGTHS CATALOGUED. PATTERN ORANGE CONFIRMED. ENGAGE VISUAL SCAN.</p>
778
+
779
+ <div class="group-label">BACKGROUNDS &mdash; TERMINAL DOGMA</div>
780
+ <div class="swatch-grid">
781
+ <div class="swatch" style="background:#0e0800;border:1px solid #3d2800">
782
+ <span class="swatch-label">bg-base</span>
783
+ <span class="swatch-hex">#0e0800</span>
784
+ </div>
785
+ <div class="swatch" style="background:#1a1000;border:1px solid #3d2800">
786
+ <span class="swatch-label">bg-surface</span>
787
+ <span class="swatch-hex">#1a1000</span>
788
+ </div>
789
+ <div class="swatch" style="background:#2a1a00;border:1px solid #3d2800">
790
+ <span class="swatch-label">bg-raised</span>
791
+ <span class="swatch-hex">#2a1a00</span>
792
+ </div>
793
+ <div class="swatch" style="background:#3a2400;border:1px solid #554000">
794
+ <span class="swatch-label">bg-overlay</span>
795
+ <span class="swatch-hex">#3a2400</span>
796
+ </div>
797
+ </div>
798
+
799
+ <div class="group-label">ACCENT SCALE &mdash; ABSOLUTE TERROR FIELD</div>
800
+ <div class="swatch-grid">
801
+ <div class="swatch" style="background:#3d2200;border:1px solid #554000">
802
+ <span class="swatch-label">accent-dim</span>
803
+ <span class="swatch-hex">#3d2200</span>
804
+ </div>
805
+ <div class="swatch" style="background:#cc6600;border:1px solid #cc6600">
806
+ <span class="swatch-label" style="color:#0e0800">accent-muted</span>
807
+ <span class="swatch-hex" style="color:#0e0800">#cc6600</span>
808
+ </div>
809
+ <div class="swatch" style="background:#ff8c00;border:1px solid #ff8c00">
810
+ <span class="swatch-label" style="color:#0e0800">accent-default</span>
811
+ <span class="swatch-hex" style="color:#0e0800">#ff8c00</span>
812
+ </div>
813
+ <div class="swatch" style="background:#ffaa33;border:1px solid #ffaa33">
814
+ <span class="swatch-label" style="color:#0e0800">accent-bright</span>
815
+ <span class="swatch-hex" style="color:#0e0800">#ffaa33</span>
816
+ </div>
817
+ </div>
818
+
819
+ <div class="group-label">TEXT &mdash; SIGNAL CLARITY</div>
820
+ <div class="swatch-grid">
821
+ <div class="swatch" style="background:#2a1a00;border:1px solid #3d2800">
822
+ <span class="swatch-label" style="color:#e8d5b0">text-primary</span>
823
+ <span class="swatch-hex" style="color:#e8d5b0">#e8d5b0</span>
824
+ </div>
825
+ <div class="swatch" style="background:#2a1a00;border:1px solid #3d2800">
826
+ <span class="swatch-label" style="color:#a89070">text-secondary</span>
827
+ <span class="swatch-hex" style="color:#a89070">#a89070</span>
828
+ </div>
829
+ <div class="swatch" style="background:#2a1a00;border:1px solid #3d2800">
830
+ <span class="swatch-label" style="color:#6b5840">text-muted</span>
831
+ <span class="swatch-hex" style="color:#6b5840">#6b5840</span>
832
+ </div>
833
+ </div>
834
+
835
+ <div class="group-label">BORDERS &mdash; CONTAINMENT FIELD INTENSITY</div>
836
+ <div class="swatch-grid">
837
+ <div class="swatch" style="background:#0e0800;border:3px solid #2a1a00">
838
+ <span class="swatch-label">border-subtle</span>
839
+ <span class="swatch-hex">#2a1a00</span>
840
+ </div>
841
+ <div class="swatch" style="background:#0e0800;border:3px solid #3d2800">
842
+ <span class="swatch-label">border-default</span>
843
+ <span class="swatch-hex">#3d2800</span>
844
+ </div>
845
+ <div class="swatch" style="background:#0e0800;border:3px solid #554000">
846
+ <span class="swatch-label">border-strong</span>
847
+ <span class="swatch-hex">#554000</span>
848
+ </div>
849
+ <div class="swatch" style="background:#0e0800;border:3px solid #ff8c00">
850
+ <span class="swatch-label" style="color:#ff8c00">border-accent</span>
851
+ <span class="swatch-hex" style="color:#ff8c00">#ff8c00</span>
852
+ </div>
853
+ </div>
854
+
855
+ <div class="group-label">STATES &mdash; EVA SYNCHRONIZATION STATUS</div>
856
+ <div class="swatch-grid">
857
+ <div class="swatch" style="background:rgba(255,140,0,0.12);border:1px solid #ff8c00">
858
+ <span class="swatch-label" style="color:#ff8c00">idle</span>
859
+ <span class="swatch-hex" style="color:#ff8c00">#ff8c00</span>
860
+ </div>
861
+ <div class="swatch" style="background:rgba(255,102,0,0.12);border:1px solid #ff6600">
862
+ <span class="swatch-label" style="color:#ff6600">active</span>
863
+ <span class="swatch-hex" style="color:#ff6600">#ff6600</span>
864
+ </div>
865
+ <div class="swatch" style="background:rgba(255,21,0,0.12);border:1px solid #ff1500">
866
+ <span class="swatch-label" style="color:#ff1500">recording</span>
867
+ <span class="swatch-hex" style="color:#ff1500">#ff1500</span>
868
+ </div>
869
+ <div class="swatch" style="background:rgba(227,179,65,0.12);border:1px solid #e3b341">
870
+ <span class="swatch-label" style="color:#e3b341">processing</span>
871
+ <span class="swatch-hex" style="color:#e3b341">#e3b341</span>
872
+ </div>
873
+ <div class="swatch" style="background:rgba(74,222,128,0.12);border:1px solid #4ade80">
874
+ <span class="swatch-label" style="color:#4ade80">success</span>
875
+ <span class="swatch-hex" style="color:#4ade80">#4ade80</span>
876
+ </div>
877
+ <div class="swatch" style="background:rgba(255,0,0,0.12);border:1px solid #ff0000">
878
+ <span class="swatch-label" style="color:#ff0000">error</span>
879
+ <span class="swatch-hex" style="color:#ff0000">#ff0000</span>
880
+ </div>
881
+ <div class="swatch" style="background:rgba(210,153,34,0.12);border:1px solid #d29922">
882
+ <span class="swatch-label" style="color:#d29922">warning</span>
883
+ <span class="swatch-hex" style="color:#d29922">#d29922</span>
884
+ </div>
885
+ </div>
886
+ </section>
887
+
888
+ <!-- ═══════════════════════════════════════════════════════════════════
889
+ 03. TYPOGRAPHY
890
+ ═══════════════════════════════════════════════════════════════════ -->
891
+ <section class="section" id="typography">
892
+ <div class="section-title">02 / SYNCHRONIZATION INTERFACE &mdash; TYPOGRAPHY</div>
893
+ <p class="section-desc">MONOSPACE ONLY. UPPERCASE MANDATORY. ALL TEXT IS MISSION-CRITICAL. ACKNOWLEDGE.</p>
894
+
895
+ <div class="type-sample">
896
+ <div class="type-meta">3XL / 36PX</div>
897
+ <div class="type-specimen" style="font-size:36px;letter-spacing:0.25em;color:var(--nerv-accent);filter:drop-shadow(0 0 12px rgba(255,140,0,0.5))">NERV SYSTEM</div>
898
+ </div>
899
+ <div class="type-sample">
900
+ <div class="type-meta">2XL / 28PX</div>
901
+ <div class="type-specimen" style="font-size:28px;letter-spacing:0.25em">EVA UNIT-01</div>
902
+ </div>
903
+ <div class="type-sample">
904
+ <div class="type-meta">XL / 20PX</div>
905
+ <div class="type-specimen" style="font-size:20px;letter-spacing:0.2em">PATTERN BLUE DETECTED</div>
906
+ </div>
907
+ <div class="type-sample">
908
+ <div class="type-meta">LG / 16PX</div>
909
+ <div class="type-specimen" style="font-size:16px;letter-spacing:0.18em">SYNCHRONIZATION RATE: 400%</div>
910
+ </div>
911
+ <div class="type-sample">
912
+ <div class="type-meta">MD / 13PX</div>
913
+ <div class="type-specimen" style="font-size:13px;letter-spacing:0.1em">TERMINAL OUTPUT &mdash; SYSTEM LOG. ENTRY PLUG INSERTED. LCL FLOODING INITIATED.</div>
914
+ </div>
915
+ <div class="type-sample">
916
+ <div class="type-meta">SM / 12PX</div>
917
+ <div class="type-specimen" style="font-size:12px;letter-spacing:0.08em">METADATA: TIMESTAMPS, PILOT STATS, SECONDARY DIAGNOSTICS, UMBILICAL CABLE STATUS.</div>
918
+ </div>
919
+ <div class="type-sample">
920
+ <div class="type-meta">XS / 10PX</div>
921
+ <div class="type-specimen" style="font-size:10px;letter-spacing:0.25em">LABELS &middot; BADGES &middot; CAPTIONS &middot; MAGI DESIGNATORS &middot; SECTION IDS</div>
922
+ </div>
923
+
924
+ <br>
925
+ <div class="panel brackets" style="margin-top:8px">
926
+ <div style="font-size:10px;letter-spacing:0.25em;text-transform:uppercase;color:var(--nerv-accent);margin-bottom:10px">LETTER-SPACING SCALE &mdash; TRACKING MATRIX</div>
927
+ <div style="margin-bottom:8px;font-size:12px;letter-spacing:0;text-transform:uppercase;color:var(--nerv-text-secondary)">TIGHT (0) &mdash; TERMINAL OUTPUT, RAW DATA STREAMS</div>
928
+ <div style="margin-bottom:8px;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--nerv-text-secondary)">NORMAL (0.08EM) &mdash; INTERFACE TEXT, PILOT COMMS</div>
929
+ <div style="margin-bottom:8px;font-size:12px;letter-spacing:0.15em;text-transform:uppercase;color:var(--nerv-text-secondary)">WIDE (0.15EM) &mdash; SECTION HEADINGS, STATUS LABELS</div>
930
+ <div style="margin-bottom:8px;font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--nerv-text-primary)">WIDER (0.2EM) &mdash; SECTION TITLES, WARNINGS</div>
931
+ <div style="font-size:12px;letter-spacing:0.25em;text-transform:uppercase;color:var(--nerv-accent)">WIDEST (0.25EM) &mdash; ALERT HEADERS, CRITICAL DESIGNATORS</div>
932
+ </div>
933
+ </section>
934
+
935
+ <!-- ═══════════════════════════════════════════════════════════════════
936
+ 04. SPACING SCALE
937
+ ═══════════════════════════════════════════════════════════════════ -->
938
+ <section class="section" id="spacing">
939
+ <div class="section-title">03 / AT-FIELD COMPONENTS &mdash; SPACING SCALE</div>
940
+ <p class="section-desc">4PX BASE UNIT. 13 INCREMENTS FROM 1PX TO 96PX. MAINTAIN PRECISE FIELD GEOMETRY.</p>
941
+ <div>
942
+ <div class="space-row"><div class="space-bar" style="width:1px"></div> <div class="space-meta">PX &mdash; 1PX</div></div>
943
+ <div class="space-row"><div class="space-bar" style="width:4px"></div> <div class="space-meta">1 &mdash; 4PX</div></div>
944
+ <div class="space-row"><div class="space-bar" style="width:8px"></div> <div class="space-meta">2 &mdash; 8PX</div></div>
945
+ <div class="space-row"><div class="space-bar" style="width:12px"></div> <div class="space-meta">3 &mdash; 12PX</div></div>
946
+ <div class="space-row"><div class="space-bar" style="width:16px"></div> <div class="space-meta">4 &mdash; 16PX</div></div>
947
+ <div class="space-row"><div class="space-bar" style="width:20px"></div> <div class="space-meta">5 &mdash; 20PX</div></div>
948
+ <div class="space-row"><div class="space-bar" style="width:24px"></div> <div class="space-meta">6 &mdash; 24PX</div></div>
949
+ <div class="space-row"><div class="space-bar" style="width:32px"></div> <div class="space-meta">8 &mdash; 32PX</div></div>
950
+ <div class="space-row"><div class="space-bar" style="width:40px"></div> <div class="space-meta">10 &mdash; 40PX</div></div>
951
+ <div class="space-row"><div class="space-bar" style="width:48px"></div> <div class="space-meta">12 &mdash; 48PX</div></div>
952
+ <div class="space-row"><div class="space-bar" style="width:64px"></div> <div class="space-meta">16 &mdash; 64PX</div></div>
953
+ <div class="space-row"><div class="space-bar" style="width:80px"></div> <div class="space-meta">20 &mdash; 80PX</div></div>
954
+ <div class="space-row"><div class="space-bar" style="width:96px"></div> <div class="space-meta">24 &mdash; 96PX</div></div>
955
+ </div>
956
+ </section>
957
+
958
+ <!-- ═══════════════════════════════════════════════════════════════════
959
+ 05. BUTTONS
960
+ ═══════════════════════════════════════════════════════════════════ -->
961
+ <section class="section" id="buttons">
962
+ <div class="section-title">04 / COMMAND CONTROLS &mdash; BUTTONS</div>
963
+ <p class="section-desc">FOUR VARIANTS. ALL BEVELED. ENGAGE WHEN READY. CONFIRM DIRECTIVE.</p>
964
+ <div class="btn-row">
965
+ <button class="btn btn-primary">ENGAGE</button>
966
+ <button class="btn btn-outline">STANDBY</button>
967
+ <button class="btn btn-ghost">DETAILS</button>
968
+ <button class="btn btn-danger">EJECT PLUG</button>
969
+ <button class="btn btn-primary" disabled>LOCKED</button>
970
+ </div>
971
+ <br>
972
+ <div class="btn-row">
973
+ <button class="btn btn-primary" style="padding:6px 14px;font-size:10px">SM / INITIATE</button>
974
+ <button class="btn btn-primary">MD / EXECUTE</button>
975
+ <button class="btn btn-primary" style="padding:12px 28px;font-size:12px">LG / DEPLOY EVA</button>
976
+ </div>
977
+ <br>
978
+ <div class="panel" style="margin-top:8px">
979
+ <div style="font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--nerv-text-muted);margin-bottom:6px">NOTE: DANGER VARIANT DISPLAYS HAZARD STRIPES ON HOVER. TEST IT.</div>
980
+ </div>
981
+ </section>
982
+
983
+ <!-- ═══════════════════════════════════════════════════════════════════
984
+ 06. FORM INPUTS
985
+ ═══════════════════════════════════════════════════════════════════ -->
986
+ <section class="section" id="inputs">
987
+ <div class="section-title">05 / PILOT INTERFACE &mdash; FORM INPUTS</div>
988
+ <p class="section-desc">ALL INPUTS BEVELED. ORANGE ACCENT ON FOCUS. REPORT DATA ACCURATELY.</p>
989
+
990
+ <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px">
991
+ <div class="input-group">
992
+ <label class="input-label">PILOT DESIGNATION</label>
993
+ <input class="input" type="text" placeholder="ENTER PILOT NAME..." />
994
+ </div>
995
+ <div class="input-group">
996
+ <label class="input-label">ENTRY PLUG DEPTH</label>
997
+ <input class="input" type="text" value="DEPTH: 0.000 — LCL NOMINAL" />
998
+ </div>
999
+ <div class="input-group">
1000
+ <label class="input-label">EVA UNIT ASSIGNMENT</label>
1001
+ <select class="input">
1002
+ <option>UNIT-00 — PROTOTYPE</option>
1003
+ <option>UNIT-01 — TEST TYPE</option>
1004
+ <option>UNIT-02 — PRODUCTION MODEL</option>
1005
+ </select>
1006
+ </div>
1007
+ <div class="input-group">
1008
+ <label class="input-label">MISSION BRIEFING</label>
1009
+ <textarea class="input" placeholder="ENTER MISSION PARAMETERS..."></textarea>
1010
+ </div>
1011
+ </div>
1012
+ </section>
1013
+
1014
+ <!-- ═══════════════════════════════════════════════════════════════════
1015
+ 07. CARDS
1016
+ ═══════════════════════════════════════════════════════════════════ -->
1017
+ <section class="section" id="cards">
1018
+ <div class="section-title">06 / TERMINAL DOGMA &mdash; PANEL CARDS</div>
1019
+ <p class="section-desc">THREE CONFIGURATIONS. STANDARD, ACCENT, AND CRITICAL HAZARD. AT-FIELD ACTIVE.</p>
1020
+
1021
+ <div class="card-grid">
1022
+ <div class="card brackets">
1023
+ <div class="card-title">MAGI CASPAR</div>
1024
+ <div class="card-body">
1025
+ PERSONALITY TRANSPLANT OS. SCIENTIST MODULE. ALL DIAGNOSTIC SYSTEMS NOMINAL.
1026
+ SYNCHRONIZATION RATE: 99.7%. RECOMMEND CONTINUED OPERATION.
1027
+ </div>
1028
+ <div style="margin-top:12px;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--nerv-text-muted)">
1029
+ STATUS: OPERATIONAL &middot; PRIORITY: STANDARD
1030
+ </div>
1031
+ </div>
1032
+
1033
+ <div class="card at-field">
1034
+ <div class="card-title">MAGI BALTHASAR</div>
1035
+ <div class="card-body">
1036
+ MOTHER MODULE ACTIVE. PATTERN ANALYSIS RUNNING. AT-FIELD BARRIER INTEGRITY AT MAXIMUM.
1037
+ NO ANOMALIES DETECTED IN CURRENT SCAN CYCLE.
1038
+ </div>
1039
+ <div style="margin-top:12px;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--nerv-accent)">
1040
+ STATUS: AT-FIELD ACTIVE &middot; PRIORITY: HIGH
1041
+ </div>
1042
+ </div>
1043
+
1044
+ <div class="card card-hazard">
1045
+ <div class="card-title">MAGI MELCHIOR &mdash; CRITICAL</div>
1046
+ <div class="card-body" style="color:var(--nerv-state-error)">
1047
+ WARNING: PATTERN BLUE CONFIRMED. ANGEL DETECTED IN PERIMETER SECTOR 7.
1048
+ ALL PILOTS REPORT TO ENTRY PLUGS IMMEDIATELY. THIS IS NOT A DRILL.
1049
+ </div>
1050
+ <div style="margin-top:12px;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--nerv-state-error)">
1051
+ STATUS: ALERT &middot; PRIORITY: ABSOLUTE
1052
+ </div>
1053
+ </div>
1054
+ </div>
1055
+ </section>
1056
+
1057
+ <!-- ═══════════════════════════════════════════════════════════════════
1058
+ 08. BADGES
1059
+ ═══════════════════════════════════════════════════════════════════ -->
1060
+ <section class="section" id="badges">
1061
+ <div class="section-title">07 / EVA STATUS BADGES &mdash; DESIGNATION MARKERS</div>
1062
+ <p class="section-desc">STATE BADGES. RECORDING BADGE PULSES AT MAXIMUM INTENSITY. MONITOR ALL CHANNELS.</p>
1063
+ <div class="badge-row">
1064
+ <span class="badge badge-idle">IDLE</span>
1065
+ <span class="badge badge-active">ACTIVE</span>
1066
+ <span class="badge badge-recording">RECORDING</span>
1067
+ <span class="badge badge-processing">PROCESSING</span>
1068
+ <span class="badge badge-success">SUCCESS</span>
1069
+ <span class="badge badge-error">ERROR</span>
1070
+ <span class="badge badge-warning">WARNING</span>
1071
+ </div>
1072
+ <br>
1073
+ <div class="badge-row">
1074
+ <span class="badge badge-idle" style="font-size:8px;letter-spacing:0.15em">NERV-01</span>
1075
+ <span class="badge badge-active" style="font-size:8px;letter-spacing:0.15em">UNIT-01</span>
1076
+ <span class="badge badge-success" style="font-size:8px;letter-spacing:0.15em">SYNC: 95.3%</span>
1077
+ <span class="badge badge-warning" style="font-size:8px;letter-spacing:0.15em">LCL: LOW</span>
1078
+ <span class="badge badge-error" style="font-size:8px;letter-spacing:0.15em">AT-FIELD: BREACH</span>
1079
+ </div>
1080
+ </section>
1081
+
1082
+ <!-- ═══════════════════════════════════════════════════════════════════
1083
+ 09. STATUS INDICATORS
1084
+ ═══════════════════════════════════════════════════════════════════ -->
1085
+ <section class="section" id="states">
1086
+ <div class="section-title">08 / SYNCHRONIZATION MATRIX &mdash; STATUS INDICATORS</div>
1087
+ <p class="section-desc">SEVEN OPERATIONAL STATES. DRAMATIC GLOW EFFECTS. ALL SENSORS ACTIVE.</p>
1088
+
1089
+ <div class="state-grid">
1090
+ <div class="state-card">
1091
+ <div class="state-dot" style="background:#ff8c00;box-shadow:0 0 8px #ff8c00, 0 0 20px rgba(255,140,0,0.4)"></div>
1092
+ <div>
1093
+ <div class="state-name" style="color:#ff8c00">IDLE</div>
1094
+ <div class="state-hex">#FF8C00 &mdash; STANDBY MODE</div>
1095
+ </div>
1096
+ </div>
1097
+ <div class="state-card">
1098
+ <div class="state-dot" style="background:#ff6600;box-shadow:0 0 8px #ff6600, 0 0 20px rgba(255,102,0,0.4)"></div>
1099
+ <div>
1100
+ <div class="state-name" style="color:#ff6600">ACTIVE</div>
1101
+ <div class="state-hex">#FF6600 &mdash; ENGAGED</div>
1102
+ </div>
1103
+ </div>
1104
+ <div class="state-card" style="animation:nerv-alert-pulse 1s ease-in-out infinite">
1105
+ <div class="state-dot" style="background:#ff1500;box-shadow:0 0 12px #ff1500, 0 0 30px rgba(255,21,0,0.6)"></div>
1106
+ <div>
1107
+ <div class="state-name" style="color:#ff1500">RECORDING</div>
1108
+ <div class="state-hex">#FF1500 &mdash; NERV RED / PULSING</div>
1109
+ </div>
1110
+ </div>
1111
+ <div class="state-card">
1112
+ <div class="state-dot" style="background:#e3b341;box-shadow:0 0 8px #e3b341, 0 0 20px rgba(227,179,65,0.4)"></div>
1113
+ <div>
1114
+ <div class="state-name" style="color:#e3b341">PROCESSING</div>
1115
+ <div class="state-hex">#E3B341 &mdash; COMPUTATION</div>
1116
+ </div>
1117
+ </div>
1118
+ <div class="state-card">
1119
+ <div class="state-dot" style="background:#4ade80;box-shadow:0 0 8px #4ade80, 0 0 20px rgba(74,222,128,0.4)"></div>
1120
+ <div>
1121
+ <div class="state-name" style="color:#4ade80">SUCCESS</div>
1122
+ <div class="state-hex">#4ADE80 &mdash; MISSION COMPLETE</div>
1123
+ </div>
1124
+ </div>
1125
+ <div class="state-card">
1126
+ <div class="state-dot" style="background:#ff0000;box-shadow:0 0 12px #ff0000, 0 0 24px rgba(255,0,0,0.5)"></div>
1127
+ <div>
1128
+ <div class="state-name" style="color:#ff0000">ERROR</div>
1129
+ <div class="state-hex">#FF0000 &mdash; SYSTEM FAILURE</div>
1130
+ </div>
1131
+ </div>
1132
+ <div class="state-card">
1133
+ <div class="state-dot" style="background:#d29922;box-shadow:0 0 8px #d29922, 0 0 20px rgba(210,153,34,0.4)"></div>
1134
+ <div>
1135
+ <div class="state-name" style="color:#d29922">WARNING</div>
1136
+ <div class="state-hex">#D29922 &mdash; CAUTION</div>
1137
+ </div>
1138
+ </div>
1139
+ </div>
1140
+ </section>
1141
+
1142
+ <!-- ═══════════════════════════════════════════════════════════════════
1143
+ 10. ANIMATIONS
1144
+ ═══════════════════════════════════════════════════════════════════ -->
1145
+ <section class="section" id="animations">
1146
+ <div class="section-title">09 / INITIATE SEQUENCE &mdash; ANIMATIONS</div>
1147
+ <p class="section-desc">CRT SCANLINE. GLOW PULSE. ALERT PULSE. HAZARD STRIPE. AT-FIELD SHIMMER. LARSON SCANNER.</p>
1148
+
1149
+ <div class="anim-grid">
1150
+ <div class="anim-card anim-crt anim-brackets-inner">
1151
+ CRT SCANLINE<br>
1152
+ <span style="font-size:9px;color:var(--nerv-accent-muted)">ORANGE TINT &middot; 5S LINEAR</span>
1153
+ </div>
1154
+ <div class="anim-card anim-glow anim-brackets-inner" style="color:var(--nerv-accent)">
1155
+ GLOW PULSE<br>
1156
+ <span style="font-size:9px;color:var(--nerv-accent-muted)">NERV ORANGE &middot; 2S EASE</span>
1157
+ </div>
1158
+ <div class="anim-card anim-brackets-inner" style="animation:nerv-alert-pulse 1s ease-in-out infinite;color:var(--nerv-state-recording)">
1159
+ ALERT PULSE<br>
1160
+ <span style="font-size:9px;color:var(--nerv-accent-muted)">NERV RED &middot; 1S &middot; CRITICAL</span>
1161
+ </div>
1162
+ <div class="anim-card" style="letter-spacing:0.2em;font-size:11px;color:var(--nerv-accent)">
1163
+ SYSTEM ONLINE<span class="cursor-blink"></span><br>
1164
+ <span style="font-size:9px;color:var(--nerv-accent-muted)">BLINK &middot; 0.8S STEP</span>
1165
+ </div>
1166
+ <div class="anim-card at-field" style="color:var(--nerv-accent)">
1167
+ AT-FIELD<br>
1168
+ <span style="font-size:9px;color:var(--nerv-accent-muted)">SHIMMER &middot; 4S EASE</span>
1169
+ </div>
1170
+ </div>
1171
+
1172
+ <!-- Hazard Stripe Animation -->
1173
+ <div style="margin-top:20px">
1174
+ <div style="font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--nerv-text-muted);margin-bottom:8px">HAZARD STRIPE ANIMATION &mdash; PATTERN RED</div>
1175
+ <div class="hazard-bar"></div>
1176
+ </div>
1177
+
1178
+ <!-- Larson Scanner -->
1179
+ <div style="margin-top:20px">
1180
+ <div style="font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--nerv-text-muted);margin-bottom:8px">LARSON SCANNER &mdash; PROCESSING INDICATOR</div>
1181
+ <div class="larson-track">
1182
+ <div class="larson-bar"></div>
1183
+ </div>
1184
+ </div>
1185
+ </section>
1186
+
1187
+ <!-- ═══════════════════════════════════════════════════════════════════
1188
+ 11. SAMPLE APP HEADER
1189
+ ═══════════════════════════════════════════════════════════════════ -->
1190
+ <section class="section" id="app-header">
1191
+ <div class="section-title">10 / COMMAND BRIDGE &mdash; APP HEADER (38PX)</div>
1192
+ <p class="section-desc">STANDARD APPLICATION HEADER. NERV BRANDING LEFT. STATUS INDICATOR RIGHT.</p>
1193
+
1194
+ <div class="app-header">
1195
+ <span class="app-header-title">NERV</span>
1196
+ <span class="app-header-sep">//</span>
1197
+ <span class="app-header-label">CENTRAL DOGMA TERMINAL</span>
1198
+ <div class="app-header-status">
1199
+ <span style="font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--nerv-text-muted)">SYNC: 97.2%</span>
1200
+ <div class="app-header-dot"></div>
1201
+ </div>
1202
+ </div>
1203
+
1204
+ <br>
1205
+
1206
+ <div class="app-header" style="border-bottom-color:var(--nerv-state-recording)">
1207
+ <span class="app-header-title" style="color:var(--nerv-state-recording);filter:drop-shadow(0 0 6px rgba(255,21,0,0.5))">NERV</span>
1208
+ <span class="app-header-sep">//</span>
1209
+ <span class="app-header-label">VOICE INTERCEPT SYSTEM</span>
1210
+ <div class="app-header-status">
1211
+ <span style="font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--nerv-state-recording)">RECORDING</span>
1212
+ <div class="app-header-dot" style="background:var(--nerv-state-recording);box-shadow:0 0 8px var(--nerv-state-recording);animation:nerv-blink 0.6s step-start infinite"></div>
1213
+ </div>
1214
+ </div>
1215
+
1216
+ <br>
1217
+
1218
+ <div class="app-header" style="border-bottom-color:var(--nerv-state-success)">
1219
+ <span class="app-header-title">NERV</span>
1220
+ <span class="app-header-sep">//</span>
1221
+ <span class="app-header-label">WORKFLOW MANAGER</span>
1222
+ <div class="app-header-status">
1223
+ <span style="font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--nerv-state-success)">ALL SYSTEMS GO</span>
1224
+ <div class="app-header-dot" style="background:var(--nerv-state-success);box-shadow:0 0 6px var(--nerv-state-success)"></div>
1225
+ </div>
1226
+ </div>
1227
+ </section>
1228
+
1229
+ <!-- ═══════════════════════════════════════════════════════════════════
1230
+ FOOTER
1231
+ ═══════════════════════════════════════════════════════════════════ -->
1232
+ <footer style="border-top:2px solid var(--nerv-border-default);padding-top:20px;margin-top:24px;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--nerv-text-muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px">
1233
+ <span>NERV // @DEVGLIDE/DESIGN-TOKENS v0.3.0</span>
1234
+ <span>PROPOSITION B &middot; NERV ORANGE &middot; PATTERN CONFIRMED</span>
1235
+ </footer>
1236
+
1237
+ </div>
1238
+ </body>
1239
+ </html>