mevebu 1.0.0 → 1.2.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.
@@ -0,0 +1,2742 @@
1
+ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
+ @layer theme, base, components, utilities;
4
+ @layer theme {
5
+ :root, :host {
6
+ --color-black: #000;
7
+ --spacing: 0.25rem;
8
+ --text-sm: 0.875rem;
9
+ --text-sm--line-height: calc(1.25 / 0.875);
10
+ --text-base: 1rem;
11
+ --text-base--line-height: calc(1.5 / 1);
12
+ --text-lg: 1.125rem;
13
+ --text-lg--line-height: calc(1.75 / 1.125);
14
+ --text-xl: 1.25rem;
15
+ --text-xl--line-height: calc(1.75 / 1.25);
16
+ --font-weight-medium: 500;
17
+ --font-weight-semibold: 600;
18
+ --font-weight-bold: 700;
19
+ --tracking-normal: 0em;
20
+ --leading-normal: 1.5;
21
+ --radius-lg: 0.5rem;
22
+ --radius-xl: 0.75rem;
23
+ --default-transition-duration: 150ms;
24
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
25
+ --default-font-family: var(--mvb-sans);
26
+ --default-mono-font-family: var(--mvb-mono);
27
+ }
28
+ }
29
+ @layer base {
30
+ *, ::after, ::before, ::backdrop, ::file-selector-button {
31
+ box-sizing: border-box;
32
+ margin: 0;
33
+ padding: 0;
34
+ border: 0 solid;
35
+ }
36
+ html, :host {
37
+ line-height: 1.5;
38
+ -webkit-text-size-adjust: 100%;
39
+ tab-size: 4;
40
+ font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
41
+ font-feature-settings: var(--default-font-feature-settings, normal);
42
+ font-variation-settings: var(--default-font-variation-settings, normal);
43
+ -webkit-tap-highlight-color: transparent;
44
+ }
45
+ hr {
46
+ height: 0;
47
+ color: inherit;
48
+ border-top-width: 1px;
49
+ }
50
+ abbr:where([title]) {
51
+ -webkit-text-decoration: underline dotted;
52
+ text-decoration: underline dotted;
53
+ }
54
+ h1, h2, h3, h4, h5, h6 {
55
+ font-size: inherit;
56
+ font-weight: inherit;
57
+ }
58
+ a {
59
+ color: inherit;
60
+ -webkit-text-decoration: inherit;
61
+ text-decoration: inherit;
62
+ }
63
+ b, strong {
64
+ font-weight: bolder;
65
+ }
66
+ code, kbd, samp, pre {
67
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
68
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
69
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
70
+ font-size: 1em;
71
+ }
72
+ small {
73
+ font-size: 80%;
74
+ }
75
+ sub, sup {
76
+ font-size: 75%;
77
+ line-height: 0;
78
+ position: relative;
79
+ vertical-align: baseline;
80
+ }
81
+ sub {
82
+ bottom: -0.25em;
83
+ }
84
+ sup {
85
+ top: -0.5em;
86
+ }
87
+ table {
88
+ text-indent: 0;
89
+ border-color: inherit;
90
+ border-collapse: collapse;
91
+ }
92
+ :-moz-focusring:where(:not(iframe)) {
93
+ outline: auto;
94
+ }
95
+ progress {
96
+ vertical-align: baseline;
97
+ }
98
+ summary {
99
+ display: list-item;
100
+ }
101
+ ol, ul, menu {
102
+ list-style: none;
103
+ }
104
+ img, svg, video, canvas, audio, iframe, embed, object {
105
+ display: block;
106
+ vertical-align: middle;
107
+ }
108
+ img, video {
109
+ max-width: 100%;
110
+ height: auto;
111
+ }
112
+ button, input, select, optgroup, textarea, ::file-selector-button {
113
+ font: inherit;
114
+ font-feature-settings: inherit;
115
+ font-variation-settings: inherit;
116
+ letter-spacing: inherit;
117
+ color: inherit;
118
+ border-radius: 0;
119
+ background-color: transparent;
120
+ opacity: 1;
121
+ }
122
+ :where(select:is([multiple], [size])) optgroup {
123
+ font-weight: bolder;
124
+ }
125
+ :where(select:is([multiple], [size])) optgroup option {
126
+ padding-inline-start: 20px;
127
+ }
128
+ ::file-selector-button {
129
+ margin-inline-end: 4px;
130
+ }
131
+ ::placeholder {
132
+ opacity: 1;
133
+ }
134
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
135
+ ::placeholder {
136
+ color: currentcolor;
137
+ @supports (color: color-mix(in lab, red, red)) {
138
+ color: color-mix(in oklab, currentcolor 50%, transparent);
139
+ }
140
+ }
141
+ }
142
+ textarea {
143
+ resize: vertical;
144
+ }
145
+ ::-webkit-search-decoration {
146
+ -webkit-appearance: none;
147
+ }
148
+ ::-webkit-date-and-time-value {
149
+ min-height: 1lh;
150
+ text-align: inherit;
151
+ }
152
+ ::-webkit-datetime-edit {
153
+ display: inline-flex;
154
+ }
155
+ ::-webkit-datetime-edit-fields-wrapper {
156
+ padding: 0;
157
+ }
158
+ ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
159
+ padding-block: 0;
160
+ }
161
+ ::-webkit-calendar-picker-indicator {
162
+ line-height: 1;
163
+ }
164
+ :-moz-ui-invalid {
165
+ box-shadow: none;
166
+ }
167
+ button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
168
+ appearance: button;
169
+ }
170
+ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
171
+ height: auto;
172
+ }
173
+ [hidden]:where(:not([hidden="until-found"])) {
174
+ display: none !important;
175
+ }
176
+ }
177
+ @layer utilities;
178
+ :root {
179
+ --mvb-void: #eef1f7;
180
+ --mvb-deck: #ffffff;
181
+ --mvb-deck-2: #f1f4fa;
182
+ --mvb-ink: #151d2e;
183
+ --mvb-ink-2: #4b5871;
184
+ --mvb-ink-3: #69748c;
185
+ --mvb-orbit: #dfe4ef;
186
+ --mvb-orbit-hard: #c2cbdf;
187
+ --mvb-comet: #2456d6;
188
+ --mvb-comet-deep: #1a43ad;
189
+ --mvb-on-comet: #ffffff;
190
+ --mvb-nebula: #e3ebfd;
191
+ --mvb-aurora: #0d7a56;
192
+ --mvb-danger: #b3261e;
193
+ --mvb-star: #e6a100;
194
+ --mvb-track: #c2cbdf;
195
+ --mvb-scrim: rgb(6 10 24 / 0.5);
196
+ --mvb-r1: 10px;
197
+ --mvb-r2: 16px;
198
+ --mvb-r3: 24px;
199
+ --mvb-margin: clamp(20px, 5vw, 44px);
200
+ --mvb-gutter: clamp(14px, 2vw, 24px);
201
+ --mvb-bench: 1120px;
202
+ --mvb-bar: 60px;
203
+ --mvb-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
204
+ --mvb-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
205
+ --mvb-ease: cubic-bezier(0.22, 0.9, 0.28, 1);
206
+ --mvb-t: 150ms;
207
+ --mvb-caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369748c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
208
+ color-scheme: light;
209
+ }
210
+ :root[data-theme="dark"] {
211
+ --mvb-void: #05080f;
212
+ --mvb-deck: #0e1526;
213
+ --mvb-deck-2: #16203a;
214
+ --mvb-ink: #e9eefb;
215
+ --mvb-ink-2: #aeb9d2;
216
+ --mvb-ink-3: #8b97b3;
217
+ --mvb-orbit: #24324f;
218
+ --mvb-orbit-hard: #35476f;
219
+ --mvb-comet: #5f8bff;
220
+ --mvb-comet-deep: #7ba1ff;
221
+ --mvb-on-comet: #060b18;
222
+ --mvb-nebula: #131e3c;
223
+ --mvb-aurora: #4ad69c;
224
+ --mvb-danger: #ff8a80;
225
+ --mvb-star: #ffcf4d;
226
+ --mvb-track: #35476f;
227
+ --mvb-scrim: rgb(2 4 10 / 0.68);
228
+ --mvb-caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b97b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
229
+ color-scheme: dark;
230
+ }
231
+ @layer base {
232
+ html {
233
+ -webkit-text-size-adjust: 100%;
234
+ }
235
+ body {
236
+ margin: 0;
237
+ min-height: 100dvh;
238
+ display: flex;
239
+ flex-direction: column;
240
+ background: var(--mvb-void);
241
+ color: var(--mvb-ink);
242
+ font-family: var(--mvb-sans);
243
+ font-size: 16px;
244
+ line-height: 1.55;
245
+ -webkit-font-smoothing: antialiased;
246
+ }
247
+ h1, h2, h3, h4, h5, h6, p, ul, ol, pre, figure {
248
+ margin: 0;
249
+ }
250
+ ul, ol {
251
+ list-style: none;
252
+ padding: 0;
253
+ }
254
+ button, input, textarea, select {
255
+ font: inherit;
256
+ color: inherit;
257
+ }
258
+ a {
259
+ color: inherit;
260
+ }
261
+ img, svg, canvas, video {
262
+ display: block;
263
+ max-width: 100%;
264
+ }
265
+ [hidden] {
266
+ display: none !important;
267
+ }
268
+ :focus-visible {
269
+ outline: 2px solid var(--mvb-comet);
270
+ outline-offset: 2px;
271
+ border-radius: 6px;
272
+ }
273
+ ::selection {
274
+ background: var(--mvb-nebula);
275
+ }
276
+ @media (prefers-reduced-motion: reduce) {
277
+ *, *::before, *::after {
278
+ animation-duration: 0.01ms !important;
279
+ animation-iteration-count: 1 !important;
280
+ transition-duration: 0.01ms !important;
281
+ }
282
+ }
283
+ }
284
+ @layer components {
285
+ .mvb-ico {
286
+ display: block;
287
+ width: 18px;
288
+ height: 18px;
289
+ flex: none;
290
+ }
291
+ .mvb-ico--lg {
292
+ width: 26px;
293
+ height: 26px;
294
+ }
295
+ .mvb-ico--sm {
296
+ width: 15px;
297
+ height: 15px;
298
+ }
299
+ .mvb-bar {
300
+ position: sticky;
301
+ top: 0px;
302
+ z-index: 30;
303
+ border-bottom-style: var(--tw-border-style);
304
+ border-bottom-width: 1px;
305
+ border-color: var(--mvb-orbit);
306
+ background: var(--mvb-deck);
307
+ @supports (color: color-mix(in lab, red, red)) {
308
+ background: color-mix(in srgb, var(--mvb-deck) 88%, transparent);
309
+ }
310
+ backdrop-filter: saturate(140%) blur(10px);
311
+ -webkit-backdrop-filter: saturate(140%) blur(10px);
312
+ }
313
+ .mvb-bar__in {
314
+ height: var(--mvb-bar);
315
+ margin-inline: var(--mvb-margin);
316
+ display: flex;
317
+ align-items: center;
318
+ gap: clamp(14px, 3vw, 32px);
319
+ }
320
+ .mvb-mark {
321
+ display: inline-flex;
322
+ flex: none;
323
+ align-items: center;
324
+ gap: calc(var(--spacing) * 2.5);
325
+ font-size: var(--text-lg);
326
+ line-height: var(--tw-leading, var(--text-lg--line-height));
327
+ --tw-font-weight: var(--font-weight-bold);
328
+ font-weight: var(--font-weight-bold);
329
+ --tw-tracking: -0.01em;
330
+ letter-spacing: -0.01em;
331
+ color: var(--mvb-ink);
332
+ text-decoration-line: none;
333
+ }
334
+ .mvb-mark img {
335
+ display: block;
336
+ width: 30px;
337
+ height: 30px;
338
+ border-radius: 9px;
339
+ box-shadow: 0 0 0 1px var(--mvb-orbit);
340
+ }
341
+ .mvb-nav {
342
+ margin-inline-start: auto;
343
+ display: flex;
344
+ flex: none;
345
+ gap: var(--spacing);
346
+ border-radius: var(--mvb-r2);
347
+ border-style: var(--tw-border-style);
348
+ border-width: 1px;
349
+ border-color: var(--mvb-orbit);
350
+ background-color: var(--mvb-deck-2);
351
+ padding: var(--spacing);
352
+ }
353
+ .mvb-nav__link {
354
+ border-radius: var(--radius-lg);
355
+ padding-inline: calc(var(--spacing) * 3);
356
+ padding-block: 7px;
357
+ font-size: 0.90625rem;
358
+ --tw-font-weight: var(--font-weight-semibold);
359
+ font-weight: var(--font-weight-semibold);
360
+ white-space: nowrap;
361
+ color: var(--mvb-ink-2);
362
+ text-decoration-line: none;
363
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
364
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
365
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
366
+ --tw-duration: 150ms;
367
+ transition-duration: 150ms;
368
+ }
369
+ .mvb-nav__link:hover {
370
+ background-color: var(--mvb-ink);
371
+ @supports (color: color-mix(in lab, red, red)) {
372
+ background-color: color-mix(in oklab, var(--mvb-ink) 6%, transparent);
373
+ }
374
+ color: var(--mvb-ink);
375
+ }
376
+ .mvb-nav__link.mvb-on {
377
+ background-color: var(--mvb-deck);
378
+ color: var(--mvb-ink);
379
+ box-shadow: 0 0 0 1px var(--mvb-orbit);
380
+ }
381
+ .mvb-bar__end {
382
+ display: flex;
383
+ align-items: center;
384
+ gap: calc(var(--spacing) * 0.5);
385
+ }
386
+ .mvb-icobtn {
387
+ display: inline-flex;
388
+ width: calc(var(--spacing) * 10);
389
+ height: calc(var(--spacing) * 10);
390
+ cursor: pointer;
391
+ align-items: center;
392
+ justify-content: center;
393
+ border-radius: var(--mvb-r1);
394
+ border-style: var(--tw-border-style);
395
+ border-width: 1px;
396
+ border-color: transparent;
397
+ background-color: transparent;
398
+ color: var(--mvb-ink-2);
399
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
400
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
401
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
402
+ --tw-duration: 150ms;
403
+ transition-duration: 150ms;
404
+ }
405
+ .mvb-icobtn:hover {
406
+ background-color: var(--mvb-deck-2);
407
+ color: var(--mvb-ink);
408
+ }
409
+ .mvb-icobtn:focus-visible {
410
+ border-color: var(--mvb-comet);
411
+ }
412
+ .mvb-bar__menu {
413
+ display: none;
414
+ }
415
+ .mvb-searchbtn {
416
+ margin-inline-end: var(--spacing);
417
+ display: inline-flex;
418
+ height: calc(var(--spacing) * 10);
419
+ min-width: 180px;
420
+ cursor: pointer;
421
+ align-items: center;
422
+ gap: calc(var(--spacing) * 2);
423
+ border-radius: var(--mvb-r1);
424
+ border-style: var(--tw-border-style);
425
+ border-width: 1px;
426
+ border-color: var(--mvb-orbit);
427
+ background-color: var(--mvb-deck-2);
428
+ padding-inline-start: calc(var(--spacing) * 3);
429
+ padding-inline-end: calc(var(--spacing) * 2.5);
430
+ font-size: var(--text-sm);
431
+ line-height: var(--tw-leading, var(--text-sm--line-height));
432
+ --tw-font-weight: var(--font-weight-medium);
433
+ font-weight: var(--font-weight-medium);
434
+ color: var(--mvb-ink-2);
435
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
436
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
437
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
438
+ --tw-duration: 150ms;
439
+ transition-duration: 150ms;
440
+ }
441
+ .mvb-searchbtn:hover {
442
+ border-color: var(--mvb-orbit-hard);
443
+ background-color: var(--mvb-deck);
444
+ color: var(--mvb-ink);
445
+ }
446
+ .mvb-searchbtn:focus-visible {
447
+ border-color: var(--mvb-comet);
448
+ }
449
+ .mvb-searchbtn .mvb-ico {
450
+ width: 15px;
451
+ height: 15px;
452
+ color: var(--mvb-ink-3);
453
+ }
454
+ .mvb-searchbtn__txt {
455
+ flex: 1;
456
+ text-align: start;
457
+ font-size: var(--text-sm);
458
+ line-height: var(--tw-leading, var(--text-sm--line-height));
459
+ }
460
+ .mvb-sheet {
461
+ display: grid;
462
+ border-top-style: var(--tw-border-style);
463
+ border-top-width: 1px;
464
+ border-color: var(--mvb-orbit);
465
+ background-color: var(--mvb-deck);
466
+ padding-inline: var(--mvb-margin);
467
+ padding-top: calc(var(--spacing) * 1.5);
468
+ padding-bottom: calc(var(--spacing) * 3.5);
469
+ }
470
+ .mvb-sheet__nav {
471
+ display: grid;
472
+ }
473
+ .mvb-sheet__link {
474
+ display: flex;
475
+ align-items: center;
476
+ gap: calc(var(--spacing) * 2);
477
+ border-bottom-style: var(--tw-border-style);
478
+ border-bottom-width: 1px;
479
+ border-color: var(--mvb-orbit);
480
+ background-color: transparent;
481
+ padding-block: 13px;
482
+ text-align: start;
483
+ font-size: 1.0625rem;
484
+ --tw-font-weight: var(--font-weight-medium);
485
+ font-weight: var(--font-weight-medium);
486
+ color: var(--mvb-ink);
487
+ text-decoration-line: none;
488
+ }
489
+ .mvb-sheet__link:last-child {
490
+ border-bottom-style: var(--tw-border-style);
491
+ border-bottom-width: 0px;
492
+ }
493
+ .mvb-sheet__link .mvb-ico {
494
+ color: var(--mvb-ink-3);
495
+ }
496
+ .mvb-sheet__action {
497
+ color: var(--mvb-comet);
498
+ }
499
+ .mvb-main {
500
+ flex: 1;
501
+ --tw-outline-style: none;
502
+ outline-style: none;
503
+ }
504
+ .mvb-page {
505
+ padding-inline: var(--mvb-margin);
506
+ }
507
+ .mvb-page--tool, .mvb-page--narrow {
508
+ max-width: var(--mvb-bench);
509
+ margin-inline: auto;
510
+ }
511
+ .mvb-link {
512
+ color: var(--mvb-comet);
513
+ text-underline-offset: 3px;
514
+ }
515
+ .mvb-kbd {
516
+ border-radius: 5px;
517
+ border-style: var(--tw-border-style);
518
+ border-width: 1px;
519
+ border-color: var(--mvb-orbit-hard);
520
+ padding-inline: 7px;
521
+ padding-block: 1px;
522
+ font-family: var(--mvb-sans);
523
+ font-size: 0.8125rem;
524
+ --tw-leading: 1.45;
525
+ line-height: 1.45;
526
+ color: var(--mvb-ink-3);
527
+ }
528
+ .mvb-hero {
529
+ position: relative;
530
+ border-bottom-style: var(--tw-border-style);
531
+ border-bottom-width: 1px;
532
+ border-color: var(--mvb-orbit);
533
+ overflow: clip;
534
+ background: radial-gradient(560px 300px at 12% -40px, var(--mvb-nebula), transparent 70%), var(--mvb-deck);
535
+ }
536
+ .mvb-hero__in {
537
+ max-width: var(--mvb-bench);
538
+ margin-inline: auto;
539
+ display: grid;
540
+ align-items: center;
541
+ gap: clamp(24px, 5vw, 72px);
542
+ padding-inline: var(--mvb-margin);
543
+ padding-top: clamp(48px, 8vw, 104px);
544
+ padding-bottom: clamp(40px, 6vw, 80px);
545
+ grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
546
+ }
547
+ .mvb-hero__title {
548
+ font-size: clamp(34px, 6vw, 60px);
549
+ --tw-leading: 1.02;
550
+ line-height: 1.02;
551
+ --tw-font-weight: var(--font-weight-bold);
552
+ font-weight: var(--font-weight-bold);
553
+ --tw-tracking: -0.03em;
554
+ letter-spacing: -0.03em;
555
+ text-wrap: balance;
556
+ }
557
+ .mvb-hero__cta {
558
+ margin-top: calc(var(--spacing) * 6);
559
+ display: flex;
560
+ flex-wrap: wrap;
561
+ gap: calc(var(--spacing) * 2.5);
562
+ }
563
+ .mvb-hero__orbit {
564
+ width: min(300px, 70vw);
565
+ justify-self: center;
566
+ }
567
+ .mvb-hero__orbit img {
568
+ display: block;
569
+ height: auto;
570
+ width: 100%;
571
+ border-radius: var(--mvb-r3);
572
+ }
573
+ .mvb-section {
574
+ padding-top: clamp(32px, 5vw, 60px);
575
+ }
576
+ .mvb-section__head {
577
+ margin-bottom: calc(var(--spacing) * 4);
578
+ display: flex;
579
+ align-items: baseline;
580
+ gap: calc(var(--spacing) * 3);
581
+ }
582
+ .mvb-section__title {
583
+ display: flex;
584
+ align-items: center;
585
+ gap: calc(var(--spacing) * 2.5);
586
+ font-size: clamp(21px, 3vw, 27px);
587
+ --tw-font-weight: var(--font-weight-bold);
588
+ font-weight: var(--font-weight-bold);
589
+ --tw-tracking: -0.02em;
590
+ letter-spacing: -0.02em;
591
+ }
592
+ .mvb-section__title .mvb-ico {
593
+ width: 22px;
594
+ height: 22px;
595
+ color: var(--mvb-comet);
596
+ }
597
+ .mvb-section__count {
598
+ margin-inline-start: calc(var(--spacing) * 1.5);
599
+ border-radius: calc(infinity * 1px);
600
+ background-color: var(--mvb-deck-2);
601
+ padding-inline: calc(var(--spacing) * 2);
602
+ padding-block: 1px;
603
+ font-size: 0.8125rem;
604
+ --tw-font-weight: var(--font-weight-semibold);
605
+ font-weight: var(--font-weight-semibold);
606
+ color: var(--mvb-ink-3);
607
+ --tw-numeric-spacing: tabular-nums;
608
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
609
+ }
610
+ .mvb-section__more {
611
+ margin-inline-start: auto;
612
+ font-size: 0.90625rem;
613
+ --tw-font-weight: var(--font-weight-semibold);
614
+ font-weight: var(--font-weight-semibold);
615
+ white-space: nowrap;
616
+ color: var(--mvb-comet);
617
+ text-decoration-line: none;
618
+ }
619
+ .mvb-section__more:hover {
620
+ text-decoration-line: underline;
621
+ }
622
+ .mvb-cols {
623
+ display: grid;
624
+ gap: var(--mvb-gutter);
625
+ }
626
+ .mvb-cols--2 {
627
+ grid-template-columns: repeat(1, minmax(0, 1fr));
628
+ @media (width >= 40rem) {
629
+ grid-template-columns: repeat(2, minmax(0, 1fr));
630
+ }
631
+ }
632
+ .mvb-cols--3 {
633
+ grid-template-columns: repeat(1, minmax(0, 1fr));
634
+ @media (width >= 40rem) {
635
+ grid-template-columns: repeat(2, minmax(0, 1fr));
636
+ }
637
+ @media (width >= 64rem) {
638
+ grid-template-columns: repeat(3, minmax(0, 1fr));
639
+ }
640
+ }
641
+ .mvb-cols--4 {
642
+ grid-template-columns: repeat(1, minmax(0, 1fr));
643
+ @media (width >= 40rem) {
644
+ grid-template-columns: repeat(2, minmax(0, 1fr));
645
+ }
646
+ @media (width >= 64rem) {
647
+ grid-template-columns: repeat(4, minmax(0, 1fr));
648
+ }
649
+ }
650
+ .mvb-cols--auto {
651
+ grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
652
+ }
653
+ .mvb-cols--side {
654
+ grid-template-columns: repeat(1, minmax(0, 1fr));
655
+ @media (width >= 60rem) {
656
+ grid-template-columns: minmax(0,20rem) minmax(0,1fr);
657
+ }
658
+ }
659
+ .mvb-row {
660
+ display: flex;
661
+ min-width: 0px;
662
+ flex-wrap: wrap;
663
+ align-items: center;
664
+ gap: calc(var(--spacing) * 2);
665
+ }
666
+ .mvb-col {
667
+ min-width: 0px;
668
+ }
669
+ .mvb-col--grow {
670
+ flex: 1;
671
+ }
672
+ .mvb-col--shrink {
673
+ flex: none;
674
+ }
675
+ .mvb-grid {
676
+ display: grid;
677
+ grid-template-columns: repeat(1, minmax(0, 1fr));
678
+ gap: var(--mvb-gutter);
679
+ @media (width >= 40rem) {
680
+ grid-template-columns: repeat(2, minmax(0, 1fr));
681
+ }
682
+ @media (width >= 64rem) {
683
+ grid-template-columns: repeat(3, minmax(0, 1fr));
684
+ }
685
+ }
686
+ .mvb-card {
687
+ position: relative;
688
+ display: grid;
689
+ gap: calc(var(--spacing) * 1.5);
690
+ border-radius: var(--mvb-r2);
691
+ border-style: var(--tw-border-style);
692
+ border-width: 1px;
693
+ border-color: var(--mvb-orbit);
694
+ background-color: var(--mvb-deck);
695
+ padding: calc(var(--spacing) * 5);
696
+ text-decoration-line: none;
697
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
698
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
699
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
700
+ --tw-duration: 150ms;
701
+ transition-duration: 150ms;
702
+ }
703
+ .mvb-card:hover {
704
+ border-color: var(--mvb-comet);
705
+ }
706
+ .mvb-card__top {
707
+ display: flex;
708
+ align-items: center;
709
+ gap: calc(var(--spacing) * 3);
710
+ }
711
+ .mvb-card__sigil {
712
+ display: grid;
713
+ width: 42px;
714
+ height: 42px;
715
+ flex: none;
716
+ place-items: center;
717
+ border-radius: 13px;
718
+ background-color: var(--mvb-nebula);
719
+ color: var(--mvb-comet);
720
+ }
721
+ .mvb-card__sigil .mvb-ico {
722
+ width: 21px;
723
+ height: 21px;
724
+ }
725
+ .mvb-card__name {
726
+ font-size: 1.0625rem;
727
+ --tw-font-weight: var(--font-weight-semibold);
728
+ font-weight: var(--font-weight-semibold);
729
+ --tw-tracking: -0.01em;
730
+ letter-spacing: -0.01em;
731
+ }
732
+ .mvb-card__note {
733
+ min-height: calc(var(--spacing) * 11);
734
+ font-size: 0.90625rem;
735
+ text-wrap: pretty;
736
+ color: var(--mvb-ink-2);
737
+ }
738
+ .mvb-card__foot {
739
+ margin-top: calc(var(--spacing) * 1.5);
740
+ display: flex;
741
+ align-items: center;
742
+ gap: calc(var(--spacing) * 2);
743
+ font-size: 0.84375rem;
744
+ --tw-font-weight: var(--font-weight-semibold);
745
+ font-weight: var(--font-weight-semibold);
746
+ color: var(--mvb-ink-3);
747
+ }
748
+ .mvb-list {
749
+ display: grid;
750
+ overflow: clip;
751
+ border-radius: var(--mvb-r2);
752
+ border-style: var(--tw-border-style);
753
+ border-width: 1px;
754
+ border-color: var(--mvb-orbit);
755
+ background-color: var(--mvb-deck);
756
+ }
757
+ .mvb-listrow {
758
+ display: flex;
759
+ align-items: center;
760
+ border-bottom-style: var(--tw-border-style);
761
+ border-bottom-width: 1px;
762
+ border-color: var(--mvb-orbit);
763
+ }
764
+ .mvb-listrow:last-child {
765
+ border-bottom-style: var(--tw-border-style);
766
+ border-bottom-width: 0px;
767
+ }
768
+ .mvb-listrow__link {
769
+ display: grid;
770
+ min-width: 0px;
771
+ flex: 1;
772
+ gap: 1px;
773
+ padding-block: 13px;
774
+ padding-inline-start: 18px;
775
+ padding-inline-end: calc(var(--spacing) * 1.5);
776
+ text-decoration-line: none;
777
+ }
778
+ .mvb-listrow__link:hover .mvb-listrow__name {
779
+ color: var(--mvb-comet);
780
+ }
781
+ .mvb-listrow__name {
782
+ font-size: 1.03125rem;
783
+ --tw-font-weight: var(--font-weight-semibold);
784
+ font-weight: var(--font-weight-semibold);
785
+ --tw-tracking: -0.01em;
786
+ letter-spacing: -0.01em;
787
+ }
788
+ .mvb-listrow__note {
789
+ font-size: var(--text-sm);
790
+ line-height: var(--tw-leading, var(--text-sm--line-height));
791
+ color: var(--mvb-ink-2);
792
+ }
793
+ .mvb-star {
794
+ margin-inline-end: calc(var(--spacing) * 2);
795
+ display: inline-flex;
796
+ width: calc(var(--spacing) * 11);
797
+ height: calc(var(--spacing) * 11);
798
+ flex: none;
799
+ cursor: pointer;
800
+ align-items: center;
801
+ justify-content: center;
802
+ border-radius: var(--mvb-r1);
803
+ border-style: var(--tw-border-style);
804
+ border-width: 0px;
805
+ background-color: transparent;
806
+ color: var(--mvb-orbit-hard);
807
+ transition-property: color,transform;
808
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
809
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
810
+ --tw-duration: 150ms;
811
+ transition-duration: 150ms;
812
+ }
813
+ .mvb-star:hover {
814
+ color: var(--mvb-ink-2);
815
+ }
816
+ .mvb-star.mvb-on {
817
+ color: var(--mvb-star);
818
+ }
819
+ .mvb-star.mvb-on .mvb-ico {
820
+ fill: var(--mvb-star);
821
+ }
822
+ .mvb-star:active {
823
+ scale: 0.88;
824
+ }
825
+ .mvb-filter {
826
+ margin-top: clamp(22px, 4vw, 36px);
827
+ display: flex;
828
+ align-items: center;
829
+ gap: calc(var(--spacing) * 2.5);
830
+ border-radius: var(--mvb-r2);
831
+ border-style: var(--tw-border-style);
832
+ border-width: 1px;
833
+ border-color: var(--mvb-orbit);
834
+ background-color: var(--mvb-deck);
835
+ padding-inline: calc(var(--spacing) * 3.5);
836
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
837
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
838
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
839
+ --tw-duration: 150ms;
840
+ transition-duration: 150ms;
841
+ }
842
+ .mvb-filter:focus-within {
843
+ border-color: var(--mvb-comet);
844
+ }
845
+ .mvb-filter__icon {
846
+ display: flex;
847
+ color: var(--mvb-ink-3);
848
+ }
849
+ .mvb-filter__in {
850
+ min-width: 0px;
851
+ flex: 1;
852
+ border-style: var(--tw-border-style);
853
+ border-width: 0px;
854
+ background-color: transparent;
855
+ font-size: 1.0625rem;
856
+ height: 52px;
857
+ }
858
+ .mvb-filter__in:focus {
859
+ --tw-outline-style: none;
860
+ outline-style: none;
861
+ }
862
+ .mvb-filter__in::placeholder {
863
+ color: var(--mvb-ink-3);
864
+ }
865
+ .mvb-filter__meta {
866
+ margin-top: calc(var(--spacing) * 2.5);
867
+ display: flex;
868
+ min-height: 22px;
869
+ align-items: baseline;
870
+ gap: calc(var(--spacing) * 3.5);
871
+ font-size: var(--text-sm);
872
+ line-height: var(--tw-leading, var(--text-sm--line-height));
873
+ color: var(--mvb-ink-3);
874
+ }
875
+ .mvb-lead {
876
+ margin-top: clamp(28px, 5vw, 56px);
877
+ max-width: 20ch;
878
+ font-size: clamp(28px, 5vw, 44px);
879
+ --tw-leading: 1.06;
880
+ line-height: 1.06;
881
+ --tw-font-weight: var(--font-weight-bold);
882
+ font-weight: var(--font-weight-bold);
883
+ --tw-tracking: -0.025em;
884
+ letter-spacing: -0.025em;
885
+ text-wrap: balance;
886
+ }
887
+ .mvb-lede {
888
+ margin-top: calc(var(--spacing) * 3);
889
+ max-width: 60ch;
890
+ font-size: 1.0625rem;
891
+ text-wrap: pretty;
892
+ color: var(--mvb-ink-2);
893
+ }
894
+ .mvb-head {
895
+ margin-block: clamp(24px, 4vw, 44px);
896
+ margin-bottom: clamp(22px, 3vw, 32px);
897
+ }
898
+ .mvb-head__back {
899
+ margin-bottom: calc(var(--spacing) * 4);
900
+ display: inline-flex;
901
+ align-items: center;
902
+ gap: 7px;
903
+ font-size: 0.9375rem;
904
+ --tw-font-weight: var(--font-weight-medium);
905
+ font-weight: var(--font-weight-medium);
906
+ color: var(--mvb-ink-2);
907
+ text-decoration-line: none;
908
+ }
909
+ .mvb-head__back:hover {
910
+ color: var(--mvb-ink);
911
+ }
912
+ .mvb-head__row {
913
+ display: flex;
914
+ align-items: flex-start;
915
+ gap: calc(var(--spacing) * 2);
916
+ }
917
+ .mvb-head__title {
918
+ flex: 1;
919
+ font-size: clamp(26px, 4vw, 36px);
920
+ --tw-leading: 1.1;
921
+ line-height: 1.1;
922
+ --tw-font-weight: var(--font-weight-bold);
923
+ font-weight: var(--font-weight-bold);
924
+ --tw-tracking: -0.025em;
925
+ letter-spacing: -0.025em;
926
+ text-wrap: balance;
927
+ }
928
+ .mvb-head__actions {
929
+ display: flex;
930
+ align-items: center;
931
+ gap: calc(var(--spacing) * 0.5);
932
+ padding-top: var(--spacing);
933
+ }
934
+ .mvb-head__about {
935
+ margin-top: calc(var(--spacing) * 2);
936
+ max-width: 58ch;
937
+ font-size: 1.0625rem;
938
+ text-wrap: pretty;
939
+ color: var(--mvb-ink-2);
940
+ }
941
+ .mvb-helpbtn {
942
+ display: inline-flex;
943
+ width: 38px;
944
+ height: 38px;
945
+ cursor: pointer;
946
+ align-items: center;
947
+ justify-content: center;
948
+ border-radius: calc(infinity * 1px);
949
+ border-style: var(--tw-border-style);
950
+ border-width: 1px;
951
+ border-color: var(--mvb-orbit);
952
+ background-color: var(--mvb-deck-2);
953
+ font-family: var(--mvb-sans);
954
+ font-size: var(--text-base);
955
+ line-height: var(--tw-leading, var(--text-base--line-height));
956
+ --tw-font-weight: var(--font-weight-bold);
957
+ font-weight: var(--font-weight-bold);
958
+ color: var(--mvb-ink-2);
959
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
960
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
961
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
962
+ --tw-duration: 150ms;
963
+ transition-duration: 150ms;
964
+ }
965
+ .mvb-helpbtn:hover {
966
+ border-color: var(--mvb-orbit-hard);
967
+ background-color: var(--mvb-deck);
968
+ color: var(--mvb-ink);
969
+ }
970
+ .mvb-helpbtn:focus-visible {
971
+ border-color: var(--mvb-comet);
972
+ }
973
+ .mvb-more {
974
+ margin-top: clamp(40px, 6vw, 72px);
975
+ }
976
+ .mvb-more__title {
977
+ margin-bottom: calc(var(--spacing) * 2.5);
978
+ font-size: 0.9375rem;
979
+ --tw-font-weight: var(--font-weight-bold);
980
+ font-weight: var(--font-weight-bold);
981
+ color: var(--mvb-ink-3);
982
+ }
983
+ .mvb-toolcard {
984
+ display: flex;
985
+ flex-direction: column;
986
+ overflow: clip;
987
+ border-radius: var(--mvb-r2);
988
+ border-style: var(--tw-border-style);
989
+ border-width: 1px;
990
+ border-color: var(--mvb-orbit);
991
+ background-color: var(--mvb-deck);
992
+ }
993
+ .mvb-toolcard__head {
994
+ display: flex;
995
+ flex-wrap: wrap;
996
+ align-items: center;
997
+ gap: calc(var(--spacing) * 2);
998
+ border-bottom-style: var(--tw-border-style);
999
+ border-bottom-width: 1px;
1000
+ border-color: var(--mvb-orbit);
1001
+ background-color: var(--mvb-deck-2);
1002
+ padding-inline: clamp(20px, 3vw, 32px);
1003
+ padding-block: clamp(12px, 2vw, 16px);
1004
+ }
1005
+ .mvb-toolcard__body {
1006
+ flex: 1;
1007
+ padding: clamp(20px, 3vw, 32px);
1008
+ }
1009
+ .mvb-toolcard__foot {
1010
+ display: flex;
1011
+ flex-wrap: wrap;
1012
+ align-items: center;
1013
+ justify-content: flex-end;
1014
+ gap: calc(var(--spacing) * 2);
1015
+ border-top-style: var(--tw-border-style);
1016
+ border-top-width: 1px;
1017
+ border-color: var(--mvb-orbit);
1018
+ background-color: var(--mvb-deck-2);
1019
+ padding-inline: clamp(20px, 3vw, 32px);
1020
+ padding-block: clamp(12px, 2vw, 16px);
1021
+ }
1022
+ .mvb-bench {
1023
+ display: grid;
1024
+ align-items: flex-start;
1025
+ gap: calc(var(--spacing) * 5);
1026
+ }
1027
+ .mvb-bench__side, .mvb-bench__main {
1028
+ min-width: 0px;
1029
+ }
1030
+ @media (min-width: 60rem) {
1031
+ .mvb-bench {
1032
+ gap: calc(var(--spacing) * 6);
1033
+ grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
1034
+ }
1035
+ }
1036
+ .mvb-stage {
1037
+ margin-inline: auto;
1038
+ display: grid;
1039
+ max-width: 560px;
1040
+ justify-items: center;
1041
+ gap: calc(var(--spacing) * 4);
1042
+ text-align: center;
1043
+ }
1044
+ .mvb-stack {
1045
+ display: grid;
1046
+ align-content: flex-start;
1047
+ gap: calc(var(--spacing) * 4);
1048
+ }
1049
+ .mvb-field {
1050
+ display: grid;
1051
+ min-width: 0px;
1052
+ align-content: flex-start;
1053
+ gap: calc(var(--spacing) * 1.5);
1054
+ }
1055
+ .mvb-field__label {
1056
+ font-size: 0.875rem;
1057
+ --tw-font-weight: var(--font-weight-semibold);
1058
+ font-weight: var(--font-weight-semibold);
1059
+ color: var(--mvb-ink-2);
1060
+ }
1061
+ .mvb-field__hint {
1062
+ font-size: 0.8125rem;
1063
+ color: var(--mvb-ink-3);
1064
+ }
1065
+ .mvb-field--error .mvb-in, .mvb-field--error .mvb-pick {
1066
+ border-color: var(--mvb-danger);
1067
+ box-shadow: 0 0 0 3px var(--mvb-danger);
1068
+ @supports (color: color-mix(in lab, red, red)) {
1069
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--mvb-danger) 14%, transparent);
1070
+ }
1071
+ }
1072
+ .mvb-field--error .mvb-field__hint {
1073
+ color: var(--mvb-danger);
1074
+ }
1075
+ .mvb-field--good .mvb-in, .mvb-field--good .mvb-pick {
1076
+ border-color: var(--mvb-aurora);
1077
+ box-shadow: 0 0 0 3px var(--mvb-aurora);
1078
+ @supports (color: color-mix(in lab, red, red)) {
1079
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--mvb-aurora) 14%, transparent);
1080
+ }
1081
+ }
1082
+ .mvb-field--good .mvb-field__hint {
1083
+ color: var(--mvb-aurora);
1084
+ }
1085
+ .mvb-in {
1086
+ width: 100%;
1087
+ min-width: 0px;
1088
+ border-radius: var(--mvb-r1);
1089
+ border-style: var(--tw-border-style);
1090
+ border-width: 1px;
1091
+ border-color: var(--mvb-orbit);
1092
+ background-color: var(--mvb-deck);
1093
+ padding-inline: calc(var(--spacing) * 3);
1094
+ padding-block: calc(var(--spacing) * 2.5);
1095
+ color: var(--mvb-ink);
1096
+ transition-property: border-color,box-shadow;
1097
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1098
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1099
+ --tw-duration: 150ms;
1100
+ transition-duration: 150ms;
1101
+ }
1102
+ .mvb-in:hover {
1103
+ border-color: var(--mvb-orbit-hard);
1104
+ }
1105
+ .mvb-in:focus {
1106
+ border-color: var(--mvb-comet);
1107
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1108
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1109
+ --tw-ring-color: var(--mvb-nebula);
1110
+ --tw-outline-style: none;
1111
+ outline-style: none;
1112
+ }
1113
+ .mvb-in::placeholder {
1114
+ color: var(--mvb-ink-3);
1115
+ }
1116
+ .mvb-in[disabled], .mvb-in[readonly] {
1117
+ cursor: default;
1118
+ background-color: var(--mvb-deck-2);
1119
+ color: var(--mvb-ink-3);
1120
+ }
1121
+ .mvb-in[disabled] {
1122
+ cursor: not-allowed;
1123
+ opacity: 70%;
1124
+ }
1125
+ .mvb-in--area {
1126
+ min-height: calc(var(--spacing) * 24);
1127
+ resize: vertical;
1128
+ padding-block: calc(var(--spacing) * 2.5);
1129
+ font-family: var(--mvb-mono);
1130
+ font-size: 0.875rem;
1131
+ --tw-leading: var(--leading-normal);
1132
+ line-height: var(--leading-normal);
1133
+ }
1134
+ .mvb-in--num {
1135
+ width: 96px;
1136
+ }
1137
+ .mvb-in--mono {
1138
+ font-family: var(--mvb-mono);
1139
+ font-size: 0.875rem;
1140
+ }
1141
+ .mvb-in--select {
1142
+ cursor: pointer;
1143
+ padding-block: calc(var(--spacing) * 2.5);
1144
+ padding-inline-end: calc(var(--spacing) * 9);
1145
+ appearance: none;
1146
+ -webkit-appearance: none;
1147
+ background-image: var(--mvb-caret);
1148
+ background-repeat: no-repeat;
1149
+ background-position: right 12px center;
1150
+ background-size: 14px;
1151
+ }
1152
+ .mvb-in--file {
1153
+ padding: calc(var(--spacing) * 1.5);
1154
+ }
1155
+ .mvb-in--file::file-selector-button {
1156
+ margin-inline-end: calc(var(--spacing) * 2.5);
1157
+ cursor: pointer;
1158
+ border-radius: var(--mvb-r1);
1159
+ border-style: var(--tw-border-style);
1160
+ border-width: 1px;
1161
+ border-color: var(--mvb-orbit-hard);
1162
+ background-color: var(--mvb-deck-2);
1163
+ padding-inline: calc(var(--spacing) * 2.5);
1164
+ padding-block: var(--spacing);
1165
+ font-size: 0.8125rem;
1166
+ --tw-font-weight: var(--font-weight-semibold);
1167
+ font-weight: var(--font-weight-semibold);
1168
+ color: var(--mvb-ink);
1169
+ }
1170
+ .mvb-check {
1171
+ display: inline-flex;
1172
+ cursor: pointer;
1173
+ align-items: center;
1174
+ gap: calc(var(--spacing) * 2);
1175
+ border-radius: var(--mvb-r1);
1176
+ border-style: var(--tw-border-style);
1177
+ border-width: 1px;
1178
+ border-color: var(--mvb-orbit);
1179
+ background-color: var(--mvb-deck);
1180
+ padding-block: calc(var(--spacing) * 2);
1181
+ padding-inline-start: calc(var(--spacing) * 2.5);
1182
+ padding-inline-end: calc(var(--spacing) * 3);
1183
+ font-size: 0.9375rem;
1184
+ transition-property: border-color,background-color;
1185
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1186
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1187
+ --tw-duration: 150ms;
1188
+ transition-duration: 150ms;
1189
+ }
1190
+ .mvb-check:has(.mvb-check__box:checked) {
1191
+ border-color: var(--mvb-comet);
1192
+ background-color: var(--mvb-nebula);
1193
+ }
1194
+ .mvb-check__box {
1195
+ margin: 0px;
1196
+ width: calc(var(--spacing) * 4);
1197
+ height: calc(var(--spacing) * 4);
1198
+ accent-color: var(--mvb-comet);
1199
+ }
1200
+ .mvb-switch {
1201
+ display: inline-flex;
1202
+ cursor: pointer;
1203
+ align-items: center;
1204
+ gap: calc(var(--spacing) * 2.5);
1205
+ font-size: 0.9375rem;
1206
+ -webkit-user-select: none;
1207
+ user-select: none;
1208
+ }
1209
+ .mvb-switch__box {
1210
+ pointer-events: none;
1211
+ position: absolute;
1212
+ opacity: 0%;
1213
+ }
1214
+ .mvb-switch__track {
1215
+ position: relative;
1216
+ height: 22px;
1217
+ width: 38px;
1218
+ border-radius: calc(infinity * 1px);
1219
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1220
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1221
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1222
+ --tw-duration: 150ms;
1223
+ transition-duration: 150ms;
1224
+ background: var(--mvb-track);
1225
+ }
1226
+ .mvb-switch__thumb {
1227
+ position: absolute;
1228
+ top: calc(var(--spacing) * 0.5);
1229
+ left: calc(var(--spacing) * 0.5);
1230
+ width: 18px;
1231
+ height: 18px;
1232
+ border-radius: calc(infinity * 1px);
1233
+ background-color: var(--mvb-deck);
1234
+ transition-property: transform, translate, scale, rotate;
1235
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1236
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1237
+ --tw-duration: 150ms;
1238
+ transition-duration: 150ms;
1239
+ box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
1240
+ }
1241
+ .mvb-switch__box:checked + .mvb-switch__track {
1242
+ background: var(--mvb-comet);
1243
+ }
1244
+ .mvb-switch__box:checked + .mvb-switch__track .mvb-switch__thumb {
1245
+ --tw-translate-x: calc(var(--spacing) * 4);
1246
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1247
+ }
1248
+ .mvb-switch__box:focus-visible + .mvb-switch__track {
1249
+ box-shadow: 0 0 0 3px var(--mvb-nebula);
1250
+ }
1251
+ .mvb-range {
1252
+ width: 100%;
1253
+ accent-color: var(--mvb-comet);
1254
+ }
1255
+ .mvb-pick {
1256
+ height: calc(var(--spacing) * 10);
1257
+ width: 52px;
1258
+ flex: none;
1259
+ cursor: pointer;
1260
+ border-radius: var(--mvb-r1);
1261
+ border-style: var(--tw-border-style);
1262
+ border-width: 1px;
1263
+ border-color: var(--mvb-orbit);
1264
+ background-color: var(--mvb-deck);
1265
+ padding: calc(var(--spacing) * 0.5);
1266
+ }
1267
+ .mvb-pick:hover {
1268
+ border-color: var(--mvb-orbit-hard);
1269
+ }
1270
+ .mvb-pick:focus {
1271
+ border-color: var(--mvb-comet);
1272
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1273
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1274
+ --tw-ring-color: var(--mvb-nebula);
1275
+ --tw-outline-style: none;
1276
+ outline-style: none;
1277
+ }
1278
+ .mvb-chips {
1279
+ display: flex;
1280
+ flex-wrap: wrap;
1281
+ gap: calc(var(--spacing) * 1.5);
1282
+ }
1283
+ .mvb-chip {
1284
+ min-height: 38px;
1285
+ cursor: pointer;
1286
+ border-radius: var(--mvb-r1);
1287
+ border-style: var(--tw-border-style);
1288
+ border-width: 1px;
1289
+ border-color: var(--mvb-orbit);
1290
+ background-color: var(--mvb-deck);
1291
+ padding-inline: 13px;
1292
+ font-size: var(--text-sm);
1293
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1294
+ --tw-font-weight: var(--font-weight-medium);
1295
+ font-weight: var(--font-weight-medium);
1296
+ color: var(--mvb-ink-2);
1297
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1298
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1299
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1300
+ --tw-duration: 150ms;
1301
+ transition-duration: 150ms;
1302
+ }
1303
+ .mvb-chip:hover {
1304
+ border-color: var(--mvb-orbit-hard);
1305
+ color: var(--mvb-ink);
1306
+ }
1307
+ .mvb-chip.mvb-on {
1308
+ border-color: var(--mvb-comet);
1309
+ background-color: var(--mvb-nebula);
1310
+ color: var(--mvb-ink);
1311
+ }
1312
+ .mvb-actions {
1313
+ display: flex;
1314
+ flex-wrap: wrap;
1315
+ align-items: center;
1316
+ justify-content: flex-end;
1317
+ gap: calc(var(--spacing) * 2);
1318
+ }
1319
+ .mvb-toolcard__head .mvb-actions, .mvb-toolcard__foot .mvb-actions {
1320
+ width: 100%;
1321
+ }
1322
+ .mvb-stack > .mvb-actions {
1323
+ margin-top: var(--spacing);
1324
+ }
1325
+ .mvb-btn {
1326
+ display: inline-flex;
1327
+ min-height: calc(var(--spacing) * 10);
1328
+ cursor: pointer;
1329
+ align-items: center;
1330
+ justify-content: center;
1331
+ gap: 7px;
1332
+ border-radius: var(--mvb-r1);
1333
+ border-style: var(--tw-border-style);
1334
+ border-width: 1px;
1335
+ border-color: transparent;
1336
+ padding-inline: calc(var(--spacing) * 4);
1337
+ font-size: 0.9375rem;
1338
+ --tw-font-weight: var(--font-weight-semibold);
1339
+ font-weight: var(--font-weight-semibold);
1340
+ text-decoration-line: none;
1341
+ transition-property: background-color,border-color,color,transform;
1342
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1343
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1344
+ --tw-duration: 150ms;
1345
+ transition-duration: 150ms;
1346
+ }
1347
+ .mvb-btn:active {
1348
+ scale: 0.97;
1349
+ }
1350
+ .mvb-btn--fill {
1351
+ border-color: var(--mvb-comet);
1352
+ background-color: var(--mvb-comet);
1353
+ color: var(--mvb-on-comet);
1354
+ }
1355
+ .mvb-btn--fill:hover {
1356
+ border-color: var(--mvb-comet-deep);
1357
+ background-color: var(--mvb-comet-deep);
1358
+ }
1359
+ .mvb-btn--plain {
1360
+ border-color: var(--mvb-orbit);
1361
+ background-color: var(--mvb-deck);
1362
+ color: var(--mvb-ink);
1363
+ }
1364
+ .mvb-btn--plain:hover {
1365
+ border-color: var(--mvb-orbit-hard);
1366
+ }
1367
+ .mvb-btn--quiet {
1368
+ background-color: transparent;
1369
+ padding-inline: calc(var(--spacing) * 2);
1370
+ color: var(--mvb-ink-2);
1371
+ }
1372
+ .mvb-btn--quiet:hover {
1373
+ background-color: var(--mvb-deck-2);
1374
+ color: var(--mvb-ink);
1375
+ }
1376
+ .mvb-btn:disabled {
1377
+ cursor: not-allowed;
1378
+ opacity: 45%;
1379
+ }
1380
+ .mvb-out {
1381
+ margin: 0px;
1382
+ max-height: 340px;
1383
+ width: 100%;
1384
+ overflow: auto;
1385
+ border-radius: var(--mvb-r1);
1386
+ border-style: var(--tw-border-style);
1387
+ border-width: 1px;
1388
+ border-color: var(--mvb-orbit);
1389
+ background-color: var(--mvb-deck-2);
1390
+ padding-inline: calc(var(--spacing) * 3.5);
1391
+ padding-block: calc(var(--spacing) * 3);
1392
+ font-family: var(--mvb-mono);
1393
+ font-size: 0.875rem;
1394
+ --tw-leading: var(--leading-normal);
1395
+ line-height: var(--leading-normal);
1396
+ white-space: pre-wrap;
1397
+ overflow-wrap: anywhere;
1398
+ }
1399
+ textarea.mvb-out {
1400
+ resize: vertical;
1401
+ }
1402
+ pre.mvb-out:empty {
1403
+ --tw-border-style: dashed;
1404
+ border-style: dashed;
1405
+ background-color: transparent;
1406
+ }
1407
+ .mvb-note {
1408
+ border-inline-start-style: var(--tw-border-style);
1409
+ border-inline-start-width: 3px;
1410
+ border-color: transparent;
1411
+ padding-inline-start: calc(var(--spacing) * 2);
1412
+ font-size: var(--text-sm);
1413
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1414
+ color: var(--mvb-ink-3);
1415
+ }
1416
+ .mvb-note--error {
1417
+ border-inline-start-color: var(--mvb-danger);
1418
+ color: var(--mvb-danger);
1419
+ }
1420
+ .mvb-note--good {
1421
+ border-inline-start-color: var(--mvb-aurora);
1422
+ color: var(--mvb-aurora);
1423
+ }
1424
+ .mvb-blank {
1425
+ display: grid;
1426
+ justify-items: center;
1427
+ gap: calc(var(--spacing) * 2.5);
1428
+ border-radius: var(--mvb-r2);
1429
+ border-style: var(--tw-border-style);
1430
+ border-width: 1px;
1431
+ --tw-border-style: dashed;
1432
+ border-style: dashed;
1433
+ border-color: var(--mvb-orbit-hard);
1434
+ background-color: var(--mvb-deck-2);
1435
+ padding-inline: calc(var(--spacing) * 4);
1436
+ padding-block: clamp(28px, 6vw, 56px);
1437
+ text-align: center;
1438
+ color: var(--mvb-ink-3);
1439
+ }
1440
+ .mvb-blank p {
1441
+ max-width: 34ch;
1442
+ }
1443
+ .mvb-code {
1444
+ overflow-x: auto;
1445
+ border-radius: var(--mvb-r1);
1446
+ border-style: var(--tw-border-style);
1447
+ border-width: 1px;
1448
+ border-color: var(--mvb-orbit);
1449
+ background-color: var(--mvb-deck-2);
1450
+ padding-inline: calc(var(--spacing) * 3.5);
1451
+ padding-block: calc(var(--spacing) * 3);
1452
+ font-family: var(--mvb-mono);
1453
+ font-size: 0.875rem;
1454
+ white-space: pre-wrap;
1455
+ }
1456
+ :not(pre) > code {
1457
+ border-radius: 4px;
1458
+ background-color: var(--mvb-deck-2);
1459
+ padding-inline: 5px;
1460
+ padding-block: 1px;
1461
+ font-family: var(--mvb-mono);
1462
+ font-size: 0.92em;
1463
+ }
1464
+ .mvb-about {
1465
+ margin-top: calc(var(--spacing) * 8);
1466
+ display: grid;
1467
+ max-width: 62ch;
1468
+ gap: calc(var(--spacing) * 2.5);
1469
+ border-top-style: var(--tw-border-style);
1470
+ border-top-width: 1px;
1471
+ border-color: var(--mvb-orbit);
1472
+ padding-top: calc(var(--spacing) * 6);
1473
+ }
1474
+ .mvb-about__title {
1475
+ font-size: var(--text-lg);
1476
+ line-height: var(--tw-leading, var(--text-lg--line-height));
1477
+ --tw-font-weight: var(--font-weight-bold);
1478
+ font-weight: var(--font-weight-bold);
1479
+ --tw-tracking: -0.01em;
1480
+ letter-spacing: -0.01em;
1481
+ }
1482
+ .mvb-about p {
1483
+ text-wrap: pretty;
1484
+ color: var(--mvb-ink-2);
1485
+ }
1486
+ .mvb-veil {
1487
+ position: fixed;
1488
+ inset: 0px;
1489
+ z-index: 80;
1490
+ display: grid;
1491
+ align-items: flex-start;
1492
+ justify-items: center;
1493
+ padding-inline: calc(var(--spacing) * 5);
1494
+ padding-top: clamp(60px, 10vh, 120px);
1495
+ padding-bottom: calc(var(--spacing) * 5);
1496
+ background: var(--mvb-scrim);
1497
+ opacity: 0;
1498
+ transition: opacity 180ms ease;
1499
+ }
1500
+ .mvb-veil.mvb-open {
1501
+ opacity: 1;
1502
+ }
1503
+ .mvb-veil.mvb-off {
1504
+ opacity: 0;
1505
+ }
1506
+ .mvb-modal {
1507
+ width: min(440px, 100%);
1508
+ border-radius: var(--mvb-r3);
1509
+ border-style: var(--tw-border-style);
1510
+ border-width: 1px;
1511
+ border-color: var(--mvb-orbit);
1512
+ background-color: var(--mvb-deck);
1513
+ padding: calc(var(--spacing) * 7);
1514
+ text-align: center;
1515
+ transform: translateY(14px) scale(0.96);
1516
+ transition: transform 220ms var(--mvb-ease);
1517
+ }
1518
+ .mvb-veil.mvb-open .mvb-modal {
1519
+ transform: none;
1520
+ }
1521
+ .mvb-veil.mvb-off .mvb-modal {
1522
+ transform: translateY(10px) scale(0.97);
1523
+ }
1524
+ .mvb-modal__art img {
1525
+ margin-inline: auto;
1526
+ display: block;
1527
+ width: 88px;
1528
+ height: 88px;
1529
+ border-radius: 22px;
1530
+ }
1531
+ .mvb-modal__title {
1532
+ margin-top: calc(var(--spacing) * 3.5);
1533
+ font-size: 1.375rem;
1534
+ --tw-font-weight: var(--font-weight-bold);
1535
+ font-weight: var(--font-weight-bold);
1536
+ --tw-tracking: -0.02em;
1537
+ letter-spacing: -0.02em;
1538
+ }
1539
+ .mvb-modal__body p {
1540
+ margin-top: calc(var(--spacing) * 2);
1541
+ font-size: 0.96875rem;
1542
+ text-wrap: pretty;
1543
+ color: var(--mvb-ink-2);
1544
+ }
1545
+ .mvb-modal__actions {
1546
+ margin-top: calc(var(--spacing) * 5);
1547
+ display: grid;
1548
+ gap: calc(var(--spacing) * 2);
1549
+ }
1550
+ .mvb-vers {
1551
+ margin-top: 18px;
1552
+ overflow: hidden;
1553
+ border-radius: var(--mvb-r2);
1554
+ border-style: var(--tw-border-style);
1555
+ border-width: 1px;
1556
+ border-color: var(--mvb-orbit);
1557
+ }
1558
+ .mvb-vers__row {
1559
+ display: flex;
1560
+ align-items: center;
1561
+ justify-content: space-between;
1562
+ gap: calc(var(--spacing) * 3);
1563
+ padding-inline: calc(var(--spacing) * 4);
1564
+ padding-block: calc(var(--spacing) * 3);
1565
+ }
1566
+ .mvb-vers__row + .mvb-vers__row {
1567
+ border-top-style: var(--tw-border-style);
1568
+ border-top-width: 1px;
1569
+ border-color: var(--mvb-orbit);
1570
+ }
1571
+ .mvb-vers__label {
1572
+ font-size: var(--text-sm);
1573
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1574
+ color: var(--mvb-ink-3);
1575
+ }
1576
+ .mvb-vers__val {
1577
+ font-family: var(--mvb-mono);
1578
+ font-size: 0.9375rem;
1579
+ --tw-font-weight: var(--font-weight-semibold);
1580
+ font-weight: var(--font-weight-semibold);
1581
+ }
1582
+ .mvb-vers__row--new .mvb-vers__val {
1583
+ color: var(--mvb-comet);
1584
+ }
1585
+ .mvb-vers__hint {
1586
+ margin-top: calc(var(--spacing) * 3.5);
1587
+ font-size: var(--text-sm);
1588
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1589
+ }
1590
+ .mvb-cmd {
1591
+ margin-top: calc(var(--spacing) * 2.5);
1592
+ display: flex;
1593
+ flex-wrap: wrap;
1594
+ align-items: center;
1595
+ gap: calc(var(--spacing) * 2);
1596
+ border-radius: var(--mvb-r2);
1597
+ border-style: var(--tw-border-style);
1598
+ border-width: 1px;
1599
+ border-color: var(--mvb-orbit);
1600
+ background-color: var(--mvb-deck-2);
1601
+ padding-block: calc(var(--spacing) * 2.5);
1602
+ padding-inline-start: calc(var(--spacing) * 4);
1603
+ padding-inline-end: calc(var(--spacing) * 2.5);
1604
+ }
1605
+ .mvb-cmd__text {
1606
+ min-width: 0px;
1607
+ flex: 1;
1608
+ font-family: var(--mvb-mono);
1609
+ font-size: var(--text-sm);
1610
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1611
+ overflow-wrap: anywhere;
1612
+ }
1613
+ .mvb-veil--pal {
1614
+ padding-top: clamp(60px, 12vh, 140px);
1615
+ }
1616
+ .mvb-veil--pal .mvb-modal {
1617
+ width: min(640px, 100%);
1618
+ overflow: hidden;
1619
+ padding: 0px;
1620
+ text-align: start;
1621
+ }
1622
+ .mvb-pal__head {
1623
+ display: flex;
1624
+ align-items: center;
1625
+ gap: calc(var(--spacing) * 3);
1626
+ border-bottom-style: var(--tw-border-style);
1627
+ border-bottom-width: 1px;
1628
+ border-color: var(--mvb-orbit);
1629
+ padding-inline: 18px;
1630
+ padding-block: calc(var(--spacing) * 4);
1631
+ }
1632
+ .mvb-pal__icon {
1633
+ color: var(--mvb-ink-3);
1634
+ }
1635
+ .mvb-pal__in {
1636
+ height: calc(var(--spacing) * 10);
1637
+ min-width: 0px;
1638
+ flex: 1;
1639
+ border-style: var(--tw-border-style);
1640
+ border-width: 0px;
1641
+ background-color: transparent;
1642
+ font-size: 1.0625rem;
1643
+ }
1644
+ .mvb-pal__in:focus {
1645
+ --tw-outline-style: none;
1646
+ outline-style: none;
1647
+ }
1648
+ .mvb-pal__in::placeholder {
1649
+ color: var(--mvb-ink-3);
1650
+ }
1651
+ .mvb-pal__count {
1652
+ margin: 0px;
1653
+ padding-inline: 18px;
1654
+ padding-top: calc(var(--spacing) * 2);
1655
+ font-size: 0.8125rem;
1656
+ color: var(--mvb-ink-3);
1657
+ }
1658
+ .mvb-pal__list {
1659
+ margin: 0px;
1660
+ margin-top: calc(var(--spacing) * 1.5);
1661
+ max-height: min(60vh, 360px);
1662
+ overflow-y: auto;
1663
+ padding-inline: calc(var(--spacing) * 2);
1664
+ padding-bottom: calc(var(--spacing) * 2);
1665
+ }
1666
+ .mvb-pal__item {
1667
+ display: flex;
1668
+ width: 100%;
1669
+ cursor: pointer;
1670
+ align-items: center;
1671
+ gap: calc(var(--spacing) * 3);
1672
+ border-radius: var(--mvb-r1);
1673
+ border-style: var(--tw-border-style);
1674
+ border-width: 0px;
1675
+ background-color: transparent;
1676
+ padding-inline: calc(var(--spacing) * 3);
1677
+ padding-block: calc(var(--spacing) * 2.5);
1678
+ text-align: start;
1679
+ color: var(--mvb-ink);
1680
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1681
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1682
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1683
+ --tw-duration: 150ms;
1684
+ transition-duration: 150ms;
1685
+ }
1686
+ .mvb-pal__item.mvb-on {
1687
+ background-color: var(--mvb-nebula);
1688
+ }
1689
+ .mvb-pal__item.mvb-on .mvb-pal__name {
1690
+ color: var(--mvb-comet);
1691
+ }
1692
+ .mvb-pal__sigil {
1693
+ display: grid;
1694
+ width: calc(var(--spacing) * 8);
1695
+ height: calc(var(--spacing) * 8);
1696
+ flex: none;
1697
+ place-items: center;
1698
+ border-radius: var(--radius-lg);
1699
+ background-color: var(--mvb-deck-2);
1700
+ color: var(--mvb-comet);
1701
+ }
1702
+ .mvb-pal__sigil .mvb-ico {
1703
+ width: calc(var(--spacing) * 4);
1704
+ height: calc(var(--spacing) * 4);
1705
+ }
1706
+ .mvb-pal__text {
1707
+ display: grid;
1708
+ min-width: 0px;
1709
+ flex: 1;
1710
+ gap: 1px;
1711
+ }
1712
+ .mvb-pal__name {
1713
+ font-size: 0.9375rem;
1714
+ --tw-font-weight: var(--font-weight-semibold);
1715
+ font-weight: var(--font-weight-semibold);
1716
+ --tw-tracking: -0.01em;
1717
+ letter-spacing: -0.01em;
1718
+ }
1719
+ .mvb-pal__note {
1720
+ overflow: hidden;
1721
+ font-size: 0.84375rem;
1722
+ text-overflow: ellipsis;
1723
+ white-space: nowrap;
1724
+ color: var(--mvb-ink-2);
1725
+ }
1726
+ .mvb-pal__cat {
1727
+ font-size: 0.8125rem;
1728
+ white-space: nowrap;
1729
+ color: var(--mvb-ink-3);
1730
+ }
1731
+ .mvb-pal__empty {
1732
+ padding: 18px;
1733
+ font-size: var(--text-sm);
1734
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1735
+ color: var(--mvb-ink-3);
1736
+ }
1737
+ .mvb-pal__foot {
1738
+ margin: 0px;
1739
+ display: flex;
1740
+ flex-wrap: wrap;
1741
+ align-items: center;
1742
+ gap: calc(var(--spacing) * 2.5);
1743
+ border-top-style: var(--tw-border-style);
1744
+ border-top-width: 1px;
1745
+ border-color: var(--mvb-orbit);
1746
+ padding-inline: 18px;
1747
+ padding-block: calc(var(--spacing) * 2.5);
1748
+ font-size: 0.8125rem;
1749
+ color: var(--mvb-ink-3);
1750
+ }
1751
+ .mvb-veil--help {
1752
+ padding-top: clamp(60px, 10vh, 120px);
1753
+ }
1754
+ .mvb-veil--help .mvb-modal {
1755
+ width: min(560px, 100%);
1756
+ overflow: hidden;
1757
+ padding: calc(var(--spacing) * 7);
1758
+ text-align: start;
1759
+ }
1760
+ .mvb-help__head {
1761
+ margin-bottom: calc(var(--spacing) * 3);
1762
+ display: flex;
1763
+ align-items: center;
1764
+ gap: calc(var(--spacing) * 3.5);
1765
+ }
1766
+ .mvb-help__sigil {
1767
+ display: grid;
1768
+ width: calc(var(--spacing) * 11);
1769
+ height: calc(var(--spacing) * 11);
1770
+ place-items: center;
1771
+ border-radius: var(--radius-xl);
1772
+ background-color: var(--mvb-nebula);
1773
+ color: var(--mvb-comet);
1774
+ }
1775
+ .mvb-help__sigil .mvb-ico {
1776
+ width: 22px;
1777
+ height: 22px;
1778
+ }
1779
+ .mvb-help__title {
1780
+ font-size: var(--text-xl);
1781
+ line-height: var(--tw-leading, var(--text-xl--line-height));
1782
+ --tw-font-weight: var(--font-weight-bold);
1783
+ font-weight: var(--font-weight-bold);
1784
+ --tw-tracking: -0.02em;
1785
+ letter-spacing: -0.02em;
1786
+ }
1787
+ .mvb-help__note {
1788
+ margin-bottom: calc(var(--spacing) * 3.5);
1789
+ font-size: 0.96875rem;
1790
+ --tw-leading: var(--leading-normal);
1791
+ line-height: var(--leading-normal);
1792
+ text-wrap: pretty;
1793
+ color: var(--mvb-ink-2);
1794
+ }
1795
+ .mvb-help__steps {
1796
+ margin: 0px;
1797
+ display: grid;
1798
+ list-style-type: none;
1799
+ gap: calc(var(--spacing) * 2.5);
1800
+ padding: 0px;
1801
+ counter-reset: mvb-step;
1802
+ }
1803
+ .mvb-help__steps li {
1804
+ display: grid;
1805
+ grid-template-columns: 22px 1fr;
1806
+ align-items: flex-start;
1807
+ gap: calc(var(--spacing) * 2);
1808
+ font-size: 0.90625rem;
1809
+ --tw-leading: var(--leading-normal);
1810
+ line-height: var(--leading-normal);
1811
+ color: var(--mvb-ink);
1812
+ }
1813
+ .mvb-help__steps li::before {
1814
+ content: counter(mvb-step);
1815
+ counter-increment: mvb-step;
1816
+ display: grid;
1817
+ width: 22px;
1818
+ height: 22px;
1819
+ place-items: center;
1820
+ border-radius: calc(infinity * 1px);
1821
+ background-color: var(--mvb-nebula);
1822
+ font-size: 0.8125rem;
1823
+ --tw-font-weight: var(--font-weight-bold);
1824
+ font-weight: var(--font-weight-bold);
1825
+ color: var(--mvb-comet);
1826
+ --tw-numeric-spacing: tabular-nums;
1827
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
1828
+ }
1829
+ .mvb-foot {
1830
+ margin-top: clamp(56px, 8vw, 96px);
1831
+ border-top-style: var(--tw-border-style);
1832
+ border-top-width: 1px;
1833
+ border-color: var(--mvb-orbit);
1834
+ background-color: var(--mvb-deck-2);
1835
+ }
1836
+ .mvb-foot__in {
1837
+ max-width: var(--mvb-bench);
1838
+ margin-inline: auto;
1839
+ padding-inline: var(--mvb-margin);
1840
+ padding-top: clamp(36px, 5vw, 56px);
1841
+ padding-bottom: clamp(24px, 3vw, 36px);
1842
+ }
1843
+ .mvb-foot__top {
1844
+ display: grid;
1845
+ align-items: flex-start;
1846
+ gap: clamp(20px, 4vw, 56px);
1847
+ @media (width >= 60rem) {
1848
+ grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
1849
+ }
1850
+ }
1851
+ .mvb-foot__brand {
1852
+ display: grid;
1853
+ gap: calc(var(--spacing) * 2.5);
1854
+ }
1855
+ .mvb-foot__mark {
1856
+ display: inline-flex;
1857
+ align-items: center;
1858
+ gap: calc(var(--spacing) * 2.5);
1859
+ font-size: 1.375rem;
1860
+ --tw-font-weight: var(--font-weight-bold);
1861
+ font-weight: var(--font-weight-bold);
1862
+ --tw-tracking: -0.02em;
1863
+ letter-spacing: -0.02em;
1864
+ color: var(--mvb-ink);
1865
+ text-decoration-line: none;
1866
+ }
1867
+ .mvb-foot__mark img {
1868
+ width: 34px;
1869
+ height: 34px;
1870
+ border-radius: 10px;
1871
+ box-shadow: 0 0 0 1px var(--mvb-orbit);
1872
+ }
1873
+ .mvb-foot__tag {
1874
+ max-width: 38ch;
1875
+ font-size: var(--text-sm);
1876
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1877
+ text-wrap: pretty;
1878
+ color: var(--mvb-ink-2);
1879
+ }
1880
+ .mvb-foot__nav {
1881
+ display: grid;
1882
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1883
+ column-gap: clamp(20px, 4vw, 40px);
1884
+ row-gap: calc(var(--spacing) * 1.5);
1885
+ }
1886
+ .mvb-foot__nav h4 {
1887
+ margin: 0px;
1888
+ margin-bottom: calc(var(--spacing) * 2);
1889
+ font-size: 0.8125rem;
1890
+ --tw-font-weight: var(--font-weight-bold);
1891
+ font-weight: var(--font-weight-bold);
1892
+ --tw-tracking: var(--tracking-normal);
1893
+ letter-spacing: var(--tracking-normal);
1894
+ color: var(--mvb-ink-3);
1895
+ text-transform: none;
1896
+ }
1897
+ .mvb-foot__nav ul {
1898
+ display: grid;
1899
+ gap: calc(var(--spacing) * 1.5);
1900
+ }
1901
+ .mvb-foot__nav a {
1902
+ font-size: 0.90625rem;
1903
+ color: var(--mvb-ink-2);
1904
+ text-decoration-line: none;
1905
+ }
1906
+ .mvb-foot__nav a:hover {
1907
+ color: var(--mvb-comet);
1908
+ }
1909
+ .mvb-foot__bottom {
1910
+ margin-top: clamp(24px, 4vw, 36px);
1911
+ display: flex;
1912
+ flex-wrap: wrap;
1913
+ align-items: center;
1914
+ column-gap: clamp(14px, 3vw, 28px);
1915
+ row-gap: calc(var(--spacing) * 1.5);
1916
+ border-top-style: var(--tw-border-style);
1917
+ border-top-width: 1px;
1918
+ border-color: var(--mvb-orbit);
1919
+ padding-top: 18px;
1920
+ }
1921
+ .mvb-foot__legal {
1922
+ display: flex;
1923
+ align-items: center;
1924
+ gap: 7px;
1925
+ font-size: 0.84375rem;
1926
+ color: var(--mvb-ink-3);
1927
+ }
1928
+ .mvb-foot__count {
1929
+ --tw-numeric-spacing: tabular-nums;
1930
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
1931
+ }
1932
+ .mvb-foot__count:empty {
1933
+ display: none;
1934
+ }
1935
+ .mvb-version {
1936
+ display: inline-flex;
1937
+ min-height: calc(var(--spacing) * 7);
1938
+ cursor: pointer;
1939
+ align-items: center;
1940
+ gap: calc(var(--spacing) * 1.5);
1941
+ border-radius: calc(infinity * 1px);
1942
+ border-style: var(--tw-border-style);
1943
+ border-width: 1px;
1944
+ border-color: var(--mvb-orbit);
1945
+ background-color: transparent;
1946
+ padding-inline: calc(var(--spacing) * 2.5);
1947
+ padding-block: 3px;
1948
+ font-family: var(--mvb-sans);
1949
+ font-size: 0.8125rem;
1950
+ color: var(--mvb-ink-3);
1951
+ --tw-numeric-spacing: tabular-nums;
1952
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
1953
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1954
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1955
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1956
+ --tw-duration: 150ms;
1957
+ transition-duration: 150ms;
1958
+ }
1959
+ .mvb-version:hover {
1960
+ border-color: var(--mvb-orbit-hard);
1961
+ color: var(--mvb-ink);
1962
+ }
1963
+ .mvb-version:focus-visible {
1964
+ outline-style: var(--tw-outline-style);
1965
+ outline-width: 2px;
1966
+ outline-offset: 2px;
1967
+ outline-color: var(--mvb-comet);
1968
+ }
1969
+ .mvb-version--new {
1970
+ border-color: var(--mvb-comet);
1971
+ background-color: var(--mvb-nebula);
1972
+ --tw-font-weight: var(--font-weight-semibold);
1973
+ font-weight: var(--font-weight-semibold);
1974
+ color: var(--mvb-comet);
1975
+ }
1976
+ .mvb-version--new:hover {
1977
+ background-color: var(--mvb-comet);
1978
+ color: var(--mvb-on-comet);
1979
+ }
1980
+ .mvb-version .mvb-ico {
1981
+ width: 15px;
1982
+ height: 15px;
1983
+ }
1984
+ .mvb-toast {
1985
+ pointer-events: none;
1986
+ position: fixed;
1987
+ bottom: calc(var(--spacing) * 6);
1988
+ left: calc(1 / 2 * 100%);
1989
+ z-index: 90;
1990
+ border-radius: var(--mvb-r1);
1991
+ background-color: var(--mvb-ink);
1992
+ padding-inline: calc(var(--spacing) * 4);
1993
+ padding-block: calc(var(--spacing) * 2.5);
1994
+ font-size: var(--text-sm);
1995
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1996
+ --tw-font-weight: var(--font-weight-semibold);
1997
+ font-weight: var(--font-weight-semibold);
1998
+ color: var(--mvb-void);
1999
+ transform: translate(-50%, 12px);
2000
+ opacity: 0;
2001
+ transition: opacity 150ms ease, transform 150ms ease;
2002
+ }
2003
+ .mvb-toast.mvb-on {
2004
+ opacity: 1;
2005
+ transform: translate(-50%, 0);
2006
+ }
2007
+ .mvb-wheel {
2008
+ height: auto;
2009
+ width: min(320px, 100%);
2010
+ }
2011
+ .mvb-wheel__status {
2012
+ font-size: var(--text-xl);
2013
+ line-height: var(--tw-leading, var(--text-xl--line-height));
2014
+ --tw-font-weight: var(--font-weight-bold);
2015
+ font-weight: var(--font-weight-bold);
2016
+ --tw-tracking: -0.01em;
2017
+ letter-spacing: -0.01em;
2018
+ text-wrap: balance;
2019
+ }
2020
+ .mvb-wheel__history {
2021
+ display: flex;
2022
+ max-width: 340px;
2023
+ flex-wrap: wrap;
2024
+ justify-content: center;
2025
+ gap: calc(var(--spacing) * 1.5);
2026
+ }
2027
+ .mvb-wheel__chip {
2028
+ border-radius: calc(infinity * 1px);
2029
+ border-style: var(--tw-border-style);
2030
+ border-width: 1px;
2031
+ border-color: var(--mvb-orbit);
2032
+ background-color: var(--mvb-deck-2);
2033
+ padding-inline: calc(var(--spacing) * 2.5);
2034
+ padding-block: var(--spacing);
2035
+ font-size: 0.8125rem;
2036
+ --tw-font-weight: var(--font-weight-semibold);
2037
+ font-weight: var(--font-weight-semibold);
2038
+ }
2039
+ .mvb-coin {
2040
+ display: grid;
2041
+ width: calc(var(--spacing) * 32);
2042
+ height: calc(var(--spacing) * 32);
2043
+ place-items: center;
2044
+ border-radius: calc(infinity * 1px);
2045
+ background-color: var(--mvb-comet);
2046
+ font-size: 44px;
2047
+ --tw-font-weight: var(--font-weight-bold);
2048
+ font-weight: var(--font-weight-bold);
2049
+ color: var(--mvb-on-comet);
2050
+ -webkit-user-select: none;
2051
+ user-select: none;
2052
+ }
2053
+ .mvb-coin.mvb-toss {
2054
+ animation: mvb-toss 450ms ease;
2055
+ }
2056
+ @keyframes mvb-toss {
2057
+ 0% {
2058
+ transform: scale(1) rotate(0deg);
2059
+ }
2060
+ 50% {
2061
+ transform: scale(1.12) rotate(180deg);
2062
+ }
2063
+ 100% {
2064
+ transform: scale(1) rotate(360deg);
2065
+ }
2066
+ }
2067
+ .mvb-flip__result {
2068
+ font-size: 1.1875rem;
2069
+ --tw-font-weight: var(--font-weight-bold);
2070
+ font-weight: var(--font-weight-bold);
2071
+ --tw-tracking: -0.01em;
2072
+ letter-spacing: -0.01em;
2073
+ }
2074
+ .mvb-meter {
2075
+ height: calc(var(--spacing) * 2);
2076
+ overflow: hidden;
2077
+ border-radius: calc(infinity * 1px);
2078
+ background-color: var(--mvb-deck-2);
2079
+ }
2080
+ .mvb-meter__fill {
2081
+ height: 100%;
2082
+ width: 0px;
2083
+ border-radius: calc(infinity * 1px);
2084
+ transition-property: width,background-color;
2085
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2086
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2087
+ --tw-duration: 150ms;
2088
+ transition-duration: 150ms;
2089
+ background: var(--mvb-orbit-hard);
2090
+ }
2091
+ .mvb-meter__fill.mvb-weak {
2092
+ background: var(--mvb-danger);
2093
+ }
2094
+ .mvb-meter__fill.mvb-ok {
2095
+ background: var(--mvb-comet);
2096
+ }
2097
+ .mvb-meter__fill.mvb-strong {
2098
+ background: var(--mvb-aurora);
2099
+ }
2100
+ .mvb-swatch {
2101
+ height: calc(var(--spacing) * 14);
2102
+ border-radius: var(--mvb-r1);
2103
+ border-style: var(--tw-border-style);
2104
+ border-width: 1px;
2105
+ border-color: var(--mvb-orbit-hard);
2106
+ background-color: var(--mvb-deck-2);
2107
+ }
2108
+ .mvb-cases {
2109
+ display: grid;
2110
+ gap: var(--spacing);
2111
+ }
2112
+ .mvb-case {
2113
+ display: flex;
2114
+ width: 100%;
2115
+ cursor: pointer;
2116
+ align-items: baseline;
2117
+ justify-content: space-between;
2118
+ gap: calc(var(--spacing) * 3);
2119
+ border-radius: var(--mvb-r1);
2120
+ border-style: var(--tw-border-style);
2121
+ border-width: 1px;
2122
+ border-color: transparent;
2123
+ background-color: transparent;
2124
+ padding-inline: calc(var(--spacing) * 3);
2125
+ padding-block: 9px;
2126
+ text-align: start;
2127
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2128
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2129
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2130
+ --tw-duration: 150ms;
2131
+ transition-duration: 150ms;
2132
+ }
2133
+ .mvb-case:hover {
2134
+ background-color: var(--mvb-deck-2);
2135
+ }
2136
+ .mvb-case.mvb-on {
2137
+ border-color: var(--mvb-comet);
2138
+ background-color: var(--mvb-nebula);
2139
+ }
2140
+ .mvb-case__name {
2141
+ flex: none;
2142
+ font-size: 0.8125rem;
2143
+ --tw-font-weight: var(--font-weight-semibold);
2144
+ font-weight: var(--font-weight-semibold);
2145
+ color: var(--mvb-ink-2);
2146
+ }
2147
+ .mvb-case.mvb-on .mvb-case__name {
2148
+ color: var(--mvb-ink);
2149
+ }
2150
+ .mvb-case__value {
2151
+ text-align: end;
2152
+ font-family: var(--mvb-mono);
2153
+ font-size: var(--text-sm);
2154
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2155
+ overflow-wrap: anywhere;
2156
+ }
2157
+ .mvb-drop {
2158
+ display: grid;
2159
+ cursor: pointer;
2160
+ justify-items: center;
2161
+ gap: calc(var(--spacing) * 2);
2162
+ border-radius: var(--mvb-r2);
2163
+ border-style: var(--tw-border-style);
2164
+ border-width: 1px;
2165
+ --tw-border-style: dashed;
2166
+ border-style: dashed;
2167
+ border-color: var(--mvb-orbit-hard);
2168
+ padding-inline: calc(var(--spacing) * 4);
2169
+ padding-block: calc(var(--spacing) * 7);
2170
+ font-size: 0.9375rem;
2171
+ color: var(--mvb-ink-3);
2172
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2173
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2174
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2175
+ --tw-duration: 150ms;
2176
+ transition-duration: 150ms;
2177
+ }
2178
+ .mvb-drop:hover, .mvb-drop.mvb-drag {
2179
+ border-color: var(--mvb-comet);
2180
+ background-color: var(--mvb-nebula);
2181
+ }
2182
+ .mvb-qrview {
2183
+ width: min(420px, 100%);
2184
+ border-radius: var(--mvb-r2);
2185
+ border-style: var(--tw-border-style);
2186
+ border-width: 1px;
2187
+ border-color: var(--mvb-orbit-hard);
2188
+ background-color: var(--color-black);
2189
+ }
2190
+ .mvb-qrcode {
2191
+ height: auto;
2192
+ width: min(300px, 100%);
2193
+ image-rendering: pixelated;
2194
+ }
2195
+ .mvb-scroll {
2196
+ max-height: calc(var(--spacing) * 80);
2197
+ overflow: auto;
2198
+ }
2199
+ .mvb-ttable {
2200
+ width: 100%;
2201
+ border-collapse: collapse;
2202
+ font-family: var(--mvb-mono);
2203
+ font-size: var(--text-sm);
2204
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2205
+ }
2206
+ .mvb-ttable th, .mvb-ttable td {
2207
+ border-bottom-style: var(--tw-border-style);
2208
+ border-bottom-width: 1px;
2209
+ border-color: var(--mvb-orbit);
2210
+ padding-inline: calc(var(--spacing) * 2.5);
2211
+ padding-block: calc(var(--spacing) * 2);
2212
+ text-align: start;
2213
+ overflow-wrap: anywhere;
2214
+ }
2215
+ .mvb-ttable th {
2216
+ font-family: var(--mvb-sans);
2217
+ font-size: 0.8125rem;
2218
+ --tw-font-weight: var(--font-weight-semibold);
2219
+ font-weight: var(--font-weight-semibold);
2220
+ color: var(--mvb-ink-2);
2221
+ }
2222
+ .mvb-ttable tbody tr:last-child th, .mvb-ttable tbody tr:last-child td {
2223
+ border-bottom-style: var(--tw-border-style);
2224
+ border-bottom-width: 0px;
2225
+ }
2226
+ .mvb-secret {
2227
+ display: grid;
2228
+ grid-template-columns: minmax(0,1fr) auto;
2229
+ align-items: center;
2230
+ gap: calc(var(--spacing) * 2);
2231
+ }
2232
+ .mvb-stats {
2233
+ display: grid;
2234
+ gap: calc(var(--spacing) * 2.5);
2235
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
2236
+ }
2237
+ .mvb-stat {
2238
+ display: grid;
2239
+ gap: calc(var(--spacing) * 0.5);
2240
+ border-radius: var(--mvb-r1);
2241
+ border-style: var(--tw-border-style);
2242
+ border-width: 1px;
2243
+ border-color: var(--mvb-orbit);
2244
+ background-color: var(--mvb-deck-2);
2245
+ padding-inline: calc(var(--spacing) * 3.5);
2246
+ padding-block: calc(var(--spacing) * 3);
2247
+ }
2248
+ .mvb-stat__v {
2249
+ font-size: 1.375rem;
2250
+ --tw-font-weight: var(--font-weight-bold);
2251
+ font-weight: var(--font-weight-bold);
2252
+ --tw-tracking: -0.02em;
2253
+ letter-spacing: -0.02em;
2254
+ overflow-wrap: anywhere;
2255
+ --tw-numeric-spacing: tabular-nums;
2256
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
2257
+ }
2258
+ .mvb-stat__k {
2259
+ font-size: 0.8125rem;
2260
+ --tw-font-weight: var(--font-weight-semibold);
2261
+ font-weight: var(--font-weight-semibold);
2262
+ color: var(--mvb-ink-3);
2263
+ }
2264
+ .mvb-diff {
2265
+ display: grid;
2266
+ gap: 1px;
2267
+ overflow: hidden;
2268
+ border-radius: var(--mvb-r1);
2269
+ border-style: var(--tw-border-style);
2270
+ border-width: 1px;
2271
+ border-color: var(--mvb-orbit);
2272
+ background-color: var(--mvb-orbit);
2273
+ }
2274
+ .mvb-diff__row {
2275
+ display: grid;
2276
+ background-color: var(--mvb-deck);
2277
+ font-family: var(--mvb-mono);
2278
+ font-size: 0.84375rem;
2279
+ grid-template-columns: 34px minmax(0, 1fr);
2280
+ }
2281
+ .mvb-diff__row > span {
2282
+ padding-inline: calc(var(--spacing) * 2.5);
2283
+ padding-block: 3px;
2284
+ overflow-wrap: anywhere;
2285
+ white-space: pre-wrap;
2286
+ }
2287
+ .mvb-diff__sign {
2288
+ border-inline-end-style: var(--tw-border-style);
2289
+ border-inline-end-width: 1px;
2290
+ border-color: var(--mvb-orbit);
2291
+ text-align: center;
2292
+ color: var(--mvb-ink-3);
2293
+ -webkit-user-select: none;
2294
+ user-select: none;
2295
+ }
2296
+ .mvb-diff__row--add {
2297
+ background: var(--mvb-aurora);
2298
+ @supports (color: color-mix(in lab, red, red)) {
2299
+ background: color-mix(in srgb, var(--mvb-aurora) 14%, var(--mvb-deck));
2300
+ }
2301
+ }
2302
+ .mvb-diff__row--del {
2303
+ background: var(--mvb-danger);
2304
+ @supports (color: color-mix(in lab, red, red)) {
2305
+ background: color-mix(in srgb, var(--mvb-danger) 12%, var(--mvb-deck));
2306
+ }
2307
+ }
2308
+ .mvb-diff__row--add .mvb-diff__sign {
2309
+ color: var(--mvb-aurora);
2310
+ }
2311
+ .mvb-diff__row--del .mvb-diff__sign {
2312
+ color: var(--mvb-danger);
2313
+ }
2314
+ .mvb-kv {
2315
+ display: grid;
2316
+ gap: 1px;
2317
+ overflow: hidden;
2318
+ border-radius: var(--mvb-r1);
2319
+ border-style: var(--tw-border-style);
2320
+ border-width: 1px;
2321
+ border-color: var(--mvb-orbit);
2322
+ background-color: var(--mvb-orbit);
2323
+ }
2324
+ .mvb-kv__row {
2325
+ display: grid;
2326
+ gap: calc(var(--spacing) * 3);
2327
+ background-color: var(--mvb-deck);
2328
+ padding-inline: calc(var(--spacing) * 3);
2329
+ padding-block: 9px;
2330
+ grid-template-columns: minmax(90px, 34%) minmax(0, 1fr);
2331
+ }
2332
+ .mvb-kv__k {
2333
+ font-size: 0.84375rem;
2334
+ --tw-font-weight: var(--font-weight-semibold);
2335
+ font-weight: var(--font-weight-semibold);
2336
+ overflow-wrap: anywhere;
2337
+ color: var(--mvb-ink-2);
2338
+ }
2339
+ .mvb-kv__v {
2340
+ font-family: var(--mvb-mono);
2341
+ font-size: 0.84375rem;
2342
+ overflow-wrap: anywhere;
2343
+ }
2344
+ .mvb-pane {
2345
+ max-height: 380px;
2346
+ min-height: 120px;
2347
+ overflow: auto;
2348
+ border-radius: var(--mvb-r1);
2349
+ border-style: var(--tw-border-style);
2350
+ border-width: 1px;
2351
+ border-color: var(--mvb-orbit);
2352
+ background-color: var(--mvb-deck-2);
2353
+ padding-inline: calc(var(--spacing) * 4);
2354
+ padding-block: calc(var(--spacing) * 3.5);
2355
+ --tw-leading: var(--leading-normal);
2356
+ line-height: var(--leading-normal);
2357
+ overflow-wrap: anywhere;
2358
+ }
2359
+ .mvb-pane > :first-child {
2360
+ margin-top: 0px;
2361
+ }
2362
+ .mvb-pane > :last-child {
2363
+ margin-bottom: 0px;
2364
+ }
2365
+ .mvb-pane h1, .mvb-pane h2, .mvb-pane h3 {
2366
+ margin-block: calc(var(--spacing) * 4);
2367
+ --tw-tracking: -0.01em;
2368
+ letter-spacing: -0.01em;
2369
+ }
2370
+ .mvb-pane p, .mvb-pane ul, .mvb-pane ol, .mvb-pane pre {
2371
+ margin-bottom: calc(var(--spacing) * 2.5);
2372
+ }
2373
+ .mvb-pane ul, .mvb-pane ol {
2374
+ padding-inline-start: 22px;
2375
+ }
2376
+ .mvb-pane code {
2377
+ border-radius: 5px;
2378
+ background-color: var(--mvb-deck);
2379
+ padding-inline: 5px;
2380
+ padding-block: 1px;
2381
+ font-family: var(--mvb-mono);
2382
+ font-size: 0.8125rem;
2383
+ }
2384
+ .mvb-pane pre {
2385
+ overflow: auto;
2386
+ border-radius: var(--mvb-r1);
2387
+ background-color: var(--mvb-deck);
2388
+ padding-inline: calc(var(--spacing) * 3);
2389
+ padding-block: calc(var(--spacing) * 2.5);
2390
+ }
2391
+ .mvb-pane pre code {
2392
+ background-color: transparent;
2393
+ padding: 0px;
2394
+ }
2395
+ .mvb-pane a {
2396
+ color: var(--mvb-comet);
2397
+ }
2398
+ .mvb-pane table {
2399
+ border-collapse: collapse;
2400
+ }
2401
+ .mvb-pane th, .mvb-pane td {
2402
+ border-style: var(--tw-border-style);
2403
+ border-width: 1px;
2404
+ border-color: var(--mvb-orbit);
2405
+ padding-inline: 9px;
2406
+ padding-block: calc(var(--spacing) * 1.5);
2407
+ }
2408
+ .mvb-hl {
2409
+ background: var(--mvb-star);
2410
+ @supports (color: color-mix(in lab, red, red)) {
2411
+ background: color-mix(in srgb, var(--mvb-star) 40%, transparent);
2412
+ }
2413
+ border-radius: 3px;
2414
+ }
2415
+ .mvb-hl--on {
2416
+ border-radius: 3px;
2417
+ background-color: var(--mvb-comet);
2418
+ color: var(--mvb-on-comet);
2419
+ }
2420
+ .mvb-swatches {
2421
+ display: grid;
2422
+ gap: calc(var(--spacing) * 2);
2423
+ grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
2424
+ }
2425
+ .mvb-swatchcard {
2426
+ display: grid;
2427
+ cursor: pointer;
2428
+ gap: calc(var(--spacing) * 1.5);
2429
+ border-radius: var(--mvb-r1);
2430
+ border-style: var(--tw-border-style);
2431
+ border-width: 1px;
2432
+ border-color: var(--mvb-orbit);
2433
+ background-color: var(--mvb-deck);
2434
+ padding: calc(var(--spacing) * 2);
2435
+ text-align: start;
2436
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2437
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2438
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2439
+ --tw-duration: 150ms;
2440
+ transition-duration: 150ms;
2441
+ }
2442
+ .mvb-swatchcard:hover {
2443
+ border-color: var(--mvb-comet);
2444
+ }
2445
+ .mvb-swatchcard__chip {
2446
+ height: 52px;
2447
+ border-radius: var(--radius-lg);
2448
+ border-style: var(--tw-border-style);
2449
+ border-width: 1px;
2450
+ border-color: var(--mvb-orbit-hard);
2451
+ }
2452
+ .mvb-swatchcard__code {
2453
+ font-family: var(--mvb-mono);
2454
+ font-size: 0.8125rem;
2455
+ color: var(--mvb-ink-2);
2456
+ }
2457
+ .mvb-preview {
2458
+ display: grid;
2459
+ min-height: calc(var(--spacing) * 40);
2460
+ place-items: center;
2461
+ overflow: hidden;
2462
+ border-radius: var(--mvb-r1);
2463
+ border-style: var(--tw-border-style);
2464
+ border-width: 1px;
2465
+ border-color: var(--mvb-orbit);
2466
+ background-color: var(--mvb-deck-2);
2467
+ padding: 22px;
2468
+ }
2469
+ .mvb-preview__box {
2470
+ display: grid;
2471
+ height: 120px;
2472
+ width: min(200px, 100%);
2473
+ place-items: center;
2474
+ background-color: var(--mvb-comet);
2475
+ font-size: 0.8125rem;
2476
+ color: var(--mvb-on-comet);
2477
+ }
2478
+ .mvb-preview__sample {
2479
+ width: 100%;
2480
+ border-radius: var(--radius-lg);
2481
+ border-style: var(--tw-border-style);
2482
+ border-width: 1px;
2483
+ border-color: var(--mvb-orbit);
2484
+ background-color: var(--mvb-deck);
2485
+ padding-inline: 18px;
2486
+ padding-block: calc(var(--spacing) * 4);
2487
+ }
2488
+ .mvb-slider {
2489
+ display: grid;
2490
+ align-items: center;
2491
+ gap: calc(var(--spacing) * 2.5);
2492
+ grid-template-columns: 88px minmax(0, 1fr) 62px;
2493
+ }
2494
+ .mvb-slider__label {
2495
+ font-size: 0.84375rem;
2496
+ --tw-font-weight: var(--font-weight-semibold);
2497
+ font-weight: var(--font-weight-semibold);
2498
+ color: var(--mvb-ink-2);
2499
+ }
2500
+ .mvb-slider__val {
2501
+ text-align: end;
2502
+ font-family: var(--mvb-mono);
2503
+ font-size: 0.8125rem;
2504
+ color: var(--mvb-ink-2);
2505
+ }
2506
+ @media (max-width: 60rem) {
2507
+ .mvb-toolcard__head, .mvb-toolcard__foot {
2508
+ padding-inline: 18px;
2509
+ }
2510
+ .mvb-toolcard__body {
2511
+ padding: 18px;
2512
+ }
2513
+ .mvb-searchbtn {
2514
+ display: none;
2515
+ }
2516
+ }
2517
+ @media (max-width: 45rem) {
2518
+ .mvb-nav {
2519
+ display: none;
2520
+ }
2521
+ .mvb-bar__menu {
2522
+ display: inline-flex;
2523
+ }
2524
+ .mvb-bar__end {
2525
+ margin-inline-start: auto;
2526
+ }
2527
+ .mvb-hero__in {
2528
+ grid-template-columns: minmax(0, 1fr);
2529
+ }
2530
+ .mvb-hero__orbit {
2531
+ display: none;
2532
+ }
2533
+ .mvb-card {
2534
+ padding: calc(var(--spacing) * 4);
2535
+ }
2536
+ .mvb-card__note {
2537
+ min-height: 0px;
2538
+ }
2539
+ .mvb-filter__in {
2540
+ height: 48px;
2541
+ }
2542
+ .mvb-stage {
2543
+ justify-items: stretch;
2544
+ text-align: start;
2545
+ }
2546
+ .mvb-btn {
2547
+ min-height: calc(var(--spacing) * 11);
2548
+ }
2549
+ .mvb-chip {
2550
+ min-height: calc(var(--spacing) * 11);
2551
+ }
2552
+ .mvb-toolcard__foot .mvb-actions, .mvb-toolcard__head .mvb-actions {
2553
+ gap: calc(var(--spacing) * 2);
2554
+ }
2555
+ .mvb-slider {
2556
+ grid-template-columns: minmax(0, 1fr) 62px;
2557
+ }
2558
+ .mvb-slider__label {
2559
+ grid-column: span 2 / span 2;
2560
+ }
2561
+ .mvb-in, .mvb-out, .mvb-filter__in, select {
2562
+ font-size: var(--text-base);
2563
+ line-height: var(--tw-leading, var(--text-base--line-height));
2564
+ }
2565
+ .mvb-pick {
2566
+ height: calc(var(--spacing) * 11);
2567
+ }
2568
+ .mvb-icobtn {
2569
+ width: calc(var(--spacing) * 11);
2570
+ height: calc(var(--spacing) * 11);
2571
+ }
2572
+ .mvb-range {
2573
+ min-height: calc(var(--spacing) * 11);
2574
+ }
2575
+ .mvb-check {
2576
+ min-height: calc(var(--spacing) * 11);
2577
+ }
2578
+ .mvb-switch {
2579
+ min-height: calc(var(--spacing) * 11);
2580
+ }
2581
+ }
2582
+ }
2583
+ @property --tw-border-style {
2584
+ syntax: "*";
2585
+ inherits: false;
2586
+ initial-value: solid;
2587
+ }
2588
+ @property --tw-font-weight {
2589
+ syntax: "*";
2590
+ inherits: false;
2591
+ }
2592
+ @property --tw-tracking {
2593
+ syntax: "*";
2594
+ inherits: false;
2595
+ }
2596
+ @property --tw-duration {
2597
+ syntax: "*";
2598
+ inherits: false;
2599
+ }
2600
+ @property --tw-leading {
2601
+ syntax: "*";
2602
+ inherits: false;
2603
+ }
2604
+ @property --tw-ordinal {
2605
+ syntax: "*";
2606
+ inherits: false;
2607
+ }
2608
+ @property --tw-slashed-zero {
2609
+ syntax: "*";
2610
+ inherits: false;
2611
+ }
2612
+ @property --tw-numeric-figure {
2613
+ syntax: "*";
2614
+ inherits: false;
2615
+ }
2616
+ @property --tw-numeric-spacing {
2617
+ syntax: "*";
2618
+ inherits: false;
2619
+ }
2620
+ @property --tw-numeric-fraction {
2621
+ syntax: "*";
2622
+ inherits: false;
2623
+ }
2624
+ @property --tw-shadow {
2625
+ syntax: "*";
2626
+ inherits: false;
2627
+ initial-value: 0 0 #0000;
2628
+ }
2629
+ @property --tw-shadow-color {
2630
+ syntax: "*";
2631
+ inherits: false;
2632
+ }
2633
+ @property --tw-shadow-alpha {
2634
+ syntax: "<percentage>";
2635
+ inherits: false;
2636
+ initial-value: 100%;
2637
+ }
2638
+ @property --tw-inset-shadow {
2639
+ syntax: "*";
2640
+ inherits: false;
2641
+ initial-value: 0 0 #0000;
2642
+ }
2643
+ @property --tw-inset-shadow-color {
2644
+ syntax: "*";
2645
+ inherits: false;
2646
+ }
2647
+ @property --tw-inset-shadow-alpha {
2648
+ syntax: "<percentage>";
2649
+ inherits: false;
2650
+ initial-value: 100%;
2651
+ }
2652
+ @property --tw-ring-color {
2653
+ syntax: "*";
2654
+ inherits: false;
2655
+ }
2656
+ @property --tw-ring-shadow {
2657
+ syntax: "*";
2658
+ inherits: false;
2659
+ initial-value: 0 0 #0000;
2660
+ }
2661
+ @property --tw-inset-ring-color {
2662
+ syntax: "*";
2663
+ inherits: false;
2664
+ }
2665
+ @property --tw-inset-ring-shadow {
2666
+ syntax: "*";
2667
+ inherits: false;
2668
+ initial-value: 0 0 #0000;
2669
+ }
2670
+ @property --tw-ring-inset {
2671
+ syntax: "*";
2672
+ inherits: false;
2673
+ }
2674
+ @property --tw-ring-offset-width {
2675
+ syntax: "<length>";
2676
+ inherits: false;
2677
+ initial-value: 0px;
2678
+ }
2679
+ @property --tw-ring-offset-color {
2680
+ syntax: "*";
2681
+ inherits: false;
2682
+ initial-value: #fff;
2683
+ }
2684
+ @property --tw-ring-offset-shadow {
2685
+ syntax: "*";
2686
+ inherits: false;
2687
+ initial-value: 0 0 #0000;
2688
+ }
2689
+ @property --tw-translate-x {
2690
+ syntax: "*";
2691
+ inherits: false;
2692
+ initial-value: 0;
2693
+ }
2694
+ @property --tw-translate-y {
2695
+ syntax: "*";
2696
+ inherits: false;
2697
+ initial-value: 0;
2698
+ }
2699
+ @property --tw-translate-z {
2700
+ syntax: "*";
2701
+ inherits: false;
2702
+ initial-value: 0;
2703
+ }
2704
+ @property --tw-outline-style {
2705
+ syntax: "*";
2706
+ inherits: false;
2707
+ initial-value: solid;
2708
+ }
2709
+ @layer properties {
2710
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
2711
+ *, ::before, ::after, ::backdrop {
2712
+ --tw-border-style: solid;
2713
+ --tw-font-weight: initial;
2714
+ --tw-tracking: initial;
2715
+ --tw-duration: initial;
2716
+ --tw-leading: initial;
2717
+ --tw-ordinal: initial;
2718
+ --tw-slashed-zero: initial;
2719
+ --tw-numeric-figure: initial;
2720
+ --tw-numeric-spacing: initial;
2721
+ --tw-numeric-fraction: initial;
2722
+ --tw-shadow: 0 0 #0000;
2723
+ --tw-shadow-color: initial;
2724
+ --tw-shadow-alpha: 100%;
2725
+ --tw-inset-shadow: 0 0 #0000;
2726
+ --tw-inset-shadow-color: initial;
2727
+ --tw-inset-shadow-alpha: 100%;
2728
+ --tw-ring-color: initial;
2729
+ --tw-ring-shadow: 0 0 #0000;
2730
+ --tw-inset-ring-color: initial;
2731
+ --tw-inset-ring-shadow: 0 0 #0000;
2732
+ --tw-ring-inset: initial;
2733
+ --tw-ring-offset-width: 0px;
2734
+ --tw-ring-offset-color: #fff;
2735
+ --tw-ring-offset-shadow: 0 0 #0000;
2736
+ --tw-translate-x: 0;
2737
+ --tw-translate-y: 0;
2738
+ --tw-translate-z: 0;
2739
+ --tw-outline-style: solid;
2740
+ }
2741
+ }
2742
+ }