body {
  margin: 0;
  overflow: hidden;
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen,
  Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  color-scheme: dark;
  color: #E1E2EB;
  background-color: #121316;
  --container-color: #44474E;
  --primary-color: #ADC6FF;
  --primary-on-color: #002E68;
  --surface-container-color: #1F1F23;
  --secondary-container-color: #3F4759;
  --secondary-on-container-color: #DAE2F9;
}

@media (prefers-color-scheme: light) {
  body {
    color-scheme: light;
    color: #191B22;
    background-color: #FAF8FD;
    --container-color: #E1E2EB;
    --primary-color: #005BC0;
    --primary-on-color: #FFFFFF;
    --surface-container-color: #EFEDF2;
    --secondary-container-color: #DAE2F9;
    --secondary-on-container-color: #131B2C;
  }
}

body > * {
  position: fixed;
}

body > canvas {
  /* no selection of canvas */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}

body > #app-text-field {
  opacity: 0;
  top: -10px;
  left: -10px;
  width: 0;
  height: 0;
}

body > #app-crash-dialog {
  width: 100vw;
  height: 100vh;
  top: 0;
  background-color: inherit;
  overflow: auto;
  padding: 8px;
}

/* Loader: */

#app-wasm-loader {
  top: 0;
  left: 0;
  z-index: 1000;
  width: calc(100vw - 2em);
  height: calc(100vh - 2em);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1em;
}

#app-wasm-loader-header {
  display: flex;
  align-items: center;
  column-gap: 1em;
}

#app-wasm-loader-icon {
  width: 5em;
  height: 5em;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#app-wasm-loader-title {
  font-size: 24px;
}

#app-wasm-loader-label {
  font-size: 16px;
}

#app-wasm-loader-progress {
  flex-grow: 1;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  height: 1em;
  border-radius: 100px;
  color: var(--primary-color);
  background-color: var(--container-color);
}

#app-wasm-loader-progress::-webkit-progress-bar {
  border-radius: 100px;
  background-color: var(--container-color);
}

#app-wasm-loader-progress::-webkit-progress-value {
  border-radius: 100px;
  background-color: var(--primary-color);
}

#app-wasm-loader-progress::-moz-progress-bar {
  border-radius: 100px;
  background-color: var(--primary-color);
}

#app-wasm-loader > main {
  overflow: auto;
}

#app-wasm-loader * {
  border: unset;
  margin-block: unset;
  font-family: unset;
}