html, body {
	height: 100%; margin: 0; padding: 0; color: rgb(10 30 10);
	font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
*, *::before, *::after { box-sizing: border-box; contain: strict; } /* stylelint-disable-line selector-max-universal */
a, label, span, img, button, h1, h2, h3, h4, em, li, details, summary, p, header, footer, select,
	table, thead, tbody, tr, th, td,
	x-details, x-radio, x-lbl, x-accordion, x-val, field-pair { contain: content; }
h1, h2, h3, h4, x-lbl { margin: 0; font-weight: 600; }
	h1 { font-size: 1.7em; }
	h2 { font-size: 1.2em; }
summary { cursor: pointer; }
button, .button {
	margin: 0; padding: 0.4em 0.6em; border-radius: 8px; cursor: pointer;
	text-align: center; color: inherit; text-decoration: none;
	transition: 0.6s ease transform, 0.6s ease box-shadow; box-shadow: 0 0 5px rgb(30 30 50 / 0.2);
	background-color: rgb(113 191 184); font: inherit; border: 3px solid rgb(30 30 30 / 0.08);
}
	:is(button, .button):is(:hover, :focus) { transform: scale(1.01); box-shadow: 0 0 5px 5px rgb(30 30 50 / 0.1); }
input, select, .choices .choices__inner {
	padding: 0.25em; background: rgb(255 255 255 / 0.7);
	font: inherit; border: 1px solid rgb(80 80 80); border-radius: 4px;
}
label { cursor: pointer; white-space: nowrap; }

body {
	flex-grow: 1; display: flex; --padding: 16px; --barTxt: rgb(0 0 0);
	--lightGrad: linear-gradient(0deg, rgb(251 246 241) 0%, rgb(221 227 234) 100%);
}

x-radio { display: flex; border: 1px solid currentcolor; border-radius: 5px; }
	x-radio label { flex-grow: 1; }
	x-radio input { display: none; }
	x-radio x-lbl { display: flex; justify-content: center; align-items: center; padding: 5px 15px; }
	x-radio input:checked + x-lbl {
		font-weight: 600; background-color: var(--barTxt); color: rgb(195 210 220);
		text-decoration: underline; text-underline-offset: 0.14em;
	}

x-val[name]:empty::before { content: "[No Value]"; opacity: 0.5; }

[disabled] {
	color: gray;
}