@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;700&display=swap");:root{--near-white:#f5f5f5;--primary-color-raw:120,120,120;--primary-color:rgb(var(--primary-color-raw));--secondary-color-raw:160,160,160;--secondary-color:rgb(var(--secondary-color-raw));--accent-color-raw:200,200,200;--accent-color:rgb(var(--accent-color-raw));--accent-bright-raw:220,220,220;--accent-bright:rgb(var(--accent-bright-raw));--light-color-raw:235,235,235;--light-color:rgb(var(--light-color-raw));--dark-color-raw:40,40,40;--dark-color:rgb(var(--dark-color-raw));--dark-correct:#006400;--dark-medium:#b8860b;--dark-incorrect:darkred;--light-correct:#90ee90;--light-medium:#fafad2;--light-incorrect:#f08080}body{font-family:Lexend,sans-serif;color:rgb(var(--dark-color-raw));background-image:radial-gradient(circle at top left,var(--accent-bright) 0,var(--light-color) 100%);background-attachment:fixed;background-size:400% 400%;background-position:50%;margin:0;box-sizing:border-box;line-height:1.6;white-space:pre-line;animation:animateGradient 15s ease infinite;overflow-x:hidden;padding:50px 0 0}@keyframes animateGradient{0%{background-position:0 0}25%{background-position:50% 75%}50%{background-position:100% 50%}75%{background-position:75% 100%}to{background-position:0 0}}*{margin:0;padding:0;box-sizing:border-box;font-family:lexend;transition:.2s ease}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;outline:none}img{max-width:100%;height:auto}textarea{padding:5px;border-radius:5px;border:1px solid var(--dark-color);font-family:lexend}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.container{display:flex;flex-wrap:wrap;flex-direction:row;padding:10px;max-width:1200px;align-self:center;justify-content:center;justify-self:center;gap:10px}.full-width{justify-items:center;justify-content:center}.big-title{font-size:3rem;font-weight:700;color:var(--primary-color);text-align:center}.accent-title{margin:10px;font-weight:700;color:var(--accent-bright)}.medium-title{font-size:1.8rem;font-weight:500;color:var(--secondary-color);text-align:center}.primary-button{background-color:var(--primary-color);color:#fff;font-weight:700;font-size:1.2em;padding:.8em;border-radius:.5em;text-align:center;margin:.2em;transition:.25s ease}.primary-button:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.2)}.secondary-button{color:var(--secondary-color);background-color:rgba(var(--light-color-raw),.7);border:2px solid var(--secondary-color);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-weight:700;font-size:1em;padding:.5em;border-radius:.5em;margin:.2em;text-align:center;transition:.25s ease}.secondary-button:hover{color:var(--primary-color);border:2px solid var(--primary-color);transform:translateY(-2px);background-color:rgba(var(--light-color-raw),.8);box-shadow:0 2px 4px rgba(0,0,0,.2)}.secondary-button:disabled{color:rgba(0,0,0,.3);background-color:rgba(var(--light-color-raw),.5);border:2px solid rgba(0,0,0,.2);cursor:auto;box-shadow:none;transform:none}.full-width{flex-basis:100%}.loading-spinner{border-radius:100%;width:40px;height:40px;animation:spinner 1s ease-in-out infinite;border:3px solid #f3f3f3;border-top:3px solid var(--dark-color);align-self:center}.home-button{position:fixed;max-width:min(20vw,128px);transition:.3s ease;z-index:200;top:16px;left:16px}.home-button:hover{transform:translateY(-2px)}.settings-button{background-color:var(--brighter-color);border:1px solid var(--dark-color);padding:5px;border-radius:100%;aspect-ratio:1;position:fixed;max-width:min(12vw,48px);max-height:min(12vw,48px);transition:1s ease-in-out;z-index:200;top:16px;right:16px;opacity:.75;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.settings-button:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.1);background-color:#fff;transition:.2s ease-in-out;opacity:1}.settings-button.hidden{right:0;opacity:0;transform:translateX(100%)}.card{background-color:rgba(var(--light-color-raw),.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:12px;border:2px solid rgba(var(--dark-color-raw),.5);box-shadow:0 4px 8px rgba(0,0,0,.1),inset 0 0 20px hsla(0,0%,100%,.2)}@keyframes spinner{0%{rotate:0deg}to{rotate:1turn}}.bright-top{width:100%;z-index:-50;height:100vh;box-shadow:inset 0 70vh 20vh -20vh var(--light-color);position:absolute;top:0;left:0}.textured-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}.textured-bg svg{width:100%;height:100%}.blobs{animation:blobFloat 3s ease-in-out infinite;transform-origin:center}@keyframes blobFloat{0%{transform:scale(1) translate(0) rotate(0deg)}25%{transform:scale(1.05) translate(20px,-10px) rotate(7deg)}50%{transform:scale(.98) translate(-10px,20px) rotate(2deg)}75%{transform:scale(1.03) translate(10px,10px) rotate(5deg)}to{transform:scale(1) translate(0) rotate(0deg)}}.glass-overlay{position:absolute;inset:0;-webkit-backdrop-filter:blur(12px) brightness(1.05);backdrop-filter:blur(12px) brightness(1.05);pointer-events:none}.full-blur{z-index:2;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.landing-page{display:grid;grid-template-columns:1fr 1fr}.landing-page-left{height:100vh;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:50px}.landing-page-task{font-size:2em}.landing-page-right{max-height:100vh;overflow-y:hidden;display:flex;align-items:flex-end;justify-content:flex-end}.landing-page-finish{padding-left:10%;padding-right:10%;padding-top:50px}.landing-stats-card{overflow:hidden;position:relative;min-height:300px;padding:30px;box-shadow:0 8px 16px rgba(0,0,0,.2)}.landing-card-stats{margin:10px;font-size:1em;text-align:left;background-color:var(--light-color);border-radius:10px;border:2px solid var(--dark-color);box-shadow:0 4px 8px rgba(0,0,0,.1);position:relative;opacity:0;animation:fadeIn 1s forwards}@keyframes fadeIn{to{opacity:1}}.landing-card-hash{position:absolute;color:#d3d3d3;top:3px;right:10px;font-size:.8em}.landing-card-hash :hover{text-decoration:underline;cursor:pointer}.landing-card-label{position:absolute;color:#d3d3d3;top:3px;left:10px;font-size:.8em}.landing-replay{font-size:1.5em;background-color:var(--dark-color);padding:1.2em 30px 1em;border-top-left-radius:10px;border-top-right-radius:10px;box-shadow:inset 0 0 10px rgba(var(--light-color-raw),.8)}.landing-card-inner{padding:10px;display:grid;grid-template-columns:1fr auto}.landing-card-acc{grid-row:2}.landing-card-inner .secondary-button,.landing-card-inner a{grid-column:2;grid-row:1/3}.landing-card-character{width:30%;position:absolute;bottom:0;right:30px}.signup-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--dark-color-raw),.7);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:1000;color:#fff}.signup-modal-content{background-color:var(--secondary-color);padding:2rem;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,.2);width:90%;max-width:400px}.signup-modal-content h2{color:var(--dark-color);margin-bottom:1.5rem;text-align:center}.signup-modal-content form{display:flex;flex-direction:column;gap:1rem}.signup-modal-content input{padding:.8rem;border:2px solid rgba(0,0,0,.2);border-radius:5px;font-family:inherit;font-size:1rem;transition:border-color .3s ease}.signup-modal-content input:focus{outline:none;border-color:var(--accent-color)}.signup-modal-content p{margin-top:1rem;text-align:center;font-size:.9rem}.error-message{text-align:center;margin-bottom:1rem;font-size:.9rem}@media (max-width:480px){.signup-modal-content{width:95%;padding:1.5rem}}@keyframes fadeInGreen{0%{color:var(--dark-color);text-shadow:0 0 10px #afa}40%{color:#afa;text-shadow:0 0 8px #fff}to{color:var(--dark-correct);text-shadow:none}}@keyframes fadeInLightGreen{0%{color:var(--near-white);text-shadow:0 0 10px #fff}40%{color:#afa;text-shadow:0 0 5px #afa}to{color:var(--light-correct);text-shadow:none}}@keyframes explodeShadow{0%{text-shadow:0 0 1px red,0 0 3px red}50%{text-shadow:0 0 6px red,0 0 12px red}to{text-shadow:none}}@keyframes flashTwice{0%{opacity:1}90%{opacity:1}93%{opacity:0}95%{opacity:1}98%{opacity:0}to{opacity:1}}.type-tracker-letter{height:1em;border-left:.1px solid rgba(var(--dark-color-raw),.5);box-shadow:0 0 5px var(--dark-color);transition:.5s ease-out}.correctness-high{color:var(--dark-correct);background:radial-gradient(circle,rgba(0,100,0,.1) 0,rgba(0,100,0,0) 100%);animation:fadeInGreen .6s ease-out}.correctness-medium{color:var(--dark-medium);background:radial-gradient(circle,rgba(184,134,11,.3) 0,rgba(184,134,11,0) 100%);animation:explodeShadow .3s ease-out}.correctness-low{color:var(--dark-incorrect);background:radial-gradient(circle,rgba(139,0,0,.5) 0,rgba(139,0,0,0) 100%);animation:explodeShadow .3s ease-out}.dark-mode{color:var(--near-white)}.dark-mode .type-tracker-letter{height:1em;border-left:1px solid hsla(0,0%,100%,.5);box-shadow:0 0 5px #fff;transition:.5s ease-out}.dark-mode .correctness-low{color:var(--light-incorrect);animation:explodeShadow .3s ease-out}.dark-mode .correctness-medium{color:var(--light-medium);animation:explodeShadow .3s ease-out}.dark-mode .correctness-high{color:var(--light-correct);animation:fadeInLightGreen .6s ease-out}.type-tracker-letter.type-tracker-starting{animation:flashTwice 10s ease-in-out infinite;box-shadow:0 0 8px 2px var(--dark-color);border:1px solid var(--dark-color)}.dynamic-story-component{background-size:cover;background-position:50%;background-repeat:no-repeat;background-attachment:fixed;position:relative;z-index:1}.dynamic-story{max-width:1200px;display:grid;grid-template-columns:3fr 2fr;padding:40px 40px 250px;min-height:99vh}.dynamic-story .big-title{grid-column:1/3}.dynamic-story .medium-title{text-align:left;margin-bottom:30px}.dynamic-story-characters{position:relative}.dynamic-story-character{position:fixed;bottom:0;max-width:calc(min(50vw, 90vh))}.dynamic-story-replay{font-size:.8em}.dynamic-story-outcome{font-size:1.5em;grid-column:1/3;text-align:center;font-weight:700}.dynamic-story-story{grid-column:1}.dynamic-story-tracker{position:fixed;z-index:-10;border-top:3px solid var(--dark-color);padding:20px 50vw 40px 40px;width:100vw;margin:0;bottom:0;left:0}.dynamic-story-conclusion,.dynamic-story-tracker{background-color:var(--light-color);font-size:1.2em}.dynamic-story-conclusion{margin:20px;padding:20px;border:3px solid var(--dark-color)}.dynamic-story-progress{width:200px;height:30px;border:2px solid var(--dark-color);background-color:var(--near-white);position:relative;border-radius:5px}.dynamic-story-progress-inner{height:100%;background-color:#32cd32;position:absolute;left:0;top:0;box-shadow:inset 0 0 5px #fff;border-radius:5px}.dynamic-story-progress.low-risk{box-shadow:inset 0 0 5px red,0 0 5px red;animation:pulsateSmall 10s infinite}.dynamic-story-progress.medium-risk{animation:pulsate 5s infinite}.dynamic-story-progress.high-risk{animation:pulsate 1.5s infinite}@keyframes pulsateSmall{0%{box-shadow:inset 0 0 1px red,0 0 1px red}50%{box-shadow:inset 0 0 4px red,0 0 4px red}to{box-shadow:inset 0 0 1px red,0 0 1px red}}@keyframes pulsate{0%{box-shadow:inset 0 0 5px red,0 0 5px red}50%{box-shadow:inset 0 0 15px red,0 0 15px red}to{box-shadow:inset 0 0 5px red,0 0 5px red}}.featured-stories-list{display:flex;flex-wrap:wrap;justify-content:space-around;max-width:1200px;margin:50px;gap:25px}.featured-story{flex:1 1 450px;max-width:900px;box-sizing:border-box;background-color:var(--light-color);border:2px solid var(--dark-color);position:relative;text-align:left;cursor:pointer;padding:10px 200px 10px 10px;background-size:cover;background-position:50%;background-repeat:no-repeat}.featured-story:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,.2)}.featured-story .medium-title{text-align:left}.featured-story-character{max-height:calc(100% + 50px);max-width:250px;position:absolute;right:5px;bottom:0}.past-replays-container{max-width:1200px;margin:20px auto;padding:20px;background-color:var(--light-color);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.past-replays-list{display:flex;flex-wrap:wrap;justify-content:space-around;gap:20px}.past-replays-error{max-width:1200px;margin:20px auto;padding:20px;color:var(--accent-color);font-weight:700;font-size:1.2rem;text-align:center}.typing-race-container{max-width:900px;margin:2rem auto;background-color:var(--light-color);border:2px solid var(--dark-color);border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.1);text-align:center;padding:1rem 1rem 3rem}.typing-race-challenge,.typing-race-replay{margin:1rem 0}.typing-race-replay-display{max-width:100%;margin:0 auto;background-color:var(--dark-color);padding:1rem;border-radius:8px;font-size:1.2rem;color:#fff}.typing-race-tracker{font-size:1.3rem;margin-top:.5rem}.typing-race-summary{margin-top:2rem}.character-generator-container{max-width:700px;margin:2rem auto;padding:1.5rem;background-color:var(--light-color);border:2px solid var(--dark-color);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:var(--dark-color);font-family:Lexend,sans-serif}.character-generator-prompt{width:100%;font-size:1rem;border:1px solid var(--dark-color);border-radius:8px;padding:10px;margin-bottom:1rem;resize:vertical;font-family:Lexend,sans-serif}.character-result{margin-top:2rem;border-top:1px solid var(--dark-color);padding-top:1rem}.character-result h2{margin-bottom:.5rem}.character-image{max-width:100%;max-height:300px;margin-bottom:1rem;border-radius:8px;border:1px solid var(--dark-color)}.error-message{color:var(--accent-color);margin-top:1rem;font-weight:600}.typing-stats-container{max-width:700px;margin:2rem auto;padding:1rem;background-color:var(--light-color);color:var(--dark-color);border-radius:10px;border:2px solid var(--dark-color);font-family:Lexend,sans-serif}.general-stats p{font-size:1.2em;margin:.5rem 0}.typing-stats-table{width:100%;border-collapse:collapse;margin-top:1rem}.typing-stats-table td,.typing-stats-table th{border:1px solid var(--dark-color);padding:.5rem;text-align:center}.typing-stats-table th{background-color:var(--secondary-color);color:#fff}.navigation-bar{background-color:rgba(var(--primary-color-raw),.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--near-white);padding:.75rem 1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.25);font-family:Lexend,sans-serif;position:fixed;width:100vw;top:0;z-index:1000}.nav-container{justify-content:space-between;max-width:1200px;margin:0 auto}.logo-section,.nav-container{display:flex;align-items:center}.logo-section{gap:16px}.logo{font-weight:700;font-size:1.5rem;color:var(--near-white);text-decoration:none}.menu-toggle{display:none;flex-direction:column;justify-content:space-around;width:24px;height:24px;background:transparent;border:none;cursor:pointer;padding:0;box-sizing:border-box;transition:all .3s ease-in-out}.menu-toggle:focus{outline:none}.menu-toggle .bar{width:100%;height:3px;background-color:var(--near-white);border-radius:2px;transition:all .3s ease;transform-origin:1px}.menu-toggle.open .bar:first-child{transform:rotate(45deg)}.menu-toggle.open .bar:nth-child(2){opacity:0;transform:translateX(20px)}.menu-toggle.open .bar:nth-child(3){transform:rotate(-45deg)}.nav-list{list-style:none;display:flex;gap:2rem;margin:0;padding:0}.nav-item a{color:var(--near-white);font-weight:600;text-decoration:none;font-size:1rem;padding:.5rem 0;border-bottom:2px solid transparent;transition:border-color .2s ease-in-out}.nav-item a:hover,.nav-item.active a{border-bottom:2px solid var(--accent-bright);color:var(--accent-bright)}@media (max-width:768px){.menu-toggle{display:flex}.nav-list{position:fixed;top:56px;left:0;right:0;background-color:var(--primary-color);flex-direction:column;align-items:center;gap:1rem;padding:1rem 0;max-height:0;overflow:hidden;transition:max-height .3s ease;z-index:999}.nav-list.open{max-height:500px;box-shadow:0 8px 16px rgba(0,0,0,.2)}.nav-item a{font-size:1.2rem;padding:.5rem 1rem}}.loading-spinner-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(var(--primary-color-raw),.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:999;opacity:0;animation:fadeInOverlay 1s ease-in forwards}.spinner{border:8px solid rgba(var(--light-color-raw),.75);border-top:12px solid var(--near-white);box-shadow:0 -1vw 2vw -1vw var(--accent-color),inset 0 1vw 2vw -1vw var(--accent-color);border-radius:50%;width:30vh;height:30vh;animation:spin 1.5s ease-in-out infinite,pulse-shadow 4s infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(2turn)}}@keyframes pulse-shadow{0%{box-shadow:0 -1vw 2vw -1vw var(--accent-color),inset 0 1vw 2vw -1vw var(--accent-color)}50%{box-shadow:0 -3vw 6vw -1vw var(--accent-color),inset 0 3vw 6vw -1vw var(--accent-color)}to{box-shadow:0 -1vw 2vw -1vw var(--accent-color),inset 0 1vw 2vw -1vw var(--accent-color)}}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.character-select-container{display:flex;flex-direction:row;max-height:100vh;margin-top:-50px;overflow-y:hidden}.character-choice-container{flex:1 0;height:100vh;overflow:hidden;border-left:1px solid var(--dark-color);border-right:1px solid var(--dark-color);position:relative;background-color:hsla(0,0%,39%,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-wrap:wrap;flex-direction:row;align-items:flex-end;justify-content:center}.character-choice-blur{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);position:absolute;height:100%;width:100%;z-index:15}.character-choice-background{height:100vh;width:auto;object-fit:cover;opacity:0;position:absolute;z-index:10;filter:saturate(.3) contrast(.95)}.character-choice-background.active{opacity:1}.character-choice-background.onlyone{min-width:100vw}.locked .character-choice-background.active{filter:saturate(1)}.character-choice-image{height:100vh;width:auto;object-fit:cover;position:absolute;top:0;left:0;transform:translateX(-100%);z-index:20;filter:saturate(.8) contrast(.95)}.character-choice-image.active{transform:translateX(0)}.locked .character-choice-image.active{filter:saturate(1);transform:scale(1.4) translateY(10%) translateX(0)}.character-choice-icons{display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;gap:.5em;padding:2em;z-index:30;flex-basis:80%}.character-choice-icon{width:3.5em;height:3.5em;border-radius:10px;border:2px solid var(--dark-color);background-color:hsla(0,0%,100%,.2);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background-position:50%;background-size:cover;aspect-ratio:1;cursor:pointer;filter:brightness(1) saturate(.6) contrast(.6)}.character-choice-icon:hover{filter:brightness(1) saturate(1) contrast(.95);background-color:hsla(0,0%,100%,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.character-choice-icon.active{filter:brightness(1.1) saturate(1) contrast(1)}.character-choice-name{position:absolute;right:20px;font-size:2em;bottom:calc(100vh - 4em);transform:translateY(-200%);z-index:25;color:var(--primary-color);background-color:rgba(var(--light-color-raw),.75);box-shadow:0 4px 8px 0 rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px;border-radius:10px}.character-choice-name.active{transform:translateY(0)}.locked .character-choice-name.active{bottom:5%;right:0;border-radius:0;font-size:2.5em;padding-left:1em;padding-right:1em}.character-select-buttons{position:fixed;bottom:150px;right:5px}.theme-selector-container{margin:auto;max-width:400px;background-color:var(--light-color);border:2px solid var(--dark-color);border-radius:8px;padding:10px 20px;display:flex;flex-direction:column;gap:10px;font-family:Lexend,sans-serif}.theme-selector-container label{font-weight:600;color:var(--primary-color);font-size:1.2rem}.theme-selector-container select{padding:8px 12px;border-radius:6px;border:1px solid var(--dark-color);font-size:1rem;font-weight:500;background-color:#fff;color:var(--dark-color);background-color:var(--near-white)}.theme-selector-container select:focus,.theme-selector-container select:hover{border-color:var(--accent-color);outline:none;box-shadow:0 0 8px var(--accent-color)}