*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:#333;overflow-x:hidden;overflow-y:auto}.app-container{max-width:1400px;margin:0 auto;padding:20px;overflow:visible}header{text-align:center;margin-bottom:30px;color:#fff}header h1{font-size:2.5rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}header p{font-size:1.1rem;opacity:.9}.tab-container{background:#fff;border-radius:15px;box-shadow:0 10px 30px #0000001a;overflow:visible}.tab-buttons{display:flex;background:#f8fafc;border-bottom:2px solid #e2e8f0;border-radius:15px 15px 0 0}.tab-button{flex:1;padding:15px 20px;border:none;background:transparent;font-size:1rem;font-weight:600;color:#718096;cursor:pointer;transition:all .3s ease;border-bottom:3px solid transparent;position:relative;display:flex;align-items:center;justify-content:center;gap:6px}.tab-button:hover{background:#edf2f7;color:#4a5568}.tab-button.active{background:#fff;color:#667eea;border-bottom-color:#667eea}.tab-info-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:50%;font-size:11px;font-weight:700;cursor:help;position:relative;flex-shrink:0;transition:all .2s ease;z-index:1}.tab-info-icon:hover{transform:scale(1.15);box-shadow:0 2px 8px #667eea80;z-index:100000}.tab-info-icon:after{content:attr(data-tooltip);position:absolute;top:calc(100% + 15px);background:#2d3748;color:#fff;padding:16px 20px;border-radius:12px;font-size:.88rem;font-weight:400;line-height:1.7;white-space:pre-line;min-width:320px;max-width:380px;opacity:0;pointer-events:none;transition:all .3s ease;z-index:99999;box-shadow:0 8px 24px #00000080;text-align:left;border:1px solid rgba(255,255,255,.1)}.tab-button[data-tab=cartpole] .tab-info-icon:after{left:0;transform:translate(0)}.tab-button[data-tab=cartpole] .tab-info-icon:before{left:20px}.tab-button[data-tab=maze] .tab-info-icon:after{left:50%;transform:translate(-50%)}.tab-button[data-tab=maze] .tab-info-icon:before{left:50%}.tab-button[data-tab=lander] .tab-info-icon:after{right:0;left:auto;transform:translate(0)}.tab-button[data-tab=lander] .tab-info-icon:before{right:20px;left:auto}.tab-info-icon:before{content:"";position:absolute;top:calc(100% + 9px);transform:translate(-50%);border:6px solid transparent;border-bottom-color:#2d3748;opacity:0;pointer-events:none;transition:all .3s ease;z-index:100000}.tab-info-icon:hover:after,.tab-info-icon:hover:before{opacity:1}.tab-content{display:none;padding:0;overflow:visible}.tab-content.active{display:block}.tab-content .main-content{margin:0;padding:30px;overflow:visible}.main-content{display:grid;grid-template-columns:350px 1fr;gap:30px;margin-bottom:30px}.control-panel{background:#fff;border-radius:15px;padding:25px;box-shadow:0 10px 30px #0000001a;height:fit-content;overflow:visible}.control-panel h3{margin-bottom:20px;color:#4a5568;font-size:1.3rem}.settings-grid{display:flex;flex-direction:column;gap:20px;margin-bottom:25px;overflow:visible}.setting-group{display:flex;flex-direction:column;gap:8px}.setting-group label{font-weight:600;color:#2d3748;font-size:.9rem;display:flex;align-items:center;gap:6px;position:relative}.info-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:50%;font-size:12px;font-weight:700;cursor:help;position:relative;flex-shrink:0;transition:all .2s ease}.info-icon:hover{transform:scale(1.1);box-shadow:0 2px 8px #667eea66}.info-icon:after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-35%);background:#2d3748;color:#fff;padding:12px 16px;border-radius:8px;font-size:.85rem;font-weight:400;line-height:1.6;white-space:pre-line;min-width:280px;max-width:320px;opacity:0;pointer-events:none;transition:all .3s ease;z-index:9999;box-shadow:0 4px 12px #0000004d;text-align:left}.info-icon:before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(-50%);border:6px solid transparent;border-top-color:#2d3748;opacity:0;pointer-events:none;transition:all .3s ease;z-index:10000}.info-icon:hover:after,.info-icon:hover:before{opacity:1}.setting-group input[type=range]{width:100%;height:6px;border-radius:3px;background:#e2e8f0;outline:none;-webkit-appearance:none}.setting-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;box-shadow:0 2px 6px #0003}.setting-group input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.setting-group select{padding:8px 12px;border:2px solid #e2e8f0;border-radius:8px;background:#fff;font-size:.9rem;color:#4a5568}.setting-group span{font-weight:600;color:#667eea;font-size:.9rem}.setting-group.full-width{width:100%}.speed-buttons{display:flex;gap:8px;flex-wrap:wrap}.speed-btn,.cartpole-speed-btn,.lander-speed-btn{flex:1;min-width:50px;padding:10px 15px;border:2px solid #e2e8f0;border-radius:8px;background:#fff;color:#4a5568;font-weight:700;font-size:.95rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;text-align:center}.speed-btn:hover,.cartpole-speed-btn:hover,.lander-speed-btn:hover{background:#f7fafc;border-color:#667eea;transform:translateY(-2px)}.speed-btn.active,.cartpole-speed-btn.active,.lander-speed-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea;box-shadow:0 4px 12px #667eea66}.speed-btn:active,.cartpole-speed-btn:active,.lander-speed-btn:active{transform:translateY(0)}.control-buttons{display:flex;flex-direction:column;gap:12px}.btn{padding:12px 20px;border:none;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea66}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.btn-danger{background:linear-gradient(135deg,#ff6b6b,#ee5a52);color:#fff;box-shadow:0 4px 15px #ff6b6b66}.btn-danger:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b99}.btn-secondary{background:linear-gradient(135deg,#a8a8a8,#8e8e8e);color:#fff;box-shadow:0 4px 15px #a8a8a866}.btn-secondary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #a8a8a899}.btn-success{background:linear-gradient(135deg,#51cf66,#40c057);color:#fff;box-shadow:0 4px 15px #51cf6666}.btn-success:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #51cf6699}.btn-info{background:linear-gradient(135deg,#339af0,#228be6);color:#fff;box-shadow:0 4px 15px #339af066}.btn-info:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #339af099}.visualization-panel{display:flex;flex-direction:column;gap:20px}.game-container{background:#fff;border-radius:15px;padding:25px;box-shadow:0 10px 30px #0000001a;text-align:center}.game-container h3{margin-bottom:20px;color:#4a5568;font-size:1.3rem}#gameCanvas{border:3px solid #e2e8f0;border-radius:10px;background:#f8fafc;margin-bottom:20px;box-shadow:0 4px 15px #0000001a}.game-info{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;text-align:left}.game-info div{background:#f7fafc;padding:12px 15px;border-radius:8px;border-left:4px solid #667eea;font-weight:600;color:#4a5568}.game-info span{color:#667eea;font-weight:700}.charts-container{background:#fff;border-radius:15px;padding:25px;box-shadow:0 10px 30px #0000001a}.chart-section h3{margin-bottom:20px;color:#4a5568;font-size:1.3rem}.chart-info{margin-top:15px;padding:15px;background:#f7fafc;border-left:4px solid #667eea;border-radius:8px}.chart-label{margin:0 0 8px;font-size:.95rem;color:#2d3748;line-height:1.5}.chart-description{margin:0;font-size:.85rem;color:#718096;line-height:1.5}#scoreChart,#mazeChart{border:2px solid #e2e8f0;border-radius:10px;background:#f8fafc;width:100%;height:200px}#mazeCanvas{border:3px solid #e2e8f0;border-radius:10px;background:#f8fafc;margin-bottom:20px;box-shadow:0 4px 15px #0000001a}.status-panel{background:#fff;border-radius:15px;padding:20px;box-shadow:0 10px 30px #0000001a;text-align:center}#statusText{font-weight:600;color:#4a5568;margin-bottom:15px;font-size:1.1rem}.progress-bar{width:100%;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);width:0%;transition:width .3s ease;border-radius:4px}.footer{text-align:center;padding:30px 20px;margin-top:40px;color:#fff;font-size:.95rem}.footer p{margin:0;opacity:.9}.footer strong{font-weight:700;background:linear-gradient(135deg,#fff,#e0e7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media (max-width: 1200px){.main-content{grid-template-columns:1fr}.control-panel{order:2}.visualization-panel{order:1}}@media (max-width: 768px){.app-container{padding:15px}header h1{font-size:2rem}.game-info{grid-template-columns:1fr}#gameCanvas{width:100%;height:250px}.footer{font-size:.85rem;padding:20px 15px;margin-top:30px}}