:root{--bg-dark: #0a0e14;--bg-elevated: #131720;--text-primary: #e8eaed;--text-secondary: #646669;--text-dim: #3d4047;--accent-color: #4ff0b7;--accent-hover: #3dd0a0;--accent-dim: rgba(79, 240, 183, .15);--danger: #ff6b6b;--warning: #ffd93d;--font-main: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;--transition: all .15s cubic-bezier(.4, 0, .2, 1);--shadow: 0 2px 8px rgba(0, 0, 0, .3)}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,#1a1f2e,#0a0e14 60%,#050508);display:flex;justify-content:center;align-items:center;z-index:9999;opacity:1;transition:opacity .6s ease-out}.loading-screen.fade-out{opacity:0;pointer-events:none}#loading-particles{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:transparent;display:block;will-change:auto;-webkit-transform:translateZ(0);transform:translateZ(0)}.loading-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:3rem;padding:2rem;max-width:600px;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.loading-logo{text-align:center;animation:fadeInDown .8s ease-out;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.loading-logo-image{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(79,240,183,.4));animation:logoFloat 3s ease-in-out infinite,logoGlow 2s ease-in-out infinite}@keyframes logoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.loading-logo h1{font-family:Orbitron,Inter,sans-serif;font-size:3.5rem;font-weight:900;letter-spacing:6px;margin:0;background:linear-gradient(135deg,var(--text-primary) 0%,var(--accent-color) 50%,var(--accent-hover) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 40px rgba(79,240,183,.3);animation:logoGlow 2s ease-in-out infinite;text-transform:uppercase}@keyframes logoGlow{0%,to{filter:drop-shadow(0 0 10px rgba(79,240,183,.3))}50%{filter:drop-shadow(0 0 20px rgba(79,240,183,.6))}}.loading-circuit-line{width:100%;height:2px;background:linear-gradient(90deg,transparent 0%,var(--accent-color) 50%,transparent 100%);margin-top:1rem;position:relative;overflow:hidden}.loading-circuit-line:before{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(79,240,183,.8),transparent);animation:circuit-pulse 2s linear infinite}@keyframes circuit-pulse{0%{left:-100%}to{left:200%}}.loading-progress-container{width:100%;display:flex;flex-direction:column;gap:1rem;animation:fadeInUp .8s ease-out .2s both}.loading-progress-bg{width:100%;height:8px;background:var(--bg-elevated);border-radius:10px;overflow:hidden;border:1px solid rgba(79,240,183,.2);box-shadow:inset 0 2px 4px #0006;position:relative}.loading-progress-bg:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(79,240,183,.1) 50%,transparent 100%);animation:shimmer 2s linear infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.loading-progress-bar{width:0%;height:100%;background:linear-gradient(90deg,var(--accent-hover),var(--accent-color),var(--accent-hover));background-size:200% 100%;border-radius:10px;box-shadow:0 0 20px #4ff0b799,inset 0 1px #ffffff4d;transition:width .3s cubic-bezier(.4,0,.2,1);animation:progressGradient 2s linear infinite;position:relative;overflow:hidden}.loading-progress-bar:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progressShine 1.5s ease-in-out infinite}@keyframes progressGradient{0%{background-position:0% 50%}to{background-position:200% 50%}}@keyframes progressShine{0%{transform:translate(-100%) skew(-15deg)}to{transform:translate(200%) skew(-15deg)}}.loading-info{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono)}.loading-progress-text{font-size:1.5rem;font-weight:700;color:var(--accent-color);text-shadow:0 0 10px rgba(79,240,183,.5);font-variant-numeric:tabular-nums}.loading-status{font-size:.875rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;animation:statusPulse 2s ease-in-out infinite}@keyframes statusPulse{0%,to{opacity:.6}50%{opacity:1}}.loading-tip{text-align:center;animation:fadeInUp .8s ease-out .4s both}.loading-tip p{font-size:.95rem;color:var(--text-secondary);font-style:normal;margin:0;padding:1rem 1.5rem;background:#4ff0b70d;border-radius:10px;border:1px solid rgba(79,240,183,.1)}.loading-tip .tip-icon{color:var(--accent-color);margin-right:.5rem;font-size:1rem}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.loading-logo-image{width:90px;height:90px}.loading-logo h1{font-size:2.5rem;letter-spacing:4px}.loading-progress-text{font-size:1.25rem}.loading-tip p{font-size:.85rem;padding:.75rem 1rem}.header-logo-image{width:40px;height:40px}}@media(max-width:480px){.loading-logo-image{width:70px;height:70px}.loading-logo h1{font-size:2rem;letter-spacing:3px}.header-logo-image{width:35px;height:35px}}*{margin:0;padding:0;box-sizing:border-box}html{background-color:#0a0e14}body{font-family:var(--font-main);background-color:var(--bg-dark);color:var(--text-primary);overflow:hidden;width:100vw;height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}#canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}#canvas-container canvas{background:radial-gradient(ellipse at center bottom,#1a1f2e,#050508)}#wpm-result-canvas{background:transparent}#ui-layer{position:relative;z-index:1;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:1.5rem 2rem;gap:1rem}header,.right-panel,.bottom-indicators,.words-display{pointer-events:auto}header{display:flex;justify-content:space-between;align-items:center;gap:2rem}.logo-section{display:flex;align-items:center;gap:1rem}.header-logo-image{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(79,240,183,.3));transition:all .3s ease;animation:headerLogoPulse 3s ease-in-out infinite}@keyframes headerLogoPulse{0%,to{filter:drop-shadow(0 0 8px rgba(79,240,183,.3));transform:scale(1)}50%{filter:drop-shadow(0 0 15px rgba(79,240,183,.6));transform:scale(1.02)}}.header-logo-image:hover{filter:drop-shadow(0 0 20px rgba(79,240,183,.8));transform:scale(1.1);animation-play-state:paused}.logo-text{display:flex;align-items:center;gap:1rem}.logo-section h1{font-family:Orbitron,Inter,sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:2px;color:var(--text-primary);margin:0;background:linear-gradient(135deg,var(--text-primary) 0%,var(--accent-color) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-section p{color:var(--text-dim);font-size:.875rem;font-weight:500;margin:0;padding-left:1rem;border-left:2px solid var(--text-dim)}.stats-section{display:flex;align-items:center;gap:2rem;background:var(--bg-elevated);padding:.75rem 1.5rem;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.05)}.settings-section{display:flex;align-items:center;gap:2rem;background:var(--bg-elevated);padding:.5rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.setting-group{display:flex;align-items:center;gap:.75rem}.setting-group label{font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--text-secondary);letter-spacing:.5px}.toggle-group{display:flex;background:#0003;padding:2px;border-radius:8px;border:1px solid rgba(255,255,255,.05)}.toggle-btn{background:transparent;border:none;color:var(--text-dim);padding:.4rem .8rem;font-size:.75rem;font-weight:600;border-radius:6px;cursor:pointer;transition:all .2s ease;font-family:var(--font-main)}.toggle-btn:hover{color:var(--text-primary)}.toggle-btn.active{background:var(--accent-dim);color:var(--accent-color);box-shadow:0 2px 8px #0003}.switch{position:relative;display:inline-block;width:36px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ffffff1a;transition:.4s;border-radius:20px}.slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:var(--text-dim);transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--accent-dim);border:1px solid var(--accent-color)}input:checked+.slider:before{transform:translate(16px);background-color:var(--accent-color)}.stat-row{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500}.stat-row .stat-label{color:var(--text-secondary);text-transform:uppercase;font-size:.75rem;letter-spacing:.5px;font-weight:600}.stat-row .stat-value{color:var(--text-primary);font-size:1.125rem;font-weight:700;font-variant-numeric:tabular-nums;min-width:3ch;text-shadow:0 0 20px rgba(79,240,183,.3);transition:all .3s cubic-bezier(.4,0,.2,1)}.stat-row .stat-value.updated{animation:statUpdate .4s ease-out}@keyframes statUpdate{0%{transform:scale(1.2);color:var(--accent-color)}to{transform:scale(1);color:var(--text-primary)}}.stat-row .stat-unit{color:var(--text-dim);font-size:.75rem;font-weight:500}.progress-container{width:120px;height:4px;background:#ffffff0f;border-radius:2px;overflow:hidden;position:relative}.progress-bar{width:40%;height:100%;background:linear-gradient(90deg,var(--accent-color),var(--accent-hover));border-radius:2px;transition:width .3s ease;box-shadow:0 0 8px #4ff0b766}.menu-icon{cursor:pointer;padding:.75rem;border-radius:8px;transition:var(--transition);color:var(--text-secondary);display:flex;align-items:center;justify-content:center}.menu-icon:hover{background:var(--accent-dim);color:var(--accent-color)}main{flex-grow:0;display:flex;justify-content:center;align-items:flex-start;padding-top:2rem;padding-bottom:1rem}.typing-area{width:100%;max-width:900px;text-align:center;position:relative;bottom:670px}.words-display-bg{position:absolute;top:0;left:0;width:100%;height:160px;border-radius:16px;z-index:0;background:radial-gradient(ellipse at top left,rgba(79,240,183,.08) 0%,transparent 50%),radial-gradient(ellipse at bottom right,rgba(79,240,183,.06) 0%,transparent 50%),linear-gradient(145deg,#ffffff14,#ffffff05);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0009,inset 0 1px #ffffff1a,inset 0 -1px #0003;overflow:hidden}.words-display{font-family:var(--font-mono);font-size:1.5rem;line-height:2.3rem;color:var(--text-dim);display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.75rem;padding:1rem;background:linear-gradient(145deg,#ffffff08,#ffffff03);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;position:relative;z-index:1;border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 16px #0000004d,inset 0 0 0 1px #ffffff0d;height:160px;text-align:left;contain:layout style;overflow:hidden}.smooth-cursor{position:absolute;top:0;left:0;width:4px;height:2rem;background-color:var(--accent-color);border-radius:2px;pointer-events:none;z-index:10;transition:all .1s cubic-bezier(.2,0,0,1);will-change:left,top;box-shadow:0 0 10px #4ff0b780}.smooth-cursor.blinking{animation:cursorBlink 1s infinite}@keyframes cursorBlink{0%,to{opacity:1}50%{opacity:0}}.word.current{position:relative;color:var(--text-primary);opacity:1;transition:width .5s ease-in-out}.word.completed{color:var(--text-primary);opacity:.8;transition:width .5s ease-in-out}.char-correct{color:var(--text-primary);transition:width .5s ease-in-out}.char-incorrect{color:var(--danger);transition:width .5s ease-in-out}.char-pending{color:var(--text-dim);transition:width .5s ease-in-out}.char-active{color:var(--accent-color);text-shadow:0 0 12px var(--accent-color);display:inline-block;font-weight:700;animation:charPulse 1.5s infinite;transition:width .5s ease-in-out}@keyframes charPulse{0%{transform:scale(1.1);opacity:.8}50%{transform:scale(1.3);opacity:1;text-shadow:0 0 16px var(--accent-color)}to{transform:scale(1.1);opacity:.8}}.cursor-char{display:none}.right-panel{position:absolute;right:2rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.75rem}.btn{padding:.625rem 1.25rem;border:none;border-radius:10px;font-weight:600;font-size:.875rem;cursor:pointer;font-family:var(--font-main);transition:var(--transition);letter-spacing:.3px;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff1a;transform:translate(-50%,-50%);transition:width .3s,height .3s}.btn:hover:before{width:300px;height:300px}.btn:hover{transform:translate(-4px)}.btn:active{transform:translate(-2px) scale(.98)}.btn-primary{background:var(--accent-color);color:#000;box-shadow:0 4px 16px #4ff0b74d}.btn-primary:hover{box-shadow:0 6px 20px #4ff0b766}.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid rgba(255,255,255,.08)}.btn-secondary:hover{border-color:var(--accent-color);color:var(--accent-color);background:var(--accent-dim)}.bottom-indicators{display:flex;justify-content:center;align-items:center;gap:.75rem;padding-bottom:1.5rem}.shield-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);border:2px solid rgba(255,255,255,.05);transition:var(--transition);position:relative;opacity:.4}.shield-icon:before{content:"🛡️";font-size:1rem;filter:grayscale(1)}.shield-icon.active{opacity:1;border-color:var(--accent-color);background:var(--accent-dim);box-shadow:0 0 16px #4ff0b74d}.shield-icon.active:before{filter:grayscale(0);animation:pulse 2s ease-in-out infinite}.typing-area:focus-within .words-display{border-color:#4ff0b733;box-shadow:0 8px 32px #0006,0 0 0 1px #4ff0b71a}.stat-value{transition:all .3s cubic-bezier(.4,0,.2,1)}#results-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;justify-content:center;align-items:center;pointer-events:auto;opacity:1;transition:opacity .5s ease}#results-overlay.hidden{opacity:0;pointer-events:none}.results-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#0a0e14b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.results-content{position:relative;z-index:1001;display:flex;flex-direction:column;align-items:center;gap:2rem;transform:translateY(0);transition:transform .5s cubic-bezier(.2,0,0,1)}#results-overlay.hidden .results-content{transform:translateY(20px)}.wpm-result-container{width:100%;max-width:800px;height:400px;display:flex;justify-content:center;align-items:center}.quote-container{text-align:center;max-width:600px;padding:0 1rem;perspective:1000px}.quote-text{font-size:1.5rem;font-style:italic;color:var(--text-primary);font-weight:300;line-height:1.6;margin-bottom:1rem;text-shadow:0 2px 10px rgba(0,0,0,.5)}.quote-author{font-size:.875rem;color:var(--accent-color);font-weight:600;text-transform:uppercase;letter-spacing:1px}.restart-btn{display:flex;align-items:center;gap:.75rem;padding:1rem 2rem;background:var(--accent-color);color:#000;font-family:var(--font-main);font-size:1.125rem;font-weight:700;border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px #4ff0b766}.restart-btn:hover{transform:translateY(-2px);box-shadow:0 6px 30px #4ff0b799;background:var(--accent-hover)}.restart-btn i{font-size:1rem;transition:transform .5s ease}.restart-btn:hover i{transform:rotate(180deg)}@media(max-width:1200px){.right-panel{position:static;transform:none;flex-direction:row;justify-content:center;margin-top:auto}}@media(max-width:768px){#ui-layer{padding:1rem}header{flex-direction:column;align-items:flex-start;gap:1rem}.stats-section{width:100%;justify-content:space-between}.words-display-bg{height:200px}.words-display{font-size:1.35rem;line-height:2rem;padding:1.25rem 1.75rem;gap:.65rem;min-height:200px}.logo-section{flex-wrap:wrap}.logo-section h1{font-size:1.25rem}.btn{padding:.5rem 1rem;font-size:.8rem}}#window-size-warning{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:flex;justify-content:center;align-items:center;pointer-events:auto;opacity:1;transition:opacity .3s ease}#window-size-warning.hidden{opacity:0;pointer-events:none}.warning-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#0a0e14f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.warning-content{position:relative;z-index:10001;display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:3rem 2.5rem;background:linear-gradient(145deg,#ffffff1a,#ffffff0d);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;border:2px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #000c,inset 0 1px #fff3;max-width:500px;text-align:center;animation:warningSlideIn .4s cubic-bezier(.2,0,0,1)}@keyframes warningSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.warning-icon{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--warning) 0%,#ffb93d 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #ffd93d66;animation:warningIconPulse 2s ease-in-out infinite}@keyframes warningIconPulse{0%,to{transform:scale(1);box-shadow:0 4px 20px #ffd93d66}50%{transform:scale(1.05);box-shadow:0 4px 30px #ffd93d99}}.warning-icon i{font-size:2.5rem;color:#000}.warning-title{font-family:"Orbitron",var(--font-main);font-size:1.75rem;font-weight:800;color:var(--text-primary);margin:0;letter-spacing:1px;text-transform:uppercase;background:linear-gradient(135deg,var(--text-primary) 0%,var(--warning) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.warning-message{font-size:1rem;color:var(--text-secondary);line-height:1.6;margin:0;max-width:400px}.warning-requirements{display:flex;flex-direction:column;gap:1rem;width:100%;padding:1.5rem;background:#0000004d;border-radius:12px;border:1px solid rgba(255,217,61,.2)}.requirement-item{display:flex;align-items:center;gap:1rem;font-size:.95rem;color:var(--text-primary)}.requirement-item i{color:var(--warning);font-size:1.25rem;width:30px;text-align:center}.requirement-item strong{color:var(--accent-color);font-weight:700}.warning-current-size{padding:.75rem 1.5rem;background:#ffd93d1a;border-radius:8px;border:1px solid rgba(255,217,61,.2)}.warning-current-size small{font-family:var(--font-mono);font-size:.875rem;color:var(--text-secondary)}.warning-current-size span{color:var(--warning);font-weight:700;margin-left:.5rem}*{will-change:auto}.progress-bar,.shield-icon.active,.btn{will-change:transform,opacity}