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