@agent-link/server 0.1.536 → 0.1.538

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.
@@ -0,0 +1,1228 @@
1
+ @font-face {
2
+ font-family: "Space Grotesk";
3
+ src: url("/vendor/SpaceGrotesk-latin.woff2") format("woff2");
4
+ font-style: normal;
5
+ font-weight: 300 700;
6
+ font-display: swap;
7
+ }
8
+
9
+ :root {
10
+ color-scheme: light;
11
+ --bg: #f7f8f5;
12
+ --surface: #ffffff;
13
+ --surface-soft: #f0f3ef;
14
+ --ink: #17221f;
15
+ --ink-soft: #40504b;
16
+ --muted: #6c7a75;
17
+ --line: #d9e0dc;
18
+ --line-dark: #c4cec8;
19
+ --accent: #167d69;
20
+ --accent-dark: #0c594a;
21
+ --accent-soft: #dff1eb;
22
+ --warm: #e9784f;
23
+ --dark: #14211e;
24
+ --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
25
+ --sans: "Space Grotesk", "Segoe UI", Arial, sans-serif;
26
+ --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
27
+ --page: min(1180px, calc(100% - 48px));
28
+ --shadow: 0 28px 70px rgba(22, 39, 34, 0.12);
29
+ }
30
+
31
+ * {
32
+ box-sizing: border-box;
33
+ margin: 0;
34
+ padding: 0;
35
+ }
36
+
37
+ html {
38
+ scroll-behavior: smooth;
39
+ scroll-padding-top: 76px;
40
+ overflow-x: clip;
41
+ }
42
+
43
+ body {
44
+ min-width: 320px;
45
+ overflow-x: hidden;
46
+ background-color: #f2efe8;
47
+ color: var(--ink);
48
+ font-family: var(--sans);
49
+ line-height: 1.5;
50
+ -webkit-font-smoothing: antialiased;
51
+ }
52
+
53
+ body::before,
54
+ body::after {
55
+ content: "";
56
+ position: fixed;
57
+ inset: 0;
58
+ z-index: -2;
59
+ pointer-events: none;
60
+ }
61
+
62
+ body::before {
63
+ background:
64
+ linear-gradient(rgba(30, 40, 36, 0.025) 1px, transparent 1px),
65
+ linear-gradient(90deg, rgba(30, 40, 36, 0.025) 1px, transparent 1px),
66
+ linear-gradient(rgba(30, 40, 36, 0.045) 1px, transparent 1px),
67
+ linear-gradient(90deg, rgba(30, 40, 36, 0.045) 1px, transparent 1px),
68
+ #f2efe8;
69
+ background-size: 4px 4px, 4px 4px, 20px 20px, 20px 20px;
70
+ }
71
+
72
+ body::after {
73
+ z-index: -1;
74
+ background:
75
+ radial-gradient(circle at 10% 3%, rgba(212, 177, 128, 0.18), transparent 30rem),
76
+ radial-gradient(circle at 92% 15%, rgba(83, 122, 113, 0.1), transparent 34rem),
77
+ repeating-radial-gradient(circle at 30% 40%, rgba(70, 63, 53, 0.02) 0 0.6px, transparent 0.8px 4px);
78
+ opacity: 0.8;
79
+ mix-blend-mode: multiply;
80
+ }
81
+
82
+ a {
83
+ color: inherit;
84
+ text-decoration: none;
85
+ }
86
+
87
+ button {
88
+ color: inherit;
89
+ font: inherit;
90
+ }
91
+
92
+ button,
93
+ a {
94
+ -webkit-tap-highlight-color: transparent;
95
+ }
96
+
97
+ :focus-visible {
98
+ outline: 3px solid rgba(22, 125, 105, 0.35);
99
+ outline-offset: 3px;
100
+ }
101
+
102
+ ::selection {
103
+ background: var(--accent-soft);
104
+ }
105
+
106
+ .skip-link {
107
+ position: fixed;
108
+ top: 10px;
109
+ left: 10px;
110
+ z-index: 100;
111
+ padding: 9px 12px;
112
+ background: var(--dark);
113
+ color: white;
114
+ transform: translateY(-150%);
115
+ }
116
+
117
+ .skip-link:focus {
118
+ transform: translateY(0);
119
+ }
120
+
121
+ .site-header {
122
+ position: sticky;
123
+ top: 0;
124
+ z-index: 30;
125
+ border-bottom: 1px solid transparent;
126
+ transition: background 160ms ease, border-color 160ms ease;
127
+ }
128
+
129
+ .site-header.is-scrolled {
130
+ border-color: var(--line);
131
+ background: rgba(247, 248, 245, 0.9);
132
+ backdrop-filter: blur(16px);
133
+ }
134
+
135
+ .nav-shell {
136
+ width: var(--page);
137
+ height: 68px;
138
+ display: flex;
139
+ align-items: center;
140
+ gap: 28px;
141
+ margin: 0 auto;
142
+ }
143
+
144
+ .brand {
145
+ display: inline-flex;
146
+ align-items: center;
147
+ gap: 10px;
148
+ flex: none;
149
+ font-size: 0.94rem;
150
+ font-weight: 680;
151
+ letter-spacing: -0.035em;
152
+ }
153
+
154
+ .brand-mark {
155
+ width: 30px;
156
+ height: 30px;
157
+ display: block;
158
+ border-radius: 50%;
159
+ }
160
+
161
+ .nav-links {
162
+ display: flex;
163
+ align-items: center;
164
+ gap: 4px;
165
+ margin: 0 auto;
166
+ }
167
+
168
+ .nav-links a,
169
+ .text-link,
170
+ .language-link {
171
+ min-height: 40px;
172
+ display: inline-flex;
173
+ align-items: center;
174
+ padding: 0 10px;
175
+ color: var(--ink-soft);
176
+ font-size: 0.78rem;
177
+ font-weight: 550;
178
+ }
179
+
180
+ .nav-links a:hover,
181
+ .text-link:hover,
182
+ .language-link:hover {
183
+ color: var(--accent-dark);
184
+ }
185
+
186
+ .nav-actions {
187
+ display: flex;
188
+ align-items: center;
189
+ gap: 4px;
190
+ margin-left: auto;
191
+ flex: none;
192
+ }
193
+
194
+ .button {
195
+ min-height: 44px;
196
+ display: inline-flex;
197
+ align-items: center;
198
+ justify-content: center;
199
+ gap: 9px;
200
+ border: 1px solid var(--line-dark);
201
+ border-radius: 10px;
202
+ padding: 0 16px;
203
+ background: transparent;
204
+ cursor: pointer;
205
+ font-size: 0.78rem;
206
+ font-weight: 650;
207
+ transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
208
+ }
209
+
210
+ .button:hover {
211
+ transform: translateY(-2px);
212
+ box-shadow: 0 8px 18px rgba(21, 50, 42, 0.1);
213
+ }
214
+
215
+ .button-primary {
216
+ border-color: var(--accent-dark);
217
+ background: var(--accent-dark);
218
+ color: white;
219
+ }
220
+
221
+ .button-secondary {
222
+ background: rgba(255, 255, 255, 0.7);
223
+ }
224
+
225
+ .button-light {
226
+ border-color: rgba(255, 255, 255, 0.38);
227
+ color: white;
228
+ }
229
+
230
+ .hero,
231
+ .capabilities,
232
+ .trust-section,
233
+ .site-footer {
234
+ width: var(--page);
235
+ margin-inline: auto;
236
+ }
237
+
238
+ .hero {
239
+ min-height: 620px;
240
+ display: grid;
241
+ grid-template-columns: minmax(0, 0.86fr) minmax(560px, 1.14fr);
242
+ gap: clamp(42px, 6vw, 84px);
243
+ align-items: center;
244
+ padding: 40px 0 48px;
245
+ }
246
+
247
+ .eyebrow,
248
+ .section-label {
249
+ color: var(--accent);
250
+ font-family: var(--mono);
251
+ font-size: 0.65rem;
252
+ font-weight: 700;
253
+ letter-spacing: 0.11em;
254
+ text-transform: uppercase;
255
+ }
256
+
257
+ .eyebrow {
258
+ display: flex;
259
+ align-items: center;
260
+ gap: 8px;
261
+ margin-bottom: 18px;
262
+ }
263
+
264
+ .eyebrow span {
265
+ width: 7px;
266
+ height: 7px;
267
+ border-radius: 50%;
268
+ background: var(--accent);
269
+ box-shadow: 0 0 0 4px var(--accent-soft);
270
+ }
271
+
272
+ h1,
273
+ h2,
274
+ h3 {
275
+ font-family: var(--display);
276
+ text-wrap: balance;
277
+ }
278
+
279
+ h1 {
280
+ max-width: 610px;
281
+ font-size: clamp(3rem, 5.15vw, 4.6rem);
282
+ font-weight: 500;
283
+ letter-spacing: -0.058em;
284
+ line-height: 0.93;
285
+ }
286
+
287
+ h1 em {
288
+ color: var(--accent);
289
+ font-style: normal;
290
+ font-weight: inherit;
291
+ }
292
+
293
+ .hero-lead {
294
+ max-width: 600px;
295
+ margin-top: 22px;
296
+ color: var(--ink-soft);
297
+ font-size: 1rem;
298
+ line-height: 1.65;
299
+ }
300
+
301
+ .agent-list {
302
+ display: flex;
303
+ flex-wrap: wrap;
304
+ gap: 7px;
305
+ margin-top: 22px;
306
+ }
307
+
308
+ .agent-list > span {
309
+ min-height: 32px;
310
+ display: inline-flex;
311
+ align-items: center;
312
+ gap: 7px;
313
+ padding: 0 10px;
314
+ border: 1px solid var(--line);
315
+ border-radius: 8px;
316
+ background: rgba(255, 255, 255, 0.72);
317
+ color: var(--ink-soft);
318
+ font-size: 0.7rem;
319
+ font-weight: 600;
320
+ }
321
+
322
+ .provider-icon {
323
+ width: 21px;
324
+ height: 21px;
325
+ display: inline-grid;
326
+ place-items: center;
327
+ flex: none;
328
+ border-radius: 6px;
329
+ font-style: normal;
330
+ background: white;
331
+ }
332
+
333
+ .provider-icon img {
334
+ width: 16px;
335
+ height: 16px;
336
+ display: block;
337
+ }
338
+
339
+ .hero-actions {
340
+ display: flex;
341
+ flex-wrap: wrap;
342
+ gap: 9px;
343
+ margin-top: 25px;
344
+ }
345
+
346
+ .install-command {
347
+ min-height: 64px;
348
+ display: grid;
349
+ grid-template-columns: auto minmax(0, 1fr) auto;
350
+ align-items: center;
351
+ gap: 11px;
352
+ width: min(100%, 430px);
353
+ padding: 0 7px 0 15px;
354
+ border: 1px solid var(--line-dark);
355
+ border-radius: 10px;
356
+ background: var(--surface);
357
+ cursor: pointer;
358
+ color: var(--ink);
359
+ text-align: left;
360
+ transition: border-color 140ms ease, box-shadow 140ms ease;
361
+ }
362
+
363
+ .install-command:hover {
364
+ border-color: var(--accent);
365
+ box-shadow: 0 8px 20px rgba(21, 50, 42, 0.09);
366
+ }
367
+
368
+ .install-command code {
369
+ font-family: var(--mono);
370
+ font-size: 0.68rem;
371
+ line-height: 1.65;
372
+ }
373
+
374
+ .install-command code span {
375
+ display: block;
376
+ white-space: nowrap;
377
+ }
378
+
379
+ .install-command code span + span::before {
380
+ content: "&& ";
381
+ color: var(--accent);
382
+ }
383
+
384
+ .install-prompt {
385
+ color: var(--accent);
386
+ font-family: var(--mono);
387
+ font-size: 0.76rem;
388
+ }
389
+
390
+ .copy-label {
391
+ padding: 8px 10px;
392
+ border-radius: 7px;
393
+ background: var(--accent-dark);
394
+ color: white;
395
+ font-size: 0.62rem;
396
+ font-weight: 650;
397
+ }
398
+
399
+ .compatibility {
400
+ margin-top: 12px;
401
+ color: var(--muted);
402
+ font-family: var(--mono);
403
+ font-size: 0.59rem;
404
+ }
405
+
406
+ .product-window {
407
+ overflow: hidden;
408
+ border: 1px solid var(--line-dark);
409
+ border-radius: 15px;
410
+ background: var(--surface);
411
+ box-shadow: var(--shadow);
412
+ transform: perspective(1200px) rotateY(-1.5deg) rotateX(0.5deg);
413
+ }
414
+
415
+ .window-bar {
416
+ height: 38px;
417
+ display: grid;
418
+ grid-template-columns: 1fr auto 1fr;
419
+ align-items: center;
420
+ padding: 0 12px;
421
+ border-bottom: 1px solid var(--line);
422
+ background: #f1f4f2;
423
+ color: var(--muted);
424
+ font-family: var(--mono);
425
+ font-size: 0.54rem;
426
+ }
427
+
428
+ .window-dots {
429
+ display: flex;
430
+ gap: 5px;
431
+ }
432
+
433
+ .window-dots i {
434
+ width: 7px;
435
+ height: 7px;
436
+ border-radius: 50%;
437
+ background: #cbd3ce;
438
+ }
439
+
440
+ .window-dots i:first-child {
441
+ background: #dd8366;
442
+ }
443
+
444
+ .window-dots i:nth-child(2) {
445
+ background: #d9b763;
446
+ }
447
+
448
+ .window-dots i:nth-child(3) {
449
+ background: #66a887;
450
+ }
451
+
452
+ .encrypted-label {
453
+ justify-self: end;
454
+ color: var(--accent);
455
+ }
456
+
457
+ .workspace-ui {
458
+ min-height: 430px;
459
+ display: grid;
460
+ grid-template-columns: 205px minmax(0, 1fr);
461
+ }
462
+
463
+ .provider-switcher {
464
+ min-height: 43px;
465
+ display: flex;
466
+ align-items: center;
467
+ gap: 5px;
468
+ padding: 5px 10px;
469
+ border-bottom: 1px solid var(--line);
470
+ background: #fbfcfb;
471
+ }
472
+
473
+ .provider-switcher-label {
474
+ margin-right: auto;
475
+ color: var(--muted);
476
+ font-family: var(--mono);
477
+ font-size: 0.48rem;
478
+ text-transform: uppercase;
479
+ }
480
+
481
+ .provider-switcher > span:not(.provider-switcher-label) {
482
+ min-height: 29px;
483
+ display: inline-flex;
484
+ align-items: center;
485
+ gap: 5px;
486
+ padding: 3px 6px;
487
+ border: 1px solid transparent;
488
+ border-radius: 7px;
489
+ color: var(--ink-soft);
490
+ font-size: 0.51rem;
491
+ font-weight: 600;
492
+ }
493
+
494
+ .provider-switcher > span.active {
495
+ border-color: var(--line);
496
+ background: var(--surface);
497
+ }
498
+
499
+ .provider-switcher .provider-icon {
500
+ width: 19px;
501
+ height: 19px;
502
+ }
503
+
504
+ .provider-switcher .provider-icon img {
505
+ width: 15px;
506
+ height: 15px;
507
+ }
508
+
509
+ .provider-switcher b {
510
+ min-width: 14px;
511
+ height: 14px;
512
+ display: grid;
513
+ place-items: center;
514
+ border-radius: 99px;
515
+ background: var(--surface-soft);
516
+ color: var(--muted);
517
+ font-family: var(--mono);
518
+ font-size: 0.42rem;
519
+ }
520
+
521
+ .session-sidebar {
522
+ padding: 13px 10px;
523
+ border-right: 1px solid var(--line);
524
+ background: #f5f7f5;
525
+ }
526
+
527
+ .sidebar-title {
528
+ height: 28px;
529
+ display: flex;
530
+ align-items: center;
531
+ justify-content: space-between;
532
+ padding: 0 7px;
533
+ font-size: 0.65rem;
534
+ }
535
+
536
+ .sidebar-title span {
537
+ color: var(--muted);
538
+ font-size: 1rem;
539
+ }
540
+
541
+ .directory-label {
542
+ margin: 10px 7px 5px;
543
+ color: #8b9692;
544
+ font-family: var(--mono);
545
+ font-size: 0.49rem;
546
+ text-transform: uppercase;
547
+ }
548
+
549
+ .session-row {
550
+ position: relative;
551
+ min-height: 52px;
552
+ display: flex;
553
+ align-items: center;
554
+ gap: 8px;
555
+ padding: 7px;
556
+ border: 1px solid transparent;
557
+ border-radius: 8px;
558
+ }
559
+
560
+ .session-row.active {
561
+ border-color: var(--line);
562
+ background: white;
563
+ box-shadow: 0 4px 10px rgba(20, 40, 34, 0.05);
564
+ }
565
+
566
+ .session-row > span {
567
+ min-width: 0;
568
+ }
569
+
570
+ .session-row strong,
571
+ .session-row small {
572
+ display: block;
573
+ overflow: hidden;
574
+ text-overflow: ellipsis;
575
+ white-space: nowrap;
576
+ }
577
+
578
+ .session-row strong {
579
+ font-size: 0.58rem;
580
+ font-weight: 650;
581
+ }
582
+
583
+ .session-row small {
584
+ margin-top: 2px;
585
+ color: var(--muted);
586
+ font-size: 0.49rem;
587
+ }
588
+
589
+ .session-row > b {
590
+ position: absolute;
591
+ top: 9px;
592
+ right: 8px;
593
+ width: 5px;
594
+ height: 5px;
595
+ border-radius: 50%;
596
+ background: var(--accent);
597
+ }
598
+
599
+ .chat-ui {
600
+ min-width: 0;
601
+ display: flex;
602
+ flex-direction: column;
603
+ background: white;
604
+ }
605
+
606
+ .chat-head {
607
+ height: 55px;
608
+ display: flex;
609
+ align-items: center;
610
+ justify-content: space-between;
611
+ gap: 12px;
612
+ padding: 0 16px;
613
+ border-bottom: 1px solid var(--line);
614
+ }
615
+
616
+ .chat-head strong,
617
+ .chat-head small {
618
+ display: block;
619
+ }
620
+
621
+ .chat-head strong {
622
+ font-size: 0.69rem;
623
+ }
624
+
625
+ .chat-head small {
626
+ margin-top: 2px;
627
+ color: var(--muted);
628
+ font-size: 0.5rem;
629
+ }
630
+
631
+ .chat-actions {
632
+ display: flex;
633
+ gap: 4px;
634
+ }
635
+
636
+ .chat-actions span {
637
+ padding: 5px 7px;
638
+ border: 1px solid var(--line);
639
+ border-radius: 5px;
640
+ color: var(--ink-soft);
641
+ font-size: 0.51rem;
642
+ }
643
+
644
+ .chat-body {
645
+ flex: 1;
646
+ padding: 26px 22px 12px;
647
+ }
648
+
649
+ .message {
650
+ max-width: 87%;
651
+ padding: 11px 12px;
652
+ border-radius: 9px;
653
+ font-size: 0.61rem;
654
+ line-height: 1.55;
655
+ }
656
+
657
+ .user-message {
658
+ margin-left: auto;
659
+ background: #edf2f0;
660
+ }
661
+
662
+ .agent-message {
663
+ margin-top: 18px;
664
+ border: 1px solid var(--line);
665
+ background: white;
666
+ }
667
+
668
+ .message-author {
669
+ display: flex;
670
+ align-items: center;
671
+ gap: 7px;
672
+ margin-bottom: 8px;
673
+ font-weight: 650;
674
+ }
675
+
676
+ .message-author i {
677
+ width: 19px;
678
+ height: 19px;
679
+ }
680
+
681
+ .tool-call {
682
+ display: flex;
683
+ align-items: center;
684
+ gap: 8px;
685
+ margin-top: 11px;
686
+ padding: 8px;
687
+ border: 1px solid var(--line);
688
+ border-radius: 6px;
689
+ background: #f7f9f8;
690
+ }
691
+
692
+ .tool-call > span {
693
+ color: var(--accent);
694
+ }
695
+
696
+ .tool-call strong,
697
+ .tool-call small {
698
+ display: block;
699
+ }
700
+
701
+ .tool-call strong {
702
+ font-family: var(--mono);
703
+ font-size: 0.5rem;
704
+ }
705
+
706
+ .tool-call small {
707
+ color: var(--muted);
708
+ font-size: 0.48rem;
709
+ }
710
+
711
+ .chat-input {
712
+ height: 48px;
713
+ display: flex;
714
+ align-items: center;
715
+ justify-content: space-between;
716
+ margin: 0 15px 14px;
717
+ padding: 0 8px 0 12px;
718
+ border: 1px solid var(--line-dark);
719
+ border-radius: 9px;
720
+ color: #9aa4a0;
721
+ font-size: 0.55rem;
722
+ }
723
+
724
+ .chat-input button {
725
+ width: 29px;
726
+ height: 29px;
727
+ border: 0;
728
+ border-radius: 7px;
729
+ background: var(--accent-dark);
730
+ color: white;
731
+ }
732
+
733
+ .capabilities {
734
+ padding: 42px 0 46px;
735
+ border-top: 1px solid var(--line);
736
+ }
737
+
738
+ .section-intro {
739
+ display: grid;
740
+ grid-template-columns: 150px minmax(0, 1fr);
741
+ gap: 24px;
742
+ margin-bottom: 28px;
743
+ }
744
+
745
+ .section-intro h2 {
746
+ font-size: clamp(2rem, 3.7vw, 3.3rem);
747
+ font-weight: 500;
748
+ letter-spacing: -0.045em;
749
+ line-height: 0.98;
750
+ }
751
+
752
+ .section-intro > div > p {
753
+ max-width: 740px;
754
+ margin-top: 10px;
755
+ color: var(--muted);
756
+ font-size: 0.83rem;
757
+ }
758
+
759
+ .capability-grid {
760
+ display: grid;
761
+ grid-template-columns: 1.17fr 0.95fr 0.88fr;
762
+ gap: 12px;
763
+ }
764
+
765
+ .capability-card {
766
+ min-height: 318px;
767
+ padding: 23px;
768
+ border: 1px solid var(--line);
769
+ border-radius: 13px;
770
+ background: var(--surface);
771
+ }
772
+
773
+ .card-icon {
774
+ width: 36px;
775
+ height: 36px;
776
+ display: grid;
777
+ place-items: center;
778
+ margin-bottom: 15px;
779
+ border-radius: 9px;
780
+ background: var(--accent-soft);
781
+ color: var(--accent-dark);
782
+ font-family: var(--mono);
783
+ font-size: 0.8rem;
784
+ font-weight: 700;
785
+ }
786
+
787
+ .capability-card h3 {
788
+ font-size: 1.16rem;
789
+ font-weight: 600;
790
+ letter-spacing: -0.035em;
791
+ }
792
+
793
+ .capability-card > p,
794
+ .capability-card > div > p {
795
+ margin-top: 7px;
796
+ color: var(--muted);
797
+ font-size: 0.71rem;
798
+ }
799
+
800
+ .session-stack {
801
+ display: grid;
802
+ gap: 6px;
803
+ margin-top: 17px;
804
+ }
805
+
806
+ .session-stack > span {
807
+ min-height: 48px;
808
+ display: grid;
809
+ grid-template-columns: 27px 1fr auto;
810
+ grid-template-rows: 1fr 1fr;
811
+ align-items: center;
812
+ column-gap: 7px;
813
+ padding: 6px 8px;
814
+ border: 1px solid var(--line);
815
+ border-radius: 7px;
816
+ background: #f8faf9;
817
+ }
818
+
819
+ .session-stack i {
820
+ grid-row: 1 / 3;
821
+ }
822
+
823
+ .session-stack b {
824
+ align-self: end;
825
+ font-size: 0.56rem;
826
+ }
827
+
828
+ .session-stack small {
829
+ align-self: start;
830
+ color: var(--muted);
831
+ font-family: var(--mono);
832
+ font-size: 0.44rem;
833
+ }
834
+
835
+ .session-stack em {
836
+ grid-column: 3;
837
+ grid-row: 1 / 3;
838
+ color: var(--accent);
839
+ font-family: var(--mono);
840
+ font-size: 0.44rem;
841
+ font-style: normal;
842
+ }
843
+
844
+ .tool-list {
845
+ display: grid;
846
+ gap: 1px;
847
+ margin-top: 17px;
848
+ border: 1px solid var(--line);
849
+ border-radius: 8px;
850
+ overflow: hidden;
851
+ list-style: none;
852
+ background: var(--line);
853
+ }
854
+
855
+ .tool-list li {
856
+ min-height: 43px;
857
+ display: flex;
858
+ align-items: center;
859
+ justify-content: space-between;
860
+ gap: 8px;
861
+ padding: 0 10px;
862
+ background: #f8faf9;
863
+ font-size: 0.61rem;
864
+ font-weight: 650;
865
+ }
866
+
867
+ .tool-list small {
868
+ color: var(--muted);
869
+ font-size: 0.5rem;
870
+ font-weight: 400;
871
+ }
872
+
873
+ .steps-card {
874
+ background: var(--surface);
875
+ color: var(--ink);
876
+ }
877
+
878
+ .steps-card .section-label {
879
+ color: var(--accent);
880
+ }
881
+
882
+ .steps-card ol {
883
+ margin-top: 20px;
884
+ list-style: none;
885
+ }
886
+
887
+ .steps-card li {
888
+ display: grid;
889
+ grid-template-columns: 30px 1fr;
890
+ gap: 10px;
891
+ padding: 13px 0;
892
+ border-top: 1px solid var(--line);
893
+ }
894
+
895
+ .steps-card li > span {
896
+ width: 26px;
897
+ height: 26px;
898
+ display: grid;
899
+ place-items: center;
900
+ border: 1px solid var(--line-dark);
901
+ border-radius: 50%;
902
+ color: var(--accent);
903
+ font-family: var(--mono);
904
+ font-size: 0.55rem;
905
+ }
906
+
907
+ .steps-card strong,
908
+ .steps-card small {
909
+ display: block;
910
+ }
911
+
912
+ .steps-card strong {
913
+ font-size: 0.67rem;
914
+ }
915
+
916
+ .steps-card small {
917
+ margin-top: 3px;
918
+ color: var(--muted);
919
+ font-size: 0.52rem;
920
+ }
921
+
922
+ .trust-section {
923
+ min-height: 280px;
924
+ display: grid;
925
+ grid-template-columns: repeat(3, 1fr);
926
+ gap: 12px;
927
+ padding: 14px;
928
+ border-radius: 16px;
929
+ border: 1px solid var(--line);
930
+ background: rgba(255, 255, 255, 0.45);
931
+ color: var(--ink);
932
+ }
933
+
934
+ .trust-card {
935
+ padding: 30px 24px;
936
+ border: 1px solid var(--line);
937
+ border-radius: 11px;
938
+ background: var(--surface);
939
+ }
940
+
941
+ .trust-card .section-label {
942
+ color: var(--accent);
943
+ }
944
+
945
+ .trust-card h2 {
946
+ margin-top: 10px;
947
+ font-size: 1.45rem;
948
+ font-weight: 500;
949
+ letter-spacing: -0.04em;
950
+ }
951
+
952
+ .trust-card p:last-child {
953
+ margin-top: 10px;
954
+ color: var(--muted);
955
+ font-size: 0.68rem;
956
+ line-height: 1.6;
957
+ }
958
+
959
+ .final-action {
960
+ display: flex;
961
+ flex-direction: column;
962
+ justify-content: center;
963
+ padding: 25px 18px;
964
+ }
965
+
966
+ .final-action p {
967
+ margin-bottom: 15px;
968
+ color: var(--muted);
969
+ font-size: 0.75rem;
970
+ }
971
+
972
+ .site-footer {
973
+ min-height: 76px;
974
+ display: grid;
975
+ grid-template-columns: 1fr auto 1fr;
976
+ align-items: center;
977
+ gap: 24px;
978
+ color: var(--muted);
979
+ font-size: 0.65rem;
980
+ }
981
+
982
+ .footer-brand .brand-mark {
983
+ width: 25px;
984
+ height: 25px;
985
+ border-radius: 7px;
986
+ font-size: 0.72rem;
987
+ }
988
+
989
+ .site-footer > div {
990
+ display: flex;
991
+ justify-content: flex-end;
992
+ gap: 16px;
993
+ }
994
+
995
+ .toast {
996
+ position: fixed;
997
+ z-index: 60;
998
+ bottom: 20px;
999
+ left: 50%;
1000
+ padding: 11px 16px;
1001
+ border-radius: 9px;
1002
+ background: var(--dark);
1003
+ color: white;
1004
+ box-shadow: 0 12px 28px rgba(15, 35, 29, 0.24);
1005
+ font-family: var(--mono);
1006
+ font-size: 0.66rem;
1007
+ opacity: 0;
1008
+ pointer-events: none;
1009
+ transform: translate(-50%, 12px);
1010
+ transition: opacity 160ms ease, transform 160ms ease;
1011
+ }
1012
+
1013
+ .toast.show {
1014
+ opacity: 1;
1015
+ transform: translate(-50%, 0);
1016
+ }
1017
+
1018
+ @media (max-width: 1050px) {
1019
+ .nav-links {
1020
+ display: none;
1021
+ }
1022
+
1023
+ .nav-actions {
1024
+ margin-left: auto;
1025
+ }
1026
+
1027
+ .hero {
1028
+ grid-template-columns: 1fr;
1029
+ padding-top: 55px;
1030
+ }
1031
+
1032
+ .hero-copy {
1033
+ max-width: 760px;
1034
+ }
1035
+
1036
+ .product-window {
1037
+ max-width: 760px;
1038
+ transform: none;
1039
+ }
1040
+
1041
+ .capability-grid {
1042
+ grid-template-columns: 1fr 1fr;
1043
+ }
1044
+
1045
+ .steps-card {
1046
+ grid-column: 1 / -1;
1047
+ min-height: auto;
1048
+ }
1049
+
1050
+ .steps-card ol {
1051
+ display: grid;
1052
+ grid-template-columns: repeat(3, 1fr);
1053
+ }
1054
+
1055
+ .steps-card li {
1056
+ border-top: 0;
1057
+ border-right: 1px solid rgba(255, 255, 255, 0.14);
1058
+ padding: 10px 16px 10px 0;
1059
+ }
1060
+
1061
+ .steps-card li:last-child {
1062
+ border-right: 0;
1063
+ padding-left: 16px;
1064
+ }
1065
+
1066
+ .trust-section {
1067
+ grid-template-columns: 1fr 1fr;
1068
+ }
1069
+
1070
+ .final-action {
1071
+ grid-column: 1 / -1;
1072
+ flex-direction: row;
1073
+ align-items: center;
1074
+ justify-content: space-between;
1075
+ padding: 12px 18px;
1076
+ }
1077
+
1078
+ .final-action p {
1079
+ margin: 0;
1080
+ }
1081
+ }
1082
+
1083
+ @media (max-width: 700px) {
1084
+ :root {
1085
+ --page: min(100% - 28px, 1180px);
1086
+ }
1087
+
1088
+ .nav-shell {
1089
+ height: 62px;
1090
+ }
1091
+
1092
+ .brand > span:last-child,
1093
+ .github-link {
1094
+ display: none;
1095
+ }
1096
+
1097
+ .nav-install {
1098
+ min-height: 40px;
1099
+ padding: 0 11px;
1100
+ }
1101
+
1102
+ .hero {
1103
+ min-height: auto;
1104
+ padding: 48px 0;
1105
+ }
1106
+
1107
+ h1 {
1108
+ font-size: clamp(2.7rem, 13vw, 4rem);
1109
+ }
1110
+
1111
+ .hero-lead {
1112
+ font-size: 0.9rem;
1113
+ }
1114
+
1115
+ .hero-actions {
1116
+ align-items: stretch;
1117
+ flex-direction: column;
1118
+ }
1119
+
1120
+ .hero-actions .button {
1121
+ width: 100%;
1122
+ }
1123
+
1124
+ .workspace-ui {
1125
+ min-height: 410px;
1126
+ grid-template-columns: 128px minmax(0, 1fr);
1127
+ }
1128
+
1129
+ .provider-switcher-label,
1130
+ .provider-switcher b {
1131
+ display: none;
1132
+ }
1133
+
1134
+ .provider-switcher {
1135
+ justify-content: space-between;
1136
+ }
1137
+
1138
+ .provider-switcher > span:not(.provider-switcher-label) {
1139
+ padding-inline: 4px;
1140
+ font-size: 0;
1141
+ }
1142
+
1143
+ .session-sidebar {
1144
+ padding-inline: 6px;
1145
+ }
1146
+
1147
+ .session-row {
1148
+ gap: 5px;
1149
+ padding-inline: 5px;
1150
+ }
1151
+
1152
+ .session-row > i {
1153
+ display: none;
1154
+ }
1155
+
1156
+ .chat-actions span:not(:last-child) {
1157
+ display: none;
1158
+ }
1159
+
1160
+ .chat-body {
1161
+ padding: 18px 10px 8px;
1162
+ }
1163
+
1164
+ .message {
1165
+ max-width: 96%;
1166
+ font-size: 0.56rem;
1167
+ }
1168
+
1169
+ .section-intro {
1170
+ grid-template-columns: 1fr;
1171
+ gap: 10px;
1172
+ }
1173
+
1174
+ .capability-grid,
1175
+ .trust-section {
1176
+ grid-template-columns: 1fr;
1177
+ }
1178
+
1179
+ .steps-card {
1180
+ grid-column: auto;
1181
+ }
1182
+
1183
+ .steps-card ol {
1184
+ display: block;
1185
+ }
1186
+
1187
+ .steps-card li,
1188
+ .steps-card li:last-child {
1189
+ border-top: 1px solid rgba(255, 255, 255, 0.14);
1190
+ border-right: 0;
1191
+ padding: 13px 0;
1192
+ }
1193
+
1194
+ .trust-section {
1195
+ padding: 10px;
1196
+ }
1197
+
1198
+ .final-action {
1199
+ grid-column: auto;
1200
+ align-items: stretch;
1201
+ flex-direction: column;
1202
+ }
1203
+
1204
+ .final-action p {
1205
+ margin-bottom: 12px;
1206
+ }
1207
+
1208
+ .site-footer {
1209
+ grid-template-columns: 1fr auto;
1210
+ padding: 20px 0;
1211
+ }
1212
+
1213
+ .site-footer > p {
1214
+ display: none;
1215
+ }
1216
+ }
1217
+
1218
+ @media (prefers-reduced-motion: reduce) {
1219
+ html {
1220
+ scroll-behavior: auto;
1221
+ }
1222
+
1223
+ *,
1224
+ *::before,
1225
+ *::after {
1226
+ transition-duration: 0.01ms !important;
1227
+ }
1228
+ }