ltcai 4.5.1 → 4.6.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 (34) hide show
  1. package/README.md +123 -179
  2. package/docs/CHANGELOG.md +120 -0
  3. package/docs/V4_6_0_LIVING_BRAIN_EXPERIENCE_REPORT.md +72 -0
  4. package/docs/V4_6_1_RELEASE_REFRESH_REPORT.md +42 -0
  5. package/docs/V4_DIGITAL_BRAIN_RECOVERY.md +19 -17
  6. package/frontend/index.html +2 -2
  7. package/frontend/src/App.tsx +653 -208
  8. package/frontend/src/api/client.ts +1 -0
  9. package/frontend/src/components/BrainConversation.tsx +309 -0
  10. package/frontend/src/components/FirstRunGuide.tsx +4 -4
  11. package/frontend/src/components/LivingBrain.tsx +212 -0
  12. package/frontend/src/components/ProductFlow.tsx +654 -0
  13. package/frontend/src/pages/Ask.tsx +2 -229
  14. package/frontend/src/pages/Brain.tsx +68 -49
  15. package/frontend/src/routes.ts +15 -26
  16. package/frontend/src/styles.css +2375 -87
  17. package/lattice_brain/__init__.py +1 -1
  18. package/lattice_brain/runtime/multi_agent.py +1 -1
  19. package/latticeai/__init__.py +1 -1
  20. package/latticeai/core/marketplace.py +1 -1
  21. package/latticeai/core/workspace_os.py +1 -1
  22. package/package.json +2 -2
  23. package/src-tauri/Cargo.lock +1 -1
  24. package/src-tauri/Cargo.toml +1 -1
  25. package/src-tauri/tauri.conf.json +1 -1
  26. package/static/app/asset-manifest.json +5 -5
  27. package/static/app/assets/index-7U86v70r.css +2 -0
  28. package/static/app/assets/index-D1jAPQws.js +16 -0
  29. package/static/app/assets/index-D1jAPQws.js.map +1 -0
  30. package/static/app/index.html +4 -4
  31. package/static/manifest.json +1 -1
  32. package/static/app/assets/index-3G8qcrIS.js +0 -336
  33. package/static/app/assets/index-3G8qcrIS.js.map +0 -1
  34. package/static/app/assets/index-C0wYZp7k.css +0 -2
@@ -3,46 +3,43 @@
3
3
 
4
4
  :root {
5
5
  color-scheme: dark;
6
- --background: 28 18% 7%;
7
- --foreground: 43 24% 94%;
8
- --card: 30 14% 11%;
9
- --card-foreground: 43 24% 94%;
10
- --muted: 31 12% 17%;
11
- --muted-foreground: 39 10% 66%;
12
- --primary: 166 68% 52%;
13
- --primary-foreground: 28 20% 7%;
14
- --secondary: 258 22% 22%;
15
- --secondary-foreground: 43 24% 94%;
16
- --destructive: 356 73% 59%;
17
- --destructive-foreground: 0 0% 100%;
18
- --border: 34 10% 26%;
19
- --input: 34 10% 30%;
20
- --ring: 166 68% 52%;
21
- --brain: 166 68% 52%;
22
- --ask: 205 80% 67%;
23
- --capture: 136 58% 56%;
24
- --act: 38 91% 60%;
25
- --library: 278 62% 70%;
26
- --system: 5 72% 66%;
6
+ /* Digital Brain — warm, private, alive */
7
+ --bg: 22 18% 5.5%;
8
+ --bg-elevated: 24 16% 8%;
9
+ --fg: 36 18% 94%;
10
+ --fg-muted: 30 12% 68%;
11
+ --brain-core: 38 72% 68%; /* warm ember-gold */
12
+ --brain-halo: 38 65% 78%;
13
+ --memory: 168 52% 62%; /* quiet teal pulse */
14
+ --knowledge: 200 48% 70%;
15
+ --connection: 280 42% 72%; /* soft violet for relationships */
16
+ --map: 32 38% 74%; /* contemplative gold for the Map */
17
+ --surface: 24 14% 9%;
18
+ --surface-glass: 24 14% 9% / 0.82;
19
+ --border: 28 12% 22%;
20
+ --accent: 38 72% 68%;
21
+ --destructive: 12 62% 58%;
22
+ --ring: 38 72% 68%;
27
23
  }
28
24
 
29
25
  :root[data-theme="light"] {
30
26
  color-scheme: light;
31
- --background: 42 29% 96%;
32
- --foreground: 26 18% 11%;
33
- --card: 40 31% 99%;
34
- --card-foreground: 26 18% 11%;
35
- --muted: 42 18% 90%;
36
- --muted-foreground: 30 10% 38%;
37
- --primary: 170 70% 30%;
38
- --primary-foreground: 0 0% 100%;
39
- --secondary: 254 18% 88%;
40
- --secondary-foreground: 26 18% 11%;
41
- --destructive: 356 70% 47%;
42
- --destructive-foreground: 0 0% 100%;
43
- --border: 38 14% 76%;
44
- --input: 38 14% 70%;
45
- --ring: 170 70% 30%;
27
+ --bg: 36 28% 96%;
28
+ --bg-elevated: 36 26% 98%;
29
+ --fg: 24 16% 11%;
30
+ --fg-muted: 28 10% 42%;
31
+ --brain-core: 32 58% 46%;
32
+ --brain-halo: 32 52% 58%;
33
+ --memory: 170 48% 42%;
34
+ --knowledge: 205 42% 48%;
35
+ --connection: 275 38% 52%;
36
+ --map: 30 36% 52%;
37
+ --surface: 36 22% 96%;
38
+ --surface-glass: 36 22% 96% / 0.9;
39
+ --border: 28 14% 78%;
40
+ --accent: 32 58% 46%;
41
+ --destructive: 10 58% 48%;
42
+ --ring: 32 58% 46%;
46
43
  }
47
44
 
