/*\

modified Eric Meyer reset

\*/

html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,var,
b,u,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,progress,meter,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed, 
figure,figcaption,footer,header,hgroup, 
menu,nav,output,ruby,section,summary,
time,mark,audio,video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	font:inherit;
}
a,a:visited {
	text-decoration:none;
}
ol,ul {
	list-style:none;
}
blockquote,q {
	/* quotes:none; */
}
blockquote:before,blockquote:after,
q:before,q:after {
	/* content:none; */
}
table {
	border-collapse:collapse;
	border-spacing:0;
}

/*\



\*/

body {
	max-width:800px;
	margin:auto;
}
body > div {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-template-rows:auto;
	grid-template-areas:'input join output';
	user-select:none;
	-moz-user-select:none;
}
ol.input {
	grid-area:input;
}
ol.join {
	grid-area:join;
}
ol.output {
	grid-area:output;
}

/*\



\*/

ol {
	position:relative;
}
ol.input li,
ol.output li {
	display:flex;
	height:1.4em;
	margin:0.4em 0;
	border-style:solid;
	border-width:2px;
	border-color:rgb(90,90,90);
	background:rgba(200,200,200,0.8);
	overflow:hidden;
	cursor:pointer;
}
ol li meter {
	flex:1 1 auto;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
ol.input li {
	border-radius:0 0.7em 0.7em 0;
}
ol.output li {
	border-radius:0.7em 0 0 0.7em;
	justify-content:end;
}
ol.join li {
	position:absolute;
	height:2px;
	transform-origin:left center;
	border-radius:1px;
	background:rgb(90,90,90);
	pointer-events:none;
}