overmind-mcp 2.3.4 → 2.4.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 (154) hide show
  1. package/README.md +80 -107
  2. package/assets/overmind_mcp_pro_banner_v3.png +0 -0
  3. package/dist/bin/cli.js +7 -438
  4. package/dist/bin/cli.js.map +1 -1
  5. package/dist/index.d.ts +2 -2
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +2 -3
  8. package/dist/index.js.map +1 -1
  9. package/dist/lib/config.d.ts +1 -31
  10. package/dist/lib/config.d.ts.map +1 -1
  11. package/dist/lib/config.js +27 -19
  12. package/dist/lib/config.js.map +1 -1
  13. package/dist/lib/sessions.d.ts +2 -3
  14. package/dist/lib/sessions.d.ts.map +1 -1
  15. package/dist/lib/sessions.js +25 -94
  16. package/dist/lib/sessions.js.map +1 -1
  17. package/dist/memory/MemoryFactory.d.ts +1 -15
  18. package/dist/memory/MemoryFactory.d.ts.map +1 -1
  19. package/dist/memory/MemoryFactory.js +3 -53
  20. package/dist/memory/MemoryFactory.js.map +1 -1
  21. package/dist/memory/PostgresMemoryProvider.d.ts +0 -7
  22. package/dist/memory/PostgresMemoryProvider.d.ts.map +1 -1
  23. package/dist/memory/PostgresMemoryProvider.js +105 -180
  24. package/dist/memory/PostgresMemoryProvider.js.map +1 -1
  25. package/dist/server.d.ts +0 -41
  26. package/dist/server.d.ts.map +1 -1
  27. package/dist/server.js +26 -152
  28. package/dist/server.js.map +1 -1
  29. package/dist/services/AgentManager.d.ts.map +1 -1
  30. package/dist/services/AgentManager.js +11 -67
  31. package/dist/services/AgentManager.js.map +1 -1
  32. package/dist/services/ClaudeRunner.d.ts +0 -8
  33. package/dist/services/ClaudeRunner.d.ts.map +1 -1
  34. package/dist/services/ClaudeRunner.js +213 -514
  35. package/dist/services/ClaudeRunner.js.map +1 -1
  36. package/dist/services/ClineRunner.d.ts +0 -7
  37. package/dist/services/ClineRunner.d.ts.map +1 -1
  38. package/dist/services/ClineRunner.js +11 -80
  39. package/dist/services/ClineRunner.js.map +1 -1
  40. package/dist/services/GeminiRunner.d.ts +0 -6
  41. package/dist/services/GeminiRunner.d.ts.map +1 -1
  42. package/dist/services/GeminiRunner.js +58 -285
  43. package/dist/services/GeminiRunner.js.map +1 -1
  44. package/dist/services/KiloRunner.d.ts +0 -12
  45. package/dist/services/KiloRunner.d.ts.map +1 -1
  46. package/dist/services/KiloRunner.js +57 -441
  47. package/dist/services/KiloRunner.js.map +1 -1
  48. package/dist/services/OpenClawRunner.d.ts +0 -7
  49. package/dist/services/OpenClawRunner.d.ts.map +1 -1
  50. package/dist/services/OpenClawRunner.js +11 -79
  51. package/dist/services/OpenClawRunner.js.map +1 -1
  52. package/dist/services/OpenCodeRunner.d.ts +0 -7
  53. package/dist/services/OpenCodeRunner.d.ts.map +1 -1
  54. package/dist/services/OpenCodeRunner.js +11 -79
  55. package/dist/services/OpenCodeRunner.js.map +1 -1
  56. package/dist/services/QwenRunner.d.ts +19 -0
  57. package/dist/services/QwenRunner.d.ts.map +1 -0
  58. package/dist/services/QwenRunner.js +87 -0
  59. package/dist/services/QwenRunner.js.map +1 -0
  60. package/dist/services/TraeRunner.d.ts +19 -0
  61. package/dist/services/TraeRunner.d.ts.map +1 -0
  62. package/dist/services/TraeRunner.js +88 -0
  63. package/dist/services/TraeRunner.js.map +1 -0
  64. package/dist/tools/config_example.d.ts +4 -7
  65. package/dist/tools/config_example.d.ts.map +1 -1
  66. package/dist/tools/config_example.js +86 -191
  67. package/dist/tools/config_example.js.map +1 -1
  68. package/dist/tools/create_agent.d.ts +9 -15
  69. package/dist/tools/create_agent.d.ts.map +1 -1
  70. package/dist/tools/create_agent.js +9 -8
  71. package/dist/tools/create_agent.js.map +1 -1
  72. package/dist/tools/get_agent_configs.d.ts +4 -10
  73. package/dist/tools/get_agent_configs.d.ts.map +1 -1
  74. package/dist/tools/get_agent_configs.js.map +1 -1
  75. package/dist/tools/manage_agents.d.ts +18 -36
  76. package/dist/tools/manage_agents.d.ts.map +1 -1
  77. package/dist/tools/manage_agents.js +2 -2
  78. package/dist/tools/manage_agents.js.map +1 -1
  79. package/dist/tools/manage_prompts.d.ts +8 -13
  80. package/dist/tools/manage_prompts.d.ts.map +1 -1
  81. package/dist/tools/manage_prompts.js.map +1 -1
  82. package/dist/tools/memory_runs.d.ts +4 -3
  83. package/dist/tools/memory_runs.d.ts.map +1 -1
  84. package/dist/tools/memory_runs.js.map +1 -1
  85. package/dist/tools/memory_search.d.ts +4 -3
  86. package/dist/tools/memory_search.d.ts.map +1 -1
  87. package/dist/tools/memory_search.js.map +1 -1
  88. package/dist/tools/memory_store.d.ts +5 -11
  89. package/dist/tools/memory_store.d.ts.map +1 -1
  90. package/dist/tools/memory_store.js.map +1 -1
  91. package/dist/tools/run_agent.d.ts +16 -15
  92. package/dist/tools/run_agent.d.ts.map +1 -1
  93. package/dist/tools/run_agent.js +160 -128
  94. package/dist/tools/run_agent.js.map +1 -1
  95. package/dist/tools/run_claude.d.ts +3 -8
  96. package/dist/tools/run_claude.d.ts.map +1 -1
  97. package/dist/tools/run_claude.js +41 -59
  98. package/dist/tools/run_claude.js.map +1 -1
  99. package/dist/tools/run_cline.d.ts +4 -13
  100. package/dist/tools/run_cline.d.ts.map +1 -1
  101. package/dist/tools/run_cline.js +43 -55
  102. package/dist/tools/run_cline.js.map +1 -1
  103. package/dist/tools/run_gemini.d.ts +4 -13
  104. package/dist/tools/run_gemini.d.ts.map +1 -1
  105. package/dist/tools/run_gemini.js +33 -53
  106. package/dist/tools/run_gemini.js.map +1 -1
  107. package/dist/tools/run_kilo.d.ts +7 -17
  108. package/dist/tools/run_kilo.d.ts.map +1 -1
  109. package/dist/tools/run_kilo.js +41 -68
  110. package/dist/tools/run_kilo.js.map +1 -1
  111. package/dist/tools/run_openclaw.d.ts +4 -13
  112. package/dist/tools/run_openclaw.d.ts.map +1 -1
  113. package/dist/tools/run_openclaw.js +44 -52
  114. package/dist/tools/run_openclaw.js.map +1 -1
  115. package/dist/tools/run_opencode.d.ts +4 -13
  116. package/dist/tools/run_opencode.d.ts.map +1 -1
  117. package/dist/tools/run_opencode.js +39 -52
  118. package/dist/tools/run_opencode.js.map +1 -1
  119. package/dist/tools/run_qwen.d.ts +15 -0
  120. package/dist/tools/run_qwen.d.ts.map +1 -0
  121. package/dist/tools/run_qwen.js +61 -0
  122. package/dist/tools/run_qwen.js.map +1 -0
  123. package/dist/tools/run_trae.d.ts +15 -0
  124. package/dist/tools/run_trae.d.ts.map +1 -0
  125. package/dist/tools/run_trae.js +66 -0
  126. package/dist/tools/run_trae.js.map +1 -0
  127. package/dist/tools/shell_execute.d.ts +10 -0
  128. package/dist/tools/shell_execute.d.ts.map +1 -0
  129. package/dist/tools/shell_execute.js +24 -0
  130. package/dist/tools/shell_execute.js.map +1 -0
  131. package/package.json +25 -55
  132. package/.mcp.json.example +0 -21
  133. package/assets/overmind.png +0 -0
  134. package/bin/.gitkeep +0 -0
  135. package/bin/README.md +0 -34
  136. package/bin/install-overmind-unix.sh +0 -412
  137. package/bin/install-overmind-windows.bat +0 -407
  138. package/docs/README.md +0 -128
  139. package/docs/agent_control.md +0 -656
  140. package/docs/index.html +0 -493
  141. package/docs/library.html +0 -239
  142. package/docs/prompt.html +0 -1212
  143. package/docs/script.js +0 -428
  144. package/docs/styles.css +0 -2816
  145. package/scripts/auto-changelog.mjs +0 -132
  146. package/scripts/auto-install.mjs +0 -322
  147. package/scripts/install-dependencies.mjs +0 -462
  148. package/scripts/postgres-manager.mjs +0 -219
  149. package/scripts/postinstall.mjs +0 -538
  150. package/scripts/setup-overmind-db.mjs +0 -199
  151. package/scripts/setup-windows.js +0 -266
  152. package/scripts/setup.mjs +0 -397
  153. package/scripts/test-installation.mjs +0 -158
  154. package/scripts/uninstall.mjs +0 -238
