@hraness/design-kit 0.34.0 → 0.35.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 (50) hide show
  1. package/AGENT_SETUP.md +4 -0
  2. package/ARTICLE_COPY.md +12 -6
  3. package/README.md +20 -2
  4. package/dist/{chunk-nwpcjm48.js → chunk-6bfr0g23.js} +1115 -441
  5. package/dist/{chunk-h4k7yv6x.js → chunk-6ts4955n.js} +36 -36
  6. package/dist/chunk-gmea6p0d.js +13 -0
  7. package/dist/{chunk-mr1vdcjq.js → chunk-tzd7177a.js} +142 -82
  8. package/dist/index.js +5 -1
  9. package/dist/mockups/client.js +50 -15
  10. package/dist/portfolio.js +586 -85
  11. package/dist/react/index.js +169 -105
  12. package/dist/react/platform-install.js +3 -2
  13. package/dist/react/server.js +17 -3
  14. package/dist/stylex-manifest.json +1 -1
  15. package/dist/stylex.css +376 -58
  16. package/package.json +16 -3
  17. package/portfolio-inventory.json +1 -1
  18. package/src/diagrams.ts +11 -0
  19. package/src/index.ts +2 -0
  20. package/src/marketing-comparison.css +162 -0
  21. package/src/marketing-diagram.css +24 -0
  22. package/src/mockups/client.tsx +25 -17
  23. package/src/mockups.css +19 -0
  24. package/src/plain-publication.css +9 -6
  25. package/src/portfolio.generated.json +578 -86
  26. package/src/portfolio.generated.ts +578 -86
  27. package/src/portfolio.ts +73 -0
  28. package/src/product-marketing-foundation.css +29 -0
  29. package/src/product-marketing.css +133 -38
  30. package/src/react/agent-setup-prompt.stylex.ts +5 -25
  31. package/src/react/agent-setup-prompt.tsx +9 -18
  32. package/src/react/article.tsx +2 -2
  33. package/src/react/design-gallery.tsx +34 -6
  34. package/src/react/index.ts +3 -0
  35. package/src/react/marketing-account.stylex.ts +74 -0
  36. package/src/react/marketing-account.tsx +69 -0
  37. package/src/react/marketing-comparison.stylex.ts +24 -0
  38. package/src/react/marketing-comparison.tsx +73 -0
  39. package/src/react/marketing-diagram.stylex.ts +8 -0
  40. package/src/react/marketing-diagram.tsx +33 -0
  41. package/src/react/platform-install.stylex.ts +9 -37
  42. package/src/react/platform-install.tsx +17 -24
  43. package/src/react/product-marketing.stylex.ts +138 -109
  44. package/src/react/product-marketing.tsx +69 -43
  45. package/src/react/server.ts +3 -0
  46. package/src/react/setup-copy-button.stylex.ts +39 -0
  47. package/src/react/setup-copy-button.tsx +20 -0
  48. package/src/styles.css +2 -0
  49. package/src/typography.css +32 -0
  50. /package/dist/{chunk-4d79eskk.js → chunk-c80g58j1.js} +0 -0
package/dist/stylex.css CHANGED
@@ -1,10 +1,18 @@
1
1
  @layer base, components;
2
2
  @layer components.hraness-design-kit.legacy, components.hraness-design-kit.priority1, components.hraness-design-kit.priority2, components.hraness-design-kit.priority3, components.hraness-design-kit.priority4, components.hraness-design-kit.priority5, components.hraness-design-kit.priority6, components.hraness-design-kit.priority7, components.hraness-design-kit.priority8;
3
3
  @layer components.hraness-design-kit.priority2 {
4
+ .x4st1jw {
5
+ border-block: 0;
6
+ }
7
+
4
8
  .xqjagye {
5
9
  border-block: var(--hraness-marketing-rule);
6
10
  }
7
11
 
12
+ .x5jh6js {
13
+ border-inline: 0;
14
+ }
15
+
8
16
  .x5qop9b {
9
17
  grid-area: bottom;
10
18
  }
@@ -61,6 +69,10 @@
61
69
  padding: .4rem .4rem 0 1rem;
62
70
  }
63
71
 
72
+ .x1v5tq4r {
73
+ padding: .55rem .5rem;
74
+ }
75
+
64
76
  .x3699eh {
65
77
  padding: .55rem .9rem;
66
78
  }
@@ -109,6 +121,14 @@
109
121
  padding: 1rem 1rem 0;
110
122
  }
111
123
 
124
+ .x3hm25i {
125
+ padding: 1rem 1rem 1rem 0;
126
+ }
127
+
128
+ .x1uz70x1 {
129
+ padding: 1rem;
130
+ }
131
+
112
132
  .x1nn0urv {
113
133
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
114
134
  }
@@ -129,10 +149,6 @@
129
149
  padding: clamp(1.5rem, 4vw, 2.5rem);
