@xaroth.nl/design 0.1.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 (193) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +62 -0
  3. package/dist/all.css +2536 -0
  4. package/dist/astro.d.ts +41 -0
  5. package/dist/astro.js +41 -0
  6. package/dist/bem.d.ts +12 -0
  7. package/dist/bem.js +19 -0
  8. package/dist/components/alert/alert.astro +46 -0
  9. package/dist/components/alert/alert.css +68 -0
  10. package/dist/components/alert/alert.d.ts +11 -0
  11. package/dist/components/alert/alert.js +6 -0
  12. package/dist/components/alert/index.d.ts +14 -0
  13. package/dist/components/alert/index.js +27 -0
  14. package/dist/components/avatar/avatar.astro +23 -0
  15. package/dist/components/avatar/avatar.css +35 -0
  16. package/dist/components/avatar/avatar.d.ts +5 -0
  17. package/dist/components/avatar/avatar.js +7 -0
  18. package/dist/components/avatar/index.d.ts +32 -0
  19. package/dist/components/avatar/index.js +24 -0
  20. package/dist/components/badge/badge.astro +11 -0
  21. package/dist/components/badge/badge.css +46 -0
  22. package/dist/components/badge/badge.d.ts +5 -0
  23. package/dist/components/badge/badge.js +6 -0
  24. package/dist/components/badge/index.d.ts +6 -0
  25. package/dist/components/badge/index.js +3 -0
  26. package/dist/components/breadcrumbs/breadcrumbs.astro +27 -0
  27. package/dist/components/breadcrumbs/breadcrumbs.css +33 -0
  28. package/dist/components/breadcrumbs/breadcrumbs.d.ts +9 -0
  29. package/dist/components/breadcrumbs/breadcrumbs.js +11 -0
  30. package/dist/components/breadcrumbs/index.d.ts +37 -0
  31. package/dist/components/breadcrumbs/index.js +16 -0
  32. package/dist/components/button/button.astro +36 -0
  33. package/dist/components/button/button.css +117 -0
  34. package/dist/components/button/button.d.ts +18 -0
  35. package/dist/components/button/button.js +23 -0
  36. package/dist/components/button/index.d.ts +59 -0
  37. package/dist/components/button/index.js +26 -0
  38. package/dist/components/card/card.astro +98 -0
  39. package/dist/components/card/card.css +91 -0
  40. package/dist/components/card/card.d.ts +19 -0
  41. package/dist/components/card/card.js +7 -0
  42. package/dist/components/card/index.d.ts +11 -0
  43. package/dist/components/card/index.js +7 -0
  44. package/dist/components/description-list/description-list.astro +39 -0
  45. package/dist/components/description-list/description-list.css +72 -0
  46. package/dist/components/description-list/description-list.d.ts +7 -0
  47. package/dist/components/description-list/description-list.js +6 -0
  48. package/dist/components/description-list/index.d.ts +12 -0
  49. package/dist/components/description-list/index.js +5 -0
  50. package/dist/components/divider/divider.astro +27 -0
  51. package/dist/components/divider/divider.css +40 -0
  52. package/dist/components/divider/divider.d.ts +5 -0
  53. package/dist/components/divider/divider.js +11 -0
  54. package/dist/components/divider/index.d.ts +22 -0
  55. package/dist/components/divider/index.js +11 -0
  56. package/dist/components/empty-state/empty-state.astro +47 -0
  57. package/dist/components/empty-state/empty-state.css +38 -0
  58. package/dist/components/empty-state/empty-state.d.ts +12 -0
  59. package/dist/components/empty-state/empty-state.js +7 -0
  60. package/dist/components/empty-state/index.d.ts +5 -0
  61. package/dist/components/empty-state/index.js +3 -0
  62. package/dist/components/field/checkbox-group.astro +58 -0
  63. package/dist/components/field/checkbox.astro +17 -0
  64. package/dist/components/field/field.astro +51 -0
  65. package/dist/components/field/field.css +336 -0
  66. package/dist/components/field/field.d.ts +47 -0
  67. package/dist/components/field/field.js +51 -0
  68. package/dist/components/field/index.d.ts +53 -0
  69. package/dist/components/field/index.js +54 -0
  70. package/dist/components/field/input.astro +27 -0
  71. package/dist/components/field/radio-group.astro +58 -0
  72. package/dist/components/field/radio.astro +17 -0
  73. package/dist/components/field/select.astro +13 -0
  74. package/dist/components/field/switch.astro +17 -0
  75. package/dist/components/field/textarea.astro +24 -0
  76. package/dist/components/filters/filter-layout.astro +72 -0
  77. package/dist/components/filters/filter-panel.astro +13 -0
  78. package/dist/components/filters/filters.css +230 -0
  79. package/dist/components/filters/filters.d.ts +20 -0
  80. package/dist/components/filters/filters.js +24 -0
  81. package/dist/components/filters/index.d.ts +27 -0
  82. package/dist/components/filters/index.js +25 -0
  83. package/dist/components/footer/footer.astro +70 -0
  84. package/dist/components/footer/footer.css +128 -0
  85. package/dist/components/footer/footer.d.ts +16 -0
  86. package/dist/components/footer/footer.js +7 -0
  87. package/dist/components/footer/index.d.ts +35 -0
  88. package/dist/components/footer/index.js +18 -0
  89. package/dist/components/header/header.astro +89 -0
  90. package/dist/components/header/header.css +163 -0
  91. package/dist/components/header/header.d.ts +18 -0
  92. package/dist/components/header/header.js +9 -0
  93. package/dist/components/header/index.d.ts +39 -0
  94. package/dist/components/header/index.js +25 -0
  95. package/dist/components/icon/icon.astro +21 -0
  96. package/dist/components/icon/icon.css +15 -0
  97. package/dist/components/icon/icon.d.ts +5 -0
  98. package/dist/components/icon/icon.js +6 -0
  99. package/dist/components/icon/index.d.ts +57 -0
  100. package/dist/components/icon/index.js +72 -0
  101. package/dist/components/layout/container.astro +15 -0
  102. package/dist/components/layout/grid.astro +14 -0
  103. package/dist/components/layout/index.d.ts +33 -0
  104. package/dist/components/layout/index.js +13 -0
  105. package/dist/components/layout/layout.css +262 -0
  106. package/dist/components/layout/layout.d.ts +24 -0
  107. package/dist/components/layout/layout.js +17 -0
  108. package/dist/components/layout/section-head.astro +42 -0
  109. package/dist/components/layout/section.astro +15 -0
  110. package/dist/components/page-head/index.d.ts +18 -0
  111. package/dist/components/page-head/index.js +14 -0
  112. package/dist/components/page-head/page-head.astro +60 -0
  113. package/dist/components/page-head/page-head.css +79 -0
  114. package/dist/components/page-head/page-head.d.ts +18 -0
  115. package/dist/components/page-head/page-head.js +8 -0
  116. package/dist/components/pagination/index.d.ts +73 -0
  117. package/dist/components/pagination/index.js +87 -0
  118. package/dist/components/pagination/pagination.astro +81 -0
  119. package/dist/components/pagination/pagination.css +70 -0
  120. package/dist/components/pagination/pagination.d.ts +8 -0
  121. package/dist/components/pagination/pagination.js +19 -0
  122. package/dist/components/panel/index.d.ts +11 -0
  123. package/dist/components/panel/index.js +3 -0
  124. package/dist/components/panel/panel.astro +15 -0
  125. package/dist/components/panel/panel.css +48 -0
  126. package/dist/components/panel/panel.d.ts +7 -0
  127. package/dist/components/panel/panel.js +6 -0
  128. package/dist/components/progress/index.d.ts +37 -0
  129. package/dist/components/progress/index.js +44 -0
  130. package/dist/components/progress/progress.astro +18 -0
  131. package/dist/components/progress/progress.css +115 -0
  132. package/dist/components/progress/progress.d.ts +5 -0
  133. package/dist/components/progress/progress.js +7 -0
  134. package/dist/components/prose/code-block.astro +26 -0
  135. package/dist/components/prose/index.d.ts +14 -0
  136. package/dist/components/prose/index.js +67 -0
  137. package/dist/components/prose/prose.astro +14 -0
  138. package/dist/components/prose/prose.css +156 -0
  139. package/dist/components/prose/prose.d.ts +12 -0
  140. package/dist/components/prose/prose.js +11 -0
  141. package/dist/components/stat/index.d.ts +15 -0
  142. package/dist/components/stat/index.js +5 -0
  143. package/dist/components/stat/stat-group.astro +11 -0
  144. package/dist/components/stat/stat.astro +43 -0
  145. package/dist/components/stat/stat.css +51 -0
  146. package/dist/components/stat/stat.d.ts +15 -0
  147. package/dist/components/stat/stat.js +10 -0
  148. package/dist/components/table/index.d.ts +38 -0
  149. package/dist/components/table/index.js +18 -0
  150. package/dist/components/table/table.astro +111 -0
  151. package/dist/components/table/table.css +78 -0
  152. package/dist/components/table/table.d.ts +11 -0
  153. package/dist/components/table/table.js +10 -0
  154. package/dist/components/tabs/index.d.ts +21 -0
  155. package/dist/components/tabs/index.js +13 -0
  156. package/dist/components/tabs/tabs.astro +30 -0
  157. package/dist/components/tabs/tabs.css +59 -0
  158. package/dist/components/tabs/tabs.d.ts +9 -0
  159. package/dist/components/tabs/tabs.js +6 -0
  160. package/dist/components/tag/index.d.ts +19 -0
  161. package/dist/components/tag/index.js +7 -0
  162. package/dist/components/tag/tag.astro +17 -0
  163. package/dist/components/tag/tag.css +30 -0
  164. package/dist/components/tag/tag.d.ts +9 -0
  165. package/dist/components/tag/tag.js +12 -0
  166. package/dist/components/timeline/index.d.ts +22 -0
  167. package/dist/components/timeline/index.js +5 -0
  168. package/dist/components/timeline/timeline.astro +40 -0
  169. package/dist/components/timeline/timeline.css +92 -0
  170. package/dist/components/timeline/timeline.d.ts +9 -0
  171. package/dist/components/timeline/timeline.js +7 -0
  172. package/dist/components/tooltip/index.d.ts +15 -0
  173. package/dist/components/tooltip/index.js +41 -0
  174. package/dist/components/tooltip/tooltip.astro +25 -0
  175. package/dist/components/tooltip/tooltip.css +84 -0
  176. package/dist/components/tooltip/tooltip.d.ts +12 -0
  177. package/dist/components/tooltip/tooltip.js +34 -0
  178. package/dist/config.d.ts +9 -0
  179. package/dist/config.js +6 -0
  180. package/dist/env.d.ts +2 -0
  181. package/dist/html.d.ts +37 -0
  182. package/dist/html.js +126 -0
  183. package/dist/parts.d.ts +27 -0
  184. package/dist/parts.js +28 -0
  185. package/dist/react.d.ts +27 -0
  186. package/dist/react.js +28 -0
  187. package/dist/scss/_chamfer.scss +37 -0
  188. package/dist/scss/_layers.scss +2 -0
  189. package/dist/scss/_theme.scss +15 -0
  190. package/dist/themes/eve-online.css +1945 -0
  191. package/dist/themes/xaroth.css +1974 -0
  192. package/dist/themes.css +3919 -0
  193. package/package.json +80 -0
