.root {
  box-sizing: border-box;
  background-color: white;
  font-family: var(--sans-serif);
  line-height: 1.2;
  color: #020402;
}

.root {
  --primary: #c0da74;
  --primary-light: #d4e09b;
  --primary-dark: #9aae5d;
  --primary-bg: #f5fbef;
  --primary-light-bg: #fafdf7;
  --primary-dark-bg: #dde2d7;
  --secondary: #8cdfc7;
  --secondary-light: #b7fcf3;
  --secondary-lighter: #dbfef9;
  --secondary-dark: #1b998b;
  --secondary-dark-15: #1b998b26;
  --secondary-darker: #0e5846;
  --secondary-bg: #d9f4ec;
  --secondary-light-bg: #ecfaf6;
  --monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
    monospace;
  --sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}

.root {
  --h5w-matrix--fontFamily: var(--monospace);
  --h5w-matrix-cell--bgColorAlt: var(--secondary-light-bg);
  --h5w-matrix-indexCell--bgColor: var(--primary-bg);
  --h5w-matrix-indexCell--bgColorAlt: var(--primary-light-bg);
  --h5w-matrix-anchorCell--bgColor: var(--primary-dark-bg);
  --h5w-btn-hover--bgColor: var(--secondary-lighter);
  --h5w-btnPressed--bgColor: var(--secondary-light);
  --h5w-toolbar--bgColor: var(--secondary-light-bg);
  --h5w-toolbar-label--color: var(--secondary-dark);
  --h5w-toolbar-input-focus--shadowColor: var(--secondary-dark);
  --h5w-domainSlider-track--bgColor: var(--secondary-dark-15);
  --h5w-domainSlider-dataTrack--bgColor: var(--secondary-dark);
  --h5w-domainSlider-dataTrack--shadowColor: var(--secondary-darker);
  --h5w-domainSlider-thumb--bgColor: var(--secondary);
  --h5w-domainSlider-thumb-auto--bgColor: var(--secondary-light);
  --h5w-domainSlider-boundInput-focus--shadowColor: var(--secondary-dark);
  --h5w-domainSlider-boundInput-editing--borderColor: var(--secondary-dark);
  --h5w-selector-option-hover--bgColor: var(--secondary-light-bg);
  --h5w-selector-option-selected--bgColor: var(--secondary-light);
  --h5w-domainSlider-histogram--color: var(--secondary-dark);
  --h5w-domainSlider-histogram-indicator--color: var(--secondary-darker);
  --h5w-interactionHelp-shortcut--bgColor: var(--primary-light);

  --h5w-line--color: darkblue;
  --h5w-line--colorAux: orangered, forestgreen, red, mediumorchid, olive;
}

.root *,
.root *::before,
.root *::after {
  box-sizing: inherit;
}

.root abbr[title] {
  cursor: help;
  border-bottom: 1px dotted;
  text-decoration: none;
}

@media (min-width: 50em) {
  .root {
    font-size: 1.125rem;
  }
}

@media (prefers-color-scheme: dark) {
  .root[data-allow-dark-mode] {
    filter: invert();

    /* Set shadows to lighter colors so they remain dark once inverted */
    --h5w-btnRaised--shadowColor: #f5f5f5;
    --h5w-btnRaised-hover--shadowColor: #fff;
    --h5w-domainSlider-track--shadowColor: #f5f5f5;
    --h5w-domainSlider-dataTrack--shadowColor: #fff;

    /* Change line colors for better contrast once inverted */
    --h5w-line--color: deepskyblue;
    --h5w-custom--line-colorAux: orange, lightgreen, red, violet, gold;
  }

  .root[data-allow-dark-mode] [data-keep-colors],
  .root[data-allow-dark-mode] [data-keep-canvas-colors] canvas {
    filter: invert(); /* invert back to normal colors */
  }
}

@media (prefers-reduced-motion) {
  .root *,
  .root *::before,
  .root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.explorer {
  display: flex;
  scrollbar-width: thin;
  background-color: var(--primary-bg);
}

.splitter {
  width: 5px !important;
  border-color: lightgray !important;
  transition: background-color 0.2s ease-in-out !important;
}

.splitter:hover {
  background-color: lightgray !important;
}

.mainArea {
  display: flex;
  flex-direction: column;
}

.fallback {
  composes: fallback from global;
}

.fallbackBar[data-mode='inspect'] {
  height: 2.875rem;
  background-color: var(--primary-bg);
}

.fallbackBar[data-mode='display'] {
  height: 2.5rem;
  background-color: var(--secondary-light-bg);
}

.error {
  composes: error from global;
}

.error > span {
  margin-left: 0.5rem;
}

.retryBtn {
  composes: btnClean btnLink from global;
}