Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
core input.css
39 kB · 1650 lines
CSS
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651@tailwind base;@tailwind components;@tailwind utilities;@layer base { @font-face { font-family: "InterVariable"; src: url("/static/fonts/InterVariable.woff2") format("woff2-variations"); font-weight: 100 600; font-style: normal; font-display: swap; }
@font-face { font-family: "InterVariable"; src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2-variations"); font-weight: 100 600; font-style: italic; font-display: swap; }
@font-face { font-family: "InterVariable"; src: url("/static/fonts/InterDisplay-Bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: "InterVariable"; src: url("/static/fonts/InterDisplay-BoldItalic.woff2") format("woff2"); font-weight: bold; font-style: italic; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/static/fonts/IBMPlexMono-Italic.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/static/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2"); font-weight: bold; font-style: italic; font-display: swap; }
::selection { @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white; }
@layer base { html { font-size: 14px; scrollbar-gutter: stable; } @supports (font-variation-settings: normal) { html { font-feature-settings: "kern" 1, "liga" 1, "cv05" 1, "tnum" 1; } }
a { @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300; }
label { @apply block text-gray-900 text-sm py-2 dark:text-gray-100; }
input, textarea { @apply block rounded p-3 bg-gray-50 dark:bg-gray-800 dark:text-white border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500; }
input[type="checkbox"] { @apply appearance-none size-4 p-0 rounded bg-transparent border border-gray-200 hover:bg-gray-100 checked:bg-gray-900 checked:border-transparent checked:hover:bg-gray-800 indeterminate:bg-gray-900 indeterminate:border-transparent disabled:cursor-not-allowed disabled:bg-gray-100 disabled:border-gray-200 disabled:checked:bg-gray-300 disabled:checked:border-transparent disabled:indeterminate:bg-gray-100 disabled:indeterminate:border-gray-200 dark:border-gray-600 dark:hover:bg-gray-700 dark:checked:bg-gray-100 dark:checked:hover:bg-gray-200 dark:checked:border-gray-400 dark:indeterminate:bg-gray-100 dark:indeterminate:border-transparent dark:disabled:bg-gray-700 dark:disabled:border-gray-600 dark:disabled:checked:bg-gray-500 dark:disabled:checked:border-transparent dark:disabled:indeterminate:bg-gray-700 dark:disabled:indeterminate:border-gray-600 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500; background-position: center; background-repeat: no-repeat; background-size: 12px; } input[type="checkbox"]:checked { 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>"); } input[type="checkbox"]:indeterminate { 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>"); } input[type="checkbox"]:disabled:indeterminate { 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>"); } @media (prefers-color-scheme: dark) { input[type="checkbox"]:checked { 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>"); } input[type="checkbox"]:indeterminate { 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>"); } input[type="checkbox"]:disabled:indeterminate { 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>"); } }
input[type="radio"] { @apply appearance-none size-4 p-0 rounded-full bg-transparent border
border-gray-400 hover:border-gray-900 hover:bg-gray-200
disabled:cursor-not-allowed disabled:border-gray-300 disabled:checked:border-gray-300 disabled:hover:bg-inherit
dark:border-gray-400 dark:hover:border-gray-100
dark:hover:bg-gray-600
dark:checked:border-gray-400
dark:disabled:border-gray-500 dark:disabled:checked:border-gray-500
focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500;
background-position: center; background-repeat: no-repeat; background-size: 8px; } input[type="radio"]:checked { 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>"); } input[type="radio"]:disabled:checked { 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>"); } @media (prefers-color-scheme: dark) { input[type="radio"]:checked { 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>"); } input[type="radio"]:disabled:checked { 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>"); } }
details summary::-webkit-details-marker { display: none; }
code { @apply font-mono rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white; } }
@layer components { .btn { @apply relative z-0 inline-flex overflow-hidden items-center justify-center min-h-[32px] px-2 py-[6px] gap-1.5 rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 transition-colors duration-150 ease-in-out outline-transparent cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400 dark:focus-visible:outline-gray-600 no-underline hover:no-underline;
@apply before:absolute before:inset-0 before:-z-10 before:block before:rounded-sm before:content-[''] before:transition-all before:duration-150 before:ease-in-out before:shadow-[inset_0_-2px_0_0_theme(colors.gray.200)] dark:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900)];
@apply hover:bg-gray-50 dark:hover:bg-gray-700 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)] 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)] active:translate-y-0.5 disabled:cursor-not-allowed disabled:opacity-50; }
.btn-flat { @apply inline-flex items-center justify-center min-h-[32px] px-2 py-[6px] gap-1.5 rounded text-sm text-gray-900 dark:text-gray-100 cursor-pointer no-underline hover:no-underline transition-colors duration-150 ease-in-out focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400 hover:bg-gray-100 dark:hover:text-gray-100 dark:hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:text-inherit disabled:hover:bg-inherit; }
.btn-create { @apply btn text-white bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 border border-green-700 hover:border-green-800 focus-visible:outline-green-500 disabled:bg-green-400 dark:disabled:bg-green-600 before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900/25%)] hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900/25%)] active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.900/50%)]; }
.btn-create-flat { @apply btn-create before:shadow-none hover:before:shadow-none active:before:shadow-none; }
.btn-primary { @apply btn text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 border border-indigo-700 hover:border-indigo-800 dark:border-indigo-600 dark:hover:border-indigo-700 focus-visible:outline-indigo-500 disabled:bg-indigo-400 dark:disabled:bg-indigo-400 before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900/25%)] hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900/25%)] active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.900/50%)]; }
.btn-cancel { @apply btn text-white bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 border border-red-700 hover:border-red-800 focus-visible:outline-red-500 disabled:bg-red-400 dark:disabled:bg-red-600; }
.btn-cancel-flat { @apply btn-cancel before:shadow-none hover:before:shadow-none active:before:shadow-none; }
.btn-group { @apply inline-flex items-stretch max-h-[32px] rounded border border-gray-200 dark:border-gray-700 divide-x divide-gray-200 dark:divide-gray-700 overflow-clip; }
.btn-group-item { @apply btn-flat min-h-[30px] gap-1.5 bg-gray-50 dark:bg-gray-900 rounded-none border-y-0 no-underline hover:no-underline hover:text-gray-600 dark:hover:text-gray-400; }
.btn-group-item.active { @apply btn min-h-[30px] rounded-none border-y-0 before:border-none before:rounded-none before:bg-inherit;
&:first-child { @apply border-none before:rounded-l-sm; } &:last-child { @apply border-y-0 border-r-0 border-l before:rounded-r-sm; } }
.prose { overflow-wrap: anywhere; }
.prose td, .prose th { overflow-wrap: normal; }
.prose hr { @apply my-2; }
.prose li:has(input) { @apply list-none; }
.prose ul:has(input) { @apply pl-2; }
.prose .heading .anchor { @apply no-underline mx-2 opacity-0; }
.prose .heading:hover .anchor { @apply opacity-70; }
.prose .heading .anchor:hover { @apply opacity-70; }
.prose h1:target, .prose h2:target, .prose h3:target, .prose h4:target, .prose h5:target, .prose h6:target { @apply bg-yellow-200/30 dark:bg-yellow-600/30; }
.prose a.footnote-backref { @apply no-underline; }
.prose a.mention { @apply no-underline hover:underline font-bold; }
.prose li { @apply my-0 py-0; }
.prose ul, .prose ol { @apply my-1 py-0; }
.prose img { display: inline; margin: 0; vertical-align: middle; }
.prose input { @apply inline-block my-0 mt-1 mx-1; }
/* Mermaid diagrams */ .prose pre.mermaid { @apply flex justify-center my-4 overflow-x-auto bg-transparent border-0; }
/* Base callout */ details[data-callout] { @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4; }
details[data-callout] > summary { @apply font-bold cursor-pointer mb-1; }
details[data-callout] > .callout-content { @apply text-sm leading-snug; }
/* Note (blue) */ details[data-callout="note" i] { @apply border-blue-400 dark:border-blue-500; } details[data-callout="note" i] > summary { @apply text-blue-700 dark:text-blue-400; }
/* Important (purple) */ details[data-callout="important" i] { @apply border-purple-400 dark:border-purple-500; } details[data-callout="important" i] > summary { @apply text-purple-700 dark:text-purple-400; }
/* Warning (yellow) */ details[data-callout="warning" i] { @apply border-yellow-400 dark:border-yellow-500; } details[data-callout="warning" i] > summary { @apply text-yellow-700 dark:text-yellow-400; }
/* Caution (red) */ details[data-callout="caution" i] { @apply border-red-400 dark:border-red-500; } details[data-callout="caution" i] > summary { @apply text-red-700 dark:text-red-400; }
/* Tip (green) */ details[data-callout="tip" i] { @apply border-green-400 dark:border-green-500; } details[data-callout="tip" i] > summary { @apply text-green-700 dark:text-green-400; }
/* Optional: hide the disclosure arrow like GitHub */ details[data-callout] > summary::-webkit-details-marker { display: none; } } @layer utilities { .error { @apply py-1 text-red-400 dark:text-red-300; } .success { @apply py-1 text-gray-900 dark:text-gray-100; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-marquee { animation: scroll 60s linear infinite; }
.animate-marquee:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .animate-marquee { animation: none; transform: none; } }
@keyframes progress { from { width: 0%; } to { width: 100%; } }
.animate-progress { animation: progress 10s linear forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.animate-fadein { animation: fadeIn 0.25s ease-in forwards; }
.animate-fadeout { animation: fadeOut 0.25s ease-out forwards; } }}
/* Background */.bg { color: #4c4f69; background-color: #eff1f5;}/* PreWrapper */.chroma { color: #4c4f69;}/* Error */.chroma .err { color: #d20f39;}/* LineLink */.chroma .lnlinks { outline: none; text-decoration: none; color: inherit;}/* LineTableTD */.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0;}/* LineTable */.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0;}/* LineHighlight */.chroma .hl { @apply bg-amber-400/30 dark:bg-amber-500/20;}
.line-quote-hl,.line-range-hl { @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;}
.chunk-match-hl { @apply rounded-sm !bg-yellow-300/70 dark:!bg-yellow-600/60;}
:is(.line-quote-hl, .line-range-hl) > .min-w-\[3\.5rem\] { @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;}
:is(.line-quote-hl, .line-range-hl) > .min-w-\[3\.5rem\] a { @apply !text-black dark:!text-white;}
/* LineNumbersTable */.chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #8c8fa1;}/* LineNumbers */.chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #8c8fa1;}/* Line */.chroma .line { display: flex;}/* Keyword */.chroma .k { color: #8839ef;}/* KeywordConstant */.chroma .kc { color: #fe640b;}/* KeywordDeclaration */.chroma .kd { color: #d20f39;}/* KeywordNamespace */.chroma .kn { color: #179299;}/* KeywordPseudo */.chroma .kp { color: #8839ef;}/* KeywordReserved */.chroma .kr { color: #8839ef;}/* KeywordType */.chroma .kt { color: #d20f39;}/* NameAttribute */.chroma .na { color: #1e66f5;}/* NameBuiltin */.chroma .nb { color: #04a5e5;}/* NameBuiltinPseudo */.chroma .bp { color: #04a5e5;}/* NameClass */.chroma .nc { color: #df8e1d;}/* NameConstant */.chroma .no { color: #df8e1d;}/* NameDecorator */.chroma .nd { color: #1e66f5; font-weight: bold;}/* NameEntity */.chroma .ni { color: #179299;}/* NameException */.chroma .ne { color: #fe640b;}/* NameFunction */.chroma .nf { color: #1e66f5;}/* NameFunctionMagic */.chroma .fm { color: #1e66f5;}/* NameLabel */.chroma .nl { color: #04a5e5;}/* NameNamespace */.chroma .nn { color: #fe640b;}/* NameProperty */.chroma .py { color: #fe640b;}/* NameTag */.chroma .nt { color: #8839ef;}/* NameVariable */.chroma .nv { color: #dc8a78;}/* NameVariableClass */.chroma .vc { color: #dc8a78;}/* NameVariableGlobal */.chroma .vg { color: #dc8a78;}/* NameVariableInstance */.chroma .vi { color: #dc8a78;}/* NameVariableMagic */.chroma .vm { color: #dc8a78;}/* LiteralString */.chroma .s { color: #40a02b;}/* LiteralStringAffix */.chroma .sa { color: #d20f39;}/* LiteralStringBacktick */.chroma .sb { color: #40a02b;}/* LiteralStringChar */.chroma .sc { color: #40a02b;}/* LiteralStringDelimiter */.chroma .dl { color: #1e66f5;}/* LiteralStringDoc */.chroma .sd { color: #9ca0b0;}/* LiteralStringDouble */.chroma .s2 { color: #40a02b;}/* LiteralStringEscape */.chroma .se { color: #1e66f5;}/* LiteralStringHeredoc */.chroma .sh { color: #9ca0b0;}/* LiteralStringInterpol */.chroma .si { color: #40a02b;}/* LiteralStringOther */.chroma .sx { color: #40a02b;}/* LiteralStringRegex */.chroma .sr { color: #179299;}/* LiteralStringSingle */.chroma .s1 { color: #40a02b;}/* LiteralStringSymbol */.chroma .ss { color: #40a02b;}/* LiteralNumber */.chroma .m { color: #fe640b;}/* LiteralNumberBin */.chroma .mb { color: #fe640b;}/* LiteralNumberFloat */.chroma .mf { color: #fe640b;}/* LiteralNumberHex */.chroma .mh { color: #fe640b;}/* LiteralNumberInteger */.chroma .mi { color: #fe640b;}/* LiteralNumberIntegerLong */.chroma .il { color: #fe640b;}/* LiteralNumberOct */.chroma .mo { color: #fe640b;}/* Operator */.chroma .o { color: #04a5e5; font-weight: bold;}/* OperatorWord */.chroma .ow { color: #04a5e5; font-weight: bold;}/* Comment */.chroma .c { color: #9ca0b0; font-style: italic;}/* CommentHashbang */.chroma .ch { color: #9ca0b0; font-style: italic;}/* CommentMultiline */.chroma .cm { color: #9ca0b0; font-style: italic;}/* CommentSingle */.chroma .c1 { color: #9ca0b0; font-style: italic;}/* CommentSpecial */.chroma .cs { color: #9ca0b0; font-style: italic;}/* CommentPreproc */.chroma .cp { color: #9ca0b0; font-style: italic;}/* CommentPreprocFile */.chroma .cpf { color: #9ca0b0; font-weight: bold; font-style: italic;}/* GenericDeleted */.chroma .gd { color: #d20f39; background-color: oklch(93.6% 0.032 17.717);}/* GenericEmph */.chroma .ge { font-style: italic;}/* GenericError */.chroma .gr { color: #d20f39;}/* GenericHeading */.chroma .gh { color: #fe640b; font-weight: bold;}/* GenericInserted */.chroma .gi { color: #40a02b; background-color: oklch(96.2% 0.044 156.743);}/* GenericStrong */.chroma .gs { font-weight: bold;}/* GenericSubheading */.chroma .gu { color: #fe640b; font-weight: bold;}/* GenericTraceback */.chroma .gt { color: #d20f39;}/* GenericUnderline */.chroma .gl { text-decoration: underline;}
@media (prefers-color-scheme: dark) { /* Background */ .bg { color: #cad3f5; background-color: #24273a; } /* PreWrapper */ .chroma { color: #cad3f5; } /* Error */ .chroma .err { color: #ed8796; } /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit; } /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } /* LineHighlight */ .chroma .hl { background-color: #494d64; } /* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #8087a2; } /* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #8087a2; } /* Line */ .chroma .line { display: flex; } /* Keyword */ .chroma .k { color: #c6a0f6; } /* KeywordConstant */ .chroma .kc { color: #f5a97f; } /* KeywordDeclaration */ .chroma .kd { color: #ed8796; } /* KeywordNamespace */ .chroma .kn { color: #8bd5ca; } /* KeywordPseudo */ .chroma .kp { color: #c6a0f6; } /* KeywordReserved */ .chroma .kr { color: #c6a0f6; } /* KeywordType */ .chroma .kt { color: #ed8796; } /* NameAttribute */ .chroma .na { color: #8aadf4; } /* NameBuiltin */ .chroma .nb { color: #91d7e3; } /* NameBuiltinPseudo */ .chroma .bp { color: #91d7e3; } /* NameClass */ .chroma .nc { color: #eed49f; } /* NameConstant */ .chroma .no { color: #eed49f; } /* NameDecorator */ .chroma .nd { color: #8aadf4; font-weight: bold; } /* NameEntity */ .chroma .ni { color: #8bd5ca; } /* NameException */ .chroma .ne { color: #f5a97f; } /* NameFunction */ .chroma .nf { color: #8aadf4; } /* NameFunctionMagic */ .chroma .fm { color: #8aadf4; } /* NameLabel */ .chroma .nl { color: #91d7e3; } /* NameNamespace */ .chroma .nn { color: #f5a97f; } /* NameProperty */ .chroma .py { color: #f5a97f; } /* NameTag */ .chroma .nt { color: #c6a0f6; } /* NameVariable */ .chroma .nv { color: #f4dbd6; } /* NameVariableClass */ .chroma .vc { color: #f4dbd6; } /* NameVariableGlobal */ .chroma .vg { color: #f4dbd6; } /* NameVariableInstance */ .chroma .vi { color: #f4dbd6; } /* NameVariableMagic */ .chroma .vm { color: #f4dbd6; } /* LiteralString */ .chroma .s { color: #a6da95; } /* LiteralStringAffix */ .chroma .sa { color: #ed8796; } /* LiteralStringBacktick */ .chroma .sb { color: #a6da95; } /* LiteralStringChar */ .chroma .sc { color: #a6da95; } /* LiteralStringDelimiter */ .chroma .dl { color: #8aadf4; } /* LiteralStringDoc */ .chroma .sd { color: #6e738d; } /* LiteralStringDouble */ .chroma .s2 { color: #a6da95; } /* LiteralStringEscape */ .chroma .se { color: #8aadf4; } /* LiteralStringHeredoc */ .chroma .sh { color: #6e738d; } /* LiteralStringInterpol */ .chroma .si { color: #a6da95; } /* LiteralStringOther */ .chroma .sx { color: #a6da95; } /* LiteralStringRegex */ .chroma .sr { color: #8bd5ca; } /* LiteralStringSingle */ .chroma .s1 { color: #a6da95; } /* LiteralStringSymbol */ .chroma .ss { color: #a6da95; } /* LiteralNumber */ .chroma .m { color: #f5a97f; } /* LiteralNumberBin */ .chroma .mb { color: #f5a97f; } /* LiteralNumberFloat */ .chroma .mf { color: #f5a97f; } /* LiteralNumberHex */ .chroma .mh { color: #f5a97f; } /* LiteralNumberInteger */ .chroma .mi { color: #f5a97f; } /* LiteralNumberIntegerLong */ .chroma .il { color: #f5a97f; } /* LiteralNumberOct */ .chroma .mo { color: #f5a97f; } /* Operator */ .chroma .o { color: #91d7e3; font-weight: bold; } /* OperatorWord */ .chroma .ow { color: #91d7e3; font-weight: bold; } /* Comment */ .chroma .c { color: #6e738d; font-style: italic; } /* CommentHashbang */ .chroma .ch { color: #6e738d; font-style: italic; } /* CommentMultiline */ .chroma .cm { color: #6e738d; font-style: italic; } /* CommentSingle */ .chroma .c1 { color: #6e738d; font-style: italic; } /* CommentSpecial */ .chroma .cs { color: #6e738d; font-style: italic; } /* CommentPreproc */ .chroma .cp { color: #6e738d; font-style: italic; } /* CommentPreprocFile */ .chroma .cpf { color: #6e738d; font-weight: bold; font-style: italic; } /* GenericDeleted */ .chroma .gd { color: #ed8796; background-color: oklch(44.4% 0.177 26.899 / 0.5); } /* GenericEmph */ .chroma .ge { font-style: italic; } /* GenericError */ .chroma .gr { color: #ed8796; } /* GenericHeading */ .chroma .gh { color: #f5a97f; font-weight: bold; } /* GenericInserted */ .chroma .gi { color: #a6da95; background-color: oklch(44.8% 0.119 151.328 / 0.5); } /* GenericStrong */ .chroma .gs { font-weight: bold; } /* GenericSubheading */ .chroma .gu { color: #f5a97f; font-weight: bold; } /* GenericTraceback */ .chroma .gt { color: #ed8796; } /* GenericUnderline */ .chroma .gl { text-decoration: underline; }}
actor-typeahead { --color-background: #ffffff; --color-border: #d1d5db; --color-shadow: #000000; --color-hover: #f9fafb; --color-avatar-fallback: #e5e7eb; --radius: 0; --padding-menu: 0rem; z-index: 1000;}
actor-typeahead::part(handle) { color: #111827;}
actor-typeahead::part(menu) { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);}
@media (prefers-color-scheme: dark) { actor-typeahead { --color-background: #1f2937; --color-border: #4b5563; --color-shadow: #000000; --color-hover: #374151; --color-avatar-fallback: #4b5563; }
actor-typeahead::part(handle) { color: #f9fafb; }}
@layer utilities { .hit-area { position: relative; }
.hit-area::before { content: ""; position: absolute; top: var(--hit-area-t, 0px); right: var(--hit-area-r, 0px); bottom: var(--hit-area-b, 0px); left: var(--hit-area-l, 0px); pointer-events: inherit; }
.hit-area-debug { position: relative; }
.hit-area-debug::before { content: ""; position: absolute; top: var(--hit-area-t, 0px); right: var(--hit-area-r, 0px); bottom: var(--hit-area-b, 0px); left: var(--hit-area-l, 0px); pointer-events: inherit; border: 1px dashed #3b82f6; background-color: rgba(59, 130, 246, 0.1); }
.hit-area-debug:hover::before { border-color: #22c55e; background-color: rgba(34, 197, 94, 0.1); }
.hit-area-1 { --hit-area-t: -0.25rem; --hit-area-r: -0.25rem; --hit-area-b: -0.25rem; --hit-area-l: -0.25rem; } .hit-area-2 { --hit-area-t: -0.5rem; --hit-area-r: -0.5rem; --hit-area-b: -0.5rem; --hit-area-l: -0.5rem; } .hit-area-4 { --hit-area-t: -1rem; --hit-area-r: -1rem; --hit-area-b: -1rem; --hit-area-l: -1rem; } .hit-area-6 { --hit-area-t: -1.5rem; --hit-area-r: -1.5rem; --hit-area-b: -1.5rem; --hit-area-l: -1.5rem; } .hit-area-8 { --hit-area-t: -2rem; --hit-area-r: -2rem; --hit-area-b: -2rem; --hit-area-l: -2rem; } .hit-area-10 { --hit-area-t: -2.5rem; --hit-area-r: -2.5rem; --hit-area-b: -2.5rem; --hit-area-l: -2.5rem; } .hit-area-12 { --hit-area-t: -3rem; --hit-area-r: -3rem; --hit-area-b: -3rem; --hit-area-l: -3rem; }
.hit-area-l-1 { --hit-area-l: -0.25rem; } .hit-area-l-2 { --hit-area-l: -0.5rem; } .hit-area-l-4 { --hit-area-l: -1rem; } .hit-area-l-6 { --hit-area-l: -1.5rem; } .hit-area-l-8 { --hit-area-l: -2rem; } .hit-area-l-10 { --hit-area-l: -2.5rem; } .hit-area-l-12 { --hit-area-l: -3rem; }
.hit-area-r-1 { --hit-area-r: -0.25rem; } .hit-area-r-2 { --hit-area-r: -0.5rem; } .hit-area-r-4 { --hit-area-r: -1rem; } .hit-area-r-6 { --hit-area-r: -1.5rem; } .hit-area-r-8 { --hit-area-r: -2rem; } .hit-area-r-10 { --hit-area-r: -2.5rem; } .hit-area-r-12 { --hit-area-r: -3rem; }
.hit-area-t-1 { --hit-area-t: -0.25rem; } .hit-area-t-2 { --hit-area-t: -0.5rem; } .hit-area-t-4 { --hit-area-t: -1rem; } .hit-area-t-6 { --hit-area-t: -1.5rem; } .hit-area-t-8 { --hit-area-t: -2rem; } .hit-area-t-10 { --hit-area-t: -2.5rem; } .hit-area-t-12 { --hit-area-t: -3rem; }
.hit-area-b-1 { --hit-area-b: -0.25rem; } .hit-area-b-2 { --hit-area-b: -0.5rem; } .hit-area-b-4 { --hit-area-b: -1rem; } .hit-area-b-6 { --hit-area-b: -1.5rem; } .hit-area-b-8 { --hit-area-b: -2rem; } .hit-area-b-10 { --hit-area-b: -2.5rem; } .hit-area-b-12 { --hit-area-b: -3rem; }
.hit-area-x-1 { --hit-area-l: -0.25rem; --hit-area-r: -0.25rem; } .hit-area-x-2 { --hit-area-l: -0.5rem; --hit-area-r: -0.5rem; } .hit-area-x-4 { --hit-area-l: -1rem; --hit-area-r: -1rem; } .hit-area-x-6 { --hit-area-l: -1.5rem; --hit-area-r: -1.5rem; } .hit-area-x-8 { --hit-area-l: -2rem; --hit-area-r: -2rem; } .hit-area-x-10 { --hit-area-l: -2.5rem; --hit-area-r: -2.5rem; } .hit-area-x-12 { --hit-area-l: -3rem; --hit-area-r: -3rem; }
.hit-area-y-1 { --hit-area-t: -0.25rem; --hit-area-b: -0.25rem; } .hit-area-y-2 { --hit-area-t: -0.5rem; --hit-area-b: -0.5rem; } .hit-area-y-4 { --hit-area-t: -1rem; --hit-area-b: -1rem; } .hit-area-y-6 { --hit-area-t: -1.5rem; --hit-area-b: -1.5rem; } .hit-area-y-8 { --hit-area-t: -2rem; --hit-area-b: -2rem; } .hit-area-y-10 { --hit-area-t: -2.5rem; --hit-area-b: -2.5rem; } .hit-area-y-12 { --hit-area-t: -3rem; --hit-area-b: -3rem; }
/* terminal-to-html: catpuccin colors */ .term-fg30 { color: #6c6f85; } /* black */ .term-fg31 { color: #d20f39; } /* red */ .term-fg32 { color: #40a02b; } /* green */ .term-fg33 { color: #df8e1d; } /* yellow */ .term-fg34 { color: #1e66f5; } /* blue */ .term-fg35 { color: #8839ef; } /* magenta */ .term-fg36 { color: #179299; } /* cyan */ .term-fg37 { color: #4c4f69; } /* white */ .term-fgi90 { color: #8c8fa1; } /* bright-black */ .term-fgi91 { color: #e64553; } /* bright-red */ .term-fgi92 { color: #40a02b; } /* bright-green */ .term-fgi93 { color: #e5c890; } /* bright-yellow */ .term-fgi94 { color: #209fb5; } /* bright-blue */ .term-fgi95 { color: #ea76cb; } /* bright-magenta */ .term-fgi96 { color: #04a5e5; } /* bright-cyan */ .term-fgi97 { color: #bcc0cc; } /* bright-white */ .term-bg40 { background-color: #6c6f85; } /* black */ .term-bg41 { background-color: #d20f39; } /* red */ .term-bg42 { background-color: #40a02b; } /* green */ .term-bg43 { background-color: #df8e1d; } /* yellow */ .term-bg44 { background-color: #1e66f5; } /* blue */ .term-bg45 { background-color: #8839ef; } /* magenta */ .term-bg46 { background-color: #179299; } /* cyan */ .term-bg47 { background-color: #dce0e8; } /* white */ .term-fg1 { @apply font-bold; } .term-fg2 { @apply opacity-60; } .term-fg3 { @apply italic; } .term-fg4 { @apply underline; } .term-fg9 { @apply line-through; }
@media (prefers-color-scheme: dark) { .term-fg30 { color: #a5adcb; } /* black */ .term-fg31 { color: #ed8796; } /* red */ .term-fg32 { color: #a6da95; } /* green */ .term-fg33 { color: #eed49f; } /* yellow */ .term-fg34 { color: #8aadf4; } /* blue */ .term-fg35 { color: #c6a0f6; } /* magenta */ .term-fg36 { color: #8bd5ca; } /* cyan */ .term-fg37 { color: #cad3f5; } /* white */ .term-fgi90 { color: #8087a2; } /* bright-black */ .term-fgi91 { color: #f5bde6; } /* bright-red */ .term-fgi92 { color: #a6da95; } /* bright-green */ .term-fgi93 { color: #f5a97f; } /* bright-yellow */ .term-fgi94 { color: #7dc4e4; } /* bright-blue */ .term-fgi95 { color: #f4dbd6; } /* bright-magenta */ .term-fgi96 { color: #91d7e3; } /* bright-cyan */ .term-fgi97 { color: #f0c6c6; } /* bright-white */ .term-bg40 { background-color: #a5adcb; } /* black */ .term-bg41 { background-color: #ed8796; } /* red */ .term-bg42 { background-color: #a6da95; } /* green */ .term-bg43 { background-color: #eed49f; } /* yellow */ .term-bg44 { background-color: #8aadf4; } /* blue */ .term-bg45 { background-color: #c6a0f6; } /* magenta */ .term-bg46 { background-color: #8bd5ca; } /* cyan */ .term-bg47 { background-color: #494d64; } /* white */ }}
.focus-pill { --r: 10px;
&::before, &::after { @apply bg-indigo-600 absolute bottom-0; content: ""; width: var(--r); height: var(--r); -webkit-mask: radial-gradient(var(--r) at var(--r) 0, #0000 98%, #000); mask: radial-gradient(var(--r) at var(--r) 0, #0000 98%, #000); }
&::before { left: calc(-1 * var(--r)); @apply -scale-x-100; }
&::after { right: calc(-1 * var(--r)); }}