@@ -0,0 +1,3919 @@
1
+ @charset "UTF-8";
2
+ @import '@fontsource-variable/cinzel/index.css';
3
+ @import '@fontsource/spectral/400.css';
4
+ @import '@fontsource/spectral/400-italic.css';
5
+ @import '@fontsource/spectral/600.css';
6
+ @import '@fontsource/ibm-plex-mono/400.css';
7
+ @import '@fontsource-variable/manrope/index.css';
8
+ @import '@fontsource-variable/oxanium/index.css';
9
+ @import '@fontsource-variable/ibm-plex-sans/index.css';
10
+ @import '@fontsource-variable/jetbrains-mono/index.css';
11
+ @layer x.reset, x.core, x.theme, x.utility;
12
+ @font-face {
13
+ font-family: "xaroth numerals";
14
+ font-style: normal;
15
+ font-weight: 400;
16
+ font-display: swap;
17
+ src: url("@fontsource/spectral/files/spectral-latin-400-normal.woff2") format("woff2");
18
+ unicode-range: U+0030-0039;
19
+ }
20
+ @font-face {
21
+ font-family: "xaroth numerals";
22
+ font-style: normal;
23
+ font-weight: 600;
24
+ font-display: swap;
25
+ src: url("@fontsource/spectral/files/spectral-latin-600-normal.woff2") format("woff2");
26
+ unicode-range: U+0030-0039;
27
+ }
28
+ @layer x.reset {
29
+ *,
30
+ *::before,
31
+ *::after {
32
+ box-sizing: border-box;
33
+ }
34
+ * {
35
+ margin: 0;
36
+ }
37
+ img,
38
+ svg,
39
+ video {
40
+ display: block;
41
+ max-width: 100%;
42
+ }
43
+ input,
44
+ button,
45
+ textarea,
46
+ select {
47
+ font: inherit;
48
+ color: inherit;
49
+ }
50
+ @media (prefers-reduced-motion: reduce) {
51
+ *,
52
+ *::before,
53
+ *::after {
54
+ transition-duration: 0.01ms !important;
55
+ animation-duration: 0.01ms !important;
56
+ animation-iteration-count: 1 !important;
57
+ }
58
+ }
59
+ }
60
+ @layer x.core {
61
+ :root {
62
+ --x-page: 75rem;
63
+ --x-gutter: 16px;
64
+ --x-gap: 16px;
65
+ --x-prose: 68ch;
66
+ --x-space-1: 4px;
67
+ --x-space-2: 8px;
68
+ --x-space-3: 12px;
69
+ --x-space-4: 16px;
70
+ --x-space-5: 24px;
71
+ --x-space-6: 32px;
72
+ --x-space-7: 48px;
73
+ --x-space-8: 64px;
74
+ --x-space-9: 96px;
75
+ --x-space-10: 128px;
76
+ --x-section: 80px;
77
+ --x-fs-display: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
78
+ --x-fs-h1: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
79
+ --x-fs-h2: clamp(1.5rem, 1.3rem + 0.7vw, 2rem);
80
+ --x-fs-h3: 1.25rem;
81
+ --x-fs-lead: 1.25rem;
82
+ --x-fs-body: 1.0625rem;
83
+ --x-fs-ui: 1rem;
84
+ --x-fs-small: 0.875rem;
85
+ --x-fs-label: 0.8125rem;
86
+ --x-control-sm: 36px;
87
+ --x-control-md: 44px;
88
+ --x-control-lg: 52px;
89
+ --x-row: 48px;
90
+ --x-focus-width: 2px;
91
+ --x-focus-offset: 2px;
92
+ --x-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
93
+ --x-duration: 150ms;
94
+ }
95
+ @media (min-width: 640px) {
96
+ :root {
97
+ --x-gap: 24px;
98
+ --x-gutter: 24px;
99
+ --x-section: 128px;
100
+ }
101
+ }
102
+ @media (min-width: 1024px) {
103
+ :root {
104
+ --x-gutter: 32px;
105
+ }
106
+ }
107
+ :root {
108
+ scrollbar-gutter: stable;
109
+ }
110
+ :root,
111
+ [data-x-theme] {
112
+ color-scheme: dark;
113
+ font-family: var(--x-font-body);
114
+ line-height: 1.65;
115
+ color: var(--x-color-text);
116
+ background: var(--x-color-bg);
117
+ -webkit-font-smoothing: antialiased;
118
+ text-rendering: optimizelegibility;
119
+ }
120
+ body,
121
+ [data-x-theme]:not(:root) {
122
+ font-size: var(--x-fs-body);
123
+ }
124
+ h1,
125
+ h2,
126
+ h3,
127
+ h4 {
128
+ font-family: var(--x-font-heading);
129
+ font-weight: 600;
130
+ letter-spacing: var(--x-track-heading);
131
+ text-wrap: balance;
132
+ color: var(--x-color-text);
133
+ }
134
+ h1 {
135
+ font-size: var(--x-fs-h1);
136
+ line-height: 1.15;
137
+ }
138
+ h2 {
139
+ font-size: var(--x-fs-h2);
140
+ line-height: 1.2;
141
+ }
142
+ h3 {
143
+ font-size: var(--x-fs-h3);
144
+ line-height: 1.3;
145
+ }
146
+ h4 {
147
+ font-size: var(--x-fs-ui);
148
+ line-height: 1.4;
149
+ }
150
+ p {
151
+ text-wrap: pretty;
152
+ }
153
+ a {
154
+ color: var(--x-color-accent);
155
+ text-decoration-thickness: 1px;
156
+ text-underline-offset: 0.2em;
157
+ }
158
+ a:where(:hover) {
159
+ color: var(--x-color-accent-strong);
160
+ }
161
+ small {
162
+ font-size: var(--x-fs-small);
163
+ }
164
+ code,
165
+ kbd,
166
+ samp,
167
+ pre {
168
+ font-family: var(--x-font-mono);
169
+ font-size: 0.9em;
170
+ }
171
+ hr {
172
+ border: 0;
173
+ border-top: 1px solid var(--x-color-line);
174
+ }
175
+ ::selection {
176
+ color: var(--x-color-on-accent);
177
+ background: var(--x-color-accent);
178
+ }
179
+ :focus-visible {
180
+ outline: var(--x-focus-width) solid var(--x-color-focus);
181
+ outline-offset: var(--x-focus-offset);
182
+ }
183
+ .x-display {
184
+ font-family: var(--x-font-display);
185
+ font-size: var(--x-fs-display);
186
+ font-weight: 600;
187
+ line-height: 1.1;
188
+ letter-spacing: var(--x-track-display);
189
+ text-wrap: balance;
190
+ }
191
+ .x-lead {
192
+ font-size: var(--x-fs-lead);
193
+ line-height: 1.55;
194
+ color: var(--x-color-text-muted);
195
+ }
196
+ .x-small {
197
+ font-size: var(--x-fs-small);
198
+ line-height: 1.5;
199
+ }
200
+ .x-label {
201
+ font-family: var(--x-font-ui);
202
+ font-size: var(--x-fs-label);
203
+ font-weight: 600;
204
+ line-height: 1.3;
205
+ letter-spacing: var(--x-track-label);
206
+ text-transform: uppercase;
207
+ }
208
+ .x-muted {
209
+ color: var(--x-color-text-muted);
210
+ }
211
+ }
212
+ @layer x.theme {
213
+ :where(:root:not([data-x-theme])),
214
+ [data-x-theme=xaroth] {
215
+ --x-font-display: 'xaroth numerals', 'Cinzel Variable', 'Cinzel', 'Times New Roman', serif;
216
+ --x-font-heading: var(--x-font-display);
217
+ --x-font-body: 'Spectral', Georgia, serif;
218
+ --x-font-ui: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
219
+ --x-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
220
+ --x-fs-body: 1.125rem;
221
+ --x-track-display: 0.06em;
222
+ --x-track-heading: 0.02em;
223
+ --x-track-label: 0.12em;
224
+ --x-track-caps: 0.2em;
225
+ --x-color-bg: #0b0806;
226
+ --x-color-bg-sunk: #080604;
227
+ --x-color-surface: #15100b;
228
+ --x-color-surface-2: #1d1610;
229
+ --x-color-surface-3: #2a2117;
230
+ --x-color-glass: rgb(34 26 17 / 58%);
231
+ --x-color-glass-edge: rgb(228 197 135 / 14%);
232
+ --x-color-line: #2e251a;
233
+ --x-color-line-strong: #3b2f21;
234
+ --x-color-field-edge: #7a6342;
235
+ --x-color-rule: #8a6d42;
236
+ --x-color-text: #e6d8bc;
237
+ --x-color-text-muted: #b3a283;
238
+ --x-color-text-faint: #968669;
239
+ --x-color-accent: #c9a45c;
240
+ --x-color-accent-strong: #e4c587;
241
+ --x-color-accent-edge: #7a6342;
242
+ --x-color-accent-wash: rgb(201 164 92 / 10%);
243
+ --x-color-on-accent: #0b0806;
244
+ --x-color-focus: #e4c587;
245
+ --x-color-info: #9db3bd;
246
+ --x-color-on-info: #0b0806;
247
+ --x-color-info-wash: rgb(157 179 189 / 7%);
248
+ --x-color-success: #a9b673;
249
+ --x-color-on-success: #0b0806;
250
+ --x-color-success-wash: rgb(169 182 115 / 7%);
251
+ --x-color-warning: #dcaa4a;
252
+ --x-color-on-warning: #0b0806;
253
+ --x-color-warning-wash: rgb(220 170 74 / 7%);
254
+ --x-color-danger: #e0735a;
255
+ --x-color-on-danger: #0b0806;
256
+ --x-color-danger-wash: rgb(224 115 90 / 8%);
257
+ --x-color-sand: #d8c29a;
258
+ --x-color-bronze: #a37b49;
259
+ --x-color-spice: #e57a32;
260
+ --x-color-dawn: #fff0d4;
261
+ --x-radius: 2px;
262
+ --x-cut-sm: 0px;
263
+ --x-cut-md: 0px;
264
+ --x-cut-lg: 0px;
265
+ --x-blur: blur(16px) saturate(130%);
266
+ --x-shadow: inset 0 1px 0 rgb(228 197 135 / 10%), 0 30px 60px -30px rgb(0 0 0 / 80%);
267
+ }
268
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-alert {
269
+ --x-alert-gap: var(--x-space-4);
270
+ --x-alert-glyph-width: 1.5;
271
+ --x-alert-title-weight: 700;
272
+ --x-alert-fs: var(--x-fs-ui);
273
+ --x-alert-lh: 1.55;
274
+ padding: var(--x-space-4) var(--x-space-5);
275
+ }
276
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-alert__icon {
277
+ stroke-linecap: square;
278
+ }
279
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-alert__frame--facet {
280
+ display: none;
281
+ }
282
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-alert__frame--round {
283
+ display: inline;
284
+ }
285
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-alert--framed {
286
+ border: 1px solid color-mix(in srgb, var(--x-alert-tone) 30%, var(--x-color-line-strong));
287
+ border-left: 2px solid var(--x-alert-tone);
288
+ outline: 1px solid var(--x-color-line);
289
+ outline-offset: -5px;
290
+ }
291
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-alert--framed .x-alert__title {
292
+ font-family: var(--x-font-display);
293
+ font-size: var(--x-fs-label);
294
+ font-weight: 600;
295
+ line-height: 1.3;
296
+ letter-spacing: var(--x-track-caps);
297
+ text-transform: uppercase;
298
+ color: var(--x-alert-tone);
299
+ }
300
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-alert--framed.x-alert--info {
301
+ --x-alert-tone: var(--x-color-accent);
302
+ --x-alert-wash: var(--x-color-accent-wash);
303
+ }
304
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-avatar {
305
+ --x-avatar-scale: 0.4375;
306
+ --x-avatar-weight: 500;
307
+ color: var(--x-color-sand);
308
+ background: radial-gradient(circle at 50% 30%, var(--x-color-surface-3), var(--x-color-surface) 70%);
309
+ border: 1px solid var(--x-color-rule);
310
+ border-radius: 50%;
311
+ }
312
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-avatar--image::after {
313
+ content: "";
314
+ position: absolute;
315
+ inset: 0;
316
+ border: 1px solid color-mix(in srgb, var(--x-color-accent) 40%, transparent);
317
+ border-radius: inherit;
318
+ }
319
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-badge {
320
+ --x-badge-gap: 0.5em;
321
+ --x-badge-edge-mix: 55%;
322
+ padding: 0.3rem 0.6rem 0.3rem 0.5rem;
323
+ font-weight: 700;
324
+ letter-spacing: 0.14em;
325
+ background: var(--x-color-bg-sunk);
326
+ border-radius: var(--x-radius);
327
+ }
328
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-badge::before {
329
+ width: 0.4rem;
330
+ height: 0.4rem;
331
+ transform: rotate(45deg);
332
+ }
333
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-badge:not(.x-badge--info, .x-badge--success, .x-badge--warning, .x-badge--danger)::before {
334
+ background: transparent;
335
+ border: 1px solid currentcolor;
336
+ }
337
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-breadcrumbs {
338
+ --x-breadcrumbs-gap: var(--x-space-3);
339
+ }
340
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-breadcrumbs__list {
341
+ row-gap: var(--x-space-2);
342
+ }
343
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-breadcrumbs__item {
344
+ font-family: var(--x-font-display);
345
+ font-size: var(--x-fs-label);
346
+ font-weight: 600;
347
+ line-height: 1.3;
348
+ letter-spacing: var(--x-track-caps);
349
+ text-transform: uppercase;
350
+ color: var(--x-color-text-muted);
351
+ }
352
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-breadcrumbs__item + .x-breadcrumbs__item::before {
353
+ content: "";
354
+ width: 0.3rem;
355
+ height: 0.3rem;
356
+ background: var(--x-color-bronze);
357
+ transform: rotate(45deg);
358
+ }
359
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-breadcrumbs__link:hover {
360
+ color: var(--x-color-accent-strong);
361
+ }
362
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-breadcrumbs__current {
363
+ color: var(--x-color-sand);
364
+ }
365
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button {
366
+ --x-button-font: var(--x-font-display);
367
+ --x-button-tracking: var(--x-track-caps);
368
+ --x-button-tone-hi: color-mix(in oklab, var(--x-button-tone) 70%, var(--x-color-dawn));
369
+ --x-button-text: var(--x-button-tone);
370
+ --x-button-text-hi: var(--x-button-tone-hi);
371
+ --x-button-edge: var(--x-button-tone);
372
+ --x-button-line: color-mix(in oklab, var(--x-button-tone) 65%, var(--x-color-bg));
373
+ --x-button-wash: color-mix(in oklab, var(--x-button-tone) 8%, transparent);
374
+ --x-button-hover-bg: var(--x-button-tone);
375
+ --x-button-hover-fg: var(--x-button-on-tone);
376
+ gap: var(--x-space-3);
377
+ border-radius: 0;
378
+ transition: background var(--x-duration) var(--x-ease), color var(--x-duration) var(--x-ease), border-color var(--x-duration) var(--x-ease), box-shadow var(--x-duration) var(--x-ease);
379
+ }
380
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button:not(.x-button--danger, .x-button--warning, .x-button--success) {
381
+ --x-button-tone-hi: var(--x-color-accent-strong);
382
+ --x-button-text: var(--x-color-accent-strong);
383
+ --x-button-text-hi: var(--x-color-sand);
384
+ --x-button-edge: var(--x-color-rule);
385
+ --x-button-line: var(--x-color-bronze);
386
+ --x-button-wash: transparent;
387
+ --x-button-hover-bg: var(--x-color-surface-2);
388
+ --x-button-hover-fg: var(--x-color-sand);
389
+ }
390
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--primary {
391
+ --x-button-border: var(--x-button-bg);
392
+ box-shadow: inset 0 0 0 3px var(--x-button-bg), inset 0 0 0 4px rgba(13, 10, 7, 0.45);
393
+ }
394
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--primary:hover:not(:disabled, [aria-disabled=true]) {
395
+ --x-button-bg: var(--x-button-tone-hi);
396
+ filter: none;
397
+ }
398
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--secondary {
399
+ --x-button-fg: var(--x-button-text);
400
+ --x-button-bg: var(--x-button-wash);
401
+ --x-button-border: var(--x-button-edge);
402
+ }
403
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--secondary:hover:not(:disabled, [aria-disabled=true]) {
404
+ --x-button-fg: var(--x-button-hover-fg);
405
+ --x-button-bg: var(--x-button-hover-bg);
406
+ --x-button-border: var(--x-button-tone);
407
+ }
408
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--tertiary {
409
+ --x-button-fg: var(--x-button-text);
410
+ --x-button-bg: transparent;
411
+ padding: 0 var(--x-space-2);
412
+ }
413
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--tertiary::after {
414
+ content: "";
415
+ position: absolute;
416
+ inset: auto var(--x-space-2) 0.55rem;
417
+ height: 1px;
418
+ background: var(--x-button-line);
419
+ transition: background var(--x-duration) var(--x-ease);
420
+ }
421
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--tertiary:hover:not(:disabled, [aria-disabled=true]) {
422
+ --x-button-fg: var(--x-button-text-hi);
423
+ --x-button-bg: transparent;
424
+ --x-button-line: var(--x-button-tone);
425
+ }
426
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--lg {
427
+ --x-button-fs: 0.9375rem;
428
+ }
429
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button:disabled,
430
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button[aria-disabled=true]:not(.x-button--loading) {
431
+ --x-button-fg: var(--x-color-text-faint);
432
+ --x-button-bg: var(--x-color-surface);
433
+ --x-button-border: var(--x-color-line-strong);
434
+ box-shadow: none;
435
+ opacity: 1;
436
+ }
437
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--tertiary:disabled,
438
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-button--tertiary[aria-disabled=true]:not(.x-button--loading) {
439
+ --x-button-bg: transparent;
440
+ --x-button-border: transparent;
441
+ --x-button-line: var(--x-color-line-strong);
442
+ }
443
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card {
444
+ --x-card-gap: var(--x-space-4);
445
+ --x-card-glass-hover: rgb(48 37 24 / 66%);
446
+ --x-card-edge-hover: var(--x-color-rule);
447
+ --x-card-line: var(--x-color-accent);
448
+ --x-card-index-style: upper-roman;
449
+ background: linear-gradient(180deg, rgba(228, 197, 135, 0.05), transparent 40%) var(--x-color-glass);
450
+ backdrop-filter: var(--x-blur);
451
+ border: 1px solid var(--x-color-glass-edge);
452
+ box-shadow: var(--x-shadow);
453
+ transition: border-color var(--x-duration) var(--x-ease), background-color var(--x-duration) var(--x-ease), transform var(--x-duration) var(--x-ease);
454
+ }
455
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card::before {
456
+ content: "";
457
+ position: absolute;
458
+ top: -1px;
459
+ right: 22%;
460
+ left: 22%;
461
+ height: 1px;
462
+ pointer-events: none;
463
+ background: linear-gradient(90deg, transparent, var(--x-card-line), transparent);
464
+ transition: left var(--x-duration) var(--x-ease), right var(--x-duration) var(--x-ease);
465
+ }
466
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card--link:hover {
467
+ background-color: var(--x-card-glass-hover);
468
+ --x-card-line: var(--x-color-accent-strong);
469
+ border-color: var(--x-card-edge-hover);
470
+ transform: translateY(-2px);
471
+ }
472
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card--link:hover::before {
473
+ right: 0;
474
+ left: 0;
475
+ }
476
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card--link:hover .x-card__title {
477
+ color: var(--x-color-accent-strong);
478
+ }
479
+ @media (prefers-reduced-motion: reduce) {
480
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card--link:hover {
481
+ transform: none;
482
+ }
483
+ }
484
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card--featured {
485
+ border-color: var(--x-color-accent-edge);
486
+ }
487
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card--featured::before {
488
+ right: 0;
489
+ left: 0;
490
+ height: 2px;
491
+ background: linear-gradient(90deg, var(--x-color-bronze), var(--x-color-accent-strong) 50%, var(--x-color-bronze));
492
+ }
493
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card--featured::after {
494
+ content: "";
495
+ position: absolute;
496
+ top: 0;
497
+ left: 50%;
498
+ width: 0.75rem;
499
+ height: 0.75rem;
500
+ pointer-events: none;
501
+ background: var(--x-color-spice);
502
+ box-shadow: 0 0 0 4px var(--x-color-bg);
503
+ transform: translate(-50%, -50%) rotate(45deg);
504
+ }
505
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card__index {
506
+ font-family: var(--x-font-display);
507
+ font-weight: 600;
508
+ letter-spacing: var(--x-track-caps);
509
+ color: var(--x-color-bronze);
510
+ }
511
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card__title {
512
+ font-weight: 500;
513
+ letter-spacing: 0.06em;
514
+ color: var(--x-color-sand);
515
+ transition: color var(--x-duration) var(--x-ease);
516
+ }
517
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card__foot {
518
+ padding-top: var(--x-space-4);
519
+ }
520
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card__foot-start, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card__foot-end {
521
+ font-family: var(--x-font-display);
522
+ font-size: var(--x-fs-label);
523
+ font-weight: 600;
524
+ line-height: 1.3;
525
+ letter-spacing: var(--x-track-caps);
526
+ text-transform: uppercase;
527
+ color: var(--x-color-text-muted);
528
+ }
529
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-card__foot-end {
530
+ color: var(--x-color-accent-strong);
531
+ }
532
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-description-list {
533
+ --x-description-list-term-width: 6rem;
534
+ --x-description-list-line: var(--x-color-line-strong);
535
+ }
536
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-description-list a {
537
+ color: var(--x-color-accent-strong);
538
+ }
539
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-description-list--columns .x-description-list__item {
540
+ grid-template-columns: var(--x-description-list-term-width) minmax(0, 1fr);
541
+ gap: var(--x-space-3);
542
+ align-items: baseline;
543
+ }
544
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--ornament,
545
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--label {
546
+ --x-divider-line: var(--x-color-rule);
547
+ }
548
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--ornament::before, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--ornament::after,
549
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--label::before,
550
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--label::after {
551
+ max-width: 16rem;
552
+ background: linear-gradient(to right, transparent, var(--x-divider-line));
553
+ }
554
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--ornament::after,
555
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider--label::after {
556
+ background: linear-gradient(to left, transparent, var(--x-divider-line));
557
+ }
558
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider__mark {
559
+ width: 2.5rem;
560
+ height: 0.875rem;
561
+ background: var(--x-color-accent);
562
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='24 0 40 14' fill='none' stroke='%23000'%3E%3Cpath d='M28 7l4-4 4 4-4 4zM52 7l4-4 4 4-4 4z' fill='%23000' stroke='none'/%3E%3Ccircle cx='44' cy='7' r='5.5'/%3E%3Ccircle cx='44' cy='7' r='1.8' fill='%23000' stroke='none'/%3E%3Cellipse cx='44' cy='7' rx='8.5' ry='2.2' stroke-width='.6' transform='rotate(-14 44 7)'/%3E%3C/svg%3E") center/contain no-repeat;
563
+ }
564
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider__label {
565
+ display: inline-flex;
566
+ gap: var(--x-space-3);
567
+ align-items: center;
568
+ font-family: var(--x-font-display);
569
+ letter-spacing: var(--x-track-caps);
570
+ color: var(--x-color-accent);
571
+ }
572
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider__label::before, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-divider__label::after {
573
+ content: "";
574
+ flex: none;
575
+ width: 5px;
576
+ height: 5px;
577
+ background: currentcolor;
578
+ rotate: 45deg;
579
+ }
580
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-empty-state {
581
+ --x-empty-state-icon: 2.5rem;
582
+ --x-empty-state-measure: 30rem;
583
+ border: 1px dashed var(--x-color-accent-edge);
584
+ border-radius: var(--x-radius);
585
+ }
586
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-empty-state__icon {
587
+ color: var(--x-color-bronze);
588
+ }
589
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-empty-state__title {
590
+ font-weight: 500;
591
+ color: var(--x-color-sand);
592
+ }
593
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-field,
594
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-choice-group,
595
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-input,
596
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-input-wrap,
597
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-textarea,
598
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-select,
599
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-checkbox,
600
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-radio,
601
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-switch {
602
+ --x-field-bg: color-mix(in srgb, var(--x-color-bg-sunk) 62%, transparent);
603
+ --x-field-bg-focus: color-mix(in srgb, var(--x-color-bg-sunk) 80%, transparent);
604
+ --x-field-bg-disabled: color-mix(in srgb, var(--x-color-surface) 50%, transparent);
605
+ --x-field-edge-hover: var(--x-color-rule);
606
+ --x-field-glow: 0 0 24px -6px color-mix(in srgb, var(--x-color-accent) 45%, transparent);
607
+ --x-field-help-fs: var(--x-fs-small);
608
+ --x-input-icon: var(--x-color-accent);
609
+ --x-check-size: 20px;
610
+ --x-check-mark: 8px;
611
+ --x-check-edge: var(--x-color-rule);
612
+ --x-switch-width: 44px;
613
+ --x-switch-height: 22px;
614
+ --x-switch-knob: 10px;
615
+ --x-switch-knob-off: var(--x-color-text-muted);
616
+ --x-check-on-bg: color-mix(in srgb, var(--x-color-accent) 14%, transparent);
617
+ --x-check-ink: var(--x-color-accent-strong);
618
+ }
619
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-switch {
620
+ --x-check-on-bg: color-mix(in srgb, var(--x-color-accent) 22%, transparent);
621
+ --x-check-on-glow: 0 0 14px -4px color-mix(in srgb, var(--x-color-accent) 50%, transparent);
622
+ }
623
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-input[readonly],
624
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-textarea[readonly] {
625
+ border-color: transparent transparent var(--x-field-edge-readonly);
626
+ }
627
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-input:disabled,
628
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-textarea:disabled,
629
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-select:disabled {
630
+ border-style: dashed;
631
+ }
632
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-select {
633
+ background-image: linear-gradient(45deg, transparent 50%, var(--x-field-arrow) 50%), linear-gradient(135deg, var(--x-field-arrow) 50%, transparent 50%);
634
+ background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%;
635
+ background-size: 0.35rem 0.35rem;
636
+ }
637
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-checkbox__input:disabled,
638
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-radio__input:disabled,
639
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-switch__input:disabled {
640
+ border-color: var(--x-color-field-edge);
641
+ border-style: dashed;
642
+ }
643
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-checkbox__input::before {
644
+ opacity: 1;
645
+ transform: scale(0) rotate(45deg);
646
+ }
647
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-checkbox__input:checked::before {
648
+ transform: scale(1) rotate(45deg);
649
+ }
650
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-radio__input::before {
651
+ opacity: 1;
652
+ transform: scale(0);
653
+ }
654
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-radio__input:checked::before {
655
+ transform: scale(1);
656
+ }
657
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-checkbox__input:disabled::before,
658
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-radio__input:disabled::before {
659
+ background: var(--x-color-text-faint);
660
+ }
661
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-switch__input::before {
662
+ margin-left: 5px;
663
+ background: transparent;
664
+ box-shadow: inset 0 0 0 1.5px var(--x-switch-knob-off);
665
+ transform: rotate(45deg);
666
+ }
667
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-switch__input:checked::before {
668
+ background: var(--x-check-ink);
669
+ box-shadow: none;
670
+ transform: translateX(calc(var(--x-switch-width) - 2px - 10px - var(--x-switch-knob))) rotate(45deg);
671
+ }
672
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-switch__input:disabled::before {
673
+ --x-switch-knob-off: var(--x-color-field-edge);
674
+ }
675
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-switch__input:disabled:checked::before {
676
+ background: var(--x-color-field-edge);
677
+ }
678
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-filters {
679
+ --x-filters-switch-weight: 700;
680
+ --x-filters-switch-tracking: 0.14em;
681
+ --x-filters-count-color: var(--x-color-accent-strong);
682
+ --x-filters-option-hover: var(--x-color-sand);
683
+ --x-filters-option-on-color: var(--x-color-on-accent);
684
+ --x-filters-option-on-bg: var(--x-color-sand);
685
+ }
686
+ @media (min-width: 1024px) {
687
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-filters--top .x-filter-panel > .x-choice-group {
688
+ flex-basis: calc(100% - 14rem);
689
+ }
690
+ }
691
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer {
692
+ padding-block: var(--x-space-7) var(--x-space-8);
693
+ border-top: 1px solid var(--x-color-line);
694
+ }
695
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer__brand {
696
+ font-family: var(--x-font-display);
697
+ font-size: 1rem;
698
+ font-weight: 600;
699
+ letter-spacing: 0.08em;
700
+ color: var(--x-color-sand);
701
+ }
702
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer__brand:hover {
703
+ color: var(--x-color-accent-strong);
704
+ }
705
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer__brand svg {
706
+ color: var(--x-color-accent);
707
+ }
708
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer__note {
709
+ color: var(--x-color-text-faint);
710
+ }
711
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer__title {
712
+ font-family: var(--x-font-display);
713
+ font-weight: 600;
714
+ letter-spacing: var(--x-track-caps);
715
+ text-transform: uppercase;
716
+ color: var(--x-color-text-faint);
717
+ }
718
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer__link {
719
+ font-family: var(--x-font-ui);
720
+ font-size: var(--x-fs-small);
721
+ color: var(--x-color-text-muted);
722
+ }
723
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer__link:hover {
724
+ color: var(--x-color-accent-strong);
725
+ text-decoration: none;
726
+ }
727
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-footer--columns .x-footer__link {
728
+ font-size: var(--x-fs-ui);
729
+ }
730
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header {
731
+ --x-header-brand-gap: var(--x-space-4);
732
+ --x-header-mark: 2.25rem;
733
+ border-bottom: 1px solid var(--x-color-line);
734
+ }
735
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header::after {
736
+ content: "";
737
+ position: absolute;
738
+ bottom: -1px;
739
+ left: 50%;
740
+ width: min(28rem, 60%);
741
+ height: 1px;
742
+ background: linear-gradient(90deg, transparent, var(--x-color-accent), transparent);
743
+ transform: translateX(-50%);
744
+ }
745
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__brand {
746
+ font-family: var(--x-font-display);
747
+ font-size: 1.125rem;
748
+ font-weight: 600;
749
+ letter-spacing: var(--x-track-caps);
750
+ text-transform: uppercase;
751
+ color: var(--x-color-sand);
752
+ }
753
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__brand svg {
754
+ color: var(--x-color-accent);
755
+ transition: color var(--x-duration) var(--x-ease);
756
+ }
757
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__brand:hover {
758
+ color: var(--x-color-sand);
759
+ }
760
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__brand:hover svg {
761
+ color: var(--x-color-accent-strong);
762
+ }
763
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__link {
764
+ padding: var(--x-space-4) 0;
765
+ font-family: var(--x-font-display);
766
+ font-size: var(--x-fs-label);
767
+ font-weight: 600;
768
+ line-height: 1.3;
769
+ letter-spacing: var(--x-track-caps);
770
+ text-transform: uppercase;
771
+ color: var(--x-color-text-muted);
772
+ transition: color var(--x-duration) var(--x-ease);
773
+ }
774
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__link:hover {
775
+ color: var(--x-color-sand);
776
+ }
777
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__link[aria-current=page] {
778
+ color: var(--x-color-accent-strong);
779
+ }
780
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__nav .x-header__list {
781
+ gap: 0 var(--x-space-6);
782
+ }
783
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__nav .x-header__item {
784
+ gap: var(--x-space-6);
785
+ }
786
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__nav .x-header__item + .x-header__item::before {
787
+ content: "";
788
+ width: 3px;
789
+ height: 3px;
790
+ background: var(--x-color-bronze);
791
+ transform: rotate(45deg);
792
+ }
793
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__nav .x-header__link[aria-current=page]::after {
794
+ content: "";
795
+ position: absolute;
796
+ bottom: -1px;
797
+ left: 50%;
798
+ width: 7px;
799
+ height: 7px;
800
+ background: var(--x-color-accent);
801
+ transform: translate(-50%, 50%) rotate(45deg);
802
+ }
803
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header--inline .x-header__nav .x-header__link {
804
+ min-height: var(--x-header-height);
805
+ }
806
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header--inline .x-header__panel {
807
+ background: var(--x-color-surface-2);
808
+ border: 1px solid var(--x-color-line-strong);
809
+ box-shadow: var(--x-shadow);
810
+ }
811
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__panel .x-header__link {
812
+ gap: var(--x-space-3);
813
+ padding: var(--x-space-3) var(--x-space-4);
814
+ }
815
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__panel .x-header__link[aria-current=page]::before {
816
+ content: "";
817
+ width: 5px;
818
+ height: 5px;
819
+ background: var(--x-color-accent);
820
+ transform: rotate(45deg);
821
+ }
822
+ @media (width < 640px) {
823
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header {
824
+ --x-header-mark: 1.75rem;
825
+ }
826
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-header__brand {
827
+ font-size: 0.9375rem;
828
+ letter-spacing: 0.14em;
829
+ }
830
+ }
831
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-icon {
832
+ --x-icon-cap: square;
833
+ --x-icon-join: miter;
834
+ }
835
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-section-head {
836
+ flex-direction: column;
837
+ gap: var(--x-space-4);
838
+ align-items: center;
839
+ text-align: center;
840
+ }
841
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-section-head__titles {
842
+ gap: var(--x-space-4);
843
+ justify-items: center;
844
+ }
845
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-section-head__eyebrow {
846
+ display: inline-flex;
847
+ gap: var(--x-space-3);
848
+ align-items: center;
849
+ letter-spacing: var(--x-track-caps);
850
+ }
851
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-section-head__eyebrow::before, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-section-head__eyebrow::after {
852
+ content: "";
853
+ width: 0.4rem;
854
+ height: 0.4rem;
855
+ border: 1px solid currentcolor;
856
+ transform: rotate(45deg);
857
+ }
858
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-section-head__title {
859
+ font-weight: 500;
860
+ letter-spacing: 0.08em;
861
+ text-transform: uppercase;
862
+ color: var(--x-color-sand);
863
+ }
864
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-section-head__sub {
865
+ max-width: 34rem;
866
+ font-style: italic;
867
+ }
868
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head__titles {
869
+ gap: var(--x-space-4);
870
+ }
871
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head__eyebrow {
872
+ display: inline-flex;
873
+ gap: var(--x-space-3);
874
+ align-items: center;
875
+ letter-spacing: var(--x-track-caps);
876
+ }
877
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head__eyebrow::before, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head__eyebrow::after {
878
+ content: "";
879
+ width: 0.4rem;
880
+ height: 0.4rem;
881
+ border: 1px solid currentcolor;
882
+ transform: rotate(45deg);
883
+ }
884
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head__eyebrow::after {
885
+ display: none;
886
+ }
887
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head__title {
888
+ font-weight: 500;
889
+ letter-spacing: var(--x-track-display);
890
+ color: var(--x-color-sand);
891
+ }
892
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head__lead {
893
+ font-style: italic;
894
+ }
895
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head--center .x-page-head__eyebrow::after {
896
+ display: block;
897
+ }
898
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-page-head--center .x-page-head__lead {
899
+ max-width: 40rem;
900
+ }
901
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-pagination__link,
902
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-pagination__gap,
903
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-pagination__summary {
904
+ font-family: var(--x-font-ui);
905
+ font-weight: 600;
906
+ font-variant-numeric: tabular-nums;
907
+ }
908
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-pagination__link:where(a):not([aria-current=page]):hover {
909
+ color: var(--x-color-sand);
910
+ border-color: var(--x-color-rule);
911
+ }
912
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-pagination__link--edge {
913
+ font-family: var(--x-font-display);
914
+ letter-spacing: var(--x-track-caps);
915
+ }
916
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-panel {
917
+ --x-panel-line: var(--x-color-accent);
918
+ --x-panel-line-inset: 22%;
919
+ background: var(--x-color-glass);
920
+ backdrop-filter: var(--x-blur);
921
+ border: 1px solid var(--x-color-glass-edge);
922
+ }
923
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-panel--raised, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-panel--accent {
924
+ background: linear-gradient(180deg, var(--x-color-surface-3), var(--x-color-surface-2) 70%);
925
+ border-color: var(--x-color-line-strong);
926
+ box-shadow: var(--x-shadow);
927
+ }
928
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-panel--accent {
929
+ --x-panel-line: var(--x-color-accent-strong);
930
+ --x-panel-line-inset: 8%;
931
+ border-color: var(--x-color-accent-edge);
932
+ border-top-color: var(--x-color-accent);
933
+ box-shadow: inset 0 1px 0 var(--x-color-accent), var(--x-shadow);
934
+ }
935
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-panel--marks::before {
936
+ content: "";
937
+ position: absolute;
938
+ top: -1px;
939
+ right: var(--x-panel-line-inset);
940
+ left: var(--x-panel-line-inset);
941
+ height: 1px;
942
+ pointer-events: none;
943
+ background: linear-gradient(90deg, transparent, var(--x-panel-line), transparent);
944
+ }
945
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-panel--callout {
946
+ --x-color-text: #0b0806;
947
+ --x-color-text-muted: #3d2e1a;
948
+ --x-color-text-faint: #3d2e1a;
949
+ --x-color-sand: #0b0806;
950
+ --x-color-accent: #0b0806;
951
+ --x-color-accent-strong: #2a2117;
952
+ --x-color-on-accent: #d8c29a;
953
+ --x-color-bronze: #0b0806;
954
+ --x-color-rule: #0b0806;
955
+ --x-color-line: rgb(13 10 7 / 25%);
956
+ --x-color-line-strong: rgb(13 10 7 / 35%);
957
+ --x-color-focus: #0b0806;
958
+ color: var(--x-color-text);
959
+ background: repeating-linear-gradient(90deg, transparent 0 3px, rgba(13, 10, 7, 0.03) 3px 4px), linear-gradient(160deg, #e4c587, #d8c29a 45%, #c9a45c);
960
+ backdrop-filter: none;
961
+ border: 0;
962
+ box-shadow: inset 0 0 0 6px #d8c29a, inset 0 0 0 7px rgba(13, 10, 7, 0.35);
963
+ }
964
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-panel--callout.x-panel--marks::before {
965
+ top: 0;
966
+ right: auto;
967
+ left: 50%;
968
+ width: 1.25rem;
969
+ height: 1.25rem;
970
+ background: var(--x-color-spice);
971
+ box-shadow: 0 0 0 6px var(--x-color-bg);
972
+ transform: translate(-50%, -50%) rotate(45deg);
973
+ }
974
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress {
975
+ --x-progress-md: 7px;
976
+ --x-progress-sm: 3px;
977
+ --x-progress-inset: -1px;
978
+ --x-progress-default: var(--x-color-accent);
979
+ --x-progress-head: var(--x-progress-tone);
980
+ --x-progress-diamond: 11px;
981
+ }
982
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress--sm {
983
+ --x-progress-diamond: 6px;
984
+ }
985
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress:not(.x-progress--done,
986
+ .x-progress--info,
987
+ .x-progress--success,
988
+ .x-progress--warning,
989
+ .x-progress--danger) {
990
+ --x-progress-head: var(--x-color-accent-strong);
991
+ }
992
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress--gradient {
993
+ --x-progress-head: var(--x-progress-end);
994
+ }
995
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress__track {
996
+ border-radius: var(--x-radius);
997
+ }
998
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress:not(.x-progress--gradient) .x-progress__fill {
999
+ background: linear-gradient(90deg, color-mix(in oklab, var(--x-progress-tone) 70%, var(--x-color-bronze)), var(--x-progress-tone));
1000
+ }
1001
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress__fill::after {
1002
+ content: "";
1003
+ position: absolute;
1004
+ inset-block-start: 50%;
1005
+ inset-inline-end: calc(var(--x-progress-diamond) / -2);
1006
+ width: var(--x-progress-diamond);
1007
+ height: var(--x-progress-diamond);
1008
+ background: var(--x-progress-head);
1009
+ transform: translateY(-50%) rotate(45deg);
1010
+ }
1011
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress--empty .x-progress__fill::after {
1012
+ display: none;
1013
+ }
1014
+ @media (prefers-reduced-motion: reduce) {
1015
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-progress--indeterminate .x-progress__fill::after {
1016
+ display: none;
1017
+ }
1018
+ }
1019
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose {
1020
+ --x-prose-block: 1.5em;
1021
+ }
1022
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose > :is(h2, h3, h4) {
1023
+ font-weight: 500;
1024
+ color: var(--x-color-sand);
1025
+ }
1026
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose > :is(h3, h4) {
1027
+ font-family: var(--x-font-body);
1028
+ font-weight: 600;
1029
+ letter-spacing: 0;
1030
+ }
1031
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(a) {
1032
+ color: var(--x-color-accent-strong);
1033
+ text-decoration-color: var(--x-color-bronze);
1034
+ }
1035
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(a):hover {
1036
+ color: var(--x-color-sand);
1037
+ text-decoration-color: var(--x-color-accent);
1038
+ }
1039
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(strong) {
1040
+ color: var(--x-color-sand);
1041
+ }
1042
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(li)::marker {
1043
+ color: var(--x-color-accent);
1044
+ }
1045
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(ol) > :where(li)::marker {
1046
+ font-family: var(--x-font-ui);
1047
+ font-size: 0.9em;
1048
+ font-weight: 600;
1049
+ }
1050
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(blockquote) {
1051
+ padding-left: var(--x-space-5);
1052
+ border-left: 2px solid var(--x-color-accent);
1053
+ }
1054
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(blockquote) > :not(footer, cite) {
1055
+ font-size: var(--x-fs-lead);
1056
+ font-style: italic;
1057
+ line-height: 1.55;
1058
+ color: var(--x-color-sand);
1059
+ }
1060
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(blockquote) > :is(footer, cite) {
1061
+ margin-top: var(--x-space-2);
1062
+ font-family: var(--x-font-ui);
1063
+ font-size: var(--x-fs-small);
1064
+ color: var(--x-color-text-muted);
1065
+ }
1066
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(:not(pre)) > :where(code) {
1067
+ color: var(--x-color-accent-strong);
1068
+ background: var(--x-color-surface-2);
1069
+ border-radius: var(--x-radius);
1070
+ }
1071
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(hr) {
1072
+ position: relative;
1073
+ height: 9px;
1074
+ overflow: visible;
1075
+ background: linear-gradient(90deg, transparent, var(--x-color-rule) 30%, var(--x-color-rule) 70%, transparent) 0 50%/100% 1px no-repeat;
1076
+ border: 0;
1077
+ }
1078
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(hr)::after {
1079
+ content: "";
1080
+ position: absolute;
1081
+ top: 50%;
1082
+ left: 50%;
1083
+ width: 7px;
1084
+ height: 7px;
1085
+ background: var(--x-color-bg);
1086
+ border: 1px solid var(--x-color-accent);
1087
+ transform: translate(-50%, -50%) rotate(45deg);
1088
+ }
1089
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(figure:not(.x-code)) > :is(img, svg, video, picture) {
1090
+ padding: var(--x-space-4);
1091
+ background: var(--x-color-bg-sunk);
1092
+ border-radius: var(--x-radius);
1093
+ }
1094
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(table:not(.x-table)) {
1095
+ background: var(--x-color-glass);
1096
+ backdrop-filter: var(--x-blur);
1097
+ border: 1px solid var(--x-color-glass-edge);
1098
+ border-top-color: var(--x-color-rule);
1099
+ --x-table-hover: var(--x-color-accent-wash);
1100
+ --x-table-stripe: color-mix(in srgb, var(--x-color-sand) 4%, transparent);
1101
+ font-family: var(--x-font-ui);
1102
+ }
1103
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(table:not(.x-table)) :where(caption) {
1104
+ font-family: var(--x-font-body);
1105
+ font-style: italic;
1106
+ }
1107
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(table:not(.x-table)) :where(thead th) {
1108
+ font-weight: 700;
1109
+ letter-spacing: var(--x-track-label);
1110
+ text-transform: uppercase;
1111
+ color: var(--x-color-accent);
1112
+ background: var(--x-color-bg-sunk);
1113
+ box-shadow: inset 0 -1px 0 var(--x-color-rule);
1114
+ }
1115
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(table:not(.x-table)) :where(tbody th) {
1116
+ font-weight: 600;
1117
+ color: var(--x-color-sand);
1118
+ }
1119
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code {
1120
+ --x-code-bg: var(--x-color-bg-sunk);
1121
+ color: var(--x-color-text);
1122
+ background: var(--x-code-bg);
1123
+ border: 1px solid var(--x-color-line-strong);
1124
+ border-radius: var(--x-radius);
1125
+ }
1126
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__bar {
1127
+ font-family: var(--x-font-mono);
1128
+ color: var(--x-color-text-muted);
1129
+ border-bottom: 1px solid var(--x-color-line-strong);
1130
+ }
1131
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__pre {
1132
+ font-size: 0.9375rem;
1133
+ line-height: 1.65;
1134
+ }
1135
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__line::before {
1136
+ color: var(--x-color-text-faint);
1137
+ }
1138
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__kw, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__str, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__num, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__fn, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-code__com {
1139
+ color: inherit;
1140
+ }
1141
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat {
1142
+ --x-stat-value: var(--x-color-sand);
1143
+ --x-stat-inner-gap: var(--x-space-1);
1144
+ text-align: center;
1145
+ }
1146
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat__value {
1147
+ order: -1;
1148
+ font-family: var(--x-font-body);
1149
+ font-size: var(--x-fs-h2);
1150
+ font-weight: 400;
1151
+ }
1152
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat__label {
1153
+ font-family: var(--x-font-display);
1154
+ font-size: var(--x-fs-label);
1155
+ font-weight: 600;
1156
+ line-height: 1.3;
1157
+ letter-spacing: var(--x-track-caps);
1158
+ text-transform: uppercase;
1159
+ color: var(--x-color-text-muted);
1160
+ }
1161
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat--muted {
1162
+ --x-stat-value: var(--x-color-text-muted);
1163
+ }
1164
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat--success {
1165
+ --x-stat-value: var(--x-color-success);
1166
+ }
1167
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat--warning {
1168
+ --x-stat-value: var(--x-color-warning);
1169
+ }
1170
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat--danger {
1171
+ --x-stat-value: var(--x-color-danger);
1172
+ }
1173
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat-group--framed {
1174
+ --x-stat-gap: 0;
1175
+ overflow: hidden;
1176
+ background: var(--x-color-glass);
1177
+ backdrop-filter: var(--x-blur);
1178
+ border: 1px solid var(--x-color-glass-edge);
1179
+ border-block-color: var(--x-color-rule);
1180
+ box-shadow: var(--x-shadow);
1181
+ }
1182
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat-group--framed .x-stat {
1183
+ --x-stat-pad: var(--x-space-6) var(--x-space-5);
1184
+ --x-stat-inner-gap: var(--x-space-2);
1185
+ box-shadow: -1px 0 0 var(--x-color-line-strong), 0 -1px 0 var(--x-color-line-strong);
1186
+ }
1187
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat-group--framed .x-stat__value {
1188
+ letter-spacing: 0.04em;
1189
+ }
1190
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-table-wrap {
1191
+ background: var(--x-color-glass);
1192
+ backdrop-filter: var(--x-blur);
1193
+ border: 1px solid var(--x-color-glass-edge);
1194
+ border-top-color: var(--x-color-rule);
1195
+ --x-table-cover: color-mix(in srgb, var(--x-color-surface-2) 30%, var(--x-color-surface));
1196
+ --x-table-edge: color-mix(in srgb, var(--x-color-accent) 34%, transparent);
1197
+ background: var(--x-table-hint), var(--x-color-glass);
1198
+ }
1199
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-table {
1200
+ --x-table-hover: var(--x-color-accent-wash);
1201
+ --x-table-stripe: color-mix(in srgb, var(--x-color-sand) 4%, transparent);
1202
+ font-family: var(--x-font-ui);
1203
+ }
1204
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-table :where(caption) {
1205
+ font-family: var(--x-font-body);
1206
+ font-style: italic;
1207
+ }
1208
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-table :where(thead th) {
1209
+ font-weight: 700;
1210
+ letter-spacing: var(--x-track-label);
1211
+ text-transform: uppercase;
1212
+ color: var(--x-color-accent);
1213
+ background: var(--x-color-bg-sunk);
1214
+ box-shadow: inset 0 -1px 0 var(--x-color-rule);
1215
+ }
1216
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-table :where(tbody th) {
1217
+ font-weight: 600;
1218
+ color: var(--x-color-sand);
1219
+ }
1220
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tabs__list {
1221
+ gap: var(--x-space-5);
1222
+ }
1223
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tabs__list::after {
1224
+ margin-left: calc(-1 * var(--x-space-5));
1225
+ }
1226
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tabs__link {
1227
+ font-family: var(--x-font-ui);
1228
+ font-size: var(--x-fs-ui);
1229
+ font-weight: 600;
1230
+ line-height: 1.4;
1231
+ box-shadow: inset 0 -2px 0 transparent;
1232
+ }
1233
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tabs__link:hover {
1234
+ color: var(--x-color-sand);
1235
+ }
1236
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tabs__link[aria-current=page] {
1237
+ color: var(--x-color-accent-strong);
1238
+ box-shadow: inset 0 -2px 0 var(--x-color-accent);
1239
+ }
1240
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tabs__link[aria-current=page] .x-tabs__count {
1241
+ color: var(--x-color-accent-strong);
1242
+ border-color: var(--x-color-accent-edge);
1243
+ }
1244
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tabs__count {
1245
+ background: var(--x-color-surface);
1246
+ }
1247
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tag {
1248
+ min-height: 0;
1249
+ padding: 0.125rem var(--x-space-2);
1250
+ letter-spacing: 0.06em;
1251
+ text-transform: uppercase;
1252
+ background: var(--x-color-surface);
1253
+ }
1254
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tag:where(a) {
1255
+ min-height: var(--x-control-sm);
1256
+ padding-inline: var(--x-space-3);
1257
+ }
1258
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tag:where(a):hover {
1259
+ color: var(--x-color-sand);
1260
+ border-color: var(--x-color-rule);
1261
+ }
1262
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tag--active, :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tag--active:where(a):hover {
1263
+ color: var(--x-color-on-accent);
1264
+ background: var(--x-color-sand);
1265
+ border-color: var(--x-color-sand);
1266
+ }
1267
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-timeline {
1268
+ --x-timeline-gap: var(--x-space-6);
1269
+ --x-timeline-rail: 12px;
1270
+ --x-timeline-node: 0.6rem;
1271
+ --x-timeline-date-fs: var(--x-fs-h3);
1272
+ --x-timeline-spine: var(--x-color-rule);
1273
+ --x-timeline-columns: [date-start] max-content [date-end rail-start] var(--x-timeline-rail) [rail-end body-start] minmax(0, 1fr) [body-end];
1274
+ }
1275
+ @media (min-width: 640px) {
1276
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-timeline {
1277
+ --x-timeline-column-gap: var(--x-space-5);
1278
+ }
1279
+ }
1280
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-timeline__item--current::after {
1281
+ background: var(--x-color-spice);
1282
+ border-color: var(--x-color-spice);
1283
+ }
1284
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-timeline__date {
1285
+ font-family: var(--x-font-display);
1286
+ font-weight: 500;
1287
+ color: var(--x-color-accent);
1288
+ }
1289
+ @media (min-width: 640px) {
1290
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-timeline__date {
1291
+ text-align: right;
1292
+ }
1293
+ }
1294
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-timeline__title {
1295
+ font-size: 1.1875rem;
1296
+ font-weight: 500;
1297
+ letter-spacing: var(--x-track-display);
1298
+ color: var(--x-color-sand);
1299
+ }
1300
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-tooltip {
1301
+ --x-tooltip-edge: var(--x-color-surface-3);
1302
+ }
1303
+ }
1304
+ @layer x.utility {
1305
+ .x-p-none {
1306
+ padding: 0;
1307
+ }
1308
+ .x-p-2xs {
1309
+ padding: var(--x-space-1);
1310
+ }
1311
+ .x-p-xs {
1312
+ padding: var(--x-space-2);
1313
+ }
1314
+ .x-p-sm {
1315
+ padding: var(--x-space-3);
1316
+ }
1317
+ .x-p-md {
1318
+ padding: var(--x-space-4);
1319
+ }
1320
+ .x-p-lg {
1321
+ padding: var(--x-space-5);
1322
+ }
1323
+ .x-p-xl {
1324
+ padding: var(--x-space-6);
1325
+ }
1326
+ .x-p-2xl {
1327
+ padding: var(--x-space-7);
1328
+ }
1329
+ .x-p-3xl {
1330
+ padding: var(--x-space-8);
1331
+ }
1332
+ .x-p-4xl {
1333
+ padding: var(--x-space-9);
1334
+ }
1335
+ .x-px-none {
1336
+ padding-inline: 0;
1337
+ }
1338
+ .x-px-2xs {
1339
+ padding-inline: var(--x-space-1);
1340
+ }
1341
+ .x-px-xs {
1342
+ padding-inline: var(--x-space-2);
1343
+ }
1344
+ .x-px-sm {
1345
+ padding-inline: var(--x-space-3);
1346
+ }
1347
+ .x-px-md {
1348
+ padding-inline: var(--x-space-4);
1349
+ }
1350
+ .x-px-lg {
1351
+ padding-inline: var(--x-space-5);
1352
+ }
1353
+ .x-px-xl {
1354
+ padding-inline: var(--x-space-6);
1355
+ }
1356
+ .x-px-2xl {
1357
+ padding-inline: var(--x-space-7);
1358
+ }
1359
+ .x-px-3xl {
1360
+ padding-inline: var(--x-space-8);
1361
+ }
1362
+ .x-px-4xl {
1363
+ padding-inline: var(--x-space-9);
1364
+ }
1365
+ .x-py-none {
1366
+ padding-block: 0;
1367
+ }
1368
+ .x-py-2xs {
1369
+ padding-block: var(--x-space-1);
1370
+ }
1371
+ .x-py-xs {
1372
+ padding-block: var(--x-space-2);
1373
+ }
1374
+ .x-py-sm {
1375
+ padding-block: var(--x-space-3);
1376
+ }
1377
+ .x-py-md {
1378
+ padding-block: var(--x-space-4);
1379
+ }
1380
+ .x-py-lg {
1381
+ padding-block: var(--x-space-5);
1382
+ }
1383
+ .x-py-xl {
1384
+ padding-block: var(--x-space-6);
1385
+ }
1386
+ .x-py-2xl {
1387
+ padding-block: var(--x-space-7);
1388
+ }
1389
+ .x-py-3xl {
1390
+ padding-block: var(--x-space-8);
1391
+ }
1392
+ .x-py-4xl {
1393
+ padding-block: var(--x-space-9);
1394
+ }
1395
+ .x-pt-none {
1396
+ padding-top: 0;
1397
+ }
1398
+ .x-pt-2xs {
1399
+ padding-top: var(--x-space-1);
1400
+ }
1401
+ .x-pt-xs {
1402
+ padding-top: var(--x-space-2);
1403
+ }
1404
+ .x-pt-sm {
1405
+ padding-top: var(--x-space-3);
1406
+ }
1407
+ .x-pt-md {
1408
+ padding-top: var(--x-space-4);
1409
+ }
1410
+ .x-pt-lg {
1411
+ padding-top: var(--x-space-5);
1412
+ }
1413
+ .x-pt-xl {
1414
+ padding-top: var(--x-space-6);
1415
+ }
1416
+ .x-pt-2xl {
1417
+ padding-top: var(--x-space-7);
1418
+ }
1419
+ .x-pt-3xl {
1420
+ padding-top: var(--x-space-8);
1421
+ }
1422
+ .x-pt-4xl {
1423
+ padding-top: var(--x-space-9);
1424
+ }
1425
+ .x-pr-none {
1426
+ padding-right: 0;
1427
+ }
1428
+ .x-pr-2xs {
1429
+ padding-right: var(--x-space-1);
1430
+ }
1431
+ .x-pr-xs {
1432
+ padding-right: var(--x-space-2);
1433
+ }
1434
+ .x-pr-sm {
1435
+ padding-right: var(--x-space-3);
1436
+ }
1437
+ .x-pr-md {
1438
+ padding-right: var(--x-space-4);
1439
+ }
1440
+ .x-pr-lg {
1441
+ padding-right: var(--x-space-5);
1442
+ }
1443
+ .x-pr-xl {
1444
+ padding-right: var(--x-space-6);
1445
+ }
1446
+ .x-pr-2xl {
1447
+ padding-right: var(--x-space-7);
1448
+ }
1449
+ .x-pr-3xl {
1450
+ padding-right: var(--x-space-8);
1451
+ }
1452
+ .x-pr-4xl {
1453
+ padding-right: var(--x-space-9);
1454
+ }
1455
+ .x-pb-none {
1456
+ padding-bottom: 0;
1457
+ }
1458
+ .x-pb-2xs {
1459
+ padding-bottom: var(--x-space-1);
1460
+ }
1461
+ .x-pb-xs {
1462
+ padding-bottom: var(--x-space-2);
1463
+ }
1464
+ .x-pb-sm {
1465
+ padding-bottom: var(--x-space-3);
1466
+ }
1467
+ .x-pb-md {
1468
+ padding-bottom: var(--x-space-4);
1469
+ }
1470
+ .x-pb-lg {
1471
+ padding-bottom: var(--x-space-5);
1472
+ }
1473
+ .x-pb-xl {
1474
+ padding-bottom: var(--x-space-6);
1475
+ }
1476
+ .x-pb-2xl {
1477
+ padding-bottom: var(--x-space-7);
1478
+ }
1479
+ .x-pb-3xl {
1480
+ padding-bottom: var(--x-space-8);
1481
+ }
1482
+ .x-pb-4xl {
1483
+ padding-bottom: var(--x-space-9);
1484
+ }
1485
+ .x-pl-none {
1486
+ padding-left: 0;
1487
+ }
1488
+ .x-pl-2xs {
1489
+ padding-left: var(--x-space-1);
1490
+ }
1491
+ .x-pl-xs {
1492
+ padding-left: var(--x-space-2);
1493
+ }
1494
+ .x-pl-sm {
1495
+ padding-left: var(--x-space-3);
1496
+ }
1497
+ .x-pl-md {
1498
+ padding-left: var(--x-space-4);
1499
+ }
1500
+ .x-pl-lg {
1501
+ padding-left: var(--x-space-5);
1502
+ }
1503
+ .x-pl-xl {
1504
+ padding-left: var(--x-space-6);
1505
+ }
1506
+ .x-pl-2xl {
1507
+ padding-left: var(--x-space-7);
1508
+ }
1509
+ .x-pl-3xl {
1510
+ padding-left: var(--x-space-8);
1511
+ }
1512
+ .x-pl-4xl {
1513
+ padding-left: var(--x-space-9);
1514
+ }
1515
+ .x-m-none {
1516
+ margin: 0;
1517
+ }
1518
+ .x-m-2xs {
1519
+ margin: var(--x-space-1);
1520
+ }
1521
+ .x-m-xs {
1522
+ margin: var(--x-space-2);
1523
+ }
1524
+ .x-m-sm {
1525
+ margin: var(--x-space-3);
1526
+ }
1527
+ .x-m-md {
1528
+ margin: var(--x-space-4);
1529
+ }
1530
+ .x-m-lg {
1531
+ margin: var(--x-space-5);
1532
+ }
1533
+ .x-m-xl {
1534
+ margin: var(--x-space-6);
1535
+ }
1536
+ .x-m-2xl {
1537
+ margin: var(--x-space-7);
1538
+ }
1539
+ .x-m-3xl {
1540
+ margin: var(--x-space-8);
1541
+ }
1542
+ .x-m-4xl {
1543
+ margin: var(--x-space-9);
1544
+ }
1545
+ .x-m-section {
1546
+ margin: var(--x-section);
1547
+ }
1548
+ .x-m-auto {
1549
+ margin: auto;
1550
+ }
1551
+ .x-mx-none {
1552
+ margin-inline: 0;
1553
+ }
1554
+ .x-mx-2xs {
1555
+ margin-inline: var(--x-space-1);
1556
+ }
1557
+ .x-mx-xs {
1558
+ margin-inline: var(--x-space-2);
1559
+ }
1560
+ .x-mx-sm {
1561
+ margin-inline: var(--x-space-3);
1562
+ }
1563
+ .x-mx-md {
1564
+ margin-inline: var(--x-space-4);
1565
+ }
1566
+ .x-mx-lg {
1567
+ margin-inline: var(--x-space-5);
1568
+ }
1569
+ .x-mx-xl {
1570
+ margin-inline: var(--x-space-6);
1571
+ }
1572
+ .x-mx-2xl {
1573
+ margin-inline: var(--x-space-7);
1574
+ }
1575
+ .x-mx-3xl {
1576
+ margin-inline: var(--x-space-8);
1577
+ }
1578
+ .x-mx-4xl {
1579
+ margin-inline: var(--x-space-9);
1580
+ }
1581
+ .x-mx-section {
1582
+ margin-inline: var(--x-section);
1583
+ }
1584
+ .x-mx-auto {
1585
+ margin-inline: auto;
1586
+ }
1587
+ .x-my-none {
1588
+ margin-block: 0;
1589
+ }
1590
+ .x-my-2xs {
1591
+ margin-block: var(--x-space-1);
1592
+ }
1593
+ .x-my-xs {
1594
+ margin-block: var(--x-space-2);
1595
+ }
1596
+ .x-my-sm {
1597
+ margin-block: var(--x-space-3);
1598
+ }
1599
+ .x-my-md {
1600
+ margin-block: var(--x-space-4);
1601
+ }
1602
+ .x-my-lg {
1603
+ margin-block: var(--x-space-5);
1604
+ }
1605
+ .x-my-xl {
1606
+ margin-block: var(--x-space-6);
1607
+ }
1608
+ .x-my-2xl {
1609
+ margin-block: var(--x-space-7);
1610
+ }
1611
+ .x-my-3xl {
1612
+ margin-block: var(--x-space-8);
1613
+ }
1614
+ .x-my-4xl {
1615
+ margin-block: var(--x-space-9);
1616
+ }
1617
+ .x-my-section {
1618
+ margin-block: var(--x-section);
1619
+ }
1620
+ .x-my-auto {
1621
+ margin-block: auto;
1622
+ }
1623
+ .x-mt-none {
1624
+ margin-top: 0;
1625
+ }
1626
+ .x-mt-2xs {
1627
+ margin-top: var(--x-space-1);
1628
+ }
1629
+ .x-mt-xs {
1630
+ margin-top: var(--x-space-2);
1631
+ }
1632
+ .x-mt-sm {
1633
+ margin-top: var(--x-space-3);
1634
+ }
1635
+ .x-mt-md {
1636
+ margin-top: var(--x-space-4);
1637
+ }
1638
+ .x-mt-lg {
1639
+ margin-top: var(--x-space-5);
1640
+ }
1641
+ .x-mt-xl {
1642
+ margin-top: var(--x-space-6);
1643
+ }
1644
+ .x-mt-2xl {
1645
+ margin-top: var(--x-space-7);
1646
+ }
1647
+ .x-mt-3xl {
1648
+ margin-top: var(--x-space-8);
1649
+ }
1650
+ .x-mt-4xl {
1651
+ margin-top: var(--x-space-9);
1652
+ }
1653
+ .x-mt-section {
1654
+ margin-top: var(--x-section);
1655
+ }
1656
+ .x-mt-auto {
1657
+ margin-top: auto;
1658
+ }
1659
+ .x-mr-none {
1660
+ margin-right: 0;
1661
+ }
1662
+ .x-mr-2xs {
1663
+ margin-right: var(--x-space-1);
1664
+ }
1665
+ .x-mr-xs {
1666
+ margin-right: var(--x-space-2);
1667
+ }
1668
+ .x-mr-sm {
1669
+ margin-right: var(--x-space-3);
1670
+ }
1671
+ .x-mr-md {
1672
+ margin-right: var(--x-space-4);
1673
+ }
1674
+ .x-mr-lg {
1675
+ margin-right: var(--x-space-5);
1676
+ }
1677
+ .x-mr-xl {
1678
+ margin-right: var(--x-space-6);
1679
+ }
1680
+ .x-mr-2xl {
1681
+ margin-right: var(--x-space-7);
1682
+ }
1683
+ .x-mr-3xl {
1684
+ margin-right: var(--x-space-8);
1685
+ }
1686
+ .x-mr-4xl {
1687
+ margin-right: var(--x-space-9);
1688
+ }
1689
+ .x-mr-section {
1690
+ margin-right: var(--x-section);
1691
+ }
1692
+ .x-mr-auto {
1693
+ margin-right: auto;
1694
+ }
1695
+ .x-mb-none {
1696
+ margin-bottom: 0;
1697
+ }
1698
+ .x-mb-2xs {
1699
+ margin-bottom: var(--x-space-1);
1700
+ }
1701
+ .x-mb-xs {
1702
+ margin-bottom: var(--x-space-2);
1703
+ }
1704
+ .x-mb-sm {
1705
+ margin-bottom: var(--x-space-3);
1706
+ }
1707
+ .x-mb-md {
1708
+ margin-bottom: var(--x-space-4);
1709
+ }
1710
+ .x-mb-lg {
1711
+ margin-bottom: var(--x-space-5);
1712
+ }
1713
+ .x-mb-xl {
1714
+ margin-bottom: var(--x-space-6);
1715
+ }
1716
+ .x-mb-2xl {
1717
+ margin-bottom: var(--x-space-7);
1718
+ }
1719
+ .x-mb-3xl {
1720
+ margin-bottom: var(--x-space-8);
1721
+ }
1722
+ .x-mb-4xl {
1723
+ margin-bottom: var(--x-space-9);
1724
+ }
1725
+ .x-mb-section {
1726
+ margin-bottom: var(--x-section);
1727
+ }
1728
+ .x-mb-auto {
1729
+ margin-bottom: auto;
1730
+ }
1731
+ .x-ml-none {
1732
+ margin-left: 0;
1733
+ }
1734
+ .x-ml-2xs {
1735
+ margin-left: var(--x-space-1);
1736
+ }
1737
+ .x-ml-xs {
1738
+ margin-left: var(--x-space-2);
1739
+ }
1740
+ .x-ml-sm {
1741
+ margin-left: var(--x-space-3);
1742
+ }
1743
+ .x-ml-md {
1744
+ margin-left: var(--x-space-4);
1745
+ }
1746
+ .x-ml-lg {
1747
+ margin-left: var(--x-space-5);
1748
+ }
1749
+ .x-ml-xl {
1750
+ margin-left: var(--x-space-6);
1751
+ }
1752
+ .x-ml-2xl {
1753
+ margin-left: var(--x-space-7);
1754
+ }
1755
+ .x-ml-3xl {
1756
+ margin-left: var(--x-space-8);
1757
+ }
1758
+ .x-ml-4xl {
1759
+ margin-left: var(--x-space-9);
1760
+ }
1761
+ .x-ml-section {
1762
+ margin-left: var(--x-section);
1763
+ }
1764
+ .x-ml-auto {
1765
+ margin-left: auto;
1766
+ }
1767
+ .x-gap-none {
1768
+ gap: 0;
1769
+ }
1770
+ .x-gap-x-none {
1771
+ column-gap: 0;
1772
+ }
1773
+ .x-gap-y-none {
1774
+ row-gap: 0;
1775
+ }
1776
+ .x-gap-2xs {
1777
+ gap: var(--x-space-1);
1778
+ }
1779
+ .x-gap-x-2xs {
1780
+ column-gap: var(--x-space-1);
1781
+ }
1782
+ .x-gap-y-2xs {
1783
+ row-gap: var(--x-space-1);
1784
+ }
1785
+ .x-gap-xs {
1786
+ gap: var(--x-space-2);
1787
+ }
1788
+ .x-gap-x-xs {
1789
+ column-gap: var(--x-space-2);
1790
+ }
1791
+ .x-gap-y-xs {
1792
+ row-gap: var(--x-space-2);
1793
+ }
1794
+ .x-gap-sm {
1795
+ gap: var(--x-space-3);
1796
+ }
1797
+ .x-gap-x-sm {
1798
+ column-gap: var(--x-space-3);
1799
+ }
1800
+ .x-gap-y-sm {
1801
+ row-gap: var(--x-space-3);
1802
+ }
1803
+ .x-gap-md {
1804
+ gap: var(--x-space-4);
1805
+ }
1806
+ .x-gap-x-md {
1807
+ column-gap: var(--x-space-4);
1808
+ }
1809
+ .x-gap-y-md {
1810
+ row-gap: var(--x-space-4);
1811
+ }
1812
+ .x-gap-lg {
1813
+ gap: var(--x-space-5);
1814
+ }
1815
+ .x-gap-x-lg {
1816
+ column-gap: var(--x-space-5);
1817
+ }
1818
+ .x-gap-y-lg {
1819
+ row-gap: var(--x-space-5);
1820
+ }
1821
+ .x-gap-xl {
1822
+ gap: var(--x-space-6);
1823
+ }
1824
+ .x-gap-x-xl {
1825
+ column-gap: var(--x-space-6);
1826
+ }
1827
+ .x-gap-y-xl {
1828
+ row-gap: var(--x-space-6);
1829
+ }
1830
+ .x-gap-2xl {
1831
+ gap: var(--x-space-7);
1832
+ }
1833
+ .x-gap-x-2xl {
1834
+ column-gap: var(--x-space-7);
1835
+ }
1836
+ .x-gap-y-2xl {
1837
+ row-gap: var(--x-space-7);
1838
+ }
1839
+ .x-gap-3xl {
1840
+ gap: var(--x-space-8);
1841
+ }
1842
+ .x-gap-x-3xl {
1843
+ column-gap: var(--x-space-8);
1844
+ }
1845
+ .x-gap-y-3xl {
1846
+ row-gap: var(--x-space-8);
1847
+ }
1848
+ .x-gap-4xl {
1849
+ gap: var(--x-space-9);
1850
+ }
1851
+ .x-gap-x-4xl {
1852
+ column-gap: var(--x-space-9);
1853
+ }
1854
+ .x-gap-y-4xl {
1855
+ row-gap: var(--x-space-9);
1856
+ }
1857
+ .x-stack-none {
1858
+ display: flex;
1859
+ flex-direction: column;
1860
+ gap: 0;
1861
+ }
1862
+ .x-cluster-none {
1863
+ display: flex;
1864
+ flex-wrap: wrap;
1865
+ gap: 0;
1866
+ align-items: center;
1867
+ }
1868
+ .x-stack-2xs {
1869
+ display: flex;
1870
+ flex-direction: column;
1871
+ gap: var(--x-space-1);
1872
+ }
1873
+ .x-cluster-2xs {
1874
+ display: flex;
1875
+ flex-wrap: wrap;
1876
+ gap: var(--x-space-1);
1877
+ align-items: center;
1878
+ }
1879
+ .x-stack-xs {
1880
+ display: flex;
1881
+ flex-direction: column;
1882
+ gap: var(--x-space-2);
1883
+ }
1884
+ .x-cluster-xs {
1885
+ display: flex;
1886
+ flex-wrap: wrap;
1887
+ gap: var(--x-space-2);
1888
+ align-items: center;
1889
+ }
1890
+ .x-stack-sm {
1891
+ display: flex;
1892
+ flex-direction: column;
1893
+ gap: var(--x-space-3);
1894
+ }
1895
+ .x-cluster-sm {
1896
+ display: flex;
1897
+ flex-wrap: wrap;
1898
+ gap: var(--x-space-3);
1899
+ align-items: center;
1900
+ }
1901
+ .x-stack-md {
1902
+ display: flex;
1903
+ flex-direction: column;
1904
+ gap: var(--x-space-4);
1905
+ }
1906
+ .x-cluster-md {
1907
+ display: flex;
1908
+ flex-wrap: wrap;
1909
+ gap: var(--x-space-4);
1910
+ align-items: center;
1911
+ }
1912
+ .x-stack-lg {
1913
+ display: flex;
1914
+ flex-direction: column;
1915
+ gap: var(--x-space-5);
1916
+ }
1917
+ .x-cluster-lg {
1918
+ display: flex;
1919
+ flex-wrap: wrap;
1920
+ gap: var(--x-space-5);
1921
+ align-items: center;
1922
+ }
1923
+ .x-stack-xl {
1924
+ display: flex;
1925
+ flex-direction: column;
1926
+ gap: var(--x-space-6);
1927
+ }
1928
+ .x-cluster-xl {
1929
+ display: flex;
1930
+ flex-wrap: wrap;
1931
+ gap: var(--x-space-6);
1932
+ align-items: center;
1933
+ }
1934
+ .x-stack-2xl {
1935
+ display: flex;
1936
+ flex-direction: column;
1937
+ gap: var(--x-space-7);
1938
+ }
1939
+ .x-cluster-2xl {
1940
+ display: flex;
1941
+ flex-wrap: wrap;
1942
+ gap: var(--x-space-7);
1943
+ align-items: center;
1944
+ }
1945
+ .x-stack-3xl {
1946
+ display: flex;
1947
+ flex-direction: column;
1948
+ gap: var(--x-space-8);
1949
+ }
1950
+ .x-cluster-3xl {
1951
+ display: flex;
1952
+ flex-wrap: wrap;
1953
+ gap: var(--x-space-8);
1954
+ align-items: center;
1955
+ }
1956
+ .x-stack-4xl {
1957
+ display: flex;
1958
+ flex-direction: column;
1959
+ gap: var(--x-space-9);
1960
+ }
1961
+ .x-cluster-4xl {
1962
+ display: flex;
1963
+ flex-wrap: wrap;
1964
+ gap: var(--x-space-9);
1965
+ align-items: center;
1966
+ }
1967
+ .x-visually-hidden:not(:focus-within, :active) {
1968
+ position: absolute;
1969
+ width: 1px;
1970
+ height: 1px;
1971
+ padding: 0;
1972
+ margin: -1px;
1973
+ overflow: hidden;
1974
+ white-space: nowrap;
1975
+ border: 0;
1976
+ clip-path: inset(50%);
1977
+ }
1978
+ }
1979
+ @layer x.reset, x.core, x.theme, x.utility;
1980
+ @layer x.reset {
1981
+ *,
1982
+ *::before,
1983
+ *::after {
1984
+ box-sizing: border-box;
1985
+ }
1986
+ * {
1987
+ margin: 0;
1988
+ }
1989
+ img,
1990
+ svg,
1991
+ video {
1992
+ display: block;
1993
+ max-width: 100%;
1994
+ }
1995
+ input,
1996
+ button,
1997
+ textarea,
1998
+ select {
1999
+ font: inherit;
2000
+ color: inherit;
2001
+ }
2002
+ @media (prefers-reduced-motion: reduce) {
2003
+ *,
2004
+ *::before,
2005
+ *::after {
2006
+ transition-duration: 0.01ms !important;
2007
+ animation-duration: 0.01ms !important;
2008
+ animation-iteration-count: 1 !important;
2009
+ }
2010
+ }
2011
+ }
2012
+ @layer x.core {
2013
+ :root {
2014
+ --x-page: 75rem;
2015
+ --x-gutter: 16px;
2016
+ --x-gap: 16px;
2017
+ --x-prose: 68ch;
2018
+ --x-space-1: 4px;
2019
+ --x-space-2: 8px;
2020
+ --x-space-3: 12px;
2021
+ --x-space-4: 16px;
2022
+ --x-space-5: 24px;
2023
+ --x-space-6: 32px;
2024
+ --x-space-7: 48px;
2025
+ --x-space-8: 64px;
2026
+ --x-space-9: 96px;
2027
+ --x-space-10: 128px;
2028
+ --x-section: 80px;
2029
+ --x-fs-display: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
2030
+ --x-fs-h1: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
2031
+ --x-fs-h2: clamp(1.5rem, 1.3rem + 0.7vw, 2rem);
2032
+ --x-fs-h3: 1.25rem;
2033
+ --x-fs-lead: 1.25rem;
2034
+ --x-fs-body: 1.0625rem;
2035
+ --x-fs-ui: 1rem;
2036
+ --x-fs-small: 0.875rem;
2037
+ --x-fs-label: 0.8125rem;
2038
+ --x-control-sm: 36px;
2039
+ --x-control-md: 44px;
2040
+ --x-control-lg: 52px;
2041
+ --x-row: 48px;
2042
+ --x-focus-width: 2px;
2043
+ --x-focus-offset: 2px;
2044
+ --x-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
2045
+ --x-duration: 150ms;
2046
+ }
2047
+ @media (min-width: 640px) {
2048
+ :root {
2049
+ --x-gap: 24px;
2050
+ --x-gutter: 24px;
2051
+ --x-section: 128px;
2052
+ }
2053
+ }
2054
+ @media (min-width: 1024px) {
2055
+ :root {
2056
+ --x-gutter: 32px;
2057
+ }
2058
+ }
2059
+ :root {
2060
+ scrollbar-gutter: stable;
2061
+ }
2062
+ :root,
2063
+ [data-x-theme] {
2064
+ color-scheme: dark;
2065
+ font-family: var(--x-font-body);
2066
+ line-height: 1.65;
2067
+ color: var(--x-color-text);
2068
+ background: var(--x-color-bg);
2069
+ -webkit-font-smoothing: antialiased;
2070
+ text-rendering: optimizelegibility;
2071
+ }
2072
+ body,
2073
+ [data-x-theme]:not(:root) {
2074
+ font-size: var(--x-fs-body);
2075
+ }
2076
+ h1,
2077
+ h2,
2078
+ h3,
2079
+ h4 {
2080
+ font-family: var(--x-font-heading);
2081
+ font-weight: 600;
2082
+ letter-spacing: var(--x-track-heading);
2083
+ text-wrap: balance;
2084
+ color: var(--x-color-text);
2085
+ }
2086
+ h1 {
2087
+ font-size: var(--x-fs-h1);
2088
+ line-height: 1.15;
2089
+ }
2090
+ h2 {
2091
+ font-size: var(--x-fs-h2);
2092
+ line-height: 1.2;
2093
+ }
2094
+ h3 {
2095
+ font-size: var(--x-fs-h3);
2096
+ line-height: 1.3;
2097
+ }
2098
+ h4 {
2099
+ font-size: var(--x-fs-ui);
2100
+ line-height: 1.4;
2101
+ }
2102
+ p {
2103
+ text-wrap: pretty;
2104
+ }
2105
+ a {
2106
+ color: var(--x-color-accent);
2107
+ text-decoration-thickness: 1px;
2108
+ text-underline-offset: 0.2em;
2109
+ }
2110
+ a:where(:hover) {
2111
+ color: var(--x-color-accent-strong);
2112
+ }
2113
+ small {
2114
+ font-size: var(--x-fs-small);
2115
+ }
2116
+ code,
2117
+ kbd,
2118
+ samp,
2119
+ pre {
2120
+ font-family: var(--x-font-mono);
2121
+ font-size: 0.9em;
2122
+ }
2123
+ hr {
2124
+ border: 0;
2125
+ border-top: 1px solid var(--x-color-line);
2126
+ }
2127
+ ::selection {
2128
+ color: var(--x-color-on-accent);
2129
+ background: var(--x-color-accent);
2130
+ }
2131
+ :focus-visible {
2132
+ outline: var(--x-focus-width) solid var(--x-color-focus);
2133
+ outline-offset: var(--x-focus-offset);
2134
+ }
2135
+ .x-display {
2136
+ font-family: var(--x-font-display);
2137
+ font-size: var(--x-fs-display);
2138
+ font-weight: 600;
2139
+ line-height: 1.1;
2140
+ letter-spacing: var(--x-track-display);
2141
+ text-wrap: balance;
2142
+ }
2143
+ .x-lead {
2144
+ font-size: var(--x-fs-lead);
2145
+ line-height: 1.55;
2146
+ color: var(--x-color-text-muted);
2147
+ }
2148
+ .x-small {
2149
+ font-size: var(--x-fs-small);
2150
+ line-height: 1.5;
2151
+ }
2152
+ .x-label {
2153
+ font-family: var(--x-font-ui);
2154
+ font-size: var(--x-fs-label);
2155
+ font-weight: 600;
2156
+ line-height: 1.3;
2157
+ letter-spacing: var(--x-track-label);
2158
+ text-transform: uppercase;
2159
+ }
2160
+ .x-muted {
2161
+ color: var(--x-color-text-muted);
2162
+ }
2163
+ }
2164
+ @layer x.theme {
2165
+ :where(:root:not([data-x-theme])),
2166
+ [data-x-theme=eve-online] {
2167
+ --x-font-display: 'Oxanium Variable', 'Oxanium', system-ui, sans-serif;
2168
+ --x-font-heading: var(--x-font-display);
2169
+ --x-font-body: 'IBM Plex Sans Variable', 'IBM Plex Sans', system-ui, sans-serif;
2170
+ --x-font-ui: var(--x-font-display);
2171
+ --x-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
2172
+ --x-track-display: 0.01em;
2173
+ --x-track-heading: 0.01em;
2174
+ --x-track-label: 0.16em;
2175
+ --x-track-caps: 0.14em;
2176
+ --x-color-bg: #05080c;
2177
+ --x-color-bg-sunk: #030507;
2178
+ --x-color-surface: #0c141b;
2179
+ --x-color-surface-2: #111b24;
2180
+ --x-color-surface-3: #16232e;
2181
+ --x-color-glass: rgb(10 17 24 / 72%);
2182
+ --x-color-glass-edge: rgb(77 220 242 / 14%);
2183
+ --x-color-line: #17252f;
2184
+ --x-color-line-strong: #2a4352;
2185
+ --x-color-field-edge: #5e7f8f;
2186
+ --x-color-rule: #2a8799;
2187
+ --x-color-text: #dce8ee;
2188
+ --x-color-text-muted: #a9bcc6;
2189
+ --x-color-text-faint: #8aa0ad;
2190
+ --x-color-accent: #4ddcf2;
2191
+ --x-color-accent-strong: #9aefff;
2192
+ --x-color-accent-edge: #2a8799;
2193
+ --x-color-accent-wash: rgb(77 220 242 / 8%);
2194
+ --x-color-on-accent: #03161b;
2195
+ --x-color-focus: #9aefff;
2196
+ --x-color-info: #9aefff;
2197
+ --x-color-on-info: #03161b;
2198
+ --x-color-info-wash: rgb(77 220 242 / 8%);
2199
+ --x-color-success: #5fdd8d;
2200
+ --x-color-on-success: #0e2117;
2201
+ --x-color-success-wash: rgb(95 221 141 / 9%);
2202
+ --x-color-warning: #f2a93b;
2203
+ --x-color-on-warning: #211a0e;
2204
+ --x-color-warning-wash: rgb(242 169 59 / 9%);
2205
+ --x-color-danger: #ff6f61;
2206
+ --x-color-on-danger: #26120f;
2207
+ --x-color-danger-wash: rgb(255 111 97 / 9%);
2208
+ --x-color-accent-fill: #0d2129;
2209
+ --x-color-glow: rgb(77 220 242 / 45%);
2210
+ --x-color-rim: #bff4ff;
2211
+ --x-color-flare: #ffe7c2;
2212
+ --x-radius: 0px;
2213
+ --x-cut-sm: 6px;
2214
+ --x-cut-md: 12px;
2215
+ --x-cut-lg: 20px;
2216
+ --x-bracket: 12px;
2217
+ --x-blur: blur(14px) saturate(140%);
2218
+ --x-shadow: 0 30px 60px -30px rgb(0 0 0 / 80%);
2219
+ }
2220
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-alert {
2221
+ --x-alert-bg: linear-gradient(90deg, var(--x-alert-wash), transparent 80%), var(--x-color-surface);
2222
+ }
2223
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-alert--info {
2224
+ --x-alert-tone: var(--x-color-accent);
2225
+ }
2226
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-alert__body {
2227
+ font-family: var(--x-font-body);
2228
+ }
2229
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-alert--framed {
2230
+ border: 1px solid color-mix(in srgb, var(--x-alert-tone) 35%, var(--x-color-line));
2231
+ border-left: 3px solid var(--x-alert-tone);
2232
+ }
2233
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-alert--framed .x-alert__title {
2234
+ font-size: var(--x-fs-label);
2235
+ line-height: 1.3;
2236
+ letter-spacing: var(--x-track-label);
2237
+ text-transform: uppercase;
2238
+ color: var(--x-alert-tone);
2239
+ }
2240
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-avatar {
2241
+ --x-avatar-scale: 0.34;
2242
+ overflow: visible;
2243
+ color: var(--x-color-accent);
2244
+ background: none;
2245
+ }
2246
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-avatar::before, :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-avatar::after {
2247
+ content: "";
2248
+ position: absolute;
2249
+ inset: 0;
2250
+ pointer-events: none;
2251
+ }
2252
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-avatar::before {
2253
+ z-index: -1;
2254
+ background: radial-gradient(circle at 50% 40%, color-mix(in oklab, var(--x-color-accent) 16%, var(--x-color-surface)) 0, var(--x-color-bg-sunk) 60%);
2255
+ clip-path: polygon(50% 4%, 90% 27%, 90% 73%, 50% 96%, 10% 73%, 10% 27%);
2256
+ }
2257
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-avatar::after {
2258
+ background: currentcolor;
2259
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000'%3E%3Cpath d='M50 4 90 27v46L50 96 10 73V27z' stroke-width='1.2'/%3E%3Cpath d='M50 14 81 32v36L50 86 19 68V32z' stroke-opacity='.3' stroke-dasharray='2 3'/%3E%3Cpath d='M50 4v6M50 90v6M10 27l5 3M90 27l-5 3M10 73l5-3M90 73l-5-3' stroke-width='1.2'/%3E%3C/svg%3E") center/100% 100% no-repeat;
2260
+ }
2261
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-avatar__image {
2262
+ clip-path: polygon(50% 4%, 90% 27%, 90% 73%, 50% 96%, 10% 73%, 10% 27%);
2263
+ }
2264
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-avatar--xl {
2265
+ --x-avatar-size: 148px;
2266
+ }
2267
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-badge {
2268
+ --x-badge-default: var(--x-color-text-faint);
2269
+ }
2270
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-badge:is(.x-badge--info, .x-badge--success, .x-badge--warning, .x-badge--danger)::before {
2271
+ box-shadow: 0 0 6px var(--x-badge-tone);
2272
+ }
2273
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-breadcrumbs__item {
2274
+ font-size: var(--x-fs-small);
2275
+ line-height: 1.5;
2276
+ }
2277
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-breadcrumbs__item + .x-breadcrumbs__item::before {
2278
+ content: "/";
2279
+ }
2280
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button {
2281
+ --x-cut: 8px;
2282
+ --x-button-tone-hi: color-mix(in oklab, var(--x-button-tone) 55%, white);
2283
+ --x-button-tint: color-mix(in oklab, var(--x-button-tone) 12%, var(--x-color-bg));
2284
+ --x-button-tint-hi: color-mix(in oklab, var(--x-button-tone) 20%, var(--x-color-bg));
2285
+ --x-button-edge: var(--x-button-tone);
2286
+ position: relative;
2287
+ isolation: isolate;
2288
+ background: none;
2289
+ border-color: transparent;
2290
+ }
2291
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button::before, :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button::after {
2292
+ content: "";
2293
+ position: absolute;
2294
+ inset: -1px;
2295
+ z-index: -1;
2296
+ pointer-events: none;
2297
+ transition: background var(--x-duration) var(--x-ease);
2298
+ }
2299
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button::before {
2300
+ background: var(--x-button-bg);
2301
+ clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut));
2302
+ }
2303
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button::after {
2304
+ background: var(--x-button-border, var(--x-button-bg));
2305
+ clip-path: polygon(evenodd, var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut), var(--x-cut) 0, calc(var(--x-cut) + 0.4142135624px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--x-cut) - 0.4142135624px), calc(100% - var(--x-cut) - 0.4142135624px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--x-cut) + 0.4142135624px), calc(var(--x-cut) + 0.4142135624px) 1px);
2306
+ }
2307
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button:focus-visible {
2308
+ outline: none;
2309
+ }
2310
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button:focus-visible::after {
2311
+ inset: -5px;
2312
+ background: var(--x-color-focus);
2313
+ clip-path: polygon(evenodd, calc(var(--x-cut) + 2.9289321881px) 0, 100% 0, 100% calc(100% - calc(var(--x-cut) + 2.9289321881px)), calc(100% - calc(var(--x-cut) + 2.9289321881px)) 100%, 0 100%, 0 calc(var(--x-cut) + 2.9289321881px), calc(var(--x-cut) + 2.9289321881px) 0, calc(calc(var(--x-cut) + 2.9289321881px) + 0.8284271247px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - calc(var(--x-cut) + 2.9289321881px) - 0.8284271247px), calc(100% - calc(var(--x-cut) + 2.9289321881px) - 0.8284271247px) calc(100% - 2px), 2px calc(100% - 2px), 2px calc(calc(var(--x-cut) + 2.9289321881px) + 0.8284271247px), calc(calc(var(--x-cut) + 2.9289321881px) + 0.8284271247px) 2px);
2314
+ }
2315
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button:not(.x-button--danger, .x-button--warning, .x-button--success) {
2316
+ --x-button-tone-hi: var(--x-color-accent-strong);
2317
+ --x-button-tint: var(--x-color-accent-fill);
2318
+ --x-button-tint-hi: var(--x-color-accent-fill);
2319
+ --x-button-edge: var(--x-color-accent-edge);
2320
+ }
2321
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button--primary {
2322
+ --x-button-bg: linear-gradient(180deg, var(--x-button-tone-hi) -40%, var(--x-button-tone) 60%);
2323
+ --x-button-border: var(--x-button-tone);
2324
+ }
2325
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button--primary:hover:not(:disabled, [aria-disabled=true]) {
2326
+ filter: brightness(1.12);
2327
+ }
2328
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button--secondary {
2329
+ --x-button-fg: var(--x-button-tone);
2330
+ --x-button-bg: var(--x-button-tint);
2331
+ --x-button-border: var(--x-button-edge);
2332
+ }
2333
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button--secondary:hover:not(:disabled, [aria-disabled=true]) {
2334
+ --x-button-fg: var(--x-button-tone-hi);
2335
+ --x-button-bg: var(--x-button-tint-hi);
2336
+ --x-button-border: var(--x-button-tone);
2337
+ }
2338
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button--tertiary {
2339
+ --x-button-fg: var(--x-button-quiet-fg);
2340
+ --x-button-bg: transparent;
2341
+ --x-button-border: transparent;
2342
+ padding: 0 var(--x-space-3);
2343
+ }
2344
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button--tertiary:hover:not(:disabled, [aria-disabled=true]) {
2345
+ --x-button-fg: var(--x-button-tone);
2346
+ --x-button-bg: color-mix(in oklab, var(--x-button-tone) 8%, transparent);
2347
+ }
2348
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button:not(.x-button--danger, .x-button--warning, .x-button--success).x-button--tertiary {
2349
+ --x-button-quiet-fg: var(--x-color-accent);
2350
+ }
2351
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button:not(.x-button--danger, .x-button--warning, .x-button--success).x-button--tertiary:hover:not(:disabled, [aria-disabled=true]) {
2352
+ --x-button-fg: var(--x-color-accent-strong);
2353
+ }
2354
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button--tertiary .x-button__label::before {
2355
+ content: "";
2356
+ display: inline-block;
2357
+ width: 0.4em;
2358
+ height: 0.4em;
2359
+ margin-inline-end: 0.6em;
2360
+ vertical-align: 0.12em;
2361
+ border-block-start: 1.5px solid currentcolor;
2362
+ border-inline-end: 1.5px solid currentcolor;
2363
+ transform: rotate(45deg);
2364
+ transition: transform var(--x-duration) var(--x-ease);
2365
+ }
2366
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button--tertiary:hover:not(:disabled, [aria-disabled=true]) .x-button__label::before {
2367
+ transform: translateX(2px) rotate(45deg);
2368
+ }
2369
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button--sm {
2370
+ --x-cut: 6px;
2371
+ padding: 0 var(--x-space-3);
2372
+ }
2373
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button--lg {
2374
+ --x-cut: 10px;
2375
+ }
2376
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button:disabled,
2377
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button[aria-disabled=true]:not(.x-button--loading) {
2378
+ --x-button-fg: var(--x-color-text-faint);
2379
+ --x-button-bg: var(--x-color-surface-2);
2380
+ --x-button-border: var(--x-color-line-strong);
2381
+ opacity: 1;
2382
+ filter: none;
2383
+ }
2384
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button--tertiary:disabled,
2385
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-button--tertiary[aria-disabled=true]:not(.x-button--loading) {
2386
+ --x-button-bg: transparent;
2387
+ --x-button-border: transparent;
2388
+ }
2389
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card {
2390
+ --x-card-cut: var(--x-cut-md);
2391
+ --x-card-edge: var(--x-color-line-strong);
2392
+ --x-card-fill: linear-gradient(180deg, var(--x-color-surface-2), var(--x-color-surface) 60%);
2393
+ --x-card-foot-style: dashed;
2394
+ --x-card-index-style: decimal-leading-zero;
2395
+ --x-card-index-prefix: 'T-';
2396
+ isolation: isolate;
2397
+ }
2398
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card::before, :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card::after {
2399
+ content: "";
2400
+ position: absolute;
2401
+ z-index: -1;
2402
+ clip-path: polygon(var(--x-card-cut) 0, 100% 0, 100% calc(100% - var(--x-card-cut)), calc(100% - var(--x-card-cut)) 100%, 0 100%, 0 var(--x-card-cut));
2403
+ pointer-events: none;
2404
+ transition: background var(--x-duration) var(--x-ease);
2405
+ }
2406
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card::before {
2407
+ inset: 0;
2408
+ background: var(--x-card-edge);
2409
+ }
2410
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card::after {
2411
+ inset: 1px;
2412
+ background: var(--x-card-fill);
2413
+ }
2414
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card--link:hover {
2415
+ --x-card-edge: linear-gradient(
2416
+ 135deg,
2417
+ var(--x-color-accent),
2418
+ var(--x-color-accent-edge) 40%,
2419
+ var(--x-color-line-strong)
2420
+ );
2421
+ --x-card-fill: linear-gradient(180deg, var(--x-color-surface-3), var(--x-color-surface) 70%);
2422
+ }
2423
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card--featured {
2424
+ --x-card-edge: linear-gradient(
2425
+ 135deg,
2426
+ var(--x-color-accent),
2427
+ var(--x-color-accent-edge) 25%,
2428
+ var(--x-color-line-strong) 50%
2429
+ );
2430
+ }
2431
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card--featured::after {
2432
+ --b: var(--x-color-accent);
2433
+ background: linear-gradient(var(--b), var(--b)) top right/var(--x-bracket) 2px no-repeat, linear-gradient(var(--b), var(--b)) top right/2px var(--x-bracket) no-repeat, linear-gradient(var(--b), var(--b)) bottom left/var(--x-bracket) 2px no-repeat, linear-gradient(var(--b), var(--b)) bottom left/2px var(--x-bracket) no-repeat, var(--x-card-fill);
2434
+ }
2435
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card--link:has(.x-card__link:focus-visible) {
2436
+ outline: none;
2437
+ }
2438
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card--link:has(.x-card__link:focus-visible)::before {
2439
+ inset: -3px;
2440
+ background: var(--x-color-focus);
2441
+ clip-path: polygon(evenodd, calc(var(--x-card-cut) + 1.7573593129px) 0, 100% 0, 100% calc(100% - calc(var(--x-card-cut) + 1.7573593129px)), calc(100% - calc(var(--x-card-cut) + 1.7573593129px)) 100%, 0 100%, 0 calc(var(--x-card-cut) + 1.7573593129px), calc(var(--x-card-cut) + 1.7573593129px) 0, calc(calc(var(--x-card-cut) + 1.7573593129px) + 0.8284271247px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - calc(var(--x-card-cut) + 1.7573593129px) - 0.8284271247px), calc(100% - calc(var(--x-card-cut) + 1.7573593129px) - 0.8284271247px) calc(100% - 2px), 2px calc(100% - 2px), 2px calc(calc(var(--x-card-cut) + 1.7573593129px) + 0.8284271247px), calc(calc(var(--x-card-cut) + 1.7573593129px) + 0.8284271247px) 2px);
2442
+ }
2443
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card__index {
2444
+ font-family: var(--x-font-mono);
2445
+ }
2446
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card__foot-start, :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card__foot-end {
2447
+ font-family: var(--x-font-display);
2448
+ font-size: var(--x-fs-label);
2449
+ font-weight: 600;
2450
+ line-height: 1.3;
2451
+ letter-spacing: var(--x-track-label);
2452
+ text-transform: uppercase;
2453
+ }
2454
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card__foot-start {
2455
+ color: var(--x-color-text-faint);
2456
+ }
2457
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card__foot-end {
2458
+ color: var(--x-color-accent);
2459
+ transition: transform var(--x-duration) var(--x-ease);
2460
+ }
2461
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-card--link:hover .x-card__foot-end {
2462
+ transform: translateX(3px);
2463
+ }
2464
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-description-list {
2465
+ --x-description-list-term-font: var(--x-font-display);
2466
+ --x-description-list-term-fs: var(--x-fs-label);
2467
+ --x-description-list-term-weight: 600;
2468
+ --x-description-list-term-tracking: var(--x-track-label);
2469
+ --x-description-list-term-case: uppercase;
2470
+ --x-description-list-term-color: var(--x-color-text-faint);
2471
+ --x-description-list-value-font: var(--x-font-mono);
2472
+ --x-description-list-value-fs: var(--x-fs-small);
2473
+ }
2474
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-description-list a {
2475
+ color: var(--x-color-accent);
2476
+ }
2477
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-description-list--columns {
2478
+ --x-description-list-value-font: var(--x-font-body);
2479
+ --x-description-list-value-fs: var(--x-fs-ui);
2480
+ --x-description-list-value-color: var(--x-color-text-muted);
2481
+ }
2482
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-divider--ornament,
2483
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-divider--label {
2484
+ --x-divider-line: var(--x-color-line-strong);
2485
+ --x-divider-gap: 0;
2486
+ }
2487
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-divider--ornament::before,
2488
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-divider--label::before {
2489
+ background: linear-gradient(var(--x-color-accent), var(--x-color-accent)) right/32px 1px no-repeat, linear-gradient(to right, transparent, var(--x-divider-line) 20%);
2490
+ }
2491
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-divider--ornament::after,
2492
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-divider--label::after {
2493
+ background: linear-gradient(var(--x-color-accent), var(--x-color-accent)) left/32px 1px no-repeat, linear-gradient(to left, transparent, var(--x-divider-line) 20%);
2494
+ }
2495
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-divider__mark {
2496
+ width: 8px;
2497
+ height: 8px;
2498
+ margin-inline: 4px;
2499
+ border: 1px solid var(--x-color-accent);
2500
+ rotate: 45deg;
2501
+ box-shadow: 0 0 6px var(--x-color-glow);
2502
+ }
2503
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-divider__label {
2504
+ padding-inline: var(--x-space-3);
2505
+ color: var(--x-color-text-faint);
2506
+ }
2507
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-empty-state {
2508
+ background: var(--x-color-surface);
2509
+ }
2510
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-field,
2511
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-choice-group,
2512
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-input,
2513
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-input-wrap,
2514
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-textarea,
2515
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-select,
2516
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-checkbox,
2517
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-radio,
2518
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-switch {
2519
+ --x-field-font: var(--x-font-body);
2520
+ --x-field-bg: var(--x-color-surface);
2521
+ --x-field-glow: 0 0 0 1px var(--x-color-accent), 0 0 16px -2px var(--x-color-glow);
2522
+ --x-field-hatch: repeating-linear-gradient(135deg, var(--x-color-surface) 0 6px, var(--x-color-surface-2) 6px 7px);
2523
+ --x-textarea-min: 144px;
2524
+ --x-check-ink-glow: 0 0 8px var(--x-color-glow);
2525
+ }
2526
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-switch {
2527
+ --x-check-on-bg: var(--x-color-accent-fill);
2528
+ }
2529
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-field__error {
2530
+ font-weight: 400;
2531
+ }
2532
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-input:disabled,
2533
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-textarea:disabled,
2534
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-select:disabled {
2535
+ background-color: var(--x-color-surface);
2536
+ background-image: var(--x-field-hatch);
2537
+ background-size: auto;
2538
+ }
2539
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-checkbox__input:disabled,
2540
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-radio__input:disabled,
2541
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-switch__input:disabled {
2542
+ opacity: 0.6;
2543
+ }
2544
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-checkbox__input:disabled::before,
2545
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-radio__input:disabled::before,
2546
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-switch__input:disabled::before {
2547
+ box-shadow: none;
2548
+ }
2549
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-radio__input {
2550
+ --x-check-size: 16px;
2551
+ margin: 0 2px;
2552
+ border-radius: 0;
2553
+ transform: rotate(45deg);
2554
+ }
2555
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-radio__input::before {
2556
+ border-radius: 0;
2557
+ transform: none;
2558
+ }
2559
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-filters {
2560
+ --x-filters-switch-font: var(--x-font-display);
2561
+ --x-filters-toggle-bg: var(--x-color-surface);
2562
+ --x-filters-option-weight: 600;
2563
+ --x-filters-option-bg: var(--x-color-surface);
2564
+ --x-filters-option-hover: var(--x-color-accent);
2565
+ --x-filters-option-on-color: var(--x-color-accent);
2566
+ --x-filters-option-on-bg: var(--x-color-accent-fill);
2567
+ --x-filters-option-on-shadow: inset 0 -2px 0 var(--x-color-accent);
2568
+ }
2569
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-footer {
2570
+ padding-block: var(--x-space-8) var(--x-space-9);
2571
+ background: var(--x-color-surface);
2572
+ }
2573
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-footer__brand {
2574
+ font-family: var(--x-font-display);
2575
+ font-size: var(--x-fs-ui);
2576
+ font-weight: 700;
2577
+ letter-spacing: 0.08em;
2578
+ text-transform: uppercase;
2579
+ color: var(--x-color-text);
2580
+ }
2581
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-footer__brand:hover {
2582
+ color: var(--x-color-text);
2583
+ }
2584
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-footer__brand svg {
2585
+ color: var(--x-color-accent);
2586
+ }
2587
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-footer__note {
2588
+ color: var(--x-color-text-faint);
2589
+ }
2590
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-footer__title {
2591
+ font-family: var(--x-font-ui);
2592
+ font-weight: 600;
2593
+ letter-spacing: var(--x-track-label);
2594
+ text-transform: uppercase;
2595
+ color: var(--x-color-text-faint);
2596
+ }
2597
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-footer__link {
2598
+ font-size: var(--x-fs-ui);
2599
+ color: var(--x-color-text-muted);
2600
+ }
2601
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-footer__link:hover {
2602
+ color: var(--x-color-accent);
2603
+ text-decoration: none;
2604
+ }
2605
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-footer--row {
2606
+ padding-block: var(--x-space-7) var(--x-space-8);
2607
+ }
2608
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-header {
2609
+ --x-header-bg: color-mix(in oklab, var(--x-color-bg) 88%, transparent);
2610
+ box-shadow: inset 0 -1px 0 var(--x-color-line);
2611
+ backdrop-filter: blur(10px);
2612
+ }
2613
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-header__brand {
2614
+ font-family: var(--x-font-display);
2615
+ font-size: var(--x-fs-ui);
2616
+ font-weight: 700;
2617
+ letter-spacing: 0.08em;
2618
+ text-transform: uppercase;
2619
+ color: var(--x-color-text);
2620
+ }
2621
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-header__brand:hover {
2622
+ color: var(--x-color-text);
2623
+ }
2624
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-header__brand svg {
2625
+ color: var(--x-color-accent);
2626
+ }
2627
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-header__link {
2628
+ padding: 0 14px;
2629
+ font-family: var(--x-font-ui);
2630
+ font-size: var(--x-fs-label);
2631
+ font-weight: 600;
2632
+ line-height: 1.3;
2633
+ letter-spacing: var(--x-track-label);
2634
+ text-transform: uppercase;
2635
+ color: var(--x-color-text-muted);
2636
+ transition: color var(--x-duration) var(--x-ease);
2637
+ }
2638
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-header__link:hover {
2639
+ color: var(--x-color-text);
2640
+ }
2641
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-header__link[aria-current=page] {
2642
+ color: var(--x-color-accent);
2643
+ }
2644
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-header__link[aria-current=page]::after {
2645
+ content: "";
2646
+ position: absolute;
2647
+ right: 14px;
2648
+ bottom: 4px;
2649
+ left: 14px;
2650
+ height: 2px;
2651
+ background: var(--x-color-accent);
2652
+ box-shadow: 0 0 10px var(--x-color-glow);
2653
+ }
2654
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-header__toggle {
2655
+ --x-button-quiet-fg: var(--x-color-text-muted);
2656
+ }
2657
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-header__panel {
2658
+ background: var(--x-color-surface-2);
2659
+ border: 1px solid var(--x-color-line-strong);
2660
+ }
2661
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-header__panel .x-header__link[aria-current=page]::after {
2662
+ top: 12px;
2663
+ right: auto;
2664
+ bottom: 12px;
2665
+ left: 0;
2666
+ width: 2px;
2667
+ height: auto;
2668
+ }
2669
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-header--stacked .x-header__panel {
2670
+ background: none;
2671
+ border: 0;
2672
+ }
2673
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-icon {
2674
+ --x-icon-cap: square;
2675
+ --x-icon-join: miter;
2676
+ }
2677
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-section-head {
2678
+ position: relative;
2679
+ padding-bottom: var(--x-space-4);
2680
+ border-bottom: 1px solid var(--x-color-line-strong);
2681
+ }
2682
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-section-head::after {
2683
+ content: "";
2684
+ position: absolute;
2685
+ bottom: -1px;
2686
+ left: 0;
2687
+ width: 64px;
2688
+ height: 1px;
2689
+ background: var(--x-color-accent);
2690
+ box-shadow: 0 0 8px var(--x-color-glow);
2691
+ }
2692
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-section-head::before {
2693
+ content: "";
2694
+ position: absolute;
2695
+ top: 100%;
2696
+ right: 0;
2697
+ left: 0;
2698
+ height: 5px;
2699
+ pointer-events: none;
2700
+ background: repeating-linear-gradient(90deg, var(--x-color-line-strong) 0 1px, transparent 1px 8px) 0 0/100% 3px no-repeat, repeating-linear-gradient(90deg, var(--x-color-accent-edge) 0 1px, transparent 1px 64px) 0 0/100% 5px no-repeat;
2701
+ mask-image: linear-gradient(90deg, #000 20%, transparent 70%);
2702
+ }
2703
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-section-head__eyebrow {
2704
+ display: inline-flex;
2705
+ gap: var(--x-space-2);
2706
+ align-items: center;
2707
+ }
2708
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-section-head__eyebrow::before {
2709
+ content: "";
2710
+ width: 18px;
2711
+ height: 1px;
2712
+ background: currentcolor;
2713
+ box-shadow: 0 0 6px var(--x-color-glow);
2714
+ }
2715
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-page-head {
2716
+ position: relative;
2717
+ padding-bottom: var(--x-space-5);
2718
+ border-bottom: 1px solid var(--x-color-line-strong);
2719
+ }
2720
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-page-head::after {
2721
+ content: "";
2722
+ position: absolute;
2723
+ bottom: -1px;
2724
+ left: 0;
2725
+ width: 96px;
2726
+ height: 1px;
2727
+ background: var(--x-color-accent);
2728
+ box-shadow: 0 0 8px var(--x-color-glow);
2729
+ }
2730
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-page-head--center::after {
2731
+ left: calc(50% - 48px);
2732
+ }
2733
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-page-head__eyebrow {
2734
+ display: inline-flex;
2735
+ gap: var(--x-space-2);
2736
+ align-items: center;
2737
+ }
2738
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-page-head__eyebrow::before {
2739
+ content: "";
2740
+ width: 18px;
2741
+ height: 1px;
2742
+ background: currentcolor;
2743
+ box-shadow: 0 0 6px var(--x-color-glow);
2744
+ }
2745
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-page-head__title {
2746
+ font-weight: 600;
2747
+ letter-spacing: var(--x-track-display);
2748
+ }
2749
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-page-head__meta {
2750
+ font-family: var(--x-font-ui);
2751
+ }
2752
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-pagination__list {
2753
+ gap: 6px;
2754
+ }
2755
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-pagination__link {
2756
+ font-family: var(--x-font-mono);
2757
+ }
2758
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-pagination__link:not([aria-current=page]) {
2759
+ background: var(--x-color-surface);
2760
+ }
2761
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-pagination__link[aria-current=page] {
2762
+ box-shadow: 0 0 12px var(--x-color-glow);
2763
+ }
2764
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-pagination__link--edge {
2765
+ font-family: var(--x-font-display);
2766
+ font-weight: 600;
2767
+ letter-spacing: var(--x-track-label);
2768
+ }
2769
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-pagination__link--disabled {
2770
+ border-color: var(--x-color-line);
2771
+ }
2772
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-pagination__gap,
2773
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-pagination__summary {
2774
+ font-family: var(--x-font-mono);
2775
+ }
2776
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-pagination__gap {
2777
+ color: var(--x-color-text-faint);
2778
+ }
2779
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-panel {
2780
+ --x-surface-cut: var(--x-cut-md);
2781
+ --x-surface-edge: var(--x-color-line);
2782
+ --x-surface-fill: var(--x-color-surface);
2783
+ --x-panel-lit: linear-gradient(180deg, var(--x-color-surface-2), var(--x-color-surface) 60%);
2784
+ isolation: isolate;
2785
+ }
2786
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-panel::before, :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-panel::after {
2787
+ content: "";
2788
+ position: absolute;
2789
+ inset: 0;
2790
+ z-index: -1;
2791
+ pointer-events: none;
2792
+ }
2793
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-panel::before {
2794
+ background: var(--x-surface-fill);
2795
+ clip-path: polygon(var(--x-surface-cut) 0, 100% 0, 100% calc(100% - var(--x-surface-cut)), calc(100% - var(--x-surface-cut)) 100%, 0 100%, 0 var(--x-surface-cut));
2796
+ }
2797
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-panel::after {
2798
+ background: var(--x-surface-edge);
2799
+ clip-path: polygon(evenodd, var(--x-surface-cut) 0, 100% 0, 100% calc(100% - var(--x-surface-cut)), calc(100% - var(--x-surface-cut)) 100%, 0 100%, 0 var(--x-surface-cut), var(--x-surface-cut) 0, calc(var(--x-surface-cut) + 0.4142135624px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--x-surface-cut) - 0.4142135624px), calc(100% - var(--x-surface-cut) - 0.4142135624px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--x-surface-cut) + 0.4142135624px), calc(var(--x-surface-cut) + 0.4142135624px) 1px);
2800
+ }
2801
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-panel--pad-sm {
2802
+ --x-surface-cut: var(--x-cut-sm);
2803
+ }
2804
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-panel--pad-lg, :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-panel--pad-xl {
2805
+ --x-surface-cut: var(--x-cut-lg);
2806
+ }
2807
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-panel--raised {
2808
+ --x-surface-edge: var(--x-color-line-strong);
2809
+ --x-surface-fill: linear-gradient(180deg, var(--x-color-surface-3), var(--x-color-surface-2) 60%);
2810
+ box-shadow: var(--x-shadow);
2811
+ }
2812
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-panel--accent {
2813
+ --x-surface-edge: var(--x-color-accent-edge);
2814
+ --x-surface-fill:
2815
+ linear-gradient(var(--x-color-accent), var(--x-color-accent)) top / 100% 2px no-repeat, var(--x-panel-lit);
2816
+ }
2817
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-panel--callout {
2818
+ --x-surface-edge: var(--x-color-accent);
2819
+ --x-surface-fill:
2820
+ linear-gradient(var(--x-color-accent), var(--x-color-accent)) top / 100% 2px no-repeat,
2821
+ linear-gradient(
2822
+ 180deg,
2823
+ color-mix(in srgb, var(--x-color-accent) 16%, var(--x-color-bg)),
2824
+ var(--x-color-accent-fill) 60%
2825
+ );
2826
+ box-shadow: var(--x-shadow);
2827
+ }
2828
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-panel:focus-visible {
2829
+ outline: none;
2830
+ }
2831
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-panel:focus-visible::after {
2832
+ inset: -4px;
2833
+ background: var(--x-color-focus);
2834
+ clip-path: polygon(evenodd, calc(var(--x-surface-cut) + 2.3431457505px) 0, 100% 0, 100% calc(100% - calc(var(--x-surface-cut) + 2.3431457505px)), calc(100% - calc(var(--x-surface-cut) + 2.3431457505px)) 100%, 0 100%, 0 calc(var(--x-surface-cut) + 2.3431457505px), calc(var(--x-surface-cut) + 2.3431457505px) 0, calc(calc(var(--x-surface-cut) + 2.3431457505px) + 0.8284271247px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - calc(var(--x-surface-cut) + 2.3431457505px) - 0.8284271247px), calc(100% - calc(var(--x-surface-cut) + 2.3431457505px) - 0.8284271247px) calc(100% - 2px), 2px calc(100% - 2px), 2px calc(calc(var(--x-surface-cut) + 2.3431457505px) + 0.8284271247px), calc(calc(var(--x-surface-cut) + 2.3431457505px) + 0.8284271247px) 2px);
2835
+ }
2836
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-panel--marks::before {
2837
+ background: linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) top 1px left 1px/var(--x-bracket) 1px no-repeat, linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) top 1px left 1px/1px var(--x-bracket) no-repeat, linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) top 1px right 1px/var(--x-bracket) 1px no-repeat, linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) top 1px right 1px/1px var(--x-bracket) no-repeat, linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) bottom 1px left 1px/var(--x-bracket) 1px no-repeat, linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) bottom 1px left 1px/1px var(--x-bracket) no-repeat, linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) bottom 1px right 1px/var(--x-bracket) 1px no-repeat, linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) bottom 1px right 1px/1px var(--x-bracket) no-repeat, var(--x-surface-fill);
2838
+ }
2839
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-progress {
2840
+ --x-progress-md: 8px;
2841
+ --x-progress-sm: 6px;
2842
+ --x-progress-segment: 9px;
2843
+ --x-progress-gap: 2px;
2844
+ --x-progress-inset: 1px;
2845
+ }
2846
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-progress--sm {
2847
+ --x-progress-segment: 6px;
2848
+ }
2849
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-progress__track {
2850
+ background: repeating-linear-gradient(90deg, var(--x-color-surface-3) 0 var(--x-progress-segment), var(--x-color-surface) var(--x-progress-segment) calc(var(--x-progress-segment) + var(--x-progress-gap)));
2851
+ background-position: 1px 0;
2852
+ }
2853
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-progress__track::before {
2854
+ content: "";
2855
+ position: absolute;
2856
+ inset-block: 1px;
2857
+ inset-inline-start: 1px;
2858
+ width: calc(var(--x-progress, 0%) - 2px);
2859
+ box-shadow: 0 0 8px color-mix(in srgb, var(--x-progress-end) 55%, transparent);
2860
+ }
2861
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-progress--empty .x-progress__track::before {
2862
+ display: none;
2863
+ }
2864
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-progress__fill {
2865
+ inset-inline-start: 1px;
2866
+ width: calc(var(--x-progress, 0%) - 2px);
2867
+ mask: repeating-linear-gradient(90deg, #000 0 var(--x-progress-segment), transparent var(--x-progress-segment) calc(var(--x-progress-segment) + var(--x-progress-gap)));
2868
+ }
2869
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-progress--indeterminate .x-progress__track::before {
2870
+ display: none;
2871
+ }
2872
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-progress--indeterminate .x-progress__fill {
2873
+ width: 30%;
2874
+ mask: none;
2875
+ box-shadow: 0 0 8px color-mix(in srgb, var(--x-progress-end) 55%, transparent);
2876
+ }
2877
+ @media (prefers-reduced-motion: reduce) {
2878
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-progress--indeterminate .x-progress__fill {
2879
+ width: calc(100% - 2px);
2880
+ }
2881
+ }
2882
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-progress__value {
2883
+ font-family: var(--x-font-mono);
2884
+ }
2885
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose {
2886
+ color: var(--x-color-text-muted);
2887
+ }
2888
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose > :is(h2, h3, h4) {
2889
+ color: var(--x-color-text);
2890
+ }
2891
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(a) {
2892
+ color: var(--x-color-accent);
2893
+ }
2894
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(em) {
2895
+ color: var(--x-color-text);
2896
+ }
2897
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(ul, ol) {
2898
+ padding-left: 0;
2899
+ list-style: none;
2900
+ }
2901
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(ol) {
2902
+ counter-reset: x-item;
2903
+ }
2904
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(ul, ol) > :where(li) {
2905
+ position: relative;
2906
+ padding-left: 2.25rem;
2907
+ }
2908
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(ol) > :where(li)::before {
2909
+ counter-increment: x-item;
2910
+ content: counter(x-item, decimal-leading-zero);
2911
+ position: absolute;
2912
+ top: 0.15em;
2913
+ left: 0;
2914
+ font-family: var(--x-font-mono);
2915
+ font-size: var(--x-fs-small);
2916
+ color: var(--x-color-accent);
2917
+ }
2918
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(ul) > :where(li)::before {
2919
+ content: "";
2920
+ position: absolute;
2921
+ top: 0.68em;
2922
+ left: 6px;
2923
+ width: 6px;
2924
+ height: 6px;
2925
+ border: 1px solid var(--x-color-accent);
2926
+ transform: rotate(45deg);
2927
+ }
2928
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(blockquote) {
2929
+ padding: var(--x-space-5) var(--x-space-5) var(--x-space-5) var(--x-space-6);
2930
+ font-family: var(--x-font-heading);
2931
+ font-size: 1.3125rem;
2932
+ line-height: 1.5;
2933
+ color: var(--x-color-text);
2934
+ background: linear-gradient(90deg, var(--x-color-accent-wash), transparent);
2935
+ border-left: 2px solid var(--x-color-accent);
2936
+ }
2937
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(blockquote)::before {
2938
+ content: "“";
2939
+ position: absolute;
2940
+ top: 8px;
2941
+ left: 10px;
2942
+ font-size: 2rem;
2943
+ line-height: 1;
2944
+ color: var(--x-color-accent);
2945
+ }
2946
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(blockquote) > :is(footer, cite) {
2947
+ font-size: var(--x-fs-label);
2948
+ font-weight: 600;
2949
+ line-height: 1.3;
2950
+ letter-spacing: var(--x-track-label);
2951
+ text-transform: uppercase;
2952
+ color: var(--x-color-text-faint);
2953
+ }
2954
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(blockquote) > :is(footer, cite)::before {
2955
+ content: "// ";
2956
+ color: var(--x-color-accent);
2957
+ }
2958
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(:not(pre)) > :where(code) {
2959
+ padding: 1px 6px;
2960
+ color: var(--x-color-accent-strong);
2961
+ background: var(--x-color-accent-fill);
2962
+ border: 1px solid var(--x-color-line-strong);
2963
+ }
2964
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(hr) {
2965
+ height: 1px;
2966
+ background: linear-gradient(90deg, var(--x-color-accent) 0 64px, var(--x-color-line-strong) 64px);
2967
+ border: 0;
2968
+ }
2969
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(figure:not(.x-code)) > :is(img, svg, video, picture) {
2970
+ padding: var(--x-space-5);
2971
+ color: var(--x-color-accent);
2972
+ background: var(--x-color-surface);
2973
+ clip-path: polygon(var(--x-cut-md) 0, 100% 0, 100% calc(100% - var(--x-cut-md)), calc(100% - var(--x-cut-md)) 100%, 0 100%, 0 var(--x-cut-md));
2974
+ }
2975
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(figcaption) {
2976
+ color: var(--x-color-text-faint);
2977
+ }
2978
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(table:not(.x-table)) {
2979
+ background: var(--x-color-glass);
2980
+ border: 1px solid var(--x-color-line-strong);
2981
+ --x-table-hover: var(--x-color-accent-wash);
2982
+ --x-table-stripe: color-mix(in srgb, var(--x-color-accent) 4%, transparent);
2983
+ color: var(--x-color-text-muted);
2984
+ }
2985
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(table:not(.x-table)) :where(thead th) {
2986
+ font-family: var(--x-font-ui);
2987
+ font-weight: 600;
2988
+ letter-spacing: var(--x-track-label);
2989
+ text-transform: uppercase;
2990
+ color: var(--x-color-accent);
2991
+ background: var(--x-color-surface-3);
2992
+ box-shadow: inset 0 -1px 0 var(--x-color-accent-edge);
2993
+ }
2994
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(table:not(.x-table)) :where(tbody th) {
2995
+ font-weight: 500;
2996
+ color: var(--x-color-text);
2997
+ }
2998
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(table:not(.x-table)) :where(tbody tr:hover) > :first-child {
2999
+ box-shadow: inset 2px 0 0 var(--x-color-accent);
3000
+ }
3001
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-code {
3002
+ --x-code-kw: var(--x-color-accent);
3003
+ --x-code-str: var(--x-color-warning);
3004
+ --x-code-num: var(--x-color-flare);
3005
+ --x-code-fn: var(--x-color-accent-strong);
3006
+ --x-code-com: var(--x-color-text-faint);
3007
+ --x-code-bg: var(--x-color-surface);
3008
+ isolation: isolate;
3009
+ color: var(--x-color-text);
3010
+ }
3011
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-code::before, :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-code::after {
3012
+ content: "";
3013
+ position: absolute;
3014
+ inset: 0;
3015
+ z-index: -1;
3016
+ pointer-events: none;
3017
+ }
3018
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-code::before {
3019
+ background: var(--x-code-bg);
3020
+ clip-path: polygon(var(--x-cut-md) 0, 100% 0, 100% calc(100% - var(--x-cut-md)), calc(100% - var(--x-cut-md)) 100%, 0 100%, 0 var(--x-cut-md));
3021
+ }
3022
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-code::after {
3023
+ z-index: 1;
3024
+ background: var(--x-color-line-strong);
3025
+ clip-path: polygon(evenodd, var(--x-cut-md) 0, 100% 0, 100% calc(100% - var(--x-cut-md)), calc(100% - var(--x-cut-md)) 100%, 0 100%, 0 var(--x-cut-md), var(--x-cut-md) 0, calc(var(--x-cut-md) + 0.4142135624px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--x-cut-md) - 0.4142135624px), calc(100% - var(--x-cut-md) - 0.4142135624px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--x-cut-md) + 0.4142135624px), calc(var(--x-cut-md) + 0.4142135624px) 1px);
3026
+ }
3027
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-code__bar {
3028
+ padding: 10px var(--x-space-4) 10px var(--x-space-5);
3029
+ font-family: var(--x-font-ui);
3030
+ font-weight: 600;
3031
+ letter-spacing: var(--x-track-label);
3032
+ text-transform: uppercase;
3033
+ border-bottom: 1px solid var(--x-color-line-strong);
3034
+ }
3035
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-code__title {
3036
+ color: var(--x-color-accent);
3037
+ }
3038
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-code__lang {
3039
+ color: var(--x-color-text-faint);
3040
+ }
3041
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-code__line::before {
3042
+ content: counter(x-line, decimal-leading-zero);
3043
+ width: 2ch;
3044
+ padding-right: 1em;
3045
+ margin-right: 1em;
3046
+ color: var(--x-color-text-faint);
3047
+ }
3048
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-code__kw {
3049
+ color: var(--x-code-kw);
3050
+ }
3051
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-code__str {
3052
+ color: var(--x-code-str);
3053
+ }
3054
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-code__num {
3055
+ color: var(--x-code-num);
3056
+ }
3057
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-code__fn {
3058
+ color: var(--x-code-fn);
3059
+ }
3060
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-code__com {
3061
+ color: var(--x-code-com);
3062
+ }
3063
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat-group {
3064
+ list-style: none;
3065
+ }
3066
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat {
3067
+ --x-stat-pad: var(--x-space-4);
3068
+ --x-stat-value: var(--x-color-accent);
3069
+ --x-stat-glow: var(--x-color-glow);
3070
+ --x-surface-cut: var(--x-cut-md);
3071
+ --x-surface-edge: var(--x-color-line-strong);
3072
+ --x-surface-fill: linear-gradient(180deg, rgb(154 239 255 / 6%), transparent 40%) var(--x-color-glass);
3073
+ isolation: isolate;
3074
+ }
3075
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat::before, :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat::after {
3076
+ content: "";
3077
+ position: absolute;
3078
+ inset: 0;
3079
+ z-index: -1;
3080
+ pointer-events: none;
3081
+ }
3082
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat::before {
3083
+ background: var(--x-surface-fill);
3084
+ clip-path: polygon(var(--x-surface-cut) 0, 100% 0, 100% calc(100% - var(--x-surface-cut)), calc(100% - var(--x-surface-cut)) 100%, 0 100%, 0 var(--x-surface-cut));
3085
+ }
3086
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat::after {
3087
+ background: var(--x-surface-edge);
3088
+ clip-path: polygon(evenodd, var(--x-surface-cut) 0, 100% 0, 100% calc(100% - var(--x-surface-cut)), calc(100% - var(--x-surface-cut)) 100%, 0 100%, 0 var(--x-surface-cut), var(--x-surface-cut) 0, calc(var(--x-surface-cut) + 0.4142135624px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--x-surface-cut) - 0.4142135624px), calc(100% - var(--x-surface-cut) - 0.4142135624px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--x-surface-cut) + 0.4142135624px), calc(var(--x-surface-cut) + 0.4142135624px) 1px);
3089
+ }
3090
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat::before {
3091
+ background: linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) top 1px left 1px/var(--x-bracket) 1px no-repeat, linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) top 1px left 1px/1px var(--x-bracket) no-repeat, linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) top 1px right 1px/var(--x-bracket) 1px no-repeat, linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) top 1px right 1px/1px var(--x-bracket) no-repeat, linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) bottom 1px left 1px/var(--x-bracket) 1px no-repeat, linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) bottom 1px left 1px/1px var(--x-bracket) no-repeat, linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) bottom 1px right 1px/var(--x-bracket) 1px no-repeat, linear-gradient(color-mix(in srgb, var(--x-color-accent) 80%, transparent), color-mix(in srgb, var(--x-color-accent) 80%, transparent)) bottom 1px right 1px/1px var(--x-bracket) no-repeat, var(--x-surface-fill);
3092
+ }
3093
+ @media (min-width: 640px) {
3094
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat {
3095
+ --x-stat-pad: var(--x-space-5);
3096
+ }
3097
+ }
3098
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat::before {
3099
+ backdrop-filter: var(--x-blur);
3100
+ }
3101
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat__label {
3102
+ font-family: var(--x-font-display);
3103
+ font-size: var(--x-fs-label);
3104
+ font-weight: 600;
3105
+ line-height: 1.3;
3106
+ letter-spacing: var(--x-track-label);
3107
+ text-transform: uppercase;
3108
+ color: var(--x-color-text-faint);
3109
+ }
3110
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat__value {
3111
+ font-family: var(--x-font-display);
3112
+ font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
3113
+ font-weight: 600;
3114
+ line-height: 1;
3115
+ text-shadow: 0 0 18px var(--x-stat-glow);
3116
+ }
3117
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat__unit {
3118
+ text-shadow: none;
3119
+ }
3120
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat--muted {
3121
+ --x-stat-value: var(--x-color-text-muted);
3122
+ --x-stat-glow: transparent;
3123
+ }
3124
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat--success {
3125
+ --x-stat-value: var(--x-color-success);
3126
+ --x-stat-glow: rgb(95 221 141 / 35%);
3127
+ }
3128
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat--warning {
3129
+ --x-stat-value: var(--x-color-warning);
3130
+ --x-stat-glow: rgb(242 169 59 / 40%);
3131
+ }
3132
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat--danger {
3133
+ --x-stat-value: var(--x-color-danger);
3134
+ --x-stat-glow: rgb(255 111 97 / 35%);
3135
+ }
3136
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat-group--framed .x-stat {
3137
+ --x-surface-fill: linear-gradient(180deg, var(--x-color-surface-2), var(--x-color-surface) 60%);
3138
+ }
3139
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-stat-group--framed .x-stat::before {
3140
+ backdrop-filter: none;
3141
+ }
3142
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-table-wrap {
3143
+ background: var(--x-color-glass);
3144
+ border: 1px solid var(--x-color-line-strong);
3145
+ --x-table-cover: color-mix(in srgb, var(--x-color-surface) 50%, var(--x-color-bg));
3146
+ --x-table-edge: color-mix(in srgb, var(--x-color-accent) 30%, transparent);
3147
+ background: var(--x-table-hint), var(--x-color-glass);
3148
+ }
3149
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-table {
3150
+ --x-table-hover: var(--x-color-accent-wash);
3151
+ --x-table-stripe: color-mix(in srgb, var(--x-color-accent) 4%, transparent);
3152
+ color: var(--x-color-text-muted);
3153
+ }
3154
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-table :where(thead th) {
3155
+ font-family: var(--x-font-ui);
3156
+ font-weight: 600;
3157
+ letter-spacing: var(--x-track-label);
3158
+ text-transform: uppercase;
3159
+ color: var(--x-color-accent);
3160
+ background: var(--x-color-surface-3);
3161
+ box-shadow: inset 0 -1px 0 var(--x-color-accent-edge);
3162
+ }
3163
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-table :where(tbody th) {
3164
+ font-weight: 500;
3165
+ color: var(--x-color-text);
3166
+ }
3167
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-table--hover :where(tbody tr:hover) > :first-child {
3168
+ box-shadow: inset 2px 0 0 var(--x-color-accent);
3169
+ }
3170
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-table__cell--num {
3171
+ font-family: var(--x-font-mono);
3172
+ font-size: 0.9375rem;
3173
+ }
3174
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-tabs__list::after {
3175
+ margin-left: -20px;
3176
+ }
3177
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-tabs__link {
3178
+ padding: 0 20px;
3179
+ font-family: var(--x-font-display);
3180
+ font-size: var(--x-fs-ui);
3181
+ font-weight: 500;
3182
+ line-height: 1.4;
3183
+ }
3184
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-tabs__link:hover {
3185
+ color: var(--x-color-text);
3186
+ }
3187
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-tabs__link[aria-current=page] {
3188
+ color: var(--x-color-accent);
3189
+ }
3190
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-tabs__link[aria-current=page]::after {
3191
+ content: "";
3192
+ position: absolute;
3193
+ right: 0;
3194
+ bottom: -1px;
3195
+ left: 0;
3196
+ height: 2px;
3197
+ background: var(--x-color-accent);
3198
+ }
3199
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-tabs__link[aria-current=page] .x-tabs__count {
3200
+ color: var(--x-color-accent);
3201
+ border-color: var(--x-color-accent-edge);
3202
+ }
3203
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-tabs__count {
3204
+ background: var(--x-color-surface-2);
3205
+ }
3206
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-tag::before {
3207
+ content: "#";
3208
+ margin-right: 2px;
3209
+ color: var(--x-color-text-faint);
3210
+ }
3211
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-tag--active {
3212
+ box-shadow: 0 0 12px var(--x-color-glow);
3213
+ }
3214
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-tag--active::before {
3215
+ color: inherit;
3216
+ }
3217
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-timeline {
3218
+ --x-timeline-date-fs: 0.9375rem;
3219
+ --x-timeline-rail: 12px;
3220
+ }
3221
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-timeline__item:first-child::before {
3222
+ background: linear-gradient(var(--x-color-accent), var(--x-color-line-strong));
3223
+ }
3224
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-timeline__item:last-child::before {
3225
+ background: linear-gradient(var(--x-color-line-strong), transparent);
3226
+ }
3227
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-timeline__item--current::after {
3228
+ background: var(--x-color-accent);
3229
+ box-shadow: 0 0 10px var(--x-color-glow);
3230
+ }
3231
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-timeline__date {
3232
+ font-family: var(--x-font-mono);
3233
+ color: var(--x-color-accent);
3234
+ }
3235
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-tooltip {
3236
+ --x-tooltip-font: var(--x-font-body);
3237
+ --x-tooltip-edge: var(--x-color-line-strong);
3238
+ --x-tooltip-max: 280px;
3239
+ --x-tooltip-left: 0;
3240
+ --x-tooltip-shift: 0;
3241
+ --x-tooltip-arrow-left: 26px;
3242
+ --x-tooltip-gap: 12px;
3243
+ }
3244
+ }
3245
+ @layer x.utility {
3246
+ .x-p-none {
3247
+ padding: 0;
3248
+ }
3249
+ .x-p-2xs {
3250
+ padding: var(--x-space-1);
3251
+ }
3252
+ .x-p-xs {
3253
+ padding: var(--x-space-2);
3254
+ }
3255
+ .x-p-sm {
3256
+ padding: var(--x-space-3);
3257
+ }
3258
+ .x-p-md {
3259
+ padding: var(--x-space-4);
3260
+ }
3261
+ .x-p-lg {
3262
+ padding: var(--x-space-5);
3263
+ }
3264
+ .x-p-xl {
3265
+ padding: var(--x-space-6);
3266
+ }
3267
+ .x-p-2xl {
3268
+ padding: var(--x-space-7);
3269
+ }
3270
+ .x-p-3xl {
3271
+ padding: var(--x-space-8);
3272
+ }
3273
+ .x-p-4xl {
3274
+ padding: var(--x-space-9);
3275
+ }
3276
+ .x-px-none {
3277
+ padding-inline: 0;
3278
+ }
3279
+ .x-px-2xs {
3280
+ padding-inline: var(--x-space-1);
3281
+ }
3282
+ .x-px-xs {
3283
+ padding-inline: var(--x-space-2);
3284
+ }
3285
+ .x-px-sm {
3286
+ padding-inline: var(--x-space-3);
3287
+ }
3288
+ .x-px-md {
3289
+ padding-inline: var(--x-space-4);
3290
+ }
3291
+ .x-px-lg {
3292
+ padding-inline: var(--x-space-5);
3293
+ }
3294
+ .x-px-xl {
3295
+ padding-inline: var(--x-space-6);
3296
+ }
3297
+ .x-px-2xl {
3298
+ padding-inline: var(--x-space-7);
3299
+ }
3300
+ .x-px-3xl {
3301
+ padding-inline: var(--x-space-8);
3302
+ }
3303
+ .x-px-4xl {
3304
+ padding-inline: var(--x-space-9);
3305
+ }
3306
+ .x-py-none {
3307
+ padding-block: 0;
3308
+ }
3309
+ .x-py-2xs {
3310
+ padding-block: var(--x-space-1);
3311
+ }
3312
+ .x-py-xs {
3313
+ padding-block: var(--x-space-2);
3314
+ }
3315
+ .x-py-sm {
3316
+ padding-block: var(--x-space-3);
3317
+ }
3318
+ .x-py-md {
3319
+ padding-block: var(--x-space-4);
3320
+ }
3321
+ .x-py-lg {
3322
+ padding-block: var(--x-space-5);
3323
+ }
3324
+ .x-py-xl {
3325
+ padding-block: var(--x-space-6);
3326
+ }
3327
+ .x-py-2xl {
3328
+ padding-block: var(--x-space-7);
3329
+ }
3330
+ .x-py-3xl {
3331
+ padding-block: var(--x-space-8);
3332
+ }
3333
+ .x-py-4xl {
3334
+ padding-block: var(--x-space-9);
3335
+ }
3336
+ .x-pt-none {
3337
+ padding-top: 0;
3338
+ }
3339
+ .x-pt-2xs {
3340
+ padding-top: var(--x-space-1);
3341
+ }
3342
+ .x-pt-xs {
3343
+ padding-top: var(--x-space-2);
3344
+ }
3345
+ .x-pt-sm {
3346
+ padding-top: var(--x-space-3);
3347
+ }
3348
+ .x-pt-md {
3349
+ padding-top: var(--x-space-4);
3350
+ }
3351
+ .x-pt-lg {
3352
+ padding-top: var(--x-space-5);
3353
+ }
3354
+ .x-pt-xl {
3355
+ padding-top: var(--x-space-6);
3356
+ }
3357
+ .x-pt-2xl {
3358
+ padding-top: var(--x-space-7);
3359
+ }
3360
+ .x-pt-3xl {
3361
+ padding-top: var(--x-space-8);
3362
+ }
3363
+ .x-pt-4xl {
3364
+ padding-top: var(--x-space-9);
3365
+ }
3366
+ .x-pr-none {
3367
+ padding-right: 0;
3368
+ }
3369
+ .x-pr-2xs {
3370
+ padding-right: var(--x-space-1);
3371
+ }
3372
+ .x-pr-xs {
3373
+ padding-right: var(--x-space-2);
3374
+ }
3375
+ .x-pr-sm {
3376
+ padding-right: var(--x-space-3);
3377
+ }
3378
+ .x-pr-md {
3379
+ padding-right: var(--x-space-4);
3380
+ }
3381
+ .x-pr-lg {
3382
+ padding-right: var(--x-space-5);
3383
+ }
3384
+ .x-pr-xl {
3385
+ padding-right: var(--x-space-6);
3386
+ }
3387
+ .x-pr-2xl {
3388
+ padding-right: var(--x-space-7);
3389
+ }
3390
+ .x-pr-3xl {
3391
+ padding-right: var(--x-space-8);
3392
+ }
3393
+ .x-pr-4xl {
3394
+ padding-right: var(--x-space-9);
3395
+ }
3396
+ .x-pb-none {
3397
+ padding-bottom: 0;
3398
+ }
3399
+ .x-pb-2xs {
3400
+ padding-bottom: var(--x-space-1);
3401
+ }
3402
+ .x-pb-xs {
3403
+ padding-bottom: var(--x-space-2);
3404
+ }
3405
+ .x-pb-sm {
3406
+ padding-bottom: var(--x-space-3);
3407
+ }
3408
+ .x-pb-md {
3409
+ padding-bottom: var(--x-space-4);
3410
+ }
3411
+ .x-pb-lg {
3412
+ padding-bottom: var(--x-space-5);
3413
+ }
3414
+ .x-pb-xl {
3415
+ padding-bottom: var(--x-space-6);
3416
+ }
3417
+ .x-pb-2xl {
3418
+ padding-bottom: var(--x-space-7);
3419
+ }
3420
+ .x-pb-3xl {
3421
+ padding-bottom: var(--x-space-8);
3422
+ }
3423
+ .x-pb-4xl {
3424
+ padding-bottom: var(--x-space-9);
3425
+ }
3426
+ .x-pl-none {
3427
+ padding-left: 0;
3428
+ }
3429
+ .x-pl-2xs {
3430
+ padding-left: var(--x-space-1);
3431
+ }
3432
+ .x-pl-xs {
3433
+ padding-left: var(--x-space-2);
3434
+ }
3435
+ .x-pl-sm {
3436
+ padding-left: var(--x-space-3);
3437
+ }
3438
+ .x-pl-md {
3439
+ padding-left: var(--x-space-4);
3440
+ }
3441
+ .x-pl-lg {
3442
+ padding-left: var(--x-space-5);
3443
+ }
3444
+ .x-pl-xl {
3445
+ padding-left: var(--x-space-6);
3446
+ }
3447
+ .x-pl-2xl {
3448
+ padding-left: var(--x-space-7);
3449
+ }
3450
+ .x-pl-3xl {
3451
+ padding-left: var(--x-space-8);
3452
+ }
3453
+ .x-pl-4xl {
3454
+ padding-left: var(--x-space-9);
3455
+ }
3456
+ .x-m-none {
3457
+ margin: 0;
3458
+ }
3459
+ .x-m-2xs {
3460
+ margin: var(--x-space-1);
3461
+ }
3462
+ .x-m-xs {
3463
+ margin: var(--x-space-2);
3464
+ }
3465
+ .x-m-sm {
3466
+ margin: var(--x-space-3);
3467
+ }
3468
+ .x-m-md {
3469
+ margin: var(--x-space-4);
3470
+ }
3471
+ .x-m-lg {
3472
+ margin: var(--x-space-5);
3473
+ }
3474
+ .x-m-xl {
3475
+ margin: var(--x-space-6);
3476
+ }
3477
+ .x-m-2xl {
3478
+ margin: var(--x-space-7);
3479
+ }
3480
+ .x-m-3xl {
3481
+ margin: var(--x-space-8);
3482
+ }
3483
+ .x-m-4xl {
3484
+ margin: var(--x-space-9);
3485
+ }
3486
+ .x-m-section {
3487
+ margin: var(--x-section);
3488
+ }
3489
+ .x-m-auto {
3490
+ margin: auto;
3491
+ }
3492
+ .x-mx-none {
3493
+ margin-inline: 0;
3494
+ }
3495
+ .x-mx-2xs {
3496
+ margin-inline: var(--x-space-1);
3497
+ }
3498
+ .x-mx-xs {
3499
+ margin-inline: var(--x-space-2);
3500
+ }
3501
+ .x-mx-sm {
3502
+ margin-inline: var(--x-space-3);
3503
+ }
3504
+ .x-mx-md {
3505
+ margin-inline: var(--x-space-4);
3506
+ }
3507
+ .x-mx-lg {
3508
+ margin-inline: var(--x-space-5);
3509
+ }
3510
+ .x-mx-xl {
3511
+ margin-inline: var(--x-space-6);
3512
+ }
3513
+ .x-mx-2xl {
3514
+ margin-inline: var(--x-space-7);
3515
+ }
3516
+ .x-mx-3xl {
3517
+ margin-inline: var(--x-space-8);
3518
+ }
3519
+ .x-mx-4xl {
3520
+ margin-inline: var(--x-space-9);
3521
+ }
3522
+ .x-mx-section {
3523
+ margin-inline: var(--x-section);
3524
+ }
3525
+ .x-mx-auto {
3526
+ margin-inline: auto;
3527
+ }
3528
+ .x-my-none {
3529
+ margin-block: 0;
3530
+ }
3531
+ .x-my-2xs {
3532
+ margin-block: var(--x-space-1);
3533
+ }
3534
+ .x-my-xs {
3535
+ margin-block: var(--x-space-2);
3536
+ }
3537
+ .x-my-sm {
3538
+ margin-block: var(--x-space-3);
3539
+ }
3540
+ .x-my-md {
3541
+ margin-block: var(--x-space-4);
3542
+ }
3543
+ .x-my-lg {
3544
+ margin-block: var(--x-space-5);
3545
+ }
3546
+ .x-my-xl {
3547
+ margin-block: var(--x-space-6);
3548
+ }
3549
+ .x-my-2xl {
3550
+ margin-block: var(--x-space-7);
3551
+ }
3552
+ .x-my-3xl {
3553
+ margin-block: var(--x-space-8);
3554
+ }
3555
+ .x-my-4xl {
3556
+ margin-block: var(--x-space-9);
3557
+ }
3558
+ .x-my-section {
3559
+ margin-block: var(--x-section);
3560
+ }
3561
+ .x-my-auto {
3562
+ margin-block: auto;
3563
+ }
3564
+ .x-mt-none {
3565
+ margin-top: 0;
3566
+ }
3567
+ .x-mt-2xs {
3568
+ margin-top: var(--x-space-1);
3569
+ }
3570
+ .x-mt-xs {
3571
+ margin-top: var(--x-space-2);
3572
+ }
3573
+ .x-mt-sm {
3574
+ margin-top: var(--x-space-3);
3575
+ }
3576
+ .x-mt-md {
3577
+ margin-top: var(--x-space-4);
3578
+ }
3579
+ .x-mt-lg {
3580
+ margin-top: var(--x-space-5);
3581
+ }
3582
+ .x-mt-xl {
3583
+ margin-top: var(--x-space-6);
3584
+ }
3585
+ .x-mt-2xl {
3586
+ margin-top: var(--x-space-7);
3587
+ }
3588
+ .x-mt-3xl {
3589
+ margin-top: var(--x-space-8);
3590
+ }
3591
+ .x-mt-4xl {
3592
+ margin-top: var(--x-space-9);
3593
+ }
3594
+ .x-mt-section {
3595
+ margin-top: var(--x-section);
3596
+ }
3597
+ .x-mt-auto {
3598
+ margin-top: auto;
3599
+ }
3600
+ .x-mr-none {
3601
+ margin-right: 0;
3602
+ }
3603
+ .x-mr-2xs {
3604
+ margin-right: var(--x-space-1);
3605
+ }
3606
+ .x-mr-xs {
3607
+ margin-right: var(--x-space-2);
3608
+ }
3609
+ .x-mr-sm {
3610
+ margin-right: var(--x-space-3);
3611
+ }
3612
+ .x-mr-md {
3613
+ margin-right: var(--x-space-4);
3614
+ }
3615
+ .x-mr-lg {
3616
+ margin-right: var(--x-space-5);
3617
+ }
3618
+ .x-mr-xl {
3619
+ margin-right: var(--x-space-6);
3620
+ }
3621
+ .x-mr-2xl {
3622
+ margin-right: var(--x-space-7);
3623
+ }
3624
+ .x-mr-3xl {
3625
+ margin-right: var(--x-space-8);
3626
+ }
3627
+ .x-mr-4xl {
3628
+ margin-right: var(--x-space-9);
3629
+ }
3630
+ .x-mr-section {
3631
+ margin-right: var(--x-section);
3632
+ }
3633
+ .x-mr-auto {
3634
+ margin-right: auto;
3635
+ }
3636
+ .x-mb-none {
3637
+ margin-bottom: 0;
3638
+ }
3639
+ .x-mb-2xs {
3640
+ margin-bottom: var(--x-space-1);
3641
+ }
3642
+ .x-mb-xs {
3643
+ margin-bottom: var(--x-space-2);
3644
+ }
3645
+ .x-mb-sm {
3646
+ margin-bottom: var(--x-space-3);
3647
+ }
3648
+ .x-mb-md {
3649
+ margin-bottom: var(--x-space-4);
3650
+ }
3651
+ .x-mb-lg {
3652
+ margin-bottom: var(--x-space-5);
3653
+ }
3654
+ .x-mb-xl {
3655
+ margin-bottom: var(--x-space-6);
3656
+ }
3657
+ .x-mb-2xl {
3658
+ margin-bottom: var(--x-space-7);
3659
+ }
3660
+ .x-mb-3xl {
3661
+ margin-bottom: var(--x-space-8);
3662
+ }
3663
+ .x-mb-4xl {
3664
+ margin-bottom: var(--x-space-9);
3665
+ }
3666
+ .x-mb-section {
3667
+ margin-bottom: var(--x-section);
3668
+ }
3669
+ .x-mb-auto {
3670
+ margin-bottom: auto;
3671
+ }
3672
+ .x-ml-none {
3673
+ margin-left: 0;
3674
+ }
3675
+ .x-ml-2xs {
3676
+ margin-left: var(--x-space-1);
3677
+ }
3678
+ .x-ml-xs {
3679
+ margin-left: var(--x-space-2);
3680
+ }
3681
+ .x-ml-sm {
3682
+ margin-left: var(--x-space-3);
3683
+ }
3684
+ .x-ml-md {
3685
+ margin-left: var(--x-space-4);
3686
+ }
3687
+ .x-ml-lg {
3688
+ margin-left: var(--x-space-5);
3689
+ }
3690
+ .x-ml-xl {
3691
+ margin-left: var(--x-space-6);
3692
+ }
3693
+ .x-ml-2xl {
3694
+ margin-left: var(--x-space-7);
3695
+ }
3696
+ .x-ml-3xl {
3697
+ margin-left: var(--x-space-8);
3698
+ }
3699
+ .x-ml-4xl {
3700
+ margin-left: var(--x-space-9);
3701
+ }
3702
+ .x-ml-section {
3703
+ margin-left: var(--x-section);
3704
+ }
3705
+ .x-ml-auto {
3706
+ margin-left: auto;
3707
+ }
3708
+ .x-gap-none {
3709
+ gap: 0;
3710
+ }
3711
+ .x-gap-x-none {
3712
+ column-gap: 0;
3713
+ }
3714
+ .x-gap-y-none {
3715
+ row-gap: 0;
3716
+ }
3717
+ .x-gap-2xs {
3718
+ gap: var(--x-space-1);
3719
+ }
3720
+ .x-gap-x-2xs {
3721
+ column-gap: var(--x-space-1);
3722
+ }
3723
+ .x-gap-y-2xs {
3724
+ row-gap: var(--x-space-1);
3725
+ }
3726
+ .x-gap-xs {
3727
+ gap: var(--x-space-2);
3728
+ }
3729
+ .x-gap-x-xs {
3730
+ column-gap: var(--x-space-2);
3731
+ }
3732
+ .x-gap-y-xs {
3733
+ row-gap: var(--x-space-2);
3734
+ }
3735
+ .x-gap-sm {
3736
+ gap: var(--x-space-3);
3737
+ }
3738
+ .x-gap-x-sm {
3739
+ column-gap: var(--x-space-3);
3740
+ }
3741
+ .x-gap-y-sm {
3742
+ row-gap: var(--x-space-3);
3743
+ }
3744
+ .x-gap-md {
3745
+ gap: var(--x-space-4);
3746
+ }
3747
+ .x-gap-x-md {
3748
+ column-gap: var(--x-space-4);
3749
+ }
3750
+ .x-gap-y-md {
3751
+ row-gap: var(--x-space-4);
3752
+ }
3753
+ .x-gap-lg {
3754
+ gap: var(--x-space-5);
3755
+ }
3756
+ .x-gap-x-lg {
3757
+ column-gap: var(--x-space-5);
3758
+ }
3759
+ .x-gap-y-lg {
3760
+ row-gap: var(--x-space-5);
3761
+ }
3762
+ .x-gap-xl {
3763
+ gap: var(--x-space-6);
3764
+ }
3765
+ .x-gap-x-xl {
3766
+ column-gap: var(--x-space-6);
3767
+ }
3768
+ .x-gap-y-xl {
3769
+ row-gap: var(--x-space-6);
3770
+ }
3771
+ .x-gap-2xl {
3772
+ gap: var(--x-space-7);
3773
+ }
3774
+ .x-gap-x-2xl {
3775
+ column-gap: var(--x-space-7);
3776
+ }
3777
+ .x-gap-y-2xl {
3778
+ row-gap: var(--x-space-7);
3779
+ }
3780
+ .x-gap-3xl {
3781
+ gap: var(--x-space-8);
3782
+ }
3783
+ .x-gap-x-3xl {
3784
+ column-gap: var(--x-space-8);
3785
+ }
3786
+ .x-gap-y-3xl {
3787
+ row-gap: var(--x-space-8);
3788
+ }
3789
+ .x-gap-4xl {
3790
+ gap: var(--x-space-9);
3791
+ }
3792
+ .x-gap-x-4xl {
3793
+ column-gap: var(--x-space-9);
3794
+ }
3795
+ .x-gap-y-4xl {
3796
+ row-gap: var(--x-space-9);
3797
+ }
3798
+ .x-stack-none {
3799
+ display: flex;
3800
+ flex-direction: column;
3801
+ gap: 0;
3802
+ }
3803
+ .x-cluster-none {
3804
+ display: flex;
3805
+ flex-wrap: wrap;
3806
+ gap: 0;
3807
+ align-items: center;
3808
+ }
3809
+ .x-stack-2xs {
3810
+ display: flex;
3811
+ flex-direction: column;
3812
+ gap: var(--x-space-1);
3813
+ }
3814
+ .x-cluster-2xs {
3815
+ display: flex;
3816
+ flex-wrap: wrap;
3817
+ gap: var(--x-space-1);
3818
+ align-items: center;
3819
+ }
3820
+ .x-stack-xs {
3821
+ display: flex;
3822
+ flex-direction: column;
3823
+ gap: var(--x-space-2);
3824
+ }
3825
+ .x-cluster-xs {
3826
+ display: flex;
3827
+ flex-wrap: wrap;
3828
+ gap: var(--x-space-2);
3829
+ align-items: center;
3830
+ }
3831
+ .x-stack-sm {
3832
+ display: flex;
3833
+ flex-direction: column;
3834
+ gap: var(--x-space-3);
3835
+ }
3836
+ .x-cluster-sm {
3837
+ display: flex;
3838
+ flex-wrap: wrap;
3839
+ gap: var(--x-space-3);
3840
+ align-items: center;
3841
+ }
3842
+ .x-stack-md {
3843
+ display: flex;
3844
+ flex-direction: column;
3845
+ gap: var(--x-space-4);
3846
+ }
3847
+ .x-cluster-md {
3848
+ display: flex;
3849
+ flex-wrap: wrap;
3850
+ gap: var(--x-space-4);
3851
+ align-items: center;
3852
+ }
3853
+ .x-stack-lg {
3854
+ display: flex;
3855
+ flex-direction: column;
3856
+ gap: var(--x-space-5);
3857
+ }
3858
+ .x-cluster-lg {
3859
+ display: flex;
3860
+ flex-wrap: wrap;
3861
+ gap: var(--x-space-5);
3862
+ align-items: center;
3863
+ }
3864
+ .x-stack-xl {
3865
+ display: flex;
3866
+ flex-direction: column;
3867
+ gap: var(--x-space-6);
3868
+ }
3869
+ .x-cluster-xl {
3870
+ display: flex;
3871
+ flex-wrap: wrap;
3872
+ gap: var(--x-space-6);
3873
+ align-items: center;
3874
+ }
3875
+ .x-stack-2xl {
3876
+ display: flex;
3877
+ flex-direction: column;
3878
+ gap: var(--x-space-7);
3879
+ }
3880
+ .x-cluster-2xl {
3881
+ display: flex;
3882
+ flex-wrap: wrap;
3883
+ gap: var(--x-space-7);
3884
+ align-items: center;
3885
+ }
3886
+ .x-stack-3xl {
3887
+ display: flex;
3888
+ flex-direction: column;
3889
+ gap: var(--x-space-8);
3890
+ }
3891
+ .x-cluster-3xl {
3892
+ display: flex;
3893
+ flex-wrap: wrap;
3894
+ gap: var(--x-space-8);
3895
+ align-items: center;
3896
+ }
3897
+ .x-stack-4xl {
3898
+ display: flex;
3899
+ flex-direction: column;
3900
+ gap: var(--x-space-9);
3901
+ }
3902
+ .x-cluster-4xl {
3903
+ display: flex;
3904
+ flex-wrap: wrap;
3905
+ gap: var(--x-space-9);
3906
+ align-items: center;
3907
+ }
3908
+ .x-visually-hidden:not(:focus-within, :active) {
3909
+ position: absolute;
3910
+ width: 1px;
3911
+ height: 1px;
3912
+ padding: 0;
3913
+ margin: -1px;
3914
+ overflow: hidden;
3915
+ white-space: nowrap;
3916
+ border: 0;
3917
+ clip-path: inset(50%);
3918
+ }
3919
+ }