:root {
  color-scheme: dark;
  --bg: #1c1c1e;
  --ink-muted: #a9a9b0;
  --brand: #ffb000;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

#app {
  position: fixed;
  inset: 0;
}

#boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* RevvySplashDefaults.AnimationSize (154px) draws the R at 90.5% of its width. */
#boot .mark {
  width: 139.4px;
  color: var(--brand);
  height: auto;
}

/* Announced, not shown: visible text would push the R off the center the splash uses. */
#boot .hint {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#boot .notice {
  position: absolute;
  inset: auto 16px 32px;
  margin: 0;
  color: var(--ink-muted);
}