:host, *, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:host {
  --padding: 6px;
  position: relative;
  height: 80px;/*width: 300px;height: 500px;width: 500px;height: 225px;*/
  display: inline-block;
  vertical-align: bottom;
  color-scheme: light;
  --color: #000000;
  color: var(--color);
  font-size: 13px;
  font-family: ui-monospace, "Cousine", "Consolas", monospace;
  line-height: 1.4;
  --selection-color: inherit;
  --selection-background: #75b1ff38;
  --selection-background-inactive: #a1a1a138;
  background: #ffffff;
  overflow: hidden;
  cursor: text;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: 100%;
}
:host(.color-scheme-dark) {
  color-scheme: dark;
  --color: #eaeaea;
  background: #242424;
}
:host(:-moz-window-inactive) {
  --selection-background: var(--selection-background-inactive);
}
[part="container"] {
  width: 100%;
  height: 100%;
  display: flex;
}
[part="gutter"] {
  counter-reset: line-number;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  list-style: inside none;
  overflow: hidden;
}
[part="line-number"]::before {
  content: counter(line-number);
  counter-increment: line-number;
  --padding-multiplier: 2;
  padding: 0 calc(var(--padding) * var(--padding-multiplier));
  display: block;
  text-align: right;
  opacity: 0.45;
}
[part="line-number"]:first-child::before {
  padding-top: calc(var(--padding) + var(--overscroll-top,0px));
}
[part="line-number"]:last-child {
  flex-basis: 100%;
}
[part="line-number"]:last-child::before {
  padding-bottom: calc(var(--padding) + var(--overscroll-bottom,0px));
  height: 100%;
}
[part="line-number"]:last-child::after {
  content: "";
  display: block;
  height: var(--overflow-offset-y,0px);
}
[part="content"] {
  position: relative;
  flex-basis: 100%;
  display: flex;
  overflow: hidden;
}
[part="syntax"] {
  padding: var(--padding);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font: inherit;
  background-clip: padding-box;
  border: 0 solid transparent;
  border-right-width: var(--overflow-offset-x,0px);
  border-bottom-width: var(--overflow-offset-y,0px);
  overflow: hidden;
  transform: translate(calc(var(--overscroll-left,0px) + calc(var(--overscroll-right,0px) * -1)),calc(var(--overscroll-top,0px) + calc(var(--overscroll-bottom,0px) * -1)));
}
@supports (-moz-appearance: none) {
  [part="syntax"] {
    padding-left: 0;
    border-left-width: var(--padding);
    border-right-width: calc(var(--padding) + var(--overflow-offset-x,0px));
  }
}
:host(:not([syntax-highlight])) [part="syntax"] {
  display: none;
}
[part="editor"] {
  padding: var(--padding);
  min-width: 0;
  flex-basis: 100%;
  color: var(--color);
  font: inherit;
  line-height: inherit;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  z-index: 1;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
}
@supports not (-webkit-touch-callout: none) {
  [part="editor"] {
    caret-color: var(--color);
  }
}
[part="editor"]::placeholder {
  color: var(--color);
  opacity: 0.55;
  white-space: pre-wrap;
}
[part="editor"]::selection {
  color: var(--selection-color);
  background: var(--selection-background);
}
[part="editor"]::selection:window-inactive {
  background: var(--selection-background-inactive);
}
:host([syntax-highlight]) [part="editor"] {
  color: transparent;
}