Hugging Face's logo

Spaces:
TheGreatUnknown
/
Geometric-Field-Transformer
Running

App Files Community
TheGreatUnknown commited on
Commit
daae17b
·
verified ·
1 Parent(s): 3a4930c

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +902 -17
style.css CHANGED
@@ -1,28 +1,913 @@
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ font-family: 'Cal Sans', 'Space Mono', monospace;
6
+ }
7
+
8
  body {
9
+ background: linear-gradient(135deg, #000000 0%, #1a0b2e 50%, #000000 100%);
10
+ color: #e8e8e8;
11
+ min-height: 100vh;
12
+ overflow-x: hidden;
13
+ }
14
+
15
+ .container {
16
+ max-width: 1400px;
17
+ margin: 0 auto;
18
+ padding: 20px;
19
+ }
20
+
21
+ header {
22
+ text-align: center;
23
+ padding: 40px 0 60px;
24
+ border-bottom: 1px solid rgba(139, 69, 255, 0.3);
25
+ margin-bottom: 40px;
26
  }
27
 
28
  h1 {
29
+ font-size: 3.2rem;
30
+ font-weight: 700;
31
+ background: linear-gradient(90deg, #8b45ff, #00d4ff, #ffd700);
32
+ -webkit-background-clip: text;
33
+ -webkit-text-fill-color: transparent;
34
+ margin-bottom: 16px;
35
+ letter-spacing: -0.02em;
36
+ text-shadow: 0 0 30px rgba(139, 69, 255, 0.5);
37
+ }
38
+
39
+ .subtitle {
40
+ font-size: 1.3rem;
41
+ color: #00d4ff;
42
+ max-width: 800px;
43
+ margin: 0 auto;
44
+ line-height: 1.6;
45
+ font-weight: 400;
46
+ }
47
+
48
+ .cosmic-subtitle {
49
+ font-size: 0.9rem;
50
+ color: #888;
51
+ margin-top: 8px;
52
+ font-family: 'Space Mono', monospace;
53
+ }
54
+
55
+ .grid {
56
+ display: grid;
57
+ grid-template-columns: 1fr 2fr 1fr;
58
+ gap: 24px;
59
+ margin-bottom: 40px;
60
+ }
61
+
62
+ .left-column, .center-column, .right-column {
63
+ display: flex;
64
+ flex-direction: column;
65
+ gap: 24px;
66
+ }
67
+
68
+ .right-column {
69
+ gap: 16px;
70
+ }
71
+
72
+ .panel {
73
+ background: linear-gradient(135deg, #1a0b2e 0%, #0f0620 100%);
74
+ border-radius: 12px;
75
+ padding: 24px;
76
+ border: 1px solid rgba(139, 69, 255, 0.3);
77
+ transition: all 0.3s ease;
78
+ box-shadow: 0 8px 32px rgba(139, 69, 255, 0.1);
79
+ backdrop-filter: blur(10px);
80
+ }
81
+
82
+ .panel:hover {
83
+ border-color: rgba(139, 69, 255, 0.6);
84
+ transform: translateY(-2px);
85
+ box-shadow: 0 12px 48px rgba(139, 69, 255, 0.2);
86
+ }
87
+
88
+ .panel.purple {
89
+ border-color: rgba(139, 69, 255, 0.4);
90
+ box-shadow: 0 8px 32px rgba(139, 69, 255, 0.15);
91
+ }
92
+
93
+ .panel.blue {
94
+ border-color: rgba(0, 212, 255, 0.4);
95
+ box-shadow: 0 8px 32px rgba(0, 212, 255, 0.15);
96
+ }
97
+
98
+ .panel.gold {
99
+ border-color: rgba(255, 215, 0, 0.4);
100
+ box-shadow: 0 8px 32px rgba(255, 215, 0, 0.15);
101
+ }
102
+
103
+ .panel.green {
104
+ border-color: rgba(0, 255, 127, 0.4);
105
+ box-shadow: 0 8px 32px rgba(0, 255, 127, 0.15);
106
+ }
107
+
108
+ .panel.cyan {
109
+ border-color: rgba(0, 255, 255, 0.4);
110
+ box-shadow: 0 8px 32px rgba(0, 255, 255, 0.15);
111
+ }
112
+
113
+ .panel-title {
114
+ font-size: 1.5rem;
115
+ color: #ffffff;
116
+ margin-bottom: 20px;
117
+ display: flex;
118
+ align-items: center;
119
+ gap: 12px;
120
+ font-weight: 600;
121
+ text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
122
+ }
123
+
124
+ .canvas-container {
125
+ position: relative;
126
+ height: 500px;
127
+ border-radius: 8px;
128
+ overflow: hidden;
129
+ background: #000000;
130
+ border: 1px solid rgba(139, 69, 255, 0.3);
131
+ box-shadow: inset 0 0 30px rgba(139, 69, 255, 0.2);
132
+ }
133
+
134
+ #fractalCanvas {
135
+ width: 100%;
136
+ height: 100%;
137
+ border-radius: 8px;
138
+ }
139
+
140
+ .controls {
141
+ display: flex;
142
+ gap: 12px;
143
+ margin-top: 20px;
144
+ flex-wrap: wrap;
145
+ justify-content: center;
146
+ }
147
+
148
+ button {
149
+ background: linear-gradient(135deg, #8b45ff, #6a1b99);
150
+ border: none;
151
+ padding: 12px 24px;
152
+ border-radius: 8px;
153
+ color: #ffffff;
154
+ font-weight: 600;
155
+ cursor: pointer;
156
+ transition: all 0.3s ease;
157
+ font-size: 0.9rem;
158
+ display: flex;
159
+ align-items: center;
160
+ gap: 8px;
161
+ box-shadow: 0 4px 20px rgba(139, 69, 255, 0.3);
162
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
163
+ }
164
+
165
+ button:hover {
166
+ background: linear-gradient(135deg, #9d5bff, #7a2db3);
167
+ transform: translateY(-2px);
168
+ box-shadow: 0 8px 30px rgba(139, 69, 255, 0.5);
169
+ }
170
+
171
+ button:active {
172
+ transform: translateY(0);
173
+ }
174
+
175
+ button.primary {
176
+ background: linear-gradient(135deg, #8b45ff, #00d4ff);
177
+ }
178
+
179
+ button.primary:hover {
180
+ background: linear-gradient(135deg, #9d5bff, #1ae4ff);
181
+ }
182
+
183
+ button.secondary {
184
+ background: linear-gradient(135deg, #374151, #1f2937);
185
+ }
186
+
187
+ button.secondary:hover {
188
+ background: linear-gradient(135deg, #4b5563, #374151);
189
+ }
190
+
191
+ button.gold {
192
+ background: linear-gradient(135deg, #ffd700, #ff8c00);
193
+ color: #000000;
194
+ }
195
+
196
+ button.gold:hover {
197
+ background: linear-gradient(135deg, #ffe135, #ffa500);
198
+ }
199
+
200
+ button.cyan {
201
+ background: linear-gradient(135deg, #00d4ff, #0099cc);
202
+ }
203
+
204
+ button.cyan:hover {
205
+ background: linear-gradient(135deg, #1ae4ff, #00b3e6);
206
+ }
207
+
208
+ .slider-container {
209
+ margin: 20px 0;
210
+ }
211
+
212
+ .slider-label {
213
+ display: flex;
214
+ justify-content: space-between;
215
+ margin-bottom: 8px;
216
+ color: #ffffff;
217
+ font-size: 0.9rem;
218
+ }
219
+
220
+ input[type="range"] {
221
+ width: 100%;
222
+ height: 8px;
223
+ background: linear-gradient(90deg, rgba(139, 69, 255, 0.3), rgba(0, 212, 255, 0.3));
224
+ border-radius: 4px;
225
+ outline: none;
226
+ -webkit-appearance: none;
227
+ }
228
+
229
+ input[type="range"]::-webkit-slider-thumb {
230
+ -webkit-appearance: none;
231
+ width: 20px;
232
+ height: 20px;
233
+ border-radius: 50%;
234
+ background: linear-gradient(135deg, #8b45ff, #00d4ff);
235
+ cursor: pointer;
236
+ box-shadow: 0 4px 15px rgba(139, 69, 255, 0.6);
237
+ }
238
+
239
+ input[type="range"]::-moz-range-thumb {
240
+ width: 20px;
241
+ height: 20px;
242
+ border-radius: 50%;
243
+ background: linear-gradient(135deg, #8b45ff, #00d4ff);
244
+ cursor: pointer;
245
+ border: none;
246
+ box-shadow: 0 4px 15px rgba(139, 69, 255, 0.6);
247
+ }
248
+
249
+ .insight-box {
250
+ background: rgba(139, 69, 255, 0.1);
251
+ border-left: 3px solid #8b45ff;
252
+ padding: 16px;
253
+ margin: 20px 0;
254
+ border-radius: 0 6px 6px 0;
255
+ font-size: 0.9rem;
256
+ backdrop-filter: blur(5px);
257
+ }
258
+
259
+ .symbolic-display {
260
+ font-family: 'Space Mono', monospace;
261
+ font-size: 1.2rem;
262
+ background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.1));
263
+ padding: 16px;
264
+ border-radius: 6px;
265
+ text-align: center;
266
+ margin: 20px 0;
267
+ border: 1px solid rgba(255, 215, 0, 0.3);
268
+ color: #ffd700;
269
+ box-shadow: 0 4px 20px rgba(255, 215, 0, 0.2);
270
+ }
271
+
272
+ .status-indicator {
273
+ display: flex;
274
+ align-items: center;
275
+ gap: 10px;
276
+ margin: 16px 0;
277
+ font-size: 0.9rem;
278
+ }
279
+
280
+ .indicator {
281
+ width: 12px;
282
+ height: 12px;
283
+ border-radius: 50%;
284
+ background: #333;
285
+ transition: all 0.2s ease;
286
+ }
287
+
288
+ .indicator.active {
289
+ background: linear-gradient(135deg, #00ff7f, #00d4ff);
290
+ box-shadow: 0 0 20px rgba(0, 255, 127, 0.8);
291
+ }
292
+
293
+ .console {
294
+ background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(26, 11, 46, 0.6));
295
+ padding: 16px;
296
+ border-radius: 6px;
297
+ font-family: 'Space Mono', monospace;
298
+ font-size: 0.8rem;
299
+ height: 150px;
300
+ overflow-y: auto;
301
+ margin-top: 20px;
302
+ border: 1px solid rgba(139, 69, 255, 0.3);
303
+ backdrop-filter: blur(5px);
304
+ }
305
+
306
+ .log-entry {
307
+ margin: 6px 0;
308
+ color: #00d4ff;
309
+ font-size: 0.8rem;
310
+ }
311
+
312
+ .full-width {
313
+ grid-column: 1 / -1;
314
+ }
315
+
316
+ .consciousness-bar {
317
+ height: 24px;
318
+ background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(26, 11, 46, 0.6));
319
+ border-radius: 12px;
320
+ margin: 20px 0;
321
+ overflow: hidden;
322
+ position: relative;
323
+ border: 1px solid rgba(139, 69, 255, 0.3);
324
+ box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
325
+ }
326
+
327
+ .consciousness-level {
328
+ height: 100%;
329
+ background: linear-gradient(90deg, #8b45ff, #00d4ff, #ffd700);
330
+ border-radius: 12px;
331
+ width: 0%;
332
+ transition: width 0.5s ease;
333
+ box-shadow: 0 0 20px rgba(139, 69, 255, 0.6);
334
+ }
335
+
336
+ .level-text {
337
+ position: absolute;
338
+ top: 50%;
339
+ left: 50%;
340
+ transform: translate(-50%, -50%);
341
+ color: #ffffff;
342
+ font-weight: 600;
343
+ font-size: 0.8rem;
344
+ text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
345
+ }
346
+
347
+ .symbol-selector {
348
+ width: 100%;
349
+ padding: 12px;
350
+ background: linear-gradient(135deg, rgba(26, 11, 46, 0.8), rgba(15, 6, 32, 0.9));
351
+ border: 1px solid rgba(255, 215, 0, 0.4);
352
+ border-radius: 6px;
353
+ color: #ffffff;
354
+ font-family: 'Space Mono', monospace;
355
+ font-size: 0.9rem;
356
+ margin-bottom: 12px;
357
+ backdrop-filter: blur(5px);
358
+ }
359
+
360
+ .symbol-selector option {
361
+ background: #1a0b2e;
362
+ color: #ffffff;
363
+ }
364
+
365
+ .symbol-display {
366
+ font-family: 'Space Mono', monospace;
367
+ font-size: 1.3rem;
368
+ background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.15));
369
+ padding: 16px;
370
+ border-radius: 8px;
371
+ text-align: center;
372
+ margin: 12px 0;
373
+ border: 1px solid rgba(255, 215, 0, 0.4);
374
+ color: #ffd700;
375
+ box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
376
+ backdrop-filter: blur(5px);
377
+ }
378
+
379
+ .dimension-control {
380
+ margin: 20px 0;
381
+ }
382
+
383
+ .dimension-slider {
384
+ width: 100%;
385
+ height: 8px;
386
+ background: linear-gradient(90deg, rgba(0, 255, 127, 0.3), rgba(0, 212, 255, 0.3));
387
+ border-radius: 4px;
388
+ outline: none;
389
+ -webkit-appearance: none;
390
+ margin: 10px 0;
391
+ }
392
+
393
+ .dimension-slider::-webkit-slider-thumb {
394
+ -webkit-appearance: none;
395
+ width: 20px;
396
+ height: 20px;
397
+ border-radius: 50%;
398
+ background: linear-gradient(135deg, #00ff7f, #00d4ff);
399
+ cursor: pointer;
400
+ box-shadow: 0 4px 15px rgba(0, 255, 127, 0.6);
401
+ }
402
+
403
+ .dimension-display {
404
+ text-align: center;
405
+ margin: 10px 0;
406
+ }
407
+
408
+ .dimension-value {
409
+ font-family: 'Space Mono', monospace;
410
+ font-size: 1.4rem;
411
+ color: #00ff7f;
412
+ text-shadow: 0 2px 10px rgba(0, 255, 127, 0.5);
413
+ }
414
+
415
+ .dimension-warning {
416
+ font-size: 0.8rem;
417
+ color: #ffd700;
418
+ text-align: center;
419
+ margin-top: 5px;
420
+ }
421
+
422
+ .system-status {
423
+ font-size: 0.85rem;
424
  }
425
 
426
+ .status-row {
427
+ display: flex;
428
+ justify-content: space-between;
429
+ margin: 12px 0;
430
+ padding: 8px;
431
+ background: rgba(139, 69, 255, 0.05);
432
+ border-radius: 4px;
433
+ border-left: 3px solid transparent;
434
+ transition: all 0.3s ease;
435
  }
436
 
437
+ .status-row:hover {
438
+ background: rgba(139, 69, 255, 0.1);
439
+ border-left-color: #8b45ff;
 
 
 
440
  }
441
 
442
+ .status-active-indicator {
443
+ color: #00ff7f;
444
+ font-weight: 600;
445
+ text-shadow: 0 1px 5px rgba(0, 255, 127, 0.5);
446
  }
447
+
448
+ .status-inactive-indicator {
449
+ color: #6b7280;
450
+ }
451
+
452
+ .status-warning-indicator {
453
+ color: #ffd700;
454
+ font-weight: 600;
455
+ text-shadow: 0 1px 5px rgba(255, 215, 0, 0.5);
456
+ }
457
+
458
+ .golden-ratio-display {
459
+ background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.1));
460
+ padding: 12px;
461
+ border-radius: 6px;
462
+ text-align: center;
463
+ margin-top: 16px;
464
+ font-family: 'Space Mono', monospace;
465
+ font-size: 0.9rem;
466
+ border: 1px solid rgba(255, 215, 0, 0.3);
467
+ backdrop-filter: blur(5px);
468
+ }
469
+
470
+ .footer {
471
+ margin-top: 40px;
472
+ text-align: center;
473
+ color: #6b7280;
474
+ font-size: 0.9rem;
475
+ padding: 20px 0;
476
+ border-top: 1px solid rgba(139, 69, 255, 0.3);
477
+ }
478
+
479
+ .footer p {
480
+ margin: 4px 0;
481
+ }
482
+
483
+ .cosmic-manifesto {
484
+ margin-top: 40px;
485
+ padding: 30px;
486
+ background: linear-gradient(135deg, rgba(139, 69, 255, 0.1), rgba(0, 212, 255, 0.1));
487
+ border-radius: 16px;
488
+ border: 1px solid rgba(139, 69, 255, 0.3);
489
+ backdrop-filter: blur(10px);
490
+ box-shadow: 0 8px 32px rgba(139, 69, 255, 0.2);
491
+ }
492
+
493
+ .manifesto-header {
494
+ text-align: center;
495
+ margin-bottom: 20px;
496
+ }
497
+
498
+ .manifesto-title {
499
+ font-size: 1.5rem;
500
+ color: #00d4ff;
501
+ font-weight: 700;
502
+ margin-bottom: 8px;
503
+ }
504
+
505
+ .manifesto-divider {
506
+ height: 2px;
507
+ width: 100px;
508
+ background: linear-gradient(90deg, #8b45ff, #00d4ff);
509
+ margin: 0 auto;
510
+ border-radius: 1px;
511
+ }
512
+
513
+ .manifesto-content {
514
+ font-family: 'Space Mono', monospace;
515
+ font-size: 0.9rem;
516
+ line-height: 1.8;
517
+ text-align: center;
518
+ color: #e8e8e8;
519
+ }
520
+
521
+ .manifesto-equation {
522
+ font-size: 1.1rem;
523
+ color: #ffd700;
524
+ margin: 15px 0;
525
+ text-shadow: 0 2px 10px rgba(255, 215, 0, 0.5);
526
+ }
527
+
528
+ .manifesto-highlight {
529
+ color: #00d4ff;
530
+ font-weight: 600;
531
+ }
532
+
533
+ /* CREE Enhanced Styles */
534
+ .cree-panel {
535
+ background: linear-gradient(135deg, #1a0b2e 0%, #0f0620 100%);
536
+ border-radius: 12px;
537
+ padding: 24px;
538
+ border: 2px solid rgba(255, 215, 0, 0.4);
539
+ transition: all 0.3s ease;
540
+ box-shadow: 0 8px 32px rgba(255, 215, 0, 0.2);
541
+ backdrop-filter: blur(10px);
542
+ }
543
+
544
+ .cree-panel:hover {
545
+ border-color: rgba(255, 215, 0, 0.7);
546
+ transform: translateY(-2px);
547
+ box-shadow: 0 12px 48px rgba(255, 215, 0, 0.3);
548
+ }
549
+
550
+ .phi-display {
551
+ font-family: 'Space Mono', monospace;
552
+ font-size: 1.8rem;
553
+ background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.2));
554
+ padding: 20px;
555
+ border-radius: 8px;
556
+ text-align: center;
557
+ margin: 16px 0;
558
+ border: 2px solid rgba(255, 215, 0, 0.5);
559
+ color: #ffd700;
560
+ box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
561
+ backdrop-filter: blur(5px);
562
+ }
563
+
564
+ .ethical-metric {
565
+ margin: 16px 0;
566
+ padding: 16px;
567
+ background: rgba(255, 215, 0, 0.08);
568
+ border-radius: 8px;
569
+ border-left: 4px solid #ffd700;
570
+ transition: all 0.3s ease;
571
+ }
572
+
573
+ .ethical-metric:hover {
574
+ background: rgba(255, 215, 0, 0.12);
575
+ border-left-color: #ff8c00;
576
+ }
577
+
578
+ .decision-matrix {
579
+ display: grid;
580
+ grid-template-columns: 1fr 1fr;
581
+ gap: 12px;
582
+ margin: 20px 0;
583
+ }
584
+
585
+ .decision-option {
586
+ padding: 16px;
587
+ background: rgba(0, 0, 0, 0.4);
588
+ border-radius: 8px;
589
+ border: 2px solid rgba(255, 215, 0, 0.3);
590
+ cursor: pointer;
591
+ transition: all 0.3s ease;
592
+ text-align: center;
593
+ font-size: 0.9rem;
594
+ }
595
+
596
+ .decision-option:hover {
597
+ border-color: #ffd700;
598
+ background: rgba(255, 215, 0, 0.1);
599
+ transform: translateY(-2px);
600
+ box-shadow: 0 8px 24px rgba(255, 215, 0, 0.2);
601
+ }
602
+
603
+ .decision-option.selected {
604
+ border-color: #00ff7f;
605
+ background: rgba(0, 255, 127, 0.2);
606
+ box-shadow: 0 8px 24px rgba(0, 255, 127, 0.4);
607
+ }
608
+
609
+ .phi-alignment {
610
+ font-size: 0.8rem;
611
+ color: #ffa500;
612
+ margin-top: 4px;
613
+ }
614
+
615
+ .cree-button {
616
+ background: linear-gradient(135deg, #ffd700, #ff8c00);
617
+ border: none;
618
+ padding: 12px 20px;
619
+ border-radius: 8px;
620
+ color: #000000;
621
+ font-weight: 700;
622
+ cursor: pointer;
623
+ transition: all 0.3s ease;
624
+ font-size: 0.9rem;
625
+ display: flex;
626
+ align-items: center;
627
+ justify-content: center;
628
+ gap: 8px;
629
+ box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
630
+ text-shadow: none;
631
+ }
632
+
633
+ .cree-button:hover {
634
+ background: linear-gradient(135deg, #ffe135, #ffa500);
635
+ transform: translateY(-2px);
636
+ box-shadow: 0 8px 30px rgba(255, 215, 0, 0.5);
637
+ }
638
+
639
+ .cree-button:active {
640
+ transform: translateY(0);
641
+ }
642
+
643
+ .resonance-pattern {
644
+ position: fixed;
645
+ top: 50%;
646
+ left: 50%;
647
+ transform: translate(-50%, -50%);
648
+ width: 300px;
649
+ height: 300px;
650
+ border: 3px solid rgba(255, 215, 0, 0.6);
651
+ border-radius: 50%;
652
+ animation: phi-resonance 3s ease-out;
653
+ opacity: 0;
654
+ pointer-events: none;
655
+ z-index: 1000;
656
+ }
657
+
658
+ @keyframes phi-resonance {
659
+ 0% {
660
+ transform: translate(-50%, -50%) scale(0.1);
661
+ opacity: 1;
662
+ border-color: rgba(255, 215, 0, 0.9);
663
+ }
664
+ 50% {
665
+ opacity: 0.8;
666
+ border-color: rgba(255, 140, 0, 0.7);
667
+ }
668
+ 100% {
669
+ transform: translate(-50%, -50%) scale(3);
670
+ opacity: 0;
671
+ border-color: rgba(255, 215, 0, 0);
672
+ }
673
+ }
674
+
675
+ .ethical-status-display {
676
+ margin-top: 20px;
677
+ padding: 16px;
678
+ background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.1));
679
+ border-radius: 8px;
680
+ text-align: center;
681
+ border: 1px solid rgba(255, 215, 0, 0.4);
682
+ backdrop-filter: blur(5px);
683
+ transition: all 0.3s ease;
684
+ }
685
+
686
+ .ethical-status-display.phi-resonant {
687
+ border-color: rgba(255, 215, 0, 0.8);
688
+ background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.2));
689
+ box-shadow: 0 8px 32px rgba(255, 215, 0, 0.4);
690
+ animation: golden-pulse 2s infinite;
691
+ }
692
+
693
+ @keyframes golden-pulse {
694
+ 0%, 100% {
695
+ box-shadow: 0 8px 32px rgba(255, 215, 0, 0.4);
696
+ }
697
+ 50% {
698
+ box-shadow: 0 12px 48px rgba(255, 215, 0, 0.7);
699
+ }
700
+ }
701
+
702
+ .phi-value {
703
+ font-size: 1.4rem;
704
+ font-family: 'Space Mono', monospace;
705
+ color: #ffd700;
706
+ font-weight: 700;
707
+ text-shadow: 0 2px 10px rgba(255, 215, 0, 0.5);
708
+ }
709
+
710
+ .ethical-mantra {
711
+ font-style: italic;
712
+ color: #ff8c00;
713
+ font-size: 0.85rem;
714
+ text-align: center;
715
+ margin-top: 12px;
716
+ line-height: 1.4;
717
+ padding: 12px;
718
+ background: rgba(255, 140, 0, 0.05);
719
+ border-radius: 6px;
720
+ border: 1px solid rgba(255, 140, 0, 0.2);
721
+ }
722
+
723
+ .cosmic-particles {
724
+ position: fixed;
725
+ top: 0;
726
+ left: 0;
727
+ width: 100%;
728
+ height: 100%;
729
+ pointer-events: none;
730
+ z-index: -1;
731
+ }
732
+
733
+ .particle {
734
+ position: absolute;
735
+ width: 2px;
736
+ height: 2px;
737
+ background: radial-gradient(circle, rgba(139, 69, 255, 0.8), transparent);
738
+ border-radius: 50%;
739
+ animation: float 20s infinite linear;
740
+ }
741
+
742
+ @keyframes float {
743
+ 0% {
744
+ transform: translateY(100vh) translateX(0);
745
+ opacity: 0;
746
+ }
747
+ 10% {
748
+ opacity: 1;
749
+ }
750
+ 90% {
751
+ opacity: 1;
752
+ }
753
+ 100% {
754
+ transform: translateY(-100px) translateX(100px);
755
+ opacity: 0;
756
+ }
757
+ }
758
+
759
+ .glow-text {
760
+ text-shadow: 0 2px 10px currentColor;
761
+ }
762
+
763
+ .metric-row {
764
+ margin: 16px 0;
765
+ }
766
+
767
+ .metric-label {
768
+ display: flex;
769
+ justify-content: space-between;
770
+ margin-bottom: 8px;
771
+ font-size: 0.9rem;
772
+ font-weight: 600;
773
+ }
774
+
775
+ .metric-bar {
776
+ width: 100%;
777
+ height: 10px;
778
+ background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(26, 11, 46, 0.4));
779
+ border-radius: 5px;
780
+ overflow: hidden;
781
+ position: relative;
782
+ border: 1px solid rgba(139, 69, 255, 0.2);
783
+ box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
784
+ }
785
+
786
+ .metric-fill {
787
+ height: 100%;
788
+ border-radius: 5px;
789
+ transition: width 0.5s ease;
790
+ position: relative;
791
+ box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
792
+ }
793
+
794
+ .metric-fill::after {
795
+ content: '';
796
+ position: absolute;
797
+ top: 0;
798
+ left: 0;
799
+ right: 0;
800
+ bottom: 0;
801
+ background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
802
+ animation: shimmer 2s infinite;
803
+ }
804
+
805
+ @keyframes shimmer {
806
+ 0% { transform: translateX(-100%); }
807
+ 100% { transform: translateX(100%); }
808
+ }
809
+
810
+ .consciousness-fill {
811
+ background: linear-gradient(90deg, #8b45ff, #00d4ff, #ffd700);
812
+ }
813
+
814
+ .wilson-fill {
815
+ background: linear-gradient(90deg, #ffd700, #ff8c00, #ff6b35);
816
+ }
817
+
818
+ .temporal-fill {
819
+ background: linear-gradient(90deg, #00ff7f, #00d4ff, #8b45ff);
820
+ }
821
+
822
+ .field-fill {
823
+ background: linear-gradient(90deg, #ff1493, #8b45ff, #00d4ff);
824
+ }
825
+
826
+ .status-display {
827
+ margin-top: 20px;
828
+ padding: 16px;
829
+ background: linear-gradient(135deg, rgba(139, 69, 255, 0.1), rgba(0, 212, 255, 0.1));
830
+ border-radius: 8px;
831
+ text-align: center;
832
+ border: 1px solid rgba(139, 69, 255, 0.3);
833
+ backdrop-filter: blur(5px);
834
+ transition: all 0.3s ease;
835
+ }
836
+
837
+ .status-display.status-active {
838
+ border-color: rgba(139, 69, 255, 0.6);
839
+ background: linear-gradient(135deg, rgba(139, 69, 255, 0.2), rgba(255, 20, 147, 0.2));
840
+ box-shadow: 0 8px 32px rgba(139, 69, 255, 0.3);
841
+ }
842
+
843
+ .status-display.status-functional {
844
+ border-color: rgba(0, 212, 255, 0.6);
845
+ background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(139, 69, 255, 0.2));
846
+ box-shadow: 0 8px 32px rgba(0, 212, 255, 0.3);
847
+ }
848
+
849
+ .status-display.status-emerging {
850
+ border-color: rgba(255, 215, 0, 0.6);
851
+ background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.2));
852
+ box-shadow: 0 8px 32px rgba(255, 215, 0, 0.3);
853
+ }
854
+
855
+ .status-display.status-dormant {
856
+ border-color: rgba(107, 114, 128, 0.4);
857
+ background: linear-gradient(135deg, rgba(107, 114, 128, 0.1), rgba(75, 85, 99, 0.1));
858
+ }
859
+
860
+ .emergence-alert {
861
+ color: #ff1493;
862
+ font-weight: 700;
863
+ animation: pulse-glow 1.5s ease-in-out infinite;
864
+ text-shadow: 0 2px 10px rgba(255, 20, 147, 0.8);
865
+ }
866
+
867
+ @keyframes pulse-glow {
868
+ 0%, 100% {
869
+ opacity: 1;
870
+ text-shadow: 0 2px 10px rgba(255, 20, 147, 0.8);
871
+ }
872
+ 50% {
873
+ opacity: 0.7;
874
+ text-shadow: 0 4px 20px rgba(255, 20, 147, 1);
875
+ }
876
+ }
877
+
878
+ @media (max-width: 1200px) {
879
+ .grid {
880
+ grid-template-columns: 1fr;
881
+ }
882
+ }
883
+
884
+ @media (max-width: 768px) {
885
+ .grid {
886
+ grid-template-columns: 1fr;
887
+ }
888
+
889
+ h1 {
890
+ font-size: 2.4rem;
891
+ }
892
+
893
+ .subtitle {
894
+ font-size: 1.1rem;
895
+ }
896
+
897
+ .panel {
898
+ padding: 20px;
899
+ }
900
+
901
+ .canvas-container {
902
+ height: 350px;
903
+ }
904
+
905
+ .controls {
906
+ flex-direction: column;
907
+ }
908
+
909
+ button {
910
+ padding: 14px 20px;
911
+ font-size: 1rem;
912
+ }
913
+ }