130
150
  }
131
151
 
132
- .x14nneff {
133
- padding: clamp(1rem, 2vw, 1.25rem) clamp(1.125rem, 2.5vw, 1.5rem);
134
- }
135
-
136
152
  .xj4rqp {
137
153
  padding: var(--_hraness-platform-install-stacked-tabs-padding, var(--_hraness-platform-install-narrow-tabs-padding, .25rem));
138
154
  }
@@ -200,6 +216,10 @@
200
216
  background-position: var(--hraness-design-procedural-grid-offset-x) var(--hraness-design-procedural-grid-offset-y),var(--hraness-design-procedural-grid-offset-x) var(--hraness-design-procedural-grid-offset-y);
201
217
  }
202
218
 
219
+ .xvnnzik {
220
+ border-block-end: 1px solid var(--line);
221
+ }
222
+
203
223
  .xothggy {
204
224
  border-block-end: var(--hraness-marketing-chrome-rule);
205
225
  }
@@ -212,6 +232,10 @@
212
232
  border-block-start: 0;
213
233
  }
214
234
 
235
+ .x19fofvp {
236
+ border-block-start: 2px solid var(--hraness-marketing-related-tone);
237
+ }
238
+
215
239
  .xlejusl {
216
240
  border-block-start: var(--hraness-marketing-rule);
217
241
  }
@@ -244,6 +268,10 @@
244
268
  border-color: color-mix(in srgb,var(--hraness-design-procedural-ripple-color) 46%,transparent);
245
269
  }
246
270
 
271
+ .xtxfw9o {
272
+ border-color: color-mix(in srgb,var(--hraness-marketing-accent, var(--focus, Highlight)) 34%,color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 12%,transparent));
273
+ }
274
+
247
275
  .x1ls9zlr {
248
276
  border-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 12%,transparent);
249
277
  }
@@ -296,6 +324,10 @@
296
324
  border-left: var(--hraness-marketing-surface-rule);
297
325
  }
298
326
 
327
+ .x6i6fhv {
328
+ border-radius: .375rem;
329
+ }
330
+
299
331
  .x18jy0o0 {
300
332
  border-radius: .4rem;
301
333
  }
@@ -304,6 +336,10 @@
304
336
  border-radius: .5rem;
305
337
  }
306
338
 
339
+ .xmx9ex2 {
340
+ border-radius: .625rem;
341
+ }
342
+
307
343
  .x1yt6v20 {
308
344
  border-radius: .75rem;
309
345
  }
@@ -412,6 +448,10 @@
412
448
  border-top: 2px solid var(--_hraness-foil-edge, var(--lightningcss-light, #000) var(--lightningcss-dark, #fff));
413
449
  }
414
450
 
451
+ .xbzzath {
452
+ border-top: var(--hraness-marketing-rule, 1px solid var(--line));
453
+ }
454
+
415
455
  .xzdcvt0 {
416
456
  border-top: var(--hraness-marketing-rule);
417
457
  }
@@ -448,6 +488,10 @@
448
488
  font-variant: inherit;
449
489
  }
450
490
 
491
+ .xl8vk3q {
492
+ gap: .05rem;
493
+ }
494
+
451
495
  .x1enigpx {
452
496
  gap: .125rem;
453
497
  }
@@ -516,6 +560,10 @@
516
560
  gap: .6rem;
517
561
  }
518
562
 
563
+ .xilar1o {
564
+ gap: .75rem 1.5rem;
565
+ }
566
+
519
567
  .x8233eu {
520
568
  gap: .75rem;
521
569
  }
@@ -528,14 +576,22 @@
528
576
  gap: 1.25rem;
529
577
  }
530
578
 
531
- .xru8eyw {
532
- gap: 1.5rem;
533
- }
534
-
535
579
  .x8fetqu {
536
580
  gap: 1rem;
537
581
  }
538
582
 
583
+ .x1h7ehgl {
584
+ gap: 2.5rem 3.5rem;
585
+ }
586
+
587
+ .xia337e {
588
+ gap: 2.75rem 3rem;
589
+ }
590
+
591
+ .xm2penl {
592
+ gap: 2rem 4rem;
593
+ }
594
+
539
595
  .xnromcf {
540
596
  gap: calc(var(--_mark-size) * .4);
541
597
  }
@@ -656,10 +712,6 @@
656
712
  padding-block: .25rem;
657
713
  }
658
714
 
659
- .x1267ecw {
660
- padding-block: .35rem;
661
- }
662
-
663
715
  .x1bilvtl {
664
716
  padding-block: .375rem;
665
717
  }
@@ -672,6 +724,10 @@
672
724
  padding-block: .5rem;
673
725
  }
674
726
 
