/* j-logo */
	#j-logo {
		position: absolute;
		top: 14px;
		right: 7px;
		color: #04b1ff;
		height: 32px;
		width: 32px;
		cursor: pointer;
		z-index: 1000;
		outline: none;
	}

	#j-logo svg {
		fill: currentColor;
		height: 100%;
		width: auto;
	}

	#j-logo:hover, #j-logo:focus {
		filter: drop-shadow(0px 0px 8px #222222);
	}
	
/* page */
	html {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	body {
		padding: 0px;
		margin: 0px;
		border: 0px;
		font-family: sans-serif;
	}

/* top */
	#top {
		float: left;
		width: 100%;
		padding: 10px;
		height: auto;
		background-color: lightgray;
		box-sizing: border-box;
	}

	#input {
		min-height: calc(25vh + 20px);
		max-height: calc(25vh + 20px);
		min-width: 100%;
		max-width: 100%;
		font-family: monospace;
		border: none;
		border-radius: 4px;
		outline: none;
		padding: 5px;
		box-sizing: border-box;
	}

/* bottom */
	#bottom {
		float: left;
		width: 100%;
		height: auto;
		max-height: calc(75vh + 20px);
		padding: 10px;
		box-sizing: border-box;
	}

	.helper {
		color: darkgray;
	}

	#output {
		border: 1px solid lightgray;
		border-radius: 4px;
		width: 100%;
		max-height: 65vh;
		padding: 5px;
		text-align: left;
		overflow: auto;
		box-sizing: border-box;
	}

	#output:active {
		border: 1px solid lightblue;
	}

	#output:hover {
		border: 1px solid lightblue;
	}