/**
 * CSS Cascade Layers
 *
 * Layer order (first = lowest priority, last = highest):
 * 1. reset    - Normalize/reset styles
 * 2. theme    - CSS custom properties, colors, theming
 * 3. layout   - Structural layout, grid, containers
 * 4. content  - Typography, links, tables, code
 * 5. forms    - Form elements
 * 6. buttons  - Button styles
 * 7. components - UI components (cards, modals, etc.)
 * 8. utilities - Helper classes, accessibility
 */
@layer reset, theme, layout, content, forms, buttons, components, utilities;
@layer reset {
	:root,
	:host {
		--pico-font-family-emoji:
			"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
			"Noto Color Emoji";
		--pico-font-family-sans-serif:
			system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica,
			Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
		--pico-font-family-monospace:
			ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
			"Liberation Mono", monospace, var(--pico-font-family-emoji);
		--pico-font-family: var(--pico-font-family-sans-serif);
		--pico-line-height: 1.5;
		--pico-font-weight: 400;
		--pico-font-size: 100%;
		--pico-text-underline-offset: 0.1rem;
		--pico-border-radius: 0.25rem;
		--pico-border-width: 0.0625rem;
		--pico-outline-width: 0.125rem;
		--pico-transition: 0.2s ease-in-out;
		--pico-spacing: 1rem;
		--pico-typography-spacing-vertical: 1rem;
		--pico-block-spacing-vertical: var(--pico-spacing);
		--pico-block-spacing-horizontal: var(--pico-spacing);
		--pico-grid-column-gap: var(--pico-spacing);
		--pico-grid-row-gap: var(--pico-spacing);
		--pico-form-element-spacing-vertical: 0.75rem;
		--pico-form-element-spacing-horizontal: 1rem;
		--pico-group-box-shadow: 0 0 0 transparent;
		--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
			var(--pico-primary-focus);
		--pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem
			var(--pico-form-element-border-color);
		--pico-modal-overlay-backdrop-filter: blur(0.375rem);
		--pico-nav-element-spacing-vertical: 1rem;
		--pico-nav-element-spacing-horizontal: 0.5rem;
		--pico-nav-link-spacing-vertical: 0.5rem;
		--pico-nav-link-spacing-horizontal: 0.5rem;
		--pico-nav-breadcrumb-divider: ">";

		/* ============================================================================
      ICONS (use with mask-image, inherits currentColor)
      ============================================================================ */

		/* Navigation arrows */
		--pico-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");
		--pico-icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'%3E%3C/line%3E%3Cpolyline points='12 19 5 12 12 5'%3E%3C/polyline%3E%3C/svg%3E");
		--pico-icon-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");
		--pico-icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cpolyline points='19 12 12 19 5 12'%3E%3C/polyline%3E%3C/svg%3E");

		/* Chevrons */
		--pico-icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
		--pico-icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
		--pico-icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
		--pico-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

		/* Actions */
		--pico-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
		--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
		--pico-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
		--pico-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
		--pico-icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
		--pico-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3C/svg%3E");

		/* UI */
		--pico-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E");
		--pico-icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");
		--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
		--pico-icon-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'%3E%3C/polygon%3E%3C/svg%3E");

		/* Status */
		--pico-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
		--pico-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
		--pico-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
		--pico-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");

		/* Common */
		--pico-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
		--pico-icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E");
		--pico-icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
		--pico-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");

		/* Theme */
		--pico-icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'%3E%3C/circle%3E%3Cline x1='12' y1='1' x2='12' y2='3'%3E%3C/line%3E%3Cline x1='12' y1='21' x2='12' y2='23'%3E%3C/line%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'%3E%3C/line%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'%3E%3C/line%3E%3Cline x1='1' y1='12' x2='3' y2='12'%3E%3C/line%3E%3Cline x1='21' y1='12' x2='23' y2='12'%3E%3C/line%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'%3E%3C/line%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'%3E%3C/line%3E%3C/svg%3E");
		--pico-icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'%3E%3C/path%3E%3C/svg%3E");
		--pico-icon-system: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='21' x2='16' y2='21'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12' y2='21'%3E%3C/line%3E%3C/svg%3E");

		/* Form/Component icons (legacy names for compatibility) */
		--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
		--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
		--pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
		--pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
		--pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
		--pico-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%238b95a5' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
		--pico-icon-chevron: var(--pico-icon-chevron-down);
		--pico-icon-close: var(--pico-icon-x);

		/* Mask variants for components (monochrome) */
		--pico-icon-chevron-mask: var(--pico-icon-chevron-down);
		--pico-icon-close-mask: var(--pico-icon-x);
		--pico-icon-loading-mask: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
	}

	@media (min-width: 576px) {
		:root,
		:host {
			--pico-font-size: 106.25%;
		}
	}

	@media (min-width: 768px) {
		:root,
		:host {
			--pico-font-size: 112.5%;
		}
	}

	@media (min-width: 1024px) {
		:root,
		:host {
			--pico-font-size: 118.75%;
		}
	}

	@media (min-width: 1280px) {
		:root,
		:host {
			--pico-font-size: 125%;
		}
	}

	@media (min-width: 1536px) {
		:root,
		:host {
			--pico-font-size: 131.25%;
		}
	}

	a {
		--pico-text-decoration: underline;
	}

	a.secondary,
	a.contrast {
		--pico-text-decoration: underline;
	}

	small {
		--pico-font-size: 0.875em;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		--pico-font-weight: 700;
	}

	h1 {
		--pico-font-size: 2rem;
		--pico-line-height: 1.125;
		--pico-typography-spacing-top: 3rem;
	}

	h2 {
		--pico-font-size: 1.75rem;
		--pico-line-height: 1.15;
		--pico-typography-spacing-top: 2.625rem;
	}

	h3 {
		--pico-font-size: 1.5rem;
		--pico-line-height: 1.175;
		--pico-typography-spacing-top: 2.25rem;
	}

	h4 {
		--pico-font-size: 1.25rem;
		--pico-line-height: 1.2;
		--pico-typography-spacing-top: 1.874rem;
	}

	h5 {
		--pico-font-size: 1.125rem;
		--pico-line-height: 1.225;
		--pico-typography-spacing-top: 1.6875rem;
	}

	h6 {
		--pico-font-size: 1rem;
		--pico-line-height: 1.25;
		--pico-typography-spacing-top: 1.5rem;
	}

	thead th,
	thead td,
	tfoot th,
	tfoot td {
		--pico-font-weight: 600;
		--pico-border-width: 0.1875rem;
	}

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

	kbd {
		--pico-font-weight: bolder;
	}

	input:not(
			[type="submit"],
			[type="button"],
			[type="reset"],
			[type="checkbox"],
			[type="radio"],
			[type="file"]
		),
	:where(select, textarea) {
		--pico-outline-width: 0.0625rem;
	}

	[type="search"] {
		--pico-border-radius: 5rem;
	}

	[type="checkbox"],
	[type="radio"] {
		--pico-border-width: 0.125rem;
	}

	[type="checkbox"][role="switch"] {
		--pico-border-width: 0.1875rem;
	}

	details.dropdown summary:not([role="button"]) {
		--pico-outline-width: 0.0625rem;
	}

	nav details.dropdown summary:focus-visible {
		--pico-outline-width: 0.125rem;
	}

	[role="search"] {
		--pico-border-radius: 5rem;
	}
}
/**
 * Pico CSS Theme System
 *
 * Set just 2 variables to customize everything including dark mode:
 *   --pico-primary: your brand/accent color
 *   --pico-secondary: your neutral color (for text, borders, muted elements)
 *
 * ALL colors are derived automatically using CSS color-mix() and light-dark()
 * Force light/dark mode on any element: style="color-scheme: light" or style="color-scheme: dark"
 */

