@layer reset {
	* {
		box-sizing: border-box;
		margin: 0;
	}

	img,
	svg {
		max-width: 100%;
		height: auto;
	}

	:where(.button-reset) {
		font: inherit;
		text-align: center;
		color: currentColor;
		cursor: pointer;
		appearance: none;
		background: none;
		border: none;
		margin: 0;
		padding: 0;
		text-decoration: none;
		display: inline-block;
	}
}

@layer token {
	:root {
		--lightningcss-light: initial;
		--lightningcss-dark: ;
		color-scheme: light;
		--color-text: #241600;
		--color-text-alt: #990087;
		--color-bg: #eed6ff;
		--color-bg-alt: #e9d0fb;
		--color-bg-delete: #cc001b;
		--color-border: #ca80ff;
		--color-border-active: #9500ff;
		--color-error: #ff5757;
		--box-glow: 0 2px 12px -4px #b472e380;
		--shadow-color: 275, 100%, 40%;
		--port-connect-lightness: 70%;
		--port-connect-stroke-color: #180029;
		--color-custom-input-helper-text: #d599ff;
		--color-custom-input-helper-bg: #3c0066;
		--font-body: system-ui, sans-serif;
		--weight-body: 400;
		--font-heading: system-ui, sans-serif;
		--weight-heading: 700;
		--size-gutter: 12px;
		--size-gap: 4px;
		--radius-big: 10px;
		--radius-small: 4px;
		--tile-width: 16rem;
		--button-ui-size: 1.5rem;
		--drop-shadow: 0px 0.2px 0.3px hsla(var(--shadow-color), 0), 0px 4.4px 6.6px hsla(var(--shadow-color), 1);
		--scrollbar-colors: var(--color-border-active) transparent;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--lightningcss-light: ;
			--lightningcss-dark: initial;
			color-scheme: dark;
			--color-text: #fff1db;
			--color-text-alt: #ff66ed;
			--color-bg: #180029;
			--color-bg-alt: #1d042f;
			--color-bg-delete: #c04;
			--color-border: #4a0080;
			--color-border-active: #9500ff;
			--color-error: #a80000;
			--box-glow: 0 2px 12px -4px #5e1c8d80;
			--shadow-color: 275deg, 100%, 5%;
			--port-connect-lightness: 80%;
			--color-custom-input-helper-text: #590099;
			--color-custom-input-helper-bg: #e6c2ff;
		}
	}
}

@layer base {
	html {
		color: var(--color-text);
		background: var(--color-bg);
		font-family: var(--font-body);
		font-weight: var(--weight-body);
		block-size: 100%;
		accent-color: var(--color-text-alt);
	}

	body {
		grid-template-rows: auto 1fr;
		grid-template-areas:
			'--head --head'
			'--main --main';
		min-block-size: 100%;
		display: grid;
	}

	:is(h1, h2, h3),
	:is(.h1, .h2, .h3) {
		font-family: var(--font-heading);
		line-height: 1.1;
		font-weight: var(--weight-heading);
	}

	header {
		z-index: 2;
		padding: var(--size-gutter);
		border-block-end: 1px solid var(--color-border);
		background: var(--color-bg-alt);
		grid-area: --head;
		justify-content: space-between;
		align-items: center;
		display: flex;
	}

	header > * {
		flex: 1 0 0;
	}

	.header-title {
		gap: var(--size-gutter);
		text-align: center;
		letter-spacing: 0.05em;
		justify-content: center;
		align-items: center;
		font-weight: 900;
		font-stretch: 87.5%;
		line-height: 1;
		display: flex;
	}

	.header-icon {
		vertical-align: middle;
		width: auto;
		height: 0.875em;
		display: inline-block;
	}

	.header-toolbar {
		gap: var(--size-gutter);
		align-items: center;
		display: flex;
	}

	.header-credits {
		text-align: end;
		font-size: 0.875em;
	}

	.button-ui {
		gap: var(--size-gutter);
		padding: var(--size-gap) var(--size-gutter);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-small);
		align-items: center;
		display: inline-flex;
	}

	.button-ui:is(:hover, :focus) {
		color: var(--color-text-alt);
		border-color: var(--color-border-active);
	}

	.button-ui svg {
		width: 1em;
	}

	main {
		z-index: 1;
		isolation: isolate;
		grid-area: --main;
	}

	:any-link {
		color: var(--color-text);
	}

	:any-link:is(:hover, :focus) {
		color: var(--color-text-alt);
		text-decoration: none;
	}

	legend {
		padding: 0;
	}

	.flow > * + * {
		margin-block-start: var(--flow-space, 1em);
	}

	.flow > :is(h1, h2, h3) + * {
		--flow-space: 0.125em;
	}

	svg[width='0'][height='0'] {
		position: absolute;
	}
}