727
+ .x8fiyw4 {
728
+ padding-block: .65rem;
729
+ }
730
+
675
731
  .xo0yzjp {
676
732
  padding-block: .75rem;
677
733
  }
@@ -680,6 +736,10 @@
680
736
  padding-block: .85rem;
681
737
  }
682
738
 
739
+ .x142x9wm {
740
+ padding-block: .875rem;
741
+ }
742
+
683
743
  .xs0puwk {
684
744
  padding-block: 0 1.5rem;
685
745
  }
@@ -696,6 +756,10 @@
696
756
  padding-block: clamp(1.5rem, 4vw, 3rem);
697
757
  }
698
758
 
759
+ .xgqmzqw {
760
+ padding-block: clamp(2.5rem, 6vw, 4rem);
761
+ }
762
+
699
763
  .xh0s0sg {
700
764
  padding-block: max(var(--layout-chrome-inset),env(safe-area-inset-top)) var(--layout-chrome-inset);
701
765
  }
@@ -752,10 +816,6 @@
752
816
  padding-inline: .625rem;
753
817
  }
754
818
 
755
- .x1f6otoe {
756
- padding-inline: .65rem;
757
- }
758
-
759
819
  .x1ryrjj2 {
760
820
  padding-inline: .75rem;
761
821
  }
@@ -772,6 +832,10 @@
772
832
  padding-inline: 0;
773
833
  }
774
834
 
835
+ .xzsmjar {
836
+ padding-inline: 1.5rem;
837
+ }
838
+
775
839
  .xnxx81d {
776
840
  padding-inline: 1rem;
777
841
  }
@@ -840,6 +904,14 @@
840
904
  outline: 2px solid var(--hraness-marketing-accent);
841
905
  }
842
906
 
907
+ .xg81e2w:focus-visible {
908
+ outline: 2px solid var(--hraness-marketing-ink);
909
+ }
910
+
911
+ .x10s4vih:focus-visible {
912
+ outline: 2px solid var(--primary);
913
+ }
914
+
843
915
  .xduu9rl:hover {
844
916
  background-position: 0 0;
845
917
  }
@@ -848,10 +920,6 @@
848
920
  text-decoration: none;
849
921
  }
850
922
 
851
- .xt0b8zv:hover {
852
- text-decoration: underline;
853
- }
854
-
855
923
  @media (forced-colors: active) {
856
924
  .x2c5uud.x2c5uud {
857
925
  background-position: 0 0;
@@ -1036,6 +1104,10 @@
1036
1104
  align-items: end;
1037
1105
  }
1038
1106
 
1107
+ .x1cy8zhl {
1108
+ align-items: flex-start;
1109
+ }
1110
+
1039
1111
  .x7a106z {
1040
1112
  align-items: start;
1041
1113
  }
@@ -1207,10 +1279,6 @@
1207
1279
  background-color: color-mix(in srgb,var(--foreground) 8%,transparent);
1208
1280
  }
1209
1281
 
1210
- .xf7cb96 {
1211
- background-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 4%,var(--hraness-marketing-surface, var(--surface, Canvas)));
1212
- }
1213
-
1214
1282
  .xy1scu2 {
1215
1283
  background-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 5%,var(--hraness-marketing-background, var(--background, Canvas)));
1216
1284
  }
@@ -1231,6 +1299,10 @@
1231
1299
  background-color: color-mix(in srgb,var(--popover) 94%,transparent);
1232
1300
  }
1233
1301
 
1302
+ .x1sstqva {
1303
+ background-color: color-mix(in srgb,var(--primary) 5%,transparent);
1304
+ }
1305
+
1234
1306
  .xjbqb8w {
1235
1307
  background-color: #0000;
1236
1308
  }
@@ -1579,10 +1651,18 @@
1579
1651
  block-size: .6rem;
1580
1652
  }
1581
1653
 
1654
+ .xf7zn63 {
1655
+ block-size: 1.125rem;
1656
+ }
1657
+
1582
1658
  .xkl2xug {
1583
1659
  block-size: 1.5rem;
1584
1660
  }
1585
1661
 
1662
+ .x18i7o63 {
1663
+ block-size: 1.75rem;
1664
+ }
1665
+
1586
1666
  .xuxy95z {
1587
1667
  block-size: 100%;
1588
1668
  }
@@ -1595,14 +1675,14 @@
1595
1675
  block-size: 1rem;
1596
1676
  }
1597
1677
 
1598
- .x1cd9x91 {
1599
- block-size: 2.75rem;
1600
- }
1601
-
1602
1678
  .x18o2qet {
1603
1679
  block-size: 4.5rem;
1604
1680
  }
1605
1681
 
1682
+ .xzlj3eo {
1683
+ block-size: auto;
1684
+ }
1685
+
1606
1686
  .x1v98byi {
1607
1687
  block-size: var(--hraness-design-fader-thumb-block-size);
1608
1688
  }
