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