@layer theme {
	:root,
	:host {
		/* ============================================================================
      SOURCE VARIABLES (users set only these)
      ============================================================================ */

		--pico-primary: #0172ad;
		--pico-secondary: #646e82;

		/* ============================================================================
      COLOR SCHEME (enables light-dark() auto-switching)
      ============================================================================ */

		color-scheme: light dark;

		/* ============================================================================
      SEMANTIC COLORS (same in both modes)
      ============================================================================ */

		--pico-success: oklch(0.6 0.15 145);
		--pico-warning: oklch(0.8 0.15 85);
		--pico-error: oklch(0.55 0.2 25);
	}

	/* ============================================================================
    DERIVED PALETTE (light-dark handles mode switching)
    Defined on * so color-scheme can be overridden per-element
    ============================================================================ */

	*,
	*::before,
	*::after {
		/* Surfaces */
		--pico-surface: light-dark(
			color-mix(in srgb, white, var(--pico-secondary) 4%),
			color-mix(in srgb, black, var(--pico-secondary) 20%)
		);
		--pico-background-color: var(--pico-surface);

		/* Text */
		--pico-color: light-dark(
			color-mix(in srgb, black, var(--pico-secondary) 25%),
			color-mix(in srgb, white, var(--pico-secondary) 25%)
		);
		--pico-muted-color: light-dark(
			color-mix(in srgb, var(--pico-secondary), black 25%),
			color-mix(in srgb, var(--pico-secondary), white 30%)
		);

		/* Text selection */
		--pico-text-selection-color: color-mix(
			in srgb,
			var(--pico-primary),
			transparent 75%
		);

		/* Borders */
		--pico-muted-border-color: light-dark(
			color-mix(in srgb, var(--pico-secondary), white 75%),
			color-mix(in srgb, black, var(--pico-secondary) 30%)
		);

		/* Primary */
		--pico-primary-hover: light-dark(
			color-mix(in srgb, var(--pico-primary), black 12%),
			color-mix(in srgb, var(--pico-primary), white 15%)
		);
		--pico-primary-focus: light-dark(
			color-mix(in srgb, var(--pico-primary), transparent 70%),
			color-mix(in srgb, var(--pico-primary), transparent 62.5%)
		);
		--pico-primary-background: light-dark(
			var(--pico-primary),
			color-mix(in srgb, var(--pico-primary), white 25%)
		);
		--pico-primary-border: var(--pico-primary-background);
		--pico-primary-underline: color-mix(
			in srgb,
			var(--pico-primary),
			transparent 50%
		);
		--pico-primary-hover-background: light-dark(
			color-mix(in srgb, var(--pico-primary), black 8%),
			color-mix(in srgb, var(--pico-primary), white 35%)
		);
		--pico-primary-hover-border: var(--pico-primary-hover-background);
		--pico-primary-hover-underline: var(--pico-primary-hover);
		--pico-primary-inverse: light-dark(white, black);

		/* Secondary */
		--pico-secondary-hover: light-dark(
			color-mix(in srgb, var(--pico-secondary), black 15%),
			color-mix(in srgb, var(--pico-secondary), white 20%)
		);
		--pico-secondary-background: light-dark(
			var(--pico-secondary),
			color-mix(in srgb, var(--pico-secondary), white 10%)
		);
		--pico-secondary-border: var(--pico-secondary-background);
		--pico-secondary-underline: color-mix(
			in srgb,
			var(--pico-secondary),
			transparent 50%
		);
		--pico-secondary-hover-background: light-dark(
			color-mix(in srgb, var(--pico-secondary), black 10%),
			color-mix(in srgb, var(--pico-secondary), white 15%)
		);
		--pico-secondary-hover-border: var(--pico-secondary-hover-background);
		--pico-secondary-hover-underline: var(--pico-secondary-hover);
		--pico-secondary-focus: color-mix(
			in srgb,
			var(--pico-secondary),
			transparent 75%
		);
		--pico-secondary-inverse: white;

		/* Contrast */
		--pico-contrast: light-dark(
			color-mix(in srgb, black, var(--pico-secondary) 15%),
			color-mix(in srgb, white, var(--pico-secondary) 15%)
		);
		--pico-contrast-background: var(--pico-contrast);
		--pico-contrast-border: var(--pico-contrast);
		--pico-contrast-underline: color-mix(
			in srgb,
			var(--pico-contrast),
			transparent 50%
		);
		--pico-contrast-hover: light-dark(black, white);
		--pico-contrast-hover-background: var(--pico-contrast-hover);
		--pico-contrast-hover-border: var(--pico-contrast-hover-background);
		--pico-contrast-hover-underline: var(--pico-contrast-hover);
		--pico-contrast-focus: light-dark(
			color-mix(in srgb, var(--pico-secondary), transparent 75%),
			color-mix(in srgb, var(--pico-contrast), transparent 75%)
		);
		--pico-contrast-inverse: light-dark(white, black);

		/* Box shadow */
		--pico-box-shadow: var(
			--pico-shadow,
			light-dark(
				0.0145rem 0.029rem 0.174rem
					color-mix(in srgb, var(--pico-secondary), transparent 98%),
				0.0335rem 0.067rem 0.402rem
					color-mix(in srgb, var(--pico-secondary), transparent 97.5%),
				0.0625rem 0.125rem 0.75rem
					color-mix(in srgb, var(--pico-secondary), transparent 97%),
				0.1125rem 0.225rem 1.35rem
					color-mix(in srgb, var(--pico-secondary), transparent 96.5%),
				0.2085rem 0.417rem 2.502rem
					color-mix(in srgb, var(--pico-secondary), transparent 95.5%),
				0.5rem 1rem 6rem
					color-mix(in srgb, var(--pico-secondary), transparent 94%),
				0 0 0 0.0625rem
					color-mix(in srgb, var(--pico-secondary), transparent 98.5%),
				0.0145rem 0.029rem 0.174rem color-mix(in srgb, black, transparent 98%),
				0.0335rem 0.067rem 0.402rem color-mix(in srgb, black, transparent 97.5%),
				0.0625rem 0.125rem 0.75rem color-mix(in srgb, black, transparent 97%),
				0.1125rem 0.225rem 1.35rem color-mix(in srgb, black, transparent 96.5%),
				0.2085rem 0.417rem 2.502rem color-mix(in srgb, black, transparent 95.5%),
				0.5rem 1rem 6rem color-mix(in srgb, black, transparent 94%),
				0 0 0 0.0625rem color-mix(in srgb, black, transparent 98.5%)
			)
		);

		/* Typography */
		--pico-h1-color: light-dark(
			color-mix(in srgb, black, var(--pico-secondary) 20%),
			color-mix(in srgb, white, var(--pico-secondary) 15%)
		);
		--pico-h2-color: light-dark(
			color-mix(in srgb, black, var(--pico-secondary) 25%),
			color-mix(in srgb, white, var(--pico-secondary) 20%)
		);
		--pico-h3-color: light-dark(
			color-mix(in srgb, black, var(--pico-secondary) 30%),
			var(--pico-color)
		);
		--pico-h4-color: light-dark(
			color-mix(in srgb, black, var(--pico-secondary) 35%),
			color-mix(in srgb, white, var(--pico-secondary) 35%)
		);
		--pico-h5-color: light-dark(
			color-mix(in srgb, black, var(--pico-secondary) 45%),
			color-mix(in srgb, white, var(--pico-secondary) 45%)
		);
		--pico-h6-color: var(--pico-muted-color);

		/* Mark, ins, del */
		--pico-mark-background-color: light-dark(
			color-mix(in srgb, var(--pico-warning), white 50%),
			color-mix(in srgb, var(--pico-primary), black 70%)
		);
		--pico-mark-color: light-dark(var(--pico-color), white);
		--pico-ins-color: light-dark(
			var(--pico-success),
			color-mix(in srgb, var(--pico-success), white 30%)
		);
		--pico-del-color: light-dark(
			var(--pico-error),
			color-mix(in srgb, var(--pico-error), white 30%)
		);
		--pico-blockquote-border-color: var(--pico-muted-border-color);
		--pico-blockquote-footer-color: var(--pico-muted-color);

		/* Button */
		--pico-button-box-shadow: 0 0 0 transparent;
		--pico-button-hover-box-shadow: 0 0 0 transparent;

		/* Table */
		--pico-table-border-color: var(--pico-muted-border-color);
		--pico-table-row-stripped-background-color: light-dark(
			color-mix(in srgb, var(--pico-secondary), white 96%),
			color-mix(in srgb, black, var(--pico-secondary) 25%)
		);

		/* Code */
		--pico-code-background-color: light-dark(
			color-mix(in srgb, var(--pico-secondary), white 92%),
			color-mix(in srgb, black, var(--pico-secondary) 30%)
		);
		--pico-code-color: var(--pico-muted-color);
		--pico-code-kbd-background-color: var(--pico-color);
		--pico-code-kbd-color: var(--pico-background-color);

		/* Form elements */
		--pico-form-element-background-color: light-dark(
			var(--pico-background-color),
			color-mix(in srgb, black, var(--pico-secondary) 25%)
		);
		--pico-form-element-selected-background-color: light-dark(
			color-mix(in srgb, var(--pico-secondary), white 85%),
			color-mix(in srgb, black, var(--pico-secondary) 35%)
		);
		--pico-form-element-border-color: light-dark(
			color-mix(in srgb, var(--pico-secondary), white 70%),
			color-mix(in srgb, black, var(--pico-secondary) 35%)
		);
		--pico-form-element-color: light-dark(
			var(--pico-color),
			color-mix(in srgb, white, var(--pico-secondary) 20%)
		);
		--pico-form-element-placeholder-color: var(--pico-muted-color);
		--pico-form-element-active-background-color: light-dark(
			white,
			color-mix(in srgb, black, var(--pico-secondary) 30%)
		);
		--pico-form-element-active-border-color: var(--pico-primary-border);
		--pico-form-element-focus-color: var(--pico-primary-border);
		--pico-form-element-disabled-opacity: 0.5;
		--pico-form-element-invalid-border-color: light-dark(
			var(--pico-error),
			color-mix(in srgb, var(--pico-error), white 30%)
		);
		--pico-form-element-invalid-active-border-color: light-dark(
			color-mix(in srgb, var(--pico-error), black 10%),
			color-mix(in srgb, var(--pico-error), white 20%)
		);
		--pico-form-element-invalid-focus-color: var(
			--pico-form-element-invalid-active-border-color
		);
		--pico-form-element-valid-border-color: light-dark(
			var(--pico-success),
			color-mix(in srgb, var(--pico-success), white 30%)
		);
		--pico-form-element-valid-active-border-color: light-dark(
			color-mix(in srgb, var(--pico-success), black 10%),
			color-mix(in srgb, var(--pico-success), white 20%)
		);
		--pico-form-element-valid-focus-color: var(
			--pico-form-element-valid-active-border-color
		);

		/* Switch */
		--pico-switch-background-color: light-dark(
			color-mix(in srgb, var(--pico-secondary), white 30%),
			color-mix(in srgb, black, var(--pico-secondary) 40%)
		);
		--pico-switch-checked-background-color: var(--pico-primary-background);
		--pico-switch-color: white;
		--pico-switch-thumb-box-shadow: 0 0 0 transparent;

		/* Range */
		--pico-range-border-color: light-dark(
			color-mix(in srgb, var(--pico-secondary), white 75%),
			color-mix(in srgb, black, var(--pico-secondary) 30%)
		);
		--pico-range-active-border-color: light-dark(
			color-mix(in srgb, var(--pico-secondary), white 50%),
			color-mix(in srgb, black, var(--pico-secondary) 35%)
		);
		--pico-range-thumb-border-color: var(--pico-background-color);
		--pico-range-thumb-color: var(--pico-secondary-background);
		--pico-range-thumb-active-color: var(--pico-primary-background);

		/* Accordion */
		--pico-accordion-border-color: var(--pico-muted-border-color);
		--pico-accordion-active-summary-color: var(--pico-primary-hover);
		--pico-accordion-close-summary-color: var(--pico-color);
		--pico-accordion-open-summary-color: var(--pico-muted-color);

		/* Card */
		--pico-card-background-color: light-dark(
			var(--pico-background-color),
			color-mix(in srgb, black, var(--pico-secondary) 15%)
		);
		--pico-card-border-color: light-dark(
			var(--pico-muted-border-color),
			var(--pico-card-background-color)
		);
		--pico-card-box-shadow: var(--pico-box-shadow);
		--pico-card-sectioning-background-color: light-dark(
			color-mix(in srgb, var(--pico-secondary), white 95%),
			color-mix(in srgb, black, var(--pico-secondary) 30%)
		);

		/* Dropdown */
		--pico-dropdown-background-color: light-dark(
			var(--pico-background-color),
			color-mix(in srgb, black, var(--pico-secondary) 15%)
		);
		--pico-dropdown-border-color: light-dark(
			var(--pico-muted-border-color),
			color-mix(in srgb, black, var(--pico-secondary) 30%)
		);
		--pico-dropdown-box-shadow: var(--pico-box-shadow);
		--pico-dropdown-color: var(--pico-color);
		--pico-dropdown-hover-background-color: light-dark(
			color-mix(in srgb, var(--pico-secondary), white 90%),
			color-mix(in srgb, black, var(--pico-secondary) 30%)
		);

		/* Loading */
		--pico-loading-spinner-opacity: 0.5;

		/* Modal */
		--pico-modal-overlay-background-color: light-dark(
			color-mix(in srgb, var(--pico-secondary), transparent 75%),
			color-mix(in srgb, black, transparent 92%)
		);

		/* Progress */
		--pico-progress-background-color: light-dark(
			color-mix(in srgb, var(--pico-secondary), white 75%),
			color-mix(in srgb, black, var(--pico-secondary) 30%)
		);
		--pico-progress-color: var(--pico-primary-background);
	}

	/* ============================================================================
    HIGH CONTRAST MODE
    ============================================================================ */

	@media (prefers-contrast: more) {
		*,
		*::before,
		*::after {
			--pico-color: light-dark(black, white);
			--pico-muted-color: light-dark(
				color-mix(in srgb, var(--pico-secondary), black 40%),
				color-mix(in srgb, var(--pico-secondary), white 40%)
			);
			--pico-muted-border-color: light-dark(
				color-mix(in srgb, var(--pico-secondary), white 50%),
				color-mix(in srgb, black, var(--pico-secondary) 50%)
			);
			--pico-form-element-border-color: var(--pico-muted-border-color);
			--pico-primary-focus: var(--pico-primary);
			--pico-secondary-focus: var(--pico-secondary);
			--pico-contrast-focus: var(--pico-contrast);
		}
	}

	/* ============================================================================
    FORM INPUT FOCUS (special handling for certain input types)
    ============================================================================ */

	:where(input, select, textarea):is(
			[type="submit"],
			[type="button"],
			[type="reset"],
			[type="checkbox"],
			[type="radio"],
			[type="file"]
		) {
		--pico-form-element-focus-color: var(--pico-primary-focus);
	}
}
@layer layout {
	/**
	 * Document
	 */

	*,
	*::before,
	*::after {
		box-sizing: border-box;
		background-repeat: no-repeat;
	}

	::before,
	::after {
		text-decoration: inherit;
		vertical-align: inherit;
	}

	:where(:root),
	:where(:host) {
		-webkit-tap-highlight-color: transparent;
		-webkit-text-size-adjust: 100%;
		-moz-text-size-adjust: 100%;
		text-size-adjust: 100%;
		background-color: var(--pico-background-color);
		color: var(--pico-color);
		font-weight: var(--pico-font-weight);
		font-size: var(--pico-font-size);
		line-height: var(--pico-line-height);
		font-family: var(--pico-font-family);
		text-underline-offset: var(--pico-text-underline-offset);
		text-rendering: optimizeLegibility;
		overflow-wrap: break-word;
		-moz-tab-size: 4;
		-o-tab-size: 4;
		tab-size: 4;
	}

	/**
	 * Landmarks
	 */

	body {
		width: 100%;
		margin: 0;
	}

	main {
		display: block;
	}

	body > header,
	body > main,
	body > footer {
		padding-block: var(--pico-block-spacing-vertical);
	}

	/**
	 * Section
	 */

	section {
		margin-bottom: var(--pico-block-spacing-vertical);
	}

	/**
	 * Container
	 */

	.container,
	.container-fluid {
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		padding-right: var(--pico-spacing);
		padding-left: var(--pico-spacing);
	}

	@media (min-width: 576px) {
		.container {
			max-width: 510px;
			padding-right: 0;
			padding-left: 0;
		}
	}

	@media (min-width: 768px) {
		.container {
			max-width: 700px;
		}
	}

	@media (min-width: 1024px) {
		.container {
			max-width: 950px;
		}
	}

	@media (min-width: 1280px) {
		.container {
			max-width: 1200px;
		}
	}

	@media (min-width: 1536px) {
		.container {
			max-width: 1450px;
		}
	}

	/**
	 * Grid
	 */

	.grid {
		grid-column-gap: var(--pico-grid-column-gap);
		grid-row-gap: var(--pico-grid-row-gap);
		display: grid;
		grid-template-columns: 1fr;
	}

	@media (min-width: 768px) {
		.grid {
			grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
		}
	}

	.grid > * {
		min-width: 0;
	}
} /* @layer layout */
@layer content {
	/**
	 * Typography
	 */

	b,
	strong {
		font-weight: bolder;
	}

	sub,
	sup {
		position: relative;
		font-size: 0.75em;
		line-height: 0;
		vertical-align: baseline;
	}

	sub {
		bottom: -0.25em;
	}

	sup {
		top: -0.5em;
	}

	address,
	blockquote,
	dl,
	ol,
	p,
	pre,
	table,
	ul {
		margin-top: 0;
		margin-bottom: var(--pico-typography-spacing-vertical);
		color: var(--pico-color);
		font-style: normal;
		font-weight: var(--pico-font-weight);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-top: 0;
		margin-bottom: var(--pico-typography-spacing-vertical);
		color: var(--pico-color);
		font-weight: var(--pico-font-weight);
		font-size: var(--pico-font-size);
		line-height: var(--pico-line-height);
		font-family: var(--pico-font-family);
	}

	h1 {
		--pico-color: var(--pico-h1-color);
	}

	h2 {
		--pico-color: var(--pico-h2-color);
	}

	h3 {
		--pico-color: var(--pico-h3-color);
	}

	h4 {
		--pico-color: var(--pico-h4-color);
	}

	h5 {
		--pico-color: var(--pico-h5-color);
	}

	h6 {
		--pico-color: var(--pico-h6-color);
	}

	:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul)
		~ :is(h1, h2, h3, h4, h5, h6) {
		margin-top: var(--pico-typography-spacing-top);
	}

	p {
		margin-bottom: var(--pico-typography-spacing-vertical);
	}

	hgroup {
		margin-bottom: var(--pico-typography-spacing-vertical);
	}

	hgroup > * {
		margin-top: 0;
		margin-bottom: 0;
	}

	hgroup > *:not(:first-child):last-child {
		--pico-color: var(--pico-muted-color);
		--pico-font-weight: unset;
		font-size: 1rem;
	}

	:where(ol, ul) li {
		margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25);
	}

	:where(dl, ol, ul) :where(dl, ol, ul) {
		margin: 0;
		margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25);
	}

	ul li {
		list-style: square;
	}

	mark {
		padding: 0.125rem 0.25rem;
		background-color: var(--pico-mark-background-color);
		color: var(--pico-mark-color);
		vertical-align: baseline;
	}

	blockquote {
		display: block;
		margin: var(--pico-typography-spacing-vertical) 0;
		padding: var(--pico-spacing);
		border-right: none;
		border-left: 0.25rem solid var(--pico-blockquote-border-color);
		border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
		border-inline-end: none;
	}

	blockquote footer {
		margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5);
		color: var(--pico-blockquote-footer-color);
	}

	abbr[title] {
		border-bottom: 1px dotted;
		text-decoration: none;
		cursor: help;
	}

	ins {
		color: var(--pico-ins-color);
		text-decoration: none;
	}

	del {
		color: var(--pico-del-color);
	}

	::-moz-selection {
		background-color: var(--pico-text-selection-color);
	}

	::selection {
		background-color: var(--pico-text-selection-color);
	}

	/**
	 * Link
	 */

	:where(a:not([role="button"])),
	[role="link"] {
		--pico-color: var(--pico-primary);
		--pico-background-color: transparent;
		--pico-underline: var(--pico-primary-underline);
		outline: none;
		background-color: var(--pico-background-color);
		color: var(--pico-color);
		text-decoration: var(--pico-text-decoration);
		text-decoration-color: var(--pico-underline);
		text-underline-offset: 0.125em;
		transition:
			background-color var(--pico-transition),
			color var(--pico-transition),
			text-decoration var(--pico-transition),
			box-shadow var(--pico-transition);
	}

	:where(a:not([role="button"])):is(
			[aria-current]:not([aria-current="false"]),
			:hover,
			:active,
			:focus
		),
	[role="link"]:is(
			[aria-current]:not([aria-current="false"]),
			:hover,
			:active,
			:focus
		) {
		--pico-color: var(--pico-primary-hover);
		--pico-underline: var(--pico-primary-hover-underline);
		--pico-text-decoration: underline;
	}

	:where(a:not([role="button"])):focus-visible,
	[role="link"]:focus-visible {
		box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
	}

	:where(a:not([role="button"])).secondary,
	[role="link"].secondary {
		--pico-color: var(--pico-secondary);
		--pico-underline: var(--pico-secondary-underline);
	}

	:where(a:not([role="button"])).secondary:is(
			[aria-current]:not([aria-current="false"]),
			:hover,
			:active,
			:focus
		),
	[role="link"].secondary:is(
			[aria-current]:not([aria-current="false"]),
			:hover,
			:active,
			:focus
		) {
		--pico-color: var(--pico-secondary-hover);
		--pico-underline: var(--pico-secondary-hover-underline);
	}

	:where(a:not([role="button"])).contrast,
	[role="link"].contrast {
		--pico-color: var(--pico-contrast);
		--pico-underline: var(--pico-contrast-underline);
	}

	:where(a:not([role="button"])).contrast:is(
			[aria-current]:not([aria-current="false"]),
			:hover,
			:active,
			:focus
		),
	[role="link"].contrast:is(
			[aria-current]:not([aria-current="false"]),
			:hover,
			:active,
			:focus
		) {
		--pico-color: var(--pico-contrast-hover);
		--pico-underline: var(--pico-contrast-hover-underline);
	}

	a[role="button"] {
		display: inline-block;
	}

	/**
	 * Table
	 */

	:where(table) {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
		text-indent: 0;
	}

	th,
	td {
		padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
		border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
		background-color: var(--pico-background-color);
		color: var(--pico-color);
		font-weight: var(--pico-font-weight);
		text-align: left;
		text-align: start;
	}

	tfoot th,
	tfoot td {
		border-top: var(--pico-border-width) solid var(--pico-table-border-color);
		border-bottom: 0;
	}

	table.striped tbody tr:nth-child(odd) th,
	table.striped tbody tr:nth-child(odd) td {
		background-color: var(--pico-table-row-stripped-background-color);
	}

	/**
	 * Embedded content
	 */

	:where(audio, canvas, iframe, img, svg, video) {
		vertical-align: middle;
	}

	audio,
	video {
		display: inline-block;
	}

	audio:not([controls]) {
		display: none;
		height: 0;
	}

	:where(iframe) {
		border-style: none;
	}

	img {
		max-width: 100%;
		height: auto;
		border-style: none;
	}

	:where(svg:not([fill])) {
		fill: currentColor;
	}

	svg:not(:root),
	svg:not(:host) {
		overflow: hidden;
	}

	/**
	 * Code
	 */

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

	pre code,
	pre samp {
		font-size: inherit;
		font-family: inherit;
	}

	pre {
		overflow: auto;
	}

	pre,
	code,
	kbd,
	samp {
		border-radius: var(--pico-border-radius);
		background: var(--pico-code-background-color);
		color: var(--pico-code-color);
		font-weight: var(--pico-font-weight);
		line-height: initial;
	}

	code,
	kbd,
	samp {
		display: inline-block;
		padding: 0.375rem;
	}

	pre {
		display: block;
		margin-bottom: var(--pico-spacing);
		overflow-x: auto;
	}

	pre > code,
	pre > samp {
		display: block;
		padding: var(--pico-spacing);
		background: none;
		line-height: var(--pico-line-height);
	}

	kbd {
		background-color: var(--pico-code-kbd-background-color);
		color: var(--pico-code-kbd-color);
		vertical-align: baseline;
	}

	/**
	 * Figure
	 */

	figure {
		display: block;
		margin: 0;
		padding: 0;
	}

	figure figcaption {
		padding: calc(var(--pico-spacing) * 0.5) 0;
		color: var(--pico-muted-color);
	}

	/**
	 * Misc
	 */

	hr {
		height: 0;
		margin: var(--pico-typography-spacing-vertical) 0;
		border: 0;
		border-top: 1px solid var(--pico-muted-border-color);
		color: inherit;
	}

	[hidden],
	template {
		display: none !important;
	}

	canvas {
		display: inline-block;
	}
} /* @layer content */
@layer forms {
	input,
	optgroup,
	select,
	textarea {
		margin: 0;
		font-size: 1rem;
		line-height: var(--pico-line-height);
		font-family: inherit;
		letter-spacing: inherit;
	}

	input {
		overflow: visible;
	}

	select {
		text-transform: none;
	}

	legend {
		max-width: 100%;
		padding: 0;
		color: inherit;
		white-space: normal;
	}

	textarea {
		overflow: auto;
	}

	[type="checkbox"],
	[type="radio"] {
		padding: 0;
	}

	::-webkit-inner-spin-button,
	::-webkit-outer-spin-button {
		height: auto;
	}

	[type="search"] {
		appearance: textfield;
		outline-offset: -2px;
	}

	[type="search"]::-webkit-search-decoration {
		appearance: none;
	}

	::-webkit-file-upload-button {
		appearance: button;
		font: inherit;
	}

	::-moz-focus-inner {
		padding: 0;
		border-style: none;
	}

	:-moz-focusring {
		outline: none;
	}

	:-moz-ui-invalid {
		box-shadow: none;
	}

	[type="file"],
	[type="range"] {
		padding: 0;
		border-width: 0;
	}

	input:not([type="checkbox"], [type="radio"], [type="range"]) {
		height: calc(
			1rem *
			var(--pico-line-height) +
			var(--pico-form-element-spacing-vertical) *
			2 +
			var(--pico-border-width) *
			2
		);
	}

	fieldset {
		width: 100%;
		margin: 0;
		margin-bottom: var(--pico-spacing);
		padding: 0;
		border: 0;
	}

	label,
	fieldset legend {
		display: block;
		margin-bottom: calc(var(--pico-spacing) * 0.375);
		color: var(--pico-color);
		font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
	}

	fieldset legend {
		margin-bottom: calc(var(--pico-spacing) * 0.5);
	}

	input:not([type="checkbox"], [type="radio"]),
	button[type="submit"],
	select,
	textarea {
		width: 100%;
	}

	input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
	select,
	textarea {
		appearance: none;
		padding: var(--pico-form-element-spacing-vertical)
			var(--pico-form-element-spacing-horizontal);
	}

	input,
	select,
	textarea {
		--pico-background-color: var(--pico-form-element-background-color);
		--pico-border-color: var(--pico-form-element-border-color);
		--pico-color: var(--pico-form-element-color);
		--pico-box-shadow: none;
		border: var(--pico-border-width) solid var(--pico-border-color);
		border-radius: var(--pico-border-radius);
		outline: none;
		background-color: var(--pico-background-color);
		box-shadow: var(--pico-box-shadow);
		color: var(--pico-color);
		font-weight: var(--pico-font-weight);
		transition:
			background-color var(--pico-transition),
			border-color var(--pico-transition),
			color var(--pico-transition),
			box-shadow var(--pico-transition);
	}

	:where(
			input:not([readonly]),
			select:not([readonly]),
			textarea:not([readonly])
		):is(:active, :focus) {
		--pico-background-color: var(--pico-form-element-active-background-color);
	}

	:where(
			input:not(
					[type="submit"],
					[type="button"],
					[type="reset"],
					[role="switch"],
					[readonly]
				),
			select:not([readonly]),
			textarea:not([readonly])
		):is(:active, :focus) {
		--pico-border-color: var(--pico-form-element-active-border-color);
	}

	:where(
			input:not(
					[type="submit"],
					[type="button"],
					[type="reset"],
					[type="range"],
					[type="file"],
					[readonly]
				),
			select:not([readonly]),
			textarea:not([readonly])
		):focus {
		--pico-box-shadow: 0 0 0 var(--pico-outline-width)
			var(--pico-form-element-focus-color);
	}

	input:not([type="submit"], [type="button"], [type="reset"])[disabled],
	select[disabled],
	textarea[disabled],
	label[aria-disabled="true"],
	:where(fieldset[disabled])
		:is(
			input:not([type="submit"], [type="button"], [type="reset"]),
			select,
			textarea
		) {
		opacity: var(--pico-form-element-disabled-opacity);
		pointer-events: none;
	}

	label[aria-disabled="true"] input[disabled] {
		opacity: 1;
	}

	:where(
			input:not(
					[type="checkbox"],
					[type="radio"],
					[type="date"],
					[type="datetime-local"],
					[type="month"],
					[type="time"],
					[type="week"],
					[type="range"]
				),
			select,
			textarea
		)[aria-invalid] {
		padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
		padding-left: var(--pico-form-element-spacing-horizontal);
		padding-inline-start: var(--pico-form-element-spacing-horizontal);
		padding-inline-end: calc(
			var(--pico-form-element-spacing-horizontal) +
			1.5rem
		);
		background-position: center right 0.75rem;
		background-size: 1rem auto;
		background-repeat: no-repeat;

		&[aria-invalid="false"] {
			background-image: var(--pico-icon-valid);
		}

		&[aria-invalid="true"] {
			background-image: var(--pico-icon-invalid);
		}
	}

	:where(input, select, textarea)[aria-invalid="false"] {
		--pico-border-color: var(--pico-form-element-valid-border-color);

		&:is(:active, :focus) {
			--pico-border-color: var(--pico-form-element-valid-active-border-color);
		}

		&:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
			--pico-box-shadow: 0 0 0 var(--pico-outline-width)
				var(--pico-form-element-valid-focus-color);
		}
	}

	:where(input, select, textarea)[aria-invalid="true"] {
		--pico-border-color: var(--pico-form-element-invalid-border-color);

		&:is(:active, :focus) {
			--pico-border-color: var(--pico-form-element-invalid-active-border-color);
		}

		&:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
			--pico-box-shadow: 0 0 0 var(--pico-outline-width)
				var(--pico-form-element-invalid-focus-color);
		}
	}

	[dir="rtl"]
		:where(input, select, textarea):not([type="checkbox"], [type="radio"]):is(
			[aria-invalid],
			[aria-invalid="true"],
			[aria-invalid="false"]
		) {
		background-position: center left 0.75rem;
	}

	input::placeholder,
	textarea::placeholder,
	select:invalid {
		color: var(--pico-form-element-placeholder-color);
		opacity: 1;
	}

	input:not([type="checkbox"], [type="radio"]),
	select,
	textarea {
		margin-bottom: var(--pico-spacing);
	}

	select:not([multiple], [size]) {
		padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
		padding-left: var(--pico-form-element-spacing-horizontal);
		padding-inline-start: var(--pico-form-element-spacing-horizontal);
		padding-inline-end: calc(
			var(--pico-form-element-spacing-horizontal) +
			1.5rem
		);
		background-image: var(--pico-icon-chevron);
		background-position: center right 0.75rem;
		background-size: 1rem auto;
		background-repeat: no-repeat;
	}

	select[multiple] option:checked {
		background: var(--pico-form-element-selected-background-color);
		color: var(--pico-form-element-color);
	}

	[dir="rtl"] select:not([multiple], [size]) {
		background-position: center left 0.75rem;
	}

	textarea {
		display: block;
		resize: vertical;

		&[aria-invalid] {
			--pico-icon-height: calc(
				1rem *
				var(--pico-line-height) +
				var(--pico-form-element-spacing-vertical) *
				2 +
				var(--pico-border-width) *
				2
			);
			background-position: top right 0.75rem;
			background-size: 1rem var(--pico-icon-height);
		}
	}

	:where(input, select, textarea, fieldset, .grid) + small {
		display: block;
		width: 100%;
		margin-top: calc(var(--pico-spacing) * -0.75);
		margin-bottom: var(--pico-spacing);
		color: var(--pico-muted-color);
	}

	:where(input, select, textarea, fieldset, .grid)[aria-invalid="false"]
		+ small {
		color: var(--pico-ins-color);
	}

	:where(input, select, textarea, fieldset, .grid)[aria-invalid="true"]
		+ small {
		color: var(--pico-del-color);
	}

	label > :where(input, select, textarea) {
		margin-top: calc(var(--pico-spacing) * 0.25);
	}

	label:has([type="checkbox"], [type="radio"]) {
		width: fit-content;
		cursor: pointer;
	}

	[type="checkbox"],
	[type="radio"] {
		appearance: none;
		width: 1.5em;
		height: 1.5em;
		margin-top: -0.1875em;
		margin-inline-end: 0.5em;
		border-width: var(--pico-border-width);
		vertical-align: middle;
		cursor: pointer;

		&:checked,
		&:checked:active,
		&:checked:focus {
			--pico-background-color: var(--pico-primary-background);
			--pico-border-color: var(--pico-primary-border);
			background-image: var(--pico-icon-checkbox);
			background-position: center;
			background-size: 0.875em auto;
			background-repeat: no-repeat;
		}
	}

	[type="checkbox"] ~ label,
	[type="radio"] ~ label {
		display: inline-block;
		margin-bottom: 0;
		cursor: pointer;

		&:not(:last-of-type) {
			margin-inline-end: 1em;
		}
	}

	[type="checkbox"]:indeterminate {
		--pico-background-color: var(--pico-primary-background);
		--pico-border-color: var(--pico-primary-border);
		background-image: var(--pico-icon-minus);
		background-position: center;
		background-size: 0.75em auto;
		background-repeat: no-repeat;
	}

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

		&:checked,
		&:checked:active,
		&:checked:focus {
			--pico-background-color: var(--pico-primary-inverse);
			border-width: 0.35em;
			background-image: none;
		}
	}

	[type="checkbox"][role="switch"] {
		--pico-background-color: var(--pico-switch-background-color);
		--pico-color: var(--pico-switch-color);
		width: 2.75em;
		height: 1.5em;
		border: var(--pico-border-width) solid var(--pico-border-color);
		border-radius: 1.5em;
		background-color: var(--pico-background-color);
		line-height: 1.5em;

		&:not([aria-invalid]) {
			--pico-border-color: var(--pico-switch-background-color);
		}

		&::before {
			display: block;
			aspect-ratio: 1;
			height: 100%;
			border-radius: 50%;
			background-color: var(--pico-color);
			box-shadow: var(--pico-switch-thumb-box-shadow);
			content: "";
			transition: margin 0.1s ease-in-out;
		}

		&:focus {
			--pico-background-color: var(--pico-switch-background-color);
			--pico-border-color: var(--pico-switch-background-color);
		}

		&:checked {
			--pico-background-color: var(--pico-switch-checked-background-color);
			--pico-border-color: var(--pico-switch-checked-background-color);
			background-image: none;

			&::before {
				margin-inline-start: calc(2.75em - 1.5em);
			}
		}

		&[disabled] {
			--pico-background-color: var(--pico-border-color);
		}
	}

	[type="checkbox"][aria-invalid="false"]:checked,
	[type="checkbox"][aria-invalid="false"]:checked:active,
	[type="checkbox"][aria-invalid="false"]:checked:focus,
	[type="checkbox"][role="switch"][aria-invalid="false"]:checked,
	[type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
	[type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
		--pico-background-color: var(--pico-form-element-valid-border-color);
	}

	[type="checkbox"]:checked[aria-invalid="true"],
	[type="checkbox"]:checked:active[aria-invalid="true"],
	[type="checkbox"]:checked:focus[aria-invalid="true"],
	[type="checkbox"][role="switch"]:checked[aria-invalid="true"],
	[type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
	[type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
		--pico-background-color: var(--pico-form-element-invalid-border-color);
	}

	[type="checkbox"][aria-invalid="false"]:checked,
	[type="checkbox"][aria-invalid="false"]:checked:active,
	[type="checkbox"][aria-invalid="false"]:checked:focus,
	[type="radio"][aria-invalid="false"]:checked,
	[type="radio"][aria-invalid="false"]:checked:active,
	[type="radio"][aria-invalid="false"]:checked:focus,
	[type="checkbox"][role="switch"][aria-invalid="false"]:checked,
	[type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
	[type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
		--pico-border-color: var(--pico-form-element-valid-border-color);
	}

	[type="checkbox"]:checked[aria-invalid="true"],
	[type="checkbox"]:checked:active[aria-invalid="true"],
	[type="checkbox"]:checked:focus[aria-invalid="true"],
	[type="radio"]:checked[aria-invalid="true"],
	[type="radio"]:checked:active[aria-invalid="true"],
	[type="radio"]:checked:focus[aria-invalid="true"],
	[type="checkbox"][role="switch"]:checked[aria-invalid="true"],
	[type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
	[type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
		--pico-border-color: var(--pico-form-element-invalid-border-color);
	}

	[type="color"] {
		&::-webkit-color-swatch-wrapper {
			padding: 0;
		}

		&::-moz-focus-inner {
			padding: 0;
		}

		&::-webkit-color-swatch {
			border: 0;
			border-radius: calc(var(--pico-border-radius) * 0.5);
		}

		&::-moz-color-swatch {
			border: 0;
			border-radius: calc(var(--pico-border-radius) * 0.5);
		}
	}

	input:not(
			[type="checkbox"],
			[type="radio"],
			[type="range"],
			[type="file"]
		):is(
			[type="date"],
			[type="datetime-local"],
			[type="month"],
			[type="time"],
			[type="week"]
		) {
		--pico-icon-position: 0.75rem;
		--pico-icon-width: 1rem;
		padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position));
		background-image: var(--pico-icon-date);
		background-position: center right var(--pico-icon-position);
		background-size: var(--pico-icon-width) auto;
		background-repeat: no-repeat;
	}

	input:not(
			[type="checkbox"],
			[type="radio"],
			[type="range"],
			[type="file"]
		)[type="time"] {
		background-image: var(--pico-icon-time);
	}

	[type="date"]::-webkit-calendar-picker-indicator,
	[type="datetime-local"]::-webkit-calendar-picker-indicator,
	[type="month"]::-webkit-calendar-picker-indicator,
	[type="time"]::-webkit-calendar-picker-indicator,
	[type="week"]::-webkit-calendar-picker-indicator {
		width: var(--pico-icon-width);
		margin-right: calc(var(--pico-icon-width) * -1);
		margin-left: var(--pico-icon-position);
		opacity: 0;
	}

	@-moz-document url-prefix() {
		[type="date"],
		[type="datetime-local"],
		[type="month"],
		[type="time"],
		[type="week"] {
			padding-right: var(--pico-form-element-spacing-horizontal) !important;
			background-image: none !important;
		}
	}

	[dir="rtl"]
		:is(
			[type="date"],
			[type="datetime-local"],
			[type="month"],
			[type="time"],
			[type="week"]
		) {
		text-align: right;
	}

	[type="file"] {
		--pico-color: var(--pico-muted-color);
		margin-left: calc(var(--pico-outline-width) * -1);
		padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
		padding-left: var(--pico-outline-width);
		border: 0;
		border-radius: 0;
		background: none;

		&::file-selector-button {
			margin-right: calc(var(--pico-spacing) / 2);
			padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
				var(--pico-form-element-spacing-horizontal);
		}

		&:is(:hover, :active, :focus)::file-selector-button {
			--pico-background-color: var(--pico-secondary-hover-background);
			--pico-border-color: var(--pico-secondary-hover-border);
		}

		&:focus::file-selector-button {
			--pico-box-shadow:
				var(--pico-button-hover-box-shadow, 0 0 0 transparent),
				0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
		}
	}

	[type="range"] {
		appearance: none;
		width: 100%;
		height: 1.25rem;
		background: none;

		&::-webkit-slider-runnable-track {
			width: 100%;
			height: 0.375rem;
			border-radius: var(--pico-border-radius);
			background-color: var(--pico-range-border-color);
			transition:
				background-color var(--pico-transition),
				box-shadow var(--pico-transition);
		}

		&::-moz-range-track {
			width: 100%;
			height: 0.375rem;
			border-radius: var(--pico-border-radius);
			background-color: var(--pico-range-border-color);
			transition:
				background-color var(--pico-transition),
				box-shadow var(--pico-transition);
		}

		&::-webkit-slider-thumb {
			appearance: none;
			width: 1.25rem;
			height: 1.25rem;
			margin-top: -0.4375rem;
			border: 2px solid var(--pico-range-thumb-border-color);
			border-radius: 50%;
			background-color: var(--pico-range-thumb-color);
			cursor: pointer;
			transition:
				background-color var(--pico-transition),
				transform var(--pico-transition);
		}

		&::-moz-range-thumb {
			appearance: none;
			width: 1.25rem;
			height: 1.25rem;
			border: 2px solid var(--pico-range-thumb-border-color);
			border-radius: 50%;
			background-color: var(--pico-range-thumb-color);
			cursor: pointer;
			transition:
				background-color var(--pico-transition),
				transform var(--pico-transition);
		}

		&:active,
		&:focus-within {
			--pico-range-border-color: var(--pico-range-active-border-color);
			--pico-range-thumb-color: var(--pico-range-thumb-active-color);
		}

		&:active {
			&::-webkit-slider-thumb {
				transform: scale(1.25);
			}

			&::-moz-range-thumb {
				transform: scale(1.25);
			}
		}
	}

	input:not(
			[type="checkbox"],
			[type="radio"],
			[type="range"],
			[type="file"]
		)[type="search"] {
		padding-inline-start: calc(
			var(--pico-form-element-spacing-horizontal) +
			1.75rem
		);
		background-image: var(--pico-icon-search);
		background-position: center left
			calc(var(--pico-form-element-spacing-horizontal) + 0.125rem);
		background-size: 1rem auto;
		background-repeat: no-repeat;

		&[aria-invalid] {
			padding-inline-start: calc(
				var(--pico-form-element-spacing-horizontal) +
				1.75rem
			);
			background-position:
				center left 1.125rem,
				center right 0.75rem;
		}

		&[aria-invalid="false"] {
			background-image: var(--pico-icon-search), var(--pico-icon-valid);
		}

		&[aria-invalid="true"] {
			background-image: var(--pico-icon-search), var(--pico-icon-invalid);
		}
	}

	[dir="rtl"]
		:where(input):not(
			[type="checkbox"],
			[type="radio"],
			[type="range"],
			[type="file"]
		)[type="search"] {
		background-position: center right 1.125rem;

		&[aria-invalid] {
			background-position:
				center right 1.125rem,
				center left 0.75rem;
		}
	}

	progress,
	[type="checkbox"],
	[type="radio"],
	[type="range"] {
		accent-color: var(--pico-primary);
	}
}
@layer buttons {
	button {
		margin: 0;
		overflow: visible;
		font-family: inherit;
		text-transform: none;
	}

	button,
	[type="submit"],
	[type="reset"],
	[type="button"] {
		appearance: button;
	}

	:where(
			button,
			[type="submit"],
			[type="reset"],
			[type="button"],
			[type="file"]::file-selector-button,
			[role="button"]
		) {
		--pico-background-color: var(--pico-primary-background);
		--pico-border-color: var(--pico-primary-border);
		--pico-color: var(--pico-primary-inverse);
		--pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 transparent);
		padding: var(--pico-form-element-spacing-vertical)
			var(--pico-form-element-spacing-horizontal);
		border: var(--pico-border-width) solid var(--pico-border-color);
		border-radius: var(--pico-border-radius);
		outline: none;
		background-color: var(--pico-background-color);
		box-shadow: var(--pico-box-shadow);
		color: var(--pico-color);
		font-weight: var(--pico-font-weight);
		font-size: 1rem;
		line-height: var(--pico-line-height);
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		user-select: none;
		transition:
			background-color var(--pico-transition),
			border-color var(--pico-transition),
			color var(--pico-transition),
			box-shadow var(--pico-transition);

		&:is(:hover, :active, :focus, [aria-current]:not([aria-current="false"])) {
			--pico-background-color: var(--pico-primary-hover-background);
			--pico-border-color: var(--pico-primary-hover-border);
			--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 transparent);
			--pico-color: var(--pico-primary-inverse);
		}

		&:focus {
			--pico-box-shadow:
				var(--pico-button-hover-box-shadow, 0 0 0 transparent),
				0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
		}
	}

	[type="submit"],
	[type="reset"],
	[type="button"] {
		margin-bottom: var(--pico-spacing);
	}

	:where(button, [type="submit"], [type="button"], [role="button"]).secondary,
	[type="reset"],
	[type="file"]::file-selector-button {
		--pico-background-color: var(--pico-secondary-background);
		--pico-border-color: var(--pico-secondary-border);
		--pico-color: var(--pico-secondary-inverse);
		cursor: pointer;

		&:is(:hover, :active, :focus, [aria-current]:not([aria-current="false"])) {
			--pico-background-color: var(--pico-secondary-hover-background);
			--pico-border-color: var(--pico-secondary-hover-border);
			--pico-color: var(--pico-secondary-inverse);
		}

		&:focus {
			--pico-box-shadow:
				var(--pico-button-hover-box-shadow, 0 0 0 transparent),
				0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
		}
	}

	:where(button, [type="submit"], [type="button"], [role="button"]).contrast {
		--pico-background-color: var(--pico-contrast-background);
		--pico-border-color: var(--pico-contrast-border);
		--pico-color: var(--pico-contrast-inverse);

		&:is(:hover, :active, :focus, [aria-current]:not([aria-current="false"])) {
			--pico-background-color: var(--pico-contrast-hover-background);
			--pico-border-color: var(--pico-contrast-hover-border);
			--pico-color: var(--pico-contrast-inverse);
		}

		&:focus {
			--pico-box-shadow:
				var(--pico-button-hover-box-shadow, 0 0 0 transparent),
				0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
		}
	}

	:where(button, [type="submit"], [type="button"], [role="button"]).outline,
	[type="reset"].outline {
		--pico-background-color: transparent;
		--pico-color: var(--pico-primary);
		--pico-border-color: var(--pico-primary);

		&:is(:hover, :active, :focus, [aria-current]:not([aria-current="false"])) {
			--pico-background-color: transparent;
			--pico-color: var(--pico-primary-hover);
			--pico-border-color: var(--pico-primary-hover);
		}
	}

	:where(
			button,
			[type="submit"],
			[type="button"],
			[role="button"]
		).outline.secondary,
	[type="reset"].outline {
		--pico-color: var(--pico-secondary);
		--pico-border-color: var(--pico-secondary);

		&:is(:hover, :active, :focus, [aria-current]:not([aria-current="false"])) {
			--pico-color: var(--pico-secondary-hover);
			--pico-border-color: var(--pico-secondary-hover);
		}
	}

	:where(
			button,
			[type="submit"],
			[type="button"],
			[role="button"]
		).outline.contrast {
		--pico-color: var(--pico-contrast);
		--pico-border-color: var(--pico-contrast);

		&:is(:hover, :active, :focus, [aria-current]:not([aria-current="false"])) {
			--pico-color: var(--pico-contrast-hover);
			--pico-border-color: var(--pico-contrast-hover);
		}
	}

	:where(
			button,
			[type="submit"],
			[type="reset"],
			[type="button"],
			[role="button"]
		)[disabled],
	:where(fieldset[disabled])
		:is(
			button,
			[type="submit"],
			[type="button"],
			[type="reset"],
			[role="button"]
		) {
		opacity: 0.5;
		pointer-events: none;
	}

	details summary[role="button"]:not(.outline)::after {
		filter: brightness(0) invert(1);
	}

	[aria-busy="true"]:not(input, select, textarea):is(
			button,
			[type="submit"],
			[type="button"],
			[type="reset"],
			[role="button"]
		):not(.outline)::before {
		filter: brightness(0) invert(1);
	}

	[role="search"]:has(
			button.secondary:focus,
			[type="submit"].secondary:focus,
			[type="button"].secondary:focus,
			[role="button"].secondary:focus
		),
	[role="group"]:has(
			button.secondary:focus,
			[type="submit"].secondary:focus,
			[type="button"].secondary:focus,
			[role="button"].secondary:focus
		) {
		--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
			var(--pico-secondary-focus);
	}

	[role="search"]:has(
			button.contrast:focus,
			[type="submit"].contrast:focus,
			[type="button"].contrast:focus,
			[role="button"].contrast:focus
		),
	[role="group"]:has(
			button.contrast:focus,
			[type="submit"].contrast:focus,
			[type="button"].contrast:focus,
			[role="button"].contrast:focus
		) {
		--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
			var(--pico-contrast-focus);
	}

	[role="search"] button,
	[role="search"] [type="submit"],
	[role="search"] [type="button"],
	[role="search"] [role="button"],
	[role="group"] button,
	[role="group"] [type="submit"],
	[role="group"] [type="button"],
	[role="group"] [role="button"] {
		--pico-form-element-spacing-horizontal: 2rem;
	}
}
@layer components {
	/**
	 * Accordion (<details>)
	 */

	details {
		display: block;
		margin-bottom: var(--pico-spacing);

		summary {
			line-height: 1rem;
			list-style-type: none;
			cursor: pointer;
			transition: color var(--pico-transition);

			&:not([role]) {
				color: var(--pico-accordion-close-summary-color);
			}

			&::-webkit-details-marker {
				display: none;
			}

			&::marker {
				display: none;
			}

			&::-moz-list-bullet {
				list-style-type: none;
			}

			&::after {
				display: block;
				width: 1rem;
				height: 1rem;
				margin-inline-start: calc(var(--pico-spacing, 1rem) * 0.5);
				float: right;
				transform: rotate(-90deg);
				background-color: var(--pico-muted-color);
				mask-image: var(--pico-icon-chevron-mask);
				mask-size: 1rem auto;
				mask-repeat: no-repeat;
				mask-position: right center;
				content: "";
				transition: transform var(--pico-transition);
			}

			&:focus {
				outline: none;

				&:not([role]) {
					color: var(--pico-accordion-active-summary-color);
				}
			}

			&:focus-visible:not([role]) {
				outline: var(--pico-outline-width) solid var(--pico-primary-focus);
				outline-offset: calc(var(--pico-spacing, 1rem) * 0.5);
				color: var(--pico-primary);
			}

			&[role="button"] {
				width: 100%;
				text-align: left;

				&::after {
					height: calc(1rem * var(--pico-line-height, 1.5));
				}
			}
		}

		&[open] > summary {
			margin-bottom: var(--pico-spacing);

			&:not([role]):not(:focus) {
				color: var(--pico-accordion-open-summary-color);
			}

			&::after {
				transform: rotate(0);
			}
		}
	}

	[dir="rtl"] details {
		summary {
			text-align: right;

			&::after {
				float: left;
				background-position: left center;
			}
		}
	}

	/**
	 * Card (<article>)
	 */

	article {
		margin-bottom: var(--pico-block-spacing-vertical);
		padding: var(--pico-block-spacing-vertical)
			var(--pico-block-spacing-horizontal);
		border-radius: var(--pico-border-radius);
		background: var(--pico-card-background-color);
		box-shadow: var(--pico-card-box-shadow);

		> header,
		> footer {
			margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
			margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
			padding: calc(var(--pico-block-spacing-vertical) * 0.66)
				var(--pico-block-spacing-horizontal);
			background-color: var(--pico-card-sectioning-background-color);
		}

		> header {
			margin-top: calc(var(--pico-block-spacing-vertical) * -1);
			margin-bottom: var(--pico-block-spacing-vertical);
			border-bottom: var(--pico-border-width) solid
				var(--pico-card-border-color);
			border-top-right-radius: var(--pico-border-radius);
			border-top-left-radius: var(--pico-border-radius);
		}

		> footer {
			margin-top: var(--pico-block-spacing-vertical);
			margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
			border-top: var(--pico-border-width) solid var(--pico-card-border-color);
			border-bottom-right-radius: var(--pico-border-radius);
			border-bottom-left-radius: var(--pico-border-radius);
		}
	}

	/**
	 * Dropdown (details.dropdown)
	 */

	details.dropdown {
		position: relative;
		border-bottom: none;

		> summary::after,
		> button::after,
		> a::after {
			display: block;
			width: 1rem;
			height: calc(1rem * var(--pico-line-height, 1.5));
			margin-inline-start: 0.25rem;
			float: right;
			transform: rotate(0deg) translateX(0.2rem);
			background-color: var(--pico-muted-color);
			mask-image: var(--pico-icon-chevron-mask);
			mask-size: 1rem auto;
			mask-repeat: no-repeat;
			mask-position: right center;
			content: "";
		}

		> summary:not([role]) {
			height: calc(
				1rem *
				var(--pico-line-height) +
				var(--pico-form-element-spacing-vertical) *
				2 +
				var(--pico-border-width) *
				2
			);
			padding: var(--pico-form-element-spacing-vertical)
				var(--pico-form-element-spacing-horizontal);
			border: var(--pico-border-width) solid
				var(--pico-form-element-border-color);
			border-radius: var(--pico-border-radius);
			background-color: var(--pico-form-element-background-color);
			color: var(--pico-form-element-placeholder-color);
			line-height: inherit;
			cursor: pointer;
			user-select: none;
			transition:
				background-color var(--pico-transition),
				border-color var(--pico-transition),
				color var(--pico-transition),
				box-shadow var(--pico-transition);

			&:active,
			&:focus {
				border-color: var(--pico-form-element-active-border-color);
				background-color: var(--pico-form-element-active-background-color);
			}

			&:focus {
				box-shadow: 0 0 0 var(--pico-outline-width)
					var(--pico-form-element-focus-color);
			}

			&:focus-visible {
				outline: none;
			}

			&[aria-invalid="false"] {
				--pico-form-element-border-color: var(
					--pico-form-element-valid-border-color
				);
				--pico-form-element-active-border-color: var(
					--pico-form-element-valid-focus-color
				);
				--pico-form-element-focus-color: var(
					--pico-form-element-valid-focus-color
				);
			}

			&[aria-invalid="true"] {
				--pico-form-element-border-color: var(
					--pico-form-element-invalid-border-color
				);
				--pico-form-element-active-border-color: var(
					--pico-form-element-invalid-focus-color
				);
				--pico-form-element-focus-color: var(
					--pico-form-element-invalid-focus-color
				);
			}
		}

		> summary + ul {
			display: flex;
			z-index: 99;
			position: absolute;
			left: 0;
			flex-direction: column;
			width: 100%;
			min-width: fit-content;
			margin: 0;
			margin-top: var(--pico-outline-width);
			padding: 0;
			border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
			border-radius: var(--pico-border-radius);
			background-color: var(--pico-dropdown-background-color);
			box-shadow: var(--pico-dropdown-box-shadow);
			color: var(--pico-dropdown-color);
			white-space: nowrap;
			opacity: 0;
			transition:
				opacity var(--pico-transition),
				transform 0s ease-in-out 1s;

			&[dir="rtl"] {
				right: 0;
				left: auto;
			}

			li {
				width: 100%;
				margin-bottom: 0;
				padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
					var(--pico-form-element-spacing-horizontal);
				list-style: none;

				&:first-of-type {
					margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
				}

				&:last-of-type {
					margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
				}

				a {
					display: block;
					margin: calc(var(--pico-form-element-spacing-vertical) * -0.5)
						calc(var(--pico-form-element-spacing-horizontal) * -1);
					padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
						var(--pico-form-element-spacing-horizontal);
					overflow: hidden;
					border-radius: 0;
					color: var(--pico-dropdown-color);
					text-decoration: none;
					text-overflow: ellipsis;

					&:is(:hover, :focus, :active, :focus-visible),
					&[aria-current]:not([aria-current="false"]) {
						background-color: var(--pico-dropdown-hover-background-color);
					}
				}

				label {
					width: 100%;
				}

				&:has(label):hover {
					background-color: var(--pico-dropdown-hover-background-color);
				}
			}
		}

		&[open] {
			> summary {
				margin-bottom: 0;

				&::before {
					display: block;
					z-index: 1;
					position: fixed;
					width: 100vw;
					height: 100vh;
					inset: 0;
					background: none;
					content: "";
					cursor: default;
				}

				& + ul {
					transform: scaleY(1);
					opacity: 1;
					transition:
						opacity var(--pico-transition),
						transform 0s ease-in-out 0s;
				}
			}
		}
	}

	nav details.dropdown {
		display: inline;
		margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;

		> summary::after {
			transform: rotate(0deg) translateX(0rem);
		}

		> summary:not([role]) {
			height: calc(
				1rem *
				var(--pico-line-height) +
				var(--pico-nav-link-spacing-vertical) *
				2
			);
			padding: calc(
					var(--pico-nav-link-spacing-vertical) -
					var(--pico-border-width) *
					2
				)
				var(--pico-nav-link-spacing-horizontal);

			&:focus-visible {
				box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
			}
		}
	}

	label > details.dropdown {
		margin-top: calc(var(--pico-spacing) * 0.25);
	}

	/**
	 * Group ([role="group"], [role="search"])
	 */

	:where([role="search"], [role="group"]) {
		display: inline-flex;
		position: relative;
		width: 100%;
		margin-bottom: var(--pico-spacing);
		border-radius: var(--pico-border-radius);
		box-shadow: var(--pico-group-box-shadow, 0 0 0 transparent);
		vertical-align: middle;
		transition: box-shadow var(--pico-transition);

		> *,
		input:not([type="checkbox"], [type="radio"]),
		select {
			position: relative;
			flex: 1 1 auto;
			margin-bottom: 0;
		}

		> *:not(:first-child),
		input:not([type="checkbox"], [type="radio"]):not(:first-child),
		select:not(:first-child) {
			margin-left: 0;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}

		> *:not(:last-child),
		input:not([type="checkbox"], [type="radio"]):not(:last-child),
		select:not(:last-child) {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		> *:focus,
		input:not([type="checkbox"], [type="radio"]):focus,
		select:focus {
			z-index: 2;
		}

		button:not(:first-child),
		[type="submit"]:not(:first-child),
		[type="reset"]:not(:first-child),
		[type="button"]:not(:first-child),
		[role="button"]:not(:first-child),
		input:not([type="checkbox"], [type="radio"]):not(:first-child),
		select:not(:first-child) {
			margin-left: calc(var(--pico-border-width) * -1);
		}

		button,
		[type="submit"],
		[type="reset"],
		[type="button"],
		[role="button"] {
			width: auto;
		}

		button:focus,
		[type="submit"]:focus,
		[type="reset"]:focus,
		[type="button"]:focus,
		[role="button"]:focus {
			box-shadow: none;
		}
	}

	@supports selector(:has(*)) {
		:where([role="search"], [role="group"]):has(
				button:focus,
				[type="submit"]:focus,
				[type="button"]:focus,
				[role="button"]:focus
			) {
			--pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);

			input:not([type="checkbox"], [type="radio"]),
			select {
				border-color: transparent;
			}
		}

		:where([role="search"], [role="group"]):has(
				input:not([type="submit"], [type="button"]):focus,
				select:focus
			) {
			--pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);

			button,
			[type="submit"],
			[type="button"],
			[role="button"] {
				--pico-button-box-shadow: 0 0 0 var(--pico-border-width)
					var(--pico-primary-border);
				--pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width)
					var(--pico-primary-hover-border);
			}
		}
	}

	[role="search"] > *:first-child {
		border-top-left-radius: 5rem;
		border-bottom-left-radius: 5rem;
	}

	[role="search"] > *:last-child {
		border-top-right-radius: 5rem;
		border-bottom-right-radius: 5rem;
	}

	/**
	 * Loading ([aria-busy=true])
	 */

	[aria-busy="true"]:not(input, select, textarea, html, form) {
		white-space: nowrap;

		&::before {
			display: inline-block;
			width: 1em;
			height: 1em;
			background-color: var(--pico-muted-color);
			mask-image: var(--pico-icon-loading-mask);
			mask-size: 1em auto;
			mask-repeat: no-repeat;
			content: "";
			vertical-align: -0.125em;
		}

		&:not(:empty)::before {
			margin-inline-end: calc(var(--pico-spacing) * 0.5);
		}

		&:empty {
			text-align: center;
		}
	}

	button[aria-busy="true"],
	[type="submit"][aria-busy="true"],
	[type="button"][aria-busy="true"],
	[type="reset"][aria-busy="true"],
	[role="button"][aria-busy="true"],
	a[aria-busy="true"] {
		pointer-events: none;
	}

	/**
	 * Modal (<dialog>)
	 */

	:root,
	:host {
		--pico-scrollbar-width: 0px;
	}

	dialog {
		display: flex;
		z-index: 999;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		align-items: center;
		justify-content: center;
		width: inherit;
		min-width: 100%;
		height: inherit;
		min-height: 100%;
		padding: 0;
		border: 0;
		-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
		backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
		background-color: var(--pico-modal-overlay-background-color);
		color: var(--pico-color);

		> article {
			width: 100%;
			max-height: calc(100vh - var(--pico-spacing) * 2);
			margin: var(--pico-spacing);
			overflow: auto;

			> header {
				> * {
					margin-bottom: 0;
				}

				.close,
				:is(a, button)[rel="prev"] {
					margin: 0;
					margin-left: var(--pico-spacing);
					padding: 0;
					float: right;
				}
			}

			> footer {
				text-align: right;

				button,
				[role="button"] {
					margin-bottom: 0;

					&:not(:first-of-type) {
						margin-left: calc(var(--pico-spacing) * 0.5);
					}
				}
			}

			.close,
			:is(a, button)[rel="prev"] {
				display: block;
				width: 1rem;
				height: 1rem;
				margin-top: calc(var(--pico-spacing) * -1);
				margin-bottom: var(--pico-spacing);
				margin-left: auto;
				border: none;
				background-color: var(--pico-muted-color);
				mask-image: var(--pico-icon-close-mask);
				mask-size: auto 1rem;
				mask-repeat: no-repeat;
				mask-position: center;
				opacity: 0.5;
				transition: opacity var(--pico-transition);

				&:is(
						[aria-current]:not([aria-current="false"]),
						:hover,
						:active,
						:focus
					) {
					opacity: 1;
				}
			}
		}

		&:not([open]),
		&[open="false"] {
			display: none;
		}
	}

	@media (min-width: 576px) {
		dialog > article {
			max-width: 510px;
		}
	}

	@media (min-width: 768px) {
		dialog > article {
			max-width: 700px;
		}
	}

	.modal-is-open {
		padding-right: var(--pico-scrollbar-width, 0px);
		overflow: hidden;
		pointer-events: none;
		touch-action: none;

		dialog {
			pointer-events: auto;
			touch-action: auto;
		}
	}

	:where(.modal-is-opening, .modal-is-closing) {
		dialog,
		dialog > article {
			animation-duration: 0.2s;
			animation-timing-function: ease-in-out;
			animation-fill-mode: both;
		}

		dialog {
			animation-duration: 0.8s;
			animation-name: modal-overlay;

			> article {
				animation-delay: 0.2s;
				animation-name: modal;
			}
		}
	}

	.modal-is-closing {
		dialog,
		dialog > article {
			animation-delay: 0s;
			animation-direction: reverse;
		}
	}

	@keyframes modal-overlay {
		from {
			-webkit-backdrop-filter: none;
			backdrop-filter: none;
			background-color: transparent;
		}
	}

	@keyframes modal {
		from {
			transform: translateY(-100%);
			opacity: 0;
		}
	}

	/**
	 * Nav
	 */

	:where(nav li)::before {
		float: left;
		content: "\200B";
	}

	nav {
		display: flex;
		justify-content: space-between;
		overflow: visible;

		&,
		ul {
			display: flex;
		}

		ol,
		ul {
			align-items: center;
			margin-bottom: 0;
			padding: 0;
			list-style: none;

			&:first-of-type {
				margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
			}

			&:last-of-type {
				margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
			}
		}

		li {
			display: inline-block;
			margin: 0;
			padding: var(--pico-nav-element-spacing-vertical)
				var(--pico-nav-element-spacing-horizontal);

			:where(a, [role="link"]) {
				display: inline-block;
				margin: calc(var(--pico-nav-link-spacing-vertical) * -1)
					calc(var(--pico-nav-link-spacing-horizontal) * -1);
				padding: var(--pico-nav-link-spacing-vertical)
					var(--pico-nav-link-spacing-horizontal);
				border-radius: var(--pico-border-radius);

				&:not(:hover) {
					text-decoration: none;
				}
			}

			button,
			[role="button"],
			[type="button"],
			input:not(
					[type="checkbox"],
					[type="radio"],
					[type="range"],
					[type="file"]
				),
			select {
				height: auto;
				margin-right: inherit;
				margin-bottom: 0;
				margin-left: inherit;
				padding: calc(
						var(--pico-nav-link-spacing-vertical) -
						var(--pico-border-width) *
						2
					)
					var(--pico-nav-link-spacing-horizontal);
			}
		}

		&[aria-label="breadcrumb"] {
			align-items: center;
			justify-content: start;

			ul li {
				&:not(:first-child) {
					margin-inline-start: var(--pico-nav-link-spacing-horizontal);

					&:not(:last-child)::after {
						display: inline-block;
						position: absolute;
						width: calc(var(--pico-nav-link-spacing-horizontal) * 4);
						margin: 0 calc(var(--pico-nav-link-spacing-horizontal) * -1);
						content: var(--pico-nav-breadcrumb-divider);
						color: var(--pico-muted-color);
						text-align: center;
						text-decoration: none;
						white-space: nowrap;
					}
				}

				a {
					margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 0;
					margin-inline-start: calc(
						var(--pico-nav-link-spacing-horizontal) *
						-1
					);

					&[aria-current]:not([aria-current="false"]) {
						background-color: transparent;
						color: inherit;
						text-decoration: none;
						pointer-events: none;
					}
				}
			}
		}
	}

	aside {
		nav,
		ol,
		ul,
		li {
			display: block;
		}

		li {
			padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5)
				var(--pico-nav-element-spacing-horizontal);

			a {
				display: block;
			}

			[role="button"] {
				margin: inherit;
			}
		}
	}

	[dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child)::after {
		content: "\\";
	}

	/**
	 * Progress
	 */

	progress {
		display: inline-block;
		appearance: none;
		width: 100%;
		height: 0.5rem;
		margin-bottom: calc(var(--pico-spacing) * 0.5);
		overflow: hidden;
		border: 0;
		border-radius: var(--pico-border-radius);
		background-color: var(--pico-progress-background-color);
		color: var(--pico-progress-color);
		vertical-align: baseline;

		&::-webkit-progress-bar {
			border-radius: var(--pico-border-radius);
			background: none;
		}

		&[value]::-webkit-progress-value {
			background-color: var(--pico-progress-color);
			-webkit-transition: inline-size var(--pico-transition);
			transition: inline-size var(--pico-transition);
		}

		&::-moz-progress-bar {
			background-color: var(--pico-progress-color);
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		progress:indeterminate {
			background:
				var(--pico-progress-background-color)
				linear-gradient(
					to right,
					var(--pico-progress-color) 30%,
					var(--pico-progress-background-color) 30%
				)
				top left / 150% 150% no-repeat;
			animation: progress-indeterminate 1s linear infinite;

			&[value]::-webkit-progress-value {
				background-color: transparent;
			}

			&::-moz-progress-bar {
				background-color: transparent;
			}
		}

		[dir="rtl"] progress:indeterminate {
			animation-direction: reverse;
		}
	}

	@keyframes progress-indeterminate {
		0% {
			background-position: 200% 0;
		}
		100% {
			background-position: -200% 0;
		}
	}
}
@layer utilities {
	/**
	 * Overflow utility
	 * Use: <div class="overflow-auto">...</div>
	 */

	.overflow-auto {
		overflow: auto;
	}

	/**
	 * Accessibility & User interaction
	 */

	[aria-controls] {
		cursor: pointer;
	}

	[aria-disabled="true"],
	[disabled] {
		cursor: not-allowed;
	}

	[aria-hidden="false"][hidden] {
		display: initial;
	}

	[aria-hidden="false"][hidden]:not(:focus) {
		clip: rect(0, 0, 0, 0);
		position: absolute;
	}

	a,
	area,
	button,
	input,
	label,
	select,
	summary,
	textarea,
	[tabindex] {
		-ms-touch-action: manipulation;
	}

	[dir="rtl"] {
		direction: rtl;
	}

	/**
	 * Reduce Motion Features
	 */

	@media (prefers-reduced-motion: reduce) {
		*:not([aria-busy="true"]),
		:not([aria-busy="true"])::before,
		:not([aria-busy="true"])::after {
			background-attachment: initial !important;
			animation-duration: 1ms !important;
			animation-delay: -1ms !important;
			animation-iteration-count: 1 !important;
			scroll-behavior: auto !important;
			transition-delay: 0s !important;
			transition-duration: 0s !important;
		}
	}
} /* @layer utilities */
@layer layout {
	/**
	 * Container Query Support
	 */

	.card-container {
		container-type: inline-size;
		container-name: card;
	}
}