@@ -1827,6 +1907,10 @@
1827
1907
  box-shadow: 0 3px 12px #24140059;
1828
1908
  }
1829
1909
 
1910
+ .x1s13key {
1911
+ box-shadow: 0 3px 16px color-mix(in srgb,var(--hraness-marketing-accent, var(--focus, Highlight)) 7%,transparent);
1912
+ }
1913
+
1830
1914
  .xcbldvc {
1831
1915
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--hraness-marketing-accent) 30%,transparent),var(--hraness-marketing-surface-shadow);
1832
1916
  }
@@ -1947,6 +2031,10 @@
1947
2031
  color: var(--hraness-marketing-ink, var(--foreground, CanvasText));
1948
2032
  }
1949
2033
 
2034
+ .x1sl809t {
2035
+ color: var(--hraness-marketing-ink, var(--foreground));
2036
+ }
2037
+
1950
2038
  .xtylnni {
1951
2039
  color: var(--hraness-marketing-ink);
1952
2040
  }
@@ -1959,6 +2047,10 @@
1959
2047
  color: var(--hraness-marketing-muted);
1960
2048
  }
1961
2049
 
2050
+ .xq5ojvh {
2051
+ color: var(--hraness-marketing-related-tone, var(--hraness-marketing-ink));
2052
+ }
2053
+
1962
2054
  .xurt5rx {
1963
2055
  color: var(--hraness-material-ink, var(--foreground, CanvasText));
1964
2056
  }
@@ -1971,6 +2063,14 @@
1971
2063
  color: var(--hraness-material-ink);
1972
2064
  }
1973
2065
 
2066
+ .x1tjwi9f {
2067
+ color: var(--hraness-studio-amber);
2068
+ }
2069
+
2070
+ .x1tvez03 {
2071
+ color: var(--hraness-studio-emerald);
2072
+ }
2073
+
1974
2074
  .x12x9krh {
1975
2075
  color: var(--muted, GrayText);
1976
2076
  }
@@ -1991,10 +2091,22 @@
1991
2091
  color: var(--popover-foreground);
1992
2092
  }
1993
2093
 
2094
+ .xgbnldg {
2095
+ color: var(--primary-foreground);
2096
+ }
2097
+
2098
+ .xzwifym {
2099
+ color: var(--primary);
2100
+ }
2101
+
1994
2102
  .x154ywzv {
1995
2103
  color: var(--secondary-foreground);
1996
2104
  }
1997
2105
 
2106
+ .x19hr0qk {
2107
+ column-gap: .6rem;
2108
+ }
2109
+
1998
2110
  .xsin8gy {
1999
2111
  column-gap: .75rem;
2000
2112
  }
@@ -2247,10 +2359,6 @@
2247
2359
  font-size: 1.1rem;
2248
2360
  }
2249
2361
 
2250
- .x1603h9y {
2251
- font-size: 1.25rem;
2252
- }
2253
-
2254
2362
  .x1k6wstc {
2255
2363
  font-size: 10px;
2256
2364
  }
@@ -2267,6 +2375,10 @@
2267
2375
  font-size: 2.25rem;
2268
2376
  }
2269
2377
 
2378
+ .xwsyq91 {
2379
+ font-size: 20px;
2380
+ }
2381
+
2270
2382
  .x68snkw {
2271
2383
  font-size: calc(var(--_mark-size) * .36);
2272
2384
  }
@@ -2275,6 +2387,10 @@
2275
2387
  font-size: calc(var(--_mark-size) * .46);
2276
2388
  }
2277
2389
 
2390
+ .xnwvzbp {
2391
+ font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
2392
+ }
2393
+
2278
2394
  .x1cic291 {
2279
2395
  font-size: clamp(1.75rem, 3vw, 2.25rem);
2280
2396
  }
@@ -2335,6 +2451,14 @@
2335
2451
  font-variation-settings: inherit;
2336
2452
  }
2337
2453
 
2454
+ .xo1l8bm {
2455
+ font-weight: 400;
2456
+ }
2457
+
2458
+ .x10p5zqr {
2459
+ font-weight: 450;
2460
+ }
2461
+
2338
2462
  .xk50ysn {
2339
2463
  font-weight: 500;
2340
2464
  }
@@ -2439,6 +2563,14 @@
2439
2563
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
2440
2564
  }
2441
2565
 
2566
+ .xdkhdln {
2567
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
2568
+ }
2569
+
2570
+ .x1h695s4 {
2571
+ grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--_hraness-marketing-grid-track, 100%)),1fr));
2572
+ }
2573
+
2442
2574
  .x1v4bfo1 {
2443
2575
  grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--_hraness-marketing-grid-track, 16rem)),1fr));
2444
2576
  }
@@ -2447,6 +2579,10 @@
2447
2579
  grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--_hraness-marketing-grid-track, 18rem)),1fr));
