@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Roboto:wght@400;500&display=swap";:root{--background-primary: #140c2c;--background-primary-rgb: 20, 12, 44;--background-secondary: #261950;--border-color: #4c4074;--text-primary: #dcd3ff;--text-secondary: #9a8fcc;--accent-pink: #f470d1;--accent-cyan: #63d3e8;--accent-yellow: #f6e489;--accent-primary: #63d3e8;font-family:Roboto,sans-serif;color-scheme:dark}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root,.app-container{height:100%}body{margin:0;background-color:var(--background-primary);color:var(--text-primary)}h1,h2,h3,h4{font-family:Orbitron,sans-serif;font-weight:700;letter-spacing:1px;margin:10px 0}p{margin:10px 0}.app-container{display:grid;grid-template-rows:auto 1fr;min-height:100vh;height:100vh;overflow:hidden}.main-content{display:flex;flex-grow:1;overflow:hidden}#footer-ad-root,.footer{position:fixed;bottom:0;left:0;width:100%;z-index:100;background-color:transparent}.link{color:var(--text-primary);text-decoration:none}.link:hover{text-decoration:underline}.shepherd-element{background:var(--background-secondary)!important;border-radius:8px!important;border:1px solid var(--border-color)!important;box-shadow:0 0 15px var(--accent-cyan)!important}.shepherd-header{background:var(--background-secondary)!important;padding:1rem!important}.shepherd-text{color:var(--text-primary)!important;padding:1rem!important}.shepherd-button{background:var(--accent-pink)!important;color:var(--background-primary)!important;padding:8px 16px!important;border-radius:4px!important;border:none!important;font-family:Orbitron,sans-serif!important;text-transform:uppercase!important}.shepherd-button:not(:disabled):hover{background:var(--accent-cyan)!important}.shepherd-arrow:before{background-color:var(--background-secondary)!important}@media (max-width: 768px){.main-content{flex-direction:column-reverse}}.profile-page-layout{display:flex;gap:2rem;padding:2rem;align-items:flex-start;overflow-y:auto}.profile-main-content h2,.profile-main-content h3{color:var(--accent-cyan)}.profile-sidebar{flex:0 0 300px;background-color:var(--background-secondary);padding:20px;border-radius:8px;border:1px solid var(--border-color)}.profile-sidebar h3{margin-top:0;color:var(--accent-pink)}.form-group{margin-bottom:15px}.form-group label,.form-group .label{display:block;margin-bottom:5px;color:var(--text-secondary);font-size:.9rem}.form-group p{margin:0 0 1rem;font-size:1.1rem}.form-group input{width:100%;padding:8px;border-radius:4px;border:1px solid var(--border-color);background-color:var(--background-primary);color:var(--text-primary);font-size:1rem}.form-group input:disabled{opacity:.6}.button-group{display:flex;justify-content:center}.profile-sidebar button{width:100%;padding:10px;margin-left:4px;margin-right:4px;margin-top:10px}.button-group button{width:fit-content}.profile-sidebar .delete-button{border-color:#ff4d4d;color:#ff4d4d;width:fit-content;cursor:pointer;font-size:.5rem;padding:5px;margin-top:0;margin-bottom:10px}.delete-button:hover{background-color:#ff4d4d;color:#fff;box-shadow:0 0 10px #ff4d4d}.update-message{margin-top:10px;font-size:.9rem;text-align:center}.profile-main-content{flex:1}.summary-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:2rem 0}.stat-box{background-color:var(--background-secondary);border:1px solid var(--border-color);border-radius:8px;padding:20px;text-align:center;transition:all .2s ease-in-out}.stat-box:hover{transform:translateY(-5px);box-shadow:0 5px 15px #0003}.stat-value{display:block;font-size:2.5rem;font-weight:700;color:var(--accent-primary)}.stat-label{font-size:1rem;color:var(--text-secondary)}.chart-section{margin-top:3rem}.chart-controls{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding:10px;background-color:var(--background-secondary);border-radius:8px}.difficulty-filters,.metric-toggle{display:flex;align-items:center;gap:10px}.chart-controls span{color:var(--text-secondary);font-size:.9rem}.chart-controls button{background-color:transparent;border:1px solid var(--border-color);color:var(--text-primary);padding:5px 15px;border-radius:4px;cursor:pointer}.chart-controls button.active{background-color:var(--accent-pink);border-color:var(--accent-pink);color:var(--background-primary);font-weight:700}.recharts-tooltip-wrapper{background-color:var(--background-secondary)!important;border:1px solid var(--border-color)!important;border-radius:4px}.custom-legend{display:flex;justify-content:center;gap:15px;margin-top:20px}.legend-item{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:4px;transition:all .2s ease-in-out}.legend-item.active{color:var(--text-primary);font-weight:500}.legend-item:not(.active){opacity:.5}.legend-icon{display:inline-block;width:12px;height:12px;border-radius:2px}.history-table{width:100%;border-collapse:collapse;margin-top:1rem;background-color:var(--background-secondary);border-radius:8px;overflow:hidden}.history-table th,.history-table td{padding:12px 15px;border-bottom:1px solid var(--border-color);text-align:left}.history-table thead th{background-color:var(--background-secondary);color:var(--text-secondary);text-transform:uppercase;font-size:.8rem}.history-table tbody tr:hover{background-color:var(--background-secondary)}.achievements-section{margin-top:2rem;border-top:1px solid var(--border-color);padding-top:1rem}.achievements-list-sidebar{list-style:none;padding:0;margin-top:1rem;display:flex;flex-direction:column;gap:8px}.achievements-list-sidebar li{display:flex;align-items:center;background:var(--background-primary);padding:8px;border-radius:4px}.achievement-icon{font-size:1.5rem;margin-right:10px}.achievement-name{color:var(--text-primary)}.no-achievements{font-size:.9rem;color:var(--text-secondary);text-align:center}.achievements-list-sidebar li{position:relative}.achievements-list-sidebar li:after{content:attr(data-tooltip);position:absolute;bottom:90%;left:60%;transform:translate(-50%);background-color:var(--background-primary);color:var(--text-primary);padding:8px 12px;border-radius:4px;border:1px solid var(--border-color);width:200px;text-align:center;font-size:.9rem;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out;pointer-events:none;z-index:10}.achievements-list-sidebar li:hover:after{opacity:1;visibility:visible}.admin-container{width:100%;max-width:1200px;margin-left:auto;margin-right:auto}.admin-form{display:flex;flex-direction:column;align-items:stretch}.admin-form *{margin:8px}.mobile-message-overlay{position:fixed;top:0;left:0;height:100vh;background-color:var(--background-primary);color:var(--text-primary);z-index:9999;display:none;justify-content:center;align-items:center;text-align:center;margin:0 auto;padding:2rem}.mobile-message-content h2{color:var(--accent-cyan)}.demo-video{display:none}@media (max-width: 768px){.mobile-message-overlay{display:flex;width:auto}.demo-video{display:block;width:96%;margin:0 auto}}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background-color:var(--background-primary);border-bottom:1px solid var(--border-color);box-shadow:0 4px 15px #0003}.header h1 a{color:var(--accent-cyan);text-decoration:none;font-size:1.8rem}.cursor{color:var(--accent-pink);font-size:1.8rem;animation:blink 1s step-end infinite;animation-timing-function:none}@keyframes blink{0%,to{color:transparent}50%{color:var(--accent-pink)}}.user-info{display:flex;align-items:center;gap:15px}.header button{background:transparent;border:1px solid var(--text-secondary);color:var(--text-secondary);padding:5px 10px;border-radius:4px;cursor:pointer}.header button:hover{border-color:var(--text-primary);color:var(--text-primary)}.profile-link{color:var(--text-primary);text-decoration:none}.profile-link:hover{text-decoration:underline}.header h1 a{color:var(--accent-primary);text-decoration:none}@media (max-width: 768px){.header{display:none}}.typing-practice-container{display:flex;flex-grow:1;gap:1rem;padding:1rem;container-type:inline-size;container-name:practice-area}.code-to-type,.user-typing-area{flex:1;display:flex;flex-direction:column;min-width:0;background-color:var(--background-primary);border:1px solid var(--border-color);border-radius:8px;padding:1rem;box-shadow:inset 0 0 10px #63d3e833}.code-to-type h3,.user-typing-area h3{margin:0 0 .5rem;font-size:.875rem;color:var(--text-secondary)}.user-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.user-editor-header h3{margin:0}.session-controls{display:flex;align-items:center;gap:15px;font-family:Orbitron,sans-serif;color:var(--accent-yellow)}.reset-btn{background:transparent;border-color:var(--accent-yellow);color:var(--accent-yellow);padding:2px 8px;border-radius:4px;cursor:pointer;font-size:.8rem}.reset-btn:hover{background-color:var(--accent-yellow);color:var(--background-primary);box-shadow:0 0 10px var(--accent-yellow)}.error-char{background-color:#ff000093}.monaco-editor .view-lines span{text-decoration-line:none!important;text-decoration:none}.snippet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.snippet-header h3{margin:0}.snippet-header h3 span{font-size:.8rem}.description-toggle{background:none;border:1px solid var(--border-color);color:var(--text-secondary);font-size:.8rem;padding:2px 8px;border-radius:4px;cursor:pointer}.description-toggle:hover{border-color:var(--accent-cyan);color:var(--accent-cyan)}.snippet-description{background:#0003;padding:15px;border-radius:4px;margin-bottom:1rem;color:var(--text-secondary);border-left:3px solid var(--accent-cyan)}.completion-overlay{position:absolute;inset:0;background-color:rgba(var(--background-primary-rgb),.7);z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fade-in 3s ease-in forwards}.completion-overlay h3{font-size:2.5rem;animation:pop-in .5s ease-out forwards}.wpm-result{animation:pop-in .5s ease-out .5s forwards}.wpm-result .rating{animation:pop-in .5s ease-out 1s forwards}.acc-result{animation:pop-in .5s ease-out 1.5s forwards}.acc-result .rating{animation:pop-in .5s ease-out 2s forwards}.completion-overlay h3,.completion-overlay button,.wpm-result,.acc-result,.rating,.try-again-msg{opacity:0;transform:scale(.5)}.try-again-msg{color:var(--accent-yellow);animation:pop-in .5s ease-out 4.3s forwards}.completion-overlay button{padding:10px 20px;font-size:1rem;cursor:pointer;background-color:var(--accent-primary);color:#fff;border:none;border-radius:4px;margin-top:15px;animation:pop-in .5s ease-out 4.5s forwards}.completion-overlay button.try-again-button{background-color:transparent;border-radius:0;font-size:.8rem;animation-delay:4.7s;text-transform:capitalize}.completion-overlay button.try-again-button:hover{box-shadow:none;color:#fff;text-decoration:underline}@keyframes fade-in{0%{background-color:rgba(var(--background-primary-rgb),0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{background-color:rgba(var(--background-primary-rgb),.7);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}@media (max-width: 768px){.typing-practice-container{flex-direction:column}}.skeleton-container{background-color:var(--background-primary);padding:10px;border-radius:4px;height:100%}.skeleton-line{height:14px;margin-bottom:10px;background:linear-gradient(90deg,#261950 25%,#4c4074,#261950 75%);background-size:200% 100%;border-radius:4px;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.star-rating{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:150px;height:135px;gap:2px}.star-icon{width:60px;height:60px;transition:color .2s ease-in-out}.star-icon:nth-child(3){grid-column:1 / 3;grid-row:1;justify-self:center;opacity:0;transform:scale(.5);animation:pop-in .5s ease-out 3.5s forwards}.star-icon:nth-child(1){grid-column:1;grid-row:2;justify-self:end;margin-right:2px;opacity:0;transform:scale(.5);animation:pop-in .5s ease-out 2.5s forwards}.star-icon:nth-child(2){grid-column:2;grid-row:2;justify-self:start;margin-left:2px;opacity:0;transform:scale(.5);animation:pop-in .5s ease-out 3s forwards}.star-icon.empty{color:rgba(var(--background-primary-rgb),128)}@keyframes pop-in{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.sidebar{width:280px;background-color:var(--background-secondary);padding:1rem;border-right:1px solid var(--border-color);display:flex;flex-direction:column;gap:1.5rem}.sidebar h3{margin:0;font-size:1rem;text-transform:uppercase;letter-spacing:1px;color:var(--accent-pink);padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}button.custom-select-value{background-color:var(--accent-cyan);color:var(--background-primary);font-weight:700}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar ul li{padding:8px;border-radius:4px}.metrics-div{display:flex;justify-content:space-between}.metrics-div p{width:fit-content}.difficulty-list{display:flex;flex-direction:row;width:100%}.difficulty-list button{cursor:pointer;padding:8px;border-radius:4px;margin:0 4px;flex-grow:1;text-align:center;transition:all .2s ease-in-out;position:relative}.difficulty-list button.active{background-color:var(--accent-cyan);border-color:var(--accent-cyan);color:var(--background-primary);font-weight:700}.difficulty-list button:hover,.difficulty-list button.active:hover{background-color:var(--accent-pink);border-color:var(--accent-pink)}.difficulty-list button.locked{opacity:.5;cursor:not-allowed;color:var(--text-secondary);border-color:var(--border-color);background-color:transparent}.difficulty-list button.locked:after{content:"🔒";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:1.2rem}.difficulty-list button.locked:hover{box-shadow:none;color:var(--text-secondary)}.results-list{list-style:none;padding:0;font-size:.875rem}.results-list li{display:flex;justify-content:space-between;margin-bottom:5px;opacity:.8}.result-lang{text-transform:capitalize}.leaderboard-list{list-style:none;counter-reset:leaderboard-counter;padding:0;margin-top:1rem}.leaderboard-list li{background-color:var(--background-primary);border:1px solid var(--border-color);border-radius:4px;padding:10px 15px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;transition:all .2s ease-in-out}.leaderboard-list li:before{counter-increment:leaderboard-counter;content:counter(leaderboard-counter);font-family:Orbitron,sans-serif;color:var(--accent-pink);margin-right:15px;font-size:1.2rem}.leaderboard-list li:first-child{border-color:var(--accent-yellow);box-shadow:0 0 8px var(--accent-yellow)}.leaderboard-list li:first-child:before{color:var(--accent-yellow)}.leaderboard-name{color:var(--text-primary)}.leaderboard-stats{display:flex;gap:1rem;font-size:.9rem;text-align:right}.leaderboard-wpm{color:var(--accent-cyan)}.leaderboard-accuracy{color:var(--text-secondary)}.user-best-score{margin-top:1rem}.user-best-score p{color:var(--text-secondary);font-size:.9rem;text-align:center;margin-bottom:.5rem;text-transform:uppercase;font-family:Orbitron,sans-serif}.score-entry{display:flex;justify-content:space-between;background-color:#63d3e81a;padding:8px;border-radius:4px;border:1px solid var(--accent-cyan)}@media (max-width: 768px){.sidebar{width:100%;height:auto;border-right:none;border-top:1px solid var(--border-color);flex-direction:row;justify-content:space-around;align-items:center}}.custom-select-container{position:relative;width:100%}.custom-select-value{width:100%;padding:12px;border-radius:4px;border:1px solid var(--border-color);background-color:var(--accent-primary);color:#fff;font-size:1rem;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center}.custom-select-options{position:absolute;top:100%;left:0;right:0;background-color:var(--background-secondary);border:1px solid var(--border-color);border-radius:4px;margin-top:4px;padding:0;list-style:none;z-index:100;max-height:200px;overflow-y:auto}.custom-select-option{padding:10px;cursor:pointer}.custom-select-option:hover{background-color:var(--accent-primary);color:#fff}.auth-container{display:flex;flex-direction:column;gap:15px;width:100%;max-width:350px;margin:0 auto}button,.language-choices button{padding:10px 20px;border-radius:4px;border:1px solid var(--accent-pink);background-color:transparent;color:var(--accent-pink);cursor:pointer;font-family:Orbitron,sans-serif;text-transform:uppercase;transition:all .2s ease-in-out}button:hover,.language-choices button:hover{background-color:var(--accent-pink);color:var(--background-primary);box-shadow:0 0 10px var(--accent-pink)}.google-btn{border-color:var(--accent-cyan);color:var(--accent-cyan)}.google-btn:hover{background-color:var(--accent-cyan);box-shadow:0 0 10px var(--accent-cyan)}.auth-container input{padding:12px;border-radius:4px;border:1px solid var(--border-color);background-color:var(--background-primary);color:var(--text-primary);font-size:1rem;text-align:center}.auth-container input::placeholder{color:var(--accent-cyan);opacity:.75}.auth-container input:focus{outline:none;border-color:var(--accent-cyan);box-shadow:0 0 10px var(--accent-cyan)}.auth-separator{margin-top:8px;margin-bottom:8px}.auth-actions{margin-top:16px}.auth-actions button{margin:4px}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--background-primary-rgb),.7);display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content{background:var(--background-secondary);border:1px solid var(--border-color);padding:2rem 3rem;border-radius:8px;text-align:center;max-width:660px;box-shadow:0 0 15px var(--accent-cyan),0 0 5px var(--accent-pink)}.modal-content h2,.modal-content h3{color:var(--accent-cyan);margin-bottom:1rem}.modal-content h1{color:var(--accent-yellow)}.modal-content p{color:var(--text-secondary)}.modal-content hr{border:none;height:1px;background-color:var(--border-color);margin:2rem 0}.typing-animation{display:inline-block;overflow:hidden;white-space:nowrap;border-right:.15em solid var(--accent-pink);animation:typing 2s steps(22,end),blink-caret .75s step-end infinite}@keyframes typing{0%{width:0}to{width:100%}}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:var(--accent-pink)}}.shepherd-button{background:#3288e6;border:0;border-radius:3px;color:#ffffffbf;cursor:pointer;margin-right:.5rem;padding:.5rem 1.5rem;transition:all .5s ease}.shepherd-button:not(:disabled):hover{background:#196fcc;color:#ffffffbf}.shepherd-button.shepherd-button-secondary{background:#f1f2f3;color:#000000bf}.shepherd-button.shepherd-button-secondary:not(:disabled):hover{background:#d6d9db;color:#000000bf}.shepherd-button:disabled{cursor:not-allowed}.shepherd-footer{border-bottom-left-radius:5px;border-bottom-right-radius:5px;display:flex;justify-content:flex-end;padding:0 .75rem .75rem}.shepherd-footer .shepherd-button:last-child{margin-right:0}.shepherd-cancel-icon{background:transparent;border:none;color:#808080bf;cursor:pointer;font-size:2em;font-weight:400;margin:0;padding:0;transition:color .5s ease}.shepherd-cancel-icon:hover{color:#000000bf}.shepherd-has-title .shepherd-content .shepherd-cancel-icon{color:#808080bf}.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover{color:#000000bf}.shepherd-title{color:#000000bf;display:flex;flex:1 0 auto;font-size:1rem;font-weight:400;margin:0;padding:0}.shepherd-header{align-items:center;border-top-left-radius:5px;border-top-right-radius:5px;display:flex;justify-content:flex-end;line-height:2em;padding:.75rem .75rem 0}.shepherd-has-title .shepherd-content .shepherd-header{background:#e6e6e6;padding:1em}.shepherd-text{color:#000000bf;font-size:1rem;line-height:1.3em;padding:.75em}.shepherd-text p{margin-top:0}.shepherd-text p:last-child{margin-bottom:0}.shepherd-content{border-radius:5px;outline:none;padding:0}.shepherd-element{background:#fff;border:none;border-radius:5px;box-shadow:0 1px 4px #0003;margin:0;max-width:400px;opacity:0;outline:none;padding:0;transition:opacity .3s,visibility .3s;visibility:hidden;width:100%;z-index:9999}.shepherd-enabled.shepherd-element{opacity:1;visibility:visible}.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered){opacity:0;pointer-events:none;visibility:hidden}.shepherd-element,.shepherd-element *,.shepherd-element :after,.shepherd-element :before{box-sizing:border-box}.shepherd-arrow,.shepherd-arrow:before{height:16px;position:absolute;width:16px;z-index:-1}.shepherd-arrow:before{background:#fff;content:"";transform:rotate(45deg)}.shepherd-element[data-popper-placement^=top]>.shepherd-arrow{bottom:-8px}.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{top:-8px}.shepherd-element[data-popper-placement^=left]>.shepherd-arrow{right:-8px}.shepherd-element[data-popper-placement^=right]>.shepherd-arrow{left:-8px}.shepherd-element.shepherd-centered>.shepherd-arrow{opacity:0}.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{background-color:#e6e6e6}.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{pointer-events:none}.shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0s .3s,opacity .3s 0s;width:100vw;z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:100vh;opacity:.5;transform:translateZ(0);transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}.notification-toast{position:fixed;top:20px;left:50%;transform:translate(-50%);background-color:var(--accent-pink);color:var(--background-primary);padding:15px 30px;border-radius:8px;font-family:Orbitron,sans-serif;font-size:1.2rem;font-weight:700;z-index:9999;box-shadow:0 0 20px var(--accent-pink);animation:slide-in-out 4s ease-in-out forwards}@keyframes slide-in-out{0%{top:-100px;opacity:0}20%{top:20px;opacity:1}80%{top:20px;opacity:1}to{top:-100px;opacity:0}}