@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap";:root{--neon-pink: #ff3399;--neon-cyan: #33ffff;--neon-purple: #9933ff;--neon-green: #33ff99;--neon-orange: #ff9933;--electric-blue: #3399ff;--neon-pink-bright: #ff66b3;--neon-cyan-bright: #66ffff;--neon-purple-bright: #b366ff;--bg-primary: #000000;--bg-secondary: #1a1a1a;--bg-tertiary: #2d2d2d;--text-primary: #ffffff;--text-secondary: #e0e0e0;--text-muted: #b0b0b0;--text-glow: #ff3399;--gradient-primary: linear-gradient( 135deg, #ff3399 0%, #9933ff 50%, #3399ff 100% );--gradient-secondary: linear-gradient(45deg, #33ffff 0%, #ff3399 100%);--gradient-dark: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);--glow-pink-subtle: 0 0 8px rgba(255, 51, 153, .4);--glow-cyan-subtle: 0 0 8px rgba(51, 255, 255, .4);--glow-purple-subtle: 0 0 8px rgba(153, 51, 255, .4);--glow-pink: 0 0 15px rgba(255, 51, 153, .6);--glow-cyan: 0 0 15px rgba(51, 255, 255, .6);--glow-purple: 0 0 15px rgba(153, 51, 255, .6);--text-glow-pink: 0 0 3px rgba(255, 51, 153, .8);--text-glow-cyan: 0 0 3px rgba(51, 255, 255, .8);--grid-pattern: linear-gradient(rgba(0, 255, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, .1) 1px, transparent 1px)}*{box-sizing:border-box}body{margin:0;padding:0;font-family:Orbitron,monospace;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;background-image:var(--grid-pattern);background-size:50px 50px;background-position:0 0,0 0;animation:grid-move 20s linear infinite}@keyframes grid-move{0%{background-position:0 0,0 0}to{background-position:50px 50px,50px 50px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.typing-challenge{max-width:1200px;margin:0 auto;padding:2rem;position:relative;z-index:1}.challenge-header{text-align:center;margin-bottom:3rem;position:relative}.challenge-title{font-size:4rem;font-weight:900;font-family:Orbitron,monospace;color:var(--neon-pink-bright);text-shadow:var(--text-glow-pink);margin:0 0 1rem;text-transform:uppercase;letter-spacing:.1em;animation:title-pulse-subtle 3s ease-in-out infinite alternate;filter:contrast(1.1)}@keyframes title-pulse-subtle{0%{filter:contrast(1.1) brightness(1)}to{filter:contrast(1.1) brightness(1.1)}}@media (prefers-reduced-motion: reduce){.challenge-title{animation:none}}.challenge-description{font-size:1.3rem;color:var(--neon-cyan-bright);margin:0;text-shadow:var(--text-glow-cyan);font-weight:500;filter:contrast(1.1)}.code-display{background:var(--bg-secondary);border:2px solid var(--neon-cyan);border-radius:15px;padding:2rem;margin-bottom:2rem;box-shadow:var(--glow-cyan),inset 0 0 20px #00ffff1a;position:relative;overflow:hidden}.code-display:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);animation:scan-line 3s infinite}@keyframes scan-line{0%{left:-100%}to{left:100%}}.snippet-info{margin-bottom:1rem;text-align:center}.snippet-label{display:inline-block;background:var(--gradient-secondary);color:var(--bg-primary);padding:.5rem 1rem;border-radius:20px;font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;box-shadow:var(--glow-pink)}.code-text{font-family:Share Tech Mono,monospace;font-size:1.8rem;line-height:1.6;text-align:left;padding:1.5rem;background:#000c;border-radius:10px;border:2px solid var(--neon-cyan);max-width:100%;overflow:hidden;display:flex;flex-wrap:wrap;align-content:flex-start;position:relative}.char{position:relative;transition:all .15s ease;flex:0 0 auto;white-space:pre;min-width:0;border-radius:2px}.char--newline{flex-basis:100%;width:0;height:0;overflow:hidden}.char--correct{color:var(--neon-green);background:#33ff9926;text-shadow:0 0 2px rgba(51,255,153,.8);font-weight:600}.char--incorrect{color:var(--neon-orange);background:#ff993340;text-shadow:0 0 2px rgba(255,153,51,.8);font-weight:600;animation:error-pulse .5s ease-in-out}@keyframes error-pulse{0%,to{background:#ff993340}50%{background:#f936}}@media (prefers-reduced-motion: reduce){.char--incorrect{animation:none;background:#ff993359}}.char--current{background:var(--neon-cyan-bright);color:var(--bg-primary);font-weight:700;box-shadow:var(--glow-cyan-subtle);animation:cursor-glow 2s ease-in-out infinite}@keyframes cursor-glow{0%,to{background:var(--neon-cyan-bright)}50%{background:var(--neon-cyan)}}@media (prefers-reduced-motion: reduce){.char--current{animation:none;background:var(--neon-cyan-bright);outline:2px solid var(--neon-pink)}}.char--pending{color:var(--text-muted);opacity:.8}.typing-hint{text-align:center;margin:2rem 0;padding:2rem;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border:3px solid var(--neon-cyan-bright);border-radius:20px;box-shadow:var(--glow-cyan-subtle);animation:hint-border-cycle 4s ease-in-out infinite;position:relative}@keyframes hint-border-cycle{0%,to{border-color:var(--neon-cyan-bright)}50%{border-color:var(--neon-pink-bright)}}@media (prefers-reduced-motion: reduce){.typing-hint{animation:none;border-color:var(--neon-cyan-bright)}}.hint-text{font-size:1.6rem;color:var(--neon-cyan-bright);text-shadow:var(--text-glow-cyan);margin:0 0 .5rem;font-weight:700;filter:contrast(1.1)}@media (prefers-reduced-motion: reduce){.hint-text{text-shadow:none;color:var(--neon-cyan-bright)}}.hint-subtext{font-size:1.1rem;color:var(--text-secondary);margin:0;font-weight:500}.status-bar{text-align:center;margin-bottom:2rem}.progress-indicator{display:inline-block;padding:.8rem 1.5rem;background:var(--bg-tertiary);border:1px solid var(--electric-blue);border-radius:25px;color:var(--electric-blue);font-weight:700;text-shadow:var(--text-glow-cyan);box-shadow:0 0 15px #0080ff4d;animation:pulse-glow 2s ease-in-out infinite alternate}@keyframes pulse-glow{0%{box-shadow:0 0 15px #0080ff4d}to{box-shadow:0 0 25px #0080ff99}}.results-screen{text-align:center;padding:3rem 2rem;background:var(--bg-secondary);border:4px solid var(--neon-pink-bright);border-radius:20px;box-shadow:var(--glow-pink-subtle);position:relative;overflow:hidden;background:linear-gradient(135deg,var(--bg-secondary),rgba(0,0,0,.8))}.results-screen:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,var(--neon-pink-bright),transparent);animation:rotate-border 6s linear infinite;z-index:-1;opacity:.2}@keyframes rotate-border{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.results-screen:before{animation:none;display:none}}.results-title{font-size:3.2rem;font-weight:900;color:var(--neon-cyan-bright);margin:0 0 2rem;text-shadow:var(--text-glow-cyan);text-transform:uppercase;letter-spacing:.1em;filter:contrast(1.2);background:#0006;padding:.5rem 1rem;border-radius:15px}@media (prefers-reduced-motion: reduce){.results-title{text-shadow:none;background:#000000b3}}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin:2rem 0 3rem}.stat-item{background:var(--bg-tertiary);border:3px solid var(--electric-blue);border-radius:15px;padding:1.8rem;transition:all .3s ease;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--bg-tertiary),rgba(0,0,0,.6))}.stat-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:stat-shine 3s infinite;animation-delay:calc(var(--delay, 0) * .8s)}@keyframes stat-shine{0%{left:-100%}to{left:100%}}@media (prefers-reduced-motion: reduce){.stat-item:before{animation:none;display:none}}.stat-item:hover,.stat-item:focus-within{transform:translateY(-3px);box-shadow:0 8px 25px #0080ff80;border-color:var(--neon-cyan-bright)}.stat-item--primary{border-color:var(--neon-pink-bright);background:linear-gradient(135deg,var(--bg-tertiary),rgba(255,0,128,.2))}.stat-item--primary .stat-value{color:var(--neon-pink-bright);text-shadow:var(--text-glow-pink);filter:contrast(1.3)}.stat-value{font-size:3.2rem;font-weight:900;color:var(--electric-blue);text-shadow:var(--text-glow-cyan);margin:0;display:block;line-height:1;filter:contrast(1.1);background:#0000004d;padding:.3rem .6rem;border-radius:10px}@media (prefers-reduced-motion: reduce){.stat-value{text-shadow:none;background:#0009}.stat-item--primary .stat-value{text-shadow:none}}.stat-label{font-size:1.1rem;color:var(--text-primary);text-transform:uppercase;letter-spacing:.1em;margin-top:.8rem;font-weight:700}.restart-btn{background:var(--gradient-primary);border:3px solid var(--neon-pink-bright);padding:1.2rem 3rem;border-radius:30px;color:var(--bg-primary);font-family:Orbitron,monospace;font-size:1.3rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .3s ease;box-shadow:var(--glow-pink-subtle);position:relative;overflow:hidden;text-shadow:1px 1px 2px rgba(0,0,0,.8);min-height:48px;min-width:120px}.restart-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .4s ease}.restart-btn:hover,.restart-btn:focus{transform:translateY(-2px);box-shadow:var(--glow-pink),0 8px 20px #ff008066;filter:brightness(1.15);outline:3px solid var(--neon-cyan-bright);outline-offset:2px}.restart-btn:hover:before{left:100%}@media (prefers-reduced-motion: reduce){.restart-btn:before{transition:none;display:none}.restart-btn:hover{transform:none}}.restart-btn:active{transform:translateY(0)}@media (prefers-contrast: high){.restart-btn{border-width:4px;background:linear-gradient(135deg,#ff0080,#f39);color:#000}}.new-test-section{text-align:center;margin:1.5rem 0}.new-test-btn{display:inline-block;background:linear-gradient(135deg,var(--electric-blue),var(--neon-cyan-bright));border:2px solid var(--neon-cyan-bright);padding:.8rem 2rem;border-radius:25px;color:var(--bg-primary);font-family:Orbitron,monospace;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;cursor:pointer;transition:all .3s ease;box-shadow:var(--glow-cyan-subtle);position:relative;overflow:hidden;text-shadow:1px 1px 2px rgba(0,0,0,.8);min-height:44px;min-width:180px;display:inline-flex;align-items:center;justify-content:center}.new-test-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .4s ease}.new-test-btn:hover,.new-test-btn:focus{transform:translateY(-2px);box-shadow:var(--glow-cyan),0 8px 20px #0ff6;filter:brightness(1.15);outline:3px solid var(--neon-pink-bright);outline-offset:2px;text-decoration:none}.new-test-btn:hover:before{left:100%}@media (prefers-reduced-motion: reduce){.new-test-btn:before{transition:none;display:none}.new-test-btn:hover{transform:none}}.new-test-btn:active{transform:translateY(0)}@media (prefers-contrast: high){.new-test-btn{border-width:3px;background:linear-gradient(135deg,#0ff,#3ff);color:#000}}@media (max-width: 768px){.typing-challenge{padding:1rem}.challenge-title{font-size:2.5rem}.code-text{font-size:1.2rem}.typing-input{font-size:1.1rem}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-value,.results-title{font-size:2rem}}@media (max-width: 480px){.challenge-title{font-size:2rem}.stats-grid{grid-template-columns:1fr}.code-text{font-size:1rem}}.not-found-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);padding:2rem}.not-found-container{text-align:center;max-width:600px;width:100%}.error-code{font-family:Orbitron,monospace;font-size:8rem;font-weight:900;color:var(--neon-pink-bright);text-shadow:var(--text-glow-pink);margin:0 0 2rem;line-height:1;filter:contrast(1.2);animation:error-pulse 2s ease-in-out infinite alternate}@keyframes error-pulse{0%{text-shadow:var(--text-glow-pink);transform:scale(1)}to{text-shadow:0 0 30px #ff0080,0 0 50px #ff0080,0 0 70px #ff0080;transform:scale(1.02)}}@media (prefers-reduced-motion: reduce){.error-code{animation:none}}.error-message{margin:2rem 0 3rem}.error-title{font-family:Orbitron,monospace;font-size:2.5rem;font-weight:700;color:var(--neon-cyan-bright);text-shadow:var(--text-glow-cyan);margin:0 0 1rem;text-transform:uppercase;letter-spacing:.1em}.error-description{font-size:1.2rem;color:var(--text-secondary);margin:0;line-height:1.5;font-weight:500}.error-actions{display:flex;flex-direction:column;gap:1rem;margin:3rem 0;align-items:center}.home-btn,.random-test-btn{display:inline-block;padding:1rem 2rem;border-radius:25px;color:var(--bg-primary);font-family:Orbitron,monospace;font-size:1.1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;text-shadow:1px 1px 2px rgba(0,0,0,.8);min-height:48px;min-width:200px;display:inline-flex;align-items:center;justify-content:center;border:2px solid}.home-btn{background:linear-gradient(135deg,var(--neon-cyan-bright),var(--electric-blue));border-color:var(--neon-cyan-bright);box-shadow:var(--glow-cyan-subtle)}.random-test-btn{background:linear-gradient(135deg,var(--neon-pink-bright),#ff3399);border-color:var(--neon-pink-bright);box-shadow:var(--glow-pink-subtle)}.home-btn:before,.random-test-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .4s ease}.home-btn:hover,.home-btn:focus,.random-test-btn:hover,.random-test-btn:focus{transform:translateY(-2px);filter:brightness(1.15);outline:3px solid var(--neon-cyan-bright);outline-offset:2px;text-decoration:none}.home-btn:hover{box-shadow:var(--glow-cyan),0 8px 20px #0ff6}.random-test-btn:hover{box-shadow:var(--glow-pink),0 8px 20px #ff008066}.home-btn:hover:before,.random-test-btn:hover:before{left:100%}@media (prefers-reduced-motion: reduce){.home-btn:before,.random-test-btn:before{transition:none;display:none}.home-btn:hover,.random-test-btn:hover{transform:none}}.error-graphic{margin:3rem 0 0}.glitch-text{position:relative;font-family:Share Tech Mono,monospace;font-size:2rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.2em}.glitch-layer{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.8}.glitch-layer:nth-child(1){color:var(--neon-pink-bright);animation:glitch-1 2s infinite}.glitch-layer:nth-child(2){color:var(--neon-cyan-bright);animation:glitch-2 2s infinite}.glitch-layer:nth-child(3){color:var(--electric-blue);animation:glitch-3 2s infinite}@keyframes glitch-1{0%,14%,15%,49%,50%,99%,to{transform:translateZ(0) skew(0)}1%,13%{transform:translate3d(-2px,0,0) skew(-1deg)}16%,48%{transform:translate3d(1px,0,0) skew(1deg)}}@keyframes glitch-2{0%,20%,21%,62%,63%,99%,to{transform:translateZ(0) skew(0)}1%,19%{transform:translate3d(1px,0,0) skew(1deg)}22%,61%{transform:translate3d(-1px,0,0) skew(-1deg)}}@keyframes glitch-3{0%,25%,26%,75%,76%,99%,to{transform:translateZ(0) skew(0)}1%,24%{transform:translate3d(-1px,0,0) skew(-.5deg)}27%,74%{transform:translate3d(2px,0,0) skew(.5deg)}}@media (prefers-reduced-motion: reduce){.glitch-layer{animation:none;position:static}.glitch-layer:nth-child(2),.glitch-layer:nth-child(3){display:none}}@media (max-width: 768px){.error-code{font-size:6rem}.error-title{font-size:2rem}.error-description{font-size:1.1rem}.error-actions{gap:.8rem}.home-btn,.random-test-btn{font-size:1rem;padding:.9rem 1.8rem;min-width:180px}.glitch-text{font-size:1.5rem}}@media (max-width: 480px){.not-found-page{padding:1rem}.error-code{font-size:4rem}.error-title{font-size:1.8rem}.home-btn,.random-test-btn{font-size:.9rem;padding:.8rem 1.5rem;min-width:160px}}
