@font-face { font-family: New Computer Modern; src: url('NewCM10-Book.otf')}
@font-face { font-family: New Computer Modern; font-weight: bold; src: url('NewCM10-Bold.otf');}

.preview::after {
    content: "";
    display: block;
    height: var(--scroll-buffer, 0px);
}

/* .preview {
	overflow-anchor:none;
} */

.tikz-placeholder {
	visibility:hidden;
    pointer-events: none;
	display:inline-block;
}

body {
  font-family: "New Computer Modern", sans-serif;
  background-color: #f9f9f9;
  color: #222;
}

main {
  height: calc(100vh - 13.5em); /* adjust for header/toolbar */
}


code {
  font-family: "Consolas", monospace;
}

mark {
	outline: .4em solid red;
	outline-offset: .4em;
	margin: .4em 0;
	background-color: transparent;
	display: inline-block;
}

code[class*="language-"], pre[class*="language-"] {
    white-space:pre-wrap !important;
    /* word-break: break-word !important; */
}

header { text-align: center; margin-bottom: 1em;}

.toolbar { text-align: center; margin-bottom: 1em;}

#demo-container {
  display: flex;
  flex-flow: row;
  column-gap: 8em;
  height: 100%;
}

.pair {
  display: flex;
  flex-direction: row;
  gap:0.5em;
  flex: 1 1 0;
  height: 100%;
}


/* left column = editor, right = preview */
.pane {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
}

.pane .header {
  display:flex;
  align-items:center;
  justify-self:center;
  gap: 0.5em;
  padding-bottom:0.5em;
  font-size: 0.9rem;
}



textarea {
  font-family: monospace;
  font-size: 1em;
  line-height: 1.2;
  padding: 0.5em;
  border: 1px solid #ccc;
  background-color: black;
  color: white;
  white-space: pre-wrap;
  width: 25em;
  /* max-width: 35vw; */
  resize: auto;
}

.preview {
  border: 1px solid #ccc;
  background: white;
  line-height: 1.4em;
  padding-left:0.5em;
  padding-right:10%;
  padding-bottom:30em;
  border-radius: 4px;
  
  flex: 0 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap:normal;
  min-width:25em;
  width:100%;
  /* max-width:50vw; */
}

/* small controls in header */
.pair button.control {
  background: #eee;
  border: 1px solid #bbb;
  border-radius: 4px;
  padding: 0.2em 0.4em;
  cursor: pointer;
  font-size: 0.9rem;
}

#minimised-container {
  margin-top: 1.25em;
  border-top: 1px dashed #ddd;
  padding-top: 0.75em;
}

#minimised-list { list-style:none; padding-left:0;}
#minimised-list li {
  padding: 0.35em 0.5em;
  border: 1px solid #eee;
  margin-bottom: 0.4em;
  background: #fff;
  display:flex;
  justify-content:space-between;
  gap: 0.5em;
  align-items:center;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#minimised-list butt

.cm-latex-delim {
  color: #68f888; 
  font-weight: bold;
}

.cm-latex-command {
  color: #dcdcaa;
}

/* Math delimiters like $, $$, \( \), \[ \] */
.cm-latex-delim {
  color: #68f888;   
  font-weight: bold;
}

/* \begin{...} and \end{...} tokens */
.cm-latex-env {
  color: rgb(49 174 239);
}

/* STUFF FOR THE CM6 VERSION */
.cm-content {
  font-family: Consolas, monospace;
  line-height: 1.2;
}

.cm-keyword { color: #68f888; font-weight: bold; }
.cm-tagName { color: rgb(49 174 239); }
.cm-controlKeyword { color: #dcdcaa; }
.cm-bracket { color: white; }