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-c.html ADDED
@@ -0,0 +1,1049 @@
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>Devglide Design System — Proposition C: Midnight Violet</title>
7
+ <style>
8
+ /* ── Keyframes ──────────────────────────────────────────────────── */
9
+ @keyframes neon-flicker {
10
+ 0%, 95%, 100% { opacity: 1; }
11
+ 96% { opacity: 0.8; }
12
+ 97% { opacity: 1; }
13
+ 98% { opacity: 0.6; }
14
+ 99% { opacity: 0.9; }
15
+ }
16
+ @keyframes glow-pulse {
17
+ 0%, 100% { box-shadow: 0 0 8px rgba(167,139,250,.3), 0 0 16px rgba(167,139,250,.1); }
18
+ 50% { box-shadow: 0 0 14px rgba(167,139,250,.5), 0 0 28px rgba(167,139,250,.2); }
19
+ }
20
+ @keyframes scan-line {
21
+ 0% { transform: translateX(-100%); }
22
+ 100% { transform: translateX(100%); }
23
+ }
24
+ @keyframes dot-pulse {
25
+ 0%, 100% { opacity: 0.4; }
26
+ 50% { opacity: 1; }
27
+ }
28
+ @keyframes text-glow {
29
+ 0%, 100% { text-shadow: 0 0 8px rgba(167,139,250,.4), 0 0 16px rgba(167,139,250,.15); }
30
+ 50% { text-shadow: 0 0 14px rgba(167,139,250,.6), 0 0 24px rgba(167,139,250,.25); }
31
+ }
32
+ @keyframes badge-glow {
33
+ 0%, 100% { box-shadow: 0 0 6px rgba(167,139,250,.2); }
34
+ 50% { box-shadow: 0 0 12px rgba(167,139,250,.4); }
35
+ }
36
+ @keyframes stream-scroll {
37
+ 0% { transform: translateY(0); }
38
+ 100% { transform: translateY(-50%); }
39
+ }
40
+
41
+ /* ── Reset & Base ──────────────────────────────────────────────── */
42
+ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
43
+ html { font-size: 13px; }
44
+ body {
45
+ background: #0d0f1a;
46
+ color: #e2e8f0;
47
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
48
+ min-height: 100vh;
49
+ line-height: 1.6;
50
+ position: relative;
51
+ }
52
+ /* Grid overlay */
53
+ body::before {
54
+ content: '';
55
+ position: fixed;
56
+ inset: 0;
57
+ z-index: 0;
58
+ pointer-events: none;
59
+ background:
60
+ repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(167,139,250,.03) 50px),
61
+ repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(167,139,250,.03) 50px);
62
+ }
63
+
64
+ /* ── Layout ────────────────────────────────────────────────────── */
65
+ .page {
66
+ position: relative;
67
+ z-index: 1;
68
+ max-width: 960px;
69
+ margin: 0 auto;
70
+ padding: 48px 24px;
71
+ }
72
+ .mono { font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; }
73
+
74
+ /* ── Sections ──────────────────────────────────────────────────── */
75
+ .section { margin-bottom: 64px; }
76
+ .section-label {
77
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
78
+ font-size: 9px;
79
+ letter-spacing: 0.15em;
80
+ text-transform: uppercase;
81
+ color: #22d3ee;
82
+ margin-bottom: 4px;
83
+ display: flex;
84
+ align-items: center;
85
+ gap: 8px;
86
+ }
87
+ .section-label::before { content: '//'; color: #64748b; }
88
+ .section-title {
89
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
90
+ font-size: 18px;
91
+ font-weight: 600;
92
+ letter-spacing: 0.08em;
93
+ text-transform: uppercase;
94
+ color: #a78bfa;
95
+ margin-bottom: 8px;
96
+ }
97
+ .section-desc {
98
+ font-size: 13px;
99
+ color: #94a3b8;
100
+ margin-bottom: 24px;
101
+ max-width: 600px;
102
+ line-height: 1.6;
103
+ }
104
+ .divider {
105
+ height: 1px;
106
+ background: linear-gradient(90deg, #a78bfa, #2d3560 40%, transparent);
107
+ margin-bottom: 24px;
108
+ }
109
+
110
+ /* ── 1. Header ─────────────────────────────────────────────────── */
111
+ .site-header {
112
+ text-align: center;
113
+ padding: 48px 24px 40px;
114
+ margin-bottom: 48px;
115
+ position: relative;
116
+ border-bottom: 1px solid #2d3560;
117
+ background: linear-gradient(180deg, rgba(167,139,250,.04) 0%, transparent 100%);
118
+ }
119
+ .site-header::before {
120
+ content: '';
121
+ position: absolute;
122
+ bottom: -1px;
123
+ left: 0;
124
+ right: 0;
125
+ height: 1px;
126
+ background: linear-gradient(90deg, transparent 0%, #a78bfa 50%, transparent 100%);
127
+ }
128
+ .site-header h1 {
129
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
130
+ font-size: 11px;
131
+ font-weight: 400;
132
+ letter-spacing: 0.15em;
133
+ text-transform: uppercase;
134
+ color: #94a3b8;
135
+ margin-bottom: 16px;
136
+ }
137
+ .hero-title {
138
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
139
+ font-size: 28px;
140
+ font-weight: 700;
141
+ letter-spacing: 0.08em;
142
+ text-transform: uppercase;
143
+ color: #a78bfa;
144
+ text-shadow: 0 0 10px rgba(167,139,250,.4), 0 0 30px rgba(167,139,250,.15);
145
+ animation: text-glow 4s ease-in-out infinite;
146
+ margin-bottom: 8px;
147
+ }
148
+ .hero-sub {
149
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
150
+ font-size: 14px;
151
+ letter-spacing: 0.08em;
152
+ color: #22d3ee;
153
+ text-shadow: 0 0 8px rgba(34,211,238,.3);
154
+ }
155
+ .hero-desc {
156
+ font-size: 13px;
157
+ color: #64748b;
158
+ margin-top: 16px;
159
+ max-width: 520px;
160
+ margin-left: auto;
161
+ margin-right: auto;
162
+ }
163
+
164
+ /* ── 2. Color Swatches ─────────────────────────────────────────── */
165
+ .swatch-group-label {
166
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
167
+ font-size: 9px;
168
+ letter-spacing: 0.15em;
169
+ text-transform: uppercase;
170
+ color: #64748b;
171
+ margin: 20px 0 8px;
172
+ }
173
+ .swatch-group-label:first-child { margin-top: 0; }
174
+ .swatch-grid {
175
+ display: grid;
176
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
177
+ gap: 8px;
178
+ margin-bottom: 4px;
179
+ }
180
+ .swatch { border-radius: 2px; overflow: hidden; border: 1px solid #1e2340; }
181
+ .swatch-color { height: 52px; }
182
+ .swatch-info { padding: 6px 8px; background: #141829; }
183
+ .swatch-name {
184
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
185
+ font-size: 9px;
186
+ color: #94a3b8;
187
+ }
188
+ .swatch-hex {
189
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
190
+ font-size: 10px;
191
+ color: #64748b;
192
+ margin-top: 2px;
193
+ }
194
+
195
+ /* ── 3. Typography ─────────────────────────────────────────────── */
196
+ .type-sample {
197
+ padding: 16px 0;
198
+ border-bottom: 1px solid #1e2340;
199
+ display: flex;
200
+ align-items: baseline;
201
+ gap: 16px;
202
+ }
203
+ .type-sample:last-child { border-bottom: none; }
204
+ .type-meta {
205
+ flex-shrink: 0;
206
+ width: 80px;
207
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
208
+ font-size: 9px;
209
+ color: #64748b;
210
+ letter-spacing: 0.08em;
211
+ text-transform: uppercase;
212
+ }
213
+ .type-font-section { margin-bottom: 32px; }
214
+ .type-font-label {
215
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
216
+ font-size: 10px;
217
+ letter-spacing: 0.08em;
218
+ text-transform: uppercase;
219
+ color: #a78bfa;
220
+ padding: 4px 10px;
221
+ background: #2e1a5e;
222
+ display: inline-block;
223
+ margin-bottom: 16px;
224
+ clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px),
225
+ calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px);
226
+ }
227
+ .spacing-label {
228
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
229
+ font-size: 9px;
230
+ color: #64748b;
231
+ letter-spacing: 0.08em;
232
+ text-transform: uppercase;
233
+ margin: 24px 0 12px;
234
+ }
235
+ .ls-row {
236
+ display: flex;
237
+ align-items: center;
238
+ gap: 16px;
239
+ padding: 8px 0;
240
+ border-bottom: 1px solid #1e2340;
241
+ }
242
+ .ls-row-label {
243
+ flex-shrink: 0;
244
+ width: 100px;
245
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
246
+ font-size: 9px;
247
+ color: #64748b;
248
+ }
249
+ .ls-row-preview {
250
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
251
+ font-size: 12px;
252
+ color: #e2e8f0;
253
+ text-transform: uppercase;
254
+ }
255
+
256
+ /* ── 4. Spacing ────────────────────────────────────────────────── */
257
+ .spacing-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
258
+ .spacing-token {
259
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
260
+ font-size: 10px;
261
+ color: #64748b;
262
+ width: 48px;
263
+ text-align: right;
264
+ flex-shrink: 0;
265
+ }
266
+ .spacing-bar {
267
+ height: 20px;
268
+ background: linear-gradient(90deg, #a78bfa, #7c3aed);
269
+ box-shadow: 0 0 8px rgba(167,139,250,.2);
270
+ clip-path: polygon(3px 0%, calc(100% - 3px) 0%, 100% 3px, 100% calc(100% - 3px),
271
+ calc(100% - 3px) 100%, 3px 100%, 0% calc(100% - 3px), 0% 3px);
272
+ }
273
+ .spacing-value {
274
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
275
+ font-size: 10px;
276
+ color: #94a3b8;
277
+ width: 40px;
278
+ flex-shrink: 0;
279
+ }
280
+
281
+ /* ── 5. Buttons ────────────────────────────────────────────────── */
282
+ .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
283
+ .btn {
284
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
285
+ font-size: 11px;
286
+ font-weight: 500;
287
+ letter-spacing: 0.08em;
288
+ text-transform: uppercase;
289
+ padding: 8px 20px;
290
+ border: none;
291
+ cursor: pointer;
292
+ transition: all 0.2s ease;
293
+ clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px),
294
+ calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
295
+ }
296
+ .btn-primary { background: #a78bfa; color: #0d0f1a; }
297
+ .btn-primary:hover {
298
+ background: #c4b5fd;
299
+ box-shadow: 0 0 10px rgba(167,139,250,.4), 0 0 20px rgba(167,139,250,.15);
300
+ }
301
+ .btn-secondary { background: transparent; color: #22d3ee; border: 1px solid #22d3ee; clip-path: none; }
302
+ .btn-secondary:hover {
303
+ background: rgba(34,211,238,.1);
304
+ box-shadow: 0 0 10px rgba(34,211,238,.3), 0 0 20px rgba(34,211,238,.1);
305
+ }
306
+ .btn-outline { background: transparent; color: #a78bfa; border: 1px solid #a78bfa; clip-path: none; }
307
+ .btn-outline:hover {
308
+ background: rgba(167,139,250,.1);
309
+ box-shadow: 0 0 10px rgba(167,139,250,.3), 0 0 20px rgba(167,139,250,.1);
310
+ }
311
+ .btn-ghost { background: transparent; color: #94a3b8; clip-path: none; }
312
+ .btn-ghost:hover { color: #a78bfa; background: rgba(167,139,250,.06); }
313
+ .btn-danger { background: #ef4444; color: #0d0f1a; }
314
+ .btn-danger:hover {
315
+ background: #f87171;
316
+ box-shadow: 0 0 10px rgba(239,68,68,.4), 0 0 20px rgba(239,68,68,.15);
317
+ }
318
+ .btn-col { display: flex; flex-direction: column; align-items: center; }
319
+ .btn-label {
320
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
321
+ font-size: 9px;
322
+ color: #64748b;
323
+ letter-spacing: 0.08em;
324
+ text-transform: uppercase;
325
+ text-align: center;
326
+ margin-top: 6px;
327
+ }
328
+
329
+ /* ── 6. Form Inputs ────────────────────────────────────────────── */
330
+ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
331
+ @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
332
+ .form-group { margin-bottom: 20px; }
333
+ .form-label {
334
+ display: block;
335
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
336
+ font-size: 9px;
337
+ letter-spacing: 0.08em;
338
+ text-transform: uppercase;
339
+ color: #94a3b8;
340
+ margin-bottom: 6px;
341
+ }
342
+ .form-input,
343
+ .form-textarea,
344
+ .form-select {
345
+ width: 100%;
346
+ max-width: 400px;
347
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
348
+ font-size: 12px;
349
+ color: #e2e8f0;
350
+ background: #141829;
351
+ border: 1px solid #2d3560;
352
+ padding: 10px 12px;
353
+ outline: none;
354
+ transition: all 0.2s ease;
355
+ clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px),
356
+ calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px);
357
+ }
358
+ .form-input:focus,
359
+ .form-textarea:focus,
360
+ .form-select:focus {
361
+ border-color: #a78bfa;
362
+ box-shadow: 0 0 8px rgba(167,139,250,.25), 0 0 16px rgba(167,139,250,.08);
363
+ }
364
+ .form-input::placeholder,
365
+ .form-textarea::placeholder { color: #64748b; }
366
+ .form-textarea { min-height: 80px; resize: vertical; }
367
+ .form-select {
368
+ appearance: none;
369
+ cursor: pointer;
370
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%2394a3b8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
371
+ background-repeat: no-repeat;
372
+ background-position: right 12px center;
373
+ padding-right: 32px;
374
+ }
375
+
376
+ /* ── 7. Cards ───────────────────────────────────────────────────── */
377
+ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
378
+ @media (max-width: 700px) { .card-grid { grid-template-columns: 1fr; } }
379
+ .card {
380
+ background: #141829;
381
+ border: 1px solid #2d3560;
382
+ padding: 20px;
383
+ position: relative;
384
+ transition: all 0.25s ease;
385
+ }
386
+ .card:hover { border-color: #3d4680; transform: translateY(-2px); }
387
+ /* Corner bracket decorations */
388
+ .card::before,
389
+ .card::after {
390
+ content: '';
391
+ position: absolute;
392
+ width: 12px;
393
+ height: 12px;
394
+ border-color: #a78bfa;
395
+ border-style: solid;
396
+ pointer-events: none;
397
+ opacity: 0.5;
398
+ transition: opacity 0.25s ease;
399
+ }
400
+ .card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
401
+ .card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
402
+ .card:hover::before,
403
+ .card:hover::after { opacity: 1; }
404
+ .card-violet {
405
+ border-color: #a78bfa;
406
+ box-shadow: 0 0 10px rgba(167,139,250,.15), 0 0 20px rgba(167,139,250,.05);
407
+ }
408
+ .card-violet:hover {
409
+ box-shadow: 0 0 14px rgba(167,139,250,.25), 0 0 28px rgba(167,139,250,.1);
410
+ }
411
+ .card-cyan .card-header-bar {
412
+ background: linear-gradient(90deg, #22d3ee, transparent);
413
+ height: 2px;
414
+ margin: -20px -20px 16px;
415
+ }
416
+ .card-gradient { background: linear-gradient(135deg, #141829 0%, #1a1040 100%); }
417
+ .card-gradient .card-header-area {
418
+ background: linear-gradient(180deg, rgba(167,139,250,.08) 0%, transparent 100%);
419
+ margin: -20px -20px 16px;
420
+ padding: 16px 20px;
421
+ }
422
+ .card-title {
423
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
424
+ font-size: 12px;
425
+ font-weight: 600;
426
+ letter-spacing: 0.08em;
427
+ text-transform: uppercase;
428
+ color: #e2e8f0;
429
+ margin-bottom: 8px;
430
+ }
431
+ .card-text { font-size: 12px; color: #94a3b8; line-height: 1.6; }
432
+ .card-tag {
433
+ display: inline-block;
434
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
435
+ font-size: 9px;
436
+ letter-spacing: 0.08em;
437
+ text-transform: uppercase;
438
+ color: #a78bfa;
439
+ background: #2e1a5e;
440
+ padding: 2px 8px;
441
+ margin-top: 12px;
442
+ clip-path: polygon(3px 0%, calc(100% - 3px) 0%, 100% 3px, 100% calc(100% - 3px),
443
+ calc(100% - 3px) 100%, 3px 100%, 0% calc(100% - 3px), 0% 3px);
444
+ }
445
+
446
+ /* ── 8. Badges ──────────────────────────────────────────────────── */
447
+ .badge-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
448
+ .badge {
449
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
450
+ font-size: 9px;
451
+ font-weight: 500;
452
+ letter-spacing: 0.08em;
453
+ text-transform: uppercase;
454
+ padding: 3px 10px;
455
+ display: inline-flex;
456
+ align-items: center;
457
+ gap: 5px;
458
+ clip-path: polygon(3px 0%, calc(100% - 3px) 0%, 100% 3px, 100% calc(100% - 3px),
459
+ calc(100% - 3px) 100%, 3px 100%, 0% calc(100% - 3px), 0% 3px);
460
+ }
461
+ .badge-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
462
+ .badge-idle { background: rgba(167,139,250,.15); color: #a78bfa; }
463
+ .badge-idle .badge-dot { background: #a78bfa; }
464
+ .badge-active { background: rgba(139,92,246,.2); color: #c4b5fd; animation: badge-glow 3s ease-in-out infinite; }
465
+ .badge-active .badge-dot { background: #8b5cf6; }
466
+ .badge-recording { background: rgba(239,68,68,.15); color: #ef4444; }
467
+ .badge-recording .badge-dot { background: #ef4444; }
468
+ .badge-processing { background: rgba(245,158,11,.15); color: #f59e0b; }
469
+ .badge-processing .badge-dot { background: #f59e0b; }
470
+ .badge-success { background: rgba(16,185,129,.15); color: #10b981; }
471
+ .badge-success .badge-dot { background: #10b981; }
472
+ .badge-error { background: rgba(239,68,68,.15); color: #ef4444; }
473
+ .badge-error .badge-dot { background: #ef4444; }
474
+ .badge-warning { background: rgba(245,158,11,.15); color: #f59e0b; }
475
+ .badge-warning .badge-dot { background: #f59e0b; }
476
+ .badge-info { background: rgba(34,211,238,.12); color: #22d3ee; }
477
+ .badge-info .badge-dot { background: #22d3ee; }
478
+
479
+ /* ── 9. Status Indicators ──────────────────────────────────────── */
480
+ .status-grid {
481
+ display: grid;
482
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
483
+ gap: 12px;
484
+ }
485
+ .status-item {
486
+ display: flex;
487
+ align-items: center;
488
+ gap: 10px;
489
+ padding: 10px 14px;
490
+ background: #141829;
491
+ border: 1px solid #1e2340;
492
+ }
493
+ .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
494
+ .status-dot-idle { background: #a78bfa; box-shadow: 0 0 6px rgba(167,139,250,.4), 0 0 12px rgba(167,139,250,.15); }
495
+ .status-dot-active { background: #8b5cf6; box-shadow: 0 0 8px rgba(139,92,246,.5), 0 0 16px rgba(139,92,246,.2); animation: glow-pulse 2s ease-in-out infinite; }
496
+ .status-dot-recording { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 16px rgba(239,68,68,.2); animation: dot-pulse 1s ease-in-out infinite; }
497
+ .status-dot-processing { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,.4), 0 0 12px rgba(245,158,11,.15); animation: dot-pulse 1.5s ease-in-out infinite; }
498
+ .status-dot-success { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.4), 0 0 12px rgba(16,185,129,.15); }
499
+ .status-dot-error { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,.4), 0 0 12px rgba(239,68,68,.15); }
500
+ .status-dot-warning { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,.4), 0 0 12px rgba(245,158,11,.15); }
501
+ .status-label {
502
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
503
+ font-size: 10px;
504
+ letter-spacing: 0.08em;
505
+ text-transform: uppercase;
506
+ color: #94a3b8;
507
+ }
508
+
509
+ /* ── 10. Animations ────────────────────────────────────────────── */
510
+ .anim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
511
+ @media (max-width: 600px) { .anim-grid { grid-template-columns: 1fr; } }
512
+ .anim-box {
513
+ background: #141829;
514
+ border: 1px solid #2d3560;
515
+ padding: 24px;
516
+ position: relative;
517
+ overflow: hidden;
518
+ min-height: 120px;
519
+ display: flex;
520
+ flex-direction: column;
521
+ justify-content: flex-end;
522
+ }
523
+ .anim-label {
524
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
525
+ font-size: 10px;
526
+ letter-spacing: 0.08em;
527
+ text-transform: uppercase;
528
+ color: #94a3b8;
529
+ position: relative;
530
+ z-index: 2;
531
+ }
532
+ .anim-desc {
533
+ font-size: 11px;
534
+ color: #64748b;
535
+ margin-top: 4px;
536
+ position: relative;
537
+ z-index: 2;
538
+ }
539
+ .anim-neon-text {
540
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
541
+ font-size: 20px;
542
+ font-weight: 700;
543
+ color: #a78bfa;
544
+ text-shadow: 0 0 6px rgba(167,139,250,.6), 0 0 14px rgba(167,139,250,.3), 0 0 28px rgba(167,139,250,.15);
545
+ animation: neon-flicker 5s infinite;
546
+ position: absolute;
547
+ top: 24px;
548
+ left: 24px;
549
+ }
550
+ .anim-glow-orb {
551
+ width: 40px;
552
+ height: 40px;
553
+ border-radius: 50%;
554
+ background: #a78bfa;
555
+ animation: glow-pulse 2.5s ease-in-out infinite;
556
+ position: absolute;
557
+ top: 20px;
558
+ left: 24px;
559
+ }
560
+ .anim-stream-container {
561
+ position: absolute;
562
+ inset: 0;
563
+ overflow: hidden;
564
+ display: flex;
565
+ gap: 20px;
566
+ padding: 0 24px;
567
+ }
568
+ .anim-stream-col {
569
+ display: flex;
570
+ flex-direction: column;
571
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
572
+ font-size: 10px;
573
+ color: rgba(167,139,250,.3);
574
+ line-height: 1.6;
575
+ animation: stream-scroll 8s linear infinite;
576
+ white-space: nowrap;
577
+ }
578
+ .anim-stream-col:nth-child(2) { animation-duration: 6s; color: rgba(34,211,238,.2); }
579
+ .anim-stream-col:nth-child(3) { animation-duration: 10s; color: rgba(167,139,250,.2); }
580
+ .anim-stream-col:nth-child(4) { animation-duration: 7s; color: rgba(34,211,238,.15); }
581
+ .anim-scan-line {
582
+ position: absolute;
583
+ top: 50%;
584
+ left: 0;
585
+ width: 120px;
586
+ height: 2px;
587
+ background: linear-gradient(90deg, transparent, #a78bfa, transparent);
588
+ box-shadow: 0 0 8px rgba(167,139,250,.4);
589
+ animation: scan-line 3s ease-in-out infinite;
590
+ }
591
+
592
+ /* ── 11. App Header ────────────────────────────────────────────── */
593
+ .app-header-demo {
594
+ background: #141829;
595
+ border: 1px solid #2d3560;
596
+ height: 38px;
597
+ display: flex;
598
+ align-items: center;
599
+ padding: 0 14px;
600
+ gap: 10px;
601
+ position: relative;
602
+ }
603
+ .app-header-demo::after {
604
+ content: '';
605
+ position: absolute;
606
+ bottom: 0;
607
+ left: 0;
608
+ right: 0;
609
+ height: 1px;
610
+ background: linear-gradient(90deg, #a78bfa 0%, transparent 60%);
611
+ }
612
+ .app-header-name {
613
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
614
+ font-size: 11px;
615
+ font-weight: 600;
616
+ letter-spacing: 0.08em;
617
+ text-transform: uppercase;
618
+ color: #a78bfa;
619
+ }
620
+ .app-header-sep { width: 1px; height: 16px; background: #2d3560; }
621
+ .app-header-subtitle {
622
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
623
+ font-size: 9px;
624
+ letter-spacing: 0.08em;
625
+ color: #64748b;
626
+ text-transform: uppercase;
627
+ }
628
+ .app-header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
629
+ .app-header-status {
630
+ width: 6px;
631
+ height: 6px;
632
+ border-radius: 50%;
633
+ background: #22d3ee;
634
+ box-shadow: 0 0 4px rgba(34,211,238,.5), 0 0 8px rgba(34,211,238,.2);
635
+ }
636
+ .app-header-status-label {
637
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
638
+ font-size: 9px;
639
+ color: #22d3ee;
640
+ letter-spacing: 0.08em;
641
+ text-transform: uppercase;
642
+ }
643
+
644
+ /* ── Footer ────────────────────────────────────────────────────── */
645
+ .site-footer {
646
+ margin-top: 64px;
647
+ padding-top: 24px;
648
+ border-top: 1px solid #1e2340;
649
+ text-align: center;
650
+ }
651
+ .site-footer p {
652
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
653
+ font-size: 9px;
654
+ color: #64748b;
655
+ letter-spacing: 0.15em;
656
+ text-transform: uppercase;
657
+ }
658
+ </style>
659
+ </head>
660
+ <body>
661
+ <div class="page">
662
+
663
+ <!-- ═══════════════════════════════════════════════════════════════════
664
+ 1. HEADER
665
+ ═══════════════════════════════════════════════════════════════════ -->
666
+ <header class="site-header">
667
+ <h1>DEVGLIDE DESIGN SYSTEM</h1>
668
+ <div class="hero-title">MIDNIGHT VIOLET</div>
669
+ <div class="hero-sub">Proposition C</div>
670
+ <p class="hero-desc">
671
+ A cyberpunk-inspired dark theme with violet primary accents and cyan
672
+ secondary highlights. Dual-accent chromatic system built for next-gen
673
+ development interfaces.
674
+ </p>
675
+ </header>
676
+
677
+ <!-- ═══════════════════════════════════════════════════════════════════
678
+ 2. COLOR PALETTE
679
+ ═══════════════════════════════════════════════════════════════════ -->
680
+ <section class="section" id="colors">
681
+ <div class="section-label">Neural Interface</div>
682
+ <div class="section-title">Color Matrix</div>
683
+ <div class="divider"></div>
684
+ <div class="section-desc">
685
+ Dual-accent chromatic system. Violet drives primary actions and identity.
686
+ Cyan marks secondary signals, data, and informational elements.
687
+ </div>
688
+
689
+ <div class="swatch-group-label">// Background layers</div>
690
+ <div class="swatch-grid">
691
+ <div class="swatch"><div class="swatch-color" style="background:#0d0f1a"></div><div class="swatch-info"><div class="swatch-name">base</div><div class="swatch-hex">#0d0f1a</div></div></div>
692
+ <div class="swatch"><div class="swatch-color" style="background:#141829"></div><div class="swatch-info"><div class="swatch-name">surface</div><div class="swatch-hex">#141829</div></div></div>
693
+ <div class="swatch"><div class="swatch-color" style="background:#1e2340"></div><div class="swatch-info"><div class="swatch-name">raised</div><div class="swatch-hex">#1e2340</div></div></div>
694
+ <div class="swatch"><div class="swatch-color" style="background:#282e52"></div><div class="swatch-info"><div class="swatch-name">overlay</div><div class="swatch-hex">#282e52</div></div></div>
695
+ </div>
696
+
697
+ <div class="swatch-group-label">// Accent — violet</div>
698
+ <div class="swatch-grid">
699
+ <div class="swatch"><div class="swatch-color" style="background:#2e1a5e"></div><div class="swatch-info"><div class="swatch-name">dim</div><div class="swatch-hex">#2e1a5e</div></div></div>
700
+ <div class="swatch"><div class="swatch-color" style="background:#7c3aed"></div><div class="swatch-info"><div class="swatch-name">muted</div><div class="swatch-hex">#7c3aed</div></div></div>
701
+ <div class="swatch"><div class="swatch-color" style="background:#a78bfa"></div><div class="swatch-info"><div class="swatch-name">default</div><div class="swatch-hex">#a78bfa</div></div></div>
702
+ <div class="swatch"><div class="swatch-color" style="background:#c4b5fd"></div><div class="swatch-info"><div class="swatch-name">bright</div><div class="swatch-hex">#c4b5fd</div></div></div>
703
+ </div>
704
+
705
+ <div class="swatch-group-label">// Accent — cyan</div>
706
+ <div class="swatch-grid">
707
+ <div class="swatch"><div class="swatch-color" style="background:#0e4f5a"></div><div class="swatch-info"><div class="swatch-name">dim</div><div class="swatch-hex">#0e4f5a</div></div></div>
708
+ <div class="swatch"><div class="swatch-color" style="background:#22d3ee"></div><div class="swatch-info"><div class="swatch-name">default</div><div class="swatch-hex">#22d3ee</div></div></div>
709
+ <div class="swatch"><div class="swatch-color" style="background:#67e8f9"></div><div class="swatch-info"><div class="swatch-name">bright</div><div class="swatch-hex">#67e8f9</div></div></div>
710
+ </div>
711
+
712
+ <div class="swatch-group-label">// Text</div>
713
+ <div class="swatch-grid">
714
+ <div class="swatch"><div class="swatch-color" style="background:#e2e8f0"></div><div class="swatch-info"><div class="swatch-name">primary</div><div class="swatch-hex">#e2e8f0</div></div></div>
715
+ <div class="swatch"><div class="swatch-color" style="background:#94a3b8"></div><div class="swatch-info"><div class="swatch-name">secondary</div><div class="swatch-hex">#94a3b8</div></div></div>
716
+ <div class="swatch"><div class="swatch-color" style="background:#64748b"></div><div class="swatch-info"><div class="swatch-name">muted</div><div class="swatch-hex">#64748b</div></div></div>
717
+ </div>
718
+
719
+ <div class="swatch-group-label">// Borders</div>
720
+ <div class="swatch-grid">
721
+ <div class="swatch"><div class="swatch-color" style="background:#1e2340"></div><div class="swatch-info"><div class="swatch-name">subtle</div><div class="swatch-hex">#1e2340</div></div></div>
722
+ <div class="swatch"><div class="swatch-color" style="background:#2d3560"></div><div class="swatch-info"><div class="swatch-name">default</div><div class="swatch-hex">#2d3560</div></div></div>
723
+ <div class="swatch"><div class="swatch-color" style="background:#3d4680"></div><div class="swatch-info"><div class="swatch-name">strong</div><div class="swatch-hex">#3d4680</div></div></div>
724
+ <div class="swatch"><div class="swatch-color" style="background:#a78bfa"></div><div class="swatch-info"><div class="swatch-name">accent</div><div class="swatch-hex">#a78bfa</div></div></div>
725
+ </div>
726
+
727
+ <div class="swatch-group-label">// States</div>
728
+ <div class="swatch-grid">
729
+ <div class="swatch"><div class="swatch-color" style="background:#a78bfa"></div><div class="swatch-info"><div class="swatch-name">idle</div><div class="swatch-hex">#a78bfa</div></div></div>
730
+ <div class="swatch"><div class="swatch-color" style="background:#8b5cf6"></div><div class="swatch-info"><div class="swatch-name">active</div><div class="swatch-hex">#8b5cf6</div></div></div>
731
+ <div class="swatch"><div class="swatch-color" style="background:#ef4444"></div><div class="swatch-info"><div class="swatch-name">recording</div><div class="swatch-hex">#ef4444</div></div></div>
732
+ <div class="swatch"><div class="swatch-color" style="background:#f59e0b"></div><div class="swatch-info"><div class="swatch-name">processing</div><div class="swatch-hex">#f59e0b</div></div></div>
733
+ <div class="swatch"><div class="swatch-color" style="background:#10b981"></div><div class="swatch-info"><div class="swatch-name">success</div><div class="swatch-hex">#10b981</div></div></div>
734
+ <div class="swatch"><div class="swatch-color" style="background:#ef4444"></div><div class="swatch-info"><div class="swatch-name">error</div><div class="swatch-hex">#ef4444</div></div></div>
735
+ <div class="swatch"><div class="swatch-color" style="background:#f59e0b"></div><div class="swatch-info"><div class="swatch-name">warning</div><div class="swatch-hex">#f59e0b</div></div></div>
736
+ </div>
737
+ </section>
738
+
739
+ <!-- ═══════════════════════════════════════════════════════════════════
740
+ 3. TYPOGRAPHY
741
+ ═══════════════════════════════════════════════════════════════════ -->
742
+ <section class="section" id="typography">
743
+ <div class="section-label">System Matrix</div>
744
+ <div class="section-title">Typography Protocol</div>
745
+ <div class="divider"></div>
746
+ <div class="section-desc">
747
+ Dual-family type system. Monospace for code, labels, and system readouts.
748
+ Sans-serif for body copy and extended reading.
749
+ </div>
750
+
751
+ <div class="type-font-section">
752
+ <div class="type-font-label">Monospace — JetBrains Mono</div>
753
+ <div class="type-sample"><div class="type-meta">3xl / 28px</div><div class="type-preview mono" style="font-size:28px; color:#a78bfa">SYSTEM ONLINE</div></div>
754
+ <div class="type-sample"><div class="type-meta">2xl / 22px</div><div class="type-preview mono" style="font-size:22px">Neural Interface v2.4</div></div>
755
+ <div class="type-sample"><div class="type-meta">xl / 18px</div><div class="type-preview mono" style="font-size:18px">Data Stream Active</div></div>
756
+ <div class="type-sample"><div class="type-meta">lg / 15px</div><div class="type-preview mono" style="font-size:15px">Protocol Layer Engaged</div></div>
757
+ <div class="type-sample"><div class="type-meta">md / 13px</div><div class="type-preview mono" style="font-size:13px">const matrix = await loadSystem();</div></div>
758
+ <div class="type-sample"><div class="type-meta">sm / 11px</div><div class="type-preview mono" style="font-size:11px">console.log("Midnight Violet initialized");</div></div>
759
+ <div class="type-sample"><div class="type-meta">xs / 9px</div><div class="type-preview mono" style="font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#64748b">SYSTEM TIMESTAMP — 2026.03.10 // BUILD 4.2.7</div></div>
760
+ </div>
761
+
762
+ <div class="type-font-section">
763
+ <div class="type-font-label">Sans-Serif — Inter</div>
764
+ <div class="type-sample"><div class="type-meta">3xl / 28px</div><div class="type-preview" style="font-size:28px; font-weight:600">Design System</div></div>
765
+ <div class="type-sample"><div class="type-meta">2xl / 22px</div><div class="type-preview" style="font-size:22px; font-weight:500">Component Library</div></div>
766
+ <div class="type-sample"><div class="type-meta">xl / 18px</div><div class="type-preview" style="font-size:18px">Midnight Violet delivers a cyberpunk aesthetic</div></div>
767
+ <div class="type-sample"><div class="type-meta">lg / 15px</div><div class="type-preview" style="font-size:15px">Dual-accent system with violet primary and cyan secondary.</div></div>
768
+ <div class="type-sample"><div class="type-meta">md / 13px</div><div class="type-preview" style="font-size:13px">Body text renders in the sans-serif stack for extended readability across all data panels.</div></div>
769
+ <div class="type-sample"><div class="type-meta">sm / 11px</div><div class="type-preview" style="font-size:11px; color:#94a3b8">Secondary text for descriptions, hints, and meta information.</div></div>
770
+ <div class="type-sample"><div class="type-meta">xs / 9px</div><div class="type-preview" style="font-size:9px; color:#64748b">Muted caption text for timestamps, footnotes, and tertiary information.</div></div>
771
+ </div>
772
+
773
+ <div class="spacing-label">// Letter Spacing Scale</div>
774
+ <div class="ls-row"><div class="ls-row-label">tight / 0</div><div class="ls-row-preview" style="letter-spacing:0">Midnight Violet</div></div>
775
+ <div class="ls-row"><div class="ls-row-label">normal / 0.02em</div><div class="ls-row-preview" style="letter-spacing:.02em">Midnight Violet</div></div>
776
+ <div class="ls-row"><div class="ls-row-label">wide / 0.08em</div><div class="ls-row-preview" style="letter-spacing:.08em">Midnight Violet</div></div>
777
+ <div class="ls-row"><div class="ls-row-label">wider / 0.15em</div><div class="ls-row-preview" style="letter-spacing:.15em">Midnight Violet</div></div>
778
+ </section>
779
+
780
+ <!-- ═══════════════════════════════════════════════════════════════════
781
+ 4. SPACING SCALE
782
+ ═══════════════════════════════════════════════════════════════════ -->
783
+ <section class="section" id="spacing">
784
+ <div class="section-label">Protocol Layer</div>
785
+ <div class="section-title">Spacing Grid</div>
786
+ <div class="divider"></div>
787
+ <div class="section-desc">
788
+ Base-4 spatial system governing all internal and external measurements.
789
+ Consistent rhythm across every interface element.
790
+ </div>
791
+
792
+ <div class="spacing-row"><div class="spacing-token">2px</div><div class="spacing-bar" style="width:2px"></div><div class="spacing-value">2</div></div>
793
+ <div class="spacing-row"><div class="spacing-token">4px</div><div class="spacing-bar" style="width:4px"></div><div class="spacing-value">4</div></div>
794
+ <div class="spacing-row"><div class="spacing-token">8px</div><div class="spacing-bar" style="width:8px"></div><div class="spacing-value">8</div></div>
795
+ <div class="spacing-row"><div class="spacing-token">12px</div><div class="spacing-bar" style="width:12px"></div><div class="spacing-value">12</div></div>
796
+ <div class="spacing-row"><div class="spacing-token">16px</div><div class="spacing-bar" style="width:16px"></div><div class="spacing-value">16</div></div>
797
+ <div class="spacing-row"><div class="spacing-token">20px</div><div class="spacing-bar" style="width:20px"></div><div class="spacing-value">20</div></div>
798
+ <div class="spacing-row"><div class="spacing-token">24px</div><div class="spacing-bar" style="width:24px"></div><div class="spacing-value">24</div></div>
799
+ <div class="spacing-row"><div class="spacing-token">32px</div><div class="spacing-bar" style="width:32px"></div><div class="spacing-value">32</div></div>
800
+ <div class="spacing-row"><div class="spacing-token">40px</div><div class="spacing-bar" style="width:40px"></div><div class="spacing-value">40</div></div>
801
+ <div class="spacing-row"><div class="spacing-token">48px</div><div class="spacing-bar" style="width:48px"></div><div class="spacing-value">48</div></div>
802
+ <div class="spacing-row"><div class="spacing-token">64px</div><div class="spacing-bar" style="width:64px"></div><div class="spacing-value">64</div></div>
803
+ <div class="spacing-row"><div class="spacing-token">96px</div><div class="spacing-bar" style="width:96px"></div><div class="spacing-value">96</div></div>
804
+ </section>
805
+
806
+ <!-- ═══════════════════════════════════════════════════════════════════
807
+ 5. BUTTONS
808
+ ═══════════════════════════════════════════════════════════════════ -->
809
+ <section class="section" id="buttons">
810
+ <div class="section-label">Data Stream Components</div>
811
+ <div class="section-title">Action Triggers</div>
812
+ <div class="divider"></div>
813
+ <div class="section-desc">
814
+ Five button variants for distinct interaction hierarchies.
815
+ Beveled clip-paths with neon glow feedback on hover.
816
+ </div>
817
+
818
+ <div class="btn-row">
819
+ <div class="btn-col"><button class="btn btn-primary">Execute</button><div class="btn-label">primary</div></div>
820
+ <div class="btn-col"><button class="btn btn-secondary">Analyze</button><div class="btn-label">secondary</div></div>
821
+ <div class="btn-col"><button class="btn btn-outline">Configure</button><div class="btn-label">outline</div></div>
822
+ <div class="btn-col"><button class="btn btn-ghost">Dismiss</button><div class="btn-label">ghost</div></div>
823
+ <div class="btn-col"><button class="btn btn-danger">Terminate</button><div class="btn-label">danger</div></div>
824
+ </div>
825
+ </section>
826
+
827
+ <!-- ═══════════════════════════════════════════════════════════════════
828
+ 6. FORM INPUTS
829
+ ═══════════════════════════════════════════════════════════════════ -->
830
+ <section class="section" id="forms">
831
+ <div class="section-label">Protocol Layer</div>
832
+ <div class="section-title">Input Channels</div>
833
+ <div class="divider"></div>
834
+ <div class="section-desc">
835
+ Data entry points with violet accent focus states and subtle neon glow.
836
+ Softened bevels keep inputs readable while maintaining the angular language.
837
+ </div>
838
+
839
+ <div class="form-grid">
840
+ <div>
841
+ <div class="form-group">
842
+ <label class="form-label">Neural Identifier</label>
843
+ <input class="form-input" type="text" placeholder="Enter node address..." />
844
+ </div>
845
+ <div class="form-group">
846
+ <label class="form-label">Protocol Type</label>
847
+ <select class="form-select">
848
+ <option>Select protocol...</option>
849
+ <option>TCP/VIOLET</option>
850
+ <option>UDP/CYAN</option>
851
+ <option>QUANTUM/HYBRID</option>
852
+ </select>
853
+ </div>
854
+ </div>
855
+ <div>
856
+ <div class="form-group">
857
+ <label class="form-label">Transmission Payload</label>
858
+ <textarea class="form-textarea" placeholder="Enter data stream content..."></textarea>
859
+ </div>
860
+ </div>
861
+ </div>
862
+ </section>
863
+
864
+ <!-- ═══════════════════════════════════════════════════════════════════
865
+ 7. CARDS
866
+ ═══════════════════════════════════════════════════════════════════ -->
867
+ <section class="section" id="cards">
868
+ <div class="section-label">Data Stream Components</div>
869
+ <div class="section-title">Information Panels</div>
870
+ <div class="divider"></div>
871
+ <div class="section-desc">
872
+ Three card variants demonstrating surface hierarchy and accent treatments.
873
+ Corner brackets provide orientation markers.
874
+ </div>
875
+
876
+ <div class="card-grid">
877
+ <div class="card card-violet">
878
+ <div class="card-title">Neural Core</div>
879
+ <div class="card-text">
880
+ Primary processing node with violet border glow. Active state
881
+ indicates real-time data processing across the neural mesh.
882
+ </div>
883
+ <div class="card-tag">Active</div>
884
+ </div>
885
+
886
+ <div class="card card-cyan">
887
+ <div class="card-header-bar"></div>
888
+ <div class="card-title">Data Relay</div>
889
+ <div class="card-text">
890
+ Secondary node with cyan accent header bar. Handles auxiliary
891
+ data streams and inter-module communication protocols.
892
+ </div>
893
+ <div class="card-tag" style="background:rgba(34,211,238,.12); color:#22d3ee">Linked</div>
894
+ </div>
895
+
896
+ <div class="card card-gradient">
897
+ <div class="card-header-area">
898
+ <div class="card-title" style="margin-bottom:0">Quantum Bridge</div>
899
+ </div>
900
+ <div class="card-text">
901
+ Gradient surface panel with subtle violet-to-transparent header
902
+ area. Used for elevated content blocks and featured modules.
903
+ </div>
904
+ <div class="card-tag">Standby</div>
905
+ </div>
906
+ </div>
907
+ </section>
908
+
909
+ <!-- ═══════════════════════════════════════════════════════════════════
910
+ 8. BADGES
911
+ ═══════════════════════════════════════════════════════════════════ -->
912
+ <section class="section" id="badges">
913
+ <div class="section-label">System Matrix</div>
914
+ <div class="section-title">State Badges</div>
915
+ <div class="divider"></div>
916
+ <div class="section-desc">
917
+ Compact state indicators with tinted backgrounds and embedded status
918
+ dots. Violet and cyan tints for system states, warm tones for alerts.
919
+ </div>
920
+
921
+ <div class="badge-row">
922
+ <span class="badge badge-idle"><span class="badge-dot"></span>Idle</span>
923
+ <span class="badge badge-active"><span class="badge-dot"></span>Active</span>
924
+ <span class="badge badge-recording"><span class="badge-dot"></span>Recording</span>
925
+ <span class="badge badge-processing"><span class="badge-dot"></span>Processing</span>
926
+ <span class="badge badge-success"><span class="badge-dot"></span>Success</span>
927
+ <span class="badge badge-error"><span class="badge-dot"></span>Error</span>
928
+ <span class="badge badge-warning"><span class="badge-dot"></span>Warning</span>
929
+ <span class="badge badge-info"><span class="badge-dot"></span>Info</span>
930
+ </div>
931
+ </section>
932
+
933
+ <!-- ═══════════════════════════════════════════════════════════════════
934
+ 9. STATUS INDICATORS
935
+ ═══════════════════════════════════════════════════════════════════ -->
936
+ <section class="section" id="status">
937
+ <div class="section-label">Neural Interface</div>
938
+ <div class="section-title">Status Indicators</div>
939
+ <div class="divider"></div>
940
+ <div class="section-desc">
941
+ Neon-glow status dots with distinct colors per system state.
942
+ Active and recording states include animated pulses.
943
+ </div>
944
+
945
+ <div class="status-grid">
946
+ <div class="status-item"><div class="status-dot status-dot-idle"></div><div class="status-label">Idle</div></div>
947
+ <div class="status-item"><div class="status-dot status-dot-active"></div><div class="status-label">Active</div></div>
948
+ <div class="status-item"><div class="status-dot status-dot-recording"></div><div class="status-label">Recording</div></div>
949
+ <div class="status-item"><div class="status-dot status-dot-processing"></div><div class="status-label">Processing</div></div>
950
+ <div class="status-item"><div class="status-dot status-dot-success"></div><div class="status-label">Success</div></div>
951
+ <div class="status-item"><div class="status-dot status-dot-error"></div><div class="status-label">Error</div></div>
952
+ <div class="status-item"><div class="status-dot status-dot-warning"></div><div class="status-label">Warning</div></div>
953
+ </div>
954
+ </section>
955
+
956
+ <!-- ═══════════════════════════════════════════════════════════════════
957
+ 10. ANIMATIONS
958
+ ═══════════════════════════════════════════════════════════════════ -->
959
+ <section class="section" id="animations">
960
+ <div class="section-label">Protocol Layer</div>
961
+ <div class="section-title">Motion Protocols</div>
962
+ <div class="divider"></div>
963
+ <div class="section-desc">
964
+ Four signature animation patterns that give the interface its living,
965
+ cyberpunk character. Subtle enough for production use, distinct enough
966
+ to establish identity.
967
+ </div>
968
+
969
+ <div class="anim-grid">
970
+ <!-- Neon Flicker -->
971
+ <div class="anim-box">
972
+ <div class="anim-neon-text">NEON</div>
973
+ <div class="anim-label">Neon Flicker</div>
974
+ <div class="anim-desc">Subtle opacity variation on glowing elements</div>
975
+ </div>
976
+
977
+ <!-- Glow Pulse -->
978
+ <div class="anim-box">
979
+ <div class="anim-glow-orb"></div>
980
+ <div class="anim-label">Glow Pulse</div>
981
+ <div class="anim-desc">Violet box-shadow breathing for active states</div>
982
+ </div>
983
+
984
+ <!-- Data Stream -->
985
+ <div class="anim-box" style="min-height:140px">
986
+ <div class="anim-stream-container">
987
+ <div class="anim-stream-col">0<br>1<br>0<br>1<br>1<br>0<br>0<br>1<br>0<br>1<br>1<br>0<br>1<br>0<br>0<br>1<br>0<br>1<br>0<br>1<br>1<br>0<br>0<br>1<br>0<br>1<br>1<br>0<br>1<br>0<br>0<br>1</div>
988
+ <div class="anim-stream-col">:<br>.<br>:<br>.<br>:<br>:<br>.<br>:<br>.<br>.<br>:<br>.<br>:<br>:<br>.<br>:<br>:<br>.<br>:<br>.<br>:<br>:<br>.<br>:<br>.<br>.<br>:<br>.<br>:<br>:<br>.<br>:</div>
989
+ <div class="anim-stream-col">a<br>f<br>3<br>c<br>9<br>0<br>b<br>7<br>e<br>2<br>d<br>4<br>8<br>1<br>f<br>6<br>a<br>f<br>3<br>c<br>9<br>0<br>b<br>7<br>e<br>2<br>d<br>4<br>8<br>1<br>f<br>6</div>
990
+ <div class="anim-stream-col">|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|</div>
991
+ </div>
992
+ <div class="anim-label">Data Stream</div>
993
+ <div class="anim-desc">Scrolling vertical characters for background activity</div>
994
+ </div>
995
+
996
+ <!-- Scanning Line -->
997
+ <div class="anim-box">
998
+ <div class="anim-scan-line"></div>
999
+ <div class="anim-label">Scanning Line</div>
1000
+ <div class="anim-desc">Horizontal violet beam sweeping across surfaces</div>
1001
+ </div>
1002
+ </div>
1003
+ </section>
1004
+
1005
+ <!-- ═══════════════════════════════════════════════════════════════════
1006
+ 11. SAMPLE APP HEADER
1007
+ ═══════════════════════════════════════════════════════════════════ -->
1008
+ <section class="section" id="app-header">
1009
+ <div class="section-label">Neural Interface</div>
1010
+ <div class="section-title">App Header Bar</div>
1011
+ <div class="divider"></div>
1012
+ <div class="section-desc">
1013
+ Standard 38px application header with violet accent identity,
1014
+ cyan status indicator, and monospace type hierarchy.
1015
+ </div>
1016
+
1017
+ <div class="app-header-demo">
1018
+ <div class="app-header-name">DEVGLIDE</div>
1019
+ <div class="app-header-sep"></div>
1020
+ <div class="app-header-subtitle">Neural Matrix v4.2</div>
1021
+ <div class="app-header-right">
1022
+ <div class="app-header-status-label">Connected</div>
1023
+ <div class="app-header-status"></div>
1024
+ </div>
1025
+ </div>
1026
+
1027
+ <div style="height:12px"></div>
1028
+
1029
+ <div class="app-header-demo" style="background:linear-gradient(90deg, #141829 0%, #1a1040 100%)">
1030
+ <div class="app-header-name" style="color:#22d3ee">CODER</div>
1031
+ <div class="app-header-sep"></div>
1032
+ <div class="app-header-subtitle">Session Active</div>
1033
+ <div class="app-header-right">
1034
+ <div class="app-header-status-label" style="color:#10b981">Synced</div>
1035
+ <div class="app-header-status" style="background:#10b981; box-shadow:0 0 4px rgba(16,185,129,.5), 0 0 8px rgba(16,185,129,.2)"></div>
1036
+ </div>
1037
+ </div>
1038
+ </section>
1039
+
1040
+ <!-- ═══════════════════════════════════════════════════════════════════
1041
+ FOOTER
1042
+ ═══════════════════════════════════════════════════════════════════ -->
1043
+ <footer class="site-footer">
1044
+ <p>Devglide Design System // Proposition C: Midnight Violet // 2026</p>
1045
+ </footer>
1046
+
1047
+ </div>
1048
+ </body>
1049
+ </html>