@cck-ui/core 0.20.3 → 0.22.0

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 (40) hide show
  1. package/cjs/components/typography/index.cjs +13 -0
  2. package/cjs/components/typography/index.cjs.map +1 -0
  3. package/cjs/components/typography/typography.cjs +381 -0
  4. package/cjs/components/typography/typography.cjs.map +1 -0
  5. package/cjs/components/typography/typography.module.cjs +7 -0
  6. package/cjs/components/typography/typography.module.cjs.map +1 -0
  7. package/cjs/components/visually-hidden/index.cjs +13 -0
  8. package/cjs/components/visually-hidden/index.cjs.map +1 -0
  9. package/cjs/components/visually-hidden/visually-hidden.cjs +385 -0
  10. package/cjs/components/visually-hidden/visually-hidden.cjs.map +1 -0
  11. package/cjs/components/visually-hidden/visually-hidden.module.cjs +7 -0
  12. package/cjs/components/visually-hidden/visually-hidden.module.cjs.map +1 -0
  13. package/cjs/index.cjs +6 -0
  14. package/cjs/index.cjs.map +1 -1
  15. package/esm/components/typography/index.mjs +10 -0
  16. package/esm/components/typography/index.mjs.map +1 -0
  17. package/esm/components/typography/typography.mjs +381 -0
  18. package/esm/components/typography/typography.mjs.map +1 -0
  19. package/esm/components/typography/typography.module.mjs +7 -0
  20. package/esm/components/typography/typography.module.mjs.map +1 -0
  21. package/esm/components/visually-hidden/index.mjs +10 -0
  22. package/esm/components/visually-hidden/index.mjs.map +1 -0
  23. package/esm/components/visually-hidden/visually-hidden.mjs +385 -0
  24. package/esm/components/visually-hidden/visually-hidden.mjs.map +1 -0
  25. package/esm/components/visually-hidden/visually-hidden.module.mjs +7 -0
  26. package/esm/components/visually-hidden/visually-hidden.module.mjs.map +1 -0
  27. package/esm/index.mjs +5 -1
  28. package/esm/index.mjs.map +1 -1
  29. package/lib/components/index.d.ts +2 -0
  30. package/lib/components/typography/index.d.ts +6 -0
  31. package/lib/components/typography/typography.types.d.ts +9 -0
  32. package/lib/components/visually-hidden/index.d.ts +6 -0
  33. package/lib/components/visually-hidden/visually-hidden.types.d.ts +9 -0
  34. package/package.json +1 -1
  35. package/styles/typography.css +208 -0
  36. package/styles/typography.layer.css +209 -0
  37. package/styles/visually-hidden.css +11 -0
  38. package/styles/visually-hidden.layer.css +12 -0
  39. package/styles.css +221 -0
  40. package/styles.layer.css +221 -0