@layer app {
	@layer base {
		#app.defined {
			--c1: var(--color-border);
			--c2: transparent;
			--s: 12px;
			--d: 1.25px;
			background: conic-gradient(from -90deg at var(--d) var(--d), var(--c1) 90deg, var(--c2) 0) repeat 50% 50% / var(--s) var(--s);
			grid-template-rows: 1fr auto;
			grid-template-columns: auto 1fr;
			height: 0;
			min-height: 100%;
			display: grid;
			position: relative;
		}

		.button-toggle {
			width: var(--button-ui-size);
			aspect-ratio: 1;
			border-radius: var(--radius-small);
			background: var(--color-bg);
			outline: 1px solid var(--color-border);
			justify-content: center;
			align-self: center;
			align-items: center;
			display: flex;
		}

		.button-toggle:is(:hover, :focus) {
			outline: 2px solid var(--color-text-alt);
		}

		.button-toggle svg {
			width: calc(var(--button-ui-size) - 8px);
			height: auto;
		}

		:not(:hover, :focus-within) > .help-link {
			opacity: 0.67;
		}

		.help-link {
			align-items: center;
			display: inline-flex;
		}

		.help-link > svg {
			width: 0.9em;
			height: auto;
		}

		.preview-box {
			background: conic-gradient(from 90deg at 1px 1px, #0000 90deg, var(--color-border-active) 0) repeat 0 0 / var(--preview-bg-grid-size, 30px)
				var(--preview-bg-grid-size, 30px);
			background-origin: border-box;
			background-clip: padding-box;
		}
	}

	@layer sidebar {
		.app-sidebar {
			--transition: 0.15s ease-in-out;
			z-index: 2;
			width: clamp(16rem, 25vw, 24rem);
			min-width: min(16rem, 25vw);
			max-width: 24rem;
			padding: var(--size-gutter);
			resize: horizontal;
			transition: translate var(--transition);
			grid-area: 1 / 1;
			align-items: stretch;
			display: flex;
			overflow: hidden;
		}

		.app-sidebar[data-expanded='false'] {
			resize: none;
			translate: calc(-100% + (var(--button-ui-size) + var(--size-gutter)) * 2);
		}

		.app-sidebar[data-expanded='false'] .app-sidebar-inner {
			scrollbar-width: none;
		}

		.app-sidebar-inner {
			--sidebar-bg: var(--color-bg-alt);
			padding: var(--size-gutter);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-big);
			background: color-mix(in hsl, var(--sidebar-bg), transparent 75%);
			-webkit-backdrop-filter: blur(4px);
			backdrop-filter: blur(4px);
			box-shadow: var(--box-glow);
			scrollbar-color: var(--scrollbar-colors);
			transition: visibility var(--transition);
			flex: 1 0 100%;
			overflow: scroll;
		}

		@supports (scrollbar-gutter: stable) {
			.app-sidebar-inner {
				scrollbar-gutter: stable;
				overflow: auto;
			}
		}

		.app-sidebar[data-expanded='false'] .app-sidebar-inner {
			visibility: hidden;
		}

		.app-sidebar-toolbar {
			gap: var(--size-gutter);
			justify-content: space-between;
			display: flex;
		}

		.app-sidebar-toggle {
			visibility: visible;
			transform-origin: 0 0;
			transition: scale var(--transition);
		}

		.app-sidebar[data-expanded='false'] .app-sidebar-toggle {
			scale: 1.25;
		}

		.app-sidebar-toggle svg {
			width: calc(var(--button-ui-size) - 8px);
			height: auto;
		}

		.app-sidebar-toggle[aria-expanded='true'] [data-toolbar-toggle='open'],
		.app-sidebar-toggle[aria-expanded='false'] [data-toolbar-toggle='close'] {
			display: none;
		}

		@media (prefers-reduced-motion: reduce) {
			.app-sidebar,
			.app-sidebar-inner,
			.app-sidebar-toggle {
				transition-duration: 0s;
			}
		}

		@media (prefers-reduced-motion: no-preference) {
			@supports (interpolate-size: allow-keywords) {
				details {
					interpolate-size: allow-keywords;
				}

				details::details-content {
					block-size: 0;
					transition: all var(--transition);
					transition-behavior: allow-discrete;
					transition-property: content-visibility, opacity, block-size;
					overflow-y: clip;
				}

				details[open]::details-content {
					block-size: auto;
				}
			}
		}

		.app-sidebar-inner > details {
			margin-block-start: var(--size-gutter);
		}

		.app-sidebar-inner > details > summary {
			padding-block: var(--size-gap);
			cursor: pointer;
		}

		.app-sidebar-inner > details:not([open]) > summary:is(:hover, :focus)::marker {
			color: var(--color-text-alt);
		}

		.app-sidebar-inner > details[open] > summary::marker {
			color: var(--color-text-alt);
		}

		.app-nodes-list {
			gap: var(--size-gap);
			flex-direction: column;
			margin-block-start: var(--size-gap);
			padding: 0;
			list-style-type: '';
			display: flex;
		}

		.app-nodes-item[data-nested] > .app-template-tile {
			margin-inline-start: 2em;
		}
	}

	@layer graph {
		.app-graph {
			z-index: 1;
			scrollbar-color: var(--scrollbar-colors);
			grid-area: 1 / 1 / auto / -1;
			font-size: 0.875rem;
			display: grid;
			overflow: auto;
		}

		.app-graph > * {
			grid-area: 1 / -1;
			align-self: start;
			position: relative;
		}

		.app-graph-extender {
			z-index: -1;
			pointer-events: none;
			width: 1px;
			height: 1px;
		}

		.app-graph-lines {
			z-index: 10;
			pointer-events: none;
			width: 100%;
			height: 100%;
			display: block;
			inset: 0;
			overflow: visible;
		}

		.app-graph-lines:not(.is-shifted) .app-graph-line-action-button,
		.app-graph-lines:not(.is-shifted) .app-graph-line-action-button-line {
			display: none;
		}

		.app-graph-line {
			fill: none;
			stroke: var(--port-connect-color);
			stroke-width: calc(1px * var(--strokeWidth));
			stroke-linecap: round;
			cursor: pointer;
		}

		.app-graph-line-action {
			color: var(--color-text-alt);
			opacity: 0.5;
		}

		.app-graph-line-action:hover {
			color: var(--color-bg-delete);
			opacity: 1;
		}

		.app-graph-lines .app-graph-line-action > .app-graph-line-action-button {
			stroke: var(--color-border);
			stroke-width: 2px;
			fill: var(--color-bg);
			pointer-events: auto;
			cursor: pointer;
		}

		.app-graph-lines .app-graph-line-action > .app-graph-line-action-button:hover {
			fill: var(--color-bg);
		}

		.app-graph-line-action-button-line {
			stroke: currentColor;
			stroke-width: 2px;
			stroke-linecap: round;
			pointer-events: none;
		}

		@media (prefers-reduced-motion: no-preference) {
			.app-graph-line {
				--pathLength: 100;
				stroke-dasharray: calc(var(--pathLength) / 10 * 1px);
				animation: 5s linear infinite portConnectors;
			}

			@keyframes portConnectors {
				from {
					stroke-dashoffset: 0;
				}

				to {
					stroke-dashoffset: calc(var(--pathLength) * 1px);
				}
			}
		}
	}

	@layer info {
		.app-info {
			z-index: 20;
			gap: var(--size-gutter);
			padding: var(--size-gutter);
			background: color-mix(in hsl, var(--color-bg), transparent 25%);
			-webkit-backdrop-filter: blur(8px) grayscale();
			backdrop-filter: blur(8px) grayscale();
			flex-direction: column;
			display: flex;
			position: absolute;
			inset: 0;
		}

		.app-info-toolbar {
			--button-ui-size: 2rem;
			flex: none;
			width: 100%;
			display: flex;
			position: relative;
		}

		.app-info-toolbar :is(h1, h2, h3) {
			padding-inline: calc(var(--button-ui-size) + var(--size-gutter));
			text-transform: uppercase;
			text-align: center;
			flex: auto;
		}

		.app-info-close {
			position: absolute;
			inset: 0 0 auto auto;
		}

		.app-info-close svg {
			width: calc(var(--button-ui-size) - 8px);
		}

		.app-info-content {
			flex: auto;
			width: 100%;
			max-width: 70ch;
			margin-inline: auto;
		}
	}

	@layer tile {
		.app-tile {
			padding: var(--size-gutter);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-small);
			background: linear-gradient(to bottom right, var(--color-bg-alt), var(--color-bg));
		}

		.app-tile:focus-visible {
			outline: 2px solid var(--color-text-alt);
			outline-offset: 1px;
		}

		.app-tile__label {
			font-size: 1rem;
			font-weight: bold;
		}

		.app-template-tile {
			text-align: start;
			width: 100%;
		}

		.app-template-tile:hover {
			--color-border: var(--color-text);
		}

		.app-node-tile {
			width: var(--tile-width);
			box-shadow: var(--drop-shadow);
		}

		.app-node-tile:is(:hover, :focus) {
			border-color: var(--color-border-active);
		}

		.app-node-tile__preview {
			cursor: auto;
		}

		.app-node-tile__preview-button {
			align-items: center;
			gap: var(--size-gap);
			cursor: pointer;
			background: none;
			border: 0;
			margin-inline-end: auto;
			padding: 0;
			display: flex;
			position: relative;
		}

		.app-node-tile__preview-button:not([data-preview-open]) .app-node-tile__preview-icon--when-shown,
		.app-node-tile__preview-button[data-preview-open] .app-node-tile__preview-icon--when-hidden {
			display: none;
		}

		.app-node-tile__preview-image {
			--preview-bg-grid-size: 15px;
			z-index: 10;
			inset: calc(100% - var(--size-gap)) 0 auto 50%;
			width: 90%;
			padding: var(--size-gap);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-small);
			background-color: var(--color-bg);
			pointer-events: none;
			margin: 0 auto;
			display: block;
			position: absolute;
			transform: translateX(-50%);
		}

		.app-node-tile__preview-image > svg {
			aspect-ratio: 2;
			width: 100%;
			display: block;
			overflow: visible;
		}

		@layer drag-actions {
			[draggable='true']:not(input:where([type='text'], [type='url'], [type='number']), textarea, select, output, .custom-input) {
				cursor: grab;
				-webkit-user-select: none;
				user-select: none;
			}

			[draggable].is-dragged {
				z-index: 3;
				cursor: grabbing;
				border-style: dashed;
			}

			.is-threatening {
				--sidebar-bg: var(--color-bg-delete);
			}

			.app-sidebar-inner.is-threatening > details {
				visibility: hidden;
			}

			.app-sidebar-inner.is-threatening .app-sidebar-toolbar h2:before {
				content: 'Delete ';
			}

			.is-considering {
				background-color: color-mix(in hsl, var(--color-text-alt), transparent 75%);
			}

			.app-graph.is-considering:not(:has(.app-node-tile)):after {
				content: 'Drop it like it’s hot!';
				text-align: center;
				opacity: 0.5;
				width: 100%;
				padding-block: 0.25em;
				font-size: 4rem;
				display: block;
				position: absolute;
				inset: 0 0 auto;
			}
		}

		@layer form {
			.app-node-tile__form {
				gap: var(--size-gutter);
				flex-direction: column;
				display: flex;
			}

			.app-node-tile__title {
				gap: var(--size-gutter);
				flex-wrap: wrap;
				justify-content: space-between;
				display: flex;
			}

			@layer label {
				.app-node-tile__control-label-wrap {
					gap: var(--size-gutter);
					flex-wrap: wrap;
					justify-content: space-between;
					font-size: 0.875em;
					display: flex;
				}

				.app-node-tile__control-label-unit-control {
					gap: var(--size-gutter);
					border: 0;
					margin: 0;
					padding: 0;
					display: flex;
				}

				.app-node-tile__control-label-unit-item {
					gap: var(--size-gap);
					display: flex;
				}

				.app-node-tile__control-label-unit-item:has(input:checked) {
					text-decoration: underline;
				}

				.app-node-tile__control-label-size-control input {
					background: 0;
					border: 0;
					width: 4ch;
					min-height: 0;
					padding: 0;
				}

				.app-node-tile__control-label-error {
					color: var(--color-error);
					display: none;
				}

				.app-node-tile__control-wrap {
					justify-content: center;
					align-items: stretch;
					gap: var(--size-gap);
					flex-direction: column;
					display: flex;
				}

				.app-node-tile__control-label {
					text-align: start;
					flex: none;
					min-width: 3ch;
				}

				.app-node-tile__control-label:only-child {
					width: 100%;
				}

				.app-node-tile__control-label-wrap:hover + .app-node-tile__control,
				.app-node-tile__control > :not(.compound-input):hover,
				.app-node-tile__control > .compound-input > :is(input:where([type='text'], [type='url'], [type='number']), textarea, select, output, .custom-input):hover {
					--color-border: var(--color-border-active);
				}

				.app-node-tile__control {
					position: relative;
				}
			}

			@layer validation {
				:is(input, select):required:invalid {
					--color-border: var(--color-error);
					--color-text-alt: var(--color-error);
					border-style: dashed;
				}

				.app-node-tile__control-label-wrap:has(+ .app-node-tile__control :required:invalid) .app-node-tile__control-label-error {
					display: inline;
				}
			}

			@layer input {
				:is(input:where([type='text'], [type='url'], [type='number']), textarea, select, output, .custom-input) {
					width: 100%;
					min-height: 2.5em;
					font: inherit;
					color: var(--color-text);
					border: 1px solid var(--color-border);
					background: var(--color-bg);
					box-shadow: inset var(--box-glow);
					border-radius: 0;
					padding: 0.5em;
					font-family: monospace;
					line-height: 1.3;
					display: inline-block;
				}

				:is(input:where([type='text'], [type='url'], [type='number']), textarea, select, output, .custom-input):is(:focus-visible, :focus-within) {
					outline: 2px solid var(--color-text-alt);
					outline-offset: 1px;
				}

				:where(.app-graph) :is(button, input:where([type='submit'], [type='button'])) {
					gap: var(--size-gutter);
					padding: var(--size-gap);
					text-align: center;
					border: 1px solid var(--color-border);
					border-radius: var(--radius-small);
					background: var(--color-bg);
					justify-content: center;
					align-items: center;
					display: inline-flex;
				}

				:where(.app-graph) :is(button, input:where([type='submit'], [type='button'])):is(:hover, :focus) {
					color: var(--color-text-alt);
					border-color: var(--color-border-active);
				}

				.app-node-tile__control :is(input[type='text'], [type='url'], input[type='number'], select, .custom-input) {
					width: 100%;
				}

				textarea {
					resize: vertical;
					max-width: 100%;
				}

				.app-graph select:not([data-spcificity-hack='!']) {
					appearance: none;
					background-image: 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='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='arcs'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
					background-position: 100%;
					background-repeat: no-repeat;
					background-size: 1.25em;
					padding-inline-end: 1.25em;
				}

				fieldset {
					border: 0;
					margin: 0;
					padding: 0;
				}
			}

			@layer custom {
				.custom-input {
					gap: var(--size-gutter);
					cursor: text;
					display: inline-flex;
				}

				.custom-input > input[type='text'] {
					appearance: none;
					box-shadow: none;
					background: none;
					border: 0;
					outline: none;
					flex-grow: 1;
					padding: 0;
				}

				.custom-input > input {
					min-height: 0;
				}
			}

			@layer custom-color-input {
				.custom-input-colorwrap {
					--input-inner-border: var(--color-bg);
					cursor: default;
					position: relative;
				}

				.custom-input-colorwrap > input[type='color'] {
					width: 3em;
					height: 1.5em;
				}

				.custom-input-colorwrap:after {
					content: '';
					pointer-events: none;
					border-radius: var(--radius-small);
					background: var(--c);
					display: block;
					position: absolute;
					inset: 0;
				}

				.custom-input-colorwrap:is(:hover, :focus-within) {
					--input-inner-border: color-mix(in hsl, var(--color-bg), gray 50%);
				}

				.custom-input-colorwrap:focus-within {
					outline: 2px dashed var(--color-text-alt);
					outline-offset: 1px;
				}

				.custom-input-colorwrap:not([data-invalid-color]) > input[type='color'],
				.custom-input-colorwrap[data-invalid-color='transparent'] > input[type='color'] {
					opacity: 0;
				}

				.custom-input-colorwrap:not([data-invalid-color]):after,
				.custom-input-colorwrap[data-invalid-color='transparent']:after {
					box-shadow: inset 0 0 0 3px var(--input-inner-border), inset 0 0 0 4px gray;
					border: 1px solid gray;
				}

				.custom-input-colorwrap[data-invalid-color]:after {
					--diag: transparent calc(50% - 1px), red 0, red calc(50% + 1px), transparent 0;
					background: 50% / 12px 12px no-repeat;
					background-image: linear-gradient(45deg, var(--diag)), linear-gradient(-45deg, var(--diag));
				}

				.custom-input-colorwrap[data-invalid-color='transparent']:after {
					background: repeating-conic-gradient(#333 0% 25%, #ccc 0% 50%) 50% / 16px 16px;
				}

				.custom-input-colorwrap:is([data-invalid-color='transparent' i], [data-invalid-color='currentColor' i], [data-invalid-color='inherit' i]) > input[type='color'] {
					opacity: 0;
				}

				.custom-input-colorwrap:is([data-invalid-color='currentColor' i], [data-invalid-color='inherit' i]):after {
					background: linear-gradient(
								0deg,
								transparent calc(50% - 1px),
								var(--color-custom-input-helper-text) 0,
								var(--color-custom-input-helper-text) calc(50% + 1px),
								transparent 0
							)
							no-repeat 20% 25% / 40% 3px,
						linear-gradient(
								0deg,
								transparent calc(50% - 1px),
								var(--color-custom-input-helper-text) 0,
								var(--color-custom-input-helper-text) calc(50% + 1px),
								transparent 0
							)
							no-repeat 50% 50% / 40% 3px,
						linear-gradient(
								0deg,
								transparent calc(50% - 1px),
								var(--color-custom-input-helper-text) 0,
								var(--color-custom-input-helper-text) calc(50% + 1px),
								transparent 0
							)
							no-repeat 80% 75% / 40% 3px;
					background-color: var(--color-custom-input-helper-bg);
				}

				.custom-input-colorwrap:is([data-invalid-color='fn()' i], [data-invalid-color='var()' i]):after {
					content: attr(data-invalid-color);
					text-align: center;
					color: var(--color-custom-input-helper-text);
					background: var(--color-custom-input-helper-bg);
					justify-content: center;
					align-items: center;
					font-size: 0.75em;
					display: flex;
				}
			}

			@layer compound {
				.compound-input {
					gap: var(--size-gutter);
					display: flex;
				}
			}

			@layer matrix-grid {
				.input-matrix-grid {
					display: grid;
				}

				.input-matrix-grid[style*='--matrix-grid-x:'][style*='--matrix-grid-y:'] {
					grid-template-columns: repeat(var(--matrix-grid-x), 1fr);
					grid-template-rows: repeat(var(--matrix-grid-y), 1fr);
					gap: 4px;
				}

				.input-matrix-grid [data-matrix-input-cell] {
					appearance: textfield;
				}

				.input-matrix-grid [data-matrix-input-cell]::-webkit-inner-spin-button {
					appearance: none;
				}

				.input-matrix-grid [data-matrix-input-cell]::-webkit-outer-spin-button {
					appearance: none;
				}
			}

			@layer control-options {
				.control-options {
					gap: var(--size-gap);
					flex-wrap: wrap;
					display: flex;
				}

				.control-options:not(:only-child) {
					margin-block-start: var(--size-gap);
				}

				.control-options > * {
					flex: 1 0 auto;
				}
			}

			@layer state {
				[data-from-control][readonly],
				select[data-from-control][disabled],
				.custom-input.custom-input--has-readonly {
					color: var(--color-bg-alt);
					background: var(--color-text-alt);
					opacity: 1;
				}

				[data-from-control][readonly],
				select[data-from-control][disabled],
				.custom-input.custom-input--has-readonly,
				.custom-input.custom-input--has-readonly input {
					cursor: not-allowed;
				}

				select[data-from-control][disabled] {
					appearance: none;
				}

				[type='number'][data-from-control][readonly] {
					appearance: textfield;
				}

				[type='number'][data-from-control][readonly]::-webkit-inner-spin-button {
					appearance: none;
				}

				[type='number'][data-from-control][readonly]::-webkit-outer-spin-button {
					appearance: none;
				}
			}
		}

		@layer port {
			.app-node-tile__port {
				aspect-ratio: 1;
				border: 1px solid var(--color-border);
				border-radius: var(--port-radius);
				align-self: center;
				width: 20px;
				margin-block: auto;
				position: absolute;
				inset-block: 0;
			}

			.app-node-tile__port[data-port-direction='in'] {
				border-inline-end-width: 0;
				inset-inline-end: 100%;
			}

			.compound-input + .app-node-tile__port[data-port-direction='in'] + .app-node-tile__port[data-port-direction='in'] {
				inset-inline-end: calc((100% - var(--size-gutter)) / 2);
			}

			.app-node-tile__port[data-port-direction='out'] {
				border-inline-start-width: 0;
				inset-inline-start: 100%;
			}

			.app-node-tile__port[data-port-relation='one'] {
				--port-radius: 50%;
				background: radial-gradient(circle at 50% 50%, hsl(var(--port-hue, 275), 84%, 50%) 33%, hsl(var(--port-hue, 275), 84%, 10%) 34%);
			}

			.app-node-tile__port[data-port-relation='one'][data-port-connected='true'] {
				background: radial-gradient(
					circle at 50% 50%,
					var(--port-connect-color) 33%,
					var(--port-connect-stroke-color) calc(33% + 0.5px),
					var(--port-connect-stroke-color) calc(33% + 1.5px),
					hsl(var(--port-hue, 275), 84%, 50%) calc(33% + 2.5px)
				);
			}

			.app-node-tile__port[data-port-relation='many'] {
				--port-radius: 4px;
				--port-many-diamond-factor: 64%;
				--grad-def: transparent var(--port-many-diamond-factor), hsl(var(--port-hue, 275), 84%, 10%) 0;
				background-image: linear-gradient(to top right, var(--grad-def)), linear-gradient(to bottom right, var(--grad-def)),
					linear-gradient(to bottom left, var(--grad-def)), linear-gradient(to top left, var(--grad-def));
				background-color: hsl(var(--port-hue, 275), 84%, 50%);
			}

			.app-node-tile__port[data-port-relation='many'][data-port-connected='true'] {
				--port-many-diamond-factor2: calc(var(--port-many-diamond-factor) + 2px);
				--grad-def: transparent var(--port-many-diamond-factor), var(--port-connect-stroke-color) 0;
				--grad-def2: transparent var(--port-many-diamond-factor2), hsl(var(--port-hue, 275), 84%, 50%) 0;
				background-image: linear-gradient(to top right, var(--grad-def2)), linear-gradient(to bottom right, var(--grad-def2)),
					linear-gradient(to bottom left, var(--grad-def2)), linear-gradient(to top left, var(--grad-def2)), linear-gradient(to top right, var(--grad-def)),
					linear-gradient(to bottom right, var(--grad-def)), linear-gradient(to bottom left, var(--grad-def)), linear-gradient(to top left, var(--grad-def));
				background-color: var(--port-connect-color);
			}

			.app-node-tile__port[data-port-direction='in'] {
				border-start-end-radius: 0;
				border-end-end-radius: 0;
			}

			.app-node-tile__port[data-port-direction='out'] {
				border-start-start-radius: 0;
				border-end-start-radius: 0;
			}

			.app-graph-line,
			.app-node-tile__port {
				--port-connect-color: hsl(var(--port-hue), 100%, var(--port-connect-lightness));
			}

			.app-graph-line--string,
			.app-node-tile__port[data-port-type='string'] {
				--port-hue: 200;
			}

			.app-graph-line--number,
			.app-node-tile__port[data-port-type='number'] {
				--port-hue: 45;
			}

			.app-graph-line--color,
			.app-node-tile__port[data-port-type='color'] {
				--port-hue: 0;
			}

			.app-node-tile__port.is-attempt {
				outline: 4px solid var(--color-text-alt);
				border-radius: 50%;
			}

			[data-port-type]:has(+ .is-attempt) {
				--color-border: var(--color-text-alt);
			}
		}

		@layer preview {
			.app-preview {
				z-index: 2;
				gap: var(--size-gutter);
				height: clamp(8rem, 20vh, 16rem);
				min-height: 8rem;
				max-height: 50vh;
				padding: var(--size-gutter);
				border-block-start: 1px solid var(--color-border);
				background: var(--color-bg-alt);
				grid-template:
					'--code --config' 1fr
					/ auto 1fr;
				grid-area: 2 / 1 / auto / -1;
				display: grid;
				position: relative;
			}

			.app-preview-code {
				resize: horizontal;
				tab-size: 2;
				scrollbar-color: var(--scrollbar-colors);
				grid-area: --code;
				width: min(66vw, 60rem);
				min-width: 20vw;
				max-width: 80vw;
			}

			.app-preview-config {
				gap: var(--size-gutter);
				grid-area: --config;
				grid-template-rows: auto 1fr;
				grid-template-columns: 1fr;
				display: grid;
			}

			.app-preview-form {
				gap: var(--size-gutter);
				align-items: baseline;
				display: flex;
			}

			.app-preview-window {
				--preview-bg-grid-size: 30px;
				overflow-clip-margin: var(--size-gutter);
				border: 2px dashed var(--color-border-active);
				height: 0;
				min-height: 100%;
				overflow: clip;
			}

			.app-preview-window svg {
				width: 100%;
				height: 100%;
				overflow: clip;
			}

			.app-preview-form-option {
				align-items: center;
				gap: var(--size-gap);
				display: flex;
			}

			.app-preview-resizer {
				--resizer-inner-line: var(--color-border-active);
				--resizer-inner-bg: var(--color-bg);
				z-index: 10;
				cursor: row-resize;
				height: 3px;
				position: absolute;
				inset: -2px 0 auto;
			}

			.app-preview-resizer:hover {
				--resizer-inner-line: var(--color-text-alt);
			}

			.app-preview-resizer.is-resizing {
				--resizer-inner-line: var(--color-bg);
				--resizer-inner-bg: var(--color-border-active);
			}

			.app-preview-resizer:hover:before {
				content: '';
				background: var(--color-border-active);
				position: absolute;
				inset: 1px 0;
			}

			.app-preview-resizer:after {
				content: '';
				border: 1px solid var(--color-border-active);
				background: linear-gradient(var(--resizer-inner-line), var(--resizer-inner-line)) no-repeat 50% 50% / 50% 1px var(--resizer-inner-bg);
				border-radius: 1rem;
				width: 2rem;
				margin: auto;
				display: block;
				position: absolute;
				inset: -2px 0;
			}
		}
	}

	@layer utility {
		.visually-hidden {
			clip: rect(1px, 1px, 1px, 1px);
			width: 1px;
			height: 1px;
			position: absolute;
			overflow: hidden;
		}

		.font-bold {
			font-weight: bold;
		}
	}

	@layer exceptions {
		[hidden] {
			display: none !important;
		}
	}
}
