/* 起動中の見た目(アプリの JavaScript が動くまでの一瞬)。
   index.html の #root の説明文は、検索エンジンと JavaScript を使わない人のためのもの。
   JavaScript が使える普通の表示では、その文を見た目からは隠し(読み上げ・検索には残す)、サイトの色の背景と小さな印だけを出す。
   JavaScript が無い環境では boot-noscript.css が説明文を表示し直す。 */
html { background: #faf7fc; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { html { background: #22212b; } }
html[data-theme='neutral'] { background: #121214; }
body { margin: 0; }
#root > main.boot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* 中央に、ゆっくり光る丸(ロゴの代わり)。アプリが描かれると #root の中身が入れ替わって消える */
#root:has(> main.boot)::before {
  content: '';
  position: fixed;
  left: 50%;
  top: 45%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 3px solid rgba(140, 120, 220, 0.25);
  border-top-color: rgba(140, 120, 220, 0.9);
  animation: boot-spin 0.9s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #root:has(> main.boot)::before { animation: none; } }