Monorepo for Tangled
tangled.org
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4@layer base {
5 @font-face {
6 font-family: "InterVariable";
7 src: url("/static/fonts/InterVariable.woff2") format("woff2");
8 font-weight: normal;
9 font-style: normal;
10 font-display: swap;
11 }
12
13 @font-face {
14 font-family: "InterVariable";
15 src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2");
16 font-weight: normal;
17 font-style: italic;
18 font-display: swap;
19 }
20
21 @font-face {
22 font-family: "InterVariable";
23 src: url("/static/fonts/InterDisplay-Bold.woff2") format("woff2");
24 font-weight: bold;
25 font-style: normal;
26 font-display: swap;
27 }
28
29 @font-face {
30 font-family: "InterVariable";
31 src: url("/static/fonts/InterDisplay-BoldItalic.woff2") format("woff2");
32 font-weight: bold;
33 font-style: italic;
34 font-display: swap;
35 }
36
37 @font-face {
38 font-family: "IBMPlexMono";
39 src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
40 font-weight: normal;
41 font-style: normal;
42 font-display: swap;
43 }
44
45 @font-face {
46 font-family: "IBMPlexMono";
47 src: url("/static/fonts/IBMPlexMono-Italic.woff2") format("woff2");
48 font-weight: normal;
49 font-style: italic;
50 font-display: swap;
51 }
52
53 @font-face {
54 font-family: "IBMPlexMono";
55 src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2");
56 font-weight: bold;
57 font-style: normal;
58 font-display: swap;
59 }
60
61 @font-face {
62 font-family: "IBMPlexMono";
63 src: url("/static/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
64 font-weight: bold;
65 font-style: italic;
66 font-display: swap;
67 }
68
69 ::selection {
70 @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white;
71 }
72
73 @layer base {
74 html {
75 font-size: 14px;
76 scrollbar-gutter: stable;
77 }
78 @supports (font-variation-settings: normal) {
79 html {
80 font-feature-settings:
81 "kern" 1,
82 "liga" 1,
83 "cv05" 1,
84 "tnum" 1;
85 }
86 }
87
88 a {
89 @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
90 }
91
92 label {
93 @apply block text-gray-900 text-sm py-2 dark:text-gray-100;
94 }
95
96 input,
97 textarea {
98 @apply block rounded p-3
99 bg-gray-50 dark:bg-gray-800 dark:text-white
100 border border-gray-300 dark:border-gray-600
101 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500;
102 }
103
104 input[type="checkbox"] {
105 @apply appearance-none size-4 p-0 rounded
106 bg-transparent border border-gray-200
107 hover:bg-gray-100
108 checked:bg-gray-900 checked:border-transparent
109 checked:hover:bg-gray-800
110 indeterminate:bg-gray-900 indeterminate:border-transparent
111 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:border-gray-200
112 disabled:checked:bg-gray-300 disabled:checked:border-transparent
113 disabled:indeterminate:bg-gray-100 disabled:indeterminate:border-gray-200
114 dark:border-gray-600
115 dark:hover:bg-gray-700
116 dark:checked:bg-gray-100
117 dark:checked:hover:bg-gray-200
118 dark:checked:border-gray-400
119 dark:indeterminate:bg-gray-100 dark:indeterminate:border-transparent
120 dark:disabled:bg-gray-700 dark:disabled:border-gray-600
121 dark:disabled:checked:bg-gray-500 dark:disabled:checked:border-transparent
122 dark:disabled:indeterminate:bg-gray-700 dark:disabled:indeterminate:border-gray-600
123 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500;
124 background-position: center;
125 background-repeat: no-repeat;
126 background-size: 12px;
127 }
128 input[type="checkbox"]:checked {
129 background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
130 }
131 input[type="checkbox"]:indeterminate {
132 background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='white' stroke-width='1.5' stroke-linecap='round'/></svg>");
133 }
134 input[type="checkbox"]:disabled:indeterminate {
135 background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(156,163,175)' stroke-width='1.5' stroke-linecap='round'/></svg>");
136 }
137 @media (prefers-color-scheme: dark) {
138 input[type="checkbox"]:checked {
139 background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
140 }
141 input[type="checkbox"]:indeterminate {
142 background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round'/></svg>");
143 }
144 input[type="checkbox"]:disabled:indeterminate {
145 background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(107,114,128)' stroke-width='1.5' stroke-linecap='round'/></svg>");
146 }
147 }
148
149 input[type="radio"] {
150 @apply appearance-none size-4 p-0 rounded-full bg-transparent border
151
152 border-gray-400 hover:border-gray-900
153 hover:bg-gray-200
154
155 disabled:cursor-not-allowed
156 disabled:border-gray-300
157 disabled:checked:border-gray-300
158 disabled:hover:bg-inherit
159
160 dark:border-gray-400 dark:hover:border-gray-100
161
162 dark:hover:bg-gray-600
163
164 dark:checked:border-gray-400
165
166 dark:disabled:border-gray-500
167 dark:disabled:checked:border-gray-500
168
169 focus:outline-none focus:ring-1
170 focus:ring-gray-400 dark:focus:ring-gray-500;
171
172 background-position: center;
173 background-repeat: no-repeat;
174 background-size: 8px;
175 }
176 input[type="radio"]:checked {
177 background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(17,24,39)'/></svg>");
178 }
179 input[type="radio"]:disabled:checked {
180 background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(209,213,219)'/></svg>");
181 }
182 @media (prefers-color-scheme: dark) {
183 input[type="radio"]:checked {
184 background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(243,244,246)'/></svg>");
185 }
186 input[type="radio"]:disabled:checked {
187 background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(107,114,128)'/></svg>");
188 }
189 }
190
191 details summary::-webkit-details-marker {
192 display: none;
193 }
194
195 code {
196 @apply font-mono rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white;
197 }
198 }
199
200 @layer components {
201 .btn {
202 @apply relative z-10 inline-flex overflow-hidden items-center justify-center
203 min-h-[32px] px-2 py-[6px]
204 rounded border border-gray-200 dark:border-gray-700
205 bg-white dark:bg-gray-800
206 text-sm text-gray-900 dark:text-gray-100
207 transition-colors duration-150 ease-in-out
208 outline-transparent cursor-pointer
209 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400 dark:focus-visible:outline-gray-600;
210
211 @apply before:absolute before:inset-0 before:-z-10 before:block before:rounded-sm before:content-['']
212 before:transition-all before:duration-150 before:ease-in-out
213 before:shadow-[inset_0_-2px_0_0_theme(colors.gray.200)] dark:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900)];
214
215 @apply hover:bg-gray-50 dark:hover:bg-gray-700
216 hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.300)] dark:hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.800)]
217 active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.200)] dark:active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.900)]
218 disabled:cursor-not-allowed disabled:opacity-50;
219 }
220
221 .btn-flat {
222 @apply inline-flex items-center justify-center
223 min-h-7 px-2 py-[6px]
224 rounded
225 text-sm text-gray-900 dark:text-gray-100 cursor-pointer
226 transition-colors duration-150 ease-in-out
227 focus:outline-none
228 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400
229 hover:bg-gray-100
230 dark:hover:text-gray-100 dark:hover:bg-gray-700
231 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:text-inherit disabled:hover:bg-inherit;
232 }
233
234 .btn-create {
235 @apply btn text-white
236 bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800
237 border border-green-700 hover:border-green-800
238 focus-visible:outline-green-500
239 disabled:bg-green-400 dark:disabled:bg-green-600
240 before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900/25%)]
241 hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900/25%)]
242 active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.900/50%)];
243 }
244
245 .btn-cancel {
246 @apply btn text-white
247 bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800
248 border border-red-700 hover:border-red-800
249 focus-visible:outline-red-500
250 disabled:bg-red-400 dark:disabled:bg-red-600;
251 }
252
253 .btn-group {
254 @apply inline-flex items-stretch
255 max-h-[32px]
256 rounded border border-gray-200 dark:border-gray-700
257 divide-x divide-gray-200 dark:divide-gray-700
258 overflow-hidden;
259 }
260
261 .btn-group-item {
262 @apply btn-flat min-h-[30px] gap-1.5
263 bg-gray-50 dark:bg-gray-900
264 border-y-0
265 no-underline hover:no-underline
266 hover:text-gray-600 dark:hover:text-gray-400;
267 }
268
269 .btn-group-item.active {
270 @apply btn min-h-[30px] rounded-none border-y-0
271 before:border-none before:rounded-none before:bg-inherit;
272
273 &:first-child {
274 @apply border-none before:rounded-l-sm;
275 }
276 &:last-child {
277 @apply border-y-0 border-r-0 border-l before:rounded-r-sm;
278 }
279 }
280
281 .prose {
282 overflow-wrap: anywhere;
283 }
284
285 .prose td,
286 .prose th {
287 overflow-wrap: normal;
288 }
289
290 .prose hr {
291 @apply my-2;
292 }
293
294 .prose li:has(input) {
295 @apply list-none;
296 }
297
298 .prose ul:has(input) {
299 @apply pl-2;
300 }
301
302 .prose .heading .anchor {
303 @apply no-underline mx-2 opacity-0;
304 }
305
306 .prose .heading:hover .anchor {
307 @apply opacity-70;
308 }
309
310 .prose .heading .anchor:hover {
311 @apply opacity-70;
312 }
313
314 .prose h1:target,
315 .prose h2:target,
316 .prose h3:target,
317 .prose h4:target,
318 .prose h5:target,
319 .prose h6:target {
320 @apply bg-yellow-200/30 dark:bg-yellow-600/30;
321 }
322
323 .prose a.footnote-backref {
324 @apply no-underline;
325 }
326
327 .prose a.mention {
328 @apply no-underline hover:underline font-bold;
329 }
330
331 .prose li {
332 @apply my-0 py-0;
333 }
334
335 .prose ul,
336 .prose ol {
337 @apply my-1 py-0;
338 }
339
340 .prose img {
341 display: inline;
342 margin: 0;
343 vertical-align: middle;
344 }
345
346 .prose input {
347 @apply inline-block my-0 mt-1 mx-1;
348 }
349
350 /* Mermaid diagrams */
351 .prose pre.mermaid {
352 @apply flex justify-center my-4 overflow-x-auto bg-transparent border-0;
353 }
354
355 /* Base callout */
356 details[data-callout] {
357 @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4;
358 }
359
360 details[data-callout] > summary {
361 @apply font-bold cursor-pointer mb-1;
362 }
363
364 details[data-callout] > .callout-content {
365 @apply text-sm leading-snug;
366 }
367
368 /* Note (blue) */
369 details[data-callout="note" i] {
370 @apply border-blue-400 dark:border-blue-500;
371 }
372 details[data-callout="note" i] > summary {
373 @apply text-blue-700 dark:text-blue-400;
374 }
375
376 /* Important (purple) */
377 details[data-callout="important" i] {
378 @apply border-purple-400 dark:border-purple-500;
379 }
380 details[data-callout="important" i] > summary {
381 @apply text-purple-700 dark:text-purple-400;
382 }
383
384 /* Warning (yellow) */
385 details[data-callout="warning" i] {
386 @apply border-yellow-400 dark:border-yellow-500;
387 }
388 details[data-callout="warning" i] > summary {
389 @apply text-yellow-700 dark:text-yellow-400;
390 }
391
392 /* Caution (red) */
393 details[data-callout="caution" i] {
394 @apply border-red-400 dark:border-red-500;
395 }
396 details[data-callout="caution" i] > summary {
397 @apply text-red-700 dark:text-red-400;
398 }
399
400 /* Tip (green) */
401 details[data-callout="tip" i] {
402 @apply border-green-400 dark:border-green-500;
403 }
404 details[data-callout="tip" i] > summary {
405 @apply text-green-700 dark:text-green-400;
406 }
407
408 /* Optional: hide the disclosure arrow like GitHub */
409 details[data-callout] > summary::-webkit-details-marker {
410 display: none;
411 }
412 }
413 @layer utilities {
414 .error {
415 @apply py-1 text-red-400 dark:text-red-300;
416 }
417 .success {
418 @apply py-1 text-gray-900 dark:text-gray-100;
419 }
420
421 @keyframes scroll {
422 0% {
423 transform: translateX(0);
424 }
425 100% {
426 transform: translateX(-50%);
427 }
428 }
429
430 .animate-marquee {
431 animation: scroll 60s linear infinite;
432 }
433
434 .animate-marquee:hover {
435 animation-play-state: paused;
436 }
437
438 @media (prefers-reduced-motion: reduce) {
439 .animate-marquee {
440 animation: none;
441 transform: none;
442 }
443 }
444
445 @keyframes progress {
446 from {
447 width: 0%;
448 }
449 to {
450 width: 100%;
451 }
452 }
453
454 .animate-progress {
455 animation: progress 10s linear forwards;
456 }
457
458 @keyframes fadeIn {
459 from {
460 opacity: 0;
461 }
462 to {
463 opacity: 1;
464 }
465 }
466
467 @keyframes fadeOut {
468 from {
469 opacity: 1;
470 }
471 to {
472 opacity: 0;
473 }
474 }
475
476 .animate-fadein {
477 animation: fadeIn 0.25s ease-in forwards;
478 }
479
480 .animate-fadeout {
481 animation: fadeOut 0.25s ease-out forwards;
482 }
483 }
484}
485
486/* Background */
487.bg {
488 color: #4c4f69;
489 background-color: #eff1f5;
490}
491/* PreWrapper */
492.chroma {
493 color: #4c4f69;
494}
495/* Error */
496.chroma .err {
497 color: #d20f39;
498}
499/* LineLink */
500.chroma .lnlinks {
501 outline: none;
502 text-decoration: none;
503 color: inherit;
504}
505/* LineTableTD */
506.chroma .lntd {
507 vertical-align: top;
508 padding: 0;
509 margin: 0;
510 border: 0;
511}
512/* LineTable */
513.chroma .lntable {
514 border-spacing: 0;
515 padding: 0;
516 margin: 0;
517 border: 0;
518}
519/* LineHighlight */
520.chroma .hl {
521 @apply bg-amber-400/30 dark:bg-amber-500/20;
522}
523
524.line-quote-hl,
525.line-range-hl {
526 @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;
527}
528
529:is(.line-quote-hl, .line-range-hl) > .min-w-\[3\.5rem\] {
530 @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;
531}
532
533:is(.line-quote-hl, .line-range-hl) > .min-w-\[3\.5rem\] a {
534 @apply !text-black dark:!text-white;
535}
536
537/* LineNumbersTable */
538.chroma .lnt {
539 white-space: pre;
540 -webkit-user-select: none;
541 user-select: none;
542 margin-right: 0.4em;
543 padding: 0 0.4em 0 0.4em;
544 color: #8c8fa1;
545}
546/* LineNumbers */
547.chroma .ln {
548 white-space: pre;
549 -webkit-user-select: none;
550 user-select: none;
551 margin-right: 0.4em;
552 padding: 0 0.4em 0 0.4em;
553 color: #8c8fa1;
554}
555/* Line */
556.chroma .line {
557 display: flex;
558}
559/* Keyword */
560.chroma .k {
561 color: #8839ef;
562}
563/* KeywordConstant */
564.chroma .kc {
565 color: #fe640b;
566}
567/* KeywordDeclaration */
568.chroma .kd {
569 color: #d20f39;
570}
571/* KeywordNamespace */
572.chroma .kn {
573 color: #179299;
574}
575/* KeywordPseudo */
576.chroma .kp {
577 color: #8839ef;
578}
579/* KeywordReserved */
580.chroma .kr {
581 color: #8839ef;
582}
583/* KeywordType */
584.chroma .kt {
585 color: #d20f39;
586}
587/* NameAttribute */
588.chroma .na {
589 color: #1e66f5;
590}
591/* NameBuiltin */
592.chroma .nb {
593 color: #04a5e5;
594}
595/* NameBuiltinPseudo */
596.chroma .bp {
597 color: #04a5e5;
598}
599/* NameClass */
600.chroma .nc {
601 color: #df8e1d;
602}
603/* NameConstant */
604.chroma .no {
605 color: #df8e1d;
606}
607/* NameDecorator */
608.chroma .nd {
609 color: #1e66f5;
610 font-weight: bold;
611}
612/* NameEntity */
613.chroma .ni {
614 color: #179299;
615}
616/* NameException */
617.chroma .ne {
618 color: #fe640b;
619}
620/* NameFunction */
621.chroma .nf {
622 color: #1e66f5;
623}
624/* NameFunctionMagic */
625.chroma .fm {
626 color: #1e66f5;
627}
628/* NameLabel */
629.chroma .nl {
630 color: #04a5e5;
631}
632/* NameNamespace */
633.chroma .nn {
634 color: #fe640b;
635}
636/* NameProperty */
637.chroma .py {
638 color: #fe640b;
639}
640/* NameTag */
641.chroma .nt {
642 color: #8839ef;
643}
644/* NameVariable */
645.chroma .nv {
646 color: #dc8a78;
647}
648/* NameVariableClass */
649.chroma .vc {
650 color: #dc8a78;
651}
652/* NameVariableGlobal */
653.chroma .vg {
654 color: #dc8a78;
655}
656/* NameVariableInstance */
657.chroma .vi {
658 color: #dc8a78;
659}
660/* NameVariableMagic */
661.chroma .vm {
662 color: #dc8a78;
663}
664/* LiteralString */
665.chroma .s {
666 color: #40a02b;
667}
668/* LiteralStringAffix */
669.chroma .sa {
670 color: #d20f39;
671}
672/* LiteralStringBacktick */
673.chroma .sb {
674 color: #40a02b;
675}
676/* LiteralStringChar */
677.chroma .sc {
678 color: #40a02b;
679}
680/* LiteralStringDelimiter */
681.chroma .dl {
682 color: #1e66f5;
683}
684/* LiteralStringDoc */
685.chroma .sd {
686 color: #9ca0b0;
687}
688/* LiteralStringDouble */
689.chroma .s2 {
690 color: #40a02b;
691}
692/* LiteralStringEscape */
693.chroma .se {
694 color: #1e66f5;
695}
696/* LiteralStringHeredoc */
697.chroma .sh {
698 color: #9ca0b0;
699}
700/* LiteralStringInterpol */
701.chroma .si {
702 color: #40a02b;
703}
704/* LiteralStringOther */
705.chroma .sx {
706 color: #40a02b;
707}
708/* LiteralStringRegex */
709.chroma .sr {
710 color: #179299;
711}
712/* LiteralStringSingle */
713.chroma .s1 {
714 color: #40a02b;
715}
716/* LiteralStringSymbol */
717.chroma .ss {
718 color: #40a02b;
719}
720/* LiteralNumber */
721.chroma .m {
722 color: #fe640b;
723}
724/* LiteralNumberBin */
725.chroma .mb {
726 color: #fe640b;
727}
728/* LiteralNumberFloat */
729.chroma .mf {
730 color: #fe640b;
731}
732/* LiteralNumberHex */
733.chroma .mh {
734 color: #fe640b;
735}
736/* LiteralNumberInteger */
737.chroma .mi {
738 color: #fe640b;
739}
740/* LiteralNumberIntegerLong */
741.chroma .il {
742 color: #fe640b;
743}
744/* LiteralNumberOct */
745.chroma .mo {
746 color: #fe640b;
747}
748/* Operator */
749.chroma .o {
750 color: #04a5e5;
751 font-weight: bold;
752}
753/* OperatorWord */
754.chroma .ow {
755 color: #04a5e5;
756 font-weight: bold;
757}
758/* Comment */
759.chroma .c {
760 color: #9ca0b0;
761 font-style: italic;
762}
763/* CommentHashbang */
764.chroma .ch {
765 color: #9ca0b0;
766 font-style: italic;
767}
768/* CommentMultiline */
769.chroma .cm {
770 color: #9ca0b0;
771 font-style: italic;
772}
773/* CommentSingle */
774.chroma .c1 {
775 color: #9ca0b0;
776 font-style: italic;
777}
778/* CommentSpecial */
779.chroma .cs {
780 color: #9ca0b0;
781 font-style: italic;
782}
783/* CommentPreproc */
784.chroma .cp {
785 color: #9ca0b0;
786 font-style: italic;
787}
788/* CommentPreprocFile */
789.chroma .cpf {
790 color: #9ca0b0;
791 font-weight: bold;
792 font-style: italic;
793}
794/* GenericDeleted */
795.chroma .gd {
796 color: #d20f39;
797 background-color: oklch(93.6% 0.032 17.717);
798}
799/* GenericEmph */
800.chroma .ge {
801 font-style: italic;
802}
803/* GenericError */
804.chroma .gr {
805 color: #d20f39;
806}
807/* GenericHeading */
808.chroma .gh {
809 color: #fe640b;
810 font-weight: bold;
811}
812/* GenericInserted */
813.chroma .gi {
814 color: #40a02b;
815 background-color: oklch(96.2% 0.044 156.743);
816}
817/* GenericStrong */
818.chroma .gs {
819 font-weight: bold;
820}
821/* GenericSubheading */
822.chroma .gu {
823 color: #fe640b;
824 font-weight: bold;
825}
826/* GenericTraceback */
827.chroma .gt {
828 color: #d20f39;
829}
830/* GenericUnderline */
831.chroma .gl {
832 text-decoration: underline;
833}
834
835@media (prefers-color-scheme: dark) {
836 /* Background */
837 .bg {
838 color: #cad3f5;
839 background-color: #24273a;
840 }
841 /* PreWrapper */
842 .chroma {
843 color: #cad3f5;
844 }
845 /* Error */
846 .chroma .err {
847 color: #ed8796;
848 }
849 /* LineLink */
850 .chroma .lnlinks {
851 outline: none;
852 text-decoration: none;
853 color: inherit;
854 }
855 /* LineTableTD */
856 .chroma .lntd {
857 vertical-align: top;
858 padding: 0;
859 margin: 0;
860 border: 0;
861 }
862 /* LineTable */
863 .chroma .lntable {
864 border-spacing: 0;
865 padding: 0;
866 margin: 0;
867 border: 0;
868 }
869 /* LineHighlight */
870 .chroma .hl {
871 background-color: #494d64;
872 }
873 /* LineNumbersTable */
874 .chroma .lnt {
875 white-space: pre;
876 -webkit-user-select: none;
877 user-select: none;
878 margin-right: 0.4em;
879 padding: 0 0.4em 0 0.4em;
880 color: #8087a2;
881 }
882 /* LineNumbers */
883 .chroma .ln {
884 white-space: pre;
885 -webkit-user-select: none;
886 user-select: none;
887 margin-right: 0.4em;
888 padding: 0 0.4em 0 0.4em;
889 color: #8087a2;
890 }
891 /* Line */
892 .chroma .line {
893 display: flex;
894 }
895 /* Keyword */
896 .chroma .k {
897 color: #c6a0f6;
898 }
899 /* KeywordConstant */
900 .chroma .kc {
901 color: #f5a97f;
902 }
903 /* KeywordDeclaration */
904 .chroma .kd {
905 color: #ed8796;
906 }
907 /* KeywordNamespace */
908 .chroma .kn {
909 color: #8bd5ca;
910 }
911 /* KeywordPseudo */
912 .chroma .kp {
913 color: #c6a0f6;
914 }
915 /* KeywordReserved */
916 .chroma .kr {
917 color: #c6a0f6;
918 }
919 /* KeywordType */
920 .chroma .kt {
921 color: #ed8796;
922 }
923 /* NameAttribute */
924 .chroma .na {
925 color: #8aadf4;
926 }
927 /* NameBuiltin */
928 .chroma .nb {
929 color: #91d7e3;
930 }
931 /* NameBuiltinPseudo */
932 .chroma .bp {
933 color: #91d7e3;
934 }
935 /* NameClass */
936 .chroma .nc {
937 color: #eed49f;
938 }
939 /* NameConstant */
940 .chroma .no {
941 color: #eed49f;
942 }
943 /* NameDecorator */
944 .chroma .nd {
945 color: #8aadf4;
946 font-weight: bold;
947 }
948 /* NameEntity */
949 .chroma .ni {
950 color: #8bd5ca;
951 }
952 /* NameException */
953 .chroma .ne {
954 color: #f5a97f;
955 }
956 /* NameFunction */
957 .chroma .nf {
958 color: #8aadf4;
959 }
960 /* NameFunctionMagic */
961 .chroma .fm {
962 color: #8aadf4;
963 }
964 /* NameLabel */
965 .chroma .nl {
966 color: #91d7e3;
967 }
968 /* NameNamespace */
969 .chroma .nn {
970 color: #f5a97f;
971 }
972 /* NameProperty */
973 .chroma .py {
974 color: #f5a97f;
975 }
976 /* NameTag */
977 .chroma .nt {
978 color: #c6a0f6;
979 }
980 /* NameVariable */
981 .chroma .nv {
982 color: #f4dbd6;
983 }
984 /* NameVariableClass */
985 .chroma .vc {
986 color: #f4dbd6;
987 }
988 /* NameVariableGlobal */
989 .chroma .vg {
990 color: #f4dbd6;
991 }
992 /* NameVariableInstance */
993 .chroma .vi {
994 color: #f4dbd6;
995 }
996 /* NameVariableMagic */
997 .chroma .vm {
998 color: #f4dbd6;
999 }
1000 /* LiteralString */
1001 .chroma .s {
1002 color: #a6da95;
1003 }
1004 /* LiteralStringAffix */
1005 .chroma .sa {
1006 color: #ed8796;
1007 }
1008 /* LiteralStringBacktick */
1009 .chroma .sb {
1010 color: #a6da95;
1011 }
1012 /* LiteralStringChar */
1013 .chroma .sc {
1014 color: #a6da95;
1015 }
1016 /* LiteralStringDelimiter */
1017 .chroma .dl {
1018 color: #8aadf4;
1019 }
1020 /* LiteralStringDoc */
1021 .chroma .sd {
1022 color: #6e738d;
1023 }
1024 /* LiteralStringDouble */
1025 .chroma .s2 {
1026 color: #a6da95;
1027 }
1028 /* LiteralStringEscape */
1029 .chroma .se {
1030 color: #8aadf4;
1031 }
1032 /* LiteralStringHeredoc */
1033 .chroma .sh {
1034 color: #6e738d;
1035 }
1036 /* LiteralStringInterpol */
1037 .chroma .si {
1038 color: #a6da95;
1039 }
1040 /* LiteralStringOther */
1041 .chroma .sx {
1042 color: #a6da95;
1043 }
1044 /* LiteralStringRegex */
1045 .chroma .sr {
1046 color: #8bd5ca;
1047 }
1048 /* LiteralStringSingle */
1049 .chroma .s1 {
1050 color: #a6da95;
1051 }
1052 /* LiteralStringSymbol */
1053 .chroma .ss {
1054 color: #a6da95;
1055 }
1056 /* LiteralNumber */
1057 .chroma .m {
1058 color: #f5a97f;
1059 }
1060 /* LiteralNumberBin */
1061 .chroma .mb {
1062 color: #f5a97f;
1063 }
1064 /* LiteralNumberFloat */
1065 .chroma .mf {
1066 color: #f5a97f;
1067 }
1068 /* LiteralNumberHex */
1069 .chroma .mh {
1070 color: #f5a97f;
1071 }
1072 /* LiteralNumberInteger */
1073 .chroma .mi {
1074 color: #f5a97f;
1075 }
1076 /* LiteralNumberIntegerLong */
1077 .chroma .il {
1078 color: #f5a97f;
1079 }
1080 /* LiteralNumberOct */
1081 .chroma .mo {
1082 color: #f5a97f;
1083 }
1084 /* Operator */
1085 .chroma .o {
1086 color: #91d7e3;
1087 font-weight: bold;
1088 }
1089 /* OperatorWord */
1090 .chroma .ow {
1091 color: #91d7e3;
1092 font-weight: bold;
1093 }
1094 /* Comment */
1095 .chroma .c {
1096 color: #6e738d;
1097 font-style: italic;
1098 }
1099 /* CommentHashbang */
1100 .chroma .ch {
1101 color: #6e738d;
1102 font-style: italic;
1103 }
1104 /* CommentMultiline */
1105 .chroma .cm {
1106 color: #6e738d;
1107 font-style: italic;
1108 }
1109 /* CommentSingle */
1110 .chroma .c1 {
1111 color: #6e738d;
1112 font-style: italic;
1113 }
1114 /* CommentSpecial */
1115 .chroma .cs {
1116 color: #6e738d;
1117 font-style: italic;
1118 }
1119 /* CommentPreproc */
1120 .chroma .cp {
1121 color: #6e738d;
1122 font-style: italic;
1123 }
1124 /* CommentPreprocFile */
1125 .chroma .cpf {
1126 color: #6e738d;
1127 font-weight: bold;
1128 font-style: italic;
1129 }
1130 /* GenericDeleted */
1131 .chroma .gd {
1132 color: #ed8796;
1133 background-color: oklch(44.4% 0.177 26.899 / 0.5);
1134 }
1135 /* GenericEmph */
1136 .chroma .ge {
1137 font-style: italic;
1138 }
1139 /* GenericError */
1140 .chroma .gr {
1141 color: #ed8796;
1142 }
1143 /* GenericHeading */
1144 .chroma .gh {
1145 color: #f5a97f;
1146 font-weight: bold;
1147 }
1148 /* GenericInserted */
1149 .chroma .gi {
1150 color: #a6da95;
1151 background-color: oklch(44.8% 0.119 151.328 / 0.5);
1152 }
1153 /* GenericStrong */
1154 .chroma .gs {
1155 font-weight: bold;
1156 }
1157 /* GenericSubheading */
1158 .chroma .gu {
1159 color: #f5a97f;
1160 font-weight: bold;
1161 }
1162 /* GenericTraceback */
1163 .chroma .gt {
1164 color: #ed8796;
1165 }
1166 /* GenericUnderline */
1167 .chroma .gl {
1168 text-decoration: underline;
1169 }
1170}
1171
1172actor-typeahead {
1173 --color-background: #ffffff;
1174 --color-border: #d1d5db;
1175 --color-shadow: #000000;
1176 --color-hover: #f9fafb;
1177 --color-avatar-fallback: #e5e7eb;
1178 --radius: 0;
1179 --padding-menu: 0rem;
1180 z-index: 1000;
1181}
1182
1183actor-typeahead::part(handle) {
1184 color: #111827;
1185}
1186
1187actor-typeahead::part(menu) {
1188 box-shadow:
1189 0 4px 6px -1px rgb(0 0 0 / 0.1),
1190 0 2px 4px -2px rgb(0 0 0 / 0.1);
1191}
1192
1193@media (prefers-color-scheme: dark) {
1194 actor-typeahead {
1195 --color-background: #1f2937;
1196 --color-border: #4b5563;
1197 --color-shadow: #000000;
1198 --color-hover: #374151;
1199 --color-avatar-fallback: #4b5563;
1200 }
1201
1202 actor-typeahead::part(handle) {
1203 color: #f9fafb;
1204 }
1205}
1206
1207@layer utilities {
1208 .hit-area {
1209 position: relative;
1210 }
1211
1212 .hit-area::before {
1213 content: "";
1214 position: absolute;
1215 top: var(--hit-area-t, 0px);
1216 right: var(--hit-area-r, 0px);
1217 bottom: var(--hit-area-b, 0px);
1218 left: var(--hit-area-l, 0px);
1219 pointer-events: inherit;
1220 }
1221
1222 .hit-area-debug {
1223 position: relative;
1224 }
1225
1226 .hit-area-debug::before {
1227 content: "";
1228 position: absolute;
1229 top: var(--hit-area-t, 0px);
1230 right: var(--hit-area-r, 0px);
1231 bottom: var(--hit-area-b, 0px);
1232 left: var(--hit-area-l, 0px);
1233 pointer-events: inherit;
1234 border: 1px dashed #3b82f6;
1235 background-color: rgba(59, 130, 246, 0.1);
1236 }
1237
1238 .hit-area-debug:hover::before {
1239 border-color: #22c55e;
1240 background-color: rgba(34, 197, 94, 0.1);
1241 }
1242
1243 .hit-area-1 {
1244 --hit-area-t: -0.25rem;
1245 --hit-area-r: -0.25rem;
1246 --hit-area-b: -0.25rem;
1247 --hit-area-l: -0.25rem;
1248 }
1249 .hit-area-2 {
1250 --hit-area-t: -0.5rem;
1251 --hit-area-r: -0.5rem;
1252 --hit-area-b: -0.5rem;
1253 --hit-area-l: -0.5rem;
1254 }
1255 .hit-area-4 {
1256 --hit-area-t: -1rem;
1257 --hit-area-r: -1rem;
1258 --hit-area-b: -1rem;
1259 --hit-area-l: -1rem;
1260 }
1261 .hit-area-6 {
1262 --hit-area-t: -1.5rem;
1263 --hit-area-r: -1.5rem;
1264 --hit-area-b: -1.5rem;
1265 --hit-area-l: -1.5rem;
1266 }
1267 .hit-area-8 {
1268 --hit-area-t: -2rem;
1269 --hit-area-r: -2rem;
1270 --hit-area-b: -2rem;
1271 --hit-area-l: -2rem;
1272 }
1273 .hit-area-10 {
1274 --hit-area-t: -2.5rem;
1275 --hit-area-r: -2.5rem;
1276 --hit-area-b: -2.5rem;
1277 --hit-area-l: -2.5rem;
1278 }
1279 .hit-area-12 {
1280 --hit-area-t: -3rem;
1281 --hit-area-r: -3rem;
1282 --hit-area-b: -3rem;
1283 --hit-area-l: -3rem;
1284 }
1285
1286 .hit-area-l-1 {
1287 --hit-area-l: -0.25rem;
1288 }
1289 .hit-area-l-2 {
1290 --hit-area-l: -0.5rem;
1291 }
1292 .hit-area-l-4 {
1293 --hit-area-l: -1rem;
1294 }
1295 .hit-area-l-6 {
1296 --hit-area-l: -1.5rem;
1297 }
1298 .hit-area-l-8 {
1299 --hit-area-l: -2rem;
1300 }
1301 .hit-area-l-10 {
1302 --hit-area-l: -2.5rem;
1303 }
1304 .hit-area-l-12 {
1305 --hit-area-l: -3rem;
1306 }
1307
1308 .hit-area-r-1 {
1309 --hit-area-r: -0.25rem;
1310 }
1311 .hit-area-r-2 {
1312 --hit-area-r: -0.5rem;
1313 }
1314 .hit-area-r-4 {
1315 --hit-area-r: -1rem;
1316 }
1317 .hit-area-r-6 {
1318 --hit-area-r: -1.5rem;
1319 }
1320 .hit-area-r-8 {
1321 --hit-area-r: -2rem;
1322 }
1323 .hit-area-r-10 {
1324 --hit-area-r: -2.5rem;
1325 }
1326 .hit-area-r-12 {
1327 --hit-area-r: -3rem;
1328 }
1329
1330 .hit-area-t-1 {
1331 --hit-area-t: -0.25rem;
1332 }
1333 .hit-area-t-2 {
1334 --hit-area-t: -0.5rem;
1335 }
1336 .hit-area-t-4 {
1337 --hit-area-t: -1rem;
1338 }
1339 .hit-area-t-6 {
1340 --hit-area-t: -1.5rem;
1341 }
1342 .hit-area-t-8 {
1343 --hit-area-t: -2rem;
1344 }
1345 .hit-area-t-10 {
1346 --hit-area-t: -2.5rem;
1347 }
1348 .hit-area-t-12 {
1349 --hit-area-t: -3rem;
1350 }
1351
1352 .hit-area-b-1 {
1353 --hit-area-b: -0.25rem;
1354 }
1355 .hit-area-b-2 {
1356 --hit-area-b: -0.5rem;
1357 }
1358 .hit-area-b-4 {
1359 --hit-area-b: -1rem;
1360 }
1361 .hit-area-b-6 {
1362 --hit-area-b: -1.5rem;
1363 }
1364 .hit-area-b-8 {
1365 --hit-area-b: -2rem;
1366 }
1367 .hit-area-b-10 {
1368 --hit-area-b: -2.5rem;
1369 }
1370 .hit-area-b-12 {
1371 --hit-area-b: -3rem;
1372 }
1373
1374 .hit-area-x-1 {
1375 --hit-area-l: -0.25rem;
1376 --hit-area-r: -0.25rem;
1377 }
1378 .hit-area-x-2 {
1379 --hit-area-l: -0.5rem;
1380 --hit-area-r: -0.5rem;
1381 }
1382 .hit-area-x-4 {
1383 --hit-area-l: -1rem;
1384 --hit-area-r: -1rem;
1385 }
1386 .hit-area-x-6 {
1387 --hit-area-l: -1.5rem;
1388 --hit-area-r: -1.5rem;
1389 }
1390 .hit-area-x-8 {
1391 --hit-area-l: -2rem;
1392 --hit-area-r: -2rem;
1393 }
1394 .hit-area-x-10 {
1395 --hit-area-l: -2.5rem;
1396 --hit-area-r: -2.5rem;
1397 }
1398 .hit-area-x-12 {
1399 --hit-area-l: -3rem;
1400 --hit-area-r: -3rem;
1401 }
1402
1403 .hit-area-y-1 {
1404 --hit-area-t: -0.25rem;
1405 --hit-area-b: -0.25rem;
1406 }
1407 .hit-area-y-2 {
1408 --hit-area-t: -0.5rem;
1409 --hit-area-b: -0.5rem;
1410 }
1411 .hit-area-y-4 {
1412 --hit-area-t: -1rem;
1413 --hit-area-b: -1rem;
1414 }
1415 .hit-area-y-6 {
1416 --hit-area-t: -1.5rem;
1417 --hit-area-b: -1.5rem;
1418 }
1419 .hit-area-y-8 {
1420 --hit-area-t: -2rem;
1421 --hit-area-b: -2rem;
1422 }
1423 .hit-area-y-10 {
1424 --hit-area-t: -2.5rem;
1425 --hit-area-b: -2.5rem;
1426 }
1427 .hit-area-y-12 {
1428 --hit-area-t: -3rem;
1429 --hit-area-b: -3rem;
1430 }
1431}