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