@import url('https://unpkg.com/@observablehq/inspector@5.0.1/src/style.css');

@font-face {
  font-family: 'FontWithASyntaxHighlighterLightOwl';
  src:
    url('./fonts/FontWithASyntaxHighlighterLightOwl-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'FontWithASyntaxHighlighter';
  src:
    url('./fonts/FontWithASyntaxHighlighter-Regular.woff2') format('woff2');
  font-weight: 400;
}

/** keep in sync with libertine.css */
.echo {
  display: block;
  font-family: "FontWithASyntaxHighlighterLightOwl", monospace;
  font-feature-settings: "colr", "calt";
  white-space: pre;
  font-size: 0.83rem;
  line-height: 1.42;

  padding: 1ch;
  /* cloned by libertine.css */
  overflow: auto;
  background-color: #f3f3f3;
  border-radius: 4px;
}


.echo.dark {
  font-family: "FontWithASyntaxHighlighter", monospace;
  background-color: #282828;
  color: #eee;
}


.echo[contenteditable]:hover {
  box-shadow: inset 0 0 0 1px #8b99c8;
}

.echo[contenteditable].dark:hover {
  box-shadow: inset 0 0 0 3px #8b99c8;
}
script.reflect::before {
  content: "<script data-display=\"" attr(data-display) "\" type=\"" attr(type) "\" class=\"" attr(class) "\" contenteditable=\"" attr(contenteditable) "\">";
}

script.reflect::after {
  content: "<\/script>";
}

style.reflect::before {
  content: "<style id=\"" attr(id) "\" class=\"" attr(class) "\" contenteditable=\"" attr(contenteditable) "\">";
}

style.reflect::after {
  content: "<\/style>";
}

.observablehq {
  display: inline;
}

@keyframes blink {
  67% {
    opacity: 0;
  }
}
.observablehq--running::before {
  content: 'LOADING';
  animation: blink 1s step-end infinite;
}