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