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