@font-face {
	font-family: "JetBrains Mono";
	src: url("JetBrainsMono-ExtraBold.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: block;
}

:root {
	--bg:   black;/*#222222;*/
	--bg2:  black;/*#0e0e0e;*/
	--fg:   #bbbbbb;
	--fg2:  #888888;
	--hi:   #eeeeee;
	--sel:  #005577;
	--bord: #444444;
	--font: "JetBrains Mono", "Liberation Mono", monospace;
	--size: 15px;
	--bar:  20px;
}

* { box-sizing: border-box; margin: 0; padding: 0 }

html, body { height: 100% }

body {
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--fg);
	font: var(--size)/1.55 var(--font);
	overflow: hidden;
}

#main { display: flex; flex: 1; min-height: 0 }
body[data-split="h"] #main { flex-direction: column }

#in, #out { flex: 1 1 50%; min-width: 0; min-height: 0; overflow: auto }

#in {
	background: var(--bg2);
	color: var(--fg);
	border: 0;
	outline: 0;
	resize: none;
	font: var(--size)/1.55 var(--font);
	padding: 8px 10px;
	tab-size: 4;
	caret-color: var(--hi);
	white-space: pre-wrap;
}

#in::selection, #out ::selection, #out::selection { background: var(--sel); color: var(--hi) }
body[data-split="v"] #out { border-left: 1px solid var(--bord) }
body[data-split="h"] #out { border-top: 1px solid var(--bord) }
body[data-view="2"] #in { display: none }

#out { padding: 8px 14px }

::-webkit-scrollbar { width: 6px; height: 6px }
::-webkit-scrollbar-thumb { background: var(--bord) }

#bar {
	display: flex;
	gap: 12px;
	align-items: center;
	height: var(--bar);
	padding: 0 8px;
	background: var(--bg);
	border-top: 1px solid var(--bord);
	font-size: 12px;
	color: var(--fg2);
	white-space: nowrap;
}

#st-mode, #bar button { background: var(--sel); color: var(--hi); padding: 0 6px }

#bar button {
	border: 0;
	font: 12px/var(--bar) var(--font);
	height: 100%;
	cursor: pointer;
}

#bar button:hover { background: var(--hi); color: var(--bg) }
#st-msg { color: var(--hi); overflow: hidden; text-overflow: ellipsis }
#st-msg.ask { background: var(--sel); padding: 0 6px }
#st-pos { margin-left: auto }

#out > *:first-child { margin-top: 0 }
#out h1, #out h2, #out h3, #out h4, #out h5, #out h6 {
	color: var(--hi);
	font-weight: 700;
	line-height: 1.3;
	margin: 1.1em 0 .4em;
}
#out h1 { font-size: 1.5em; border-bottom: 1px solid var(--bord); padding-bottom: .2em }
#out h2 { font-size: 1.25em }
#out h3 { font-size: 1.1em }
#out h4, #out h5, #out h6 { font-size: 1em; color: var(--fg) }

#out p, #out ul, #out ol, #out table, #out pre, #out blockquote { margin: .7em 0 }
#out strong { color: var(--hi) }
#out em { font-style: italic }
#out del { color: var(--fg2) }
#out a { color: #7ab0c8 }
#out a:hover { color: var(--hi) }

#out code { background: var(--bg); color: var(--hi); padding: 0 3px }
#out pre {
	background: var(--bg2);
	border: 1px solid var(--bord);
	padding: 8px 10px;
	overflow-x: auto;
}
#out pre code { background: none; padding: 0; color: var(--fg) }

#out blockquote {
	border-left: 2px solid var(--bord);
	padding-left: 10px;
	color: var(--fg2);
}
#out ul, #out ol { padding-left: 1.4em }
#out li::marker { color: var(--fg2) }

#out table { border-collapse: collapse; width: 100% }
#out th, #out td { border: 1px solid var(--bord); padding: 2px 8px }
#out th { color: var(--hi); background: var(--bg2) }

#out hr { border: 0; border-top: 1px solid var(--bord); margin: 1.2em 0 }
#out img { max-width: 100% }

@media (max-width: 640px) { #main { flex-direction: column } }