@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;
}
:root[data-theme="dark"] {
color-scheme: dark;
}
@supports (font-variation-settings: normal) {
html {
font-feature-settings:
"kern" 1,
"liga" 1,
"cv05" 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;
}
}
.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;
}
}
markdown-editor.drag-hover textarea {
outline: dashed 2px #ccc;
outline-offset: -0.5em;
}
markdown-editor:not(.drag-hover) button > .condensed,
markdown-editor.drag-hover button > .spacious {
display: none;
}
@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;
}