*,*:after,*:before{padding:0;margin:0;box-sizing:border-box;font-family:sans-serif}body{background-color:#87ceeb;background-image:url(https://www.transparenttextures.com/patterns/az-subtle.png)}.app h1{text-align:center;font-size:4rem;background:linear-gradient(to right,#00f,red);-webkit-background-clip:text;color:transparent;margin:4rem 20%}h2{text-align:center;font-size:4rem;background:linear-gradient(to right,#5b205b,#1500ff);-webkit-background-clip:text;color:transparent}.ui{display:flex;justify-content:center;align-items:center;min-height:45vh;flex-direction:column}.content{-webkit-user-select:none;user-select:none;border:0 solid grey;max-width:1300px;font-size:3rem;line-height:4.2rem;box-shadow:#0000003d 0 3px 8px;border-radius:10px;background-color:#fff;padding:.5rem 1rem}.inputDiv{display:flex;margin:2rem;background-color:#42404066;padding:12px;border-radius:10px;padding:.86rem 24px;width:100%;justify-content:center;align-items:center}input{font-size:3rem;padding:10px;border-width:1px;border-radius:10px}input:focus{outline:none}.time{padding:1.23rem .3rem;background-color:#000c;color:#fff;font-size:2.2rem;margin:0 10px;border-radius:10px}.editTimeInputsDiv{display:flex;justify-content:center;align-items:center;padding:1.23rem .3rem;background-color:#639;color:#fff;font-size:2.2rem;margin:0 10px;border-radius:10px}.editTimeInputsDiv input{width:42px;display:inline-block;padding:1px;border:none;background:transparent;margin:0;font-size:2.2rem;color:#fff}.editTimeInputsDiv input::placeholder{color:#fff}.refresh{padding:.34rem 1.5rem;background-color:#3973cf;color:#fff;font-size:3rem;border-radius:10px;cursor:pointer}.icon{margin-top:10px}@keyframes anim1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes anim2{0%{transform:translatey(-200px)}to{transform:translatey(0)}}@keyframes anim3{0%{transform:scale(1)}to{transform:scale(0)}}.result{position:absolute;z-index:1;border:none;border-radius:1rem;padding:10rem 3rem;background-color:#fff;box-shadow:7px 4px 10px gray;left:35%;right:35%;top:20%;bottom:25%;animation:anim2 .2s ease-in 0ms 1}.overlay:before{content:"";background-color:#000000b3;position:absolute;top:0;left:0;right:0;bottom:0;animation:anim1 .2s ease-in 0ms 1;transition:scale 2s ease-in 0ms}.close-modal-btn{position:absolute;top:10px;right:10px;padding:10px 13px;font-size:3rem;border:none;background-color:transparent;cursor:pointer}.inner-div p{font-size:3.5rem;color:#fff;display:flex;justify-content:center}.inner-div div{background-color:#7352e8;padding:2rem 0;border-radius:10px;margin-top:1rem;box-shadow:2px 3px 5px 5px #d4d2d2}span{margin:0 4px;display:inline-block}.correct{background-color:#ccc6c6;margin:4px;border-radius:4px}.error{color:red}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#0000004d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}.modal-card{position:relative;background:#fff;border-radius:16px;box-shadow:0 10px 25px -5px #0000001a;width:100%;max-width:440px;overflow:hidden;animation:slideIn .3s ease-out}.close-button{position:absolute;right:1rem;top:1rem;background:none;border:none;padding:.5rem;cursor:pointer;border-radius:50%;z-index:10;transition:background-color .2s}.close-button:hover{background-color:#0000000d}.close-button svg{width:24px;height:24px;color:#00000080}.modal-header{background:linear-gradient(to right,#3b82f6,#8b5cf6);padding:1.5rem;text-align:center}.modal-header h2{color:#fff;font-size:1.5rem;font-weight:700;margin:0}.modal-content{padding:2rem}.score-display{text-align:center;margin-bottom:2rem}.score-number{font-size:3.5rem;font-weight:700;color:#3b82f6;line-height:1}.wpm-label{font-size:1.5rem;color:#9ca3af;margin-left:.5rem}.score-label{color:#6b7280;margin-top:.5rem}.stats-container{background-color:#f9fafb;border-radius:12px;padding:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem}.stat-item{text-align:center;padding:1rem}.stat-label{font-size:.875rem;color:#6b7280;margin-bottom:.25rem}.stat-value{font-size:1.5rem;font-weight:600;color:#374151}.stat-value.error{color:#ef4444}.try-again-button{width:100%;padding:.875rem;background:linear-gradient(to right,#3b82f6,#8b5cf6);color:#fff;border:none;border-radius:12px;font-weight:500;cursor:pointer;transition:opacity .2s}.try-again-button:hover{opacity:.9}.invisible{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 1700px){.inputDiv{display:flex;margin:2rem;background-color:#42404066;padding:12px;border-radius:10px;align-items:center}.content{max-width:1200px;margin:0 4%}.app h1{margin:4rem 20%}.icon{margin-top:10px}.close-modal{position:absolute;top:10px;right:10px;padding:10px 13px;font-size:1rem;border:none;background-color:transparent}.inner-div p{font-size:1rem;color:#fff;display:flex;justify-content:center}.inner-div div{background-color:#7352e8;padding:.5rem 0;border-radius:10px;margin-top:1rem;box-shadow:2px 3px 5px 5px #d4d2d2}.result{cursor:pointer;position:absolute;z-index:1;border:none;border-radius:1rem;padding:10rem 3rem;background-color:#fff;box-shadow:7px 4px 10px gray;left:35%;right:35%;top:30%;bottom:40%}}@media (max-width: 900px){.inputDiv{display:flex;margin:2rem;background-color:#42404066;padding:4px;border-radius:10px;align-items:center}input{font-size:1.15rem;padding:10px 0;border-width:1px;border-radius:10px;box-shadow:inset 2px 1px 3px 3px #c7c4c4}.time{padding:1rem .5rem;background-color:#000c;color:#fff;font-size:1rem;margin:0 10px;border-radius:10px}.refresh{padding:1rem;background-color:#3973cf;color:#fff;font-size:1rem;border-radius:10px}.content{max-width:600px;margin:2%;overflow-x:hidden;font-size:1.5rem;padding:none;line-height:2.5rem}.ui{overflow-y:hidden;overflow-x:hidden}.app h1{margin:4rem 10%;font-size:2rem}.icon{margin-top:.5px}h2{text-align:center;font-size:2rem;background:linear-gradient(to right,#5b205b,#1500ff);-webkit-background-clip:text;color:transparent}.close-modal{position:absolute;top:10px;right:10px;padding:10px 13px;font-size:1rem;border:none;background-color:transparent}.inner-div p{font-size:10px;color:#fff;display:flex;justify-content:center}.inner-div div{background-color:#7352e8;padding:.5rem 0;border-radius:10px;margin-top:1rem;box-shadow:2px 3px 5px 5px #d4d2d2}.result{position:absolute;z-index:1;border:none;border-radius:1rem;padding:10rem 3rem;background-color:#fff;box-shadow:7px 4px 10px gray;left:35%;right:35%;top:30%;bottom:40%}}@media (max-width: 650px){.result{position:absolute;z-index:1;border:none;border-radius:1rem;padding:6rem 3rem 3rem;background-color:#fff;box-shadow:7px 4px 10px gray;left:23%;right:23%;top:20%;bottom:35%}.inner-div div{background-color:#7352e8;padding:1rem 0;border-radius:10px;margin-top:1rem;box-shadow:2px 3px 5px 5px #d4d2d2}.inner-div p{font-size:1rem}.inner-div{padding:0rem;margin:auto -10%}}@media (max-width: 370px){.inputDiv{display:flex;margin:3rem;background-color:#42404066;padding:4px;border-radius:10px;align-items:center}input{font-size:.85rem;padding:10px 0;border-width:1px;border-radius:10px;box-shadow:inset 2px 1px 3px 3px #c7c4c4}.time{padding:.8rem .5rem;background-color:#000c;color:#fff;font-size:1rem;margin:0 10px;border-radius:10px}.refresh{padding:.8rem 1rem;background-color:#3973cf;color:#fff;font-size:1rem;border-radius:10px}.result{position:absolute;z-index:1;border:none;border-radius:1rem;padding:6rem 3rem 3rem;background-color:#fff;box-shadow:7px 4px 10px gray;left:14%;right:14%;top:20%;bottom:35%}.inner-div div{background-color:#7352e8;padding:1rem 0;border-radius:10px;margin-top:1rem;box-shadow:2px 3px 5px 5px #d4d2d2}.inner-div p{font-size:1rem}.inner-div{padding:0rem;margin:auto -25%}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}