:root{--neon-green: #0f0;--neon-blue: #0af;--neon-purple: #f0f;--neon-yellow: #ff0;--neon-red: #f00;--bg-dark: #0a0a0a;--bg-darker: #050505;--text-primary: #fff;--text-secondary: #ccc}.pong-landing{min-height:100vh;background:var(--bg-darker);color:var(--text-primary);font-family:Courier New,Consolas,monospace;line-height:1.6;overflow-x:hidden}.neon-text{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor}.neon-border{box-shadow:0 0 10px currentColor,0 0 20px currentColor,inset 0 0 10px currentColor}.header{background:linear-gradient(135deg,var(--bg-dark) 0%,#001a00 100%);padding:80px 20px;text-align:center;position:relative;overflow:hidden}.header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(0,255,0,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(0,170,255,.1) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(255,0,255,.05) 0%,transparent 50%);animation:pulse 8s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.title{font-size:4rem;color:var(--neon-green);margin-bottom:20px;position:relative}.subtitle{font-size:1.5rem;color:var(--neon-blue);margin-bottom:40px;max-width:600px;margin-left:auto;margin-right:auto}.cta-button{display:inline-block;padding:15px 40px;font-size:1.2rem;color:var(--neon-green);border:2px solid var(--neon-green);text-decoration:none;border-radius:8px;transition:all .3s ease;background:#00ff001a;position:relative;z-index:1;cursor:pointer;font-family:inherit}.cta-button:hover{background:var(--neon-green);color:#000;transform:translateY(-2px);box-shadow:0 0 30px var(--neon-green)}.section{padding:80px 20px;max-width:1200px;margin:0 auto}.section-dark{background:var(--bg-dark)}.section-title{font-size:2.5rem;color:var(--neon-blue);text-align:center;margin-bottom:50px;position:relative}.section-title:after{content:"";display:block;width:100px;height:3px;background:var(--neon-blue);margin:15px auto;border-radius:2px}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px;margin-top:50px}.card{background:#ffffff0d;border:1px solid rgba(0,255,0,.2);border-radius:12px;padding:30px;transition:all .3s ease;position:relative;overflow:hidden;cursor:pointer}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--neon-green);transform:scaleX(0);transition:transform .3s ease}.card:hover:before{transform:scaleX(1)}.card:hover{transform:translateY(-5px);border-color:var(--neon-green);box-shadow:0 10px 30px #0f03}.card-icon{font-size:3rem;margin-bottom:20px;color:var(--neon-purple)}.card-title{font-size:1.5rem;color:var(--neon-green);margin-bottom:15px}.card-content{color:var(--text-secondary);font-size:1rem}.code-block{background:#000c;border:1px solid rgba(0,255,0,.3);border-radius:8px;padding:20px;margin:20px 0;overflow-x:auto;font-family:Courier New,monospace;font-size:.9rem}.code-keyword{color:var(--neon-purple)}.code-function{color:var(--neon-blue)}.code-string{color:var(--neon-green)}.code-comment{color:#666}.code-number{color:var(--neon-yellow)}.phases-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:40px}.phase{background:#ffffff0d;border-radius:10px;padding:25px;text-align:center;border:1px solid transparent;transition:all .3s ease;cursor:pointer}.phase:hover{border-color:var(--neon-green);transform:scale(1.05)}.phase-beginner{border-left:4px solid var(--neon-red)}.phase-basic{border-left:4px solid var(--neon-yellow)}.phase-advanced{border-left:4px solid var(--neon-green)}.phase-title{font-size:1.3rem;color:var(--text-primary);margin-bottom:10px}.phase-range{color:var(--neon-blue);font-weight:700;margin-bottom:15px}.phase-description{color:var(--text-secondary);font-size:.9rem}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:40px}.metric{text-align:center;padding:20px;background:#ffffff0d;border-radius:8px;border:1px solid rgba(0,255,0,.2)}.metric-value{font-size:2rem;color:var(--neon-yellow);margin-bottom:10px}.metric-label{color:var(--text-secondary);font-size:.9rem}.footer{background:var(--bg-darker);padding:40px 20px;text-align:center;border-top:1px solid rgba(0,255,0,.2)}.footer-content{max-width:600px;margin:0 auto}.footer-text{color:var(--text-secondary);margin-bottom:20px}.fade-in{opacity:0;transform:translateY(30px);transition:all .6s ease}.fade-in.visible{opacity:1;transform:translateY(0)}@media(max-width:768px){.title{font-size:2.5rem}.subtitle{font-size:1.2rem}.section{padding:50px 20px}.cards-grid,.phases-container,.metrics-grid{grid-template-columns:1fr}.section-title{font-size:2rem}}@media(max-width:480px){.title{font-size:2rem}.subtitle{font-size:1rem}.card{padding:20px}.card-icon{font-size:2rem}.card-title{font-size:1.2rem}}:root{--neon-green: #0f0;--neon-blue: #0af;--neon-red: #f00;--neon-yellow: #ff0;--neon-purple: #f0f;--bg-color: #000}.pong-container{min-height:100vh;background:var(--bg-color);color:var(--neon-green);font-family:Courier New,monospace}.pong-game-container{width:100%;max-width:900px;margin:0 auto;padding:20px;display:flex;flex-direction:column;align-items:center;gap:20px}.game-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 20px}.game-header h1{font-size:24px;color:var(--neon-green);text-shadow:0 0 10px var(--neon-green);text-align:center}.back-button{background:transparent;color:var(--neon-green);border:2px solid var(--neon-green);padding:10px 20px;font-family:inherit;font-size:14px;cursor:pointer;border-radius:5px;transition:all .3s}.back-button:hover{background:var(--neon-green);color:#000}.header-controls{display:flex;gap:10px}.control-btn{background:transparent;color:var(--neon-green);border:2px solid var(--neon-green);padding:12px 20px;font-family:inherit;font-size:14px;cursor:pointer;border-radius:5px;transition:all .3s;min-width:120px}.control-btn:hover{background:var(--neon-green);color:#000}.game-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:600px}.stat{background:#001e0066;padding:10px;border:2px solid var(--neon-green);border-radius:8px;text-align:center}.stat-value{font-size:18px;font-weight:700;margin-top:5px}.training-status{color:var(--neon-blue);text-shadow:0 0 5px var(--neon-blue)}.game-canvas-container{position:relative;width:100%;max-width:800px}.pong-canvas{background:#000;border:3px solid var(--neon-green);box-shadow:0 0 20px var(--neon-green);display:block;width:100%;height:400px}.progress-bar{width:100%;max-width:600px;height:20px;background:#0032004d;border:2px solid var(--neon-green);border-radius:10px;overflow:hidden;margin:10px 0}.progress-fill{height:100%;transition:width .3s ease;box-shadow:0 0 10px currentColor;background:var(--neon-blue)}.phase-info{display:flex;justify-content:space-between;width:100%;max-width:600px;font-size:12px;margin-top:5px}.learning-stage{background:#ff00ff1a;padding:10px;border:2px solid var(--neon-purple);border-radius:8px;text-align:center;margin-top:10px;width:100%;max-width:600px}.learning-progress{width:100%;height:8px;background:#0032004d;border-radius:4px;margin:5px 0;overflow:hidden}.learning-progress-fill{height:100%;transition:width .5s ease}.controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;max-width:600px}.training-info{background:#001e004d;padding:15px;border:2px solid var(--neon-blue);border-radius:10px;width:100%;max-width:600px;margin-top:10px}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.info-item{padding:8px;background:#00280066;border-radius:5px;font-size:12px}.fitness-details{background:#001e004d;padding:15px;border:2px solid var(--neon-purple);border-radius:10px;width:100%;max-width:600px;margin-top:10px}.fitness-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.fitness-item{padding:6px;background:#00280066;border-radius:4px;font-size:11px;text-align:center}.fitness-value{font-weight:700;color:var(--neon-yellow)}.instructions{text-align:center;font-size:14px;opacity:.8;margin-top:10px}@media(max-width:768px){.game-stats{grid-template-columns:repeat(2,1fr)}.game-header{flex-direction:column;gap:15px;text-align:center}.controls{flex-direction:column;align-items:center}.control-btn{width:100%;max-width:300px}.pong-canvas{height:300px}.fitness-grid{grid-template-columns:repeat(2,1fr)}.info-grid{grid-template-columns:1fr}}