:root { --sky-top: #8fd0ff; --sky-bot: #e8f6ff; --paper: #fffaf0; --ink: #1b2a4a; --ink-2: #5a6785;
  --line: #e7dcc4; --sun: #ffc531; --orange: #ff7a3d; --orange-d: #d95a1f; --red: #ef4b4b; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: linear-gradient(var(--sky-top), var(--sky-bot)); color: var(--ink);
  font-family: 'Fredoka', system-ui, sans-serif; display: grid; place-items: center; padding: 16px; }
.card { background: var(--paper); border-radius: 30px; padding: 28px 32px 32px; text-align: center;
  box-shadow: 0 20px 50px rgba(27, 42, 74, .18); width: min(380px, 100%); }
.logo { display: block; width: min(250px, 80%); height: auto; margin: 0 auto; }
h1 { margin: 4px 0 2px; }
.sub { margin: 0 0 6px; font-weight: 600; font-size: 18px; }
.hint { margin: 0 0 18px; color: var(--ink-2); font-size: 18px; }
.dots { display: flex; gap: 14px; justify-content: center; margin-bottom: 14px; }
.dots span { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); transition: background .15s, border-color .15s; }
.dots span.on { background: var(--sun); border-color: var(--orange); }
.dots.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.err { color: var(--red); font-weight: 600; margin: 0 0 10px; }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pad button { font: 600 28px 'Fredoka', sans-serif; color: var(--ink); background: #fff; border: 3px solid var(--line);
  border-radius: 20px; padding: 14px 0; cursor: pointer; transition: transform .08s, border-color .15s; }
.pad button:hover { border-color: var(--orange); }
.pad button:active { transform: scale(.94); }
.pad button.del { font-size: 22px; color: var(--orange-d); }