@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;
}