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