Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140@import "tailwindcss";@plugin "tw-easing-gradients";@import "./markup.css";@import "./pierre.css";@import "./logs.css";
@custom-variant dark { @media (prefers-color-scheme: dark) { &:where(:not([data-theme="light"], [data-theme="light"] *)) { @slot; } } &:where([data-theme="dark"], [data-theme="dark"] *) { @slot; }}
/* UA widgets - scrollbars first among them - paint from color-scheme, not from our var theme, so any scroller would carry a light system track over a dark surface. one declaration at the root keeps every scrollbar - file tree, code scroller, rails - matching the surface it sits on */html { color-scheme: light; @variant dark { color-scheme: dark; }}
@theme { --font-sans: "InterVariable", "system-ui", sans-serif, ui-sans-serif; --font-mono: "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-sans--font-feature-settings: "kern" 1, "liga" 1, "cv05" 1, "tnum" 1;
--font-weight-medium: 510; --font-weight-semibold: 590;
--ease-spring: linear( 0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1 );
--spacing-none: 0px; --spacing-3xs: 0.125rem; --spacing-2xs: 0.25rem; --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem; --spacing-lg: 1.25rem; --spacing-xl: 1.5rem; --spacing-2xl: 2rem; --spacing-3xl: 2.5rem; --spacing-4xl: 3rem; --spacing-5xl: 4rem;
--container-*: initial; --container-compact: 28rem; --container-narrow: 32rem; --container-medium: 42rem; --container-wide: 48rem; --container-page: 64rem; --container-hero: 80rem;
--color-wool-100: oklch(100% 0 0); --color-wool-200: oklch(98.9% 0 0); --color-wool-300: oklch(97% 0 0); --color-wool-400: oklch(93.9% 0 0); --color-wool-500: oklch(89.2% 0 0); --color-wool-600: oklch(82.2% 0 0); --color-wool-700: oklch(72.7% 0 0); --color-wool-800: oklch(61.2% 0 0); --color-wool-900: oklch(48.8% 0 0); --color-wool-1000: oklch(37.3% 0 0); --color-wool-1100: oklch(27.8% 0 0); --color-wool-1200: oklch(20.8% 0 0); --color-wool-1300: oklch(16.1% 0 0); --color-wool-1400: oklch(13% 0 0); --color-wool-1500: oklch(11.1% 0 0); --color-wool-1600: oklch(10% 0 0);
--color-red-50: oklch(97.1% 0.017 8.38); --color-red-100: oklch(93.6% 0.041 8.717); --color-red-200: oklch(88.5% 0.078 9.334); --color-red-300: oklch(80.8% 0.135 10.571); --color-red-400: oklch(70.4% 0.205 13.216); --color-red-500: oklch(63.7% 0.24 16.331); --color-red-600: oklch(57.7% 0.245 18.325); --color-red-700: oklch(50.5% 0.222 18.518); --color-red-800: oklch(44.4% 0.194 17.899); --color-red-900: oklch(39.6% 0.161 16.723); --color-red-950: oklch(25.8% 0.112 17.042);
--color-orange-50: oklch(98% 0.017 73.684); --color-orange-100: oklch(95.4% 0.04 75.164); --color-orange-200: oklch(90.1% 0.079 70.697); --color-orange-300: oklch(83.7% 0.132 66.29); --color-orange-400: oklch(75% 0.185 55.934); --color-orange-500: oklch(70.5% 0.214 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); --color-orange-700: oklch(55.3% 0.197 38.402); --color-orange-800: oklch(47% 0.16 37.304); --color-orange-900: oklch(40.8% 0.127 38.172); --color-orange-950: oklch(26.6% 0.083 36.259);
--color-amber-50: oklch(98.7% 0.022 79.277); --color-amber-100: oklch(96.2% 0.059 79.617); --color-amber-200: oklch(92.4% 0.12 79.746); --color-amber-300: oklch(87.9% 0.169 75.605); --color-amber-400: oklch(82.8% 0.189 68.429); --color-amber-500: oklch(76.9% 0.188 54.08); --color-amber-600: oklch(66.6% 0.179 42.318); --color-amber-700: oklch(55.5% 0.163 32.998); --color-amber-800: oklch(47.3% 0.137 30.201); --color-amber-900: oklch(41.4% 0.112 29.904); --color-amber-950: oklch(27.9% 0.077 29.635);
--color-yellow-50: oklch(98.7% 0.028 102.212); --color-yellow-100: oklch(97.3% 0.074 103.193); --color-yellow-200: oklch(94.5% 0.132 101.54); --color-yellow-300: oklch(90.5% 0.183 98.111); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-yellow-500: oklch(79.5% 0.185 86.047); --color-yellow-600: oklch(68.1% 0.164 75.834); --color-yellow-700: oklch(55.4% 0.138 66.442); --color-yellow-800: oklch(47.6% 0.117 61.907); --color-yellow-900: oklch(42.1% 0.098 57.708); --color-yellow-950: oklch(28.6% 0.069 53.813);
--color-lime-50: oklch(98.6% 0.04 129.757); --color-lime-100: oklch(96.7% 0.084 131.328); --color-lime-200: oklch(93.8% 0.148 133.321); --color-lime-300: oklch(89.7% 0.208 135.665); --color-lime-400: oklch(84.1% 0.238 137.85); --color-lime-500: oklch(76.8% 0.235 139.85); --color-lime-600: oklch(64.8% 0.211 140.684); --color-lime-700: oklch(53.2% 0.176 140.589); --color-lime-800: oklch(45.3% 0.145 139.933); --color-lime-900: oklch(40.5% 0.121 140.063); --color-lime-950: oklch(27.4% 0.09 141.109);
--color-green-50: oklch(98.2% 0.03 155.826); --color-green-100: oklch(96.2% 0.065 156.743); --color-green-200: oklch(92.5% 0.137 155.995); --color-green-300: oklch(87.1% 0.263 154.449); --color-green-400: oklch(79.2% 0.291 151.711); --color-green-500: oklch(72.3% 0.28 149.579); --color-green-600: oklch(62.7% 0.245 149.214); --color-green-700: oklch(52.7% 0.202 150.069); --color-green-800: oklch(44.8% 0.166 151.328); --color-green-900: oklch(39.3% 0.142 152.535); --color-green-950: oklch(26.6% 0.095 152.934);
--color-emerald-50: oklch(97.9% 0.022 166.113); --color-emerald-100: oklch(95% 0.055 163.051); --color-emerald-200: oklch(90.5% 0.096 164.15); --color-emerald-300: oklch(84.5% 0.145 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-emerald-600: oklch(59.6% 0.147 163.225); --color-emerald-700: oklch(50.8% 0.121 165.612); --color-emerald-800: oklch(43.2% 0.098 166.913); --color-emerald-900: oklch(37.8% 0.08 168.94); --color-emerald-950: oklch(26.2% 0.054 172.552);
--color-teal-50: oklch(98.4% 0.015 180.72); --color-teal-100: oklch(95.3% 0.053 180.801); --color-teal-200: oklch(91% 0.098 180.426); --color-teal-300: oklch(85.5% 0.139 181.071); --color-teal-400: oklch(77.7% 0.152 181.912); --color-teal-500: oklch(70.4% 0.141 182.503); --color-teal-600: oklch(60% 0.12 184.704); --color-teal-700: oklch(51.1% 0.098 186.391); --color-teal-800: oklch(43.7% 0.081 188.216); --color-teal-900: oklch(38.6% 0.066 188.416); --color-teal-950: oklch(27.7% 0.048 192.524);
--color-cyan-50: oklch(98.4% 0.02 200.873); --color-cyan-100: oklch(95.6% 0.047 203.388); --color-cyan-200: oklch(91.7% 0.083 205.041); --color-cyan-300: oklch(86.5% 0.129 207.078); --color-cyan-400: oklch(78.9% 0.154 211.53); --color-cyan-500: oklch(71.5% 0.144 215.221); --color-cyan-600: oklch(60.9% 0.128 221.723); --color-cyan-700: oklch(52% 0.107 223.128); --color-cyan-800: oklch(45% 0.088 224.283); --color-cyan-900: oklch(39.8% 0.073 227.392); --color-cyan-950: oklch(30.2% 0.058 229.695);
--color-sky-50: oklch(97.7% 0.013 236.62); --color-sky-100: oklch(95.1% 0.028 236.824); --color-sky-200: oklch(90.1% 0.061 230.902); --color-sky-300: oklch(82.8% 0.114 230.318); --color-sky-400: oklch(74.6% 0.161 232.661); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.159 241.966); --color-sky-700: oklch(50% 0.136 242.749); --color-sky-800: oklch(44.3% 0.113 240.79); --color-sky-900: oklch(39.1% 0.093 240.876); --color-sky-950: oklch(29.3% 0.069 243.157);
--color-blue-50: oklch(97% 0.015 254.604); --color-blue-100: oklch(93.2% 0.033 255.585); --color-blue-200: oklch(88.2% 0.061 254.128); --color-blue-300: oklch(80.9% 0.107 251.813); --color-blue-400: oklch(70.7% 0.167 254.624); --color-blue-500: oklch(62.3% 0.215 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.2 265.638); --color-blue-900: oklch(37.9% 0.148 265.522); --color-blue-950: oklch(28.2% 0.093 267.935);
--color-indigo-50: oklch(96.2% 0.018 280.314); --color-indigo-100: oklch(93% 0.034 280.788); --color-indigo-200: oklch(87% 0.065 282.039); --color-indigo-300: oklch(78.5% 0.115 282.713); --color-indigo-400: oklch(67.3% 0.182 284.935); --color-indigo-500: oklch(58.5% 0.233 285.117); --color-indigo-600: oklch(51.1% 0.262 284.966); --color-indigo-700: oklch(45.7% 0.24 285.023); --color-indigo-800: oklch(39.8% 0.195 285.366); --color-indigo-900: oklch(35.9% 0.144 286.697); --color-indigo-950: oklch(25.7% 0.09 289.288);
--color-violet-50: oklch(96.9% 0.017 293.756); --color-violet-100: oklch(94.3% 0.031 294.588); --color-violet-200: oklch(89.4% 0.06 293.283); --color-violet-300: oklch(81.1% 0.115 293.571); --color-violet-400: oklch(70.2% 0.187 293.541); --color-violet-500: oklch(60.6% 0.252 292.717); --color-violet-600: oklch(54.1% 0.281 293.009); --color-violet-700: oklch(49.1% 0.271 292.581); --color-violet-800: oklch(43.2% 0.234 292.759); --color-violet-900: oklch(38% 0.193 293.745); --color-violet-950: oklch(28.3% 0.145 291.089);
--color-purple-50: oklch(97.7% 0.014 308.299); --color-purple-100: oklch(94.6% 0.034 307.174); --color-purple-200: oklch(90.2% 0.064 306.703); --color-purple-300: oklch(82.7% 0.121 306.383); --color-purple-400: oklch(71.4% 0.205 305.504); --color-purple-500: oklch(62.7% 0.266 303.9); --color-purple-600: oklch(55.8% 0.288 302.321); --color-purple-700: oklch(49.6% 0.266 301.924); --color-purple-800: oklch(43.8% 0.22 303.724); --color-purple-900: oklch(38.1% 0.178 304.987); --color-purple-950: oklch(29.1% 0.151 302.717);
--color-fuchsia-50: oklch(97.7% 0.018 320.058); --color-fuchsia-100: oklch(95.2% 0.039 318.852); --color-fuchsia-200: oklch(90.3% 0.08 319.62); --color-fuchsia-300: oklch(83.3% 0.15 321.434); --color-fuchsia-400: oklch(74% 0.241 322.16); --color-fuchsia-500: oklch(66.7% 0.295 322.15); --color-fuchsia-600: oklch(59.1% 0.293 322.896); --color-fuchsia-700: oklch(51.8% 0.256 323.949); --color-fuchsia-800: oklch(45.2% 0.215 324.591); --color-fuchsia-900: oklch(40.1% 0.175 325.612); --color-fuchsia-950: oklch(29.3% 0.141 325.661);
--color-pink-50: oklch(97.1% 0.015 343.198); --color-pink-100: oklch(94.8% 0.03 342.258); --color-pink-200: oklch(89.9% 0.064 343.231); --color-pink-300: oklch(82.3% 0.124 346.018); --color-pink-400: oklch(71.8% 0.205 349.761); --color-pink-500: oklch(65.6% 0.242 354.308); --color-pink-600: oklch(59.2% 0.249 0.584); --color-pink-700: oklch(52.5% 0.225 3.958); --color-pink-800: oklch(45.9% 0.19 3.815); --color-pink-900: oklch(40.8% 0.157 2.432); --color-pink-950: oklch(28.4% 0.113 3.907);
--color-rose-50: oklch(96.9% 0.016 12.422); --color-rose-100: oklch(94.1% 0.032 12.58); --color-rose-200: oklch(89.2% 0.061 10.001); --color-rose-300: oklch(81% 0.121 11.638); --color-rose-400: oklch(71.2% 0.197 13.428); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); --color-rose-700: oklch(51.4% 0.224 16.935); --color-rose-800: oklch(45.5% 0.191 13.697); --color-rose-900: oklch(41% 0.163 10.272); --color-rose-950: oklch(27.1% 0.109 12.094);
--color-background-default: var(--color-white); --color-background-subtle: var(--color-wool-100); --color-background-inset: var(--color-wool-300); --color-background-muted: var(--color-wool-400); --color-background-strong: var(--color-wool-600); --color-background-canvas: var(--color-wool-300); --color-background-highlight: var(--color-yellow-200); --color-background-success-subtle: var(--color-green-100); --color-background-success-subtle-hover: var(--color-green-200); --color-background-success-emphasis: var(--color-green-600); --color-background-success-emphasis-hover: var(--color-green-700); --color-background-danger-subtle: var(--color-red-100); --color-background-danger-subtle-hover: var(--color-red-200); --color-background-danger-emphasis: var(--color-red-300); --color-background-danger-emphasis-hover: var(--color-red-400); --color-background-warning-subtle: var(--color-amber-50); --color-background-warning-subtle-hover: var(--color-amber-100); --color-background-warning-emphasis: var(--color-amber-500); --color-background-info-subtle: var(--color-indigo-50); --color-background-info-subtle-hover: var(--color-indigo-100); --color-background-info-emphasis: var(--color-indigo-600); --color-background-info-emphasis-hover: #4a41e0; --color-background-emphasis: var(--color-wool-1500);
/* --- background / navigation --- The settings sidebar aliases *invert* between modes, so these cannot be spelled as an existing pair: light recesses the frame (subtle) and raises the active item (default), dark does the exact opposite. */ --color-background-navigation-frame: var(--color-wool-100); --color-background-navigation-item: var(--color-white);
--color-foreground-default: var(--color-wool-1500); --color-foreground-muted: var(--color-wool-1000); --color-foreground-subtle: var(--color-wool-900); --color-foreground-placeholder: var(--color-wool-700); --color-foreground-disabled: var(--color-wool-600); --color-foreground-on-emphasis: var(--color-white); --color-foreground-inverted: var(--color-wool-300); --color-foreground-highlight: var(--color-yellow-800); --color-foreground-success: var(--color-green-600); --color-foreground-success-strong: var(--color-green-800); --color-foreground-success-disabled: color-mix(in oklab, var(--color-green-600) 50%, transparent); --color-foreground-danger: var(--color-red-600); --color-foreground-danger-strong: var(--color-red-800); --color-foreground-danger-subtle: var(--color-red-400); --color-foreground-danger-disabled: var(--color-red-300); --color-foreground-warning: var(--color-amber-600); --color-foreground-warning-strong: var(--color-amber-800); --color-foreground-warning-disabled: var(--color-amber-300); --color-foreground-info: var(--color-indigo-700); --color-foreground-info-strong: var(--color-indigo-800); --color-foreground-link-default: var(--color-wool-1500); --color-foreground-link-hover: var(--color-wool-1200); --color-foreground-link-disabled: var(--color-wool-700); --color-foreground-link-danger: var(--color-red-600); --color-foreground-link-danger-hover: var(--color-red-500); --color-foreground-link-success: var(--color-green-600); --color-foreground-link-success-hover: var(--color-green-500); --color-foreground-link-warning: var(--color-amber-600); --color-foreground-link-warning-hover: var(--color-amber-500); --color-foreground-link-info: var(--color-indigo-600); --color-foreground-link-info-hover: var(--color-indigo-500);
--color-border-default: var(--color-wool-400); --color-border-subtle: var(--color-wool-300); --color-border-strong: var(--color-wool-600); --color-border-disabled: var(--color-wool-400); --color-border-focus: var(--color-wool-700); --color-border-focus-success: var(--color-green-500); --color-border-focus-danger: var(--color-red-500); --color-border-success: var(--color-green-700); --color-border-danger: var(--color-red-300); --color-border-danger-subtle: var(--color-red-200); --color-border-navigation-item-active: var(--color-wool-400);
--color-drawing-accent: #6d67f5; --color-drawing-accent-recess: color-mix(in srgb, var(--color-drawing-accent), black 14%); --color-drawing-accent-edge: color-mix(in srgb, var(--color-drawing-accent), black 38%);
--color-shadow-inner-strong: var(--color-wool-600); --color-shadow-inner-strong-hover: var(--color-wool-600); --color-shadow-inner-subtle: var(--color-wool-400); --color-shadow-ambient-strong: transparent; --color-shadow-ambient-subtle: transparent;
--color-inverse-background: var(--color-wool-1300); --color-inverse-foreground: var(--color-wool-300); --color-inverse-border: var(--color-wool-1200); --color-inverse-shadow-inner: var(--color-wool-1500);
--shadow-small: 0 1px 2px var(--color-shadow-ambient-strong); --shadow-regular: 0 10px 28px -8px var(--color-shadow-ambient-strong), 0 2px 6px var(--color-shadow-ambient-subtle); --shadow-large: 0 24px 48px -12px var(--color-shadow-ambient-strong), 0 6px 14px var(--color-shadow-ambient-subtle);
--color-alpha-light-5: color-mix(in srgb, var(--color-background-default) 5%, transparent); --color-alpha-light-10: color-mix(in srgb, var(--color-background-default) 10%, transparent); --color-alpha-light-15: color-mix(in srgb, var(--color-background-default) 15%, transparent); --color-alpha-light-20: color-mix(in srgb, var(--color-background-default) 20%, transparent); --color-alpha-light-25: color-mix(in srgb, var(--color-background-default) 25%, transparent); --color-alpha-light-30: color-mix(in srgb, var(--color-background-default) 30%, transparent); --color-alpha-light-35: color-mix(in srgb, var(--color-background-default) 35%, transparent); --color-alpha-light-40: color-mix(in srgb, var(--color-background-default) 40%, transparent); --color-alpha-light-45: color-mix(in srgb, var(--color-background-default) 45%, transparent); --color-alpha-light-50: color-mix(in srgb, var(--color-background-default) 50%, transparent); --color-alpha-light-55: color-mix(in srgb, var(--color-background-default) 55%, transparent); --color-alpha-light-60: color-mix(in srgb, var(--color-background-default) 60%, transparent); --color-alpha-light-65: color-mix(in srgb, var(--color-background-default) 65%, transparent); --color-alpha-light-70: color-mix(in srgb, var(--color-background-default) 70%, transparent); --color-alpha-light-75: color-mix(in srgb, var(--color-background-default) 75%, transparent); --color-alpha-light-80: color-mix(in srgb, var(--color-background-default) 80%, transparent); --color-alpha-light-85: color-mix(in srgb, var(--color-background-default) 85%, transparent); --color-alpha-light-90: color-mix(in srgb, var(--color-background-default) 90%, transparent); --color-alpha-light-95: color-mix(in srgb, var(--color-background-default) 95%, transparent);
--color-alpha-dark-5: color-mix(in srgb, var(--color-foreground-default) 5%, transparent); --color-alpha-dark-10: color-mix(in srgb, var(--color-foreground-default) 10%, transparent); --color-alpha-dark-15: color-mix(in srgb, var(--color-foreground-default) 15%, transparent); --color-alpha-dark-20: color-mix(in srgb, var(--color-foreground-default) 20%, transparent); --color-alpha-dark-25: color-mix(in srgb, var(--color-foreground-default) 25%, transparent); --color-alpha-dark-30: color-mix(in srgb, var(--color-foreground-default) 30%, transparent); --color-alpha-dark-35: color-mix(in srgb, var(--color-foreground-default) 35%, transparent); --color-alpha-dark-40: color-mix(in srgb, var(--color-foreground-default) 40%, transparent); --color-alpha-dark-45: color-mix(in srgb, var(--color-foreground-default) 45%, transparent); --color-alpha-dark-50: color-mix(in srgb, var(--color-foreground-default) 50%, transparent); --color-alpha-dark-55: color-mix(in srgb, var(--color-foreground-default) 55%, transparent); --color-alpha-dark-60: color-mix(in srgb, var(--color-foreground-default) 60%, transparent); --color-alpha-dark-65: color-mix(in srgb, var(--color-foreground-default) 65%, transparent); --color-alpha-dark-70: color-mix(in srgb, var(--color-foreground-default) 70%, transparent); --color-alpha-dark-75: color-mix(in srgb, var(--color-foreground-default) 75%, transparent); --color-alpha-dark-80: color-mix(in srgb, var(--color-foreground-default) 80%, transparent); --color-alpha-dark-85: color-mix(in srgb, var(--color-foreground-default) 85%, transparent); --color-alpha-dark-90: color-mix(in srgb, var(--color-foreground-default) 90%, transparent); --color-alpha-dark-95: color-mix(in srgb, var(--color-foreground-default) 95%, transparent);
/* --- terminal (pipeline logs) --- catppuccin latte, same values the appview's terminal-to-html palette uses. dark is macchiato, below. */ --color-ansi-black: #6c6f85; --color-ansi-red: #d20f39; --color-ansi-green: #40a02b; --color-ansi-yellow: #df8e1d; --color-ansi-blue: #1e66f5; --color-ansi-magenta: #8839ef; --color-ansi-cyan: #179299; --color-ansi-white: #4c4f69; --color-ansi-bright-black: #8c8fa1; --color-ansi-bright-red: #e64553; --color-ansi-bright-green: #40a02b; --color-ansi-bright-yellow: #e5c890; --color-ansi-bright-blue: #209fb5; --color-ansi-bright-magenta: #ea76cb; --color-ansi-bright-cyan: #04a5e5; --color-ansi-bright-white: #bcc0cc;
--color-syntax-foreground: #4c4f69; --color-syntax-comment: #7c7f93; --color-syntax-string: #40a02b; --color-syntax-keyword: #8839ef; --color-syntax-function: #1e66f5; --color-syntax-constant: #fe640b; --color-syntax-parameter: #e64553; --color-syntax-punctuation: #7c7f93; --color-syntax-link: #1e66f5; --color-syntax-inserted: #40a02b; --color-syntax-deleted: #d20f39; --color-syntax-changed: #df8e1d;
--animate-spin-step: spin-step 2.5s infinite; --animate-stack-pop: stack-pop 620ms var(--ease-spring) both; --animate-stack-shift: stack-shift 520ms var(--ease-spring) both; --animate-marquee-up: marquee-up 40s linear infinite; --animate-marquee-down: marquee-down 40s linear infinite; --animate-marquee-left: marquee-left 40s linear infinite;
@keyframes stack-pop { from { opacity: 0; transform: translateY(-0.75rem) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes stack-shift { from { transform: translateY(-2.5rem); } to { transform: none; } }
@keyframes marquee-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes spin-step { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } 50% { transform: rotate(180deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } 100% { transform: rotate(360deg); } }}
@utility typography-heading-0 { font-size: 5rem; line-height: 5rem; font-weight: 600; letter-spacing: -0.25px;}
@utility typography-heading-1 { font-size: 3rem; line-height: 3.5rem; font-weight: 500;}
@utility typography-heading-2 { font-size: 1.875rem; line-height: 1.875rem; font-weight: 600;}
@utility typography-heading-3 { font-size: 1.5rem; line-height: 1.875rem; font-weight: 500;}
@utility typography-heading-4 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500;}
@utility typography-paragraph-large { font-size: 1rem; line-height: 1.5rem;}
@utility typography-paragraph-body { font-size: 0.9375rem; line-height: 1.5rem;}
@utility typography-paragraph-regular { font-size: 0.8125rem; line-height: 1.25rem;}
@utility typography-paragraph-small { font-size: 0.75rem; line-height: 1rem;}
@utility typography-paragraph-mini { font-size: 0.625rem; line-height: 1rem;}
@utility typography-monospace-large { @apply font-mono; font-size: 1rem; line-height: 1.5rem;}
@utility typography-monospace-regular { @apply font-mono; font-size: 0.8125rem; line-height: 1.25rem;}
@utility typography-monospace-small { @apply font-mono; font-size: 0.75rem; line-height: 1rem;}
@utility popover-transition { opacity: 0; scale: 0.95; transform-origin: center;
&[data-popover-origin="top-left"] { transform-origin: top left; } &[data-popover-origin="top-center"] { transform-origin: top center; } &[data-popover-origin="top-right"] { transform-origin: top right; } &[data-popover-origin="center-left"] { transform-origin: center left; } &[data-popover-origin="center-center"] { transform-origin: center; } &[data-popover-origin="center-right"] { transform-origin: center right; } &[data-popover-origin="bottom-left"] { transform-origin: bottom left; } &[data-popover-origin="bottom-center"] { transform-origin: bottom center; } &[data-popover-origin="bottom-right"] { transform-origin: bottom right; }
transition: opacity 120ms ease-out, scale 120ms ease-out, overlay 120ms allow-discrete, display 120ms allow-discrete;
&:is(:popover-open, :modal) { opacity: 1; scale: 1; }
@starting-style { &:is(:popover-open, :modal) { opacity: 0; scale: 0.95; } }
@media (prefers-reduced-motion: reduce) { transition: none; }}
@utility hit-area { position: relative;
&::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; }}
@utility hit-area-* { position: relative; --hit-area-t: --spacing(--value(number) * -1); --hit-area-t: calc(--value([*]) * -1); --hit-area-b: --spacing(--value(number) * -1); --hit-area-b: calc(--value([*]) * -1); --hit-area-l: --spacing(--value(number) * -1); --hit-area-l: calc(--value([*]) * -1); --hit-area-r: --spacing(--value(number) * -1); --hit-area-r: calc(--value([*]) * -1);
&::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; }}
@utility hit-area-l-* { position: relative; --hit-area-l: --spacing(--value(number) * -1); --hit-area-l: calc(--value([*]) * -1);
&::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; }}
@utility hit-area-r-* { position: relative; --hit-area-r: --spacing(--value(number) * -1); --hit-area-r: calc(--value([*]) * -1);
&::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; }}
@utility hit-area-t-* { position: relative; --hit-area-t: --spacing(--value(number) * -1); --hit-area-t: calc(--value([*]) * -1);
&::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; }}
@utility hit-area-b-* { position: relative; --hit-area-b: --spacing(--value(number) * -1); --hit-area-b: calc(--value([*]) * -1);
&::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; }}
@utility hit-area-x-* { position: relative; --hit-area-l: --spacing(--value(number) * -1); --hit-area-l: calc(--value([*]) * -1); --hit-area-r: --spacing(--value(number) * -1); --hit-area-r: calc(--value([*]) * -1);
&::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; }}
@utility hit-area-y-* { position: relative; --hit-area-t: --spacing(--value(number) * -1); --hit-area-t: calc(--value([*]) * -1); --hit-area-b: --spacing(--value(number) * -1); --hit-area-b: calc(--value([*]) * -1);
&::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; }}
@utility hit-area-debug { position: relative;
&::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; @apply border border-dashed border-blue-500; @apply bg-blue-500/10; }
&:hover::before { @apply border border-dashed border-green-500; @apply bg-green-500/10; }}
/* debug only. */@utility debug-border { --debug-hue: 0; --debug-depth: 0; --debug-width: 1px; outline: var(--debug-width) solid hsl(calc(var(--debug-hue) + var(--debug-depth)) 100% 50%); /* an outline is drawn outward from the outline edge, so the offset has to cancel the whole width — otherwise a thick one bleeds past the box it is marking */ outline-offset: calc(-1 * var(--debug-width));
&:nth-child(6n + 2) { --debug-hue: 60; } &:nth-child(6n + 3) { --debug-hue: 120; } &:nth-child(6n + 4) { --debug-hue: 180; } &:nth-child(6n + 5) { --debug-hue: 240; } &:nth-child(6n) { --debug-hue: 300; }}
@layer utilities { .debug-border .debug-border { --debug-depth: 25; --debug-width: 2px; } .debug-border .debug-border .debug-border { --debug-depth: 50; --debug-width: 3px; } .debug-border .debug-border .debug-border .debug-border { --debug-depth: 75; --debug-width: 4px; }}
@utility text-swap { display: inline-block; transform: translateY(0); filter: blur(0); opacity: 1; will-change: transform, filter, opacity; transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease);
&[data-swap="exit"] { transform: translateY(calc(var(--text-swap-translate-y) * -1)); filter: blur(var(--text-swap-blur)); opacity: 0; }
&[data-swap="enter"] { transform: translateY(var(--text-swap-translate-y)); filter: blur(var(--text-swap-blur)); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { transition: none; }}
@utility bone-pulse { /* fade-in has to be second so it overrides pulse during its 120ms */ animation: var(--animate-pulse), bone-fade-in 120ms ease-out;
@media (prefers-reduced-motion: reduce) { animation: none; }}
@keyframes bone-fade-in { from { opacity: 0; }}
@utility row-breathe { animation: row-breathe 1.2s ease-in-out infinite; background-color: var(--color-background-muted); border-radius: var(--radius-md, 0.375rem);
@media (prefers-reduced-motion: reduce) { animation: none; }}
@keyframes row-breathe { 0%, 100% { opacity: 0.88; } 50% { opacity: 1; }}
@layer base { :root { --text-swap-dur: 150ms; --text-swap-translate-y: 4px; --text-swap-blur: 2px; --text-swap-ease: ease-in-out; }
@font-face { font-family: "InterVariable"; src: url("/fonts/InterVariable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "InterVariable"; src: url("/fonts/InterVariable-Italic.woff2") format("woff2-variations"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/fonts/IBMPlexMono-Italic.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/fonts/IBMPlexMono-Bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2"); font-weight: bold; font-style: italic; font-display: swap; }
html { font-size: 16px; scrollbar-gutter: stable; }
:root { @variant dark { --color-background-default: var(--color-wool-1300); --color-background-subtle: var(--color-wool-1200); --color-background-inset: var(--color-wool-1100); --color-background-muted: var(--color-wool-1000); --color-background-strong: var(--color-wool-900); --color-background-canvas: var(--color-wool-1500); --color-background-highlight: var(--color-yellow-900); --color-background-success-subtle: var(--color-green-900); --color-background-success-subtle-hover: var(--color-green-800); --color-background-success-emphasis: var(--color-green-700); --color-background-success-emphasis-hover: var(--color-green-800); --color-background-danger-subtle: var(--color-red-900); --color-background-danger-subtle-hover: var(--color-red-800); --color-background-danger-emphasis: var(--color-red-700); --color-background-danger-emphasis-hover: var(--color-red-800); --color-background-warning-subtle: var(--color-amber-900); --color-background-warning-subtle-hover: var(--color-amber-800); --color-background-warning-emphasis: var(--color-amber-600); --color-background-info-subtle: var(--color-indigo-950); --color-background-info-subtle-hover: var(--color-indigo-900); --color-background-info-emphasis: var(--color-indigo-600); --color-background-info-emphasis-hover: #837ef8; --color-background-emphasis: var(--color-wool-300);
/* --- background / navigation (Dark) --- inverted vs light, see above */ --color-background-navigation-frame: var(--color-wool-1300); --color-background-navigation-item: var(--color-wool-1200);
--color-foreground-default: var(--color-wool-300); --color-foreground-muted: var(--color-wool-700); --color-foreground-subtle: var(--color-wool-900); --color-foreground-placeholder: var(--color-wool-700); --color-foreground-disabled: var(--color-wool-900); --color-foreground-on-emphasis: var(--color-white); --color-foreground-inverted: var(--color-wool-1500); --color-foreground-highlight: var(--color-yellow-200); --color-foreground-success: var(--color-green-400); --color-foreground-success-strong: var(--color-green-200); --color-foreground-success-disabled: var(--color-green-700); --color-foreground-danger: var(--color-red-400); --color-foreground-danger-strong: var(--color-red-600); --color-foreground-danger-disabled: var(--color-red-300); --color-foreground-warning: var(--color-amber-400); --color-foreground-warning-strong: var(--color-amber-200); --color-foreground-warning-disabled: var(--color-amber-400); --color-foreground-info: var(--color-indigo-400); --color-foreground-info-strong: var(--color-indigo-200); --color-foreground-link-default: var(--color-wool-300); --color-foreground-link-hover: var(--color-wool-600); --color-foreground-link-disabled: var(--color-wool-900); --color-foreground-link-danger: var(--color-red-500); --color-foreground-link-danger-hover: var(--color-red-400); --color-foreground-link-success: var(--color-green-500); --color-foreground-link-success-hover: var(--color-green-400); --color-foreground-link-warning: var(--color-amber-500); --color-foreground-link-warning-hover: var(--color-amber-400); --color-foreground-link-info: var(--color-indigo-500); --color-foreground-link-info-hover: var(--color-indigo-400);
--color-border-default: var(--color-wool-1200); --color-border-subtle: var(--color-wool-1100); --color-border-strong: var(--color-wool-900); --color-border-disabled: var(--color-wool-1000); --color-border-focus: var(--color-wool-600); --color-border-focus-success: var(--color-green-500); --color-border-focus-danger: var(--color-red-500); --color-border-success: var(--color-green-700); --color-border-danger: var(--color-red-800); --color-border-navigation-item-active: var(--color-wool-1000);
--color-shadow-inner-strong: var(--color-wool-1600); --color-shadow-inner-strong-hover: var(--color-wool-1300); --color-shadow-inner-subtle: var(--color-wool-1500); --color-shadow-ambient-strong: transparent; --color-shadow-ambient-subtle: transparent;
--color-inverse-background: var(--color-white); --color-inverse-foreground: var(--color-wool-1500); --color-inverse-border: var(--color-wool-400); --color-inverse-shadow-inner: var(--color-wool-400);
/* --- terminal (Dark) --- catppuccin macchiato */ --color-ansi-black: #a5adcb; --color-ansi-red: #ed8796; --color-ansi-green: #a6da95; --color-ansi-yellow: #eed49f; --color-ansi-blue: #8aadf4; --color-ansi-magenta: #c6a0f6; --color-ansi-cyan: #8bd5ca; --color-ansi-white: #cad3f5; --color-ansi-bright-black: #8087a2; --color-ansi-bright-red: #f5bde6; --color-ansi-bright-green: #a6da95; --color-ansi-bright-yellow: #f5a97f; --color-ansi-bright-blue: #7dc4e4; --color-ansi-bright-magenta: #f4dbd6; --color-ansi-bright-cyan: #91d7e3; --color-ansi-bright-white: #f0c6c6;
--color-syntax-foreground: #cdd6f4; --color-syntax-comment: #9399b2; --color-syntax-string: #a6e3a1; --color-syntax-keyword: #cba6f7; --color-syntax-function: #89b4fa; --color-syntax-constant: #fab387; --color-syntax-parameter: #eba0ac; --color-syntax-punctuation: #9399b2; --color-syntax-link: #89b4fa; --color-syntax-inserted: #a6e3a1; --color-syntax-deleted: #f38ba8; --color-syntax-changed: #f9e2af; } }
body { @apply flex min-h-screen flex-col bg-background-canvas typography-paragraph-regular text-foreground-default transition-colors duration-150; }
a { @apply text-foreground-default no-underline; }
::selection { background-color: var(--color-background-info-subtle-hover); color: var(--color-foreground-default); }}
/* chromium doesn't break links so we have to set it explicitely */p > a { line-break: anywhere;}