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