2448
2580
  }
2449
2581
 
2582
+ .xe92ajh {
2583
+ grid-template-columns: repeat(var(--_hraness-agent-target-wide-columns, var(--_hraness-agent-target-columns, 1)),minmax(0,1fr));
2584
+ }
2585
+
2450
2586
  .x3g07o8 {
2451
2587
  grid-template-columns: repeat(var(--hraness-marketing-fact-columns, 4),minmax(0,1fr));
2452
2588
  }
@@ -2467,10 +2603,18 @@
2467
2603
  inline-size: .6rem;
2468
2604
  }
2469
2605
 
2606
+ .x1ri1nt6 {
2607
+ inline-size: 1.125rem;
2608
+ }
2609
+
2470
2610
  .xsta65m {
2471
2611
  inline-size: 1.5rem;
2472
2612
  }
2473
2613
 
2614
+ .x1mgeycz {
2615
+ inline-size: 1.75rem;
2616
+ }
2617
+
2474
2618
  .xiuoait {
2475
2619
  inline-size: 100%;
2476
2620
  }
@@ -2483,10 +2627,6 @@
2483
2627
  inline-size: 1rem;
2484
2628
  }
2485
2629
 
2486
- .x166urtk {
2487
- inline-size: 2.75rem;
2488
- }
2489
-
2490
2630
  .x130h922 {
2491
2631
  inline-size: 2rem;
2492
2632
  }
@@ -2511,6 +2651,10 @@
2511
2651
  inline-size: min(100%, 36rem);
2512
2652
  }
2513
2653
 
2654
+ .xsjjiva {
2655
+ inline-size: min(100%, 44rem);
2656
+ }
2657
+
2514
2658
  .x19vpta5 {
2515
2659
  inline-size: min(100%,var(--hraness-marketing-measure));
2516
2660
  }
@@ -2647,6 +2791,10 @@
2647
2791
  line-height: 1.1;
2648
2792
  }
2649
2793
 
2794
+ .x1uo3zyz {
2795
+ line-height: 1.15;
2796
+ }
2797
+
2650
2798
  .x1u7k74 {
2651
2799
  line-height: 1.2;
2652
2800
  }
@@ -2707,10 +2855,6 @@
2707
2855
  line-height: var(--hraness-marketing-h2-leading, 1.15);
2708
2856
  }
2709
2857
 
2710
- .x16b8c5l {
2711
- line-height: var(--hraness-marketing-h3-leading, 1.15);
2712
- }
2713
-
2714
2858
  .x1nt6xn0 {
2715
2859
  line-height: var(--hraness-marketing-summary-leading, 1.6);
2716
2860
  }
@@ -2727,6 +2871,10 @@
2727
2871
  margin-block-end: .75rem;
2728
2872
  }
2729
2873
 
2874
+ .xe92vt {
2875
+ margin-block-end: 1.1rem;
2876
+ }
2877
+
2730
2878
  .x1wf7w3r {
2731
2879
  margin-block-end: var(--space-1);
2732
2880
  }
@@ -2735,6 +2883,14 @@
2735
2883
  margin-block-start: -.35rem;
2736
2884
  }
2737
2885
 
2886
+ .x1lepkon {
2887
+ margin-block-start: .1rem;
2888
+ }
2889
+
2890
+ .xo4pzau {
2891
+ margin-block-start: .2rem;
2892
+ }
2893
+
2738
2894
  .x2qgizq {
2739
2895
  margin-block-start: .3rem;
2740
2896
  }
@@ -2743,6 +2899,10 @@
2743
2899
  margin-block-start: .5rem;
2744
2900
  }
2745
2901
 
2902
+ .x1n5adje {
2903
+ margin-block-start: .75rem;
2904
+ }
2905
+
2746
2906
  .x4pwpt2 {
2747
2907
  margin-block-start: .8rem;
2748
2908
  }
@@ -2751,6 +2911,10 @@
2751
2911
  margin-block-start: 1.5rem;
2752
2912
  }
2753
2913
 
2914
+ .xm3oedo {
2915
+ margin-block-start: 1rem;
2916
+ }
2917
+
2754
2918
  .xvc5jky {
2755
2919
  margin-inline-start: auto;
2756
2920
  }
@@ -2810,6 +2974,10 @@
2810
2974
  max-inline-size: 14ch;
2811
2975
  }
2812
2976
 
2977
+ .x1vophnm {
2978
+ max-inline-size: 15rem;
2979
+ }
2980
+
2813
2981
  .x17152no {
2814
2982
  max-inline-size: 18ch;
2815
2983
  }
@@ -2822,6 +2990,14 @@
2822
2990
  max-inline-size: 24ch;
2823
2991
  }
2824
2992
 