package/docs/styles.css DELETED
@@ -1,2816 +0,0 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');
2
-
3
- :root {
4
- --neon-cyan: #00fff5;
5
- --neon-blue: #3b82f6;
6
- --neon-silver: #e2e8f0;
7
- --dark-bg: #060609;
8
- --dark-card: rgba(15, 15, 25, 0.9);
9
- --text-primary: #ffffff;
10
- --text-secondary: #94a3b8;
11
- --gradient-cyber: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue), var(--neon-silver));
12
-
13
- /* SVG Textures */
14
- --noise-texture: url('#noiseFilter');
15
- --circuit-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M10 10 L90 10 L90 90 L10 90 Z' fill='none' stroke='rgba(0, 255, 245, 0.05)' stroke-width='0.5'/%3E%3Cpath d='M0 50 L10 50 M90 50 L100 50 M50 0 L50 10 M50 90 L50 100' stroke='rgba(0, 255, 245, 0.1)' stroke-width='1'/%3E%3Ccircle cx='10' cy='10' r='1' fill='rgba(0, 255, 245, 0.2)'/%3E%3Ccircle cx='90' cy='10' r='1' fill='rgba(0, 255, 245, 0.2)'/%3E%3Ccircle cx='90' cy='90' r='1' fill='rgba(0, 255, 245, 0.2)'/%3E%3Ccircle cx='10' cy='90' r='1' fill='rgba(0, 255, 245, 0.2)'/%3E%3C/svg%3E");
16
- }
17
-
18
- * {
19
- margin: 0;
20
- padding: 0;
21
- box-sizing: border-box;
22
- }
23
-
24
- body {
25
- font-family: 'Rajdhani', sans-serif;
26
- background: var(--dark-bg);
27
- color: var(--text-primary);
28
- line-height: 1.8;
29
- overflow-x: hidden;
30
- position: relative;
31
- }
32
-
33
- /* Matrix Background */
34
- .matrix-bg {
35
- position: fixed;
36
- top: 0;
37
- left: 0;
38
- width: 100%;
39
- height: 100%;
40
- z-index: 0;
41
- opacity: 0.15;
42
- pointer-events: none;
43
- }
44
-
45
- .grid-overlay {
46
- position: fixed;
47
- top: 0;
48
- left: 0;
49
- width: 100%;
50
- height: 100%;
51
- background-image:
52
- linear-gradient(rgba(0, 255, 245, 0.03) 2px, transparent 2px),
53
- linear-gradient(90deg, rgba(0, 255, 245, 0.03) 2px, transparent 2px);
54
- background-size: 60px 60px;
55
- z-index: 1;
56
- pointer-events: none;
57
- animation: gridMove 30s linear infinite;
58
- transform: perspective(1000px) rotateX(45deg);
59
- transform-origin: top;
60
- mask-image: radial-gradient(circle at center, black, transparent 80%);
61
- }
62
-
63
- @keyframes gridMove {
64
- 0% {
65
- background-position: 0 0;
66
- }
67
- 100% {
68
- background-position: 0 50px;
69
- }
70
- }
71
-
72
- /* Glowing Orbs */
73
- .orb {
74
- position: fixed;
75
- border-radius: 50%;
76
- filter: blur(80px);
77
- opacity: 0.4;
78
- z-index: 2;
79
- pointer-events: none;
80
- }
81
-
82
- .orb-1 {
83
- width: 600px;
84
- height: 600px;
85
- background: var(--neon-blue);
86
- top: -200px;
87
- left: -200px;
88
- animation: float 20s ease-in-out infinite;
89
- }
90
-
91
- .orb-2 {
92
- width: 500px;
93
- height: 500px;
94
- background: var(--neon-cyan);
95
- bottom: -150px;
96
- right: -150px;
97
- animation: float 25s ease-in-out infinite reverse;
98
- }
99
-
100
- .orb-3 {
101
- width: 400px;
102
- height: 400px;
103
- background: var(--neon-blue);
104
- top: 50%;
105
- left: 50%;
106
- transform: translate(-50%, -50%);
107
- animation: float 30s ease-in-out infinite;
108
- animation-delay: -10s;
109
- }
110
-
111
- @keyframes float {
112
- 0%,
113
- 100% {
114
- transform: translate(0, 0) scale(1);
115
- }
116
- 25% {
117
- transform: translate(30px, -30px) scale(1.1);
118
- }
119
- 50% {
120
- transform: translate(-20px, 20px) scale(0.9);
121
- }
122
- 75% {
123
- transform: translate(20px, 30px) scale(1.05);
124
- }
125
- }
126
-
127
- /* Main Content */
128
- .main-content {
129
- position: relative;
130
- z-index: 10;
131
- }
132
-
133
- .container {
134
- max-width: 1400px;
135
- margin: 0 auto;
136
- padding: 0 30px;
137
- }
138
-
139
- /* Header */
140
- header {
141
- position: relative;
142
- width: 100%;
143
- z-index: 1000;
144
- background: rgba(10, 10, 15, 0.8);
145
- backdrop-filter: blur(20px);
146
- border-bottom: 1px solid rgba(0, 255, 245, 0.1);
147
- transition: all 0.3s ease;
148
- }
149
-
150
- nav {
151
- display: flex;
152
- justify-content: space-between;
153
- align-items: center;
154
- padding: 20px 0;
155
- }
156
-
157
- .logo {
158
- display: flex;
159
- align-items: center;
160
- gap: 12px;
161
- font-family: 'Orbitron', sans-serif;
162
- font-size: 1.8rem;
163
- font-weight: 900;
164
- position: relative;
165
- }
166
-
167
- .logo i {
168
- font-size: 2rem;
169
- background: var(--gradient-cyber);
170
- -webkit-background-clip: text;
171
- -webkit-text-fill-color: transparent;
172
- background-clip: text;
173
- animation: pulse 2s ease-in-out infinite;
174
- }
175
-
176
- @keyframes pulse {
177
- 0%,
178
- 100% {
179
- filter: drop-shadow(0 0 10px var(--neon-cyan));
180
- }
181
- 50% {
182
- filter: drop-shadow(0 0 20px var(--neon-blue));
183
- }
184
- }
185
-
186
- .logo-text {
187
- background: var(--gradient-cyber);
188
- -webkit-background-clip: text;
189
- -webkit-text-fill-color: transparent;
190
- background-clip: text;
191
- position: relative;
192
- }
193
-
194
- .logo-glitch {
195
- position: absolute;
196
- top: 0;
197
- left: 0;
198
- width: 100%;
199
- height: 100%;
200
- background: var(--gradient-cyber);
201
- -webkit-background-clip: text;
202
- -webkit-text-fill-color: transparent;
203
- background-clip: text;
204
- opacity: 0;
205
- animation: glitch 3s infinite;
206
- }
207
-
208
- @keyframes glitch {
209
- 0%,
210
- 90%,
211
- 100% {
212
- opacity: 0;
213
- transform: translate(0);
214
- }
215
- 91% {
216
- opacity: 0.8;
217
- transform: translate(-2px, 2px);
218
- }
219
- 92% {
220
- opacity: 0.8;
221
- transform: translate(2px, -2px);
222
- }
223
- 93% {
224
- opacity: 0;
225
- transform: translate(0);
226
- }
227
- }
228
-
229
- .nav-links {
230
- display: flex;
231
- gap: 40px;
232
- list-style: none;
233
- }
234
-
235
- .nav-link {
236
- color: var(--text-secondary);
237
- text-decoration: none;
238
- font-weight: 600;
239
- font-size: 1.1rem;
240
- position: relative;
241
- transition: color 0.3s ease;
242
- text-transform: uppercase;
243
- letter-spacing: 2px;
244
- }
245
-
246
- .nav-link::before {
247
- content: '';
248
- position: absolute;
249
- bottom: -5px;
250
- left: 0;
251
- width: 0;
252
- height: 2px;
253
- background: var(--gradient-cyber);
254
- transition: width 0.3s ease;
255
- }
256
-
257
- .nav-link:hover {
258
- color: var(--neon-cyan);
259
- text-shadow: 0 0 20px var(--neon-cyan);
260
- }
261
-
262
- .nav-link-highlight {
263
- color: var(--neon-pink);
264
- font-weight: 700;
265
- }
266
-
267
- .nav-link-highlight:hover {
268
- color: var(--neon-pink);
269
- text-shadow: 0 0 20px var(--neon-pink);
270
- }
271
-
272
- .nav-link-highlight i {
273
- margin-right: 5px;
274
- }
275
-
276
- .nav-link:hover::before {
277
- width: 100%;
278
- }
279
-
280
- .mobile-toggle {
281
- display: none;
282
- flex-direction: column;
283
- gap: 6px;
284
- cursor: pointer;
285
- }
286
-
287
- .mobile-toggle span {
288
- width: 30px;
289
- height: 3px;
290
- background: var(--neon-cyan);
291
- transition: all 0.3s ease;
292
- box-shadow: 0 0 10px var(--neon-cyan);
293
- }
294
-
295
- /* Professional SVG Decorations */
296
- .feature-card::before,
297
- .hero-terminal::before,
298
- .code-container::before {
299
- content: '';
300
- position: absolute;
301
- top: 0;
302
- left: 0;
303
- width: 100%;
304
- height: 100%;
305
- filter: var(--noise-texture);
306
- pointer-events: none;
307
- z-index: -1;
308
- opacity: 0.4;
309
- }
310
-
311
- .feature-card {
312
- background-image: var(--circuit-bg);
313
- background-position: center;
314
- border: 1px solid rgba(0, 255, 245, 0.15);
315
- box-shadow:
316
- 0 10px 30px rgba(0, 0, 0, 0.3),
317
- inset 0 0 20px rgba(0, 255, 245, 0.05);
318
- backdrop-filter: blur(10px) var(--noise-texture);
319
- }
320
-
321
- .feature-card:hover {
322
- border-color: var(--neon-cyan);
323
- box-shadow: 0 0 30px rgba(0, 255, 245, 0.2);
324
- transform: translateY(-10px) scale(1.02);
325
- }
326
-
327
- /* Scanner Effect (SVG Gradient Animation) */
328
- .feature-card::after,
329
- .hero-terminal::after {
330
- content: '';
331
- position: absolute;
332
- top: -100%;
333
- left: 0;
334
- width: 100%;
335
- height: 300%;
336
- background: linear-gradient(
337
- to bottom,
338
- transparent 0%,
339
- rgba(0, 255, 245, 0.03) 45%,
340
- rgba(0, 255, 245, 0.15) 50%,
341
- rgba(0, 255, 245, 0.03) 55%,
342
- transparent 100%
343
- );
344
- transition: 0s;
345
- pointer-events: none;
346
- z-index: 2;
347
- opacity: 0;
348
- }
349
-
350
- .feature-card:hover::after,
351
- .hero-terminal:hover::after {
352
- opacity: 1;
353
- top: 100%;
354
- transition: 1.5s cubic-bezier(0.19, 1, 0.22, 1);
355
- }
356
-
357
- /* Animated SVG Pulse Border */
358
- .elite-btn::after {
359
- content: '';
360
- position: absolute;
361
- top: 0;
362
- left: 0;
363
- right: 0;
364
- bottom: 0;
365
- border: 2px solid transparent;
366
- background:
367
- linear-gradient(var(--dark-bg), var(--dark-bg)) padding-box,
368
- var(--gradient-cyber) border-box;
369
- mask:
370
- linear-gradient(#fff 0 0) content-box,
371
- linear-gradient(#fff 0 0);
372
- mask-composite: exclude;
373
- opacity: 0.5;
374
- transition: 0.3s;
375
- }
376
-
377
- .btn:hover::after {
378
- opacity: 1;
379
- animation: borderRotate 2s linear infinite;
380
- }
381
-
382
- @keyframes borderRotate {
383
- 0% {
384
- filter: hue-rotate(0deg);
385
- }
386
- 100% {
387
- filter: hue-rotate(360deg);
388
- }
389
- }
390
-
391
- /* Hero Section */
392
- .hero {
393
- min-height: 100vh;
394
- display: flex;
395
- align-items: center;
396
- padding: 80px 0 100px;
397
- position: relative;
398
- }
399
-
400
- .hero-small {
401
- min-height: 40vh;
402
- padding: 40px 0 60px;
403
- }
404
-
405
- .hero .container {
406
- display: grid;
407
- grid-template-columns: 1fr 1fr;
408
- gap: 40px;
409
- align-items: center;
410
- }
411
-
412
- @media (max-width: 1024px) {
413
- .hero .container {
414
- grid-template-columns: 1fr;
415
- gap: 60px;
416
- }
417
- }
418
-
419
- .hero-content {
420
- animation: fadeInUp 1s ease;
421
- }
422
-
423
- @keyframes fadeInUp {
424
- from {
425
- opacity: 0;
426
- transform: translateY(50px);
427
- }
428
- to {
429
- opacity: 1;
430
- transform: translateY(0);
431
- }
432
- }
433
-
434
- .hero-badge {
435
- display: inline-flex;
436
- align-items: center;
437
- gap: 10px;
438
- padding: 10px 20px;
439
- background: rgba(0, 255, 245, 0.1);
440
- border: 1px solid var(--neon-cyan);
441
- border-radius: 50px;
442
- margin-bottom: 30px;
443
- font-weight: 600;
444
- text-transform: uppercase;
445
- letter-spacing: 2px;
446
- box-shadow: 0 0 20px rgba(0, 255, 245, 0.3);
447
- animation: badgePulse 2s ease-in-out infinite;
448
- }
449
-
450
- @keyframes badgePulse {
451
- 0%,
452
- 100% {
453
- box-shadow: 0 0 20px rgba(0, 255, 245, 0.3);
454
- }
455
- 50% {
456
- box-shadow: 0 0 40px rgba(0, 255, 245, 0.6);
457
- }
458
- }
459
-
460
- .hero-badge i {
461
- color: var(--neon-cyan);
462
- animation: spin 3s linear infinite;
463
- }
464
-
465
- @keyframes spin {
466
- from {
467
- transform: rotate(0deg);
468
- }
469
- to {
470
- transform: rotate(360deg);
471
- }
472
- }
473
-
474
- .hero-title {
475
- font-family: 'Orbitron', sans-serif;
476
- font-size: 3.8rem;
477
- font-weight: 900;
478
- line-height: 1.1;
479
- margin-bottom: 25px;
480
- display: flex;
481
- align-items: baseline;
482
- flex-wrap: wrap;
483
- }
484
-
485
- .glitch {
486
- position: relative;
487
- color: var(--text-primary);
488
- display: inline-block;
489
- white-space: nowrap;
490
- }
491
-
492
- .glitch:hover {
493
- filter: url('#cyber-glitch');
494
- }
495
-
496
- .glitch::before,
497
- .glitch::after {
498
- content: attr(data-text);
499
- position: absolute;
500
- top: 0;
501
- left: 0;
502
- width: 100%;
503
- height: 100%;
504
- }
505
-
506
- .glitch::before {
507
- left: 2px;
508
- text-shadow: -2px 0 var(--neon-blue);
509
- clip: rect(24px, 550px, 90px, 0);
510
- animation: glitch-anim 3s infinite linear alternate-reverse;
511
- }
512
-
513
- .glitch::after {
514
- left: -2px;
515
- text-shadow: -2px 0 var(--neon-cyan);
516
- clip: rect(85px, 550px, 140px, 0);
517
- animation: glitch-anim 2s infinite linear alternate-reverse;
518
- }
519
-
520
- @keyframes glitch-anim {
521
- 0% {
522
- clip: rect(61px, 9999px, 83px, 0);
523
- }
524
- 20% {
525
- clip: rect(54px, 9999px, 16px, 0);
526
- }
527
- 40% {
528
- clip: rect(23px, 9999px, 98px, 0);
529
- }
530
- 60% {
531
- clip: rect(76px, 9999px, 5px, 0);
532
- }
533
- 80% {
534
- clip: rect(35px, 9999px, 67px, 0);
535
- }
536
- 100% {
537
- clip: rect(92px, 9999px, 44px, 0);
538
- }
539
- }
540
-
541
- .gradient-text {
542
- background: var(--gradient-cyber);
543
- -webkit-background-clip: text;
544
- -webkit-text-fill-color: transparent;
545
- background-clip: text;
546
- animation: gradientShift 5s ease infinite;
547
- background-size: 200% 200%;
548
- }
549
-
550
- @keyframes gradientShift {
551
- 0%,
552
- 100% {
553
- background-position: 0% 50%;
554
- }
555
- 50% {
556
- background-position: 100% 50%;
557
- }
558
- }
559
-
560
- .hero-subtitle {
561
- font-size: 1.15rem;
562
- color: var(--text-secondary);
563
- line-height: 1.6;
564
- margin-bottom: 20px;
565
- max-width: 600px;
566
- }
567
-
568
- .highlight-model {
569
- color: var(--neon-cyan);
570
- font-weight: 700;
571
- text-shadow: 0 0 10px rgba(0, 255, 245, 0.4);
572
- }
573
-
574
- .rebel-model {
575
- color: #ff0055;
576
- font-weight: 700;
577
- text-shadow: 0 0 10px rgba(255, 0, 85, 0.4);
578
- }
579
-
580
- .system-note {
581
- display: flex;
582
- align-items: center;
583
- gap: 12px;
584
- font-size: 0.85rem;
585
- color: var(--text-secondary);
586
- margin: 40px auto;
587
- padding: 12px 20px;
588
- background: rgba(59, 130, 246, 0.05);
589
- border-left: 3px solid var(--neon-cyan);
590
- border-radius: 4px;
591
- max-width: 600px;
592
- line-height: 1.5;
593
- backdrop-filter: blur(5px);
594
- }
595
-
596
- .system-note i {
597
- color: var(--neon-cyan);
598
- }
599
-
600
- .system-note strong {
601
- color: var(--neon-cyan);
602
- font-weight: 700;
603
- }
604
-
605
- /* Terminal Hero */
606
- .hero-terminal {
607
- background: rgba(0, 0, 0, 0.7);
608
- border: 1px solid rgba(0, 255, 245, 0.2);
609
- border-radius: 8px;
610
- max-width: 440px;
611
- margin-bottom: 25px;
612
- overflow: hidden;
613
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
614
- backdrop-filter: blur(10px);
615
- animation: slideInLeft 1s ease;
616
- position: relative;
617
- }
618
-
619
- .hero-terminal::after {
620
- content: '';
621
- position: absolute;
622
- top: 0;
623
- left: 0;
624
- width: 100%;
625
- height: 2px;
626
- background: rgba(0, 255, 245, 0.5);
627
- box-shadow: 0 0 15px var(--neon-cyan);
628
- animation: scanning 3s linear infinite;
629
- pointer-events: none;
630
- }
631
-
632
- @keyframes scanning {
633
- 0% {
634
- top: 0;
635
- }
636
- 100% {
637
- top: 100%;
638
- }
639
- }
640
-
641
- @keyframes slideInLeft {
642
- from {
643
- opacity: 0;
644
- transform: translateX(-30px);
645
- }
646
- to {
647
- opacity: 1;
648
- transform: translateX(0);
649
- }
650
- }
651
-
652
- .terminal-header {
653
- background: rgba(0, 255, 245, 0.05);
654
- padding: 8px 15px;
655
- display: flex;
656
- align-items: center;
657
- gap: 8px;
658
- border-bottom: 1px solid rgba(0, 255, 245, 0.1);
659
- }
660
-
661
- .terminal-header .dot {
662
- width: 8px;
663
- height: 8px;
664
- border-radius: 50%;
665
- }
666
-
667
- .terminal-header .dot:nth-child(1) {
668
- background: #3b82f6;
669
- }
670
- .terminal-header .dot:nth-child(2) {
671
- background: #60a5fa;
672
- }
673
- .terminal-header .dot:nth-child(3) {
674
- background: #00fff5;
675
- }
676
-
677
- .terminal-title {
678
- font-family: 'Fira Code', monospace;
679
- font-size: 0.75rem;
680
- color: var(--text-secondary);
681
- margin-left: 10px;
682
- letter-spacing: 1px;
683
- }
684
-
685
- .terminal-body {
686
- padding: 15px 20px;
687
- display: flex;
688
- align-items: center;
689
- gap: 12px;
690
- font-family: 'Fira Code', monospace;
691
- }
692
-
693
- .terminal-body .prompt {
694
- color: var(--neon-cyan);
695
- font-weight: 700;
696
- }
697
-
698
- .terminal-body .command {
699
- color: #e2e8f0;
700
- font-size: 1rem;
701
- }
702
-
703
- .terminal-copy {
704
- margin-left: auto;
705
- background: transparent;
706
- border: none;
707
- color: var(--text-secondary);
708
- cursor: pointer;
709
- transition: all 0.3s ease;
710
- }
711
-
712
- .terminal-copy:hover {
713
- color: var(--neon-cyan);
714
- transform: scale(1.1);
715
- }
716
-
717
- /* Premium Buttons Upgrade */
718
- .hero-actions {
719
- display: flex;
720
- gap: 20px;
721
- margin-bottom: 30px;
722
- }
723
-
724
- .btn {
725
- display: inline-flex;
726
- align-items: center;
727
- gap: 10px;
728
- padding: 12px 28px;
729
- font-weight: 700;
730
- font-size: 0.9rem;
731
- text-decoration: none;
732
- text-transform: uppercase;
733
- letter-spacing: 1.5px;
734
- position: relative;
735
- overflow: hidden;
736
- transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
737
- background: transparent;
738
- cursor: pointer;
739
- z-index: 1;
740
- clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0% 30%);
741
- }
742
-
743
- .btn-primary {
744
- color: #fff;
745
- background: var(--neon-cyan);
746
- border: none;
747
- box-shadow: 0 0 20px rgba(0, 255, 245, 0.3);
748
- }
749
-
750
- .btn-primary::before {
751
- content: '';
752
- position: absolute;
753
- top: 0;
754
- left: -100%;
755
- width: 100%;
756
- height: 100%;
757
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
758
- transition: 0.5s;
759
- z-index: -1;
760
- }
761
-
762
- .btn-primary:hover::before {
763
- left: 100%;
764
- }
765
-
766
- .btn-primary:hover {
767
- transform: translateY(-5px) scale(1.02);
768
- box-shadow:
769
- 0 0 40px var(--neon-cyan),
770
- 0 0 80px rgba(0, 255, 245, 0.2);
771
- letter-spacing: 4px;
772
- }
773
-
774
- .btn-primary::after {
775
- content: '';
776
- position: absolute;
777
- top: -100%;
778
- left: -100%;
779
- width: 200%;
780
- height: 200%;
781
- background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
782
- transform: rotate(45deg);
783
- transition: 0.5s;
784
- }
785
-
786
- .btn-primary:hover::after {
787
- top: 100%;
788
- left: 100%;
789
- }
790
-
791
- .btn-secondary {
792
- color: var(--neon-cyan);
793
- border: 1px solid rgba(0, 255, 245, 0.5);
794
- background: rgba(0, 0, 0, 0.3);
795
- backdrop-filter: blur(10px);
796
- }
797
-
798
- .btn-secondary::after {
799
- content: '';
800
- position: absolute;
801
- top: 0;
802
- left: 0;
803
- width: 100%;
804
- height: 100%;
805
- background: var(--neon-cyan);
806
- opacity: 0;
807
- transition: 0.3s;
808
- z-index: -1;
809
- }
810
-
811
- .btn-secondary:hover {
812
- color: #fff;
813
- border-color: var(--neon-cyan);
814
- transform: translateY(-5px);
815
- box-shadow: 0 0 30px rgba(0, 255, 245, 0.4);
816
- }
817
-
818
- .btn-secondary:hover::after {
819
- opacity: 1;
820
- }
821
-
822
- .hero-stats {
823
- display: flex;
824
- gap: 60px;
825
- }
826
-
827
- .stat {
828
- text-align: center;
829
- }
830
-
831
- .stat-value {
832
- font-family: 'Orbitron', sans-serif;
833
- font-size: 2.2rem;
834
- font-weight: 900;
835
- color: var(--neon-cyan);
836
- text-shadow: 0 0 15px rgba(0, 255, 245, 0.4);
837
- margin-bottom: 8px;
838
- }
839
-
840
- .stat-label {
841
- font-size: 0.9rem;
842
- color: var(--text-secondary);
843
- text-transform: uppercase;
844
- letter-spacing: 2px;
845
- }
846
-
847
- /* Hero Visual - Orchestration Cortex */
848
- .hero-visual {
849
- display: flex;
850
- justify-content: center;
851
- align-items: center;
852
- perspective: 1000px;
853
- }
854
-
855
- .orchestration-cortex {
856
- position: relative;
857
- width: 100%;
858
- max-width: 650px;
859
- aspect-ratio: 1/1;
860
- transform-style: preserve-3d;
861
- margin: 0 auto;
862
- }
863
-
864
- .cortex-core {
865
- position: absolute;
866
- top: 50%;
867
- left: 50%;
868
- transform: translate(-50%, -50%);
869
- width: 120px;
870
- height: 120px;
871
- background: rgba(0, 0, 0, 0.5);
872
- border: 2px solid var(--neon-cyan);
873
- border-radius: 50%;
874
- display: flex;
875
- align-items: center;
876
- justify-content: center;
877
- z-index: 10;
878
- box-shadow:
879
- 0 0 30px rgba(0, 255, 245, 0.2),
880
- inset 0 0 20px var(--neon-cyan);
881
- transform-origin: center center;
882
- animation: corePulse 4s ease-in-out infinite;
883
- }
884
-
885
- .cortex-core i {
886
- font-size: 3rem;
887
- color: var(--neon-cyan);
888
- text-shadow: 0 0 15px var(--neon-cyan);
889
- animation: coreGlitch 3s infinite;
890
- }
891
-
892
- @keyframes corePulse {
893
- 0%,
894
- 100% {
895
- transform: translate(-50%, -50%) scale(1);
896
- box-shadow: 0 0 30px var(--neon-cyan);
897
- }
898
- 50% {
899
- transform: translate(-50%, -50%) scale(1.1);
900
- box-shadow: 0 0 60px var(--neon-cyan);
901
- }
902
- }
903
-
904
- @keyframes coreGlitch {
905
- 0%,
906
- 100% {
907
- opacity: 1;
908
- transform: scale(1);
909
- }
910
- 92% {
911
- opacity: 1;
912
- transform: scale(1);
913
- }
914
- 93% {
915
- opacity: 0.5;
916
- transform: scale(1.1) skew(5deg);
917
- }
918
- 94% {
919
- opacity: 1;
920
- transform: scale(1);
921
- }
922
- }
923
-
924
- .core-rings {
925
- position: absolute;
926
- width: 100%;
927
- height: 100%;
928
- }
929
-
930
- .ring {
931
- position: absolute;
932
- top: 50%;
933
- left: 50%;
934
- transform: translate(-50%, -50%);
935
- border: 1px solid rgba(0, 255, 245, 0.3);
936
- border-radius: 50%;
937
- }
938
-
939
- .ring-1 {
940
- width: 160px;
941
- height: 160px;
942
- border-style: dashed;
943
- animation: rotate 10s linear infinite;
944
- }
945
- .ring-2 {
946
- width: 200px;
947
- height: 200px;
948
- border-width: 2px;
949
- border-color: rgba(59, 130, 246, 0.2);
950
- animation: rotate 15s linear infinite reverse;
951
- }
952
- .ring-3 {
953
- width: 240px;
954
- height: 240px;
955
- border-style: double;
956
- animation: rotate 20s linear infinite;
957
- }
958
-
959
- @keyframes rotate {
960
- from {
961
- transform: translate(-50%, -50%) rotate(0deg);
962
- }
963
- to {
964
- transform: translate(-50%, -50%) rotate(360deg);
965
- }
966
- }
967
-
968
- /* Agent Fleet */
969
- .agent-node {
970
- position: absolute;
971
- width: 8px;
972
- height: 8px;
973
- background: var(--neon-cyan);
974
- border-radius: 50%;
975
- box-shadow: 0 0 10px var(--neon-cyan);
976
- z-index: 5;
977
- transition:
978
- opacity 0.4s ease,
979
- transform 0.4s ease,
980
- background 0.4s ease;
981
- transform: translate(-50%, -50%);
982
- pointer-events: none;
983
- opacity: 0.4;
984
- }
985
-
986
- .agent-node.active {
987
- background: var(--neon-blue);
988
- box-shadow: 0 0 20px var(--neon-blue);
989
- scale: 1.5;
990
- }
991
-
992
- .data-particle {
993
- position: absolute;
994
- width: 4px;
995
- height: 4px;
996
- background: var(--neon-cyan);
997
- border-radius: 50%;
998
- pointer-events: none;
999
- z-index: 6;
1000
- box-shadow: 0 0 10px var(--neon-cyan);
1001
- }
1002
-
1003
- @keyframes linkPulse {
1004
- 0% {
1005
- stroke-width: 1;
1006
- opacity: 0.3;
1007
- }
1008
- 50% {
1009
- stroke-width: 3;
1010
- opacity: 1;
1011
- filter: drop-shadow(0 0 10px var(--neon-cyan));
1012
- }
1013
- 100% {
1014
- stroke-width: 2;
1015
- opacity: 0.8;
1016
- }
1017
- }
1018
-
1019
- .link-line {
1020
- stroke: var(--neon-cyan);
1021
- stroke-width: 0.5;
1022
- opacity: 0.1;
1023
- transition:
1024
- stroke-width 0.3s ease,
1025
- opacity 0.5s ease;
1026
- }
1027
-
1028
- .link-line.active {
1029
- stroke-width: 1.5;
1030
- opacity: 0.6;
1031
- filter: drop-shadow(0 0 3px var(--neon-cyan));
1032
- }
1033
-
1034
- .link-line.active {
1035
- stroke: var(--neon-blue);
1036
- stroke-width: 2;
1037
- stroke-dashoffset: 0;
1038
- opacity: 1;
1039
- filter: drop-shadow(0 0 8px var(--neon-blue)) drop-shadow(0 0 15px var(--neon-cyan));
1040
- animation: linkPulse 0.5s ease-in-out;
1041
- }
1042
-
1043
- @keyframes linkPulse {
1044
- 0% {
1045
- stroke-width: 1;
1046
- opacity: 0.5;
1047
- }
1048
- 50% {
1049
- stroke-width: 4;
1050
- opacity: 1;
1051
- }
1052
- 100% {
1053
- stroke-width: 2;
1054
- opacity: 1;
1055
- }
1056
- }
1057
-
1058
- /* Hologram Data */
1059
- .hologram-data {
1060
- position: absolute;
1061
- bottom: 10%;
1062
- right: -5%;
1063
- background: rgba(0, 255, 245, 0.05);
1064
- border-left: 2px solid var(--neon-cyan);
1065
- padding: 10px 20px;
1066
- font-family: 'Fira Code', monospace;
1067
- font-size: 0.8rem;
1068
- color: var(--neon-cyan);
1069
- pointer-events: none;
1070
- animation: hologramFade 4s infinite;
1071
- z-index: 20;
1072
- }
1073
-
1074
- @media (max-width: 768px) {
1075
- .hologram-data {
1076
- right: 0;
1077
- bottom: 0;
1078
- font-size: 0.7rem;
1079
- padding: 5px 10px;
1080
- }
1081
- }
1082
-
1083
- .data-line {
1084
- margin-bottom: 5px;
1085
- white-space: nowrap;
1086
- }
1087
-
1088
- @keyframes hologramFade {
1089
- 0%,
1090
- 100% {
1091
- opacity: 0.8;
1092
- transform: skewX(-5deg);
1093
- }
1094
- 50% {
1095
- opacity: 0.4;
1096
- transform: skewX(-2deg);
1097
- }
1098
- }
1099
-
1100
- /* Domination Stats */
1101
- .domination-stats {
1102
- display: flex;
1103
- gap: 40px;
1104
- margin-top: 40px;
1105
- }
1106
-
1107
- .domination-stat .stat-value {
1108
- color: var(--neon-blue);
1109
- text-shadow: 0 0 15px var(--neon-blue);
1110
- }
1111
-
1112
- .ring-1 {
1113
- width: 250px;
1114
- height: 250px;
1115
- border-color: var(--neon-cyan);
1116
- animation: rotateRing 20s linear infinite;
1117
- }
1118
-
1119
- .ring-2 {
1120
- width: 350px;
1121
- height: 350px;
1122
- border-color: var(--neon-blue);
1123
- animation: rotateRing 30s linear infinite reverse;
1124
- }
1125
-
1126
- .ring-3 {
1127
- width: 450px;
1128
- height: 450px;
1129
- border-color: var(--neon-silver);
1130
- animation: rotateRing 40s linear infinite;
1131
- }
1132
-
1133
- @keyframes rotateRing {
1134
- from {
1135
- transform: translate(-50%, -50%) rotate(0deg);
1136
- }
1137
- to {
1138
- transform: translate(-50%, -50%) rotate(360deg);
1139
- }
1140
- }
1141
-
1142
- .brain-particles {
1143
- position: absolute;
1144
- top: 0;
1145
- left: 0;
1146
- width: 100%;
1147
- height: 100%;
1148
- }
1149
-
1150
- .brain-particles::before {
1151
- content: '';
1152
- position: absolute;
1153
- top: 20%;
1154
- left: 20%;
1155
- width: 10px;
1156
- height: 10px;
1157
- background: var(--neon-cyan);
1158
- border-radius: 50%;
1159
- box-shadow: 0 0 20px var(--neon-cyan);
1160
- animation: orbit 5s linear infinite;
1161
- }
1162
-
1163
- .brain-particles::after {
1164
- content: '';
1165
- position: absolute;
1166
- top: 60%;
1167
- right: 20%;
1168
- width: 15px;
1169
- height: 15px;
1170
- background: var(--neon-pink);
1171
- border-radius: 50%;
1172
- box-shadow: 0 0 20px var(--neon-pink);
1173
- animation: orbit 7s linear infinite reverse;
1174
- }
1175
-
1176
- @keyframes orbit {
1177
- from {
1178
- transform: rotate(0deg) translateX(100px) rotate(0deg);
1179
- }
1180
- to {
1181
- transform: rotate(360deg) translateX(100px) rotate(-360deg);
1182
- }
1183
- }
1184
-
1185
- /* Section Styles */
1186
- section {
1187
- padding: 120px 0;
1188
- position: relative;
1189
- }
1190
-
1191
- .section-header {
1192
- text-align: center;
1193
- margin-bottom: 80px;
1194
- }
1195
-
1196
- .section-title {
1197
- font-family: 'Orbitron', sans-serif;
1198
- font-size: 3rem;
1199
- font-weight: 900;
1200
- margin-bottom: 20px;
1201
- display: flex;
1202
- align-items: center;
1203
- justify-content: center;
1204
- gap: 20px;
1205
- }
1206
-
1207
- .section-title i {
1208
- color: var(--neon-cyan);
1209
- text-shadow: 0 0 20px var(--neon-cyan);
1210
- }
1211
-
1212
- .section-subtitle {
1213
- font-size: 1.2rem;
1214
- color: var(--text-secondary);
1215
- }
1216
-
1217
- /* Back Button */
1218
- .back-btn {
1219
- display: inline-flex;
1220
- align-items: center;
1221
- gap: 10px;
1222
- margin-bottom: 30px;
1223
- padding: 12px 24px;
1224
- background: rgba(0, 255, 245, 0.1);
1225
- border: 1px solid var(--neon-cyan);
1226
- border-radius: 8px;
1227
- color: var(--neon-cyan);
1228
- text-decoration: none;
1229
- transition: all 0.3s ease;
1230
- font-weight: 600;
1231
- }
1232
-
1233
- .back-btn:hover {
1234
- background: rgba(0, 255, 245, 0.2);
1235
- transform: translateX(-5px);
1236
- box-shadow: 0 5px 15px rgba(0, 255, 245, 0.2);
1237
- }
1238
-
1239
- .back-btn i {
1240
- font-size: 1rem;
1241
- }
1242
-
1243
- /* Features Section */
1244
- .features {
1245
- background: rgba(20, 20, 30, 0.5);
1246
- }
1247
-
1248
- .features-grid {
1249
- display: grid;
1250
- grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
1251
- gap: 30px;
1252
- }
1253
-
1254
- .feature-card {
1255
- background: var(--dark-card);
1256
- border: 1px solid rgba(0, 255, 245, 0.1);
1257
- border-radius: 20px;
1258
- padding: 40px;
1259
- position: relative;
1260
- overflow: hidden;
1261
- transition: all 0.3s ease;
1262
- backdrop-filter: blur(10px);
1263
- }
1264
-
1265
- .feature-card::before {
1266
- content: '';
1267
- position: absolute;
1268
- top: 0;
1269
- left: 0;
1270
- width: 100%;
1271
- height: 100%;
1272
- background: var(--gradient-cyber);
1273
- opacity: 0;
1274
- transition: opacity 0.3s ease;
1275
- }
1276
-
1277
- .feature-card:hover {
1278
- transform: translateY(-10px);
1279
- border-color: var(--neon-cyan);
1280
- box-shadow: 0 20px 60px rgba(0, 255, 245, 0.3);
1281
- }
1282
-
1283
- .feature-card:hover::before {
1284
- opacity: 0.1;
1285
- }
1286
-
1287
- .feature-icon {
1288
- position: relative;
1289
- width: 80px;
1290
- height: 80px;
1291
- margin-bottom: 25px;
1292
- display: flex;
1293
- align-items: center;
1294
- justify-content: center;
1295
- z-index: 1;
1296
- }
1297
-
1298
- .feature-icon i {
1299
- font-size: 2.5rem;
1300
- color: var(--neon-cyan);
1301
- z-index: 2;
1302
- position: relative;
1303
- }
1304
-
1305
- .icon-bg {
1306
- position: absolute;
1307
- top: 50%;
1308
- left: 50%;
1309
- transform: translate(-50%, -50%);
1310
- width: 100%;
1311
- height: 100%;
1312
- background: var(--gradient-cyber);
1313
- border-radius: 50%;
1314
- opacity: 0.2;
1315
- filter: blur(20px);
1316
- }
1317
-
1318
- .feature-card h3 {
1319
- font-family: 'Orbitron', sans-serif;
1320
- font-size: 1.5rem;
1321
- margin-bottom: 15px;
1322
- position: relative;
1323
- z-index: 1;
1324
- }
1325
-
1326
- .feature-card p {
1327
- color: var(--text-secondary);
1328
- line-height: 1.8;
1329
- position: relative;
1330
- z-index: 1;
1331
- }
1332
-
1333
- .feature-border {
1334
- position: absolute;
1335
- bottom: 0;
1336
- left: 0;
1337
- height: 3px;
1338
- width: 0;
1339
- background: var(--gradient-cyber);
1340
- transition: width 0.3s ease;
1341
- }
1342
-
1343
- .feature-card:hover .feature-border {
1344
- width: 100%;
1345
- }
1346
-
1347
- /* Installation Section */
1348
- .install-tabs {
1349
- display: flex;
1350
- gap: 20px;
1351
- margin-bottom: 40px;
1352
- justify-content: center;
1353
- }
1354
-
1355
- .tab-btn {
1356
- padding: 15px 30px;
1357
- background: var(--dark-card);
1358
- border: 2px solid rgba(0, 255, 245, 0.2);
1359
- border-radius: 10px;
1360
- color: var(--text-secondary);
1361
- font-weight: 600;
1362
- cursor: pointer;
1363
- transition: all 0.3s ease;
1364
- display: flex;
1365
- align-items: center;
1366
- gap: 10px;
1367
- text-transform: uppercase;
1368
- letter-spacing: 1px;
1369
- }
1370
-
1371
- .tab-btn:hover,
1372
- .tab-btn.active {
1373
- background: rgba(0, 255, 245, 0.1);
1374
- border-color: var(--neon-cyan);
1375
- color: var(--neon-cyan);
1376
- box-shadow: 0 0 20px rgba(0, 255, 245, 0.3);
1377
- }
1378
-
1379
- .tab-content {
1380
- display: none;
1381
- }
1382
-
1383
- .tab-content.active {
1384
- display: block;
1385
- animation: fadeIn 0.5s ease;
1386
- }
1387
-
1388
- @keyframes fadeIn {
1389
- from {
1390
- opacity: 0;
1391
- transform: translateY(20px);
1392
- }
1393
- to {
1394
- opacity: 1;
1395
- transform: translateY(0);
1396
- }
1397
- }
1398
-
1399
- .code-container {
1400
- background: var(--dark-card);
1401
- border: 1px solid rgba(0, 255, 245, 0.2);
1402
- border-radius: 15px;
1403
- overflow: hidden;
1404
- backdrop-filter: blur(10px);
1405
- }
1406
-
1407
- .code-container.large {
1408
- max-width: 900px;
1409
- margin: 0 auto;
1410
- }
1411
-
1412
- .code-header {
1413
- display: flex;
1414
- justify-content: space-between;
1415
- align-items: center;
1416
- padding: 15px 25px;
1417
- background: rgba(0, 0, 0, 0.3);
1418
- border-bottom: 1px solid rgba(0, 255, 245, 0.1);
1419
- }
1420
-
1421
- .code-title {
1422
- font-weight: 600;
1423
- color: var(--neon-cyan);
1424
- }
1425
-
1426
- .code-actions {
1427
- display: flex;
1428
- gap: 10px;
1429
- }
1430
-
1431
- .copy-btn {
1432
- width: 35px;
1433
- height: 35px;
1434
- background: rgba(0, 255, 245, 0.1);
1435
- border: 1px solid rgba(0, 255, 245, 0.3);
1436
- border-radius: 8px;
1437
- color: var(--neon-cyan);
1438
- cursor: pointer;
1439
- display: flex;
1440
- align-items: center;
1441
- justify-content: center;
1442
- transition: all 0.3s ease;
1443
- }
1444
-
1445
- .copy-btn:hover {
1446
- background: rgba(0, 255, 245, 0.2);
1447
- box-shadow: 0 0 15px rgba(0, 255, 245, 0.4);
1448
- }
1449
-
1450
- .code-container pre {
1451
- padding: 30px;
1452
- overflow-x: auto;
1453
- }
1454
-
1455
- .code-container code {
1456
- font-family: 'Fira Code', monospace;
1457
- font-size: 0.95rem;
1458
- line-height: 1.8;
1459
- color: #e2e8f0;
1460
- }
1461
-
1462
- /* Library Section */
1463
- .library {
1464
- background: rgba(20, 20, 30, 0.5);
1465
- }
1466
-
1467
- /* Structure Section */
1468
- .structure-tree {
1469
- max-width: 700px;
1470
- margin: 0 auto;
1471
- }
1472
-
1473
- .tree-item {
1474
- display: flex;
1475
- align-items: center;
1476
- gap: 20px;
1477
- padding: 20px 30px;
1478
- background: var(--dark-card);
1479
- border: 1px solid rgba(0, 255, 245, 0.1);
1480
- border-radius: 10px;
1481
- margin-bottom: 15px;
1482
- transition: all 0.3s ease;
1483
- }
1484
-
1485
- .tree-item:hover {
1486
- border-color: var(--neon-cyan);
1487
- box-shadow: 0 0 30px rgba(0, 255, 245, 0.2);
1488
- transform: translateX(10px);
1489
- }
1490
-
1491
- .tree-item i {
1492
- font-size: 1.5rem;
1493
- color: var(--neon-cyan);
1494
- width: 30px;
1495
- }
1496
-
1497
- .tree-item span:first-of-type {
1498
- font-weight: 600;
1499
- color: var(--text-primary);
1500
- flex: 1;
1501
- }
1502
-
1503
- .tree-desc {
1504
- color: var(--text-secondary);
1505
- font-size: 0.9rem;
1506
- }
1507
-
1508
- /* Footer */
1509
- footer {
1510
- background: rgba(10, 10, 15, 0.95);
1511
- border-top: 1px solid rgba(0, 255, 245, 0.1);
1512
- padding: 60px 0 30px;
1513
- }
1514
-
1515
- .footer-content {
1516
- display: flex;
1517
- justify-content: space-between;
1518
- align-items: center;
1519
- margin-bottom: 30px;
1520
- }
1521
-
1522
- .footer-logo {
1523
- display: flex;
1524
- align-items: center;
1525
- gap: 12px;
1526
- font-family: 'Orbitron', sans-serif;
1527
- font-size: 1.5rem;
1528
- font-weight: 700;
1529
- }
1530
-
1531
- .footer-logo i {
1532
- color: var(--neon-cyan);
1533
- }
1534
-
1535
- .footer-logo span {
1536
- background: var(--gradient-cyber);
1537
- -webkit-background-clip: text;
1538
- -webkit-text-fill-color: transparent;
1539
- background-clip: text;
1540
- }
1541
-
1542
- .footer-brand p {
1543
- color: var(--text-secondary);
1544
- margin-top: 10px;
1545
- }
1546
-
1547
- .footer-social {
1548
- display: flex;
1549
- gap: 20px;
1550
- }
1551
-
1552
- .footer-social a {
1553
- width: 50px;
1554
- height: 50px;
1555
- background: rgba(0, 255, 245, 0.1);
1556
- border: 1px solid rgba(0, 255, 245, 0.3);
1557
- border-radius: 10px;
1558
- display: flex;
1559
- align-items: center;
1560
- justify-content: center;
1561
- color: var(--neon-cyan);
1562
- font-size: 1.5rem;
1563
- transition: all 0.3s ease;
1564
- }
1565
-
1566
- .footer-social a:hover {
1567
- background: var(--neon-cyan);
1568
- color: var(--dark-bg);
1569
- box-shadow: 0 0 30px rgba(0, 255, 245, 0.5);
1570
- transform: translateY(-5px);
1571
- }
1572
-
1573
- .footer-bottom {
1574
- text-align: center;
1575
- padding-top: 30px;
1576
- border-top: 1px solid rgba(0, 255, 245, 0.1);
1577
- }
1578
-
1579
- .footer-bottom p {
1580
- color: var(--text-secondary);
1581
- }
1582
-
1583
- /* Responsive */
1584
- @media (max-width: 1024px) {
1585
- .hero .container {
1586
- grid-template-columns: 1fr;
1587
- text-align: center;
1588
- }
1589
-
1590
- .hero-content {
1591
- order: 2;
1592
- }
1593
-
1594
- .hero-visual {
1595
- order: 1;
1596
- width: 100%;
1597
- max-width: 400px;
1598
- margin: 0 auto;
1599
- }
1600
-
1601
- .hero-actions {
1602
- justify-content: center;
1603
- }
1604
-
1605
- .hero-stats {
1606
- justify-content: center;
1607
- }
1608
-
1609
- .brain-container {
1610
- width: 400px;
1611
- height: 400px;
1612
- }
1613
- }
1614
-
1615
- /* Enhanced Mobile Navigation */
1616
- @media (max-width: 768px) {
1617
- .nav-links {
1618
- position: fixed;
1619
- top: 80px;
1620
- left: 0;
1621
- width: 100%;
1622
- background: rgba(10, 10, 15, 0.98);
1623
- backdrop-filter: blur(20px);
1624
- flex-direction: column;
1625
- padding: 30px 20px;
1626
- gap: 0;
1627
- transform: translateY(-150%);
1628
- transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
1629
- border-bottom: 2px solid rgba(0, 255, 245, 0.2);
1630
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
1631
- }
1632
-
1633
- .nav-links.active {
1634
- transform: translateY(0);
1635
- }
1636
-
1637
- .nav-links li {
1638
- width: 100%;
1639
- text-align: center;
1640
- padding: 15px 0;
1641
- border-bottom: 1px solid rgba(0, 255, 245, 0.1);
1642
- }
1643
-
1644
- .nav-links li:last-child {
1645
- border-bottom: none;
1646
- }
1647
-
1648
- .nav-link {
1649
- display: block;
1650
- width: 100%;
1651
- padding: 15px;
1652
- font-size: 1.2rem;
1653
- }
1654
-
1655
- .mobile-toggle {
1656
- display: flex;
1657
- position: relative;
1658
- z-index: 1001;
1659
- }
1660
-
1661
- .mobile-toggle.active span:nth-child(1) {
1662
- transform: rotate(45deg) translate(8px, 8px);
1663
- }
1664
-
1665
- .mobile-toggle.active span:nth-child(2) {
1666
- opacity: 0;
1667
- }
1668
-
1669
- .mobile-toggle.active span:nth-child(3) {
1670
- transform: rotate(-45deg) translate(7px, -7px);
1671
- }
1672
-
1673
- .hero-title {
1674
- font-size: 3rem;
1675
- }
1676
-
1677
- .hero-subtitle {
1678
- font-size: 1.2rem;
1679
- }
1680
-
1681
- .hero-actions {
1682
- flex-direction: column;
1683
- align-items: center;
1684
- gap: 15px;
1685
- }
1686
-
1687
- .btn {
1688
- width: 100%;
1689
- max-width: 300px;
1690
- justify-content: center;
1691
- padding: 10px 20px;
1692
- font-size: 0.9rem;
1693
- }
1694
-
1695
- .hero-stats {
1696
- flex-direction: column;
1697
- gap: 30px;
1698
- }
1699
-
1700
- .section-title {
1701
- font-size: 2rem;
1702
- }
1703
-
1704
- .features-grid {
1705
- grid-template-columns: 1fr;
1706
- }
1707
-
1708
- .install-tabs {
1709
- flex-direction: column;
1710
- }
1711
-
1712
- .footer-content {
1713
- flex-direction: column;
1714
- text-align: center;
1715
- gap: 30px;
1716
- }
1717
- }
1718
-
1719
- .highlight-model {
1720
- color: var(--neon-cyan);
1721
- font-weight: 700;
1722
- text-shadow: 0 0 10px rgba(0, 255, 245, 0.3);
1723
- }
1724
-
1725
- .rebel-model {
1726
- color: var(--neon-blue);
1727
- font-weight: 800;
1728
- text-transform: uppercase;
1729
- text-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
1730
- animation: rebelFlicker 2s infinite;
1731
- }
1732
-
1733
- @keyframes rebelFlicker {
1734
- 0%,
1735
- 100% {
1736
- opacity: 1;
1737
- }
1738
- 50% {
1739
- opacity: 0.8;
1740
- text-shadow: 0 0 25px var(--neon-blue);
1741
- }
1742
- 52% {
1743
- opacity: 0.5;
1744
- }
1745
- 54% {
1746
- opacity: 1;
1747
- }
1748
- }
1749
-
1750
- /* ========================================
1751
- PROMPT PAGE STYLES
1752
- ======================================== */
1753
-
1754
- /* Enhanced Mobile Navigation */
1755
- @media (max-width: 768px) {
1756
- .nav-links {
1757
- position: fixed;
1758
- top: 80px;
1759
- left: 0;
1760
- width: 100%;
1761
- background: rgba(10, 10, 15, 0.98);
1762
- backdrop-filter: blur(20px);
1763
- flex-direction: column;
1764
- padding: 30px 20px;
1765
- gap: 0;
1766
- transform: translateY(-150%);
1767
- transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
1768
- border-bottom: 2px solid rgba(0, 255, 245, 0.2);
1769
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
1770
- }
1771
-
1772
- .nav-links.active {
1773
- transform: translateY(0);
1774
- }
1775
-
1776
- .nav-links li {
1777
- width: 100%;
1778
- text-align: center;
1779
- padding: 15px 0;
1780
- border-bottom: 1px solid rgba(0, 255, 245, 0.1);
1781
- }
1782
-
1783
- .nav-links li:last-child {
1784
- border-bottom: none;
1785
- }
1786
-
1787
- .nav-link {
1788
- display: block;
1789
- width: 100%;
1790
- padding: 15px;
1791
- font-size: 1.2rem;
1792
- }
1793
-
1794
- .mobile-toggle {
1795
- display: flex;
1796
- position: relative;
1797
- z-index: 1001;
1798
- }
1799
-
1800
- .mobile-toggle.active span:nth-child(1) {
1801
- transform: rotate(45deg) translate(8px, 8px);
1802
- }
1803
-
1804
- .mobile-toggle.active span:nth-child(2) {
1805
- opacity: 0;
1806
- }
1807
-
1808
- .mobile-toggle.active span:nth-child(3) {
1809
- transform: rotate(-45deg) translate(7px, -7px);
1810
- }
1811
- }
1812
-
1813
- /* Active Navigation Link */
1814
- .nav-link.active {
1815
- color: var(--neon-cyan);
1816
- text-shadow: 0 0 20px var(--neon-cyan);
1817
- }
1818
-
1819
- .nav-link.active::before {
1820
- width: 100%;
1821
- }
1822
-
1823
- /* Prompt Page Container */
1824
- .prompt-container {
1825
- max-width: 1200px;
1826
- margin: 0 auto;
1827
- padding: 60px 20px 40px;
1828
- }
1829
-
1830
- .prompt-header {
1831
- text-align: center;
1832
- margin-bottom: 50px;
1833
- position: relative;
1834
- }
1835
-
1836
- .prompt-badges {
1837
- display: flex;
1838
- justify-content: center;
1839
- gap: 15px;
1840
- margin-bottom: 25px;
1841
- flex-wrap: wrap;
1842
- }
1843
-
1844
- .badge {
1845
- display: inline-flex;
1846
- align-items: center;
1847
- gap: 8px;
1848
- padding: 8px 16px;
1849
- border-radius: 20px;
1850
- font-size: 0.85rem;
1851
- font-weight: 600;
1852
- text-transform: uppercase;
1853
- letter-spacing: 1px;
1854
- }
1855
-
1856
- .badge-primary {
1857
- background: rgba(0, 255, 245, 0.15);
1858
- border: 1px solid var(--neon-cyan);
1859
- color: var(--neon-cyan);
1860
- }
1861
-
1862
- .badge-secondary {
1863
- background: rgba(59, 130, 246, 0.15);
1864
- border: 1px solid var(--neon-blue);
1865
- color: var(--neon-blue);
1866
- }
1867
-
1868
- .prompt-header h1 {
1869
- font-size: 2.8rem;
1870
- margin-bottom: 15px;
1871
- background: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue));
1872
- -webkit-background-clip: text;
1873
- -webkit-text-fill-color: transparent;
1874
- background-clip: text;
1875
- font-family: 'Orbitron', sans-serif;
1876
- font-weight: 900;
1877
- }
1878
-
1879
- .prompt-header h1 i {
1880
- background: var(--gradient-cyber);
1881
- -webkit-background-clip: text;
1882
- -webkit-text-fill-color: transparent;
1883
- background-clip: text;
1884
- }
1885
-
1886
- .prompt-subtitle {
1887
- font-size: 1.2rem;
1888
- color: var(--text-secondary);
1889
- margin-bottom: 20px;
1890
- font-weight: 400;
1891
- }
1892
-
1893
- .prompt-meta {
1894
- display: flex;
1895
- justify-content: center;
1896
- gap: 30px;
1897
- flex-wrap: wrap;
1898
- margin-top: 25px;
1899
- }
1900
-
1901
- .meta-item {
1902
- display: flex;
1903
- align-items: center;
1904
- gap: 8px;
1905
- color: var(--text-secondary);
1906
- font-size: 0.9rem;
1907
- }
1908
-
1909
- .meta-item i {
1910
- color: var(--neon-cyan);
1911
- }
1912
-
1913
- /* Prompt Sections */
1914
- .prompt-section {
1915
- background: rgba(0, 20, 40, 0.8);
1916
- border: 1px solid rgba(0, 255, 245, 0.15);
1917
- border-radius: 20px;
1918
- padding: 40px;
1919
- margin-bottom: 40px;
1920
- position: relative;
1921
- overflow: hidden;
1922
- backdrop-filter: blur(10px);
1923
- }
1924
-
1925
- /* Introduction Section */
1926
- .intro-section {
1927
- background: linear-gradient(135deg, rgba(0, 20, 40, 0.9), rgba(0, 30, 50, 0.8));
1928
- border: 2px solid var(--neon-cyan);
1929
- border-radius: 20px;
1930
- padding: 40px;
1931
- margin-bottom: 40px;
1932
- position: relative;
1933
- overflow: hidden;
1934
- backdrop-filter: blur(15px);
1935
- box-shadow: 0 0 40px rgba(0, 255, 245, 0.15);
1936
- }
1937
-
1938
- .intro-section::before {
1939
- content: '';
1940
- position: absolute;
1941
- top: 0;
1942
- left: 0;
1943
- width: 100%;
1944
- height: 100%;
1945
- background: var(--gradient-cyber);
1946
- opacity: 0.05;
1947
- animation: introGlow 3s ease-in-out infinite;
1948
- }
1949
-
1950
- @keyframes introGlow {
1951
- 0%,
1952
- 100% {
1953
- opacity: 0.05;
1954
- }
1955
- 50% {
1956
- opacity: 0.1;
1957
- }
1958
- }
1959
-
1960
- .intro-content {
1961
- position: relative;
1962
- z-index: 1;
1963
- text-align: center;
1964
- }
1965
-
1966
- .intro-content h2 {
1967
- font-size: 2rem;
1968
- color: var(--neon-cyan);
1969
- margin-bottom: 25px;
1970
- display: flex;
1971
- align-items: center;
1972
- justify-content: center;
1973
- gap: 15px;
1974
- font-family: 'Orbitron', sans-serif;
1975
- font-weight: 900;
1976
- }
1977
-
1978
- .intro-content h2 i {
1979
- font-size: 1.8rem;
1980
- text-shadow: 0 0 20px var(--neon-cyan);
1981
- }
1982
-
1983
- .intro-description {
1984
- max-width: 800px;
1985
- margin: 0 auto;
1986
- }
1987
-
1988
- .intro-description p {
1989
- font-size: 1.1rem;
1990
- color: var(--text-secondary);
1991
- line-height: 1.8;
1992
- margin-bottom: 20px;
1993
- }
1994
-
1995
- .intro-description strong {
1996
- color: var(--neon-cyan);
1997
- font-weight: 700;
1998
- }
1999
-
2000
- .intro-description code {
2001
- background: rgba(0, 255, 245, 0.1);
2002
- padding: 2px 6px;
2003
- border-radius: 4px;
2004
- color: var(--neon-cyan);
2005
- font-size: 0.9em;
2006
- }
2007
-
2008
- .intro-mission {
2009
- background: rgba(0, 255, 245, 0.1);
2010
- border-left: 4px solid var(--neon-cyan);
2011
- padding: 20px;
2012
- border-radius: 8px;
2013
- font-size: 1.2rem !important;
2014
- color: var(--text-primary) !important;
2015
- margin-top: 25px;
2016
- }
2017
-
2018
- .intro-mission strong {
2019
- color: var(--neon-cyan);
2020
- font-weight: 700;
2021
- }
2022
-
2023
- .prompt-section::before {
2024
- content: '';
2025
- position: absolute;
2026
- top: 0;
2027
- left: 0;
2028
- width: 100%;
2029
- height: 4px;
2030
- background: var(--gradient-cyber);
2031
- }
2032
-
2033
- .section-intro {
2034
- margin-bottom: 40px;
2035
- text-align: center;
2036
- }
2037
-
2038
- .section-intro h2 {
2039
- font-size: 2rem;
2040
- color: var(--neon-cyan);
2041
- margin-bottom: 15px;
2042
- display: flex;
2043
- align-items: center;
2044
- justify-content: center;
2045
- gap: 15px;
2046
- font-family: 'Orbitron', sans-serif;
2047
- font-weight: 700;
2048
- }
2049
-
2050
- .section-intro h2 i {
2051
- color: var(--neon-cyan);
2052
- text-shadow: 0 0 20px var(--neon-cyan);
2053
- }
2054
-
2055
- .section-intro-text {
2056
- color: var(--text-secondary);
2057
- font-size: 1.1rem;
2058
- max-width: 600px;
2059
- margin: 0 auto;
2060
- }
2061
-
2062
- /* Rules Grid */
2063
- .rules-grid {
2064
- display: grid;
2065
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
2066
- gap: 25px;
2067
- }
2068
-
2069
- .rule-card {
2070
- background: rgba(0, 0, 0, 0.3);
2071
- border: 1px solid rgba(0, 255, 245, 0.1);
2072
- border-radius: 15px;
2073
- padding: 30px;
2074
- position: relative;
2075
- transition: all 0.3s ease;
2076
- overflow: hidden;
2077
- }
2078
-
2079
- .rule-card::before {
2080
- content: '';
2081
- position: absolute;
2082
- top: 0;
2083
- left: 0;
2084
- width: 100%;
2085
- height: 100%;
2086
- background: var(--gradient-cyber);
2087
- opacity: 0;
2088
- transition: opacity 0.3s ease;
2089
- }
2090
-
2091
- .rule-card:hover {
2092
- transform: translateY(-5px);
2093
- border-color: var(--neon-cyan);
2094
- box-shadow: 0 10px 30px rgba(0, 255, 245, 0.2);
2095
- }
2096
-
2097
- .rule-card:hover::before {
2098
- opacity: 0.1;
2099
- }
2100
-
2101
- .rule-number {
2102
- position: absolute;
2103
- top: 20px;
2104
- right: 20px;
2105
- font-size: 3rem;
2106
- font-weight: 900;
2107
- color: rgba(0, 255, 245, 0.1);
2108
- font-family: 'Orbitron', sans-serif;
2109
- z-index: 1;
2110
- }
2111
-
2112
- .rule-card h3 {
2113
- color: var(--neon-cyan);
2114
- margin-bottom: 15px;
2115
- font-size: 1.2rem;
2116
- position: relative;
2117
- z-index: 1;
2118
- font-weight: 600;
2119
- }
2120
-
2121
- .rule-card p {
2122
- color: var(--text-secondary);
2123
- line-height: 1.6;
2124
- position: relative;
2125
- z-index: 1;
2126
- }
2127
-
2128
- .rule-card code {
2129
- background: rgba(0, 255, 245, 0.1);
2130
- padding: 2px 6px;
2131
- border-radius: 4px;
2132
- color: var(--neon-cyan);
2133
- font-size: 0.9em;
2134
- }
2135
-
2136
- /* Workflow Steps */
2137
- .workflow-steps {
2138
- display: flex;
2139
- flex-direction: column;
2140
- gap: 20px;
2141
- }
2142
-
2143
- .workflow-step {
2144
- display: flex;
2145
- align-items: center;
2146
- gap: 20px;
2147
- background: rgba(0, 0, 0, 0.3);
2148
- border: 1px solid rgba(0, 255, 245, 0.1);
2149
- border-radius: 12px;
2150
- padding: 25px;
2151
- transition: all 0.3s ease;
2152
- }
2153
-
2154
- .workflow-step:hover {
2155
- border-color: var(--neon-cyan);
2156
- transform: translateX(10px);
2157
- }
2158
-
2159
- .step-number {
2160
- min-width: 50px;
2161
- height: 50px;
2162
- background: var(--gradient-cyber);
2163
- border-radius: 50%;
2164
- display: flex;
2165
- align-items: center;
2166
- justify-content: center;
2167
- font-weight: 900;
2168
- font-size: 1.2rem;
2169
- color: var(--dark-bg);
2170
- flex-shrink: 0;
2171
- }
2172
-
2173
- .step-content {
2174
- flex: 1;
2175
- display: flex;
2176
- flex-direction: column;
2177
- gap: 8px;
2178
- }
2179
-
2180
- .step-code {
2181
- background: rgba(0, 0, 0, 0.5);
2182
- border: 1px solid rgba(0, 255, 245, 0.2);
2183
- border-radius: 8px;
2184
- padding: 12px 16px;
2185
- font-family: 'Fira Code', monospace;
2186
- font-size: 0.9rem;
2187
- color: var(--neon-cyan);
2188
- overflow-x: auto;
2189
- }
2190
-
2191
- .step-description {
2192
- color: var(--text-secondary);
2193
- font-size: 0.9rem;
2194
- font-style: italic;
2195
- }
2196
-
2197
- /* Tool Cards */
2198
- .tool-card {
2199
- background: rgba(0, 0, 0, 0.3);
2200
- border: 1px solid rgba(0, 255, 245, 0.1);
2201
- border-radius: 15px;
2202
- padding: 30px;
2203
- margin-bottom: 25px;
2204
- transition: all 0.3s ease;
2205
- }
2206
-
2207
- .tool-card:hover {
2208
- border-color: var(--neon-cyan);
2209
- box-shadow: 0 10px 30px rgba(0, 255, 245, 0.15);
2210
- }
2211
-
2212
- .tool-card-warning {
2213
- border-color: rgba(255, 0, 85, 0.3);
2214
- }
2215
-
2216
- .tool-card-warning:hover {
2217
- border-color: #ff0055;
2218
- box-shadow: 0 10px 30px rgba(255, 0, 85, 0.2);
2219
- }
2220
-
2221
- .tool-card-primary {
2222
- border-color: rgba(0, 255, 245, 0.3);
2223
- }
2224
-
2225
- .tool-card-primary:hover {
2226
- border-color: var(--neon-cyan);
2227
- box-shadow: 0 10px 30px rgba(0, 255, 245, 0.2);
2228
- }
2229
-
2230
- .tool-header {
2231
- display: flex;
2232
- justify-content: space-between;
2233
- align-items: center;
2234
- margin-bottom: 20px;
2235
- flex-wrap: wrap;
2236
- gap: 15px;
2237
- }
2238
-
2239
- .tool-header h3 {
2240
- color: var(--neon-cyan);
2241
- font-size: 1.3rem;
2242
- font-family: 'Fira Code', monospace;
2243
- font-weight: 600;
2244
- flex: 1;
2245
- }
2246
-
2247
- .tool-badge {
2248
- background: rgba(0, 255, 245, 0.1);
2249
- border: 1px solid rgba(0, 255, 245, 0.3);
2250
- color: var(--neon-cyan);
2251
- padding: 6px 12px;
2252
- border-radius: 20px;
2253
- font-size: 0.8rem;
2254
- font-weight: 600;
2255
- text-transform: uppercase;
2256
- letter-spacing: 0.5px;
2257
- }
2258
-
2259
- .tool-badge-primary {
2260
- background: rgba(0, 255, 245, 0.2);
2261
- border-color: var(--neon-cyan);
2262
- }
2263
-
2264
- .tool-badge-warning {
2265
- background: rgba(255, 0, 85, 0.1);
2266
- border-color: rgba(255, 0, 85, 0.5);
2267
- color: #ff0055;
2268
- }
2269
-
2270
- .tool-content {
2271
- color: var(--text-secondary);
2272
- line-height: 1.8;
2273
- }
2274
-
2275
- .tool-content p {
2276
- margin-bottom: 20px;
2277
- }
2278
-
2279
- .tool-content h4 {
2280
- color: var(--neon-cyan);
2281
- margin: 25px 0 15px;
2282
- font-size: 1.1rem;
2283
- }
2284
-
2285
- .tool-params,
2286
- .model-list {
2287
- list-style: none;
2288
- padding: 0;
2289
- margin: 20px 0;
2290
- }
2291
-
2292
- .tool-params li,
2293
- .model-list li {
2294
- padding: 10px 0;
2295
- padding-left: 25px;
2296
- position: relative;
2297
- border-bottom: 1px solid rgba(0, 255, 245, 0.05);
2298
- }
2299
-
2300
- .tool-params li::before,
2301
- .model-list li::before {
2302
- content: '▸';
2303
- position: absolute;
2304
- left: 0;
2305
- color: var(--neon-cyan);
2306
- font-weight: bold;
2307
- }
2308
-
2309
- .tool-params code,
2310
- .model-list code {
2311
- background: rgba(0, 255, 245, 0.1);
2312
- padding: 2px 6px;
2313
- border-radius: 4px;
2314
- color: var(--neon-cyan);
2315
- font-size: 0.9em;
2316
- }
2317
-
2318
- .json-example {
2319
- background: rgba(0, 0, 0, 0.5);
2320
- border: 1px solid rgba(0, 255, 245, 0.2);
2321
- border-radius: 10px;
2322
- padding: 20px;
2323
- margin: 20px 0;
2324
- overflow-x: auto;
2325
- font-family: 'Fira Code', monospace;
2326
- font-size: 0.9rem;
2327
- color: #e2e8f0;
2328
- line-height: 1.6;
2329
- }
2330
-
2331
- .mode-table {
2332
- width: 100%;
2333
- border-collapse: collapse;
2334
- margin: 20px 0;
2335
- }
2336
-
2337
- .mode-table th,
2338
- .mode-table td {
2339
- border: 1px solid rgba(0, 255, 245, 0.2);
2340
- padding: 15px;
2341
- text-align: left;
2342
- }
2343
-
2344
- .mode-table th {
2345
- background: rgba(0, 255, 245, 0.1);
2346
- color: var(--neon-cyan);
2347
- font-weight: 600;
2348
- text-transform: uppercase;
2349
- font-size: 0.85rem;
2350
- letter-spacing: 1px;
2351
- }
2352
-
2353
- .mode-table td code {
2354
- background: rgba(0, 255, 245, 0.1);
2355
- padding: 3px 8px;
2356
- border-radius: 4px;
2357
- color: var(--neon-cyan);
2358
- font-weight: 600;
2359
- }
2360
-
2361
- .rule-note {
2362
- background: rgba(0, 255, 245, 0.05);
2363
- border-left: 3px solid var(--neon-cyan);
2364
- padding: 20px;
2365
- margin: 25px 0;
2366
- border-radius: 0 8px 8px 0;
2367
- display: flex;
2368
- gap: 15px;
2369
- align-items: start;
2370
- }
2371
-
2372
- .rule-note i {
2373
- color: var(--neon-cyan);
2374
- font-size: 1.2rem;
2375
- flex-shrink: 0;
2376
- margin-top: 3px;
2377
- }
2378
-
2379
- .rule-note strong {
2380
- color: var(--neon-cyan);
2381
- }
2382
-
2383
- .rule-note-warning {
2384
- background: rgba(255, 0, 85, 0.05);
2385
- border-left-color: #ff0055;
2386
- }
2387
-
2388
- .rule-note-warning i {
2389
- color: #ff0055;
2390
- }
2391
-
2392
- .rule-note-warning strong {
2393
- color: #ff0055;
2394
- }
2395
-
2396
- /* Response Rules */
2397
- .response-rules {
2398
- display: flex;
2399
- flex-direction: column;
2400
- gap: 20px;
2401
- }
2402
-
2403
- .response-rule {
2404
- display: flex;
2405
- align-items: start;
2406
- gap: 20px;
2407
- background: rgba(0, 0, 0, 0.3);
2408
- border: 1px solid rgba(0, 255, 245, 0.1);
2409
- border-radius: 12px;
2410
- padding: 25px;
2411
- transition: all 0.3s ease;
2412
- }
2413
-
2414
- .response-rule:hover {
2415
- border-color: var(--neon-cyan);
2416
- transform: translateX(5px);
2417
- }
2418
-
2419
- .response-rule i {
2420
- color: var(--neon-cyan);
2421
- font-size: 1.5rem;
2422
- flex-shrink: 0;
2423
- }
2424
-
2425
- .response-rule .fa-times-circle {
2426
- color: #ff0055;
2427
- }
2428
-
2429
- .response-rule code {
2430
- background: rgba(0, 255, 245, 0.1);
2431
- padding: 2px 6px;
2432
- border-radius: 4px;
2433
- color: var(--neon-cyan);
2434
- font-size: 0.9em;
2435
- }
2436
-
2437
- /* Don't List */
2438
- .dont-list {
2439
- display: grid;
2440
- grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
2441
- gap: 20px;
2442
- }
2443
-
2444
- .dont-item {
2445
- display: flex;
2446
- align-items: center;
2447
- gap: 15px;
2448
- background: rgba(255, 0, 85, 0.05);
2449
- border: 1px solid rgba(255, 0, 85, 0.2);
2450
- border-radius: 10px;
2451
- padding: 20px;
2452
- transition: all 0.3s ease;
2453
- }
2454
-
2455
- .dont-item:hover {
2456
- border-color: #ff0055;
2457
- transform: scale(1.02);
2458
- }
2459
-
2460
- .dont-item i {
2461
- color: #ff0055;
2462
- font-size: 1.5rem;
2463
- flex-shrink: 0;
2464
- }
2465
-
2466
- .dont-item code {
2467
- background: rgba(255, 0, 85, 0.1);
2468
- padding: 2px 6px;
2469
- border-radius: 4px;
2470
- color: #ff0055;
2471
- font-size: 0.9em;
2472
- }
2473
-
2474
- /* Example Flow */
2475
- .example-flow {
2476
- background: rgba(0, 0, 0, 0.5);
2477
- border: 1px solid rgba(0, 255, 245, 0.2);
2478
- border-radius: 15px;
2479
- padding: 30px;
2480
- }
2481
-
2482
- .example-user-query {
2483
- background: var(--gradient-cyber);
2484
- border-radius: 10px;
2485
- padding: 20px;
2486
- margin-bottom: 30px;
2487
- color: var(--dark-bg);
2488
- font-weight: 600;
2489
- display: flex;
2490
- align-items: center;
2491
- gap: 15px;
2492
- }
2493
-
2494
- .example-user-query i {
2495
- font-size: 1.5rem;
2496
- }
2497
-
2498
- .example-steps {
2499
- display: flex;
2500
- flex-direction: column;
2501
- gap: 25px;
2502
- }
2503
-
2504
- .example-step {
2505
- background: rgba(0, 0, 0, 0.3);
2506
- border: 1px solid rgba(0, 255, 245, 0.1);
2507
- border-radius: 10px;
2508
- overflow: hidden;
2509
- }
2510
-
2511
- .step-label {
2512
- background: rgba(0, 255, 245, 0.1);
2513
- padding: 12px 20px;
2514
- font-weight: 600;
2515
- color: var(--neon-cyan);
2516
- border-bottom: 1px solid rgba(0, 255, 245, 0.1);
2517
- }
2518
-
2519
- .example-step pre {
2520
- margin: 0;
2521
- padding: 20px;
2522
- background: transparent;
2523
- overflow-x: auto;
2524
- }
2525
-
2526
- .example-step code {
2527
- font-family: 'Fira Code', monospace;
2528
- font-size: 0.9rem;
2529
- color: #e2e8f0;
2530
- line-height: 1.6;
2531
- }
2532
-
2533
- .example-result {
2534
- border-color: var(--neon-cyan);
2535
- box-shadow: 0 0 20px rgba(0, 255, 245, 0.2);
2536
- }
2537
-
2538
- .result-box {
2539
- background: rgba(0, 255, 245, 0.1);
2540
- padding: 20px;
2541
- margin: 0;
2542
- border-radius: 0;
2543
- }
2544
-
2545
- .result-box p {
2546
- margin: 0;
2547
- color: var(--neon-cyan);
2548
- font-weight: 600;
2549
- font-size: 1.1rem;
2550
- }
2551
-
2552
- /* Prompt Footer */
2553
- .prompt-footer {
2554
- text-align: center;
2555
- padding: 40px 20px;
2556
- background: rgba(0, 255, 245, 0.05);
2557
- border: 1px solid rgba(0, 255, 245, 0.2);
2558
- border-radius: 15px;
2559
- margin-top: 40px;
2560
- }
2561
-
2562
- .prompt-footer p {
2563
- font-size: 1.3rem;
2564
- color: var(--neon-cyan);
2565
- font-weight: 700;
2566
- margin: 0;
2567
- }
2568
-
2569
- .prompt-footer i {
2570
- margin-right: 10px;
2571
- }
2572
-
2573
- /* Download Section */
2574
- .download-section {
2575
- margin-top: 50px;
2576
- padding-top: 40px;
2577
- border-top: 1px solid rgba(0, 255, 245, 0.1);
2578
- }
2579
-
2580
- .download-content {
2581
- background: rgba(59, 130, 246, 0.1);
2582
- border: 1px solid rgba(59, 130, 246, 0.3);
2583
- border-radius: 15px;
2584
- padding: 30px;
2585
- text-align: center;
2586
- transition: all 0.3s ease;
2587
- }
2588
-
2589
- .download-content:hover {
2590
- border-color: var(--neon-blue);
2591
- box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
2592
- transform: translateY(-5px);
2593
- }
2594
-
2595
- .download-content h3 {
2596
- color: var(--neon-blue);
2597
- font-size: 1.5rem;
2598
- margin-bottom: 15px;
2599
- display: flex;
2600
- align-items: center;
2601
- justify-content: center;
2602
- gap: 12px;
2603
- font-family: 'Orbitron', sans-serif;
2604
- font-weight: 700;
2605
- }
2606
-
2607
- .download-content h3 i {
2608
- color: var(--neon-cyan);
2609
- }
2610
-
2611
- .download-content p {
2612
- color: var(--text-secondary);
2613
- font-size: 1rem;
2614
- margin-bottom: 25px;
2615
- }
2616
-
2617
- .download-btn {
2618
- display: inline-flex;
2619
- align-items: center;
2620
- gap: 12px;
2621
- padding: 15px 30px;
2622
- background: var(--neon-blue);
2623
- color: #fff;
2624
- text-decoration: none;
2625
- border-radius: 10px;
2626
- font-weight: 700;
2627
- font-size: 1rem;
2628
- text-transform: uppercase;
2629
- letter-spacing: 1px;
2630
- transition: all 0.3s ease;
2631
- box-shadow: 0 5px 20px rgba(59, 130, 246, 0.3);
2632
- }
2633
-
2634
- .download-btn:hover {
2635
- background: var(--neon-cyan);
2636
- transform: translateY(-3px);
2637
- box-shadow: 0 10px 30px rgba(0, 255, 245, 0.4);
2638
- }
2639
-
2640
- .download-btn i:first-child {
2641
- font-size: 1.3rem;
2642
- }
2643
-
2644
- .download-btn i:last-child {
2645
- font-size: 0.9rem;
2646
- opacity: 0.8;
2647
- }
2648
-
2649
- /* Scroll to Top Button */
2650
- .scroll-top {
2651
- position: fixed;
2652
- bottom: 30px;
2653
- right: 30px;
2654
- width: 50px;
2655
- height: 50px;
2656
- background: var(--neon-cyan);
2657
- border: none;
2658
- border-radius: 50%;
2659
- color: var(--dark-bg);
2660
- font-size: 1.2rem;
2661
- cursor: pointer;
2662
- opacity: 0;
2663
- visibility: hidden;
2664
- transition: all 0.3s ease;
2665
- box-shadow: 0 5px 20px rgba(0, 255, 245, 0.4);
2666
- z-index: 1000;
2667
- }
2668
-
2669
- .scroll-top.visible {
2670
- opacity: 1;
2671
- visibility: visible;
2672
- }
2673
-
2674
- .scroll-top:hover {
2675
- transform: translateY(-5px);
2676
- box-shadow: 0 10px 30px rgba(0, 255, 245, 0.6);
2677
- }
2678
-
2679
- /* Responsive Styles for Prompt Page */
2680
- @media (max-width: 768px) {
2681
- .prompt-container {
2682
- padding: 40px 15px 30px;
2683
- }
2684
-
2685
- .prompt-header h1 {
2686
- font-size: 2rem;
2687
- }
2688
-
2689
- .prompt-badges {
2690
- flex-direction: column;
2691
- align-items: center;
2692
- }
2693
-
2694
- .prompt-meta {
2695
- flex-direction: column;
2696
- gap: 15px;
2697
- }
2698
-
2699
- .prompt-section {
2700
- padding: 25px 20px;
2701
- }
2702
-
2703
- .section-intro h2 {
2704
- font-size: 1.5rem;
2705
- flex-direction: column;
2706
- gap: 10px;
2707
- }
2708
-
2709
- .rules-grid {
2710
- grid-template-columns: 1fr;
2711
- }
2712
-
2713
- .dont-list {
2714
- grid-template-columns: 1fr;
2715
- }
2716
-
2717
- .workflow-steps {
2718
- gap: 15px;
2719
- }
2720
-
2721
- .workflow-step {
2722
- flex-direction: column;
2723
- align-items: flex-start;
2724
- gap: 15px;
2725
- }
2726
-
2727
- .step-number {
2728
- width: 40px;
2729
- height: 40px;
2730
- font-size: 1rem;
2731
- }
2732
-
2733
- .tool-header {
2734
- flex-direction: column;
2735
- align-items: flex-start;
2736
- }
2737
-
2738
- .example-user-query {
2739
- flex-direction: column;
2740
- text-align: center;
2741
- }
2742
-
2743
- .scroll-top {
2744
- bottom: 20px;
2745
- right: 20px;
2746
- width: 45px;
2747
- height: 45px;
2748
- }
2749
-
2750
- .mode-table {
2751
- font-size: 0.85rem;
2752
- }
2753
-
2754
- .mode-table th,
2755
- .mode-table td {
2756
- padding: 10px 8px;
2757
- }
2758
-
2759
- .response-rule {
2760
- flex-direction: column;
2761
- gap: 15px;
2762
- }
2763
-
2764
- .rule-note {
2765
- flex-direction: column;
2766
- }
2767
-
2768
- .prompt-footer {
2769
- padding: 30px 15px;
2770
- }
2771
-
2772
- .prompt-footer p {
2773
- font-size: 1rem;
2774
- }
2775
-
2776
- .intro-section {
2777
- padding: 25px 20px;
2778
- }
2779
-
2780
- .intro-content h2 {
2781
- font-size: 1.5rem;
2782
- flex-direction: column;
2783
- gap: 10px;
2784
- }
2785
-
2786
- .intro-description p {
2787
- font-size: 1rem;
2788
- }
2789
-
2790
- .intro-mission {
2791
- padding: 15px;
2792
- font-size: 1rem !important;
2793
- }
2794
-
2795
- .download-section {
2796
- margin-top: 30px;
2797
- padding-top: 30px;
2798
- }
2799
-
2800
- .download-content {
2801
- padding: 20px;
2802
- }
2803
-
2804
- .download-content h3 {
2805
- font-size: 1.2rem;
2806
- flex-direction: column;
2807
- gap: 8px;
2808
- }
2809
-
2810
- .download-btn {
2811
- width: 100%;
2812
- justify-content: center;
2813
- padding: 12px 20px;
2814
- font-size: 0.9rem;
2815
- }
2816
- }