@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=PT+Mono&family=Roboto+Mono:wght@100..700&display=swap";.countdown{font-size:1.2rem;opacity:.8}:root{--correct-letter-bg: #95c590;--incorrect-letter-bg: #95c590;--green: #2ac670;--orange: #e65f3f;--line-height: 2rem;--cursor-color: #3295db}.playground{display:grid;place-items:center;min-height:80%;padding:.5rem;position:relative}.playground:focus{outline:none}.playground .typing-content{line-height:1.5;height:calc(var(--line-height)*8);width:75vw;overflow:hidden;border-radius:.25rem;font-family:PT Mono,monospace;font-weight:600;font-style:normal;font-size:2.1rem;padding-top:2rem;position:relative}.playground .typing-content .letter{padding:0;margin:5px 2px 5px 0;border-radius:3px;text-align:center}.playground .typing-content .active-line .letter{border-bottom:3px solid transparent}.playground .typing-content .active-line .letter.current{color:#ff0;border-radius:0;text-shadow:0px 0px 8px rgba(255,255,0,.829),0px 0px 22px rgba(255,255,0,1);animation:cursorBlink 1.75s 1s infinite both}.playground .typing-content .active-line .letter.pressed{opacity:1!important;transition:color .12s ease-in-out}.playground .typing-content .active-line .letter.pressed.correct-letter{color:#6f6;animation:pulseTextGreen;text-shadow:0px 0px 8px rgba(0,255,0,.7),0px 0px 22px rgba(0,255,0,1)}.playground .typing-content .active-line .letter.pressed.incorrect-letter{color:#ff2121;text-shadow:0px 0px 8px rgba(255,0,0,.8),0px 0px 22px rgb(255,0,0,1)}.playground .typing-content .next-lines{-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.4)),to(rgba(0,0,0,0)))}.playground .typing-content .tooltip-wrapper{position:absolute;top:-1rem;left:0}.playground .typing-content .tooltip-wrapper .tooltip{font-size:1rem;font-family:monospace;color:#ff0;background-color:#ffffff40;padding:.2rem .5rem;border-radius:3px}.playground #cursor{width:.9rem;height:.25rem;background-color:var(--primary-fg);position:fixed;border-bottom:4px solid transparent;animation:cursor-blink 1s infinite both}.playground .countdown-wrapper{position:absolute;top:-2.25rem;right:.5rem}@keyframes blink{0%{opacity:1}50%{opacity:0}to{opacity:1}}@keyframes cursorBlink{0%{border-color:#ff0}50%{border-color:transparent}to{border-color:#ff0}}@keyframes pulseTextYellow{0%{text-shadow:0px 0px 8px rgba(255,255,0,.829)}to{text-shadow:0px 0px 22px rgba(255,255,0,1)}}@keyframes pulseTextRed{0%{text-shadow:0px 0px 8px rgba(0,255,0,.7)}to{text-shadow:0px 0px 22px rgba(0,255,0,1)}}.result{display:flex;justify-content:center;align-items:center;font-family:Roboto Mono,monospace;padding:1rem 1rem 2rem 2rem;margin:2rem 0;border:var(--clr-neon) .125em solid;border-radius:5px}.result .metric{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-right:5rem}.result .metric .main{display:flex;flex-direction:column;align-items:center;justify-content:center}.result .metric .main .value{font-size:3.5rem}.result .metric .main .label{font-size:2rem}.result .metric .extra{display:flex;flex-direction:column;gap:.25rem;min-height:4rem}.result .metric .extra .value{font-size:1.25rem}.result .metric .extra .value .label{display:inline-block}.result .metric .extra .value .key{margin-right:.25rem}.result .metric .extra .value .key#hit{color:#6f6;text-shadow:0px 0px 8px rgba(0,255,0,.7),0px 0px 22px rgba(0,255,0,1)}.result .metric .extra .value .key#error{color:red;text-shadow:0px 0px 8px rgba(255,0,0,.8),0px 0px 22px rgb(255,0,0,1)}:root{--showcase-text-length: 22;--clr-neon: hsl(317 100% 54%);--clr-bg: hsl(323 21% 16%)}.showcase{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;height:90%}.showcase .title{font-size:3rem;text-shadow:0 0 5px #ffa500,0 0 15px #ffa500,0 0 20px #ffa500,0 0 40px #ffa500,0 0 60px #ff0000,0 0 10px #ff8d00,0 0 98px #ff0000;color:#fff6a9}.showcase .quotes{font-size:1.5rem;text-align:center;text-shadow:0px 0px 8px rgba(255,255,0,.829),0px 0px 22px rgba(255,255,0,1)}.showcase .timestamp{opacity:.5}.showcase .action-section{margin-top:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem}.showcase .action-section .duration{color:var(--clr-neon);text-shadow:0 0 .125em hsl(0 0% 100% / .3),0 0 .45em currentColor}.showcase .action-section .duration span{padding:0 .5rem}.showcase .action-section .duration .duration-select{padding:0;font-size:.8rem;border-radius:.25rem;font-weight:700;outline:none;border:none;background-color:var(--clr-neon)}.showcase .action-section .duration .duration-select:focus{outline:none}.showcase .action-section .duration .duration-select *{background-color:var(--clr-neon);outline:none}.showcase .action-section .action-btn{display:inline-block;padding:.2em 1rem;border-radius:.25em;font-size:1.4rem;letter-spacing:.25rem;cursor:pointer;background-color:var(--clr-bg);color:var(--clr-neon);border:var(--clr-neon) .125em solid;text-shadow:0 0 .125em hsl(0 0% 100% / .3),0 0 .45em currentColor;box-shadow:inset 0 0 .5em 0 var(--clr-neon),0 0 .5em 0 var(--clr-neon);position:relative;z-index:1}.showcase .action-section .action-btn:before{pointer-events:none;content:"";position:absolute;background-color:var(--clr-neon);top:120%;left:0;width:100%;height:100%;transform:perspective(1em) rotateX(40deg) scaleY(.35);filter:blur(1em);opacity:.7}.showcase .action-section .action-btn:after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:0 0 2em .5em var(--clr-neon);opacity:0;background-color:var(--clr-neon);z-index:-1;transition:opacity .1s linear}.showcase .action-section .action-btn:hover,.showcase .action-section .action-btn:focus{color:var(--clr-bg);text-shadow:none}.showcase .action-section .action-btn:hover:before,.showcase .action-section .action-btn:focus:before{opacity:1}.showcase .action-section .action-btn:hover:after,.showcase .action-section .action-btn:focus:after{opacity:1}.showcase-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;height:90%}:root{--primary-bg: #000;--primary-fg: #fff;--primary-accent: ""}.typio-container{background-color:var(--primary-bg);color:var(--primary-fg);height:100vh;padding:.5rem;overflow:hidden;font-family:Roboto Mono,monospace}.main-heading{display:flex;justify-content:start;align-items:center;gap:.7rem}.main-heading .logo{display:inline-block;width:2.3rem}.main-heading .title{font-size:1.6rem;padding-bottom:.3rem;-webkit-background-clip:text;background-clip:text;text-shadow:0 0 5px #ffa500,0 0 15px #ffa500,0 0 20px #ffa500,0 0 40px #ffa500,0 0 60px #ff0000,0 0 10px #ff8d00,0 0 98px #ff0000;color:#fff6a9}.main-heading:hover{cursor:pointer}*{margin:0;padding:0;box-sizing:border-box}