48
45
  @theme inline {
@@ -100,13 +97,13 @@ button {
100
97
  isolation: isolate;
101
98
  overflow-x: hidden;
102
99
  background:
103
- linear-gradient(135deg, hsl(28 18% 7%) 0%, hsl(31 17% 9%) 46%, hsl(258 18% 10%) 100%),
100
+ linear-gradient(135deg, hsl(168 12% 7%) 0%, hsl(218 13% 9%) 48%, hsl(288 10% 9%) 100%),
104
101
  repeating-linear-gradient(90deg, hsl(var(--border) / 0.16) 0 1px, transparent 1px 56px);
105
102
  }
106
103
 
107
104
  :root[data-theme="light"] .app-backdrop {
108
105
  background:
109
- linear-gradient(135deg, hsl(42 29% 96%) 0%, hsl(43 30% 92%) 52%, hsl(254 28% 94%) 100%),
106
+ linear-gradient(135deg, hsl(180 16% 96%) 0%, hsl(204 18% 94%) 52%, hsl(286 16% 96%) 100%),
110
107
  repeating-linear-gradient(90deg, hsl(var(--border) / 0.24) 0 1px, transparent 1px 56px);
111
108
  }
112
109
 
@@ -193,11 +190,368 @@ button {
193
190
  background:
194
191
  linear-gradient(180deg, hsl(var(--card) / 0.94), hsl(var(--card) / 0.82)),
195
192
  linear-gradient(90deg, hsl(var(--primary) / 0.08), transparent 36%, hsl(var(--library) / 0.06));
196
- box-shadow: 0 18px 52px hsl(25 24% 3% / 0.28);
193
+ box-shadow: 0 18px 52px hsl(200 22% 3% / 0.3);
197
194
  }
198
195
 
199
196
  :root[data-theme="light"] .premium-surface {
200
- box-shadow: 0 18px 48px hsl(32 17% 54% / 0.16);
197
+ box-shadow: 0 18px 48px hsl(198 18% 54% / 0.16);
198
+ }
199
+
200
+ .product-flow-shell {
201
+ position: relative;
202
+ isolation: isolate;
203
+ display: grid;
204
+ min-height: 100vh;
205
+ place-items: center;
206
+ overflow: hidden;
207
+ padding: clamp(1rem, 3vw, 2rem);
208
+ background:
209
+ linear-gradient(135deg, hsl(168 14% 6%) 0%, hsl(215 16% 8%) 52%, hsl(262 13% 8%) 100%),
210
+ repeating-linear-gradient(90deg, hsl(var(--border) / 0.12) 0 1px, transparent 1px 54px);
211
+ }
212
+
213
+ .product-flow-shell::before {
214
+ content: "";
215
+ position: absolute;
216
+ inset: 0;
217
+ z-index: -2;
218
+ background-image:
219
+ linear-gradient(hsl(var(--border) / 0.12) 1px, transparent 1px),
220
+ linear-gradient(90deg, hsl(var(--border) / 0.12) 1px, transparent 1px);
221
+ background-size: 72px 72px;
222
+ mask-image: linear-gradient(180deg, black, transparent 74%);
223
+ }
224
+
225
+ .product-flow-orbit {
226
+ position: absolute;
227
+ inset: 12% 18%;
228
+ z-index: -1;
229
+ border: 1px solid hsl(var(--primary) / 0.16);
230
+ border-radius: 48%;
231
+ transform: rotate(-8deg);
232
+ }
233
+
234
+ .product-flow-orbit::before,
235
+ .product-flow-orbit::after {
236
+ content: "";
237
+ position: absolute;
238
+ inset: 12%;
239
+ border: 1px solid hsl(var(--ask) / 0.14);
240
+ border-radius: 46%;
241
+ transform: rotate(18deg);
242
+ }
243
+
244
+ .product-flow-orbit::after {
245
+ inset: 24%;
246
+ border-color: hsl(var(--library) / 0.16);
247
+ transform: rotate(-28deg);
248
+ }
249
+
250
+ .login-screen {
251
+ display: grid;
252
+ width: min(100%, 28rem);
253
+ gap: 1rem;
254
+ justify-items: center;
255
+ }
256
+
257
+ .login-mark {
258
+ display: grid;
259
+ width: 3rem;
260
+ height: 3rem;
261
+ place-items: center;
262
+ border: 1px solid hsl(var(--primary) / 0.46);
263
+ border-radius: 999px;
264
+ background: hsl(var(--card) / 0.72);
265
+ color: hsl(var(--primary));
266
+ box-shadow: 0 0 42px hsl(var(--primary) / 0.18);
267
+ }
268
+
269
+ .login-card,
270
+ .flow-panel {
271
+ width: min(100%, 58rem);
272
+ border: 1px solid hsl(var(--border) / 0.72);
273
+ border-radius: 8px;
274
+ background:
275
+ linear-gradient(180deg, hsl(var(--card) / 0.94), hsl(var(--card) / 0.82)),
276
+ linear-gradient(90deg, hsl(var(--primary) / 0.08), transparent 45%, hsl(var(--ask) / 0.06));
277
+ box-shadow: 0 28px 80px hsl(200 24% 3% / 0.46);
278
+ }
279
+
280
+ .login-card {
281
+ display: grid;
282
+ gap: 1.4rem;
283
+ padding: clamp(1.2rem, 4vw, 2rem);
284
+ }
285
+
286
+ .login-kicker,
287
+ .flow-kicker {
288
+ display: inline-flex;
289
+ align-items: center;
290
+ gap: 0.45rem;
291
+ color: hsl(var(--primary));
292
+ font-size: 0.76rem;
293
+ font-weight: 790;
294
+ text-transform: uppercase;
295
+ }
296
+
297
+ .login-card h1,
298
+ .flow-panel h1,
299
+ .install-hero h1 {
300
+ margin: 0.35rem 0 0;
301
+ font-size: clamp(2.15rem, 6vw, 4.4rem);
302
+ line-height: 0.96;
303
+ font-weight: 830;
304
+ letter-spacing: 0;
305
+ }
306
+
307
+ .login-card p,
308
+ .flow-panel p,
309
+ .install-hero p {
310
+ margin: 0.72rem 0 0;
311
+ color: hsl(var(--muted-foreground));
312
+ line-height: 1.6;
313
+ }
314
+
315
+ .login-form {
316
+ display: grid;
317
+ gap: 0.82rem;
318
+ }
319
+
320
+ .login-form label {
321
+ display: grid;
322
+ gap: 0.35rem;
323
+ }
324
+
325
+ .login-form label span {
326
+ color: hsl(var(--muted-foreground));
327
+ font-size: 0.78rem;
328
+ font-weight: 760;
329
+ text-transform: uppercase;
330
+ }
331
+
332
+ .login-submit {
333
+ margin-top: 0.4rem;
334
+ width: 100%;
335
+ }
336
+
337
+ .flow-panel {
338
+ display: grid;
339
+ gap: 1.2rem;
340
+ padding: clamp(1rem, 3vw, 1.6rem);
341
+ }
342
+
343
+ .flow-panel-head {
344
+ display: flex;
345
+ align-items: flex-start;
346
+ justify-content: space-between;
347
+ gap: 1rem;
348
+ }
349
+
350
+ .analysis-grid,
351
+ .model-recommendation-list,
352
+ .install-steps {
353
+ display: grid;
354
+ gap: 0.75rem;
355
+ }
356
+
357
+ .analysis-grid {
358
+ grid-template-columns: repeat(4, minmax(0, 1fr));
359
+ }
360
+
361
+ .analysis-fact,
362
+ .recommendation-callout,
363
+ .install-progress,
364
+ .install-step,
365
+ .model-recommendation-card {
366
+ border: 1px solid hsl(var(--border) / 0.72);
367
+ border-radius: 8px;
368
+ background: hsl(var(--background) / 0.5);
369
+ }
370
+
371
+ .analysis-fact {
372
+ min-height: 8rem;
373
+ padding: 0.95rem;
374
+ }
375
+
376
+ .analysis-fact span,
377
+ .analysis-fact small {
378
+ display: block;
379
+ color: hsl(var(--muted-foreground));
380
+ }
381
+
382
+ .analysis-fact span {
383
+ font-size: 0.76rem;
384
+ font-weight: 780;
385
+ text-transform: uppercase;
386
+ }
387
+
388
+ .analysis-fact strong {
389
+ display: block;
390
+ margin-top: 0.7rem;
391
+ font-size: 1.2rem;
392
+ line-height: 1.14;
393
+ }
394
+
395
+ .analysis-fact small {
396
+ margin-top: 0.48rem;
397
+ line-height: 1.5;
398
+ }
399
+
400
+ .recommendation-callout {
401
+ display: flex;
402
+ align-items: center;
403
+ gap: 0.82rem;
404
+ padding: 0.9rem;
405
+ }
406
+
407
+ .recommendation-callout svg {
408
+ flex: 0 0 auto;
409
+ color: hsl(var(--primary));
410
+ }
411
+
412
+ .recommendation-callout strong,
413
+ .recommendation-callout span {
414
+ display: block;
415
+ }
416
+
417
+ .recommendation-callout span {
418
+ margin-top: 0.22rem;
419
+ color: hsl(var(--muted-foreground));
420
+ font-size: 0.9rem;
421
+ }
422
+
423
+ .model-recommendation-list {
424
+ grid-template-columns: repeat(3, minmax(0, 1fr));
425
+ }
426
+
427
+ .model-recommendation-card {
428
+ display: grid;
429
+ min-height: 16rem;
430
+ align-content: space-between;
431
+ gap: 1rem;
432
+ padding: 1rem;
433
+ text-align: left;
434
+ transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
435
+ }
436
+
437
+ .model-recommendation-card:hover:not(:disabled),
438
+ .model-recommendation-card:focus-visible {
439
+ border-color: hsl(var(--primary) / 0.72);
440
+ background: hsl(var(--primary) / 0.1);
441
+ transform: translateY(-2px);
442
+ }
443
+
444
+ .model-recommendation-card:disabled {
445
+ cursor: not-allowed;
446
+ opacity: 0.6;
447
+ }
448
+
449
+ .model-rank {
450
+ color: hsl(var(--primary));
451
+ font-size: 0.76rem;
452
+ font-weight: 800;
453
+ text-transform: uppercase;
454
+ }
455
+
456
+ .model-recommendation-card strong {
457
+ display: block;
458
+ font-size: clamp(1.45rem, 3vw, 2.2rem);
459
+ line-height: 1.02;
460
+ }
461
+
462
+ .model-recommendation-card small {
463
+ display: block;
464
+ margin-top: 0.62rem;
465
+ color: hsl(var(--muted-foreground));
466
+ line-height: 1.5;
467
+ }
468
+
469
+ .install-hero {
470
+ display: grid;
471
+ grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1fr);
472
+ align-items: center;
473
+ gap: 1.1rem;
474
+ }
475
+
476
+ .install-hero .living-brain {
477
+ min-height: 20rem;
478
+ }
479
+
480
+ .install-steps {
481
+ grid-template-columns: repeat(4, minmax(0, 1fr));
482
+ }
483
+
484
+ .install-step {
485
+ display: flex;
486
+ align-items: center;
487
+ gap: 0.55rem;
488
+ min-height: 3.35rem;
489
+ padding: 0.8rem;
490
+ color: hsl(var(--muted-foreground));
491
+ font-weight: 760;
492
+ }
493
+
494
+ .install-step.is-active {
495
+ border-color: hsl(var(--primary) / 0.66);
496
+ color: hsl(var(--foreground));
497
+ }
498
+
499
+ .install-step.is-done {
500
+ border-color: hsl(var(--primary) / 0.54);
501
+ background: hsl(var(--primary) / 0.12);
502
+ color: hsl(var(--foreground));
503
+ }
504
+
505
+ .install-step.is-error {
506
+ border-color: hsl(var(--destructive) / 0.62);
507
+ color: hsl(var(--destructive));
508
+ }
509
+
510
+ .install-progress {
511
+ padding: 0.9rem;
512
+ }
513
+
514
+ .install-progress > div:first-child,
515
+ .flow-actions {
516
+ display: flex;
517
+ align-items: center;
518
+ justify-content: space-between;
519
+ gap: 1rem;
520
+ }
521
+
522
+ .install-progress span,
523
+ .flow-actions span {
524
+ color: hsl(var(--muted-foreground));
525
+ font-size: 0.9rem;
526
+ }
527
+
528
+ .install-bar {
529
+ height: 0.62rem;
530
+ margin-top: 0.75rem;
531
+ overflow: hidden;
532
+ border-radius: 999px;
533
+ background: hsl(var(--muted));
534
+ }
535
+
536
+ .install-bar span {
537
+ display: block;
538
+ height: 100%;
539
+ border-radius: inherit;
540
+ background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--ask)));
541
+ transition: width 220ms ease;
542
+ }
543
+
544
+ .flow-actions.split {
545
+ justify-content: space-between;
546
+ }
547
+
548
+ .flow-error {
549
+ border: 1px solid hsl(var(--destructive) / 0.42);
550
+ border-radius: 8px;
551
+ background: hsl(var(--destructive) / 0.12);
552
+ color: hsl(var(--foreground));
553
+ padding: 0.82rem;
554
+ line-height: 1.5;
201
555
  }
202
556
 
