/* The screen before the app is ready: cream (dark green in a dark system theme), the pot and the name. */
html, body { margin: 0; height: 100%; background: #FFF8EE; }
@media (prefers-color-scheme: dark) { html, body { background: #101612; } }

#loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1B2A22;
  z-index: 0;
}
@media (prefers-color-scheme: dark) { #loader { color: #E8EFEA; } }

#loader .pot {
  width: 64px;
  height: 61px;
  background: url("icons/Icon-192.png") center / contain no-repeat;
  border-radius: 14px;
  animation: bob 1.4s ease-in-out infinite;
}
#loader .name { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.3px; }
#loader .name span { color: #1F7A41; }
@media (prefers-color-scheme: dark) { #loader .name span { color: #62C98A; } }
#loader .note { margin: 0; font-size: 16px; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { #loader .pot { animation: none; } }