oomi-ai 0.2.48 → 0.2.50

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.
@@ -1,89 +1,19 @@
1
1
  :root {
2
- color: #f4f7ff;
3
- font-family: "Avenir Next", "Segoe UI", sans-serif;
4
- line-height: 1.5;
5
- font-weight: 400;
6
- background:
7
- radial-gradient(circle at top left, rgba(255, 255, 255, 0.55), transparent 38%),
8
- linear-gradient(180deg, #dfe8ff 0%, #d1dbf6 42%, #d7cab8 78%, #b58c77 100%);
9
- --surface-ink: #101528;
10
- --surface-panel: rgba(20, 27, 52, 0.88);
11
- --surface-panel-strong: rgba(16, 22, 40, 0.96);
12
- --surface-panel-soft: rgba(243, 248, 255, 0.12);
13
- --surface-border: rgba(137, 160, 220, 0.22);
14
- --surface-shadow: 0 36px 120px rgba(6, 10, 22, 0.24);
15
- --surface-muted: #b7c3e3;
16
- --surface-copy: #e8eeff;
17
- --surface-accent: #7ff0bb;
18
- }
19
-
20
- * {
21
- box-sizing: border-box;
22
- }
23
-
24
- html,
25
- body,
26
- #root {
27
- min-height: 100%;
28
- }
29
-
30
- body {
31
- margin: 0;
32
- min-height: 100vh;
33
- color: var(--surface-copy);
34
- background:
35
- radial-gradient(circle at top left, rgba(255, 255, 255, 0.45), transparent 34%),
36
- radial-gradient(circle at top right, rgba(161, 183, 255, 0.45), transparent 28%),
37
- linear-gradient(180deg, #dce6ff 0%, #c8d4f2 44%, #cfbea6 76%, #a57361 100%);
38
- position: relative;
39
- overflow-x: hidden;
40
- }
41
-
42
- body::before,
43
- body::after {
44
- content: "";
45
- position: fixed;
46
- inset: auto;
47
- pointer-events: none;
48
- z-index: -1;
49
- }
50
-
51
- body::before {
52
- left: -12%;
53
- right: -12%;
54
- bottom: -2%;
55
- height: 30vh;
56
- background:
57
- radial-gradient(circle at 18% 20%, rgba(146, 89, 72, 0.75), transparent 26%),
58
- radial-gradient(circle at 52% 32%, rgba(176, 130, 110, 0.72), transparent 24%),
59
- radial-gradient(circle at 84% 38%, rgba(125, 92, 79, 0.68), transparent 24%);
60
- }
61
-
62
- body::after {
63
- right: 8%;
64
- top: 12%;
65
- width: 420px;
66
- height: 420px;
67
- background: radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 60%);
68
- }
69
-
70
- a {
71
- color: inherit;
72
- text-decoration: none;
73
- }
74
-
75
- button,
76
- input,
77
- textarea,
78
- select {
79
- font: inherit;
2
+ --surface-ink: #1f1b16;
3
+ --surface-muted: #6c665f;
4
+ --surface-line: rgba(47, 39, 29, 0.14);
5
+ --surface-panel: rgba(255, 252, 246, 0.84);
6
+ --surface-panel-strong: rgba(255, 252, 246, 0.94);
7
+ --surface-shadow: 0 28px 90px rgba(73, 55, 35, 0.12);
8
+ --surface-pill: #26211c;
9
+ --surface-pill-copy: #fff8f0;
80
10
  }
81
11
 
82
12
  code {
83
13
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
84
- background: rgba(179, 197, 233, 0.16);
85
- color: #eef4ff;
86
- padding: 0.12rem 0.45rem;
14
+ background: rgba(43, 37, 31, 0.08);
15
+ color: #312821;
16
+ padding: 0.12rem 0.42rem;
87
17
  border-radius: 999px;
88
18
  font-size: 0.9em;
89
19
  }
