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