1/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
2@layer theme {
3 :root, :host {
4 --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
5 --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
6 --default-font-family: var(--font-sans);
7 --default-mono-font-family: var(--font-mono);
8 }
9}
10
11@layer base {
12 *, :after, :before, ::backdrop {
13 box-sizing: border-box;
14 border: 0 solid;
15 margin: 0;
16 padding: 0;
17 }
18
19 ::file-selector-button {
20 box-sizing: border-box;
21 border: 0 solid;
22 margin: 0;
23 padding: 0;
24 }
25
26 html, :host {
27 -webkit-text-size-adjust: 100%;
28 tab-size: 4;
29 line-height: 1.5;
30 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
31 font-feature-settings: var(--default-font-feature-settings, normal);
32 font-variation-settings: var(--default-font-variation-settings, normal);
33 -webkit-tap-highlight-color: transparent;
34 }
35
36 hr {
37 height: 0;
38 color: inherit;
39 border-top-width: 1px;
40 }
41
42 abbr:where([title]) {
43 -webkit-text-decoration: underline dotted;
44 text-decoration: underline dotted;
45 }
46
47 h1, h2, h3, h4, h5, h6 {
48 font-size: inherit;
49 font-weight: inherit;
50 }
51
52 a {
53 color: inherit;
54 -webkit-text-decoration: inherit;
55 -webkit-text-decoration: inherit;
56 -webkit-text-decoration: inherit;
57 text-decoration: inherit;
58 }
59
60 b, strong {
61 font-weight: bolder;
62 }
63
64 code, kbd, samp, pre {
65 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
66 font-feature-settings: var(--default-mono-font-feature-settings, normal);
67 font-variation-settings: var(--default-mono-font-variation-settings, normal);
68 font-size: 1em;
69 }
70
71 small {
72 font-size: 80%;
73 }
74
75 sub, sup {
76 vertical-align: baseline;
77 font-size: 75%;
78 line-height: 0;
79 position: relative;
80 }
81
82 sub {
83 bottom: -.25em;
84 }
85
86 sup {
87 top: -.5em;
88 }
89
90 table {
91 text-indent: 0;
92 border-color: inherit;
93 border-collapse: collapse;
94 }
95
96 :-moz-focusring {
97 outline: auto;
98 }
99
100 progress {
101 vertical-align: baseline;
102 }
103
104 summary {
105 display: list-item;
106 }
107
108 ol, ul, menu {
109 list-style: none;
110 }
111
112 img, svg, video, canvas, audio, iframe, embed, object {
113 vertical-align: middle;
114 display: block;
115 }
116
117 img, video {
118 max-width: 100%;
119 height: auto;
120 }
121
122 button, input, select, optgroup, textarea {
123 font: inherit;
124 font-feature-settings: inherit;
125 font-variation-settings: inherit;
126 letter-spacing: inherit;
127 color: inherit;
128 opacity: 1;
129 background-color: #0000;
130 border-radius: 0;
131 }
132
133 ::file-selector-button {
134 font: inherit;
135 font-feature-settings: inherit;
136 font-variation-settings: inherit;
137 letter-spacing: inherit;
138 color: inherit;
139 opacity: 1;
140 background-color: #0000;
141 border-radius: 0;
142 }
143
144 :where(select:is([multiple], [size])) optgroup {
145 font-weight: bolder;
146 }
147
148 :where(select:is([multiple], [size])) optgroup option {
149 padding-inline-start: 20px;
150 }
151
152 ::file-selector-button {
153 margin-inline-end: 4px;
154 }
155
156 ::placeholder {
157 opacity: 1;
158 }
159
160 @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
161 ::placeholder {
162 color: currentColor;
163 }
164
165 @supports (color: color-mix(in lab, red, red)) {
166 ::placeholder {
167 color: color-mix(in oklab, currentcolor 50%, transparent);
168 }
169 }
170 }
171
172 textarea {
173 resize: vertical;
174 }
175
176 ::-webkit-search-decoration {
177 -webkit-appearance: none;
178 }
179
180 ::-webkit-date-and-time-value {
181 min-height: 1lh;
182 text-align: inherit;
183 }
184
185 ::-webkit-datetime-edit {
186 display: inline-flex;
187 }
188
189 ::-webkit-datetime-edit-fields-wrapper {
190 padding: 0;
191 }
192
193 ::-webkit-datetime-edit {
194 padding-block: 0;
195 }
196
197 ::-webkit-datetime-edit-year-field {
198 padding-block: 0;
199 }
200
201 ::-webkit-datetime-edit-month-field {
202 padding-block: 0;
203 }
204
205 ::-webkit-datetime-edit-day-field {
206 padding-block: 0;
207 }
208
209 ::-webkit-datetime-edit-hour-field {
210 padding-block: 0;
211 }
212
213 ::-webkit-datetime-edit-minute-field {
214 padding-block: 0;
215 }
216
217 ::-webkit-datetime-edit-second-field {
218 padding-block: 0;
219 }
220
221 ::-webkit-datetime-edit-millisecond-field {
222 padding-block: 0;
223 }
224
225 ::-webkit-datetime-edit-meridiem-field {
226 padding-block: 0;
227 }
228
229 :-moz-ui-invalid {
230 box-shadow: none;
231 }
232
233 button, input:where([type="button"], [type="reset"], [type="submit"]) {
234 appearance: button;
235 }
236
237 ::file-selector-button {
238 appearance: button;
239 }
240
241 ::-webkit-inner-spin-button {
242 height: auto;
243 }
244
245 ::-webkit-outer-spin-button {
246 height: auto;
247 }
248
249 [hidden]:where(:not([hidden="until-found"])) {
250 display: none !important;
251 }
252
253 :where(:root), :root:has(input.theme-controller[value="light"]:checked), [data-theme="light"] {
254 color-scheme: light;
255 --color-base-100: oklch(100% 0 0);
256 --color-base-200: oklch(98% 0 0);
257 --color-base-300: oklch(95% 0 0);
258 --color-base-content: oklch(21% .006 285.885);
259 --color-primary: oklch(45% .24 277.023);
260 --color-primary-content: oklch(93% .034 272.788);
261 --color-secondary: oklch(65% .241 354.308);
262 --color-secondary-content: oklch(94% .028 342.258);
263 --color-accent: oklch(77% .152 181.912);
264 --color-accent-content: oklch(38% .063 188.416);
265 --color-neutral: oklch(14% .005 285.823);
266 --color-neutral-content: oklch(92% .004 286.32);
267 --color-info: oklch(74% .16 232.661);
268 --color-info-content: oklch(29% .066 243.157);
269 --color-success: oklch(76% .177 163.223);
270 --color-success-content: oklch(37% .077 168.94);
271 --color-warning: oklch(82% .189 84.429);
272 --color-warning-content: oklch(41% .112 45.904);
273 --color-error: oklch(71% .194 13.428);
274 --color-error-content: oklch(27% .105 12.094);
275 --radius-selector: .5rem;
276 --radius-field: .25rem;
277 --radius-box: .5rem;
278 --size-selector: .25rem;
279 --size-field: .25rem;
280 --border: 1px;
281 --depth: 1;
282 --noise: 0;
283 }
284
285 @media (prefers-color-scheme: dark) {
286 :root {
287 color-scheme: dark;
288 --color-base-100: oklch(25.33% .016 252.42);
289 --color-base-200: oklch(23.26% .014 253.1);
290 --color-base-300: oklch(21.15% .012 254.09);
291 --color-base-content: oklch(97.807% .029 256.847);
292 --color-primary: oklch(58% .233 277.117);
293 --color-primary-content: oklch(96% .018 272.314);
294 --color-secondary: oklch(65% .241 354.308);
295 --color-secondary-content: oklch(94% .028 342.258);
296 --color-accent: oklch(77% .152 181.912);
297 --color-accent-content: oklch(38% .063 188.416);
298 --color-neutral: oklch(14% .005 285.823);
299 --color-neutral-content: oklch(92% .004 286.32);
300 --color-info: oklch(74% .16 232.661);
301 --color-info-content: oklch(29% .066 243.157);
302 --color-success: oklch(76% .177 163.223);
303 --color-success-content: oklch(37% .077 168.94);
304 --color-warning: oklch(82% .189 84.429);
305 --color-warning-content: oklch(41% .112 45.904);
306 --color-error: oklch(71% .194 13.428);
307 --color-error-content: oklch(27% .105 12.094);
308 --radius-selector: .5rem;
309 --radius-field: .25rem;
310 --radius-box: .5rem;
311 --size-selector: .25rem;
312 --size-field: .25rem;
313 --border: 1px;
314 --depth: 1;
315 --noise: 0;
316 }
317 }
318
319 :root:has(input.theme-controller[value="light"]:checked), [data-theme="light"] {
320 color-scheme: light;
321 --color-base-100: oklch(100% 0 0);
322 --color-base-200: oklch(98% 0 0);
323 --color-base-300: oklch(95% 0 0);
324 --color-base-content: oklch(21% .006 285.885);
325 --color-primary: oklch(45% .24 277.023);
326 --color-primary-content: oklch(93% .034 272.788);
327 --color-secondary: oklch(65% .241 354.308);
328 --color-secondary-content: oklch(94% .028 342.258);
329 --color-accent: oklch(77% .152 181.912);
330 --color-accent-content: oklch(38% .063 188.416);
331 --color-neutral: oklch(14% .005 285.823);
332 --color-neutral-content: oklch(92% .004 286.32);
333 --color-info: oklch(74% .16 232.661);
334 --color-info-content: oklch(29% .066 243.157);
335 --color-success: oklch(76% .177 163.223);
336 --color-success-content: oklch(37% .077 168.94);
337 --color-warning: oklch(82% .189 84.429);
338 --color-warning-content: oklch(41% .112 45.904);
339 --color-error: oklch(71% .194 13.428);
340 --color-error-content: oklch(27% .105 12.094);
341 --radius-selector: .5rem;
342 --radius-field: .25rem;
343 --radius-box: .5rem;
344 --size-selector: .25rem;
345 --size-field: .25rem;
346 --border: 1px;
347 --depth: 1;
348 --noise: 0;
349 }
350
351 :root:has(input.theme-controller[value="dark"]:checked), [data-theme="dark"] {
352 color-scheme: dark;
353 --color-base-100: oklch(25.33% .016 252.42);
354 --color-base-200: oklch(23.26% .014 253.1);
355 --color-base-300: oklch(21.15% .012 254.09);
356 --color-base-content: oklch(97.807% .029 256.847);
357 --color-primary: oklch(58% .233 277.117);
358 --color-primary-content: oklch(96% .018 272.314);
359 --color-secondary: oklch(65% .241 354.308);
360 --color-secondary-content: oklch(94% .028 342.258);
361 --color-accent: oklch(77% .152 181.912);
362 --color-accent-content: oklch(38% .063 188.416);
363 --color-neutral: oklch(14% .005 285.823);
364 --color-neutral-content: oklch(92% .004 286.32);
365 --color-info: oklch(74% .16 232.661);
366 --color-info-content: oklch(29% .066 243.157);
367 --color-success: oklch(76% .177 163.223);
368 --color-success-content: oklch(37% .077 168.94);
369 --color-warning: oklch(82% .189 84.429);
370 --color-warning-content: oklch(41% .112 45.904);
371 --color-error: oklch(71% .194 13.428);
372 --color-error-content: oklch(27% .105 12.094);
373 --radius-selector: .5rem;
374 --radius-field: .25rem;
375 --radius-box: .5rem;
376 --size-selector: .25rem;
377 --size-field: .25rem;
378 --border: 1px;
379 --depth: 1;
380 --noise: 0;
381 }
382
383 @property --radialprogress {
384 syntax: "<percentage>"; inherits: true; initial-value: 0%;
385 }
386
387 :root {
388 scrollbar-color: currentColor #0000;
389 }
390
391 @supports (color: color-mix(in lab, red, red)) {
392 :root {
393 scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
394 }
395 }
396
397 :root:has(.modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked) {
398 overflow: hidden;
399 }
400
401 :root, [data-theme] {
402 background-color: var(--root-bg, var(--color-base-100));
403 color: var(--color-base-content);
404 }
405
406 :root {
407 --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
408 }
409
410 .chat {
411 --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
412 }
413
414 :where(:root:has(.modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not(.drawer-open) > .drawer-toggle:checked)) {
415 scrollbar-gutter: stable;
416 background-image: linear-gradient(var(--color-base-100), var(--color-base-100));
417 --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);
418 }
419
420 @supports (color: color-mix(in lab, red, red)) {
421 :where(:root:has(.modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not(.drawer-open) > .drawer-toggle:checked)) {
422 --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);
423 }
424 }
425}
426
427@layer components;
428
429@layer utilities {
430 .btn {
431 cursor: pointer;
432 text-align: center;
433 vertical-align: middle;
434 outline-offset: 2px;
435 webkit-user-select: none;
436 -webkit-user-select: none;
437 user-select: none;
438 padding-inline: var(--btn-p);
439 color: var(--btn-fg);
440 --tw-prose-links: var(--btn-fg);
441 height: var(--size);
442 font-size: var(--fontsize, .875rem);
443 outline-color: var(--btn-color, var(--color-base-content));
444 background-color: var(--btn-bg);
445 background-size: auto, calc(var(--noise) * 100%);
446 background-image: none, var(--btn-noise);
447 border-width: var(--border);
448 border-style: solid;
449 border-color: var(--btn-border);
450 text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15));
451 box-shadow: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
452 --size: calc(var(--size-field, .25rem) * 10);
453 --btn-bg: var(--btn-color, var(--color-base-200));
454 --btn-fg: var(--color-base-content);
455 --btn-p: 1rem;
456 --btn-border: var(--btn-bg);
457 --btn-shadow: 0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg);
458 --btn-noise: var(--fx-noise);
459 border-start-start-radius: var(--join-ss, var(--radius-field));
460 border-start-end-radius: var(--join-se, var(--radius-field));
461 border-end-end-radius: var(--join-ee, var(--radius-field));
462 border-end-start-radius: var(--join-es, var(--radius-field));
463 flex-wrap: nowrap;
464 flex-shrink: 0;
465 justify-content: center;
466 align-items: center;
467 gap: .375rem;
468 font-weight: 600;
469 transition-property: color, background-color, border-color, box-shadow;
470 transition-duration: .2s;
471 transition-timing-function: cubic-bezier(0, 0, .2, 1);
472 display: inline-flex;
473 }
474
475 :where(.btn) {
476 width: unset;
477 }
478
479 @supports (color: color-mix(in lab, red, red)) {
480 .btn {
481 --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
482 --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
483 }
484 }
485
486 .prose .btn {
487 text-decoration-line: none;
488 }
489
490 @media (hover: hover) {
491 .btn:hover {
492 --btn-bg: var(--btn-color, var(--color-base-200));
493 }
494
495 @supports (color: color-mix(in lab, red, red)) {
496 .btn:hover {
497 --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
498 }
499 }
500 }
501
502 .btn:focus-visible {
503 outline-width: 2px;
504 outline-style: solid;
505 }
506
507 .btn:active:not(.btn-active) {
508 --btn-bg: var(--btn-color, var(--color-base-200));
509 --btn-border: var(--btn-color, var(--color-base-200));
510 --btn-shadow: 0 0 0 0 oklch(0% 0 0 / 0), 0 0 0 0 oklch(0% 0 0 / 0);
511 translate: 0 .5px;
512 }
513
514 @supports (color: color-mix(in lab, red, red)) {
515 .btn:active:not(.btn-active) {
516 --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
517 --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
518 }
519 }
520
521 .btn:is(:disabled, [disabled], .btn-disabled) {
522 pointer-events: none;
523 --btn-border: #0000;
524 --btn-noise: none;
525 --btn-fg: color-mix(in srgb, var(--color-base-content) 20%, #0000);
526 }
527
528 .btn:is(:disabled, [disabled], .btn-disabled):not(.btn-link, .btn-ghost) {
529 background-color: color-mix(in srgb, var(--color-base-content) 10%, transparent);
530 box-shadow: none;
531 }
532
533 @supports (color: color-mix(in lab, red, red)) {
534 .btn:is(:disabled, [disabled], .btn-disabled):not(.btn-link, .btn-ghost) {
535 background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
536 }
537
538 .btn:is(:disabled, [disabled], .btn-disabled) {
539 --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
540 }
541 }
542
543 @media (hover: hover) {
544 .btn:is(:disabled, [disabled], .btn-disabled):hover {
545 pointer-events: none;
546 background-color: color-mix(in srgb, var(--color-neutral) 20%, transparent);
547 --btn-border: #0000;
548 --btn-fg: color-mix(in srgb, var(--color-base-content) 20%, #0000);
549 }
550
551 @supports (color: color-mix(in lab, red, red)) {
552 .btn:is(:disabled, [disabled], .btn-disabled):hover {
553 background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
554 --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
555 }
556 }
557 }
558
559 .btn:is(input[type="checkbox"], input[type="radio"]) {
560 appearance: none;
561 }
562
563 .btn:is(input[type="checkbox"], input[type="radio"]):after {
564 content: attr(aria-label);
565 }
566
567 .btn:where(input:checked:not(.filter .btn)) {
568 --btn-color: var(--color-primary);
569 --btn-fg: var(--color-primary-content);
570 isolation: isolate;
571 }
572
573 .btn-lg {
574 --fontsize: 1.125rem;
575 --btn-p: 1.25rem;
576 --size: calc(var(--size-field, .25rem) * 12);
577 }
578
579 .btn-sm {
580 --fontsize: .75rem;
581 --btn-p: .75rem;
582 --size: calc(var(--size-field, .25rem) * 8);
583 }
584
585 .btn-xl {
586 --fontsize: 1.375rem;
587 --btn-p: 1.5rem;
588 --size: calc(var(--size-field, .25rem) * 14);
589 }
590
591 .btn-xs {
592 --fontsize: .6875rem;
593 --btn-p: .5rem;
594 --size: calc(var(--size-field, .25rem) * 6);
595 }
596}
597
598@keyframes skeleton {
599 0% {
600 background-position: 150%;
601 }
602
603 100% {
604 background-position: -50%;
605 }
606}
607
608@keyframes progress {
609 50% {
610 background-position-x: -115%;
611 }
612}
613
614@keyframes radio {
615 0% {
616 padding: 5px;
617 }
618
619 50% {
620 padding: 3px;
621 }
622}
623
624@keyframes dropdown {
625 0% {
626 opacity: 0;
627 }
628}
629
630@keyframes rating {
631 0%, 40% {
632 filter: brightness(1.05) contrast(1.05);
633 scale: 1.1;
634 }
635}
636
637@keyframes toast {
638 0% {
639 opacity: 0;
640 scale: .9;
641 }
642
643 100% {
644 opacity: 1;
645 scale: 1;
646 }
647}