:root {
  color-scheme: light dark;
  --bg: #f4f5fb;
  --text: #1c1f26;
  --hint: #5b6180;
  --accent: #6366f1;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1220; --text: #e8eaf6; --hint: #a3a8c9; --accent: #818cf8; }
}
html, body { margin: 0; min-block-size: 100%; background: var(--bg); color: var(--text); }
body { font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-inline-size: 34rem; margin: 18vh auto 0; padding-inline: 20px; text-align: center; }
.logo { border-radius: 16px; }
#status { font-size: 1.05rem; font-weight: 600; margin-block: 18px 8px; }
#hint { color: var(--hint); margin-block: 0 16px; }
button {
  font: inherit; font-weight: 600; cursor: pointer;
  min-block-size: 38px; padding-inline: 18px;
  border: 1px solid var(--accent); border-radius: 12px;
  background: transparent; color: var(--accent);
}