2993
+ .x1wuf55a {
2994
+ max-inline-size: 26ch;
2995
+ }
2996
+
2997
+ .xlf9zpa {
2998
+ max-inline-size: 76ch;
2999
+ }
3000
+
2825
3001
  .x1ljtl1n {
2826
3002
  max-inline-size: calc(100vw - 2rem);
2827
3003
  }
@@ -2914,10 +3090,22 @@
2914
3090
  min-inline-size: 2rem;
2915
3091
  }
2916
3092
 
3093
+ .xze7o54 {
3094
+ min-inline-size: 40rem;
3095
+ }
3096
+
3097
+ .x31wxcc {
3098
+ min-inline-size: 8.5rem;
3099
+ }
3100
+
2917
3101
  .x1dc76y4 {
2918
3102
  min-inline-size: 8rem;
2919
3103
  }
2920
3104
 
3105
+ .x927zys {
3106
+ min-inline-size: 9rem;
3107
+ }
3108
+
2921
3109
  .x9hh0qe {
2922
3110
  min-inline-size: var(--interactive-target-compact, 2.75rem);
2923
3111
  }
@@ -3098,10 +3286,18 @@
3098
3286
  overflow-wrap: normal;
3099
3287
  }
3100
3288
 
3289
+ .x1x9z3lm {
3290
+ padding-block-end: 1.25rem;
3291
+ }
3292
+
3101
3293
  .x17lzgkz {
3102
3294
  padding-block-start: .2rem;
3103
3295
  }
3104
3296
 
3297
+ .x10sryfm {
3298
+ padding-block-start: 1rem;
3299
+ }
3300
+
3105
3301
  .xln4sw3 {
3106
3302
  padding-block-start: var(--hraness-sticky-offset, 2.75rem);
3107
3303
  }
@@ -3166,6 +3362,28 @@
3166
3362
  text-align: start;
3167
3363
  }
3168
3364
 
3365
+ .x4k6xgu {
3366
+ -webkit-text-decoration-color: color-mix(in srgb,currentColor 40%,transparent);
3367
+ text-decoration-color: color-mix(in srgb,currentColor 40%,transparent);
3368
+ }
3369
+
3370
+ .x6k6sr1 {
3371
+ -webkit-text-decoration-color: color-mix(in srgb,currentColor 45%,transparent);
3372
+ text-decoration-color: color-mix(in srgb,currentColor 45%,transparent);
3373
+ }
3374
+
3375
+ .xujl8zx {
3376
+ text-decoration-line: underline;
3377
+ }
3378
+
3379
+ .xi2nhp4 {
3380
+ text-decoration-style: dotted;
3381
+ }
3382
+
3383
+ .xyi4chj {
3384
+ text-decoration-thickness: 1px;
3385
+ }
3386
+
3169
3387
  .xlyipyv {
3170
3388
  text-overflow: ellipsis;
3171
3389
  }
@@ -3178,6 +3396,14 @@
3178
3396
  text-transform: uppercase;
3179
3397
  }
3180
3398
 
3399
+ .xdsgf93 {
3400
+ text-underline-offset: .22em;
3401
+ }
3402
+
3403
+ .x1ohr1zr {
3404
+ text-underline-offset: .2em;
3405
+ }
3406
+
3181
3407
  .x1w2vvpw {
3182
3408
  text-wrap: balance;
3183
3409
  }
@@ -3331,10 +3557,18 @@
3331
3557
  vertical-align: baseline;
3332
3558
  }
3333
3559
 
3560
+ .x3ajldb {
3561
+ vertical-align: bottom;
3562
+ }
3563
+
3334
3564
  .xxymvpz {
3335
3565
  vertical-align: middle;
3336
3566
  }
3337
3567
 
3568
+ .x16dsc37 {
3569
+ vertical-align: top;
3570
+ }
3571
+
3338
3572
  .xuxw1ft {
3339
3573
  white-space: nowrap;
3340
3574
  }
@@ -3463,6 +3697,10 @@
3463
3697
  outline-color: var(--hraness-appearance-focus, var(--hraness-material-focus, var(--ui-ring, Highlight)));
3464
3698
  }
3465
3699
 
3700
+ .x1bqaal:focus-visible {
3701
+ outline-offset: -2px;
3702
+ }
3703
+
3466
3704
  .x13iak60:focus-visible {
3467
3705
  outline-offset: 1px;
3468
3706
  }
@@ -3471,6 +3709,10 @@
3471
3709
  outline-offset: 2px;
3472
3710
  }
3473
3711
 
3712
+ .xj3ae5l:focus-visible {
3713
+ outline-offset: 3px;
3714
+ }
3715
+
3474
3716
  .x9v5kkp:focus-visible, .xq2elj:is([data-focus-visible], :focus-visible) {
3475
3717
  outline-style: solid;
3476
3718
  }
