:root {
	--bg: #fed;
	--color: #333;
	--table-border: rgba(0, 0 , 0, .4);
	--cta-button-color: #e80;
}
[data-theme="dark"] {
	--bg: #222;
	--color: #eee;
	--table-border: rgba(255, 255, 255, .2);
	--cta-button-color: #c60;
	SELECT, INPUT, BUTTON {
		background: #666;
		border: #555;
		color: #eee;
	}
}
BODY {margin: 0; background: var(--bg); color: var(--color); font: 1rem monospace;}
TABLE, TD, TH {border: 1px solid var(--table-border); padding: .5rem 1rem; font-size: 1rem; text-align: left;}
TABLE {border-collapse:collapse;}
H2 {margin: 0;}
.df {display: flex; flex-wrap: wrap;}
.jcsb {justify-content: space-between;}
.f DIV {white-space: nowrap;}
.mt2 {margin-top: 2rem;}
.g2 {gap: 2rem;}
.m1 {margin: 1rem;}
.p1 {padding: 1rem;}
.form {
	/*background: rgba(255, 255, 255, .2);*/
	/*background: rgba(0, 0, 0, .1);*/
	.input {
		margin-bottom: 1rem;
	}
	INPUT, SELECT {
		padding: .5rem;
		/*border: none;*/
		/*outline: none;*/
	}
	BUTTON {
		width: 15rem;
		padding: .5rem 1rem;
		background: var(--cta-button-color);
	}
}
.chart {background: rgba(255, 255, 255, .1);}
.error {background: #e20; padding: 1rem; color: #eee;}