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