@@ -3483,6 +3725,10 @@
3483
3725
  outline-width: 3px;
3484
3726
  }
3485
3727
 
3728
+ .x1e7jyuc:focus-visible {
3729
+ text-decoration-color: currentColor;
3730
+ }
3731
+
3486
3732
  .x1rpfuv1:is([data-pressed], :active) {
3487
3733
  transform: translateY(1px);
3488
3734
  }
@@ -3511,12 +3757,16 @@
3511
3757
  background-color: color-mix(in oklch,var(--hraness-marketing-ink) 6%,var(--hraness-marketing-surface));
3512
3758
  }
3513
3759
 
3760
+ .x1eb7ohu:hover {
3761
+ background-color: color-mix(in oklch,var(--primary) 88%,var(--foreground));
3762
+ }
3763
+
3514
3764
  .x1lcgz2m:hover {
3515
3765
  background-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 6%,transparent);
3516
3766
  }
3517
3767
 
3518
- .x3oli7v:hover {
3519
- background-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 9%,var(--hraness-marketing-surface, var(--surface, Canvas)));
3768
+ .xjoriyk:hover {
3769
+ background-color: color-mix(in srgb,var(--hraness-marketing-related-tone, var(--hraness-marketing-ink)) 6%,transparent);
3520
3770
  }
3521
3771
 
3522
3772
  .x1n5bzlp:hover {
@@ -3559,10 +3809,6 @@
3559
3809
  background-size: auto;
3560
3810
  }
3561
3811
 
3562
- .x1a28r24:hover {
3563
- box-shadow: 0 0 0 1px var(--hraness-marketing-line-strong);
3564
- }
3565
-
3566
3812
  .x1njw758:hover {
3567
3813
  box-shadow: 0 1px 4px color-mix(in srgb,var(--foreground, CanvasText) 12%,transparent);
3568
3814
  }
@@ -3591,6 +3837,10 @@
3591
3837
  color: var(--hraness-marketing-ink);
3592
3838
  }
3593
3839
 
3840
+ .x9ojkr9:hover {
3841
+ text-decoration-color: currentColor;
3842
+ }
3843
+
3594
3844
  @media (forced-colors: active) {
3595
3845
  .x1iqhqvn.x1iqhqvn {
3596
3846
  -webkit-text-fill-color: CanvasText;
@@ -3849,7 +4099,15 @@
3849
4099
  .x19m6iyc.x19m6iyc {
3850
4100
  grid-template-columns: 1fr;
3851
4101
  }
4102
+ }
4103
+
4104
+ @media (width >= 50rem) {
4105
+ .x2k1869.x2k1869 {
4106
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
4107
+ }
4108
+ }
3852
4109
 
4110
+ @media (width <= 48rem) {
3853
4111
  .xj7gdfw.xj7gdfw {
3854
4112
  grid-template-columns: minmax(0, 1fr);
3855
4113
  }
@@ -3992,6 +4250,12 @@
3992
4250
  }
3993
4251
  }
3994
4252
 
4253
+ @media (forced-colors: active) {
4254
+ .xnnf6oi.xnnf6oi {
4255
+ text-decoration-color: linktext;
4256
+ }
4257
+ }
4258
+
3995
4259
  @media (prefers-reduced-motion: reduce) {
3996
4260
  .x9jhkrq.x9jhkrq {
3997
4261
  transform: none !important;
@@ -4104,6 +4368,10 @@
4104
4368
  border-right-width: 2px;
4105
4369
  }
4106
4370
 
4371
+ .x1h3am7x {
4372
+ border-top-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 12%,transparent);
4373
+ }
4374
+
4107
4375
  .x1v8p93f {
4108
4376
  border-top-color: #0000;
4109
4377
  }
@@ -4120,6 +4388,10 @@
4120
4388
  border-top-style: solid;
4121
4389
  }
4122
4390
 
4391
+ .x178xt8z {
4392
+ border-top-width: 1px;
4393
+ }
4394
+
4123
4395
  .xamhcws {
4124
4396
  border-top-width: 2px;
4125
4397
  }
@@ -4132,10 +4404,6 @@
4132
4404
  bottom: 0;
4133
4405
  }
4134
4406
 
4135
- .x1at03k5 {
4136
- height: .95rem;
4137
- }
4138
-
4139
4407
  .xqtp20y {
4140
4408
  height: 0;
4141
4409
  }
@@ -4232,6 +4500,10 @@
4232
4500
  margin-bottom: var(--space-2);
4233
4501
  }
4234
4502
 
4503
+ .xj1urod {
4504
+ margin-top: 1rem;
4505
+ }
4506
+
4235
4507
  .xz6j1ir {
4236
4508
  max-height: 10rem;
4237
4509
  }
@@ -4244,6 +4516,10 @@
4244
4516
  max-width: 100%;
4245
4517
  }
4246
4518
 
