Monorepo for Tangled
tangled.org
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 font-bold py-2 uppercase dark:text-gray-100;
94 }
95 input {
96 @apply border border-gray-400 block rounded bg-gray-50 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
97 }
98 textarea {
99 @apply border border-gray-400 block rounded bg-gray-50 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
100 }
101 details summary::-webkit-details-marker {
102 display: none;
103 }
104
105 code {
106 @apply font-mono rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white;
107 }
108 }
109
110 @layer components {
111 .btn {
112 @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center
113 bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900
114 before:absolute before:inset-0 before:-z-10 before:block before:rounded
115 before:border before:border-gray-200 before:bg-white
116 before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1),0_1px_0_0_rgba(0,0,0,0.04)]
117 before:content-[''] before:transition-all before:duration-150 before:ease-in-out
118 hover:before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)]
119 hover:before:bg-gray-50
120 dark:hover:before:bg-gray-700
121 active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.1)]
122 focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400
123 disabled:cursor-not-allowed disabled:opacity-50
124 dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700;
125 }
126
127 .btn-create {
128 @apply btn text-white
129 before:bg-green-600 hover:before:bg-green-700
130 dark:before:bg-green-700 dark:hover:before:bg-green-800
131 before:border before:border-green-700 hover:before:border-green-800
132 focus-visible:before:outline-green-500
133 disabled:before:bg-green-400 dark:disabled:before:bg-green-600;
134 }
135
136 .prose hr {
137 @apply my-2;
138 }
139
140 .prose li:has(input) {
141 @apply list-none;
142 }
143
144 .prose ul:has(input) {
145 @apply pl-2;
146 }
147
148 .prose .heading .anchor {
149 @apply no-underline mx-2 opacity-0;
150 }
151
152 .prose .heading:hover .anchor {
153 @apply opacity-70;
154 }
155
156 .prose .heading .anchor:hover {
157 @apply opacity-70;
158 }
159
160 .prose a.footnote-backref {
161 @apply no-underline;
162 }
163
164 .prose a.mention {
165 @apply no-underline hover:underline font-bold;
166 }
167
168 .prose li {
169 @apply my-0 py-0;
170 }
171
172 .prose ul,
173 .prose ol {
174 @apply my-1 py-0;
175 }
176
177 .prose img {
178 display: inline;
179 margin: 0;
180 vertical-align: middle;
181 }
182
183 .prose input {
184 @apply inline-block my-0 mb-1 mx-1;
185 }
186
187 .prose input[type="checkbox"] {
188 @apply disabled:accent-blue-500 checked:accent-blue-500 disabled:checked:accent-blue-500;
189 }
190
191 /* Base callout */
192 details[data-callout] {
193 @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4;
194 }
195
196 details[data-callout] > summary {
197 @apply font-bold cursor-pointer mb-1;
198 }
199
200 details[data-callout] > .callout-content {
201 @apply text-sm leading-snug;
202 }
203
204 /* Note (blue) */
205 details[data-callout="note" i] {
206 @apply border-blue-400 dark:border-blue-500;
207 }
208 details[data-callout="note" i] > summary {
209 @apply text-blue-700 dark:text-blue-400;
210 }
211
212 /* Important (purple) */
213 details[data-callout="important" i] {
214 @apply border-purple-400 dark:border-purple-500;
215 }
216 details[data-callout="important" i] > summary {
217 @apply text-purple-700 dark:text-purple-400;
218 }
219
220 /* Warning (yellow) */
221 details[data-callout="warning" i] {
222 @apply border-yellow-400 dark:border-yellow-500;
223 }
224 details[data-callout="warning" i] > summary {
225 @apply text-yellow-700 dark:text-yellow-400;
226 }
227
228 /* Caution (red) */
229 details[data-callout="caution" i] {
230 @apply border-red-400 dark:border-red-500;
231 }
232 details[data-callout="caution" i] > summary {
233 @apply text-red-700 dark:text-red-400;
234 }
235
236 /* Tip (green) */
237 details[data-callout="tip" i] {
238 @apply border-green-400 dark:border-green-500;
239 }
240 details[data-callout="tip" i] > summary {
241 @apply text-green-700 dark:text-green-400;
242 }
243
244 /* Optional: hide the disclosure arrow like GitHub */
245 details[data-callout] > summary::-webkit-details-marker {
246 display: none;
247 }
248
249 }
250 @layer utilities {
251 .error {
252 @apply py-1 text-red-400 dark:text-red-300;
253 }
254 .success {
255 @apply py-1 text-gray-900 dark:text-gray-100;
256 }
257 }
258
259}
260
261/* Background */
262.bg {
263 color: #4c4f69;
264 background-color: #eff1f5;
265}
266/* PreWrapper */
267.chroma {
268 color: #4c4f69;
269}
270/* Error */
271.chroma .err {
272 color: #d20f39;
273}
274/* LineLink */
275.chroma .lnlinks {
276 outline: none;
277 text-decoration: none;
278 color: inherit;
279}
280/* LineTableTD */
281.chroma .lntd {
282 vertical-align: top;
283 padding: 0;
284 margin: 0;
285 border: 0;
286}
287/* LineTable */
288.chroma .lntable {
289 border-spacing: 0;
290 padding: 0;
291 margin: 0;
292 border: 0;
293}
294/* LineHighlight */
295.chroma .hl {
296 @apply bg-amber-400/30 dark:bg-amber-500/20;
297}
298
299/* LineNumbersTable */
300.chroma .lnt {
301 white-space: pre;
302 -webkit-user-select: none;
303 user-select: none;
304 margin-right: 0.4em;
305 padding: 0 0.4em 0 0.4em;
306 color: #8c8fa1;
307}
308/* LineNumbers */
309.chroma .ln {
310 white-space: pre;
311 -webkit-user-select: none;
312 user-select: none;
313 margin-right: 0.4em;
314 padding: 0 0.4em 0 0.4em;
315 color: #8c8fa1;
316}
317/* Line */
318.chroma .line {
319 display: flex;
320}
321/* Keyword */
322.chroma .k {
323 color: #8839ef;
324}
325/* KeywordConstant */
326.chroma .kc {
327 color: #fe640b;
328}
329/* KeywordDeclaration */
330.chroma .kd {
331 color: #d20f39;
332}
333/* KeywordNamespace */
334.chroma .kn {
335 color: #179299;
336}
337/* KeywordPseudo */
338.chroma .kp {
339 color: #8839ef;
340}
341/* KeywordReserved */
342.chroma .kr {
343 color: #8839ef;
344}
345/* KeywordType */
346.chroma .kt {
347 color: #d20f39;
348}
349/* NameAttribute */
350.chroma .na {
351 color: #1e66f5;
352}
353/* NameBuiltin */
354.chroma .nb {
355 color: #04a5e5;
356}
357/* NameBuiltinPseudo */
358.chroma .bp {
359 color: #04a5e5;
360}
361/* NameClass */
362.chroma .nc {
363 color: #df8e1d;
364}
365/* NameConstant */
366.chroma .no {
367 color: #df8e1d;
368}
369/* NameDecorator */
370.chroma .nd {
371 color: #1e66f5;
372 font-weight: bold;
373}
374/* NameEntity */
375.chroma .ni {
376 color: #179299;
377}
378/* NameException */
379.chroma .ne {
380 color: #fe640b;
381}
382/* NameFunction */
383.chroma .nf {
384 color: #1e66f5;
385}
386/* NameFunctionMagic */
387.chroma .fm {
388 color: #1e66f5;
389}
390/* NameLabel */
391.chroma .nl {
392 color: #04a5e5;
393}
394/* NameNamespace */
395.chroma .nn {
396 color: #fe640b;
397}
398/* NameProperty */
399.chroma .py {
400 color: #fe640b;
401}
402/* NameTag */
403.chroma .nt {
404 color: #8839ef;
405}
406/* NameVariable */
407.chroma .nv {
408 color: #dc8a78;
409}
410/* NameVariableClass */
411.chroma .vc {
412 color: #dc8a78;
413}
414/* NameVariableGlobal */
415.chroma .vg {
416 color: #dc8a78;
417}
418/* NameVariableInstance */
419.chroma .vi {
420 color: #dc8a78;
421}
422/* NameVariableMagic */
423.chroma .vm {
424 color: #dc8a78;
425}
426/* LiteralString */
427.chroma .s {
428 color: #40a02b;
429}
430/* LiteralStringAffix */
431.chroma .sa {
432 color: #d20f39;
433}
434/* LiteralStringBacktick */
435.chroma .sb {
436 color: #40a02b;
437}
438/* LiteralStringChar */
439.chroma .sc {
440 color: #40a02b;
441}
442/* LiteralStringDelimiter */
443.chroma .dl {
444 color: #1e66f5;
445}
446/* LiteralStringDoc */
447.chroma .sd {
448 color: #9ca0b0;
449}
450/* LiteralStringDouble */
451.chroma .s2 {
452 color: #40a02b;
453}
454/* LiteralStringEscape */
455.chroma .se {
456 color: #1e66f5;
457}
458/* LiteralStringHeredoc */
459.chroma .sh {
460 color: #9ca0b0;
461}
462/* LiteralStringInterpol */
463.chroma .si {
464 color: #40a02b;
465}
466/* LiteralStringOther */
467.chroma .sx {
468 color: #40a02b;
469}
470/* LiteralStringRegex */
471.chroma .sr {
472 color: #179299;
473}
474/* LiteralStringSingle */
475.chroma .s1 {
476 color: #40a02b;
477}
478/* LiteralStringSymbol */
479.chroma .ss {
480 color: #40a02b;
481}
482/* LiteralNumber */
483.chroma .m {
484 color: #fe640b;
485}
486/* LiteralNumberBin */
487.chroma .mb {
488 color: #fe640b;
489}
490/* LiteralNumberFloat */
491.chroma .mf {
492 color: #fe640b;
493}
494/* LiteralNumberHex */
495.chroma .mh {
496 color: #fe640b;
497}
498/* LiteralNumberInteger */
499.chroma .mi {
500 color: #fe640b;
501}
502/* LiteralNumberIntegerLong */
503.chroma .il {
504 color: #fe640b;
505}
506/* LiteralNumberOct */
507.chroma .mo {
508 color: #fe640b;
509}
510/* Operator */
511.chroma .o {
512 color: #04a5e5;
513 font-weight: bold;
514}
515/* OperatorWord */
516.chroma .ow {
517 color: #04a5e5;
518 font-weight: bold;
519}
520/* Comment */
521.chroma .c {
522 color: #9ca0b0;
523 font-style: italic;
524}
525/* CommentHashbang */
526.chroma .ch {
527 color: #9ca0b0;
528 font-style: italic;
529}
530/* CommentMultiline */
531.chroma .cm {
532 color: #9ca0b0;
533 font-style: italic;
534}
535/* CommentSingle */
536.chroma .c1 {
537 color: #9ca0b0;
538 font-style: italic;
539}
540/* CommentSpecial */
541.chroma .cs {
542 color: #9ca0b0;
543 font-style: italic;
544}
545/* CommentPreproc */
546.chroma .cp {
547 color: #9ca0b0;
548 font-style: italic;
549}
550/* CommentPreprocFile */
551.chroma .cpf {
552 color: #9ca0b0;
553 font-weight: bold;
554 font-style: italic;
555}
556/* GenericDeleted */
557.chroma .gd {
558 color: #d20f39;
559 background-color: oklch(93.6% 0.032 17.717);
560}
561/* GenericEmph */
562.chroma .ge {
563 font-style: italic;
564}
565/* GenericError */
566.chroma .gr {
567 color: #d20f39;
568}
569/* GenericHeading */
570.chroma .gh {
571 color: #fe640b;
572 font-weight: bold;
573}
574/* GenericInserted */
575.chroma .gi {
576 color: #40a02b;
577 background-color: oklch(96.2% 0.044 156.743);
578}
579/* GenericStrong */
580.chroma .gs {
581 font-weight: bold;
582}
583/* GenericSubheading */
584.chroma .gu {
585 color: #fe640b;
586 font-weight: bold;
587}
588/* GenericTraceback */
589.chroma .gt {
590 color: #d20f39;
591}
592/* GenericUnderline */
593.chroma .gl {
594 text-decoration: underline;
595}
596
597@media (prefers-color-scheme: dark) {
598 /* Background */
599 .bg {
600 color: #cad3f5;
601 background-color: #24273a;
602 }
603 /* PreWrapper */
604 .chroma {
605 color: #cad3f5;
606 }
607 /* Error */
608 .chroma .err {
609 color: #ed8796;
610 }
611 /* LineLink */
612 .chroma .lnlinks {
613 outline: none;
614 text-decoration: none;
615 color: inherit;
616 }
617 /* LineTableTD */
618 .chroma .lntd {
619 vertical-align: top;
620 padding: 0;
621 margin: 0;
622 border: 0;
623 }
624 /* LineTable */
625 .chroma .lntable {
626 border-spacing: 0;
627 padding: 0;
628 margin: 0;
629 border: 0;
630 }
631 /* LineHighlight */
632 .chroma .hl {
633 background-color: #494d64;
634 }
635 /* LineNumbersTable */
636 .chroma .lnt {
637 white-space: pre;
638 -webkit-user-select: none;
639 user-select: none;
640 margin-right: 0.4em;
641 padding: 0 0.4em 0 0.4em;
642 color: #8087a2;
643 }
644 /* LineNumbers */
645 .chroma .ln {
646 white-space: pre;
647 -webkit-user-select: none;
648 user-select: none;
649 margin-right: 0.4em;
650 padding: 0 0.4em 0 0.4em;
651 color: #8087a2;
652 }
653 /* Line */
654 .chroma .line {
655 display: flex;
656 }
657 /* Keyword */
658 .chroma .k {
659 color: #c6a0f6;
660 }
661 /* KeywordConstant */
662 .chroma .kc {
663 color: #f5a97f;
664 }
665 /* KeywordDeclaration */
666 .chroma .kd {
667 color: #ed8796;
668 }
669 /* KeywordNamespace */
670 .chroma .kn {
671 color: #8bd5ca;
672 }
673 /* KeywordPseudo */
674 .chroma .kp {
675 color: #c6a0f6;
676 }
677 /* KeywordReserved */
678 .chroma .kr {
679 color: #c6a0f6;
680 }
681 /* KeywordType */
682 .chroma .kt {
683 color: #ed8796;
684 }
685 /* NameAttribute */
686 .chroma .na {
687 color: #8aadf4;
688 }
689 /* NameBuiltin */
690 .chroma .nb {
691 color: #91d7e3;
692 }
693 /* NameBuiltinPseudo */
694 .chroma .bp {
695 color: #91d7e3;
696 }
697 /* NameClass */
698 .chroma .nc {
699 color: #eed49f;
700 }
701 /* NameConstant */
702 .chroma .no {
703 color: #eed49f;
704 }
705 /* NameDecorator */
706 .chroma .nd {
707 color: #8aadf4;
708 font-weight: bold;
709 }
710 /* NameEntity */
711 .chroma .ni {
712 color: #8bd5ca;
713 }
714 /* NameException */
715 .chroma .ne {
716 color: #f5a97f;
717 }
718 /* NameFunction */
719 .chroma .nf {
720 color: #8aadf4;
721 }
722 /* NameFunctionMagic */
723 .chroma .fm {
724 color: #8aadf4;
725 }
726 /* NameLabel */
727 .chroma .nl {
728 color: #91d7e3;
729 }
730 /* NameNamespace */
731 .chroma .nn {
732 color: #f5a97f;
733 }
734 /* NameProperty */
735 .chroma .py {
736 color: #f5a97f;
737 }
738 /* NameTag */
739 .chroma .nt {
740 color: #c6a0f6;
741 }
742 /* NameVariable */
743 .chroma .nv {
744 color: #f4dbd6;
745 }
746 /* NameVariableClass */
747 .chroma .vc {
748 color: #f4dbd6;
749 }
750 /* NameVariableGlobal */
751 .chroma .vg {
752 color: #f4dbd6;
753 }
754 /* NameVariableInstance */
755 .chroma .vi {
756 color: #f4dbd6;
757 }
758 /* NameVariableMagic */
759 .chroma .vm {
760 color: #f4dbd6;
761 }
762 /* LiteralString */
763 .chroma .s {
764 color: #a6da95;
765 }
766 /* LiteralStringAffix */
767 .chroma .sa {
768 color: #ed8796;
769 }
770 /* LiteralStringBacktick */
771 .chroma .sb {
772 color: #a6da95;
773 }
774 /* LiteralStringChar */
775 .chroma .sc {
776 color: #a6da95;
777 }
778 /* LiteralStringDelimiter */
779 .chroma .dl {
780 color: #8aadf4;
781 }
782 /* LiteralStringDoc */
783 .chroma .sd {
784 color: #6e738d;
785 }
786 /* LiteralStringDouble */
787 .chroma .s2 {
788 color: #a6da95;
789 }
790 /* LiteralStringEscape */
791 .chroma .se {
792 color: #8aadf4;
793 }
794 /* LiteralStringHeredoc */
795 .chroma .sh {
796 color: #6e738d;
797 }
798 /* LiteralStringInterpol */
799 .chroma .si {
800 color: #a6da95;
801 }
802 /* LiteralStringOther */
803 .chroma .sx {
804 color: #a6da95;
805 }
806 /* LiteralStringRegex */
807 .chroma .sr {
808 color: #8bd5ca;
809 }
810 /* LiteralStringSingle */
811 .chroma .s1 {
812 color: #a6da95;
813 }
814 /* LiteralStringSymbol */
815 .chroma .ss {
816 color: #a6da95;
817 }
818 /* LiteralNumber */
819 .chroma .m {
820 color: #f5a97f;
821 }
822 /* LiteralNumberBin */
823 .chroma .mb {
824 color: #f5a97f;
825 }
826 /* LiteralNumberFloat */
827 .chroma .mf {
828 color: #f5a97f;
829 }
830 /* LiteralNumberHex */
831 .chroma .mh {
832 color: #f5a97f;
833 }
834 /* LiteralNumberInteger */
835 .chroma .mi {
836 color: #f5a97f;
837 }
838 /* LiteralNumberIntegerLong */
839 .chroma .il {
840 color: #f5a97f;
841 }
842 /* LiteralNumberOct */
843 .chroma .mo {
844 color: #f5a97f;
845 }
846 /* Operator */
847 .chroma .o {
848 color: #91d7e3;
849 font-weight: bold;
850 }
851 /* OperatorWord */
852 .chroma .ow {
853 color: #91d7e3;
854 font-weight: bold;
855 }
856 /* Comment */
857 .chroma .c {
858 color: #6e738d;
859 font-style: italic;
860 }
861 /* CommentHashbang */
862 .chroma .ch {
863 color: #6e738d;
864 font-style: italic;
865 }
866 /* CommentMultiline */
867 .chroma .cm {
868 color: #6e738d;
869 font-style: italic;
870 }
871 /* CommentSingle */
872 .chroma .c1 {
873 color: #6e738d;
874 font-style: italic;
875 }
876 /* CommentSpecial */
877 .chroma .cs {
878 color: #6e738d;
879 font-style: italic;
880 }
881 /* CommentPreproc */
882 .chroma .cp {
883 color: #6e738d;
884 font-style: italic;
885 }
886 /* CommentPreprocFile */
887 .chroma .cpf {
888 color: #6e738d;
889 font-weight: bold;
890 font-style: italic;
891 }
892 /* GenericDeleted */
893 .chroma .gd {
894 color: #ed8796;
895 background-color: oklch(44.4% 0.177 26.899 / 0.5);
896 }
897 /* GenericEmph */
898 .chroma .ge {
899 font-style: italic;
900 }
901 /* GenericError */
902 .chroma .gr {
903 color: #ed8796;
904 }
905 /* GenericHeading */
906 .chroma .gh {
907 color: #f5a97f;
908 font-weight: bold;
909 }
910 /* GenericInserted */
911 .chroma .gi {
912 color: #a6da95;
913 background-color: oklch(44.8% 0.119 151.328 / 0.5);
914 }
915 /* GenericStrong */
916 .chroma .gs {
917 font-weight: bold;
918 }
919 /* GenericSubheading */
920 .chroma .gu {
921 color: #f5a97f;
922 font-weight: bold;
923 }
924 /* GenericTraceback */
925 .chroma .gt {
926 color: #ed8796;
927 }
928 /* GenericUnderline */
929 .chroma .gl {
930 text-decoration: underline;
931 }
932}
933
934actor-typeahead {
935 --color-background: #ffffff;
936 --color-border: #d1d5db;
937 --color-shadow: #000000;
938 --color-hover: #f9fafb;
939 --color-avatar-fallback: #e5e7eb;
940 --radius: 0.0;
941 --padding-menu: 0.0rem;
942 z-index: 1000;
943}
944
945actor-typeahead::part(handle) {
946 color: #111827;
947}
948
949actor-typeahead::part(menu) {
950 box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
951}
952
953@media (prefers-color-scheme: dark) {
954 actor-typeahead {
955 --color-background: #1f2937;
956 --color-border: #4b5563;
957 --color-shadow: #000000;
958 --color-hover: #374151;
959 --color-avatar-fallback: #4b5563;
960 }
961
962 actor-typeahead::part(handle) {
963 color: #f9fafb;
964 }
965}