Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
tangled.org input.css
39 kB · 1646 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647@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-10 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] rounded text-sm text-gray-900 dark:text-gray-100 cursor-pointer 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;}
: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)); }}