4519
+ .x1dq269h {
4520
+ max-width: 42ch;
4521
+ }
4522
+
4247
4523
  .x19wm6jj {
4248
4524
  min-height: 2.25rem;
4249
4525
  }
@@ -4260,10 +4536,6 @@
4260
4536
  min-height: 250px;
4261
4537
  }
4262
4538
 
4263
- .x1in32aq {
4264
- min-height: 2rem;
4265
- }
4266
-
4267
4539
  .x13gjtz1 {
4268
4540
  min-height: 3.5rem;
4269
4541
  }
@@ -4324,6 +4596,10 @@
4324
4596
  right: auto;
4325
4597
  }
4326
4598
 
4599
+ .x1f21ie9 {
4600
+ scroll-margin-top: calc(var(--hraness-sticky-offset, 5rem) + 2rem);
4601
+ }
4602
+
4327
4603
  .x13vifvy {
4328
4604
  top: 0;
4329
4605
  }
@@ -4344,10 +4620,6 @@
4344
4620
  top: var(--hraness-design-procedural-ripple-y);
4345
4621
  }
4346
4622
 
4347
- .x2tfi8i {
4348
- width: .95rem;
4349
- }
4350
-
4351
4623
  .xnalus7 {
4352
4624
  width: 0;
4353
4625
  }
@@ -5265,6 +5537,10 @@
5265
5537
  --_hraness-foil-mark-display: none;
5266
5538
  }
5267
5539
 
5540
+ .x1275dpl {
5541
+ --_hraness-marketing-grid-track: max(16rem,calc((100% - (var(--hraness-marketing-grid-columns) - 1) * .5rem) / var(--hraness-marketing-grid-columns)));
5542
+ }
5543
+
5268
5544
  .x9wro72 {
5269
5545
  --_hraness-marketing-grid-track: max(16rem,calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)));
5270
5546
  }
@@ -5349,6 +5625,10 @@
5349
5625
  --hraness-foil-surface: var(--hraness-marketing-accent);
5350
5626
  }
5351
5627
 
5628
+ .x74bjxz {
5629
+ --hraness-foil-text-base: var(--hraness-marketing-related-tone, var(--hraness-marketing-ink));
5630
+ }
5631
+
5352
5632
  .x1fyigdq {
5353
5633
  --hraness-marketing-fact-columns: 1;
5354
5634
  }
@@ -5401,6 +5681,26 @@
5401
5681
  --hraness-marketing-pillar-columns: 4;
5402
5682
  }
5403
5683
 
5684
+ .x1fe84dw {
5685
+ --hraness-marketing-related-tone: var(--hraness-marketing-ink);
5686
+ }
5687
+
5688
+ .xk35eb0 {
5689
+ --hraness-marketing-related-tone: var(--hraness-studio-amber);
5690
+ }
5691
+
5692
+ .x1kw80uk {
5693
+ --hraness-marketing-related-tone: var(--hraness-studio-emerald);
5694
+ }
5695
+
5696
+ .xw4kusz {
5697
+ --hraness-marketing-related-tone: var(--hraness-studio-indigo);
5698
+ }
5699
+
5700
+ .xguwbwv {
5701
+ --hraness-marketing-related-tone: var(--hraness-studio-rose);
5702
+ }
5703
+
5404
5704
  .xq5rtlt {
5405
5705
  --hraness-platform-icon-size: 1.25rem;
5406
5706
  }
@@ -5525,6 +5825,12 @@
5525
5825
  }
5526
5826
  }
5527
5827
 
5828
+ @media (forced-colors: active) {
5829
+ .x3te53c.x3te53c {
5830
+ --hraness-marketing-related-tone: CanvasText;
5831
+ }
5832
+ }
5833
+
5528
5834
  @supports ((-webkit-mask-image: linear-gradient(black, black)) or (mask-image: linear-gradient(black, black))) {
5529
5835
  @media (forced-colors: active) {
5530
5836
  .x1hrs4vd.x1hrs4vd.x1hrs4vd {
@@ -5545,6 +5851,18 @@
5545
5851
  }
5546
5852
  }
5547
5853
 
5854
+ @container hraness-agent-setup (width >= 20rem) {
5855
+ .x6fuqh4.x6fuqh4 {
5856
+ --_hraness-agent-target-columns: 2;
5857
+ }
5858
+ }
5859
+
5860
+ @container hraness-agent-setup (width >= 34rem) {
5861
+ .x1ii36b5.x1ii36b5 {
5862
+ --_hraness-agent-target-wide-columns: 3;
5863
+ }
5864
+ }
5865
+
5548
5866
  @container hraness-platform-install (width <= 30rem) {
5549
5867
  .x1rp0mr4.x1rp0mr4 {
5550
5868
  --_hraness-platform-install-narrow-tab-font-size: .8125rem;