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