number-pad{display:grid;grid-template-columns:repeat(9,1fr);gap:clamp(5px,1.2vw,8px);width:min(100%,540px)}pad-key button{display:flex;flex-direction:column;align-items:center;width:100%;padding:.4rem 0 .3rem;background:var(--color-surface-container-lowest);border:var(--frame-width) solid var(--frame-color);box-shadow:2px 2px 0 var(--shadow-ink);transition:transform .25s var(--ease-spring),box-shadow .25s var(--ease-spring),background-color .15s var(--ease-emphasized)}pad-key button:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow-ink);background:var(--color-primary-container)}pad-key button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--shadow-ink);background:var(--color-tertiary-container)}key-digit{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.7rem,7.5vw,2.1rem);font-weight:560;color:var(--color-primary);line-height:1}key-count{font-size:.64rem;font-weight:600;line-height:1;color:var(--color-on-surface-variant)}pad-key[exhausted=true]{visibility:hidden}pad-key[celebrate=true]{visibility:visible;position:relative;z-index:3;animation:key-celebrate .55s var(--ease-spring) forwards}@keyframes key-celebrate{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.55) rotate(-7deg)}55%{transform:scale(1.35) rotate(6deg)}to{transform:scale(.2) rotate(24deg);opacity:0}}pad-key[celebrate=true] button{background:var(--color-tertiary-container);border-color:var(--color-on-tertiary-container);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-tertiary-container) 55%,transparent)}pad-key[celebrate=true] key-digit{color:var(--color-on-tertiary-container)}@media(min-width:940px){number-pad{grid-template-columns:repeat(3,1fr);gap:10px;width:100%}pad-key button{padding:.8rem 0 .6rem;box-shadow:4px 4px 0 var(--shadow-ink)}pad-key button:hover{box-shadow:5px 5px 0 var(--shadow-ink)}pad-key button:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--shadow-ink)}key-digit{font-size:2.7rem}key-count{font-size:.76rem}}