html, body {
  display: block;
  margin: 0px;
  padding: 0px;
  height: 100vh;
  width: 100vw;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  padding: 16px;
  background: hsl(0 0% 96%);
}

body > div {
  flex: 1;
}

.panel {
  background: hsl(0 0% 100%);
  box-shadow: inset 0px 0px 0px 1px hsl(0 0% 0% / 10%);
  border-radius: 4px;
}

body > div:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

body > div:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 350px;
  flex-shrink: 0;
}

.element-selector {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  padding: 16px;
  gap: 4px;
}

.element-button {
  appearance: none;
  border: none;
  background: rgb(18, 151, 223);
  color: white;
  border-radius: 4px;
  padding: 6px;
  box-shadow: inset 2px 2px 2px 0px hsl(0 0% 100% / 33%),
              inset -2px -2px 2px 0px hsl(0 0% 0% / 15%);
  
  transition: box-shadow 200ms linear, transform 200ms ease-out;
  font-size: 22px;
  cursor: pointer;
}

.element-button[type=end] {
  background: rgb(223, 18, 97);
}

.element-button[type=selfClosing] {
  background: rgb(18, 223, 165);
  color: black;
}

.element-button:disabled {
  opacity: 33%;
  cursor: not-allowed;
}

.element-button:not(:disabled):active {
  transform: scale(96%);
  transition-duration: 40ms;
  box-shadow: inset -2px -2px 2px 0px hsl(0 0% 100% / 33%),
              inset 2px 2px 2px 0px hsl(0 0% 0% / 15%);
}

.output-panel {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  padding: 16px;
}

.output {
  width: 100%;
  height: 100%;
}

.source-panel {
  flex: 1;
  padding: 16px;
}

.source-code {
  white-space: pre-wrap;
}

.inline-text-input {
  display: inline-block;
  opacity: 33%;
  appearance: none;
  border: none;
  border-bottom: 1px dashed hsl(0 0% 0%);
  min-width: 64px;
  font-family: inherit;
  font-size: inherit;
  vertical-align: top;
  white-space: pre-wrap;
}

.inline-text-input:focus-within {
  opacity: 100%;
}