@layer components {
	/**
	 * Tag (.tag)
	 */

	.tag {
		display: inline-block;
		padding: 0.25rem 0.5rem;
		border-radius: var(--pico-border-radius);
		background: var(--pico-muted-border-color);
		color: var(--pico-color);
		font-size: 0.75rem;
		font-weight: 500;
		line-height: 1;
		vertical-align: baseline;

		&.primary {
			background: var(--pico-primary-background);
			color: var(--pico-primary-inverse);
		}

		&.secondary {
			background: var(--pico-secondary-background);
			color: var(--pico-secondary-inverse);
		}

		&.contrast {
			background: var(--pico-contrast-background);
			color: var(--pico-contrast-inverse);
		}

		&.success {
			background: var(--pico-success);
			color: white;
		}

		&.warning {
			background: var(--pico-warning);
			color: black;
		}

		&.error {
			background: var(--pico-error);
			color: white;
		}
	}
}

@layer utilities {
	/**
	 * Force light/dark mode on a section
	 * Use: <nav class="pico-dark">...</nav> or <article class="pico-light">...</article>
	 */

	.pico-light,
	.pico-light *,
	.pico-light *::before,
	.pico-light *::after {
		color-scheme: light;
	}

	.pico-light {
		background-color: var(--pico-background-color);
		color: var(--pico-color);
	}

	.pico-dark,
	.pico-dark *,
	.pico-dark *::before,
	.pico-dark *::after {
		color-scheme: dark;
	}

	.pico-dark {
		background-color: var(--pico-background-color);
		color: var(--pico-color);
	}

	/**
	 * Skip link for keyboard navigation
	 * Use: <a href="#main" class="skip-link">Skip to content</a>
	 */

	.skip-link {
		position: absolute;
		top: -100%;
		left: 0;
		z-index: 9999;
		padding: 1rem;
		border-radius: var(--pico-border-radius);
		background: var(--pico-primary-background);
		color: var(--pico-primary-inverse);
		text-decoration: none;
	}

	.skip-link:focus {
		top: 0;
	}

	/**
	 * Screen reader only content
	 * Use: <span class="sr-only">Hidden from view</span>
	 */

	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/**
	 * Icons (inherit text color via mask-image)
	 * Use: <span class="icon icon-search"></span>
	 */

	.icon {
		display: inline-block;
		width: 1em;
		height: 1em;
		background-color: currentColor;
		mask-size: contain;
		mask-repeat: no-repeat;
		mask-position: center;
		vertical-align: -0.15em;
	}

	.icon-arrow-right {
		mask-image: var(--pico-icon-arrow-right);
	}
	.icon-arrow-left {
		mask-image: var(--pico-icon-arrow-left);
	}
	.icon-arrow-up {
		mask-image: var(--pico-icon-arrow-up);
	}
	.icon-arrow-down {
		mask-image: var(--pico-icon-arrow-down);
	}
	.icon-chevron-right {
		mask-image: var(--pico-icon-chevron-right);
	}
	.icon-chevron-left {
		mask-image: var(--pico-icon-chevron-left);
	}
	.icon-chevron-up {
		mask-image: var(--pico-icon-chevron-up);
	}
	.icon-chevron-down {
		mask-image: var(--pico-icon-chevron-down);
	}
	.icon-plus {
		mask-image: var(--pico-icon-plus);
	}
	.icon-minus {
		mask-image: var(--pico-icon-minus);
	}
	.icon-x {
		mask-image: var(--pico-icon-x);
	}
	.icon-check {
		mask-image: var(--pico-icon-check);
	}
	.icon-edit {
		mask-image: var(--pico-icon-edit);
	}
	.icon-trash {
		mask-image: var(--pico-icon-trash);
	}
	.icon-menu {
		mask-image: var(--pico-icon-menu);
	}
	.icon-more {
		mask-image: var(--pico-icon-more);
	}
	.icon-search {
		mask-image: var(--pico-icon-search);
	}
	.icon-filter {
		mask-image: var(--pico-icon-filter);
	}
	.icon-info {
		mask-image: var(--pico-icon-info);
	}
	.icon-warning {
		mask-image: var(--pico-icon-warning);
	}
	.icon-error {
		mask-image: var(--pico-icon-error);
	}
	.icon-success {
		mask-image: var(--pico-icon-success);
	}
	.icon-user {
		mask-image: var(--pico-icon-user);
	}
	.icon-settings {
		mask-image: var(--pico-icon-settings);
	}
	.icon-home {
		mask-image: var(--pico-icon-home);
	}
	.icon-external {
		mask-image: var(--pico-icon-external);
	}
	.icon-sun {
		mask-image: var(--pico-icon-sun);
	}
	.icon-moon {
		mask-image: var(--pico-icon-moon);
	}
	.icon-system {
		mask-image: var(--pico-icon-system);
	}

	/**
	 * Disable Pico styles for a container
	 * Use: <div data-no-pico>...</div>
	 */

	[data-no-pico] {
		color: initial;
	}

	[data-no-pico],
	[data-no-pico] * {
		--pico-font-family: initial;
		--pico-font-size: initial;
		--pico-font-weight: initial;
		--pico-line-height: initial;
		--pico-border-radius: initial;
		--pico-border-width: initial;
		--pico-outline-width: initial;
		--pico-shadow: initial;
		--pico-transition: initial;
		--pico-spacing: initial;
		--pico-typography-spacing-vertical: initial;
		--pico-block-spacing-vertical: initial;
		--pico-block-spacing-horizontal: initial;
		--pico-grid-column-gap: initial;
		--pico-grid-row-gap: initial;
		--pico-form-element-spacing-vertical: initial;
		--pico-form-element-spacing-horizontal: initial;
		--pico-background-color: initial;
		--pico-color: initial;
		--pico-text-selection-color: initial;
		--pico-muted-color: initial;
		--pico-muted-border-color: initial;
		--pico-primary: initial;
		--pico-primary-background: initial;
		--pico-primary-border: initial;
		--pico-primary-hover: initial;
		--pico-primary-hover-background: initial;
		--pico-primary-hover-border: initial;
		--pico-primary-focus: initial;
		--pico-primary-inverse: initial;
		--pico-secondary: initial;
		--pico-secondary-background: initial;
		--pico-secondary-border: initial;
		--pico-secondary-hover: initial;
		--pico-secondary-hover-background: initial;
		--pico-secondary-hover-border: initial;
		--pico-secondary-focus: initial;
		--pico-secondary-inverse: initial;
		--pico-contrast: initial;
		--pico-contrast-background: initial;
		--pico-contrast-border: initial;
		--pico-contrast-hover: initial;
		--pico-contrast-hover-background: initial;
		--pico-contrast-hover-border: initial;
		--pico-contrast-focus: initial;
		--pico-contrast-inverse: initial;
		--pico-box-shadow: initial;
		--pico-button-box-shadow: initial;
		--pico-button-hover-box-shadow: initial;
		--pico-group-box-shadow: initial;
		--pico-group-box-shadow-focus-with-button: initial;
		--pico-group-box-shadow-focus-with-input: initial;
		--pico-form-element-background-color: initial;
		--pico-form-element-border-color: initial;
		--pico-form-element-color: initial;
		--pico-form-element-placeholder-color: initial;
		--pico-form-element-focus-color: initial;
		--pico-form-element-active-background-color: initial;
		--pico-form-element-active-border-color: initial;
	}
}