*{background-color:#000;border:0;margin:0;padding:0;font-family:sans-serif}.controls,.meter{width:100%;height:100%;position:absolute;top:0;left:0}.number-pad{grid-template-columns:repeat(3,1fr);gap:10px;margin:0 auto;display:grid}.button{width:60px;height:60px;cursor:pointer;color:#0e0074;background-color:#cadef3;border:4px solid #76aae1;border-radius:.5rem;justify-content:center;align-items:center;font-size:2.2em;line-height:1rem;display:flex}.button.clear,.button.okay{font-size:4em}.controls{visibility:hidden;opacity:1;background-color:#111;flex-direction:column;justify-content:center;align-items:center;display:flex}.controls.transitioning{transition:opacity .5s}.controls.hide-controls{opacity:0}.controls.enable-controls{visibility:visible;display:flex}.controls .intervalValue{text-align:center;color:#222;width:50%;height:1.2em;background-color:#cadef3;border:1px solid #2b76c6;border-radius:.25em;margin-bottom:1em;font-size:10vh}.reveal-controls .controls{visibility:hidden;opacity:0}.hide-controls{opacity:0}.meter{width:10vw;height:100vh;background-color:#08081c;left:45vw;overflow:hidden}.countdown{width:100%;height:100%;background-color:#3737c6;transition:background-color .5s;position:absolute;bottom:0;left:0;transform:translateY(-100vh)}.countdown.finished{background-color:#ece821}@keyframes countdown{0%{transform:translateY(-99vh)}to{transform:translateY(0)}}