/* Boot splash — the first paint, before the module bundle executes.

   Self-contained on purpose: this stylesheet loads ahead of the console
   engine, so it may not reference --mirai-* tokens. It is removed from the
   document as soon as React commits its first render into #root.

   The Content-Security-Policy on this app forbids inline <style>, so the
   splash cannot be styled from the document head; it lives here and is
   linked as a same-origin stylesheet. */

#os2-boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #111722;
  z-index: 5;
}

html[data-theme="paper"] #os2-boot {
  background: #f3efe7;
}

#os2-boot .mark {
  width: 58px;
  height: 58px;
  margin: 0 auto;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1b2a40, #12203a);
  border: 1px solid rgb(166 117 82 / 50%);
  box-shadow: 0 0 34px rgb(166 117 82 / 38%);
}

html[data-theme="paper"] #os2-boot .mark {
  background: linear-gradient(150deg, #fbf9f5, #ede7db);
  border-color: rgb(156 108 72 / 42%);
  box-shadow: 0 2px 12px -4px rgb(62 56 44 / 30%);
}

#os2-boot .txt {
  margin-top: 16px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7a8194;
  text-align: center;
  line-height: 1.7;
}

html[data-theme="paper"] #os2-boot .txt {
  color: #706a60;
}

@media (prefers-reduced-motion: no-preference) {
  #os2-boot .mark {
    animation: os2boot 1.6s ease-in-out infinite;
  }

  html[data-theme="paper"] #os2-boot .mark {
    animation: none;
  }
}

@keyframes os2boot {
  0%,
  100% {
    box-shadow: 0 0 24px rgb(166 117 82 / 30%);
  }

  50% {
    box-shadow: 0 0 52px rgb(200 154 107 / 30%);
  }
}