:root{--ink:#1f2a44;--sky:#dff1ff;--sun:#ffc933;--coral:#ff6b5b}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--sky);color:var(--ink);font:700 1.1rem ui-rounded,"Nunito","Segoe UI",system-ui,sans-serif;padding:max(1rem,env(safe-area-inset-top)) 1rem 2rem}
main{max-width:56rem;margin:auto}
h1{font-size:clamp(2rem,7vw,3.5rem);margin:.5em 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1rem}
.tile{display:grid;place-items:center;gap:.5rem;min-height:9rem;padding:1rem;border:0;border-radius:1.5rem;background:#fff;color:inherit;font:inherit;text-decoration:none;box-shadow:0 .3rem 0 var(--ink);cursor:pointer}
.tile span,.num{font-size:4rem}
.tile:active{transform:translateY(.3rem);box-shadow:none}
.tile:focus-visible,input:focus-visible,.btn:focus-visible{outline:.25rem solid var(--coral);outline-offset:.2rem}
.big{font-size:clamp(3rem,14vw,6rem);text-align:center;margin:1rem 0}
form{display:grid;gap:.75rem;max-width:26rem;margin:.75rem 0}
input{padding:.8rem;border:.15rem solid var(--ink);border-radius:.75rem;font:inherit}
.btn{padding:.9rem 1.2rem;border:0;border-radius:.75rem;background:var(--sun);color:var(--ink);font:inherit;cursor:pointer}
.err{color:#b3261e}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.quiet{font-size:.9rem;opacity:.6;margin-top:2rem}