Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
core input.css
43 kB · 1744 lines
CSS
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745@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 { :root { font-size: 14px; scrollbar-gutter: stable;
color-scheme: light;
@media (prefers-color-scheme: dark) { color-scheme: dark; } }
@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-white dark:bg-gray-800 dark:text-white border border-gray-200 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>"); } [data-theme="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>"); } [data-theme="dark"] 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>"); } [data-theme="dark"] 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>"); } [data-theme="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>"); } [data-theme="dark"] 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>"); }
select { @apply flex items-center rounded p-2 h-[32px] border border-gray-200 bg-white dark:text-white dark:bg-gray-800 dark:border-gray-700 ; }
/* iOS Safari zooms the viewport when focusing a form control whose font-size is under 16px; with the 14px root font size even text-lg (1.125rem) falls short. !important so this also wins over text-* utilities applied in templates. */ @media (max-width: 639px) { input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px !important; } }
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;
@apply disabled:hover:bg-white dark:disabled:hover:bg-gray-800 disabled:hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.200)] dark:disabled:hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900)] disabled:active:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.200)] dark:disabled:active:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900)] disabled:active:translate-y-0; }
.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; } }
.diff { @apply font-mono bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400; font-size: 12px; content-visibility: auto; content-intrinsic-size: 32rem; } .diff-line { @apply flex; } .diff-side { @apply flex flex-1 min-w-0; } .diff-side + .diff-side { @apply border-l border-gray-200 dark:border-gray-700; } .diff-num { @apply contents text-gray-400 dark:text-gray-500; } .diff-num > span { @apply flex-none pr-2 text-right select-none; @apply bg-white dark:bg-gray-800; min-width: calc(6ch + 0.5rem); } .diff-indicator { @apply flex-none w-[2ch] px-1 text-center select-none; @apply border-l border-gray-200 dark:border-gray-700; } .diff-content { @apply flex-1 min-w-0 whitespace-pre-wrap pl-2 pr-3 relative; overflow-wrap: anywhere; } .diff-content div { @apply inline; } .diff-side.add, .diff-line.add { @apply bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400; } .diff-side.del, .diff-line.del { @apply bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400; } .diff-side.empty { @apply bg-gray-200/30 dark:bg-gray-700/30; } .diff-splitter { @apply bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center; } .diff[data-restrict-select="left"] .diff-side:last-child, .diff[data-restrict-select="right"] .diff-side:first-child { @apply select-none; }
.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,.comment-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;}
.comment-hl { @apply rounded-md;}
: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;}
[data-theme="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);}
[data-theme="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; }
[data-theme="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)); }}
/* Tailwind Preflight resets svg to display:block; MathJax v4 emits inline SVGs (one or more per inline equation), so that forces each onto its own line. Restore inline flow for MathJax output only, leaving icon svgs untouched. */mjx-container svg { display: inline-block;}