@layer modules {
	.demo-langs {
		display: inline-flex;
		gap: var(--redz-space-4);
	}

	@container region (width < 30rem) {
		.demo-langs {
			flex-wrap: wrap;
		}
	}

	.demo-lang {
		display: inline-grid;
		place-items: center;
		min-inline-size: 1.75rem;
		padding: 0 var(--redz-space-4);
		border: 1px solid var(--redz-border-strong);
		border-radius: var(--redz-radius-6);
		color: var(--redz-text-muted);
		font-size: 0.6875rem;
		font-weight: 700;
		line-height: 1.25rem;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.demo-lang-base {
		border-color: var(--redz-text);
		background: var(--redz-text);
		color: var(--redz-bg);
	}

	.demo-lang-old {
		border-color: transparent;
		background: var(--redz-warning-subtle);
		color: var(--redz-warning);
	}

	.demo-lang-machine {
		border-style: dashed;
	}

	.demo-lang-none {
		border-color: var(--redz-border);
		color: var(--redz-text-muted);
		text-decoration: line-through;
	}

	.demo-site {
		display: inline-grid;
		flex: none;
		place-items: center;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		border-radius: var(--redz-radius-6);
		color: #ffffff;
		font-size: 0.625rem;
		font-weight: 750;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.demo-site-a {
		background: #0b6f91;
	}

	.demo-site-b {
		background: #b3470b;
	}

	.demo-site-c {
		background: #6d3fd2;
	}

	.demo-thumb {
		flex: none;
		inline-size: 3rem;
		block-size: 2.25rem;
		border-radius: var(--redz-radius-6);
		background: linear-gradient(135deg, #2b8bb0, #5ac2a8);
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.demo-thumb-land {
		background: linear-gradient(135deg, #5b8c3a, #a8c95a);
	}

	.demo-thumb-sunset {
		background: linear-gradient(135deg, #d9622b, #f2b35a);
	}

	.demo-swatches {
		display: flex;
		flex-wrap: wrap;
		gap: var(--redz-space-8);
	}

	.demo-swatch {
		inline-size: 2.25rem;
		block-size: 2.25rem;
		border: 2px solid var(--redz-bg);
		border-radius: 50%;
		outline: 1px solid var(--redz-border-strong);
		cursor: pointer;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.demo-swatch[aria-checked="true"] {
		outline: 2px solid var(--redz-text);
		outline-offset: 2px;
	}

	.demo-swatch-blue {
		background: #1c67ce;
	}

	.demo-swatch-violet {
		background: #6d3fd2;
	}

	.demo-swatch-teal {
		background: #0d7468;
	}

	.demo-swatch-rose {
		background: #b8224a;
	}

	.demo-login {
		min-block-size: 18rem;
	}

	.demo-login-art {
		background: linear-gradient(160deg, #3fb7a6, #0d7468 55%, #0a3f3a);
		color: #ffffff;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.demo-mark {
		background: #0d7468;
		color: #ffffff;
	}

	.demo-mail-header {
		padding: var(--redz-space-12) var(--redz-space-16);
		background: #0d7468;
		color: #ffffff;
		font-weight: 700;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.demo-switch {
		position: fixed;
		inset-block-end: var(--redz-space-12);
		inset-inline-start: 50%;
		z-index: 30;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--redz-space-4) var(--redz-space-12);
		inline-size: max-content;
		max-inline-size: calc(100vw - 1rem);
		padding: var(--redz-space-4);
		border: 1px solid var(--redz-border);
		border-radius: var(--redz-radius-16);
		background: var(--redz-bg-raised);
		box-shadow: var(--redz-shadow-2);
		translate: -50% 0;
	}

	.demo-switch:dir(rtl) {
		translate: 50% 0;
	}

	.demo-switch-group {
		display: flex;
		gap: var(--redz-space-2);
	}

	html[data-probe] .demo-switch {
		display: none;
	}

	@media print {
		.demo-switch {
			display: none;
		}
	}
}