/**
 * Kelp UI v1.1.0 - Custom Download
 * https://kelpui.com/docs/tools/install/?features=core+lcon+lcls+lgrd+lsdc+lspl+lstk+nbar+nsbn+ccal+chan+ctoc+uai+uar+udiv+ufil+uflx+ugap+uha+ujc+umar+upad+usa+utxt+usz+uviz
 */

/**
 * Establish Cascade Layer order
 * Items with a ✅ next to them are for public use.
 * Items with a 🏴‍☠️ are internal layers and should not be used for customizations.
 *
 * 🏴‍☠️ kelp: the parent layer for the Kelp library.
 * 🏴‍☠️ kelp.base: The base CSS variables, configurations, and theme.
 * ✅ kelp.theme: Theme customizations (colors, fonts, sizes, etc.)
 * 🏴‍☠️ kelp.core: The core styles and components.
 * ✅ kelp.extend: Add your own components and customize existing ones.
 * 🏴‍☠️ kelp.utilities: Utility classes for nudging and tweaking the UI.
 * ✅ kelp.helpers: Add your own utilities and customize existing ones.
 * 🏴‍☠️ kelp.tokens: Design tokens that define semantic colors.
 * 🏴‍☠️ kelp.state: State effects (:hover, :active, etc.).
 * ✅ kelp.effects: Add your own state effects and customize existing ones.
 */

@layer kelp;
@layer
	kelp.base,
	kelp.theme,
	kelp.core,
	kelp.extend,
	kelp.utilities,
	kelp.helpers,
	kelp.tokens,
	kelp.state,
	kelp.effects;

/**
 * @section Colors
 * Color hues used in the theme
 */

@layer kelp.base {

	:where(:root) {

		--color-red-base: #e50000;
		--color-red-hue: 29.23;
		--color-red-chroma: 1;

		--color-orange-base: #ff8d00;
		--color-orange-hue: 58.75;
		--color-orange-chroma: 1;

		--color-yellow-base: #ffc107;
		--color-yellow-hue: 84.9338;
		--color-yellow-chroma: 1;

		--color-green-base: #028121;
		--color-green-hue: 145.01;
		--color-green-chroma: 1;

		--color-cyan-base: #73d7ee;
		--color-cyan-hue: 214.56;
		--color-cyan-chroma: 1;

		--color-blue-base: #004cff;
		--color-blue-hue: 263.27;
		--color-blue-chroma: 1;

		--color-indigo-base: #5936c2;
		--color-indigo-hue: 287;
		--color-indigo-chroma: 1;

		--color-purple-base: #760088;
		--color-purple-hue: 321.05;
		--color-purple-chroma: 1;

		--color-pink-base: #ffafc7;
		--color-pink-hue: 359.86;
		--color-pink-chroma: 1;

		--color-gray-base: #808080;
		--color-gray-hue: 0;
		--color-gray-chroma: 0;

	}

}

