#pulsar-ui-root {
  min-height: inherit;
}

:root,
:host {
  font-size: 0.9px;
  font-family: "Inter", sans-serif;
  font-feature-settings: "lnum";
  --font-weight-normal: 300;
  --font-weight-bold: 500;
  font-weight: var(--font-weight-normal);
  color: var(--text-color);
  line-height: 1.5;
  font-variant-ligatures: none;
  --teal-color: #1de9b6;
  --background-color: #fff;
  --background-color-backdrop: rgba(94, 80, 134, 0.8);
  --surface-color: #f4f5f8;
  --surface-color-backdrop: rgba(94, 80, 134, 0.9);
  --text-color: rgba(0, 0, 0, 0.816);
  --border-color: #eceff2;
  --border-color-dark: var(--text-color);
  --pulsar-color: #8f4e8b;
  --transition-short: all 180ms ease 0s;
  --backdrop-filter-blur: blur(12px);
  --accent-color-green: #4cb782;
  --accent-color-red: #fe6e6e;
  --accent-color-yellow: #f2c94c;
  --accent-color-blue: #6e79d6;
  --accent-color-light-blue: #8fa0ff;
  --accent-color-purple: #9d50ff;
  --max-content-width: 1000px;
  --toastify-icon-color-success: var(--accent-color-green) !important;
}

html,
body {
  padding: 0;
  margin: 0;
  background-color: var(--background-color);
  min-height: 100vh;
}

body {
  font-size: 14rem;
}

input,
textarea,
button,
option,
select {
  font-family: inherit;
  background-color: #fff;
}

strong, b {
  font-weight: var(--font-weight-bold);
}

a {
  color: var(--accent-color-blue);
  text-decoration: none;
}

.A:hover {
  opacity: 0.5;
  text-decoration: underline;
}

ul {
  margin: 8rem;
  padding-left: 1.4ch;
}

* {
  box-sizing: border-box;
}

code,
pre {
  font-family: "Menlo", monospace;
  overflow: auto;
}

code.hljs,
pre.hljs {
  border-radius: 4rem;
  padding: 1rem 6rem;
  font-size: 14rem;
}

code.hljs {
  padding: 0rem 4rem !important;
}

pre.hljs {
  padding: 8rem 18rem;
}

hr {
  background-color: var(--surface-color);
  width: 100%;
  max-width: var(--max-content-width);
  height: 4rem;
  border: none;
  border-radius: 4rem;
}

code {
  background-color: var(--surface-color);
  padding: 0rem 8rem;
  border-radius: 4rem;
}

@keyframes loading-overlay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.066;
  }
}

.loading-overlay:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: #000;
  animation-name: loading-overlay;
  animation-duration: 0.66s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.highlight-substring {
  background-color: var(--accent-color-yellow);
  border-radius: 2rem;
}