@@ -0,0 +1,208 @@
1
+ .m_487612c0 :first-child {
2
+ margin-top: 0;
3
+ }
4
+ .m_487612c0 :last-child {
5
+ margin-bottom: 0;
6
+ }
7
+ .m_487612c0 :where(h1, h2, h3, h4, h5, h6) {
8
+ margin-bottom: var(--c-spacing-xs);
9
+ text-wrap: var(--c-heading-text-wrap);
10
+ font-family: var(--c-font-family-headings);
11
+ }
12
+ .m_487612c0 :where(h1) {
13
+ margin-top: calc(1.5 * var(--c-spacing-xl));
14
+ font-size: var(--c-h1-font-size);
15
+ line-height: var(--c-h1-line-height);
16
+ font-weight: var(--c-h1-font-weight);
17
+ }
18
+ .m_487612c0 :where(h2) {
19
+ margin-top: calc(--c-spacing-xl);
20
+ font-size: var(--c-h2-font-size);
21
+ line-height: var(--c-h2-line-height);
22
+ font-weight: var(--c-h2-font-weight);
23
+ }
24
+ .m_487612c0 :where(h3) {
25
+ margin-top: calc(0.8 * var(--c-spacing-xl));
26
+ font-size: var(--c-h3-font-size);
27
+ line-height: var(--c-h3-line-height);
28
+ font-weight: var(--c-h3-font-weight);
29
+ }
30
+ .m_487612c0 :where(h4) {
31
+ margin-top: calc(0.8 * var(--c-spacing-xl));
32
+ font-size: var(--c-h4-font-size);
33
+ line-height: var(--c-h4-line-height);
34
+ font-weight: var(--c-h4-font-weight);
35
+ }
36
+ .m_487612c0 :where(h5) {
37
+ margin-top: calc(0.5 * var(--c-spacing-xl));
38
+ font-size: var(--c-h5-font-size);
39
+ line-height: var(--c-h5-line-height);
40
+ font-weight: var(--c-h5-font-weight);
41
+ }
42
+ .m_487612c0 :where(h6) {
43
+ margin-top: calc(0.5 * var(--c-spacing-xl));
44
+ font-size: var(--c-h6-font-size);
45
+ line-height: var(--c-h6-line-height);
46
+ font-weight: var(--c-h6-font-weight);
47
+ }
48
+ .m_487612c0 :where(img) {
49
+ max-width: 100%;
50
+ margin-bottom: var(--c-spacing-xs);
51
+ }
52
+ .m_487612c0 :where(p) {
53
+ margin-top: 0;
54
+ margin-bottom: var(--c-spacing-lg);
55
+ }
56
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(mark) {
57
+ background-color: var(--c-color-yellow-2);
58
+ color: inherit;
59
+ }
60
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(mark) {
61
+ background-color: var(--c-color-yellow-5);
62
+ color: var(--c-color-black);
63
+ }
64
+ .m_487612c0 :where(a) {
65
+ color: var(--c-color-anchor);
66
+ text-decoration: none;
67
+ }
68
+ @media (hover: hover) {
69
+ .m_487612c0 :where(a):hover {
70
+ text-decoration: underline;
71
+ }
72
+ }
73
+ @media (hover: none) {
74
+ .m_487612c0 :where(a):active {
75
+ text-decoration: underline;
76
+ }
77
+ }
78
+ .m_487612c0 :where(hr) {
79
+ margin-top: var(--c-spacing-md);
80
+ margin-bottom: var(--c-spacing-md);
81
+ border: 0;
82
+ border-top: calc(0.0625rem * var(--c-scale)) solid;
83
+ }
84
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(hr) {
85
+ border-color: var(--c-color-gray-3);
86
+ }
87
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(hr) {
88
+ border-color: var(--c-color-dark-3);
89
+ }
90
+ .m_487612c0 :where(pre) {
91
+ padding: var(--c-spacing-xs);
92
+ line-height: var(--c-line-height);
93
+ margin: 0;
94
+ margin-top: var(--c-spacing-md);
95
+ margin-bottom: var(--c-spacing-md);
96
+ overflow-x: auto;
97
+ font-family: var(--c-font-family-monospace);
98
+ font-size: var(--c-font-size-xs);
99
+ border-radius: var(--c-radius-sm);
100
+ }
101
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(pre) {
102
+ background-color: var(--c-color-gray-0);
103
+ }
104
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(pre) {
105
+ background-color: var(--c-color-dark-8);
106
+ }
107
+ .m_487612c0 :where(pre) :where(code) {
108
+ background-color: transparent;
109
+ padding: 0;
110
+ border-radius: 0;
111
+ color: inherit;
112
+ border: 0;
113
+ }
114
+ .m_487612c0 :where(kbd) {
115
+ --kbd-fz: calc(0.75rem * var(--c-scale));
116
+ --kbd-padding: calc(0.1875rem * var(--c-scale)) calc(0.3125rem * var(--c-scale));
117
+
118
+ font-family: var(--c-font-family-monospace);
119
+ line-height: var(--c-line-height);
120
+ padding: var(--kbd-padding);
121
+ font-size: var(--kbd-fz);
122
+ border-radius: var(--c-radius-sm);
123
+ border: calc(0.0625rem * var(--c-scale)) solid;
124
+ border-bottom-width: calc(0.1875rem * var(--c-scale));
125
+ }
126
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(kbd) {
127
+ border-color: var(--c-color-gray-3);
128
+ color: var(--c-color-gray-7);
129
+ background-color: var(--c-color-gray-0);
130
+ }
131
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(kbd) {
132
+ border-color: var(--c-color-dark-3);
133
+ color: var(--c-color-dark-0);
134
+ background-color: var(--c-color-dark-5);
135
+ }
136
+ .m_487612c0 :where(code) {
137
+ line-height: var(--c-line-height);
138
+ padding: calc(0.0625rem * var(--c-scale)) calc(0.3125rem * var(--c-scale));
139
+ border-radius: var(--c-radius-sm);
140
+ font-family: var(--c-font-family-monospace);
141
+ font-size: var(--c-font-size-xs);
142
+ }
143
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(code) {
144
+ background-color: var(--c-color-gray-0);
145
+ color: var(--c-color-black);
146
+ }
147
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(code) {
148
+ background-color: var(--c-color-dark-5);
149
+ color: var(--c-color-white);
150
+ }
151
+ .m_487612c0 :where(ul, ol):not([data-type='taskList']) {
152
+ margin-bottom: var(--c-spacing-md);
153
+ padding-inline-start: var(--c-spacing-xl);
154
+ list-style-position: outside;
155
+ }
156
+ .m_487612c0 :where(table) {
157
+ width: 100%;
158
+ border-collapse: collapse;
159
+ caption-side: bottom;
160
+ margin-bottom: var(--c-spacing-md);
161
+ }
162
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(table) {
163
+ --table-border-color: var(--c-color-gray-3);
164
+ }
165
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(table) {
166
+ --table-border-color: var(--c-color-dark-4);
167
+ }
168
+ .m_487612c0 :where(table) :where(caption) {
169
+ margin-top: var(--c-spacing-xs);
170
+ font-size: var(--c-font-size-sm);
171
+ color: var(--c-color-dimmed);
172
+ }
173
+ .m_487612c0 :where(table) :where(th) {
174
+ text-align: start;
175
+ font-weight: bold;
176
+ font-size: var(--c-font-size-sm);
177
+ padding: var(--c-spacing-xs) var(--c-spacing-sm);
178
+ }
179
+ .m_487612c0 :where(table) :where(thead th) {
180
+ border-bottom: calc(0.0625rem * var(--c-scale)) solid;
181
+ border-color: var(--table-border-color);
182
+ }
183
+ .m_487612c0 :where(table) :where(tfoot th) {
184
+ border-top: calc(0.0625rem * var(--c-scale)) solid;
185
+ border-color: var(--table-border-color);
186
+ }
187
+ .m_487612c0 :where(table) :where(td) {
188
+ padding: var(--c-spacing-xs) var(--c-spacing-sm);
189
+ border-bottom: calc(0.0625rem * var(--c-scale)) solid;
190
+ border-color: var(--table-border-color);
191
+ font-size: var(--c-font-size-sm);
192
+ }
193
+ .m_487612c0 :where(table) :where(tr:last-of-type td) {
194
+ border-bottom: 0;
195
+ }
196
+ .m_487612c0 :where(blockquote) {
197
+ font-size: var(--c-font-size-lg);
198
+ line-height: var(--c-line-height);
199
+ margin: var(--c-spacing-md) 0;
200
+ border-radius: var(--c-radius-sm);
201
+ padding: var(--c-spacing-md) var(--c-spacing-lg);
202
+ }
203
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(blockquote) {
204
+ background-color: var(--c-color-gray-0);
205
+ }
206
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(blockquote) {
207
+ background-color: var(--c-color-dark-8);
208
+ }
@@ -0,0 +1,209 @@
1
+ @layer cck {.m_487612c0 :first-child {
2
+ margin-top: 0;
3
+ }
4
+ .m_487612c0 :last-child {
5
+ margin-bottom: 0;
6
+ }
7
+ .m_487612c0 :where(h1, h2, h3, h4, h5, h6) {
8
+ margin-bottom: var(--c-spacing-xs);
9
+ text-wrap: var(--c-heading-text-wrap);
10
+ font-family: var(--c-font-family-headings);
11
+ }
12
+ .m_487612c0 :where(h1) {
13
+ margin-top: calc(1.5 * var(--c-spacing-xl));
14
+ font-size: var(--c-h1-font-size);
15
+ line-height: var(--c-h1-line-height);
16
+ font-weight: var(--c-h1-font-weight);
17
+ }
18
+ .m_487612c0 :where(h2) {
19
+ margin-top: calc(--c-spacing-xl);
20
+ font-size: var(--c-h2-font-size);
21
+ line-height: var(--c-h2-line-height);
22
+ font-weight: var(--c-h2-font-weight);
23
+ }
24
+ .m_487612c0 :where(h3) {
25
+ margin-top: calc(0.8 * var(--c-spacing-xl));
26
+ font-size: var(--c-h3-font-size);
27
+ line-height: var(--c-h3-line-height);
28
+ font-weight: var(--c-h3-font-weight);
29
+ }
30
+ .m_487612c0 :where(h4) {
31
+ margin-top: calc(0.8 * var(--c-spacing-xl));
32
+ font-size: var(--c-h4-font-size);
33
+ line-height: var(--c-h4-line-height);
34
+ font-weight: var(--c-h4-font-weight);
35
+ }
36
+ .m_487612c0 :where(h5) {
37
+ margin-top: calc(0.5 * var(--c-spacing-xl));
38
+ font-size: var(--c-h5-font-size);
39
+ line-height: var(--c-h5-line-height);
40
+ font-weight: var(--c-h5-font-weight);
41
+ }
42
+ .m_487612c0 :where(h6) {
43
+ margin-top: calc(0.5 * var(--c-spacing-xl));
44
+ font-size: var(--c-h6-font-size);
45
+ line-height: var(--c-h6-line-height);
46
+ font-weight: var(--c-h6-font-weight);
47
+ }
48
+ .m_487612c0 :where(img) {
49
+ max-width: 100%;
50
+ margin-bottom: var(--c-spacing-xs);
51
+ }
52
+ .m_487612c0 :where(p) {
53
+ margin-top: 0;
54
+ margin-bottom: var(--c-spacing-lg);
55
+ }
56
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(mark) {
57
+ background-color: var(--c-color-yellow-2);
58
+ color: inherit;
59
+ }
60
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(mark) {
61
+ background-color: var(--c-color-yellow-5);
62
+ color: var(--c-color-black);
63
+ }
64
+ .m_487612c0 :where(a) {
65
+ color: var(--c-color-anchor);
66
+ text-decoration: none;
67
+ }
68
+ @media (hover: hover) {
69
+ .m_487612c0 :where(a):hover {
70
+ text-decoration: underline;
71
+ }
72
+ }
73
+ @media (hover: none) {
74
+ .m_487612c0 :where(a):active {
75
+ text-decoration: underline;
76
+ }
77
+ }
78
+ .m_487612c0 :where(hr) {
79
+ margin-top: var(--c-spacing-md);
80
+ margin-bottom: var(--c-spacing-md);
81
+ border: 0;
82
+ border-top: calc(0.0625rem * var(--c-scale)) solid;
83
+ }
84
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(hr) {
85
+ border-color: var(--c-color-gray-3);
86
+ }
87
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(hr) {
88
+ border-color: var(--c-color-dark-3);
89
+ }
90
+ .m_487612c0 :where(pre) {
91
+ padding: var(--c-spacing-xs);
92
+ line-height: var(--c-line-height);
93
+ margin: 0;
94
+ margin-top: var(--c-spacing-md);
95
+ margin-bottom: var(--c-spacing-md);
96
+ overflow-x: auto;
97
+ font-family: var(--c-font-family-monospace);
98
+ font-size: var(--c-font-size-xs);
99
+ border-radius: var(--c-radius-sm);
100
+ }
101
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(pre) {
102
+ background-color: var(--c-color-gray-0);
103
+ }
104
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(pre) {
105
+ background-color: var(--c-color-dark-8);
106
+ }
107
+ .m_487612c0 :where(pre) :where(code) {
108
+ background-color: transparent;
109
+ padding: 0;
110
+ border-radius: 0;
111
+ color: inherit;
112
+ border: 0;
113
+ }
114
+ .m_487612c0 :where(kbd) {
115
+ --kbd-fz: calc(0.75rem * var(--c-scale));
116
+ --kbd-padding: calc(0.1875rem * var(--c-scale)) calc(0.3125rem * var(--c-scale));
117
+
118
+ font-family: var(--c-font-family-monospace);
119
+ line-height: var(--c-line-height);
120
+ padding: var(--kbd-padding);
121
+ font-size: var(--kbd-fz);
122
+ border-radius: var(--c-radius-sm);
123
+ border: calc(0.0625rem * var(--c-scale)) solid;
124
+ border-bottom-width: calc(0.1875rem * var(--c-scale));
125
+ }
126
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(kbd) {
127
+ border-color: var(--c-color-gray-3);
128
+ color: var(--c-color-gray-7);
129
+ background-color: var(--c-color-gray-0);
130
+ }
131
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(kbd) {
132
+ border-color: var(--c-color-dark-3);
133
+ color: var(--c-color-dark-0);
134
+ background-color: var(--c-color-dark-5);
135
+ }
136
+ .m_487612c0 :where(code) {
137
+ line-height: var(--c-line-height);
138
+ padding: calc(0.0625rem * var(--c-scale)) calc(0.3125rem * var(--c-scale));
139
+ border-radius: var(--c-radius-sm);
140
+ font-family: var(--c-font-family-monospace);
141
+ font-size: var(--c-font-size-xs);
142
+ }
143
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(code) {
144
+ background-color: var(--c-color-gray-0);
145
+ color: var(--c-color-black);
146
+ }
147
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(code) {
148
+ background-color: var(--c-color-dark-5);
149
+ color: var(--c-color-white);
150
+ }
151
+ .m_487612c0 :where(ul, ol):not([data-type='taskList']) {
152
+ margin-bottom: var(--c-spacing-md);
153
+ padding-inline-start: var(--c-spacing-xl);
154
+ list-style-position: outside;
155
+ }
156
+ .m_487612c0 :where(table) {
157
+ width: 100%;
158
+ border-collapse: collapse;
159
+ caption-side: bottom;
160
+ margin-bottom: var(--c-spacing-md);
161
+ }
162
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(table) {
163
+ --table-border-color: var(--c-color-gray-3);
164
+ }
165
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(table) {
166
+ --table-border-color: var(--c-color-dark-4);
167
+ }
168
+ .m_487612c0 :where(table) :where(caption) {
169
+ margin-top: var(--c-spacing-xs);
170
+ font-size: var(--c-font-size-sm);
171
+ color: var(--c-color-dimmed);
172
+ }
173
+ .m_487612c0 :where(table) :where(th) {
174
+ text-align: start;
175
+ font-weight: bold;
176
+ font-size: var(--c-font-size-sm);
177
+ padding: var(--c-spacing-xs) var(--c-spacing-sm);
178
+ }
179
+ .m_487612c0 :where(table) :where(thead th) {
180
+ border-bottom: calc(0.0625rem * var(--c-scale)) solid;
181
+ border-color: var(--table-border-color);
182
+ }
183
+ .m_487612c0 :where(table) :where(tfoot th) {
184
+ border-top: calc(0.0625rem * var(--c-scale)) solid;
185
+ border-color: var(--table-border-color);
186
+ }
187
+ .m_487612c0 :where(table) :where(td) {
188
+ padding: var(--c-spacing-xs) var(--c-spacing-sm);
189
+ border-bottom: calc(0.0625rem * var(--c-scale)) solid;
190
+ border-color: var(--table-border-color);
191
+ font-size: var(--c-font-size-sm);
192
+ }
193
+ .m_487612c0 :where(table) :where(tr:last-of-type td) {
194
+ border-bottom: 0;
195
+ }
196
+ .m_487612c0 :where(blockquote) {
197
+ font-size: var(--c-font-size-lg);
198
+ line-height: var(--c-line-height);
199
+ margin: var(--c-spacing-md) 0;
200
+ border-radius: var(--c-radius-sm);
201
+ padding: var(--c-spacing-md) var(--c-spacing-lg);
202
+ }
203
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(blockquote) {
204
+ background-color: var(--c-color-gray-0);
205
+ }
206
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(blockquote) {
207
+ background-color: var(--c-color-dark-8);
208
+ }
209
+ }
@@ -0,0 +1,11 @@
1
+ .m_56280a25 {
2
+ border: 0;
3
+ clip: rect(0 0 0 0);
4
+ height: calc(0.0625rem * var(--c-scale));
5
+ width: calc(0.0625rem * var(--c-scale));
6
+ margin: calc(-0.0625rem * var(--c-scale));
7
+ overflow: hidden;
8
+ padding: 0;
9
+ position: absolute;
10
+ white-space: nowrap;
11
+ }
@@ -0,0 +1,12 @@
1
+ @layer cck {.m_56280a25 {
2
+ border: 0;
3
+ clip: rect(0 0 0 0);
4
+ height: calc(0.0625rem * var(--c-scale));
5
+ width: calc(0.0625rem * var(--c-scale));
6
+ margin: calc(-0.0625rem * var(--c-scale));
7
+ overflow: hidden;
8
+ padding: 0;
9
+ position: absolute;
10
+ white-space: nowrap;
11
+ }
12
+ }
package/styles.css CHANGED
@@ -1869,3 +1869,224 @@ fieldset:disabled .c-active:active {
1869
1869
  .m_3f669182:where([data-inline]) {
1870
1870
  line-height: 1;
1871
1871
  }
1872
+
1873
+ .m_487612c0 :first-child {
1874
+ margin-top: 0;
1875
+ }
1876
+ .m_487612c0 :last-child {
1877
+ margin-bottom: 0;
1878
+ }
1879
+ .m_487612c0 :where(h1, h2, h3, h4, h5, h6) {
1880
+ margin-bottom: var(--c-spacing-xs);
1881
+ text-wrap: var(--c-heading-text-wrap);
1882
+ font-family: var(--c-font-family-headings);
1883
+ }
1884
+ .m_487612c0 :where(h1) {
1885
+ margin-top: calc(1.5 * var(--c-spacing-xl));
1886
+ font-size: var(--c-h1-font-size);
1887
+ line-height: var(--c-h1-line-height);
1888
+ font-weight: var(--c-h1-font-weight);
1889
+ }
1890
+ .m_487612c0 :where(h2) {
1891
+ margin-top: calc(--c-spacing-xl);
1892
+ font-size: var(--c-h2-font-size);
1893
+ line-height: var(--c-h2-line-height);
1894
+ font-weight: var(--c-h2-font-weight);
1895
+ }
1896
+ .m_487612c0 :where(h3) {
1897
+ margin-top: calc(0.8 * var(--c-spacing-xl));
1898
+ font-size: var(--c-h3-font-size);
1899
+ line-height: var(--c-h3-line-height);
1900
+ font-weight: var(--c-h3-font-weight);
1901
+ }
1902
+ .m_487612c0 :where(h4) {
1903
+ margin-top: calc(0.8 * var(--c-spacing-xl));
1904
+ font-size: var(--c-h4-font-size);
1905
+ line-height: var(--c-h4-line-height);
1906
+ font-weight: var(--c-h4-font-weight);
1907
+ }
1908
+ .m_487612c0 :where(h5) {
1909
+ margin-top: calc(0.5 * var(--c-spacing-xl));
1910
+ font-size: var(--c-h5-font-size);
1911
+ line-height: var(--c-h5-line-height);
1912
+ font-weight: var(--c-h5-font-weight);
1913
+ }
1914
+ .m_487612c0 :where(h6) {
1915
+ margin-top: calc(0.5 * var(--c-spacing-xl));
1916
+ font-size: var(--c-h6-font-size);
1917
+ line-height: var(--c-h6-line-height);
1918
+ font-weight: var(--c-h6-font-weight);
1919
+ }
1920
+ .m_487612c0 :where(img) {
1921
+ max-width: 100%;
1922
+ margin-bottom: var(--c-spacing-xs);
1923
+ }
1924
+ .m_487612c0 :where(p) {
1925
+ margin-top: 0;
1926
+ margin-bottom: var(--c-spacing-lg);
1927
+ }
1928
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(mark) {
1929
+ background-color: var(--c-color-yellow-2);
1930
+ color: inherit;
1931
+ }
1932
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(mark) {
1933
+ background-color: var(--c-color-yellow-5);
1934
+ color: var(--c-color-black);
1935
+ }
1936
+ .m_487612c0 :where(a) {
1937
+ color: var(--c-color-anchor);
1938
+ text-decoration: none;
1939
+ }
1940
+ @media (hover: hover) {
1941
+ .m_487612c0 :where(a):hover {
1942
+ text-decoration: underline;
1943
+ }
1944
+ }
1945
+ @media (hover: none) {
1946
+ .m_487612c0 :where(a):active {
1947
+ text-decoration: underline;
1948
+ }
1949
+ }
1950
+ .m_487612c0 :where(hr) {
1951
+ margin-top: var(--c-spacing-md);
1952
+ margin-bottom: var(--c-spacing-md);
1953
+ border: 0;
1954
+ border-top: calc(0.0625rem * var(--c-scale)) solid;
1955
+ }
1956
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(hr) {
1957
+ border-color: var(--c-color-gray-3);
1958
+ }
1959
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(hr) {
1960
+ border-color: var(--c-color-dark-3);
1961
+ }
1962
+ .m_487612c0 :where(pre) {
1963
+ padding: var(--c-spacing-xs);
1964
+ line-height: var(--c-line-height);
1965
+ margin: 0;
1966
+ margin-top: var(--c-spacing-md);
1967
+ margin-bottom: var(--c-spacing-md);
1968
+ overflow-x: auto;
1969
+ font-family: var(--c-font-family-monospace);
1970
+ font-size: var(--c-font-size-xs);
1971
+ border-radius: var(--c-radius-sm);
1972
+ }
1973
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(pre) {
1974
+ background-color: var(--c-color-gray-0);
1975
+ }
1976
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(pre) {
1977
+ background-color: var(--c-color-dark-8);
1978
+ }
1979
+ .m_487612c0 :where(pre) :where(code) {
1980
+ background-color: transparent;
1981
+ padding: 0;
1982
+ border-radius: 0;
1983
+ color: inherit;
1984
+ border: 0;
1985
+ }
1986
+ .m_487612c0 :where(kbd) {
1987
+ --kbd-fz: calc(0.75rem * var(--c-scale));
1988
+ --kbd-padding: calc(0.1875rem * var(--c-scale)) calc(0.3125rem * var(--c-scale));
1989
+
1990
+ font-family: var(--c-font-family-monospace);
1991
+ line-height: var(--c-line-height);
1992
+ padding: var(--kbd-padding);
1993
+ font-size: var(--kbd-fz);
1994
+ border-radius: var(--c-radius-sm);
1995
+ border: calc(0.0625rem * var(--c-scale)) solid;
1996
+ border-bottom-width: calc(0.1875rem * var(--c-scale));
1997
+ }
1998
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(kbd) {
1999
+ border-color: var(--c-color-gray-3);
2000
+ color: var(--c-color-gray-7);
2001
+ background-color: var(--c-color-gray-0);
2002
+ }
2003
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(kbd) {
2004
+ border-color: var(--c-color-dark-3);
2005
+ color: var(--c-color-dark-0);
2006
+ background-color: var(--c-color-dark-5);
2007
+ }
2008
+ .m_487612c0 :where(code) {
2009
+ line-height: var(--c-line-height);
2010
+ padding: calc(0.0625rem * var(--c-scale)) calc(0.3125rem * var(--c-scale));
2011
+ border-radius: var(--c-radius-sm);
2012
+ font-family: var(--c-font-family-monospace);
2013
+ font-size: var(--c-font-size-xs);
2014
+ }
2015
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(code) {
2016
+ background-color: var(--c-color-gray-0);
2017
+ color: var(--c-color-black);
2018
+ }
2019
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(code) {
2020
+ background-color: var(--c-color-dark-5);
2021
+ color: var(--c-color-white);
2022
+ }
2023
+ .m_487612c0 :where(ul, ol):not([data-type='taskList']) {
2024
+ margin-bottom: var(--c-spacing-md);
2025
+ padding-inline-start: var(--c-spacing-xl);
2026
+ list-style-position: outside;
2027
+ }
2028
+ .m_487612c0 :where(table) {
2029
+ width: 100%;
2030
+ border-collapse: collapse;
2031
+ caption-side: bottom;
2032
+ margin-bottom: var(--c-spacing-md);
2033
+ }
2034
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(table) {
2035
+ --table-border-color: var(--c-color-gray-3);
2036
+ }
2037
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(table) {
2038
+ --table-border-color: var(--c-color-dark-4);
2039
+ }
2040
+ .m_487612c0 :where(table) :where(caption) {
2041
+ margin-top: var(--c-spacing-xs);
2042
+ font-size: var(--c-font-size-sm);
2043
+ color: var(--c-color-dimmed);
2044
+ }
2045
+ .m_487612c0 :where(table) :where(th) {
2046
+ text-align: start;
2047
+ font-weight: bold;
2048
+ font-size: var(--c-font-size-sm);
2049
+ padding: var(--c-spacing-xs) var(--c-spacing-sm);
2050
+ }
2051
+ .m_487612c0 :where(table) :where(thead th) {
2052
+ border-bottom: calc(0.0625rem * var(--c-scale)) solid;
2053
+ border-color: var(--table-border-color);
2054
+ }
2055
+ .m_487612c0 :where(table) :where(tfoot th) {
2056
+ border-top: calc(0.0625rem * var(--c-scale)) solid;
2057
+ border-color: var(--table-border-color);
2058
+ }
2059
+ .m_487612c0 :where(table) :where(td) {
2060
+ padding: var(--c-spacing-xs) var(--c-spacing-sm);
2061
+ border-bottom: calc(0.0625rem * var(--c-scale)) solid;
2062
+ border-color: var(--table-border-color);
2063
+ font-size: var(--c-font-size-sm);
2064
+ }
2065
+ .m_487612c0 :where(table) :where(tr:last-of-type td) {
2066
+ border-bottom: 0;
2067
+ }
2068
+ .m_487612c0 :where(blockquote) {
2069
+ font-size: var(--c-font-size-lg);
2070
+ line-height: var(--c-line-height);
2071
+ margin: var(--c-spacing-md) 0;
2072
+ border-radius: var(--c-radius-sm);
2073
+ padding: var(--c-spacing-md) var(--c-spacing-lg);
2074
+ }
2075
+ :where([data-c-color-scheme='light']) .m_487612c0 :where(blockquote) {
2076
+ background-color: var(--c-color-gray-0);
2077
+ }
2078
+ :where([data-c-color-scheme='dark']) .m_487612c0 :where(blockquote) {
2079
+ background-color: var(--c-color-dark-8);
2080
+ }
2081
+
2082
+ .m_56280a25 {
2083
+ border: 0;
2084
+ clip: rect(0 0 0 0);
2085
+ height: calc(0.0625rem * var(--c-scale));
2086
+ width: calc(0.0625rem * var(--c-scale));
2087
+ margin: calc(-0.0625rem * var(--c-scale));
2088
+ overflow: hidden;
2089
+ padding: 0;
2090
+ position: absolute;
2091
+ white-space: nowrap;
2092
+ }