@layer kelp.tokens {

	:where(:root) {

		--color-red-05: oklch(18.5% calc(.08 * var(--color-red-chroma)) var(--color-red-hue));
		--color-red-10: oklch(24% calc(.1 * var(--color-red-chroma)) var(--color-red-hue));
		--color-red-20: oklch(32.5% calc(.135 * var(--color-red-chroma)) var(--color-red-hue));
		--color-red-30: oklch(40% calc(.16 * var(--color-red-chroma)) var(--color-red-hue));
		--color-red-40: oklch(47% calc(.185 * var(--color-red-chroma)) var(--color-red-hue));
		--color-red-50: oklch(57% calc(.2 * var(--color-red-chroma)) var(--color-red-hue));
		--color-red-60: oklch(67% calc(.175 * var(--color-red-chroma)) var(--color-red-hue));
		--color-red-70: oklch(75% calc(.13 * var(--color-red-chroma)) var(--color-red-hue));
		--color-red-80: oklch(83.5% calc(.085 * var(--color-red-chroma)) var(--color-red-hue));
		--color-red-90: oklch(92% calc(.04 * var(--color-red-chroma)) var(--color-red-hue));
		--color-red-95: oklch(96% calc(.02 * var(--color-red-chroma)) var(--color-red-hue));

		--color-orange-05: oklch(18.5% calc(.08 * var(--color-orange-chroma)) var(--color-orange-hue));
		--color-orange-10: oklch(24% calc(.1 * var(--color-orange-chroma)) var(--color-orange-hue));
		--color-orange-20: oklch(32.5% calc(.135 * var(--color-orange-chroma)) var(--color-orange-hue));
		--color-orange-30: oklch(40% calc(.16 * var(--color-orange-chroma)) var(--color-orange-hue));
		--color-orange-40: oklch(47% calc(.185 * var(--color-orange-chroma)) var(--color-orange-hue));
		--color-orange-50: oklch(57% calc(.2 * var(--color-orange-chroma)) var(--color-orange-hue));
		--color-orange-60: oklch(67% calc(.175 * var(--color-orange-chroma)) var(--color-orange-hue));
		--color-orange-70: oklch(75% calc(.13 * var(--color-orange-chroma)) var(--color-orange-hue));
		--color-orange-80: oklch(83.5% calc(.085 * var(--color-orange-chroma)) var(--color-orange-hue));
		--color-orange-90: oklch(92% calc(.04 * var(--color-orange-chroma)) var(--color-orange-hue));
		--color-orange-95: oklch(96% calc(.02 * var(--color-orange-chroma)) var(--color-orange-hue));

		--color-yellow-05: oklch(18.5% calc(.08 * var(--color-yellow-chroma)) var(--color-yellow-hue));
		--color-yellow-10: oklch(24% calc(.1 * var(--color-yellow-chroma)) var(--color-yellow-hue));
		--color-yellow-20: oklch(32.5% calc(.135 * var(--color-yellow-chroma)) var(--color-yellow-hue));
		--color-yellow-30: oklch(40% calc(.16 * var(--color-yellow-chroma)) var(--color-yellow-hue));
		--color-yellow-40: oklch(47% calc(.185 * var(--color-yellow-chroma)) var(--color-yellow-hue));
		--color-yellow-50: oklch(57% calc(.2 * var(--color-yellow-chroma)) var(--color-yellow-hue));
		--color-yellow-60: oklch(67% calc(.175 * var(--color-yellow-chroma)) var(--color-yellow-hue));
		--color-yellow-70: oklch(75% calc(.13 * var(--color-yellow-chroma)) var(--color-yellow-hue));
		--color-yellow-80: oklch(83.5% calc(.085 * var(--color-yellow-chroma)) var(--color-yellow-hue));
		--color-yellow-90: oklch(92% calc(.04 * var(--color-yellow-chroma)) var(--color-yellow-hue));
		--color-yellow-95: oklch(96% calc(.02 * var(--color-yellow-chroma)) var(--color-yellow-hue));

		--color-green-05: oklch(18.5% calc(.08 * var(--color-green-chroma)) var(--color-green-hue));
		--color-green-10: oklch(24% calc(.1 * var(--color-green-chroma)) var(--color-green-hue));
		--color-green-20: oklch(32.5% calc(.135 * var(--color-green-chroma)) var(--color-green-hue));
		--color-green-30: oklch(40% calc(.16 * var(--color-green-chroma)) var(--color-green-hue));
		--color-green-40: oklch(47% calc(.185 * var(--color-green-chroma)) var(--color-green-hue));
		--color-green-50: oklch(57% calc(.2 * var(--color-green-chroma)) var(--color-green-hue));
		--color-green-60: oklch(67% calc(.175 * var(--color-green-chroma)) var(--color-green-hue));
		--color-green-70: oklch(75% calc(.13 * var(--color-green-chroma)) var(--color-green-hue));
		--color-green-80: oklch(83.5% calc(.085 * var(--color-green-chroma)) var(--color-green-hue));
		--color-green-90: oklch(92% calc(.04 * var(--color-green-chroma)) var(--color-green-hue));
		--color-green-95: oklch(96% calc(.02 * var(--color-green-chroma)) var(--color-green-hue));

		--color-cyan-05: oklch(18.5% calc(.08 * var(--color-cyan-chroma)) var(--color-cyan-hue));
		--color-cyan-10: oklch(24% calc(.1 * var(--color-cyan-chroma)) var(--color-cyan-hue));
		--color-cyan-20: oklch(32.5% calc(.135 * var(--color-cyan-chroma)) var(--color-cyan-hue));
		--color-cyan-30: oklch(40% calc(.16 * var(--color-cyan-chroma)) var(--color-cyan-hue));
		--color-cyan-40: oklch(47% calc(.185 * var(--color-cyan-chroma)) var(--color-cyan-hue));
		--color-cyan-50: oklch(57% calc(.2 * var(--color-cyan-chroma)) var(--color-cyan-hue));
		--color-cyan-60: oklch(67% calc(.175 * var(--color-cyan-chroma)) var(--color-cyan-hue));
		--color-cyan-70: oklch(75% calc(.13 * var(--color-cyan-chroma)) var(--color-cyan-hue));
		--color-cyan-80: oklch(83.5% calc(.085 * var(--color-cyan-chroma)) var(--color-cyan-hue));
		--color-cyan-90: oklch(92% calc(.04 * var(--color-cyan-chroma)) var(--color-cyan-hue));
		--color-cyan-95: oklch(96% calc(.02 * var(--color-cyan-chroma)) var(--color-cyan-hue));

		--color-blue-05: oklch(18.5% calc(.08 * var(--color-blue-chroma)) var(--color-blue-hue));
		--color-blue-10: oklch(24% calc(.1 * var(--color-blue-chroma)) var(--color-blue-hue));
		--color-blue-20: oklch(32.5% calc(.135 * var(--color-blue-chroma)) var(--color-blue-hue));
		--color-blue-30: oklch(40% calc(.16 * var(--color-blue-chroma)) var(--color-blue-hue));
		--color-blue-40: oklch(47% calc(.185 * var(--color-blue-chroma)) var(--color-blue-hue));
		--color-blue-50: oklch(57% calc(.2 * var(--color-blue-chroma)) var(--color-blue-hue));
		--color-blue-60: oklch(67% calc(.175 * var(--color-blue-chroma)) var(--color-blue-hue));
		--color-blue-70: oklch(75% calc(.13 * var(--color-blue-chroma)) var(--color-blue-hue));
		--color-blue-80: oklch(83.5% calc(.085 * var(--color-blue-chroma)) var(--color-blue-hue));
		--color-blue-90: oklch(92% calc(.04 * var(--color-blue-chroma)) var(--color-blue-hue));
		--color-blue-95: oklch(96% calc(.02 * var(--color-blue-chroma)) var(--color-blue-hue));

		--color-indigo-05: oklch(18.5% calc(.08 * var(--color-indigo-chroma)) var(--color-indigo-hue));
		--color-indigo-10: oklch(24% calc(.1 * var(--color-indigo-chroma)) var(--color-indigo-hue));
		--color-indigo-20: oklch(32.5% calc(.135 * var(--color-indigo-chroma)) var(--color-indigo-hue));
		--color-indigo-30: oklch(40% calc(.16 * var(--color-indigo-chroma)) var(--color-indigo-hue));
		--color-indigo-40: oklch(47% calc(.185 * var(--color-indigo-chroma)) var(--color-indigo-hue));
		--color-indigo-50: oklch(57% calc(.2 * var(--color-indigo-chroma)) var(--color-indigo-hue));
		--color-indigo-60: oklch(67% calc(.175 * var(--color-indigo-chroma)) var(--color-indigo-hue));
		--color-indigo-70: oklch(75% calc(.13 * var(--color-indigo-chroma)) var(--color-indigo-hue));
		--color-indigo-80: oklch(83.5% calc(.085 * var(--color-indigo-chroma)) var(--color-indigo-hue));
		--color-indigo-90: oklch(92% calc(.04 * var(--color-indigo-chroma)) var(--color-indigo-hue));
		--color-indigo-95: oklch(96% calc(.02 * var(--color-indigo-chroma)) var(--color-indigo-hue));

		--color-purple-05: oklch(18.5% calc(.08 * var(--color-purple-chroma)) var(--color-purple-hue));
		--color-purple-10: oklch(24% calc(.1 * var(--color-purple-chroma)) var(--color-purple-hue));
		--color-purple-20: oklch(32.5% calc(.135 * var(--color-purple-chroma)) var(--color-purple-hue));
		--color-purple-30: oklch(40% calc(.16 * var(--color-purple-chroma)) var(--color-purple-hue));
		--color-purple-40: oklch(47% calc(.185 * var(--color-purple-chroma)) var(--color-purple-hue));
		--color-purple-50: oklch(57% calc(.2 * var(--color-purple-chroma)) var(--color-purple-hue));
		--color-purple-60: oklch(67% calc(.175 * var(--color-purple-chroma)) var(--color-purple-hue));
		--color-purple-70: oklch(75% calc(.13 * var(--color-purple-chroma)) var(--color-purple-hue));
		--color-purple-80: oklch(83.5% calc(.085 * var(--color-purple-chroma)) var(--color-purple-hue));
		--color-purple-90: oklch(92% calc(.04 * var(--color-purple-chroma)) var(--color-purple-hue));
		--color-purple-95: oklch(96% calc(.02 * var(--color-purple-chroma)) var(--color-purple-hue));

		--color-pink-05: oklch(18.5% calc(.08 * var(--color-pink-chroma)) var(--color-pink-hue));
		--color-pink-10: oklch(24% calc(.1 * var(--color-pink-chroma)) var(--color-pink-hue));
		--color-pink-20: oklch(32.5% calc(.135 * var(--color-pink-chroma)) var(--color-pink-hue));
		--color-pink-30: oklch(40% calc(.16 * var(--color-pink-chroma)) var(--color-pink-hue));
		--color-pink-40: oklch(47% calc(.185 * var(--color-pink-chroma)) var(--color-pink-hue));
		--color-pink-50: oklch(57% calc(.2 * var(--color-pink-chroma)) var(--color-pink-hue));
		--color-pink-60: oklch(67% calc(.175 * var(--color-pink-chroma)) var(--color-pink-hue));
		--color-pink-70: oklch(75% calc(.13 * var(--color-pink-chroma)) var(--color-pink-hue));
		--color-pink-80: oklch(83.5% calc(.085 * var(--color-pink-chroma)) var(--color-pink-hue));
		--color-pink-90: oklch(92% calc(.04 * var(--color-pink-chroma)) var(--color-pink-hue));
		--color-pink-95: oklch(96% calc(.02 * var(--color-pink-chroma)) var(--color-pink-hue));

		--color-gray-05: oklch(18.5% calc(.08 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-10: oklch(24% calc(.1 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-20: oklch(32.5% calc(.135 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-30: oklch(40% calc(.16 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-40: oklch(47% calc(.185 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-50: oklch(57% calc(.2 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-60: oklch(67% calc(.175 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-70: oklch(75% calc(.13 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-80: oklch(83.5% calc(.085 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-90: oklch(92% calc(.04 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-95: oklch(96% calc(.02 * var(--color-gray-chroma)) var(--color-gray-hue));

	}

}

/**
 * @section Colors
 * Map named color palette to semantic variable names
 */

@layer kelp.base {

	/* Light Theme (default) */
	:where(:root),
	.light {

		/* Page & Text  */
		--color-background: white;
		--color-text-normal: var(--color-gray-10);
		--color-text-muted: var(--color-gray-50);
		--color-text-input: var(--color-gray-30);
		--color-text-code: var(--color-pink-50);
		--color-highlight: #fbf9c9;
		--color-fill-highlight: var(--color-highlight);
		--color-on-highlight: inherit;
		--color-text-link: var(--color-blue-50);
		--color-text-link-hover: var(--color-blue-40);
		--decoration-text-link: underline dotted;
		--decoration-text-link-hover: underline;

		/* State */
		--color-checked: var(--color-blue-50);
		--color-checked-icon: white;

		/* Mixes */
		--color-mix-hover: black 10%;
		--color-mix-active: black 20%;
		--color-mix-transparent: transparent 20%;
		--color-mix-deleted: transparent 40%;

		/* Focus */
		--focus-ring-color: var(--color-blue-50);
		--focus-ring-style: solid;
		--focus-ring-width: var(--size-6xs);
		--focus-ring-offset: var(--size-6xs);

		/* Fills & Borders */
		--color-neutral-fill-muted: var(--color-gray-95);
		--color-neutral-fill-accent: var(--color-gray-90);
		--color-neutral-fill-vivid: var(--color-gray-30);
		--color-neutral-border-muted: var(--color-gray-90);
		--color-neutral-border-accent: var(--color-gray-80);
		--color-neutral-border-vivid: var(--color-gray-40);
		--color-neutral-on-muted: var(--color-gray-10);
		--color-neutral-on-accent: var(--color-gray-10);
		--color-neutral-on-vivid: white;
		--color-neutral-outline: var(--color-gray-20);

		--color-primary-fill-muted: var(--color-blue-95);
		--color-primary-fill-accent: var(--color-blue-90);
		--color-primary-fill-vivid: var(--color-blue-50);
		--color-primary-border-muted: var(--color-blue-90);
		--color-primary-border-accent: var(--color-blue-80);
		--color-primary-border-vivid: var(--color-blue-60);
		--color-primary-on-muted: var(--color-blue-30);
		--color-primary-on-accent: var(--color-blue-20);
		--color-primary-on-vivid: white;
		--color-primary-outline: var(--color-blue-50);

		--color-secondary-fill-muted: var(--color-indigo-95);
		--color-secondary-fill-accent: var(--color-indigo-90);
		--color-secondary-fill-vivid: var(--color-indigo-50);
		--color-secondary-border-muted: var(--color-indigo-90);
		--color-secondary-border-accent: var(--color-indigo-80);
		--color-secondary-border-vivid: var(--color-indigo-60);
		--color-secondary-on-muted: var(--color-indigo-30);
		--color-secondary-on-accent: var(--color-indigo-20);
		--color-secondary-on-vivid: white;
		--color-secondary-outline: var(--color-indigo-50);

		--color-success-fill-muted: var(--color-green-95);
		--color-success-fill-accent: var(--color-green-90);
		--color-success-fill-vivid: var(--color-green-50);
		--color-success-border-muted: var(--color-green-90);
		--color-success-border-accent: var(--color-green-80);
		--color-success-border-vivid: var(--color-green-60);
		--color-success-on-muted: var(--color-green-30);
		--color-success-on-accent: var(--color-green-20);
		--color-success-on-vivid: white;
		--color-success-outline: var(--color-green-50);

		--color-warning-fill-muted: var(--color-yellow-95);
		--color-warning-fill-accent: var(--color-yellow-90);
		--color-warning-fill-vivid: var(--color-yellow-50);
		--color-warning-border-muted: var(--color-yellow-90);
		--color-warning-border-accent: var(--color-yellow-80);
		--color-warning-border-vivid: var(--color-yellow-60);
		--color-warning-on-muted: var(--color-yellow-30);
		--color-warning-on-accent: var(--color-yellow-20);
		--color-warning-on-vivid: white;
		--color-warning-outline: var(--color-yellow-50);

		--color-danger-fill-muted: var(--color-red-95);
		--color-danger-fill-accent: var(--color-red-90);
		--color-danger-fill-vivid: var(--color-red-50);
		--color-danger-border-muted: var(--color-red-90);
		--color-danger-border-accent: var(--color-red-80);
		--color-danger-border-vivid: var(--color-red-60);
		--color-danger-on-muted: var(--color-red-30);
		--color-danger-on-accent: var(--color-red-20);
		--color-danger-on-vivid: white;
		--color-danger-outline: var(--color-red-50);

		/* Code Snippets */
		--color-code-fill: var(--color-gray-10);
		--color-code-border: var(--color-gray-20);
		--color-code-on: white;

	}


	/* Dark Theme */
	.dark {

		/* Page & Text  */
		--color-background: var(--color-gray-10);
		--color-text-normal: white;
		--color-text-muted: var(--color-gray-80);
		--color-text-input: var(--color-gray-80);
		--color-text-code: var(--color-pink-80);
		--color-fill-highlight: color-mix(in oklab, var(--color-highlight), transparent 85%);
		--color-text-link: var(--color-blue-70);
		--color-text-link-hover: var(--color-blue-80);

		/* State */
		--color-checked: var(--color-blue-60);
		--focus-ring-color: var(--color-blue-60);

		/* Fills & Borders */
		--color-neutral-fill-muted: var(--color-gray-20);
		--color-neutral-fill-accent: var(--color-gray-30);
		--color-neutral-fill-vivid: var(--color-gray-80);
		--color-neutral-border-muted: var(--color-gray-30);
		--color-neutral-border-accent: var(--color-gray-40);
		--color-neutral-border-vivid: var(--color-gray-70);
		--color-neutral-on-muted: var(--color-gray-95);
		--color-neutral-on-accent: var(--color-gray-95);
		--color-neutral-on-vivid: var(--color-gray-05);
		--color-neutral-outline: var(--color-gray-80);

		--color-primary-fill-muted: var(--color-blue-20);
		--color-primary-fill-accent: var(--color-blue-30);
		--color-primary-border-muted: var(--color-blue-30);
		--color-primary-border-accent: var(--color-blue-40);
		--color-primary-on-muted: var(--color-blue-95);
		--color-primary-on-accent: var(--color-blue-95);
		--color-primary-outline: var(--color-blue-70);

		--color-secondary-fill-muted: var(--color-indigo-20);
		--color-secondary-fill-accent: var(--color-indigo-30);
		--color-secondary-border-muted: var(--color-indigo-30);
		--color-secondary-border-accent: var(--color-indigo-40);
		--color-secondary-on-muted: var(--color-indigo-95);
		--color-secondary-on-accent: var(--color-indigo-95);
		--color-secondary-outline: var(--color-indigo-70);

		--color-success-fill-muted: var(--color-green-20);
		--color-success-fill-accent: var(--color-green-30);
		--color-success-border-muted: var(--color-green-30);
		--color-success-border-accent: var(--color-green-40);
		--color-success-on-muted: var(--color-green-95);
		--color-success-on-accent: var(--color-green-95);
		--color-success-outline: var(--color-green-70);

		--color-warning-fill-muted: var(--color-yellow-20);
		--color-warning-fill-accent: var(--color-yellow-30);
		--color-warning-border-muted: var(--color-yellow-30);
		--color-warning-border-accent: var(--color-yellow-40);
		--color-warning-on-muted: var(--color-yellow-95);
		--color-warning-on-accent: var(--color-yellow-95);
		--color-warning-outline: var(--color-yellow-70);

		--color-danger-fill-muted: var(--color-red-20);
		--color-danger-fill-accent: var(--color-red-30);
		--color-danger-border-muted: var(--color-red-30);
		--color-danger-border-accent: var(--color-red-40);
		--color-danger-on-muted: var(--color-red-95);
		--color-danger-on-accent: var(--color-red-95);
		--color-danger-outline: var(--color-red-70);

		/* Code Snippets */
		--color-code-fill: var(--color-gray-05);

	}

}

/**
 * @section Fonts
 */

@layer kelp.base {

	:where(:root) {
		--font-primary: ui-sans-serif, system-ui, sans-serif;
		--font-secondary: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
		--font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
	}

}

/**
 * @section Sizes
 */

@layer kelp.base {

	/* Theme Defaults */
	:where(:root) {

		/* Breakpoints (can't use in media queries) */
		--breakpoint-xs: 18em;
		--breakpoint-s: 28em;
		--breakpoint-m: 38em;
		--breakpoint-l: 52em;
		--breakpoint-xl: 60em;
		--breakpoint-2xl: 80em;


		/* Line Height */
		--line-height-xs: 1.2;
		--line-height-s: 1.4;
		--line-height-m: 1.5;


		/* Sizing */
		--font-size-base: 112.5%;
		--font-size-code: 0.875em;
		--size-6xs: 0.125em;
		--size-5xs: 0.25em;
		--size-4xs: 0.5em;
		--size-3xs: 0.6875em;
		--size-2xs: 0.75em;
		--size-xs: 0.8125em;
		--size-s: 0.9375em;
		--size-m: 1em;
		--size-l: 1.0625em;
		--size-xl: 1.1875em;
		--size-2xl: 1.3125em;
		--size-3xl: 1.5em;
		--size-4xl: 1.75em;
		--size-5xl: 2em;
		--size-6xl: 3em;


		/* Space after paragraphs and other elements */
		--space: calc(var(--line-height-m) * 1em);


		/* Border Radius */
		--border-radius-s: 0.25em;
		--border-radius-m: 0.5em;
		--border-radius-l: 1.3125em;
		--border-radius-circle: 50%;

	}

}

/**
 * @section Color Variants
 * Change the color hue on an element
 */

/* Light Theme (default) */
@layer kelp.tokens {

	:where(:root),
	.light,
	.dark {
		--background-color: var(--color-background);
		--color: var(--color-text-normal);
		background: var(--background-color);
		color: var(--color);
	}

	:where(:root),
	.light,
	.dark,
	.neutral {
		--color-fill-vivid: var(--color-neutral-fill-vivid);
		--color-fill-accent: var(--color-neutral-fill-accent);
		--color-fill-muted: var(--color-neutral-fill-muted);
		--color-border-vivid: var(--color-neutral-border-vivid);
		--color-border-accent: var(--color-neutral-border-accent);
		--color-border-muted: var(--color-neutral-border-muted);
		--color-on-vivid: var(--color-neutral-on-vivid);
		--color-on-accent: var(--color-neutral-on-accent);
		--color-on-muted: var(--color-neutral-on-muted);
		--color-outline: var(--color-neutral-outline);
	}

	.primary {
		--color-fill-vivid: var(--color-primary-fill-vivid);
		--color-fill-accent: var(--color-primary-fill-accent);
		--color-fill-muted: var(--color-primary-fill-muted);
		--color-border-vivid: var(--color-primary-border-vivid);
		--color-border-accent: var(--color-primary-border-accent);
		--color-border-muted: var(--color-primary-border-muted);
		--color-on-vivid: var(--color-primary-on-vivid);
		--color-on-accent: var(--color-primary-on-accent);
		--color-on-muted: var(--color-primary-on-muted);
		--color-outline: var(--color-primary-outline);
	}

	.secondary {
		--color-fill-vivid: var(--color-secondary-fill-vivid);
		--color-fill-accent: var(--color-secondary-fill-accent);
		--color-fill-muted: var(--color-secondary-fill-muted);
		--color-border-vivid: var(--color-secondary-border-vivid);
		--color-border-accent: var(--color-secondary-border-accent);
		--color-border-muted: var(--color-secondary-border-muted);
		--color-on-vivid: var(--color-secondary-on-vivid);
		--color-on-accent: var(--color-secondary-on-accent);
		--color-on-muted: var(--color-secondary-on-muted);
		--color-outline: var(--color-secondary-outline);
	}

	.success {
		--color-fill-vivid: var(--color-success-fill-vivid);
		--color-fill-accent: var(--color-success-fill-accent);
		--color-fill-muted: var(--color-success-fill-muted);
		--color-border-vivid: var(--color-success-border-vivid);
		--color-border-accent: var(--color-success-border-accent);
		--color-border-muted: var(--color-success-border-muted);
		--color-on-vivid: var(--color-success-on-vivid);
		--color-on-accent: var(--color-success-on-accent);
		--color-on-muted: var(--color-success-on-muted);
		--color-outline: var(--color-success-outline);
	}

	.danger {
		--color-fill-vivid: var(--color-danger-fill-vivid);
		--color-fill-accent: var(--color-danger-fill-accent);
		--color-fill-muted: var(--color-danger-fill-muted);
		--color-border-vivid: var(--color-danger-border-vivid);
		--color-border-accent: var(--color-danger-border-accent);
		--color-border-muted: var(--color-danger-border-muted);
		--color-on-vivid: var(--color-danger-on-vivid);
		--color-on-accent: var(--color-danger-on-accent);
		--color-on-muted: var(--color-danger-on-muted);
		--color-outline: var(--color-danger-outline);
	}

	.warning {
		--color-fill-vivid: var(--color-warning-fill-vivid);
		--color-fill-accent: var(--color-warning-fill-accent);
		--color-fill-muted: var(--color-warning-fill-muted);
		--color-border-vivid: var(--color-warning-border-vivid);
		--color-border-accent: var(--color-warning-border-accent);
		--color-border-muted: var(--color-warning-border-muted);
		--color-on-vivid: var(--color-warning-on-vivid);
		--color-on-accent: var(--color-warning-on-accent);
		--color-on-muted: var(--color-warning-on-muted);
		--color-outline: var(--color-warning-outline);
	}

}

/**
 * @section Style Variants
 * Change how color is applied (muted vs. vivid, filled or outlined)
 */

@layer kelp.tokens {

	/**
	 * Outline with a transparent background
	 */
	.outline {
		--background-color: transparent;
		--background-color-hover: var(--color-fill-vivid);
		--background-color-active: color-mix(in oklab, var(--color-fill-vivid), var(--color-mix-active));

		--border-color: var(--color-outline);
		--border-color-hover: color-mix(in oklab, var(--color-fill-vivid), var(--color-mix-hover));
		--border-color-active: color-mix(in oklab, var(--color-fill-vivid), var(--color-mix-active));

		--color: var(--color-outline);
		--color-hover: var(--color-on-vivid);
		--color-active: var(--color-on-vivid);
	}

	/**
	 * Light background with gentle border
	 */
	.muted {
		--background-color: var(--color-fill-muted);
		--background-color-hover: var(--color-fill-accent);
		--background-color-active: color-mix(in oklab, var(--color-fill-muted), var(--color-mix-transparent));

		--border-color: var(--color-border-muted);
		--border-color-hover: var(--color-border-accent);
		--border-color-active: color-mix(in oklab, var(--color-border-muted), var(--color-mix-transparent));

		--color: var(--color-on-muted);
		--color-hover: var(--color-on-accent);
		--color-active: var(--color-on-muted);
	}

	/**
	 * Vivid background
	 */
	.vivid {
		--background-color: var(--color-fill-vivid);
		--background-color-hover: color-mix(in oklab, var(--color-fill-vivid), var(--color-mix-hover));
		--background-color-active: color-mix(in oklab, var(--color-fill-vivid), var(--color-mix-active));

		--border-color: transparent;
		--border-color-hover: transparent;
		--border-color-active: transparent;

		--color: var(--color-on-vivid);
		--color-hover: var(--color-on-vivid);
		--color-active: var(--color-on-vivid);

		--color-text-link: var(--color);
		--color-text-link-hover: color-mix(in oklab, var(--color), var(--color-mix-hover));
		--focus-ring-color: var(--color);
	}

}

/**
 * @section Baseline Styles
 */

@layer kelp.core {

	/**
	 * Add box sizing to everything
	 * @link http://www.paulirish.com/2012/box-sizing-border-box-ftw/
	 */
	*,
	*:before,
	*:after {
		box-sizing: border-box;
	}

	/**
	 * 1. Force scrollbar display to prevent jumping on pages.
	 * 2. Prevent iOS text size adjust after orientation change, without disabling
	 *    user zoom.
	 */
	html {
		font-size: var(--font-size-base);
		scroll-behavior: smooth;
		overflow-y: scroll; /* 1 */
		/* 2 */
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}

	/**
	 * 1. Remove the margin in all browsers (opinionated).
	 * 2. Force the body to fill the viewport
	 * 3. Prevent overflow in breakout containers
	 */
	body {
		font-family: var(--font-primary);
		line-height: var(--line-height-m);
		margin: 0; /* 1 */
		min-height: 100vh; /* 2 */
		overflow-x: clip; /* 3 */
	}

	/**
	 * Add block-end margin to various elements
	 */

	:where(
		p,
		ol, ul, dl, dd,
		form, fieldset,
		audio, video, iframe,
		blockquote, details, table,
		pre, figure, address
	) {
		margin: 0;
		margin-block-end: var(--space);
	}

	:where(
		p,
		ol, ul, dl, dd,
		form, fieldset,
		audio, video, iframe,
		blockquote, details, table,
		pre, figure, address
	):last-child {
		margin-block-end: 0;
	}

	:where(h1, h2, h3, h4, h5, h6) {
		margin-block: 0 var(--size-m);
	}

	:where(h1) {
		margin-block-start: var(--size-4xs);
	}

	:where(h2) {
		margin-block-start: var(--size-5xl);
	}

}

@layer kelp.state {

	/**
	 * Focus styles
	 */
	:is(
		button, [href],
		input, select, textarea,
		summary, [tabindex]
	):focus-visible {
		outline-color: var(--focus-ring-color);
		outline-style: var(--focus-ring-style);
		outline-width: var(--focus-ring-width);
		outline-offset: var(--focus-ring-offset);
	}

	/**
	 * 1. Ensure [hidden] takes priority over other display properties
	 * 2. Hide web components with the [hide-until-ready] attribute before instantiation
	 */
	[hidden], /* 1 */
	[hide-until-ready]:not([is-ready]) { /* 2 */
		display: none;
	}

	/**
	 * Remove all animations and transitions for people that prefer not to see them
	 */
	@media (prefers-reduced-motion: reduce) {
		*, :after, :before {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}

}

/**
 * @section Lists
 */

@layer kelp.core {

	ul,
	ol {
		padding-inline: var(--size-5xl) 0;
	}

	dt {
		font-weight: bold;
	}

	/**
	 * Removes list styling.
	 * For semantic reasons, should only be used on unordered lists.
	 * @link https://matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics
	 */
	.list-unstyled,
	.list-inline {
		list-style-type: "";
		padding-inline: 0;
	}

	.list-inline {
		--gap: var(--size-m);
		display: flex;
		column-gap: var(--gap);
		row-gap: calc(var(--gap) * 0.5);
		flex-wrap: wrap;
		align-items: center;
	}

}

/**
 * @section Headings
 * Heading class lets you use one heading type for semantics, but style it as another heading type
 */

@layer kelp.core {

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-secondary);
		line-height: var(--line-height-s);
		text-wrap: pretty;
		word-wrap: break-word;
	}

	h1,
	.h1 {
		font-size: var(--size-3xl);
	}

	@media (min-width: 38em) {
		h1,
		.h1 {
			font-size: var(--size-4xl);
		}
	}

	h2,
	.h2 {
		font-size: var(--size-2xl);
	}

	h3,
	.h3 {
		font-size: var(--size-l);
	}

	h4, h5, h6,
	.h4, .h5, .h6 {
		font-size: var(--size-m);
	}

}

/**
 * @section Links
 */

@layer kelp.core {
	a {
		--color: var(--color-text-link);
		--color-hover: var(--color-text-link-hover);
		--decoration: var(--decoration-text-link);
		--decoration-hover: var(--decoration-text-link-hover);
		color: var(--color);
		text-decoration: var(--decoration);
		-webkit-text-decoration: var(--decoration);
		word-wrap: break-word;
	}
}

@layer kelp.state {

	a:hover {
		color: var(--color-hover);
		text-decoration: var(--decoration-hover);
		-webkit-text-decoration: var(--decoration-hover);
	}

	/**
	 * Link without underline until hover
	 */
	.link-subtle:not(:hover) {
		text-decoration: none;
	}

}

/**
 * @section Forms
 * Form elements and various controls
 */

@layer kelp.core {

	fieldset {
		border: 0;
		padding: 0;
	}

	legend,
	label {
		--gap: var(--size-5xs);
		margin: 0;
		margin-block-end: var(--gap);
		padding: 0;
	}

	legend {
		display: block;
	}

	label {
		--gap: var(--size-5xs);
		display: flex;
		align-items: center;
		column-gap: var(--gap);
		width: 100%;
	}

	/**
	 * Implicit labels
	 */
	label:has(
		:is(
			input, select, textarea
		):not(
			[type="radio"], [type="checkbox"]
		)
	) {
	    display: block;
	    margin-block-end: 0;
	}

	label:has(
		input, select, textarea
	) :is(
		input, select, textarea
	):not(
		[type="radio"], [type="checkbox"]
	) {
	    margin-block-start: var(--gap);
	}

	/**
	 * 1. Correct font properties not being inherited.
	 */
	input,
	optgroup,
	select,
	textarea {
		color: var(--color-text-normal);
		font: inherit; /* 1 */
		margin: 0;
		padding-block: var(--size-5xs);
		padding-inline: var(--size-4xs);
	}

	::placeholder {
		color: var(--color-text-muted);
	}

	.dark ::-webkit-calendar-picker-indicator {
		filter: invert(1);
	}

	input,
	textarea,
	select {
		--border-size: 1px;
		--border-color: var(--color-border-vivid);
		--border-style: solid;
		--border-radius: var(--border-radius-s);
		background-color: var(--color-background);
		border: var(--border-size) var(--border-style) var(--border-color);
		border-radius: var(--border-radius);
		color: var(--color-text-input);
		display: block;
		line-height: var(--line-height-m);
		width: 100%;
	}

	:where(
		input,
		textarea,
		select
	):not(:last-child) {
		margin-block-end: var(--size-xl);
	}

	textarea {
		--height: 8em;
		min-height: var(--height);
		overflow: auto;
		resize: vertical;
	}

	[type="image"],
	[type="checkbox"],
	[type="radio"] {
		cursor: pointer;
		display: inline-block;
		height: auto;
		width: auto;
		padding: 0;
	}

	[type="checkbox"],
	[type="radio"] {
		appearance: none;
		height: var(--size-m);
		width: var(--size-m);

		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
	}

	[type="checkbox"] {
		font-weight: bold;
	}

	[type="radio"] {
		border-radius: 50%;
	}

	[type="color"] {
		height: 3em;
		width: 3em;
	}

}

@layer kelp.state {

	:is(
		input,
		textarea,
		select
	):not(
		[type="checkbox"],
		[type="radio"],
		[type="range"]
	):focus,
	:is(
		[type="checkbox"],
		[type="radio"],
		[type="range"]
	):focus-visible {
		outline-color: var(--focus-ring-color);
		outline-style: var(--focus-ring-style);
		outline-width: var(--focus-ring-width);
		outline-offset: var(--focus-ring-offset);
	}

	[type="radio"]:checked {
		background-color: transparent;
		border-color: var(--color-checked);
	}

	[type="radio"]:checked::after {
		background-color: var(--color-checked);
		border-radius: 50%;
		content: '';
		width: 0.667em;
		aspect-ratio: 1;
	}

	[type="checkbox"]:checked {
		background-color: var(--color-checked);
		border-color: var(--color-checked);
		color: var(--color-checked-icon);
	}

	[type="checkbox"]:checked::after {
		content: '\002713';
		font-size: var(--size-xs);
	}

	:is(
		input,
		textarea,
		select
	):is(
		[readonly],
		[disabled]
	) {
		--background-color: var(--color-fill-muted);
		--color: var(--color-on-muted);
		background-color: var(--background-color);
		color: var(--color);
	}

	[disabled]:checked {
		--color-checked: var(--color-fill-muted);
		--color-checked-icon: var(--color-on-muted);
		border-color: var(--border-color);
	}

}

/**
 * @section Forms
 * Form elements and various controls
 */

@layer kelp.core {

	fieldset {
		border: 0;
		padding: 0;
	}

	legend,
	label {
		--gap: var(--size-5xs);
		margin: 0;
		margin-block-end: var(--gap);
		padding: 0;
	}

	legend {
		display: block;
	}

	label {
		--gap: var(--size-5xs);
		display: flex;
		align-items: center;
		column-gap: var(--gap);
		width: 100%;
	}

	/**
	 * Implicit labels
	 */
	label:has(
		:is(
			input, select, textarea
		):not(
			[type="radio"], [type="checkbox"]
		)
	) {
	    display: block;
	    margin-block-end: 0;
	}

	label:has(
		input, select, textarea
	) :is(
		input, select, textarea
	):not(
		[type="radio"], [type="checkbox"]
	) {
	    margin-block-start: var(--gap);
	}

	/**
	 * 1. Correct font properties not being inherited.
	 */
	input,
	optgroup,
	select,
	textarea {
		color: var(--color-text-normal);
		font: inherit; /* 1 */
		margin: 0;
		padding-block: var(--size-5xs);
		padding-inline: var(--size-4xs);
	}

	::placeholder {
		color: var(--color-text-muted);
	}

	.dark ::-webkit-calendar-picker-indicator {
		filter: invert(1);
	}

	input,
	textarea,
	select {
		--border-size: 1px;
		--border-color: var(--color-border-vivid);
		--border-style: solid;
		--border-radius: var(--border-radius-s);
		background-color: var(--color-background);
		border: var(--border-size) var(--border-style) var(--border-color);
		border-radius: var(--border-radius);
		color: var(--color-text-input);
		display: block;
		line-height: var(--line-height-m);
		width: 100%;
	}

	:where(
		input,
		textarea,
		select
	):not(:last-child) {
		margin-block-end: var(--size-xl);
	}

	textarea {
		--height: 8em;
		min-height: var(--height);
		overflow: auto;
		resize: vertical;
	}

	[type="image"],
	[type="checkbox"],
	[type="radio"] {
		cursor: pointer;
		display: inline-block;
		height: auto;
		width: auto;
		padding: 0;
	}

	[type="checkbox"],
	[type="radio"] {
		appearance: none;
		height: var(--size-m);
		width: var(--size-m);

		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
	}

	[type="checkbox"] {
		font-weight: bold;
	}

	[type="radio"] {
		border-radius: 50%;
	}

	[type="color"] {
		height: 3em;
		width: 3em;
	}

}

@layer kelp.state {

	:is(
		input,
		textarea,
		select
	):not(
		[type="checkbox"],
		[type="radio"],
		[type="range"]
	):focus,
	:is(
		[type="checkbox"],
		[type="radio"],
		[type="range"]
	):focus-visible {
		outline-color: var(--focus-ring-color);
		outline-style: var(--focus-ring-style);
		outline-width: var(--focus-ring-width);
		outline-offset: var(--focus-ring-offset);
	}

	[type="radio"]:checked {
		background-color: transparent;
		border-color: var(--color-checked);
	}

	[type="radio"]:checked::after {
		background-color: var(--color-checked);
		border-radius: 50%;
		content: '';
		width: 0.667em;
		aspect-ratio: 1;
	}

	[type="checkbox"]:checked {
		background-color: var(--color-checked);
		border-color: var(--color-checked);
		color: var(--color-checked-icon);
	}

	[type="checkbox"]:checked::after {
		content: '\002713';
		font-size: var(--size-xs);
	}

	:is(
		input,
		textarea,
		select
	):is(
		[readonly],
		[disabled]
	) {
		--background-color: var(--color-fill-muted);
		--color: var(--color-on-muted);
		background-color: var(--background-color);
		color: var(--color);
	}

	[disabled]:checked {
		--color-checked: var(--color-fill-muted);
		--color-checked-icon: var(--color-on-muted);
		border-color: var(--border-color);
	}

}

/**
 * @section Blockquotes
 */

@layer kelp.core {

	blockquote {
		--border-color: var(--color-border-accent);
		--padding-block: var(--size-4xs);
		--padding-inline: var(--size-m);
		border-inline-start: var(--size-5xs) solid var(--border-color);
		padding-block: var(--padding-block);
		padding-inline: var(--padding-inline);
	}

	blockquote pre {
		font-style: normal;
	}

	cite {
		color: var(--color-text-muted);
		display: block;
		font-size: var(--size-s);
		padding-block-start: var(--size-m);
	}

}

/**
 * @section Details + Summary
 */

@layer kelp.core {

	summary {
		--margin: var(--size-3xs);
		cursor: pointer;
	}

	[open] > summary {
		margin-block-end: var(--margin);
	}

}

/**
 * @section Tables
 */

@layer kelp.core {

	table {
		--border-color: var(--color-border-muted);
		--background-color: var(--color-fill-muted);
		--color: var(--color-text-normal);
		border-collapse: collapse;
		border-spacing: 0;
		max-width: 100%;
		width: 100%;
	}

	th,
	td {
		text-align: left;
		padding: var(--size-4xs);
	}

	th {
		border-block-end: var(--size-6xs) solid var(--border-color);
		font-weight: bold;
		vertical-align: bottom;
	}

	td {
		border-block-start: 1px solid var(--border-color);
		vertical-align: top;
	}

	/**
	 * Adds zebra striping
	 */
	.table-striped tbody tr:nth-child(odd of :not([hidden])) {
		background-color: var(--background-color);
	}

	.table-striped.vivid tbody tr:nth-child(odd of :not([hidden])) {
		color: var(--color);
	}

}

/**
 * @Section Media
 * Images, audio, video, iframes, SVG, and more!
 */

@layer kelp.core {

	/**
	 * Prevent elements from spilling outside of the page on smaller screens.
	 */
	img,
	picture,
	video,
	svg,
	iframe,
	object,
	embed {
		max-width: 100%;
	}

	img,
	picture,
	video {
	    height: auto;
	}

	/**
	 * Make media elements fill full available width
	 */
	audio,
	video,
	iframe {
		width: 100%;
	}

	figcaption {
		font-size: var(--size-s);
		font-style: italic;
		color: var(--color-text-muted);
		padding-block-start: var(--size-4xs);
		text-align: center;
	}

}

/**
 * @section Code
 */

@layer kelp.core {

	code,
	kbd,
	pre,
	samp {
		font-family: var(--font-monospace);
		font-size: 1em;
	}

	code {
		color: var(--color-text-code);
		word-wrap: break-word;
	}

	pre {
		background-color: var(--color-code-fill);
		border: 1px solid var(--color-code-border);
		border-radius: var(--border-radius-m);
		color: var(--color-code-on);
		display: block;
		font-size: var(--font-size-code);
		line-height: var(--line-height-m);
		overflow: auto;
		padding: var(--size-xs);
		tab-size: 2;
		white-space: pre-wrap;
		word-break: break-all;
	}

	@media (min-width: 38rem) {
		pre {
			tab-size: 4;
		}
	}

	pre code {
		color: inherit;
	}

}

/**
 * @section Typography
 */

@layer kelp.core {

	hr {
		--border-color: var(--color-border-accent);
		border: 0;
		border-block-start: 1px solid var(--border-color);
		margin-block: var(--size-5xl);
		margin-inline: auto;
	}

	mark {
		background: var(--color-fill-highlight);
		color: var(--color-on-highlight);
	}

	del {
		color: color-mix(in oklab, var(--color), var(--color-mix-deleted));
	}

}

/**
 * @section Containers
 * Contain the max width of content
 */

@layer kelp.core {

	[class*="container"] {
		--width: var(--breakpoint-m);
		margin-inline: auto;
		max-width: var(--width);
		width: 86vw;
	}

	.container-xs {
		--width: var(--breakpoint-xs);
	}

	.container-s {
		--width: var(--breakpoint-s);
	}

	.container-l {
		--width: var(--breakpoint-l);
	}

	.container-xl {
		--width: var(--breakpoint-xl);
	}

	.container-2xl {
		--width: var(--breakpoint-2xl);
	}

	.breakout {
		--width: 100vw;
		margin-inline-start: calc(50% - 50vw);
		min-width: var(--width);
		max-width: var(--width);
		width: var(--width);
	}

}

/**
 * @section Cluster
 */

@layer kelp.core {

	.cluster > * {
		margin: 0;
	}

	.cluster {
		--gap: var(--size-m);
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap);
	}

}

/**
 * @section Grid
 * 12 columns, divided using simple fractions
 */

@layer kelp.core {

	/**
	 * Base Grid styles
	 */

	[class*="grid"] {
		--gap: var(--size-m);
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 1fr;
		gap: var(--gap);

		display: flex;
		flex-direction: column;
	}

	.grid,
	.grid-auto {
		display: grid;
	}

	.grid-auto {
		--width: 15ch;
		grid-template-columns: repeat(auto-fit, minmax(min(var(--width), 100%), 1fr));
		grid-template-rows: auto;
	}

	@media (min-width: 28em) {
		.grid-s {
			display: grid;
		}
	}

	@media (min-width: 38em) {
		.grid-m {
			display: grid;
		}
	}

	@media (min-width: 52em) {
		.grid-l {
			display: grid;
		}
	}

	@media (min-width: 60em) {
		.grid-xl {
			display: grid;
		}
	}


	/**
	 * Column widths
	 */

	[class*="item-"] {
		--span: 1;
		grid-column: auto / span var(--span);
	}

	.item-fourth {
		--span: 3;
	}

	.item-third {
		--span: 4;
	}

	.item-half {
		--span: 6;
	}

	.item-two-thirds {
		--span: 8;
	}

	.item-three-fourths {
		--span: 9;
	}


	/**
	 * Offsets
	 */

	[class*="start-"] {
		--start: 1;
		grid-row-start: 1;
		grid-column-start: var(--start);
	}

	.start-fourth {
		--start: 4;
	}

	.start-third {
		--start: 5;
	}

	.start-half {
		--start: 7;
	}

	.start-two-thirds {
		--start: 9;
	}

	.start-three-fourths {
		--start: 10;
	}

}

/**
 * @section Sidecar
 * Side-by-side content
 */

@layer kelp.core {

	[class*="sidecar"] > * {
		margin: 0;
	}

	[class*="sidecar"] {
		--gap: var(--size-m);
		--main-size: initial;
		--secondary-size: initial;
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap);
	}

	.sidecar > :first-child,
	.sidecar-end > :last-child {
		flex-basis: var(--secondary-size, auto);
		flex-grow: 1;
	}

	.sidecar > :last-child,
	.sidecar-end > :first-child {
		flex-basis: 0;
		flex-grow: 999;
		min-inline-size: var(--main-size, 50%);
	}

}

/**
 * @section Split
 * Horizontal content with space between
 */

@layer kelp.core {

	.split > * {
		margin: 0;
	}

	.split {
		--gap: var(--size-m);
		display: flex;
		gap: var(--gap);
		justify-content: space-between;
		flex-wrap: wrap;
	}

}

/**
 * @section Stack
 * Stack content on top of each other and control spacing
 */

@layer kelp.core {

	.stack > * {
		margin: 0;
	}

	.stack {
		--gap: var(--size-m);
		display: flex;
		flex-direction: column;
		gap: var(--gap);
	}

}

/**
 * @section Navbar Navigation
 */

@layer kelp.core {

	.navbar {
		--justify: center;
		--gap: var(--size-m);
		display: flex;
		column-gap: var(--gap);
		row-gap: calc(var(--gap) * 0.5);
		align-items: center;
		justify-content: space-between;
		padding-block: var(--size-m);
		text-align: var(--justify);
	}

	.logo {
		--color: var(--color, var(--color-text-normal));
		--color-hover: var(--color-text-link);
		--decoration: none;
		--decoration-hover: none;
		font-weight: bold;
	}

	.menu {
		--gap: var(--size-m);
		display: flex;
		column-gap: var(--gap);
		row-gap: calc(var(--gap) * 0.5);
	}

	:is(.navbar, .menu) > ul {
		--gap: var(--size-m);
		display: flex;
		align-items: center;
		justify-content: var(--justify);
		column-gap: var(--gap);
		list-style-type: "";
		padding: 0;
		margin: 0;
	}

	.navbar,
	:not(.no-wrap) :is(.menu, .navbar > ul, .menu > ul) {
		flex-wrap: wrap;
	}

	.navbar a {
		--decoration: none;
	}

	@media (max-width: 52em) {
		.navbar:not(.no-wrap) > * {
			flex-basis: 100%;
		}

		:not(.no-wrap) .menu {
			justify-content: var(--justify);
		}
	}

}

/**
 * @section Subnav Menus
 */

@layer kelp.core {

	.navbar summary {
		--color: var(--color-text-link);
		--color-hover: var(--color-text-link-hover);
		--decoration: none;
		--decoration-hover: var(--decoration-text-link-hover);
		text-decoration: var(--decoration);
		-webkit-text-decoration: var(--decoration);
		color: var(--color);
	}

}

@layer kelp.state {

	.navbar summary:hover {
		color: var(--color-hover);
		text-decoration: var(--decoration-hover);
		-webkit-text-decoration: var(--decoration-hover);
	}

	.navbar li:has(details) {
		position: relative;
	}

	.navbar details summary {
		--margin: 0;
	}

	.navbar details ul {
		--border-color: var(--color-border-muted);
		--gap: var(--size-6xs);

		background-color: var(--color-background);
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius-m);
		min-width: 6em;

		list-style-type: "";
		padding-block: var(--size-5xs);
		padding-inline: var(--size-5xs);

		position: absolute;
		left: 0;
		top: var(--size-5xl);
		text-align: start;
	}

	.navbar details li {
		margin-block-end: var(--gap);
	}

	.navbar details a {
		display: block;
		padding-block: var(--size-6xs);
		padding-inline: var(--size-4xs);
		width: 100%;
	}

}

/**
 * @section Callouts
 * Used for alert and callout content
 */

@layer kelp.core {

	.callout {
		--background-color: var(--color-fill-muted);
		--color: var(--color-on-muted);
		--border-color: var(--color-border-muted);

		background-color: var(--background-color);
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius-m);
		color: var(--color);
		margin-block-end: var(--size-5xs);
		padding: var(--size-xs);
	}

	.callout:not(.outline, .vivid) {
		color: var(--color-text-normal);
	}

	.callout > :first-child {
		margin-block-start: 0;
	}

	.callout > :last-child {
		margin-block-end: 0;
	}

}

/**
 * @section Heading Anchors
 */

@layer kelp.core {

	.anchor-link {
		--color: inherit;
		--color-hover: inherit;
		--decoration: none;
		--decoration-hover: none;
	}

	.anchor-icon {
		color: var(--color-text-link);
	}

	@media (min-width: 38em) {
		kelp-heading-anchors[before] .anchor-link {
			text-indent: -1em;
		}
	}

}

@layer kelp.state {

	.anchor-link:hover .anchor-icon {
		color: var(--color-text-link-hover);
		text-decoration: var(--decoration-text-link-hover);
	}

}

/**
 * @section Alignment
 * Adjust the alignment on the secondary axis in flexbox and grid layouts
 */

@layer kelp.utilities {

	.align-start {
		align-items: start;
	}

	.align-end {
		align-items: end;
	}

	.align-center {
		align-items: center;
	}

}

/**
 * @section Aspect Ratios
 * Crop content to a specific ratio
 */

@layer kelp.utilities {

	iframe[class*="aspect-ratio"] {
		height: 100%;
		width: 100%;
	}

	[class*="aspect-ratio"] {
		--ratio: auto;
		aspect-ratio: var(--ratio);
		object-fit: cover;
	}

	.aspect-ratio-21x9 {
		--ratio: 21 / 9;
	}

	.aspect-ratio-16x9 {
		--ratio: 16 / 9;
	}

	.aspect-ratio-4x3 {
		--ratio: 4 / 3;
	}

	.aspect-ratio-3x2 {
		--ratio: 3 / 2;
	}

	.aspect-ratio-1x1 {
		--ratio: 1 / 1;
	}

}

/**
 * @section Divided
 * Add horizontal dividers between each item in a stack
 */

@layer kelp.utilities {

	.divided {
		--border-color: var(--color-border-accent);
		--gap: var(--size-3xs);
	}

	.divided > * + * {
		padding: 0;
		padding-block-start: var(--gap);
	}

	.divided > *:first-child,
	.divided > *:has(+ *) {
		padding-block-end: var(--gap);
	}

	.divided > *:has(+ *) {
		border-block-end: 1px solid var(--border-color);
		margin: 0;
		padding-inline: 0;
	}

}

/**
 * @section Fill
 * Fill an element with color
 */

@layer kelp.utilities {

	.fill {
		--background-color: var(--color-fill-muted);
		background-color: var(--background-color);
	}

	.fill.vivid {
		--color: var(--color-on-vivid);
		color: var(--color);
	}

}

/**
 * @section Flex
 * Generic Flexbox utilities
 */

@layer kelp.utilities {

	.flex {
		--gap: 0;
		display: flex;
		gap: var(--gap);
	}

	.flex-inline {
		--gap: 0;
		display: inline-flex;
		gap: var(--gap);
	}

	.direction-row {
		flex-direction: row;
	}

	.direction-column {
		flex-direction: column;
	}

	.wrap {
		flex-wrap: wrap;
	}

	.no-wrap {
		flex-wrap: nowrap;
	}

}

/**
 * @section Space
 * Control the gap between items
 */

@layer kelp.utilities {

	.gap-0 {
		--gap: 0;
	}

	.gap-6xs {
		--gap: var(--size-6xs);
	}

	.gap-5xs {
		--gap: var(--size-5xs);
	}

	.gap-4xs {
		--gap: var(--size-4xs);
	}

	.gap-3xs {
		--gap: var(--size-3xs);
	}

	.gap-2xs {
		--gap: var(--size-2xs);
	}

	.gap-xs {
		--gap: var(--size-xs);
	}

	.gap-s {
		--gap: var(--size-s);
	}
	
	.gap-m {
		--gap: var(--size-m);
	}

	.gap-l {
		--gap: var(--size-l);
	}

	.gap-xl {
		--gap: var(--size-xl);
	}

	.gap-2xl {
		--gap: var(--size-2xl);
	}

	.gap-3xl {
		--gap: var(--size-3xl);
	}

	.gap-4xl {
		--gap: var(--size-4xl);
	}

	.gap-5xl {
		--gap: var(--size-5xl);
	}

	.gap-6xl {
		--gap: var(--size-6xl);
	}

}

/**
 * @section Hide Above
 * Utilities for hiding content above certain breakpoints
 */

@layer kelp.utilities {

	@media (min-width: 18em) {
		.hide-above-xs {
			display: none;
		}
	}

	@media (min-width: 28em) {
		.hide-above-s {
			display: none;
		}
	}

	@media (min-width: 38em) {
		.hide-above-m {
			display: none;
		}
	}

	@media (min-width: 52em) {
		.hide-above-l {
			display: none;
		}
	}

	@media (min-width: 60em) {
		.hide-above-xl {
			display: none;
		}
	}

	@media (min-width: 80em) {
		.hide-above-2xl {
			display: none;
		}
	}

}

/**
 * @section Justify
 * Control alignment on the primary axis in flexbox and grid layouts
 */

@layer kelp.utilities {

	.justify-start {
		justify-content: start;
	}

	.justify-end {
		justify-content: end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-even {
		justify-content: space-evenly;
	}

}

/**
 * @section Margin
 * Override margin settings
 */

@layer kelp.utilities {

	/**
	 * Margin Block Start
	 */

	.margin-start-0 {
		margin-block-start: 0;
	}

	.margin-start-6xs {
		margin-block-start: var(--size-6xs);
	}

	.margin-start-5xs {
		margin-block-start: var(--size-5xs);
	}

	.margin-start-4xs {
		margin-block-start: var(--size-4xs);
	}

	.margin-start-3xs {
		margin-block-start: var(--size-3xs);
	}

	.margin-start-2xs {
		margin-block-start: var(--size-2xs);
	}

	.margin-start-xs {
		margin-block-start: var(--size-xs);
	}

	.margin-start-s {
		margin-block-start: var(--size-s);
	}

	.margin-start-m {
		margin-block-start: var(--size-m);
	}

	.margin-start-l {
		margin-block-start: var(--size-l);
	}

	.margin-start-xl {
		margin-block-start: var(--size-xl);
	}

	.margin-start-2xl {
		margin-block-start: var(--size-2xl);
	}

	.margin-start-3xl {
		margin-block-start: var(--size-3xl);
	}

	.margin-start-4xl {
		margin-block-start: var(--size-4xl);
	}

	.margin-start-5xl {
		margin-block-start: var(--size-5xl);
	}

	.margin-start-6xl {
		margin-block-start: var(--size-6xl);
	}

	.margin-start-space {
		margin-block-start: var(--space);
	}


	/**
	 * Margin Block End
	 */

	.margin-end-0 {
		margin-block-end: 0;
	}

	.margin-end-6xs {
		margin-block-end: var(--size-6xs);
	}

	.margin-end-5xs {
		margin-block-end: var(--size-5xs);
	}

	.margin-end-4xs {
		margin-block-end: var(--size-4xs);
	}

	.margin-end-3xs {
		margin-block-end: var(--size-3xs);
	}

	.margin-end-2xs {
		margin-block-end: var(--size-2xs);
	}

	.margin-end-xs {
		margin-block-end: var(--size-xs);
	}

	.margin-end-s {
		margin-block-end: var(--size-s);
	}

	.margin-end-m {
		margin-block-end: var(--size-m);
	}

	.margin-end-l {
		margin-block-end: var(--size-l);
	}

	.margin-end-xl {
		margin-block-end: var(--size-xl);
	}

	.margin-end-2xl {
		margin-block-end: var(--size-2xl);
	}

	.margin-end-3xl {
		margin-block-end: var(--size-3xl);
	}

	.margin-end-4xl {
		margin-block-end: var(--size-4xl);
	}

	.margin-end-5xl {
		margin-block-end: var(--size-5xl);
	}

	.margin-end-6xl {
		margin-block-end: var(--size-6xl);
	}

	.margin-end-space {
		margin-block-end: var(--space);
	}

}

/**
 * @section Margin
 * Override margin settings
 */

@layer kelp.utilities {

	.padding-0 {
		padding: 0;
	}

	.padding-6xs {
		padding: var(--size-6xs);
	}

	.padding-5xs {
		padding: var(--size-5xs);
	}

	.padding-4xs {
		padding: var(--size-4xs);
	}

	.padding-3xs {
		padding: var(--size-3xs);
	}

	.padding-2xs {
		padding: var(--size-2xs);
	}

	.padding-xs {
		padding: var(--size-xs);
	}

	.padding-m {
		padding: var(--size-m);
	}

	.padding-l {
		padding: var(--size-l);
	}

	.padding-xl {
		padding: var(--size-xl);
	}

	.padding-2xl {
		padding: var(--size-2xl);
	}

	.padding-3xl {
		padding: var(--size-3xl);
	}

	.padding-4xl {
		padding: var(--size-4xl);
	}

	.padding-5xl {
		padding: var(--size-5xl);
	}

	.padding-6xl {
		padding: var(--size-6xl);
	}

	.padding-space {
		padding: var(--space);
	}

}

/**
 * @section Show Above
 * Utilities for showing content above certain breakpoints
 */

@layer kelp.utilities {

	@media (max-width: calc(18em - 1px)) {
		.show-above-xs {
			display: none;
		}
	}

	@media (max-width: calc(28em - 1px)) {
		.show-above-s {
			display: none;
		}
	}

	@media (max-width: calc(38em - 1px)) {
		.show-above-m {
			display: none;
		}
	}

	@media (max-width: calc(52em - 1px)) {
		.show-above-l {
			display: none;
		}
	}

	@media (max-width: calc(60em - 1px)) {
		.show-above-xl {
			display: none;
		}
	}

	@media (max-width: calc(80em - 1px)) {
		.show-above-2xl {
			display: none;
		}
	}

}

/**
 * @section Text Transforms
 */

@layer kelp.utilities {

	.text-capitalize {
		text-transform: capitalize;
	}

	.text-uppercase {
		text-transform: uppercase;
	}

	.text-lowercase {
		text-transform: lowercase;
	}

	.text-pretty {
		text-wrap: pretty;
	}

	.text-balance {
		text-wrap: balance;
	}

	.text-center {
		text-align: center;
	}

	.text-end {
		text-align: end;
	}

	.text-color {
		--color: var(--color-outline);
		color: var(--color);
	}

	.text-muted {
		--color: var(--color-text-muted);
		color: var(--color);
	}

	.font-primary {
		font-family: var(--font-primary);
	}

	.font-secondary {
		font-family: var(--font-secondary);
	}

}

/**
 * @section Sizes
 * Override font sizes
 */

@layer kelp.utilities {

	[class*="size-"] {
		--font-size: 1em;
		font-size: var(--font-size);
	}

	.size-3xs {
		--font-size: var(--size-3xs);
	}

	.size-2xs {
		--font-size: var(--size-2xs);
	}

	.size-xs {
		--font-size: var(--size-xs);
	}

	.size-s {
		--font-size: var(--size-s);
	}

	.size-m {
		--font-size: var(--size-m);
	}

	.size-l {
		--font-size: var(--size-l);
	}

	.size-xl {
		--font-size: var(--size-xl);
	}

	.size-2xl {
		--font-size: var(--size-2xl);
	}

	.size-3xl {
		--font-size: var(--size-3xl);
	}

	.size-4xl {
		--font-size: var(--size-4xl);
	}

	.size-5xl {
		--font-size: var(--size-5xl);
	}

	.size-6xl {
		--font-size: var(--size-6xl);
	}

}

/**
 * @section Accessibility
 * A11Y modifier and utilities
 */

@layer kelp.utilities {

	/**
	 * Allow horizontal scroll
	 */
	.scroll-horizontal {
		display: block;
		overflow-x: auto;
	}

	/*
	 * Hide only visually, but have it available for screen readers:
	 * @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
	 *
	 * 1. For long content, line feeds are not interpreted as spaces and small width
	 *    causes content to wrap 1 word per line:
	 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
	 */
	[class*="visually-hidden"] {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap; /* 1 */
		width: 1px;
	}

	/*
	 * Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard
	 * @link https://www.drupal.org/node/897638
	 */
	.visually-hidden-focusable:is(:active, :focus) {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		white-space: inherit;
		width: auto;
	}

}