.fancyform {
	--fgcolor:black;
	--bgcolor:white;
	--hlcolor:var(--gold);
	--ecolor:red;
	--optionbgcolor:var(--gold);
	--optionfgcolor:black;
}
.fancyform fieldset { display:block; position:relative; margin:0; padding:0;
	border:none; padding-top:1em; margin-bottom:2em; }
.fancyform fieldset::after { display:block; content:"";
	position:absolute; top:100%; left:0; width:100%; height:1px;
	background-color:var(--fgcolor); transition:all 0.2s;
	transform:scale3d(1.0, 1.0, 1.0); }
.fancyform fieldset:focus-within::after { background-color:var(--hlcolor);
	box-shadow:0 1px 0 0 var(--hlcolor); }
.fancyform label { font-size:1.2em; position:absolute; top:0; left:0;
	line-height:1em; color:var(--fgcolor); opacity:0.8;
	transform-origin:0 50%; transition:transform 0.2s;
	transform:translate3d(0, 1em, 0) scale3d(1.0, 1.0, 1.0);
	pointer-events:none; backface-visibility:hidden; }
.fancyform fieldset:has(:focus-within) label,
.fancyform fieldset:not(:has(:placeholder-shown)) label {
	transform:translate3d(0, 0, 0) scale3d(0.7, 0.7, 0.7); }
.fancyform input[type="text"],
.fancyform input[type="password"],
.fancyform input[type="email"],
.fancyform input[type="tel"] { display:block; width:100%;
	color:var(--fgcolor); background-color:transparent; border:none;
	padding:0; margin:0; height:2em; }
.fancyform input:focus,
.fancyform textarea:focus { outline:none; }
.fancyform textarea { resize:vertical; color:var(--fgcolor);
	background-color:transparent; display:block; width:100%; border:none;
	padding:0; margin:0; min-height:4em; }
.fancyform__autogrow { display:grid; }
.fancyform__autogrow::after {
	content:attr(data-replicated-value) " ";
	white-space:pre-wrap; visibility:hidden; }
.fancyform__autogrow textarea { resize:none; overflow:hidden; }
.fancyform__autogrow textarea,
.fancyform__autogrow::after {
	display:block; width:100%; border:none; padding:0; margin:0;
	min-height:2em; font:inherit; grid-area:1 / 1 / 2 / 2;
	overflow-wrap:break-word; overflow-x:hidden; }
.fancyform select { display:block; width:100%;
	color:var(--fgcolor); background-color:var(--bgcolor); border:none;
	padding:0; margin:0; height:2em; appearance:none; padding-right:1.8em; }
.fancyform select option { background-color:var(--optionbgcolor);
	color:var(--optionfgcolor); }
.fancyform fieldset:has(select)::before { display:block; content:"";
	position:absolute; bottom:0.8em; right:0.5em; width:0.8em; height:0.4em;
	box-sizing:border-box; border-top:0.4em solid var(--hlcolor);
	border-right:0.4em solid transparent;
	border-left:0.4em solid transparent; pointer-events:none; }
.fancyform fieldset:has(input[type="checkbox"]) { border:none;
	padding-left:2em; padding-top:0; }
.fancyform fieldset:has(input[type="checkbox"])::after { display:none; }
.fancyform fieldset:has(input[type="checkbox"]) label { display:block;
	position:static; transform:none; opacity:1; pointer-events:all;
	font-size:90%; }
.fancyform input[type="checkbox"] { display:block; width:1.3em;
	height:1.3em; border:1px solid var(--fgcolor); position:absolute; top:0;
	left:0; appearance:none; margin:0; }
.fancyform input[type="checkbox"]:checked:before { display:block;
	position:absolute; content:""; border-right:3px solid var(--hlcolor);
	border-bottom:3px solid var(--hlcolor); width:50%; height:85%;
	transform:rotate(35deg); left:27%; }
/*
.fancyform button,
.fancyform .button { display:inline-block; margin:0;
	padding:0.1em 1em; background-color:transparent; color:var(--hlcolor);
	border:1px solid var(--hlcolor); cursor:pointer; }
*/
.fancyform--error,
.fancyform fieldset:has(:user-invalid) {
	--fgcolor:var(--ecolor);
	--hlcolor:var(--ecolor);
}