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