203
557
  .app-chrome {
@@ -418,7 +772,7 @@ button {
418
772
  background:
419
773
  linear-gradient(135deg, hsl(var(--card) / 0.94), hsl(var(--card) / 0.76)),
420
774
  linear-gradient(90deg, hsl(var(--primary) / 0.12), transparent 42%, hsl(var(--act) / 0.08));
421
- box-shadow: 0 18px 52px hsl(25 24% 3% / 0.25);
775
+ box-shadow: 0 18px 52px hsl(200 22% 3% / 0.26);
422
776
  }
423
777
 
424
778
  .arrival-copy {
@@ -529,7 +883,7 @@ button {
529
883
  border: 1px solid hsl(var(--border));
530
884
  border-radius: 8px;
531
885
  background: hsl(var(--card) / 0.96);
532
- box-shadow: 0 24px 70px hsl(25 24% 3% / 0.34);
886
+ box-shadow: 0 24px 70px hsl(200 22% 3% / 0.34);
533
887
  }
534
888
 
535
889
  .command-search {
@@ -573,7 +927,7 @@ button {
573
927
  padding: 1rem;
574
928
  border-right: 1px solid hsl(var(--border));
575
929
  background: hsl(var(--card) / 0.98);
576
- box-shadow: 18px 0 48px hsl(25 24% 3% / 0.34);
930
+ box-shadow: 18px 0 48px hsl(200 22% 3% / 0.34);
577
931
  }
578
932
 
579
933
  .drawer-header {
@@ -584,68 +938,1905 @@ button {
584
938
  margin-bottom: 0.8rem;
585
939
  }
586
940
 
587
- .drawer-panel .primary-dock {
588
- display: grid;
589
- align-items: stretch;
941
+ /* ═══════════════════════════════════════════════════════════════
942
+ DIGITAL BRAIN EXPERIENCE — Complete Immersive Redesign
943
+ The Brain is the product. Everything else is discovered depth.
944
+ Warm, private, alive, human.
945
+ ═══════════════════════════════════════════════════════════════ */
946
+
947
+ html, body, #root {
948
+ height: 100%;
590
949
  }
591
950
 
592
- .drawer-panel .dock-button {
593
- justify-content: flex-start;
594
- min-width: 0;
951
+ body {
952
+ font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", Inter, sans-serif;
953
+ -webkit-font-smoothing: antialiased;
954
+ text-rendering: optimizeLegibility;
595
955
  }
596
956
 
597
- .page-hero {
957
+ /* The entire post-onboarding experience is a living room with the Brain */
958
+ .brain-space {
959
+ min-height: 100vh;
960
+ display: flex;
961
+ flex-direction: column;
962
+ background: radial-gradient(120% 80% at 50% 20%, hsl(var(--bg-elevated)) 0%, hsl(var(--bg)) 55%);
598
963
  position: relative;
599
964
  overflow: hidden;
600
- border: 1px solid hsl(var(--border) / 0.74);
601
- border-radius: 8px;
602
- background:
603
- linear-gradient(120deg, hsl(var(--card) / 0.9), hsl(var(--muted) / 0.44)),
604
- linear-gradient(90deg, hsl(var(--primary) / 0.1), transparent 56%);
605
- padding: 1.35rem;
606
965
  }
607
966
 
608
- .page-title {
609
- margin-top: 0.58rem;
610
- max-width: 56rem;
611
- font-size: 3.1rem;
612
- line-height: 0.98;
613
- font-weight: 810;
614
- letter-spacing: 0;
967
+ /* Subtle living field behind everything */
968
+ .brain-field {
969
+ position: fixed;
970
+ inset: 0;
971
+ z-index: 0;
972
+ pointer-events: none;
973
+ background:
974
+ radial-gradient(circle at 30% 25%, hsl(var(--brain-core) / 0.035) 0%, transparent 55%),
975
+ radial-gradient(circle at 72% 68%, hsl(var(--memory) / 0.03) 0%, transparent 60%);
976
+ transition: opacity 1200ms ease;
615
977
  }
616
978
 
617
- .page-copy {
618
- margin-top: 0.82rem;
619
- max-width: 48rem;
620
- color: hsl(var(--muted-foreground));
621
- font-size: 0.98rem;
622
- line-height: 1.62;
979
+ /* The living presence — large, primary, always visible, reactive */
980
+ .brain-presence {
981
+ position: relative;
982
+ z-index: 2;
983
+ display: flex;
984
+ flex-direction: column;
985
+ align-items: center;
986
+ justify-content: center;
987
+ padding: 2.25rem 1.5rem 1.5rem;
988
+ flex: 0 0 auto;
623
989
  }
624
990
 
625
- .control-pill {
626
- border: 1px solid hsl(var(--border));
627
- border-radius: 999px;
628
- background: hsl(var(--card) / 0.72);
629
- color: hsl(var(--foreground));
991
+ .brain-presence.large {
992
+ padding-top: 2.75rem;
993
+ padding-bottom: 1.25rem;
630
994
  }
631
995
 
632
- .brain-grid {
633
- background-image:
634
- linear-gradient(hsl(var(--border) / 0.22) 1px, transparent 1px),
635
- linear-gradient(90deg, hsl(var(--border) / 0.22) 1px, transparent 1px);
636
- background-size: 28px 28px;
996
+ /* The actual living visual object */
997
+ .brain-organism {
998
+ position: relative;
999
+ width: clamp(220px, 28vw, 320px);
1000
+ height: clamp(220px, 28vw, 320px);
1001
+ display: grid;
1002
+ place-items: center;
1003
+ padding: 0;
1004
+ border: 0;
1005
+ background: transparent;
1006
+ color: inherit;
1007
+ cursor: pointer;
1008
+ transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1), filter 400ms ease;
1009
+ will-change: transform, filter;
637
1010
  }
638
1011
 
639
- .scrollbar-thin {
640
- scrollbar-width: thin;
1012
+ .brain-organism:focus-visible {
1013
+ outline: 2px solid hsl(var(--brain-core) / 0.78);
1014
+ outline-offset: 0.5rem;
1015
+ border-radius: 34% 44% 44% 34%;
641
1016
  }
642
1017
 
643
- .soft-scrollbar::-webkit-scrollbar {
644
- height: 10px;
645
- width: 10px;
646
- }
1018
+ .brain-organism[data-state="listening"] { transform: scale(1.015); filter: brightness(1.06) saturate(1.08); }
1019
+ .brain-organism[data-state="thinking"] { transform: scale(0.985); filter: brightness(0.96) saturate(0.92); }
1020
+ .brain-organism[data-state="recalling"] { filter: brightness(1.12) saturate(1.15); }
1021
+ .brain-organism[data-state="synthesizing"] { transform: scale(1.01); }
1022
+ .brain-organism[data-state="planning"] { filter: saturate(1.12) hue-rotate(8deg); }
1023
+ .brain-organism[data-state="acting"] { filter: brightness(1.08) saturate(1.22); }
647
1024
 
648
- .soft-scrollbar::-webkit-scrollbar-thumb {
1025
+ .brain-core {
1026
+ position: absolute;
1027
+ inset: 7% 2% 2%;
1028
+ display: grid;
1029
+ place-items: center;
1030
+ border-radius: 42% 47% 38% 42%;
1031
+ background:
1032
+ radial-gradient(55% 50% at 38% 34%, hsl(var(--brain-halo) / 0.38), transparent 70%),
1033
+ radial-gradient(58% 54% at 68% 44%, hsl(var(--connection) / 0.16), transparent 74%);
1034
+ box-shadow:
1035
+ 0 0 72px hsl(var(--brain-core) / 0.28),
1036
+ 0 16px 44px hsl(22 20% 3% / 0.5);
1037
+ transition: all 520ms cubic-bezier(0.23, 1, 0.32, 1);
1038
+ }
1039
+
1040
+ .brain-anatomy {
1041
+ position: relative;
1042
+ z-index: 2;
1043
+ width: 100%;
1044
+ height: 100%;
1045
+ overflow: visible;
1046
+ filter: drop-shadow(0 18px 30px hsl(200 80% 4% / 0.46));
1047
+ }
1048
+
1049
+ .brain-lobe,
1050
+ .brain-bridge,
1051
+ .brain-stem {
1052
+ transform-origin: center;
1053
+ fill: hsl(var(--brain-core) / 0.24);
1054
+ stroke: hsl(var(--brain-core) / 0.82);
1055
+ stroke-linejoin: round;
1056
+ stroke-width: 3;
1057
+ animation: brain-living-breathe 5.8s ease-in-out infinite;
1058
+ }
1059
+
1060
+ .brain-lobe-right {
1061
+ fill: hsl(var(--connection) / 0.16);
1062
+ stroke: hsl(var(--connection) / 0.7);
1063
+ animation-delay: -1.4s;
1064
+ }
1065
+
1066
+ .brain-bridge {
1067
+ fill: hsl(var(--memory) / 0.14);
1068
+ stroke: hsl(var(--memory) / 0.52);
1069
+ stroke-width: 2;
1070
+ }
1071
+
1072
+ .brain-stem {
1073
+ fill: hsl(var(--knowledge) / 0.14);
1074
+ stroke: hsl(var(--knowledge) / 0.54);
1075
+ stroke-width: 2.5;
1076
+ }
1077
+
1078
+ .brain-fold {
1079
+ fill: none;
1080
+ stroke: hsl(var(--fg) / 0.52);
1081
+ stroke-linecap: round;
1082
+ stroke-width: 4.2;
1083
+ stroke-dasharray: 16 22;
1084
+ opacity: 0.68;
1085
+ animation: brain-fold-flow 4.8s linear infinite;
1086
+ }
1087
+
1088
+ .fold-b,
1089
+ .fold-e {
1090
+ stroke: hsl(var(--memory) / 0.76);
1091
+ animation-delay: -1.6s;
1092
+ }
1093
+
1094
+ .fold-c,
1095
+ .fold-f {
1096
+ stroke: hsl(var(--knowledge) / 0.72);
1097
+ animation-delay: -2.9s;
1098
+ }
1099
+
1100
+ .fold-mid {
1101
+ stroke: hsl(var(--brain-core) / 0.54);
1102
+ stroke-width: 2.4;
1103
+ stroke-dasharray: 7 12;
1104
+ opacity: 0.75;
1105
+ }
1106
+
1107
+ .brain-aura {
1108
+ position: absolute;
1109
+ inset: 8%;
1110
+ border-radius: 44% 51% 42% 46%;
1111
+ border: 1px solid hsl(var(--brain-core) / 0.28);
1112
+ box-shadow:
1113
+ 0 0 86px hsl(var(--brain-core) / 0.2),
1114
+ 0 0 70px hsl(var(--memory) / 0.08);
1115
+ animation: brain-halo-breathe 6.4s ease-in-out infinite;
1116
+ }
1117
+
1118
+ .brain-organism[data-state="thinking"] .brain-aura { animation-duration: 1.8s; }
1119
+ .brain-organism[data-state="recalling"] .brain-aura { animation-duration: 2.8s; }
1120
+ .brain-organism[data-state="acting"] .brain-aura { animation-duration: 2s; }
1121
+
1122
+ @keyframes brain-halo-breathe {
1123
+ 0%, 100% { transform: scale(1); opacity: 0.65; }
1124
+ 50% { transform: scale(1.035); opacity: 0.95; }
1125
+ }
1126
+
1127
+ @keyframes brain-living-breathe {
1128
+ 0%,
1129
+ 100% {
1130
+ transform: scale(0.992);
1131
+ }
1132
+ 50% {
1133
+ transform: scale(1.018);
1134
+ }
1135
+ }
1136
+
1137
+ @keyframes brain-fold-flow {
1138
+ from {
1139
+ stroke-dashoffset: 80;
1140
+ }
1141
+ to {
1142
+ stroke-dashoffset: 0;
1143
+ }
1144
+ }
1145
+
1146
+ /* Thought activity layer (subtle drifting lines / embers) */
1147
+ .thought-activity {
1148
+ position: absolute;
1149
+ inset: 12%;
1150
+ border-radius: 999px;
1151
+ overflow: hidden;
1152
+ pointer-events: none;
1153
+ }
1154
+
1155
+ .thought-particle {
1156
+ position: absolute;
1157
+ width: 3px;
1158
+ height: 3px;
1159
+ background: hsl(var(--brain-halo) / 0.9);
1160
+ border-radius: 999px;
1161
+ box-shadow: 0 0 6px hsl(var(--brain-halo));
1162
+ animation: thought-drift 4.2s linear infinite;
1163
+ opacity: 0.0;
1164
+ }
1165
+
1166
+ .brain-organism[data-state="thinking"] .thought-particle { opacity: 0.55; animation-duration: 2.1s; }
1167
+ .brain-organism[data-state="synthesizing"] .thought-particle { opacity: 0.7; }
1168
+ .brain-organism[data-state="planning"] .thought-particle,
1169
+ .brain-organism[data-state="acting"] .thought-particle {
1170
+ opacity: 0.78;
1171
+ animation-duration: 1.85s;
1172
+ }
1173
+
1174
+ @keyframes thought-drift {
1175
+ 0% { transform: translateY(12%) scale(0.6); }
1176
+ 40% { transform: translateY(-18%) scale(1); }
1177
+ 100% { transform: translateY(-42%) scale(0.3); opacity: 0; }
1178
+ }
1179
+
1180
+ /* Memory pulses — fire on recall / important moments */
1181
+ .memory-ripple {
1182
+ position: absolute;
1183
+ inset: 22%;
1184
+ border-radius: 999px;
1185
+ border: 1.5px solid hsl(var(--memory) / 0.65);
1186
+ opacity: 0;
1187
+ pointer-events: none;
1188
+ }
1189
+
1190
+ .brain-organism.pulse .memory-ripple {
1191
+ animation: memory-ripple 1250ms ease-out forwards;
1192
+ }
1193
+
1194
+ @keyframes memory-ripple {
1195
+ 0% { transform: scale(0.7); opacity: 0.7; }
1196
+ 70% { opacity: 0.18; }
1197
+ 100% { transform: scale(1.65); opacity: 0; }
1198
+ }
1199
+
1200
+ /* Gentle label / state under the organism */
1201
+ .brain-presence-label {
1202
+ margin-top: 1.1rem;
1203
+ font-size: 0.78rem;
1204
+ letter-spacing: 0.5px;
1205
+ text-transform: uppercase;
1206
+ font-weight: 600;
1207
+ color: hsl(var(--fg-muted));
1208
+ display: inline-flex;
1209
+ align-items: center;
1210
+ gap: 0.5rem;
1211
+ }
1212
+
1213
+ .brain-presence-label .dot {
1214
+ width: 5px;
1215
+ height: 5px;
1216
+ border-radius: 999px;
1217
+ background: hsl(var(--brain-core));
1218
+ box-shadow: 0 0 0 3px hsl(var(--brain-core) / 0.18);
1219
+ animation: presence-dot 2.8s ease-in-out infinite;
1220
+ }
1221
+
1222
+ .brain-presence-label[data-state="thinking"] .dot { background: hsl(var(--memory)); animation-duration: 1.1s; }
1223
+
1224
+ /* The intimate conversation — primary interaction, spacious, human */
1225
+ .brain-conversation {
1226
+ position: relative;
1227
+ z-index: 3;
1228
+ flex: 1 1 auto;
1229
+ display: flex;
1230
+ flex-direction: column;
1231
+ max-width: 780px;
1232
+ margin: 0 auto;
1233
+ width: 100%;
1234
+ padding: 0 1.25rem 1.75rem;
1235
+ }
1236
+
1237
+ .brain-conversation-header {
1238
+ display: flex;
1239
+ align-items: center;
1240
+ justify-content: space-between;
1241
+ padding-bottom: 0.65rem;
1242
+ color: hsl(var(--fg-muted));
1243
+ font-size: 0.75rem;
1244
+ letter-spacing: 0.4px;
1245
+ text-transform: uppercase;
1246
+ }
1247
+
1248
+ .brain-stream {
1249
+ flex: 1 1 auto;
1250
+ overflow-y: auto;
1251
+ padding: 1rem 0.25rem 1.5rem;
1252
+ scroll-behavior: smooth;
1253
+ mask-image: linear-gradient(transparent, black 6%, black 92%, transparent);
1254
+ }
1255
+
1256
+ .brain-message {
1257
+ max-width: 78%;
1258
+ margin-bottom: 1.1rem;
1259
+ animation: message-enter 260ms cubic-bezier(0.23, 1, 0.32, 1);
1260
+ }
1261
+
1262
+ .brain-message.user { margin-left: auto; text-align: right; }
1263
+
1264
+ .brain-message-bubble {
1265
+ padding: 0.85rem 1.1rem;
1266
+ border-radius: 18px;
1267
+ font-size: 1.01rem;
1268
+ line-height: 1.45;
1269
+ white-space: pre-wrap;
1270
+ box-shadow: 0 1px 2px hsl(0 0% 0% / 0.12);
1271
+ }
1272
+
1273
+ .brain-message.user .brain-message-bubble {
1274
+ background: hsl(var(--brain-core) / 0.12);
1275
+ color: hsl(var(--fg));
1276
+ border-bottom-right-radius: 6px;
1277
+ }
1278
+
1279
+ .brain-message.assistant .brain-message-bubble {
1280
+ background: hsl(var(--surface) / 0.96);
1281
+ border: 1px solid hsl(var(--border) / 0.7);
1282
+ color: hsl(var(--fg));
1283
+ border-bottom-left-radius: 6px;
1284
+ }
1285
+
1286
+ @keyframes message-enter {
1287
+ from { opacity: 0; transform: translateY(6px); }
1288
+ to { opacity: 1; transform: none; }
1289
+ }
1290
+
1291
+ .brain-composer {
1292
+ position: relative;
1293
+ z-index: 10;
1294
+ margin-top: auto;
1295
+ padding: 0.85rem 0.6rem 0.35rem;
1296
+ background: linear-gradient(180deg, transparent, hsl(var(--bg)) 36%);
1297
+ }
1298
+
1299
+ .brain-composer textarea {
1300
+ width: 100%;
1301
+ min-height: 3.4rem;
1302
+ max-height: 9.5rem;
1303
+ resize: none;
1304
+ background: hsl(var(--surface) / 0.92);
1305
+ border: 1px solid hsl(var(--border) / 0.8);
1306
+ border-radius: 16px;
1307
+ padding: 0.95rem 1.15rem;
1308
+ font-size: 1.02rem;
1309
+ line-height: 1.4;
1310
+ color: hsl(var(--fg));
1311
+ outline: none;
1312
+ transition: border-color 160ms ease, box-shadow 160ms ease;
1313
+ }
1314
+
1315
+ .brain-composer textarea:focus {
1316
+ border-color: hsl(var(--brain-core) / 0.6);
1317
+ box-shadow: 0 0 0 3px hsl(var(--brain-core) / 0.08);
1318
+ }
1319
+
1320
+ .brain-composer-actions {
1321
+ display: flex;
1322
+ align-items: center;
1323
+ gap: 0.6rem;
1324
+ margin-top: 0.55rem;
1325
+ padding: 0 0.35rem;
1326
+ }
1327
+
1328
+ /* Progressive depths navigation — subtle, never a "sidebar" */
1329
+ .depths {
1330
+ position: fixed;
1331
+ bottom: 1.35rem;
1332
+ left: 50%;
1333
+ transform: translateX(-50%);
1334
+ z-index: 40;
1335
+ display: flex;
1336
+ gap: 0.35rem;
1337
+ padding: 0.25rem;
1338
+ background: hsl(var(--surface-glass));
1339
+ border: 1px solid hsl(var(--border) / 0.6);
1340
+ border-radius: 999px;
1341
+ backdrop-filter: blur(18px);
1342
+ }
1343
+
1344
+ .depth {
1345
+ display: inline-flex;
1346
+ align-items: center;
1347
+ gap: 0.4rem;
1348
+ padding: 0.38rem 0.95rem;
1349
+ font-size: 0.78rem;
1350
+ letter-spacing: 0.2px;
1351
+ color: hsl(var(--fg-muted));
1352
+ border-radius: 999px;
1353
+ transition: all 160ms ease;
1354
+ cursor: pointer;
1355
+ user-select: none;
1356
+ }
1357
+
1358
+ .depth:hover {
1359
+ color: hsl(var(--fg));
1360
+ background: hsl(var(--bg) / 0.6);
1361
+ }
1362
+
1363
+ .depth.active {
1364
+ color: hsl(var(--fg));
1365
+ background: hsl(var(--brain-core) / 0.11);
1366
+ }
1367
+
1368
+ /* Full-bleed contemplative chambers for Memory / Knowledge / Relationships / Map */
1369
+ .mind-chamber {
1370
+ position: fixed;
1371
+ inset: 0;
1372
+ z-index: 50;
1373
+ background: hsl(var(--bg));
1374
+ display: flex;
1375
+ flex-direction: column;
1376
+ overflow: hidden;
1377
+ animation: chamber-enter 420ms cubic-bezier(0.23, 1.0, 0.32, 1);
1378
+ }
1379
+
1380
+ @keyframes chamber-enter {
1381
+ from { opacity: 0; transform: translateY(12px); }
1382
+ to { opacity: 1; transform: none; }
1383
+ }
1384
+
1385
+ .chamber-head {
1386
+ display: flex;
1387
+ align-items: center;
1388
+ justify-content: space-between;
1389
+ padding: 1.35rem 2rem 0.9rem;
1390
+ border-bottom: 1px solid hsl(var(--border) / 0.5);
1391
+ flex-shrink: 0;
1392
+ }
1393
+
1394
+ .chamber-head .brain-trace {
1395
+ width: 38px;
1396
+ height: 38px;
1397
+ opacity: 0.6;
1398
+ }
1399
+
1400
+ .chamber-title {
1401
+ font-size: 1.05rem;
1402
+ font-weight: 620;
1403
+ letter-spacing: -0.1px;
1404
+ }
1405
+
1406
+ .chamber-body {
1407
+ flex: 1 1 auto;
1408
+ overflow-y: auto;
1409
+ padding: 1.75rem 2rem 3.5rem;
1410
+ max-width: 1080px;
1411
+ margin: 0 auto;
1412
+ width: 100%;
1413
+ }
1414
+
1415
+ /* The Map — artistic, slow, contemplative. Not a tool. */
1416
+ .mind-map-frame {
1417
+ height: calc(100vh - 9.5rem);
1418
+ border-radius: 18px;
1419
+ border: 1px solid hsl(var(--border) / 0.55);
1420
+ background: hsl(var(--bg-elevated));
1421
+ overflow: hidden;
1422
+ box-shadow: inset 0 0 120px hsl(0 0% 0% / 0.35);
1423
+ position: relative;
1424
+ }
1425
+
1426
+ /* Brain as living entry point — progressive revelation / travel into the mind */
1427
+ .brain-exploration {
1428
+ position: relative;
1429
+ flex: 1;
1430
+ display: flex;
1431
+ align-items: center;
1432
+ justify-content: center;
1433
+ min-height: 320px;
1434
+ transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
1435
+ }
1436
+
1437
+ .brain-field-layer {
1438
+ position: absolute;
1439
+ inset: 0;
1440
+ pointer-events: none;
1441
+ z-index: 1;
1442
+ }
1443
+
1444
+ .brain-exploration[data-depth="1"] .brain-field-layer {
1445
+ pointer-events: auto;
1446
+ }
1447
+
1448
+ .memory-orb, .knowledge-node {
1449
+ position: absolute;
1450
+ background: hsl(var(--memory) / 0.85);
1451
+ color: hsl(var(--bg));
1452
+ border-radius: 999px;
1453
+ font-size: 0.7rem;
1454
+ padding: 0.25rem 0.6rem;
1455
+ box-shadow: 0 2px 8px hsl(0 0% 0% / 0.3);
1456
+ white-space: nowrap;
1457
+ max-width: 160px;
1458
+ overflow: hidden;
1459
+ text-overflow: ellipsis;
1460
+ cursor: pointer;
1461
+ transition: transform 200ms ease, opacity 400ms ease, background 200ms ease;
1462
+ pointer-events: auto;
1463
+ transform-origin: center;
1464
+ }
1465
+
1466
+ .memory-orb {
1467
+ background: hsl(var(--memory));
1468
+ font-size: 0.65rem;
1469
+ padding: 0.2rem 0.5rem;
1470
+ }
1471
+
1472
+ .knowledge-node {
1473
+ background: hsl(var(--knowledge) / 0.9);
1474
+ border-radius: 8px;
1475
+ font-size: 0.72rem;
1476
+ }
1477
+
1478
+ .brain-exploration[data-depth="2"] .memory-orb,
1479
+ .brain-exploration[data-depth="3"] .memory-orb {
1480
+ animation: emerge-from-brain 800ms ease forwards;
1481
+ }
1482
+
1483
+ .brain-exploration[data-depth="3"] .knowledge-node,
1484
+ .brain-exploration[data-depth="4"] .knowledge-node {
1485
+ animation: emerge-from-brain 900ms ease forwards;
1486
+ }
1487
+
1488
+ @keyframes emerge-from-brain {
1489
+ from { transform: scale(0.2) translateY(40px); opacity: 0; }
1490
+ to { transform: scale(1) translateY(0); opacity: 1; }
1491
+ }
1492
+
1493
+ .relationship-edge {
1494
+ position: absolute;
1495
+ height: 1px;
1496
+ background: linear-gradient(90deg, transparent, hsl(var(--connection) / 0.6), transparent);
1497
+ pointer-events: none;
1498
+ z-index: 0;
1499
+ transition: opacity 400ms ease;
1500
+ }
1501
+
1502
+ .brain-exploration[data-depth="0"] .brain-field-layer > * { opacity: 0; pointer-events: none; }
1503
+ .brain-exploration[data-depth="1"] .memory-orb { opacity: 0.9; }
1504
+ .brain-exploration[data-depth="2"] .memory-orb { opacity: 1; }
1505
+ .brain-exploration[data-depth="3"] .knowledge-node { opacity: 0.95; }
1506
+ .brain-exploration[data-depth="4"] .relationship-edge { opacity: 0.7; }
1507
+ .brain-exploration[data-depth="5"] .mind-core-graph { opacity: 1; pointer-events: auto; }
1508
+
1509
+ .mind-core-graph {
1510
+ position: absolute;
1511
+ inset: 8%;
1512
+ border-radius: 50%;
1513
+ background: hsl(var(--bg) / 0.6);
1514
+ border: 1px solid hsl(var(--brain-core) / 0.3);
1515
+ overflow: hidden;
1516
+ opacity: 0;
1517
+ transition: opacity 500ms ease;
1518
+ z-index: 2;
1519
+ }
1520
+
1521
+ .brain-surface-control {
1522
+ position: absolute;
1523
+ top: 1rem;
1524
+ right: 1rem;
1525
+ z-index: 10;
1526
+ font-size: 0.7rem;
1527
+ padding: 0.25rem 0.6rem;
1528
+ background: hsl(var(--surface-glass));
1529
+ border: 1px solid hsl(var(--border) / 0.6);
1530
+ border-radius: 999px;
1531
+ cursor: pointer;
1532
+ opacity: 0.7;
1533
+ transition: opacity 150ms;
1534
+ }
1535
+
1536
+ .brain-surface-control:hover { opacity: 1; }
1537
+
1538
+ .brain-depth-indicator {
1539
+ position: absolute;
1540
+ bottom: -1.6rem;
1541
+ left: 50%;
1542
+ transform: translateX(-50%);
1543
+ font-size: 0.65rem;
1544
+ letter-spacing: 1px;
1545
+ text-transform: uppercase;
1546
+ color: hsl(var(--fg-muted));
1547
+ white-space: nowrap;
1548
+ }
1549
+
1550
+ .brain-organism.depth-1 .thought-particle { opacity: 0.7; }
1551
+ .brain-organism.depth-3 .thought-particle.resolving,
1552
+ .brain-organism.depth-4 .thought-particle.resolving,
1553
+ .brain-organism.depth-5 .thought-particle.resolving {
1554
+ background: hsl(var(--knowledge));
1555
+ box-shadow: 0 0 4px hsl(var(--knowledge));
1556
+ animation-duration: 1.8s;
1557
+ }
1558
+
1559
+ .brain-inner-structure {
1560
+ position: absolute;
1561
+ inset: 22%;
1562
+ opacity: 0.45;
1563
+ transition: opacity 400ms ease;
1564
+ }
1565
+
1566
+ .brain-exploration.is-exploring .brain-inner-structure {
1567
+ opacity: 0.75;
1568
+ }
1569
+
1570
+ .brain-surface-control {
1571
+ position: absolute;
1572
+ top: 0.6rem;
1573
+ right: 0.6rem;
1574
+ z-index: 10;
1575
+ font-size: 0.68rem;
1576
+ padding: 0.2rem 0.55rem;
1577
+ background: hsl(var(--surface-glass));
1578
+ border: 1px solid hsl(var(--border) / 0.55);
1579
+ border-radius: 999px;
1580
+ cursor: pointer;
1581
+ color: hsl(var(--fg-muted));
1582
+ transition: all 150ms;
1583
+ }
1584
+
1585
+ .brain-surface-control:hover {
1586
+ color: hsl(var(--fg));
1587
+ border-color: hsl(var(--brain-core) / 0.4);
1588
+ }
1589
+
1590
+ .mind-map-frame::before {
1591
+ content: "The architecture of your mind";
1592
+ position: absolute;
1593
+ top: 1.1rem;
1594
+ left: 1.35rem;
1595
+ font-size: 0.72rem;
1596
+ letter-spacing: 1.5px;
1597
+ text-transform: uppercase;
1598
+ color: hsl(var(--fg-muted) / 0.7);
1599
+ z-index: 2;
1600
+ pointer-events: none;
1601
+ }
1602
+
1603
+ .mind-map-frame .brain-trace {
1604
+ position: absolute;
1605
+ top: 1rem;
1606
+ right: 1.25rem;
1607
+ z-index: 2;
1608
+ opacity: 0.5;
1609
+ }
1610
+
1611
+ /* Small persistent trace of the Brain when in depths */
1612
+ .brain-trace {
1613
+ width: 42px;
1614
+ height: 42px;
1615
+ border-radius: 999px;
1616
+ background: radial-gradient(circle at 40% 32%, hsl(var(--brain-halo)), hsl(var(--brain-core)));
1617
+ box-shadow: 0 0 0 1px hsl(var(--brain-core) / 0.3), 0 0 18px hsl(var(--brain-core) / 0.25);
1618
+ display: grid;
1619
+ place-items: center;
1620
+ font-size: 10px;
1621
+ color: hsl(var(--bg));
1622
+ font-weight: 700;
1623
+ letter-spacing: 0.5px;
1624
+ }
1625
+
1626
+ .brain-home {
1627
+ position: relative;
1628
+ z-index: 1;
1629
+ display: flex;
1630
+ min-height: 100vh;
1631
+ flex-direction: column;
1632
+ }
1633
+
1634
+ .brain-organism {
1635
+ z-index: 3;
1636
+ }
1637
+
1638
+ .brain-exploration {
1639
+ width: min(100%, 58rem);
1640
+ margin-inline: auto;
1641
+ }
1642
+
1643
+ .brain-exploration[data-depth="1"] .brain-field-layer {
1644
+ pointer-events: none;
1645
+ }
1646
+
1647
+ .brain-exploration[data-depth="2"] .brain-field-layer,
1648
+ .brain-exploration[data-depth="3"] .brain-field-layer,
1649
+ .brain-exploration[data-depth="4"] .brain-field-layer,
1650
+ .brain-exploration[data-depth="5"] .brain-field-layer {
1651
+ z-index: 4;
1652
+ pointer-events: none;
1653
+ }
1654
+
1655
+ .brain-exploration[data-depth="5"] {
1656
+ width: min(calc(100vw - 2rem), 980px);
1657
+ min-height: min(62vh, 570px);
1658
+ }
1659
+
1660
+ .brain-exploration[data-depth="5"] .brain-field-layer {
1661
+ z-index: 7;
1662
+ }
1663
+
1664
+ .brain-exploration[data-depth="5"] .brain-organism {
1665
+ opacity: 0.2;
1666
+ pointer-events: none;
1667
+ }
1668
+
1669
+ .brain-depth-badge {
1670
+ position: absolute;
1671
+ left: 50%;
1672
+ bottom: 0.2rem;
1673
+ z-index: 5;
1674
+ display: grid;
1675
+ min-width: 11rem;
1676
+ transform: translateX(-50%);
1677
+ justify-items: center;
1678
+ gap: 0.18rem;
1679
+ border: 1px solid hsl(var(--border) / 0.58);
1680
+ border-radius: 999px;
1681
+ background: hsl(var(--surface-glass));
1682
+ padding: 0.48rem 0.95rem;
1683
+ backdrop-filter: blur(18px);
1684
+ box-shadow: 0 12px 32px hsl(200 30% 3% / 0.22);
1685
+ }
1686
+
1687
+ .brain-depth-badge span {
1688
+ color: hsl(var(--fg-muted));
1689
+ font-size: 0.62rem;
1690
+ font-weight: 800;
1691
+ text-transform: uppercase;
1692
+ }
1693
+
1694
+ .brain-depth-badge strong {
1695
+ font-size: 0.88rem;
1696
+ line-height: 1.05;
1697
+ }
1698
+
1699
+ .memory-fragment,
1700
+ .concept-signal,
1701
+ .graph-node {
1702
+ position: absolute;
1703
+ left: var(--x, 50%);
1704
+ top: var(--y, 50%);
1705
+ z-index: 4;
1706
+ transform: translate(-50%, -50%);
1707
+ border: 1px solid hsl(var(--border) / 0.72);
1708
+ background: hsl(var(--surface-glass));
1709
+ color: hsl(var(--fg));
1710
+ text-align: left;
1711
+ backdrop-filter: blur(16px);
1712
+ animation: emerge-from-brain 680ms cubic-bezier(0.23, 1, 0.32, 1) both;
1713
+ animation-delay: var(--delay, 0ms);
1714
+ }
1715
+
1716
+ .memory-fragment {
1717
+ display: grid;
1718
+ min-width: 8.2rem;
1719
+ max-width: 12.5rem;
1720
+ gap: 0.12rem;
1721
+ border-color: hsl(var(--memory) / 0.38);
1722
+ border-radius: 8px;
1723
+ padding: 0.58rem 0.7rem;
1724
+ box-shadow:
1725
+ 0 0 0 1px hsl(var(--memory) / 0.08) inset,
1726
+ 0 14px 32px hsl(190 35% 3% / 0.24);
1727
+ }
1728
+
1729
+ .memory-fragment span,
1730
+ .concept-signal span,
1731
+ .graph-node span,
1732
+ .brain-graph-head span,
1733
+ .brain-graph-focus span {
1734
+ color: hsl(var(--fg-muted));
1735
+ font-size: 0.62rem;
1736
+ font-weight: 800;
1737
+ text-transform: uppercase;
1738
+ }
1739
+
1740
+ .memory-fragment strong {
1741
+ overflow: hidden;
1742
+ color: hsl(var(--fg));
1743
+ font-size: 0.82rem;
1744
+ line-height: 1.18;
1745
+ text-overflow: ellipsis;
1746
+ white-space: nowrap;
1747
+ }
1748
+
1749
+ .memory-fragment:hover,
1750
+ .memory-fragment:focus-visible,
1751
+ .concept-signal:hover,
1752
+ .concept-signal:focus-visible,
1753
+ .graph-node:hover,
1754
+ .graph-node:focus-visible {
1755
+ border-color: hsl(var(--brain-core) / 0.66);
1756
+ outline: none;
1757
+ box-shadow: 0 0 0 3px hsl(var(--brain-core) / 0.08), 0 16px 38px hsl(200 35% 3% / 0.28);
1758
+ }
1759
+
1760
+ .memory-fragment.is-empty,
1761
+ .concept-signal.is-empty {
1762
+ left: 50%;
1763
+ top: 78%;
1764
+ pointer-events: none;
1765
+ color: hsl(var(--fg-muted));
1766
+ }
1767
+
1768
+ .concept-signal {
1769
+ display: inline-flex;
1770
+ max-width: 11rem;
1771
+ align-items: center;
1772
+ gap: 0.45rem;
1773
+ border-color: hsl(var(--knowledge) / 0.42);
1774
+ border-radius: 999px;
1775
+ padding: 0.42rem 0.72rem;
1776
+ color: hsl(var(--fg));
1777
+ font-size: 0.78rem;
1778
+ white-space: nowrap;
1779
+ }
1780
+
1781
+ .relationship-weave,
1782
+ .brain-graph-edges {
1783
+ position: absolute;
1784
+ inset: 0;
1785
+ z-index: 2;
1786
+ width: 100%;
1787
+ height: 100%;
1788
+ overflow: visible;
1789
+ pointer-events: none;
1790
+ }
1791
+
1792
+ .relationship-weave line {
1793
+ stroke: hsl(var(--connection) / 0.55);
1794
+ stroke-linecap: round;
1795
+ stroke-width: 0.42;
1796
+ stroke-dasharray: 3 5;
1797
+ animation: relationship-flow 2.8s linear infinite;
1798
+ }
1799
+
1800
+ .mind-core-graph {
1801
+ inset: 0;
1802
+ z-index: 8;
1803
+ display: grid;
1804
+ grid-template-rows: auto minmax(18rem, 1fr) auto;
1805
+ gap: 0.75rem;
1806
+ border-radius: 8px;
1807
+ border: 1px solid hsl(var(--brain-core) / 0.38);
1808
+ background:
1809
+ radial-gradient(42% 46% at 50% 42%, hsl(var(--brain-core) / 0.12), transparent 72%),
1810
+ linear-gradient(145deg, hsl(var(--surface) / 0.92), hsl(var(--bg) / 0.84));
1811
+ padding: 0.8rem;
1812
+ box-shadow: 0 28px 90px hsl(205 40% 3% / 0.46);
1813
+ backdrop-filter: blur(22px);
1814
+ pointer-events: auto;
1815
+ }
1816
+
1817
+ .brain-graph-head,
1818
+ .brain-graph-search,
1819
+ .brain-graph-focus {
1820
+ display: flex;
1821
+ align-items: center;
1822
+ }
1823
+
1824
+ .brain-graph-head {
1825
+ justify-content: space-between;
1826
+ gap: 0.85rem;
1827
+ }
1828
+
1829
+ .brain-graph-head strong {
1830
+ display: block;
1831
+ margin-top: 0.1rem;
1832
+ font-size: 1.05rem;
1833
+ }
1834
+
1835
+ .brain-graph-search {
1836
+ width: min(100%, 15rem);
1837
+ min-height: 2.25rem;
1838
+ gap: 0.45rem;
1839
+ border: 1px solid hsl(var(--border) / 0.72);
1840
+ border-radius: 999px;
1841
+ background: hsl(var(--bg) / 0.48);
1842
+ padding: 0 0.68rem;
1843
+ color: hsl(var(--fg-muted));
1844
+ }
1845
+
1846
+ .brain-graph-search input {
1847
+ min-width: 0;
1848
+ width: 100%;
1849
+ border: 0;
1850
+ background: transparent;
1851
+ color: hsl(var(--fg));
1852
+ outline: none;
1853
+ font-size: 0.86rem;
1854
+ }
1855
+
1856
+ .brain-graph-canvas {
1857
+ position: relative;
1858
+ min-height: 19rem;
1859
+ overflow: hidden;
1860
+ border: 1px solid hsl(var(--border) / 0.45);
1861
+ border-radius: 8px;
1862
+ background:
1863
+ radial-gradient(ellipse at center, hsl(var(--brain-core) / 0.09), transparent 54%),
1864
+ linear-gradient(hsl(var(--border) / 0.12) 1px, transparent 1px),
1865
+ linear-gradient(90deg, hsl(var(--border) / 0.12) 1px, transparent 1px);
1866
+ background-size: auto, 28px 28px, 28px 28px;
1867
+ }
1868
+
1869
+ .brain-graph-edges line {
1870
+ stroke: hsl(var(--connection) / 0.52);
1871
+ stroke-linecap: round;
1872
+ stroke-width: calc(var(--weight, 1) * 0.28);
1873
+ }
1874
+
1875
+ .graph-node {
1876
+ display: grid;
1877
+ max-width: 8.6rem;
1878
+ min-width: 5.3rem;
1879
+ gap: 0.08rem;
1880
+ border-color: hsl(var(--knowledge) / 0.4);
1881
+ border-radius: 8px;
1882
+ padding: 0.42rem 0.55rem;
1883
+ font-size: 0.76rem;
1884
+ line-height: 1.14;
1885
+ }
1886
+
1887
+ .graph-node.is-selected {
1888
+ border-color: hsl(var(--brain-core) / 0.86);
1889
+ background: hsl(var(--brain-core) / 0.14);
1890
+ }
1891
+
1892
+ .brain-graph-focus {
1893
+ min-height: 4rem;
1894
+ align-items: flex-start;
1895
+ gap: 0.72rem;
1896
+ border: 1px solid hsl(var(--border) / 0.55);
1897
+ border-radius: 8px;
1898
+ background: hsl(var(--bg) / 0.48);
1899
+ padding: 0.72rem;
1900
+ }
1901
+
1902
+ .brain-graph-focus strong,
1903
+ .brain-graph-focus p {
1904
+ display: block;
1905
+ }
1906
+
1907
+ .brain-graph-focus strong {
1908
+ font-size: 0.95rem;
1909
+ }
1910
+
1911
+ .brain-graph-focus p {
1912
+ margin: 0.18rem 0 0;
1913
+ color: hsl(var(--fg-muted));
1914
+ font-size: 0.84rem;
1915
+ line-height: 1.45;
1916
+ }
1917
+
1918
+ .brain-graph-empty {
1919
+ display: grid;
1920
+ min-height: 19rem;
1921
+ place-items: center;
1922
+ color: hsl(var(--fg-muted));
1923
+ }
1924
+
1925
+ .brain-conversation-header h1 {
1926
+ margin: 0;
1927
+ color: hsl(var(--fg));
1928
+ font-size: 1rem;
1929
+ line-height: 1.05;
1930
+ }
1931
+
1932
+ .brain-conversation-header span {
1933
+ display: block;
1934
+ margin-top: 0.2rem;
1935
+ }
1936
+
1937
+ .brain-image-input {
1938
+ display: inline-flex;
1939
+ cursor: pointer;
1940
+ align-items: center;
1941
+ gap: 0.4rem;
1942
+ border: 1px solid hsl(var(--border) / 0.68);
1943
+ border-radius: 999px;
1944
+ padding: 0.42rem 0.78rem;
1945
+ color: hsl(var(--fg-muted));
1946
+ font-size: 0.78rem;
1947
+ }
1948
+
1949
+ .mind-empty-kicker {
1950
+ margin-bottom: 0.4rem;
1951
+ font-size: 0.72rem;
1952
+ font-weight: 800;
1953
+ letter-spacing: 1.5px;
1954
+ text-transform: uppercase;
1955
+ opacity: 0.52;
1956
+ }
1957
+
1958
+ @keyframes relationship-flow {
1959
+ from {
1960
+ stroke-dashoffset: 24;
1961
+ }
1962
+ to {
1963
+ stroke-dashoffset: 0;
1964
+ }
1965
+ }
1966
+
1967
+ /* Product flow — now a quiet ritual, not a wizard */
1968
+ .product-flow-shell {
1969
+ min-height: 100vh;
1970
+ display: grid;
1971
+ place-items: center;
1972
+ padding: 2.5rem 1.25rem;
1973
+ background: radial-gradient(100% 70% at 50% 15%, hsl(var(--bg-elevated)), hsl(var(--bg)));
1974
+ }
1975
+
1976
+ .product-flow-shell .living-brain { transform: scale(0.82); }
1977
+
1978
+ .flow-ritual {
1979
+ width: min(100%, 620px);
1980
+ text-align: center;
1981
+ }
1982
+
1983
+ .flow-ritual h1 {
1984
+ font-size: clamp(2.1rem, 5.2vw, 3.1rem);
1985
+ font-weight: 700;
1986
+ line-height: 1.0;
1987
+ margin: 1.1rem 0 0.6rem;
1988
+ }
1989
+
1990
+ .flow-ritual p {
1991
+ color: hsl(var(--fg-muted));
1992
+ font-size: 1.01rem;
1993
+ max-width: 42ch;
1994
+ margin: 0 auto;
1995
+ }
1996
+
1997
+ .ritual-brain {
1998
+ margin: 1.4rem auto 1.6rem;
1999
+ }
2000
+
2001
+ /* Make old chrome and dock very quiet or hidden in main brain experience */
2002
+ .app-chrome, .primary-dock, .ambient-brain {
2003
+ display: none !important;
2004
+ }
2005
+
2006
+ .page-shell {
2007
+ padding: 0;
2008
+ max-width: none;
2009
+ width: 100%;
2010
+ }
2011
+
2012
+ /* Gentle empty / loading for the mind */
2013
+ .mind-empty {
2014
+ text-align: center;
2015
+ padding: 3rem 1rem;
2016
+ color: hsl(var(--fg-muted));
2017
+ }
2018
+
2019
+ .mind-empty .icon {
2020
+ opacity: 0.5;
2021
+ margin-bottom: 0.8rem;
2022
+ }
2023
+
2024
+ /* Loading as thinking */
2025
+ .thinking {
2026
+ animation: thinking-subtle 1.6s ease-in-out infinite;
2027
+ }
2028
+
2029
+ @keyframes thinking-subtle {
2030
+ 0%,100% { opacity: 0.6; }
2031
+ 50% { opacity: 1; }
2032
+ }
2033
+
2034
+ /* Success is quiet */
2035
+ .brain-quiet-success {
2036
+ font-size: 0.78rem;
2037
+ color: hsl(var(--memory));
2038
+ display: inline-flex;
2039
+ align-items: center;
2040
+ gap: 0.35rem;
2041
+ }
2042
+
2043
+ /* Responsive care */
2044
+ @media (max-width: 720px) {
2045
+ .brain-presence { padding-top: 1.4rem; }
2046
+ .brain-organism { width: 200px; height: 200px; }
2047
+ .brain-conversation { padding-bottom: 5.5rem; }
2048
+ .depths { bottom: 0.9rem; }
2049
+ }
2050
+
2051
+ /* Ritual / Onboarding flow — uses the same living language as the Brain experience */
2052
+ .ritual-shell {
2053
+ min-height: 100vh;
2054
+ display: flex;
2055
+ align-items: center;
2056
+ justify-content: center;
2057
+ padding: 2rem 1rem;
2058
+ background: radial-gradient(120% 80% at 50% 15%, hsl(var(--bg-elevated)), hsl(var(--bg)));
2059
+ }
2060
+
2061
+ .ritual-container {
2062
+ width: min(100%, 720px);
2063
+ text-align: center;
2064
+ }
2065
+
2066
+ .ritual-brain {
2067
+ margin: 0 auto 1.75rem;
2068
+ }
2069
+
2070
+ .ritual-title {
2071
+ font-size: clamp(1.85rem, 5vw, 2.85rem);
2072
+ font-weight: 680;
2073
+ letter-spacing: -0.3px;
2074
+ line-height: 1.05;
2075
+ margin-bottom: 0.5rem;
2076
+ }
2077
+
2078
+ .ritual-subtitle {
2079
+ color: hsl(var(--fg-muted));
2080
+ font-size: 1.02rem;
2081
+ max-width: 44ch;
2082
+ margin: 0 auto 1.5rem;
2083
+ }
2084
+
2085
+ .ritual-card {
2086
+ background: hsl(var(--surface-glass));
2087
+ border: 1px solid hsl(var(--border) / 0.65);
2088
+ border-radius: 20px;
2089
+ padding: 1.25rem 1.5rem;
2090
+ text-align: left;
2091
+ margin-bottom: 1rem;
2092
+ transition: border-color 180ms ease, transform 180ms ease;
2093
+ }
2094
+
2095
+ .ritual-card:hover {
2096
+ border-color: hsl(var(--brain-core) / 0.55);
2097
+ transform: translateY(-1px);
2098
+ }
2099
+
2100
+ .ritual-card.selected {
2101
+ border-color: hsl(var(--brain-core));
2102
+ box-shadow: 0 0 0 1px hsl(var(--brain-core) / 0.25);
2103
+ }
2104
+
2105
+ .ritual-fact-grid {
2106
+ display: grid;
2107
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
2108
+ gap: 0.75rem;
2109
+ margin: 1.25rem 0;
2110
+ }
2111
+
2112
+ .ritual-fact {
2113
+ background: hsl(var(--bg) / 0.6);
2114
+ border: 1px solid hsl(var(--border) / 0.5);
2115
+ border-radius: 14px;
2116
+ padding: 0.85rem 1rem;
2117
+ text-align: left;
2118
+ }
2119
+
2120
+ .ritual-fact-label {
2121
+ font-size: 0.72rem;
2122
+ text-transform: uppercase;
2123
+ letter-spacing: 0.8px;
2124
+ color: hsl(var(--fg-muted));
2125
+ margin-bottom: 0.25rem;
2126
+ }
2127
+
2128
+ .ritual-fact-value {
2129
+ font-size: 1.05rem;
2130
+ font-weight: 620;
2131
+ color: hsl(var(--fg));
2132
+ }
2133
+
2134
+ .ritual-model-card {
2135
+ text-align: left;
2136
+ padding: 1.15rem 1.35rem;
2137
+ margin-bottom: 0.7rem;
2138
+ cursor: pointer;
2139
+ border: 1px solid hsl(var(--border) / 0.6);
2140
+ border-radius: 18px;
2141
+ background: hsl(var(--surface));
2142
+ transition: all 160ms ease;
2143
+ }
2144
+
2145
+ .ritual-model-card:hover {
2146
+ border-color: hsl(var(--brain-core) / 0.5);
2147
+ background: hsl(var(--surface) / 0.95);
2148
+ }
2149
+
2150
+ .ritual-model-card .role {
2151
+ font-size: 0.7rem;
2152
+ letter-spacing: 1px;
2153
+ text-transform: uppercase;
2154
+ color: hsl(var(--brain-core));
2155
+ margin-bottom: 0.3rem;
2156
+ }
2157
+
2158
+ .ritual-model-card .name {
2159
+ font-size: 1.25rem;
2160
+ font-weight: 650;
2161
+ }
2162
+
2163
+ .ritual-model-card .reason {
2164
+ font-size: 0.92rem;
2165
+ color: hsl(var(--fg-muted));
2166
+ margin-top: 0.25rem;
2167
+ }
2168
+
2169
+ .ritual-progress {
2170
+ margin: 1.5rem 0;
2171
+ }
2172
+
2173
+ .ritual-stage-list {
2174
+ display: flex;
2175
+ flex-direction: column;
2176
+ gap: 0.4rem;
2177
+ margin: 1rem 0;
2178
+ text-align: left;
2179
+ font-size: 0.95rem;
2180
+ }
2181
+
2182
+ .ritual-stage {
2183
+ display: flex;
2184
+ align-items: center;
2185
+ gap: 0.6rem;
2186
+ padding: 0.35rem 0.7rem;
2187
+ border-radius: 10px;
2188
+ color: hsl(var(--fg-muted));
2189
+ }
2190
+
2191
+ .ritual-stage.is-active {
2192
+ color: hsl(var(--fg));
2193
+ background: hsl(var(--brain-core) / 0.08);
2194
+ }
2195
+
2196
+ .ritual-stage.is-done {
2197
+ color: hsl(var(--fg));
2198
+ }
2199
+
2200
+ .ritual-bar {
2201
+ height: 6px;
2202
+ background: hsl(var(--border) / 0.6);
2203
+ border-radius: 999px;
2204
+ overflow: hidden;
2205
+ margin-top: 0.6rem;
2206
+ }
2207
+
2208
+ .ritual-bar > span {
2209
+ display: block;
2210
+ height: 100%;
2211
+ background: linear-gradient(90deg, hsl(var(--brain-core)), hsl(var(--memory)));
2212
+ transition: width 280ms ease;
2213
+ }
2214
+
2215
+ .ritual-status {
2216
+ font-size: 0.95rem;
2217
+ color: hsl(var(--fg-muted));
2218
+ margin: 0.8rem 0;
2219
+ }
2220
+
2221
+ .ritual-success {
2222
+ text-align: center;
2223
+ padding: 1.5rem;
2224
+ }
2225
+
2226
+ .ritual-success .brain {
2227
+ margin-bottom: 1rem;
2228
+ }
2229
+
2230
+ .drawer-panel .primary-dock {
2231
+ display: grid;
2232
+ align-items: stretch;
2233
+ }
2234
+
2235
+ .drawer-panel .dock-button {
2236
+ justify-content: flex-start;
2237
+ min-width: 0;
2238
+ }
2239
+
2240
+ .page-hero {
2241
+ position: relative;
2242
+ overflow: hidden;
2243
+ border: 1px solid hsl(var(--border) / 0.74);
2244
+ border-radius: 8px;
2245
+ background:
2246
+ linear-gradient(120deg, hsl(var(--card) / 0.9), hsl(var(--muted) / 0.44)),
2247
+ linear-gradient(90deg, hsl(var(--primary) / 0.1), transparent 56%);
2248
+ padding: 1.35rem;
2249
+ }
2250
+
2251
+ .page-title {
2252
+ margin-top: 0.58rem;
2253
+ max-width: 56rem;
2254
+ font-size: 3.1rem;
2255
+ line-height: 0.98;
2256
+ font-weight: 810;
2257
+ letter-spacing: 0;
2258
+ }
2259
+
2260
+ .page-copy {
2261
+ margin-top: 0.82rem;
2262
+ max-width: 48rem;
2263
+ color: hsl(var(--muted-foreground));
2264
+ font-size: 0.98rem;
2265
+ line-height: 1.62;
2266
+ }
2267
+
2268
+ .control-pill {
2269
+ border: 1px solid hsl(var(--border));
2270
+ border-radius: 999px;
2271
+ background: hsl(var(--card) / 0.72);
2272
+ color: hsl(var(--foreground));
2273
+ }
2274
+
2275
+ .brain-conversation-grid {
2276
+ display: grid;
2277
+ grid-template-columns: minmax(17rem, 0.72fr) minmax(22rem, 1fr) minmax(17rem, 0.72fr);
2278
+ gap: 1rem;
2279
+ min-height: calc(100vh - 8rem);
2280
+ }
2281
+
2282
+ .brain-presence-column {
2283
+ display: grid;
2284
+ align-content: center;
2285
+ gap: 1rem;
2286
+ min-width: 0;
2287
+ }
2288
+
2289
+ .brain-context-column {
2290
+ display: grid;
2291
+ align-content: start;
2292
+ gap: 1rem;
2293
+ min-width: 0;
2294
+ }
2295
+
2296
+ .living-brain {
2297
+ position: relative;
2298
+ overflow: hidden;
2299
+ border: 1px solid hsl(var(--border) / 0.76);
2300
+ border-radius: 8px;
2301
+ background:
2302
+ linear-gradient(145deg, hsl(var(--card) / 0.94), hsl(210 18% 9% / 0.82)),
2303
+ linear-gradient(90deg, hsl(var(--primary) / 0.12), transparent 40%, hsl(var(--library) / 0.1));
2304
+ box-shadow: 0 20px 60px hsl(200 22% 3% / 0.24);
2305
+ }
2306
+
2307
+ :root[data-theme="light"] .living-brain {
2308
+ background:
2309
+ linear-gradient(145deg, hsl(var(--card) / 0.96), hsl(196 24% 94% / 0.82)),
2310
+ linear-gradient(90deg, hsl(var(--primary) / 0.12), transparent 42%, hsl(var(--library) / 0.1));
2311
+ }
2312
+
2313
+ .brain-presence-head,
2314
+ .brain-presence-foot,
2315
+ .brain-chat-head,
2316
+ .brain-composer-actions,
2317
+ .brain-side-head,
2318
+ .brain-conversation-item {
2319
+ display: flex;
2320
+ align-items: center;
2321
+ }
2322
+
2323
+ .brain-presence-head {
2324
+ justify-content: space-between;
2325
+ gap: 1rem;
2326
+ padding: 1rem 1rem 0;
2327
+ }
2328
+
2329
+ .brain-presence-head h2 {
2330
+ margin: 0.28rem 0 0;
2331
+ font-size: 1.35rem;
2332
+ line-height: 1.12;
2333
+ font-weight: 800;
2334
+ }
2335
+
2336
+ .brain-presence-kicker,
2337
+ .brain-chat-kicker {
2338
+ display: inline-flex;
2339
+ align-items: center;
2340
+ gap: 0.45rem;
2341
+ color: hsl(var(--primary));
2342
+ font-size: 0.76rem;
2343
+ font-weight: 780;
2344
+ text-transform: uppercase;
2345
+ }
2346
+
2347
+ .brain-stage {
2348
+ position: relative;
2349
+ display: grid;
2350
+ place-items: center;
2351
+ min-height: 31rem;
2352
+ margin: 0.25rem 0 0.35rem;
2353
+ overflow: hidden;
2354
+ }
2355
+
2356
+ .brain-organ {
2357
+ position: relative;
2358
+ z-index: 2;
2359
+ width: min(92%, 29rem);
2360
+ aspect-ratio: 11 / 9;
2361
+ overflow: visible;
2362
+ filter: drop-shadow(0 22px 34px hsl(180 70% 4% / 0.48));
2363
+ }
2364
+
2365
+ .brain-mass {
2366
+ transform-origin: center;
2367
+ fill: hsl(var(--primary) / 0.2);
2368
+ stroke: hsl(var(--primary) / 0.78);
2369
+ stroke-width: 2.2;
2370
+ filter: url("#brainGlow");
2371
+ animation: brainBreathe 5.8s ease-in-out infinite;
2372
+ }
2373
+
2374
+ .brain-mass-right {
2375
+ fill: hsl(var(--ask) / 0.16);
2376
+ stroke: hsl(var(--ask) / 0.64);
2377
+ animation-delay: -1.2s;
2378
+ }
2379
+
2380
+ .thought-path {
2381
+ fill: none;
2382
+ stroke-linecap: round;
2383
+ stroke-dasharray: 18 24;
2384
+ stroke-width: 5;
2385
+ opacity: 0.86;
2386
+ animation: thoughtFlow 4.8s linear infinite;
2387
+ }
2388
+
2389
+ .thought-path-a,
2390
+ .thought-path-d {
2391
+ stroke: hsl(var(--primary));
2392
+ }
2393
+
2394
+ .thought-path-b {
2395
+ stroke: hsl(var(--ask));
2396
+ animation-delay: -1.7s;
2397
+ }
2398
+
2399
+ .thought-path-c {
2400
+ stroke: hsl(var(--library));
2401
+ animation-delay: -2.8s;
2402
+ }
2403
+
2404
+ .memory-pulse {
2405
+ fill: hsl(var(--foreground));
2406
+ opacity: 0.9;
2407
+ transform-origin: center;
2408
+ animation: memoryPulse 2.4s ease-in-out infinite;
2409
+ }
2410
+
2411
+ .pulse-b {
2412
+ animation-delay: -0.6s;
2413
+ }
2414
+
2415
+ .pulse-c {
2416
+ animation-delay: -1.2s;
2417
+ }
2418
+
2419
+ .pulse-d {
2420
+ animation-delay: -1.8s;
2421
+ }
2422
+
2423
+ .brain-halo,
2424
+ .brain-wave {
2425
+ position: absolute;
2426
+ display: block;
2427
+ border-radius: 999px;
2428
+ }
2429
+
2430
+ .brain-halo {
2431
+ inset: 13%;
2432
+ border: 1px solid hsl(var(--primary) / 0.22);
2433
+ animation: haloPulse 6s ease-in-out infinite;
2434
+ }
2435
+
2436
+ .brain-halo-b {
2437
+ inset: 20%;
2438
+ border-color: hsl(var(--ask) / 0.18);
2439
+ animation-delay: -2.4s;
2440
+ }
2441
+
2442
+ .brain-wave {
2443
+ z-index: 1;
2444
+ height: 0.18rem;
2445
+ background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.72), hsl(var(--ask) / 0.54), transparent);
2446
+ opacity: 0.72;
2447
+ transform-origin: center;
2448
+ animation: waveDrift 6.5s ease-in-out infinite;
2449
+ }
2450
+
2451
+ .brain-wave-a {
2452
+ width: 70%;
2453
+ top: 27%;
2454
+ transform: rotate(14deg);
2455
+ }
2456
+
2457
+ .brain-wave-b {
2458
+ width: 82%;
2459
+ top: 55%;
2460
+ transform: rotate(-10deg);
2461
+ animation-delay: -2.1s;
2462
+ }
2463
+
2464
+ .brain-wave-c {
2465
+ width: 58%;
2466
+ top: 71%;
2467
+ transform: rotate(7deg);
2468
+ animation-delay: -4.2s;
2469
+ }
2470
+
2471
+ .brain-state-pill {
2472
+ position: absolute;
2473
+ z-index: 3;
2474
+ right: 1rem;
2475
+ bottom: 1rem;
2476
+ display: inline-flex;
2477
+ align-items: center;
2478
+ gap: 0.45rem;
2479
+ min-height: 2.5rem;
2480
+ border: 1px solid hsl(var(--border));
2481
+ border-radius: 999px;
2482
+ background: hsl(var(--background) / 0.76);
2483
+ padding: 0 0.85rem;
2484
+ font-size: 0.84rem;
2485
+ font-weight: 780;
2486
+ backdrop-filter: blur(16px);
2487
+ }
2488
+
2489
+ .living-brain[data-activity="thinking"] .thought-path {
2490
+ animation-duration: 2.3s;
2491
+ }
2492
+
2493
+ .living-brain[data-activity="recalling"] .memory-pulse,
2494
+ .living-brain[data-activity="acting"] .memory-pulse {
2495
+ animation-duration: 1.4s;
2496
+ }
2497
+
2498
+ .living-brain[data-activity="planning"] .brain-wave,
2499
+ .living-brain[data-activity="acting"] .brain-wave {
2500
+ animation-duration: 3.2s;
2501
+ }
2502
+
2503
+ .brain-vitals {
2504
+ display: grid;
2505
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2506
+ gap: 0.55rem;
2507
+ padding: 0 1rem 1rem;
2508
+ }
2509
+
2510
+ .brain-vital {
2511
+ min-width: 0;
2512
+ border: 1px solid hsl(var(--border) / 0.72);
2513
+ border-radius: 7px;
2514
+ background: hsl(var(--background) / 0.48);
2515
+ padding: 0.72rem;
2516
+ }
2517
+
2518
+ .brain-vital svg {
2519
+ color: hsl(var(--primary));
2520
+ }
2521
+
2522
+ .brain-vital span,
2523
+ .brain-vital strong {
2524
+ display: block;
2525
+ min-width: 0;
2526
+ }
2527
+
2528
+ .brain-vital span {
2529
+ margin-top: 0.45rem;
2530
+ color: hsl(var(--muted-foreground));
2531
+ font-size: 0.72rem;
2532
+ font-weight: 740;
2533
+ text-transform: uppercase;
2534
+ }
2535
+
2536
+ .brain-vital strong {
2537
+ margin-top: 0.18rem;
2538
+ overflow: hidden;
2539
+ text-overflow: ellipsis;
2540
+ white-space: nowrap;
2541
+ font-size: 1.15rem;
2542
+ line-height: 1.15;
2543
+ }
2544
+
2545
+ .brain-presence-foot {
2546
+ gap: 0.5rem;
2547
+ min-height: 3rem;
2548
+ border-top: 1px solid hsl(var(--border) / 0.68);
2549
+ padding: 0.75rem 1rem;
2550
+ color: hsl(var(--muted-foreground));
2551
+ font-size: 0.86rem;
2552
+ }
2553
+
2554
+ .brain-side-panel {
2555
+ overflow: hidden;
2556
+ border: 1px solid hsl(var(--border) / 0.74);
2557
+ border-radius: 8px;
2558
+ background: hsl(var(--card) / 0.72);
2559
+ padding: 0.85rem;
2560
+ }
2561
+
2562
+ .brain-side-head {
2563
+ justify-content: space-between;
2564
+ gap: 0.75rem;
2565
+ margin-bottom: 0.72rem;
2566
+ }
2567
+
2568
+ .brain-side-head h3 {
2569
+ margin: 0 0 0.28rem;
2570
+ font-size: 0.94rem;
2571
+ font-weight: 780;
2572
+ }
2573
+
2574
+ .brain-conversation-list {
2575
+ display: grid;
2576
+ gap: 0.45rem;
2577
+ max-height: 16rem;
2578
+ overflow: auto;
2579
+ }
2580
+
2581
+ .brain-conversation-item {
2582
+ justify-content: space-between;
2583
+ gap: 0.45rem;
2584
+ min-height: 3.7rem;
2585
+ border: 1px solid hsl(var(--border) / 0.68);
2586
+ border-radius: 7px;
2587
+ background: hsl(var(--background) / 0.44);
2588
+ padding: 0.35rem 0.35rem 0.35rem 0.65rem;
2589
+ }
2590
+
2591
+ .brain-conversation-item.is-active {
2592
+ border-color: hsl(var(--primary) / 0.7);
2593
+ background: hsl(var(--primary) / 0.12);
2594
+ }
2595
+
2596
+ .brain-conversation-item button:first-child {
2597
+ display: grid;
2598
+ min-width: 0;
2599
+ gap: 0.2rem;
2600
+ }
2601
+
2602
+ .brain-conversation-item span,
2603
+ .brain-conversation-item small {
2604
+ overflow: hidden;
2605
+ text-overflow: ellipsis;
2606
+ white-space: nowrap;
2607
+ }
2608
+
2609
+ .brain-conversation-item span {
2610
+ font-size: 0.86rem;
2611
+ font-weight: 720;
2612
+ }
2613
+
2614
+ .brain-conversation-item small {
2615
+ color: hsl(var(--muted-foreground));
2616
+ font-size: 0.72rem;
2617
+ }
2618
+
2619
+ .brain-delete-button {
2620
+ display: grid;
2621
+ place-items: center;
2622
+ width: 2rem;
2623
+ height: 2rem;
2624
+ flex: 0 0 auto;
2625
+ border-radius: 6px;
2626
+ color: hsl(var(--muted-foreground));
2627
+ }
2628
+
2629
+ .brain-delete-button:hover {
2630
+ background: hsl(var(--destructive) / 0.12);
2631
+ color: hsl(var(--destructive));
2632
+ }
2633
+
2634
+ .brain-chat-panel {
2635
+ display: grid;
2636
+ grid-template-rows: auto minmax(0, 1fr) auto;
2637
+ min-height: calc(100vh - 8rem);
2638
+ overflow: hidden;
2639
+ }
2640
+
2641
+ .brain-chat-head {
2642
+ justify-content: space-between;
2643
+ gap: 1rem;
2644
+ border-bottom: 1px solid hsl(var(--border) / 0.74);
2645
+ padding: 1rem 1.1rem;
2646
+ }
2647
+
2648
+ .brain-chat-head h1 {
2649
+ margin: 0.34rem 0 0;
2650
+ font-size: 1.8rem;
2651
+ line-height: 1.05;
2652
+ font-weight: 820;
2653
+ }
2654
+
2655
+ .brain-chat-model {
2656
+ display: flex;
2657
+ flex-wrap: wrap;
2658
+ justify-content: flex-end;
2659
+ gap: 0.45rem;
2660
+ }
2661
+
2662
+ .brain-message-stream {
2663
+ min-height: 24rem;
2664
+ overflow: auto;
2665
+ padding: 1rem;
2666
+ }
2667
+
2668
+ .brain-empty-conversation {
2669
+ display: grid;
2670
+ min-height: 100%;
2671
+ place-items: center;
2672
+ }
2673
+
2674
+ .brain-message-row {
2675
+ display: flex;
2676
+ margin-bottom: 0.85rem;
2677
+ }
2678
+
2679
+ .brain-message-row.from-user {
2680
+ justify-content: flex-end;
2681
+ }
2682
+
2683
+ .brain-message-row.from-brain {
2684
+ justify-content: flex-start;
2685
+ }
2686
+
2687
+ .brain-message-bubble {
2688
+ max-width: min(78%, 44rem);
2689
+ border: 1px solid hsl(var(--border) / 0.74);
2690
+ border-radius: 8px;
2691
+ background: hsl(var(--background) / 0.7);
2692
+ padding: 0.9rem;
2693
+ font-size: 0.94rem;
2694
+ line-height: 1.65;
2695
+ }
2696
+
2697
+ .brain-message-row.from-user .brain-message-bubble {
2698
+ border-color: hsl(var(--primary) / 0.46);
2699
+ background: hsl(var(--primary) / 0.14);
2700
+ }
2701
+
2702
+ .brain-message-role {
2703
+ margin-bottom: 0.35rem;
2704
+ color: hsl(var(--muted-foreground));
2705
+ font-size: 0.72rem;
2706
+ font-weight: 780;
2707
+ text-transform: uppercase;
2708
+ }
2709
+
2710
+ .brain-composer {
2711
+ border-top: 1px solid hsl(var(--border) / 0.74);
2712
+ background: hsl(var(--background) / 0.32);
2713
+ padding: 1rem;
2714
+ }
2715
+
2716
+ .brain-composer textarea {
2717
+ min-height: 7rem;
2718
+ resize: vertical;
2719
+ }
2720
+
2721
+ .brain-composer-actions {
2722
+ justify-content: space-between;
2723
+ flex-wrap: wrap;
2724
+ gap: 0.6rem;
2725
+ margin-top: 0.65rem;
2726
+ }
2727
+
2728
+ .brain-layer-header {
2729
+ display: grid;
2730
+ grid-template-columns: minmax(0, 1fr) auto;
2731
+ align-items: end;
2732
+ gap: 1rem;
2733
+ border: 1px solid hsl(var(--border) / 0.72);
2734
+ border-radius: 8px;
2735
+ background: hsl(var(--background) / 0.48);
2736
+ padding: 1rem;
2737
+ }
2738
+
2739
+ .brain-layer-header h1 {
2740
+ margin: 0.35rem 0 0;
2741
+ font-size: 1.85rem;
2742
+ line-height: 1.08;
2743
+ font-weight: 810;
2744
+ }
2745
+
2746
+ .brain-layer-meter {
2747
+ display: grid;
2748
+ min-width: 10rem;
2749
+ border: 1px solid hsl(var(--border) / 0.7);
2750
+ border-radius: 7px;
2751
+ background: hsl(var(--card) / 0.68);
2752
+ padding: 0.85rem;
2753
+ }
2754
+
2755
+ .brain-layer-meter span {
2756
+ color: hsl(var(--muted-foreground));
2757
+ font-size: 0.72rem;
2758
+ font-weight: 760;
2759
+ text-transform: uppercase;
2760
+ }
2761
+
2762
+ .brain-layer-meter strong {
2763
+ margin-top: 0.25rem;
2764
+ font-size: 1.45rem;
2765
+ line-height: 1.1;
2766
+ }
2767
+
2768
+ @keyframes brainBreathe {
2769
+ 0%,
2770
+ 100% {
2771
+ transform: scale(0.985);
2772
+ }
2773
+ 50% {
2774
+ transform: scale(1.015);
2775
+ }
2776
+ }
2777
+
2778
+ @keyframes thoughtFlow {
2779
+ from {
2780
+ stroke-dashoffset: 90;
2781
+ }
2782
+ to {
2783
+ stroke-dashoffset: 0;
2784
+ }
2785
+ }
2786
+
2787
+ @keyframes memoryPulse {
2788
+ 0%,
2789
+ 100% {
2790
+ opacity: 0.48;
2791
+ transform: scale(0.76);
2792
+ }
2793
+ 45% {
2794
+ opacity: 1;
2795
+ transform: scale(1.18);
2796
+ }
2797
+ }
2798
+
2799
+ @keyframes waveDrift {
2800
+ 0%,
2801
+ 100% {
2802
+ opacity: 0.36;
2803
+ translate: -4% 0;
2804
+ }
2805
+ 50% {
2806
+ opacity: 0.9;
2807
+ translate: 4% 0;
2808
+ }
2809
+ }
2810
+
2811
+ @keyframes haloPulse {
2812
+ 0%,
2813
+ 100% {
2814
+ opacity: 0.18;
2815
+ transform: scale(0.95);
2816
+ }
2817
+ 50% {
2818
+ opacity: 0.56;
2819
+ transform: scale(1.04);
2820
+ }
2821
+ }
2822
+
2823
+ .brain-grid {
2824
+ background-image:
2825
+ linear-gradient(hsl(var(--border) / 0.22) 1px, transparent 1px),
2826
+ linear-gradient(90deg, hsl(var(--border) / 0.22) 1px, transparent 1px);
2827
+ background-size: 28px 28px;
2828
+ }
2829
+
2830
+ .scrollbar-thin {
2831
+ scrollbar-width: thin;
2832
+ }
2833
+
2834
+ .soft-scrollbar::-webkit-scrollbar {
2835
+ height: 10px;
2836
+ width: 10px;
2837
+ }
2838
+
2839
+ .soft-scrollbar::-webkit-scrollbar-thumb {
649
2840
  border: 3px solid transparent;
650
2841
  border-radius: 999px;
651
2842
  background: hsl(var(--border));
@@ -675,13 +2866,31 @@ button {
675
2866
  }
676
2867
 
677
2868
  .workspace-ribbon,
678
- .arrival-panel {
2869
+ .arrival-panel,
2870
+ .brain-conversation-grid,
2871
+ .brain-layer-header,
2872
+ .analysis-grid,
2873
+ .model-recommendation-list,
2874
+ .install-hero,
2875
+ .install-steps {
679
2876
  grid-template-columns: 1fr;
680
2877
  }
681
2878
 
682
2879
  .ribbon-meta {
683
2880
  justify-content: flex-start;
684
2881
  }
2882
+
2883
+ .brain-chat-panel {
2884
+ min-height: 44rem;
2885
+ }
2886
+
2887
+ .brain-presence-column {
2888
+ align-content: start;
2889
+ }
2890
+
2891
+ .brain-layer-meter {
2892
+ width: min(100%, 18rem);
2893
+ }
685
2894
  }
686
2895
 
687
2896
  @media (min-width: 1101px) {
@@ -734,4 +2943,83 @@ button {
734
2943
  .page-hero {
735
2944
  padding: 1rem;
736
2945
  }
2946
+
2947
+ .brain-conversation-grid {
2948
+ min-height: 0;
2949
+ }
2950
+
2951
+ .brain-stage {
2952
+ min-height: 20rem;
2953
+ }
2954
+
2955
+ .product-flow-shell {
2956
+ align-items: start;
2957
+ padding: 1rem;
2958
+ }
2959
+
2960
+ .login-card h1,
2961
+ .flow-panel h1,
2962
+ .install-hero h1 {
2963
+ font-size: 2.2rem;
2964
+ }
2965
+
2966
+ .flow-panel-head,
2967
+ .install-progress > div:first-child,
2968
+ .flow-actions {
2969
+ align-items: flex-start;
2970
+ flex-direction: column;
2971
+ }
2972
+
2973
+ .model-recommendation-card {
2974
+ min-height: 11rem;
2975
+ }
2976
+
2977
+ .brain-vitals {
2978
+ grid-template-columns: 1fr;
2979
+ }
2980
+
2981
+ .brain-chat-head {
2982
+ align-items: flex-start;
2983
+ flex-direction: column;
2984
+ }
2985
+
2986
+ .brain-chat-head h1 {
2987
+ font-size: 1.45rem;
2988
+ }
2989
+
2990
+ .brain-chat-model {
2991
+ justify-content: flex-start;
2992
+ }
2993
+
2994
+ .brain-message-bubble {
2995
+ max-width: 92%;
2996
+ }
2997
+
2998
+ .brain-message-stream {
2999
+ min-height: 22rem;
3000
+ padding: 0.75rem;
3001
+ }
3002
+
3003
+ .brain-composer {
3004
+ padding: 0.75rem;
3005
+ }
3006
+
3007
+ .brain-layer-header h1 {
3008
+ font-size: 1.45rem;
3009
+ }
3010
+ }
3011
+
3012
+ @media (prefers-reduced-motion: reduce) {
3013
+ .brain-mass,
3014
+ .brain-lobe,
3015
+ .brain-bridge,
3016
+ .brain-stem,
3017
+ .brain-fold,
3018
+ .thought-path,
3019
+ .memory-pulse,
3020
+ .brain-aura,
3021
+ .brain-halo,
3022
+ .brain-wave {
3023
+ animation: none;
3024
+ }
737
3025
  }