@@ -94,568 +24,356 @@ code {
94
24
 
95
25
  [enable-xr] {
96
26
  position: relative;
27
+ isolation: isolate;
97
28
  }
98
29
 
99
- .persona-shell,
30
+ .persona-home,
100
31
  .scene-shell {
101
- width: min(1280px, calc(100% - 48px));
32
+ width: min(1320px, calc(100% - 56px));
102
33
  margin: 0 auto;
103
- padding: 32px 0 56px;
104
- display: grid;
105
- gap: 24px;
34
+ padding: 36px 0 72px;
106
35
  }
107
36
 
108
- .persona-scene-root {
109
- position: relative;
37
+ .persona-home {
38
+ display: grid;
39
+ gap: 22px;
110
40
  }
111
41
 
112
- .persona-header,
113
- .persona-grid,
114
- .scene-interaction-grid,
115
- .scene-content-grid,
116
- .scene-hero,
117
- .scene-depth-grid {
42
+ .home-grid,
43
+ .home-card-grid,
44
+ .scene-workspace-grid,
45
+ .scene-support-grid {
118
46
  display: grid;
119
47
  gap: 20px;
120
48
  }
121
49
 
122
- .persona-header {
123
- grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
50
+ .home-grid {
51
+ grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.72fr);
124
52
  align-items: start;
125
53
  }
126
54
 
127
- .persona-grid {
55
+ .home-card-grid,
56
+ .scene-support-grid {
128
57
  grid-template-columns: repeat(3, minmax(0, 1fr));
129
58
  }
130
59
 
131
- .persona-panel,
132
- .scene-board,
133
- .persona-preview-card,
134
- .scene-depth-card,
135
- .scene-debug-card,
136
- .scene-interaction-card,
137
- .scene-proof-card,
138
- .scene-material-chip,
139
- .scene-nested-shell,
140
- .scene-nested-panel,
141
- .scene-ops-card {
142
- border: 1px solid var(--surface-border);
60
+ .home-panel,
61
+ .scene-header,
62
+ .scene-surface {
63
+ border: 1px solid var(--surface-line);
64
+ border-radius: 34px;
65
+ background: var(--surface-panel);
143
66
  box-shadow: var(--surface-shadow);
144
- backdrop-filter: blur(24px);
67
+ backdrop-filter: blur(26px);
145
68
  }
146
69
 
147
- .persona-panel {
148
- border-radius: 30px;
149
- background: linear-gradient(180deg, rgba(17, 23, 43, 0.9), rgba(25, 33, 59, 0.82));
70
+ .home-panel {
71
+ padding: 30px;
150
72
  }
151
73
 
152
- .persona-hero {
153
- padding: 32px;
74
+ .home-hero {
154
75
  display: grid;
155
- gap: 24px;
156
- background:
157
- radial-gradient(circle at top right, rgba(144, 190, 255, 0.28), transparent 34%),
158
- linear-gradient(180deg, rgba(15, 22, 44, 0.96), rgba(22, 31, 58, 0.9));
76
+ gap: 26px;
159
77
  }
160
78
 
161
- .persona-eyebrow {
79
+ .home-eyebrow,
80
+ .scene-eyebrow,
81
+ .scene-surface-label {
162
82
  margin: 0;
163
- font-size: 11px;
164
- letter-spacing: 0.28em;
83
+ color: var(--surface-muted);
84
+ font-size: 0.78rem;
85
+ letter-spacing: 0.18em;
165
86
  text-transform: uppercase;
166
- color: var(--surface-accent);
167
87
  }
168
88
 
169
- .persona-title {
170
- margin: 14px 0 0;
171
- font-size: clamp(2.7rem, 5vw, 4.8rem);
172
- line-height: 0.92;
173
- letter-spacing: -0.05em;
89
+ .home-title,
90
+ .scene-title,
91
+ .scene-surface-title {
92
+ margin: 10px 0 0;
93
+ color: var(--surface-ink);
94
+ font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
95
+ font-weight: 500;
96
+ letter-spacing: -0.04em;
97
+ }
98
+
99
+ .home-title {
100
+ font-size: clamp(3rem, 5vw, 5.2rem);
101
+ line-height: 0.94;
174
102
  }
175
103
 
176
- .persona-description,
104
+ .scene-title {
105
+ font-size: clamp(2.7rem, 4vw, 4.2rem);
106
+ line-height: 0.96;
107
+ }
108
+
109
+ .scene-surface-title {
110
+ font-size: 1.75rem;
111
+ line-height: 1.08;
112
+ }
113
+
114
+ .home-description,
115
+ .home-supporting-copy,
116
+ .home-feature-card p,
117
+ .home-copy-card p,
118
+ .home-copy-card li,
177
119
  .scene-copy,
178
- .scene-section-copy,
179
- .persona-card p,
180
- .persona-card li,
181
- .scene-depth-card p,
182
- .scene-ops-card p {
120
+ .scene-step-card p,
121
+ .scene-note-list li {
183
122
  color: var(--surface-muted);
184
123
  }
185
124
 
186
- .persona-description {
187
- margin: 16px 0 0;
125
+ .home-description,
126
+ .home-supporting-copy,
127
+ .scene-copy {
188
128
  max-width: 56rem;
189
- font-size: 1.02rem;
190
129
  line-height: 1.8;
191
130
  }
192
131
 
193
- .persona-actions {
132
+ .home-description {
133
+ margin: 16px 0 0;
134
+ }
135
+
136
+ .home-supporting-copy {
137
+ margin: 0;
138
+ }
139
+
140
+ .home-actions,
141
+ .scene-chip-row,
142
+ .scene-badge-stack,
143
+ .scene-footer {
194
144
  display: flex;
195
145
  flex-wrap: wrap;
196
146
  gap: 12px;
197
147
  }
198
148
 
199
- .persona-button,
200
- .persona-link {
149
+ .home-primary-button,
150
+ .home-secondary-link,
151
+ .scene-link {
201
152
  display: inline-flex;
202
153
  align-items: center;
203
154
  justify-content: center;
204
- min-height: 48px;
155
+ min-height: 50px;
205
156
  padding: 0 20px;
206
- border-radius: 16px;
207
- border: 1px solid rgba(170, 192, 244, 0.28);
208
- background: rgba(255, 255, 255, 0.08);
209
- color: #f5f8ff;
210
- font-weight: 700;
211
- letter-spacing: 0.01em;
157
+ border-radius: 18px;
158
+ border: 1px solid var(--surface-line);
212
159
  transition:
213
- transform 180ms ease,
214
- border-color 180ms ease,
215
- background 180ms ease;
216
- }
217
-
218
- .persona-button:hover,
219
- .persona-link:hover {
220
- transform: translateY(-1px);
221
- border-color: rgba(170, 192, 244, 0.5);
222
- background: rgba(255, 255, 255, 0.12);
160
+ transform 160ms ease,
161
+ box-shadow 160ms ease,
162
+ border-color 160ms ease;
223
163
  }
224
164
 
225
- .persona-preview-strip {
226
- display: grid;
227
- grid-template-columns: repeat(3, minmax(0, 1fr));
228
- gap: 14px;
165
+ .home-primary-button,
166
+ .scene-link {
167
+ background: var(--surface-pill);
168
+ color: var(--surface-pill-copy);
229
169
  }
230
170
 
231
- .persona-preview-card {
232
- min-height: 176px;
233
- padding: 22px;
234
- border-radius: 26px;
171
+ .home-secondary-link {
172
+ background: rgba(255, 255, 255, 0.58);
173
+ color: var(--surface-ink);
235
174
  }
236
175
 
237
- .persona-preview-card h3,
238
- .scene-depth-card h2,
239
- .scene-ops-card h3,
240
- .scene-nested-panel h3,
241
- .scene-section-title {
242
- margin: 10px 0 0;
243
- color: #ffffff;
244
- }
245
-
246
- .persona-preview-card p {
247
- margin: 12px 0 0;
248
- color: #d4def6;
249
- line-height: 1.7;
250
- }
251
-
252
- .persona-preview-card[data-tone="ocean"],
253
- .scene-depth-card[data-tone="ocean"] {
254
- background: linear-gradient(180deg, rgba(18, 59, 107, 0.92), rgba(15, 36, 76, 0.86));
255
- }
256
-
257
- .persona-preview-card[data-tone="coral"],
258
- .scene-depth-card[data-tone="coral"] {
259
- background: linear-gradient(180deg, rgba(234, 72, 107, 0.92), rgba(189, 52, 89, 0.86));
176
+ .home-primary-button:hover,
177
+ .home-secondary-link:hover,
178
+ .scene-link:hover {
179
+ transform: translateY(-1px);
180
+ box-shadow: 0 14px 28px rgba(49, 37, 25, 0.08);
260
181
  }
261
182
 
262
- .persona-preview-card[data-tone="violet"],
263
- .scene-depth-card[data-tone="violet"] {
264
- background: linear-gradient(180deg, rgba(97, 61, 152, 0.94), rgba(64, 38, 122, 0.9));
183
+ .home-feature-card,
184
+ .home-copy-card {
185
+ min-height: 220px;
265
186
  }
266
187
 
267
- .persona-runtime,
268
- .persona-card {
269
- padding: 26px;
188
+ .home-feature-card h2,
189
+ .home-copy-card h2 {
190
+ margin: 0 0 12px;
191
+ color: var(--surface-ink);
192
+ font-size: 1.05rem;
193
+ letter-spacing: 0.04em;
194
+ text-transform: uppercase;
270
195
  }
271
196
 
272
- .runtime-list {
197
+ .home-runtime-list,
198
+ .scene-status-grid {
273
199
  display: grid;
274
200
  gap: 14px;
275
- margin-top: 18px;
276
201
  }
277
202
 
278
- .runtime-row {
203
+ .home-runtime-row,
204
+ .scene-status-row {
279
205
  display: flex;
280
206
  justify-content: space-between;
281
207
  gap: 16px;
282
208
  padding-bottom: 12px;
283
- border-bottom: 1px solid rgba(170, 192, 244, 0.12);
209
+ border-bottom: 1px solid var(--surface-line);
210
+ color: var(--surface-muted);
284
211
  }
285
212
 
286
- .runtime-row:last-child {
213
+ .home-runtime-row:last-child,
214
+ .scene-status-row:last-child {
287
215
  padding-bottom: 0;
288
216
  border-bottom: 0;
289
217
  }
290
218
 
291
- .runtime-label {
292
- color: var(--surface-muted);
293
- }
294
-
295
- .runtime-value {
219
+ .home-runtime-row span:last-child,
220
+ .scene-status-row span:last-child {
221
+ color: var(--surface-ink);
222
+ font-weight: 600;
296
223
  text-align: right;
297
- color: #ffffff;
298
- font-weight: 700;
299
224
  }
300
225
 
301
- .persona-card h2 {
302
- margin: 0;
303
- font-size: 0.95rem;
304
- letter-spacing: 0.22em;
305
- text-transform: uppercase;
306
- color: #d8e4ff;
307
- }
308
-
309
- .persona-card p,
310
- .persona-card li {
311
- line-height: 1.8;
312
- }
313
-
314
- .persona-note-list,
315
- .scene-list {
226
+ .home-note-list,
227
+ .scene-note-list {
316
228
  margin: 16px 0 0;
317
229
  padding-left: 18px;
318
230
  display: grid;
319
231
  gap: 10px;
232
+ line-height: 1.75;
320
233
  }
321
234
 
322
- .persona-scene-card {
323
- min-height: 240px;
324
- }
325
-
326
- .scene-board {
327
- position: relative;
328
- overflow: hidden;
329
- padding: 32px;
330
- border-radius: 42px;
331
- background:
332
- radial-gradient(circle at top right, rgba(102, 139, 255, 0.22), transparent 26%),
333
- linear-gradient(180deg, rgba(13, 18, 35, 0.98), rgba(24, 31, 56, 0.96));
334
- }
335
-
336
- .scene-board::before {
337
- content: "";
338
- position: absolute;
339
- left: 26%;
340
- right: -10%;
341
- bottom: -14%;
342
- height: 280px;
343
- background:
344
- radial-gradient(circle at 14% 12%, rgba(196, 102, 83, 0.7), transparent 26%),
345
- radial-gradient(circle at 52% 28%, rgba(155, 96, 81, 0.64), transparent 28%),
346
- radial-gradient(circle at 78% 40%, rgba(102, 81, 96, 0.6), transparent 30%);
347
- opacity: 0.56;
348
- pointer-events: none;
349
- }
350
-
351
- .scene-board > * {
352
- position: relative;
353
- z-index: 1;
354
- }
355
-
356
- .scene-hero {
357
- grid-template-columns: minmax(0, 1fr) 260px;
358
- align-items: start;
359
- }
360
-
361
- .scene-hero h1 {
362
- margin: 10px 0 0;
363
- font-size: clamp(2.4rem, 4vw, 4rem);
364
- line-height: 0.96;
365
- letter-spacing: -0.04em;
366
- }
367
-
368
- .scene-copy,
369
- .scene-section-copy {
370
- max-width: 48rem;
371
- line-height: 1.8;
372
- }
373
-
374
- .scene-chip-row,
375
- .scene-material-row {
376
- display: flex;
377
- flex-wrap: wrap;
378
- gap: 12px;
379
- }
380
-
381
- .scene-chip {
382
- display: inline-flex;
383
- align-items: center;
384
- min-height: 40px;
385
- padding: 0 16px;
386
- border-radius: 999px;
387
- border: 1px solid rgba(166, 194, 244, 0.18);
388
- background: rgba(255, 255, 255, 0.08);
389
- color: #e8eeff;
390
- font-weight: 700;
391
- font-size: 0.92rem;
392
- }
393
-
394
- .scene-debug-card {
395
- padding: 14px 16px;
396
- border-radius: 18px;
397
- background: rgba(3, 7, 18, 0.88);
398
- color: #7af6b4;
399
- font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
400
- font-size: 12px;
401
- line-height: 1.6;
402
- }
403
-
404
- .scene-debug-title {
405
- margin-bottom: 8px;
406
- color: #67cfff;
407
- font-weight: 700;
408
- }
409
-
410
- .scene-depth-grid {
411
- grid-template-columns: repeat(3, minmax(0, 1fr));
412
- margin-top: 30px;
413
- }
414
-
415
- .scene-interaction-grid {
416
- grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
417
- align-items: start;
418
- margin-top: 30px;
235
+ .scene-shell {
236
+ display: grid;
237
+ gap: 22px;
419
238
  }
420
239
 
421
- .scene-interaction-card,
422
- .scene-proof-card {
423
- border-radius: 30px;
424
- padding: 24px;
240
+ .scene-header,
241
+ .scene-surface {
242
+ padding: 30px;
425
243
  }
426
244
 
427
- .scene-interaction-card {
245
+ .scene-header {
428
246
  display: grid;
247
+ grid-template-columns: minmax(0, 1fr) auto;
429
248
  gap: 18px;
430
249
  background:
431
- radial-gradient(circle at top right, rgba(122, 196, 255, 0.18), transparent 24%),
432
- linear-gradient(180deg, rgba(13, 25, 52, 0.92), rgba(22, 31, 58, 0.88));
433
- border-color: rgba(112, 255, 165, 0.38);
434
- }
435
-
436
- .scene-proof-card {
437
- background: rgba(4, 9, 20, 0.76);
250
+ radial-gradient(circle at top right, rgba(232, 221, 198, 0.72), transparent 28%),
251
+ var(--surface-panel-strong);
438
252
  }
439
253
 
440
- .scene-metric-grid {
441
- margin: 0;
442
- display: grid;
443
- grid-template-columns: repeat(4, minmax(0, 1fr));
444
- gap: 14px;
445
- }
446
-
447
- .scene-metric {
448
- margin: 0;
449
- padding: 16px;
450
- border-radius: 20px;
451
- background: rgba(255, 255, 255, 0.07);
452
- border: 1px solid rgba(153, 181, 238, 0.12);
453
- }
454
-
455
- .scene-metric dt {
456
- color: var(--surface-muted);
457
- font-size: 0.82rem;
458
- text-transform: uppercase;
459
- letter-spacing: 0.08em;
460
- }
461
-
462
- .scene-metric dd {
463
- margin: 10px 0 0;
464
- color: #ffffff;
465
- font-size: 1.7rem;
466
- font-weight: 700;
467
- letter-spacing: -0.03em;
468
- }
469
-
470
- .scene-proof-strip {
471
- display: flex;
472
- flex-wrap: wrap;
473
- gap: 12px;
254
+ .scene-badge-stack {
255
+ align-content: start;
256
+ justify-content: flex-end;
474
257
  }
475
258
 
476
- .scene-proof-strip span {
259
+ .scene-badge,
260
+ .scene-tool-chip {
477
261
  display: inline-flex;
478
262
  align-items: center;
479
- min-height: 38px;
263
+ min-height: 40px;
480
264
  padding: 0 14px;
481
265
  border-radius: 999px;
482
- background: rgba(255, 255, 255, 0.08);
483
- border: 1px solid rgba(166, 194, 244, 0.16);
484
- color: #edf4ff;
266
+ border: 1px solid var(--surface-line);
267
+ background: rgba(255, 255, 255, 0.62);
268
+ color: var(--surface-ink);
485
269
  font-size: 0.92rem;
486
270
  }
487
271
 
488
- .scene-depth-card {
489
- min-height: 210px;
490
- padding: 24px;
491
- border-radius: 30px;
492
- border-color: rgba(112, 255, 165, 0.44);
493
- display: grid;
494
- align-content: start;
495
- }
496
-
497
- .scene-depth-card p {
498
- margin-top: 12px;
499
- line-height: 1.75;
272
+ .scene-workspace-grid {
273
+ grid-template-columns: minmax(0, 1.34fr) minmax(300px, 0.66fr);
274
+ align-items: start;
500
275
  }
501
276
 
502
- .scene-depth-meta {
503
- display: inline-flex;
504
- width: fit-content;
505
- margin-top: 18px;
506
- padding: 6px 10px;
507
- border-radius: 999px;
508
- background: rgba(6, 11, 26, 0.22);
509
- color: #eff6ff;
510
- font-size: 0.78rem;
511
- font-weight: 700;
512
- letter-spacing: 0.04em;
513
- text-transform: uppercase;
277
+ .scene-workspace-primary {
278
+ min-height: 450px;
279
+ background:
280
+ radial-gradient(circle at top left, rgba(244, 235, 216, 0.86), transparent 30%),
281
+ var(--surface-panel-strong);
514
282
  }
515
283
 
516
- .scene-material-section {
284
+ .scene-step-grid,
285
+ .scene-secondary-stack {
517
286
  display: grid;
518
287
  gap: 16px;
519
- margin-top: 30px;
520
- }
521
-
522
- .scene-section-title {
523
- font-size: 2rem;
524
- line-height: 1;
525
- }
526
-
527
- .scene-material-chip {
528
- display: inline-flex;
529
- align-items: center;
530
- justify-content: center;
531
- min-height: 52px;
532
- padding: 0 20px;
533
- border-radius: 999px;
534
- background: rgba(255, 255, 255, 0.12);
535
- color: #ffffff;
536
- font-weight: 700;
537
- letter-spacing: 0.02em;
538
- }
539
-
540
- .scene-content-grid {
541
- grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
542
- align-items: start;
543
- margin-top: 30px;
544
- }
545
-
546
- .scene-nested-shell {
547
- min-height: 340px;
548
- padding: 28px;
549
- border-radius: 34px;
550
- background:
551
- linear-gradient(180deg, rgba(20, 31, 62, 0.9), rgba(12, 19, 40, 0.82));
552
- display: grid;
553
- gap: 18px;
554
288
  }
555
289
 
556
- .scene-nested-panel {
557
- width: min(580px, 100%);
558
- padding: 24px;
559
- border-radius: 28px;
560
- background: linear-gradient(180deg, rgba(16, 50, 96, 0.88), rgba(17, 27, 60, 0.84));
290
+ .scene-step-grid {
291
+ grid-template-columns: repeat(2, minmax(0, 1fr));
292
+ margin-top: 24px;
561
293
  }
562
294
 
563
- .scene-ops-grid {
564
- display: grid;
565
- gap: 16px;
295
+ .scene-step-card {
296
+ padding: 18px;
297
+ border-radius: 22px;
298
+ border: 1px solid var(--surface-line);
299
+ background: rgba(255, 255, 255, 0.58);
566
300
  }
567
301
 
568
- .scene-ops-card {
569
- padding: 22px;
570
- border-radius: 26px;
571
- background: rgba(255, 255, 255, 0.1);
302
+ .scene-step-card h3 {
303
+ margin: 0 0 10px;
304
+ color: var(--surface-ink);
305
+ font-size: 1rem;
572
306
  }
573
307
 
574
308
  .scene-footer {
575
- display: flex;
576
- flex-wrap: wrap;
577
309
  justify-content: space-between;
578
310
  align-items: center;
579
- gap: 16px;
580
- margin-top: 28px;
581
311
  }
582
312
 
583
313
  .scene-footer-copy {
584
- color: #c8d6fa;
585
- font-size: 0.9rem;
586
- }
587
-
588
- .scene-back-link {
589
- width: auto;
314
+ margin: 0;
315
+ color: var(--surface-muted);
316
+ line-height: 1.7;
590
317
  }
591
318
 
592
319
  html.is-spatial {
593
- background: transparent;
594
320
  --xr-background-material: transparent;
595
321
  }
596
322
 
597
- html.is-spatial body {
598
- background: transparent;
323
+ html.is-spatial .scene-shell {
324
+ width: min(1400px, calc(100% - 24px));
325
+ padding-top: 20px;
599
326
  }
600
327
 
601
- html.is-spatial .scene-chip,
602
- html.is-spatial .scene-material-chip {
603
- --xr-background-material: regular;
604
- }
605
-
606
- html.is-spatial .scene-ops-card,
607
- html.is-spatial .scene-interaction-card,
608
- html.is-spatial .scene-proof-card,
609
- html.is-spatial .scene-nested-shell,
610
- html.is-spatial .scene-nested-panel {
611
- --xr-background-material: thin;
612
- }
613
-
614
- html.is-spatial .scene-debug-card {
615
- --xr-background-material: transparent;
616
- }
617
-
618
- html.is-spatial .scene-nested-shell {
619
- transform: translateZ(16px) rotateX(6deg);
620
- transform-origin: top left;
328
+ html.is-spatial .scene-header,
329
+ html.is-spatial .scene-surface {
330
+ background:
331
+ radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 28%),
332
+ rgba(255, 250, 241, 0.22);
621
333
  }
622
334
 
623
335
  @media (max-width: 1080px) {
624
- .persona-grid {
336
+ .home-grid,
337
+ .scene-workspace-grid,
338
+ .scene-header {
339
+ grid-template-columns: 1fr;
340
+ }
341
+
342
+ .home-card-grid,
343
+ .scene-support-grid,
344
+ .scene-step-grid {
625
345
  grid-template-columns: repeat(2, minmax(0, 1fr));
626
346
  }
627
347
 
628
- .scene-interaction-grid,
629
- .scene-hero,
630
- .scene-content-grid {
631
- grid-template-columns: 1fr;
348
+ .scene-badge-stack {
349
+ justify-content: flex-start;
632
350
  }
633
351
  }
634
352
 
635
353
  @media (max-width: 820px) {
636
- .persona-shell,
354
+ .persona-home,
637
355
  .scene-shell {
638
356
  width: min(100%, calc(100% - 28px));
639
- padding-top: 20px;
357
+ padding-top: 22px;
640
358
  }
641
359
 
642
- .persona-header,
643
- .persona-grid,
644
- .persona-preview-strip,
645
- .scene-interaction-grid,
646
- .scene-depth-grid {
360
+ .home-card-grid,
361
+ .scene-support-grid,
362
+ .scene-step-grid {
647
363
  grid-template-columns: 1fr;
648
364
  }
649
365
 
650
- .scene-metric-grid {
651
- grid-template-columns: repeat(2, minmax(0, 1fr));
366
+ .home-panel,
367
+ .scene-header,
368
+ .scene-surface {
369
+ padding: 24px;
652
370
  }
653
371
 
654
- .scene-board {
655
- padding: 24px;
372
+ .home-title {
373
+ font-size: clamp(2.6rem, 12vw, 4rem);
656
374
  }
657
375
 
658
- .scene-section-title {
659
- font-size: 1.6rem;
376
+ .scene-title {
377
+ font-size: clamp(2.2rem, 10vw, 3.2rem);
660
378
  }
661
379
  }