pattern-app {
  display: flex;
  gap: 0.5em;
  width: 100%;
  height: 100%;
}

pattern-app pre {
  margin: 0;
  font-size: 1.3em;
}


svg-diagram {
  display: block;
  width: 100%;
}
svg-diagram svg {
  width: 100%;
  height: 100%;
}
pattern-input {
  overflow-y: scroll;
  width: 100%;
  display: inline-block;
  outline: 2px solid blue;
  border-radius: 3px;
  height: 100%;
}
pattern-input .rel {
  position: relative;
}
pattern-input textarea{
  outline: none;
  border: none;
  width: 100%;
  height: 100000px;
  resize: none;
  overflow: hidden;
  /* max-height: 100%; */
  padding: 0;
  font-size: 1em;
}
pattern-input error {
  background: #f005;
}
pattern-input b {
  color: black;
}
pattern-input .display error:last-of-type {
  border-bottom: 1px solid red;
}
pattern-input .display {
  user-select: none;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1em;
  /* z-index: -1; */
  font-family: monospace;
  color: fieldtext;
  letter-spacing: normal;
  word-spacing: normal;
  display: inline-block;
  text-align: start;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0em;
  /* color: #0000; */
  width: 100%;
  height: 100%;
}
pattern-input .display > div:hover {
  color: green;
}
pattern-input .display > div:hover::after {
  content: attr(value);
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 1em;
  background: #888;
  color: white;
  padding: 0.3em 0.6em;
  border-radius: 0.5em;
}