body{background-color:#1a1a1a;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}#root{min-height:100vh}:root{--bg-primary:#0d0d14;--bg-secondary:#151520;--bg-card:#1a1a2e;--bg-hover:#252538;--accent-primary:#7c3aed;--accent-secondary:#a855f7;--accent-tertiary:#c084fc;--accent-glow:#7c3aed4d;--text-primary:#e8e8ed;--text-secondary:#a0a0b0;--text-muted:#6b6b7b;--border-color:#2a2a3d;--border-hover:#3a3a4d;--success-color:#10b981;--error-color:#ef4444;--warning-color:#f59e0b;--info-color:#3b82f6;--header-height:56px;--sidebar-width:240px;--sidebar-width-collapsed:70px;--transition-fast:150ms ease;--transition-normal:250ms ease;--shadow-sm:0 2px 4px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 24px #00000080;--shadow-glow:0 0 20px var(--accent-glow)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:14px}body,html{height:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0d0d14;background-color:var(--bg-primary);color:#e8e8ed;color:var(--text-primary);font-family:Inter,Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;margin:0;padding:0}#root{height:100%}#root,.main-layout{display:flex;flex-direction:column}.main-layout{height:100vh;overflow:hidden}.main-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(180deg,#151520,#151520f2);background:linear-gradient(180deg,var(--bg-secondary) 0,#151520f2 100%);border-bottom:1px solid #2a2a3d;border-bottom:1px solid var(--border-color);height:56px;height:var(--header-height);justify-content:space-between;left:0;padding:0 20px;position:fixed;right:0;top:0;z-index:1000}.header-left,.main-header{align-items:center;display:flex}.header-left{gap:16px}.header-logo{align-items:center;color:#e8e8ed;color:var(--text-primary);display:flex;font-size:1.1rem;font-weight:600;gap:10px}.header-logo-icon{font-size:1.4rem}.header-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#7c3aed,#a855f7);background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 100%);-webkit-background-clip:text;background-clip:text}.header-right{align-items:center;display:flex;gap:16px}.connection-status{font-size:.85rem;gap:8px;padding:6px 12px}.connection-status.connected{background:#10b98126;border:1px solid #10b9814d;color:#10b981;color:var(--success-color)}.connection-status.disconnected{background:#ef444426;border:1px solid #ef44444d;color:#ef4444;color:var(--error-color)}.connection-status.connecting{background:#f59e0b26;border:1px solid #f59e0b4d;color:#f59e0b;color:var(--warning-color)}.status-dot{animation:pulse 2s ease-in-out infinite}.main-body{flex:1 1;height:100vh;padding-top:56px;padding-top:var(--header-height)}.main-body,.sidebar{display:flex;overflow:hidden}.sidebar{background-color:#151520;background-color:var(--bg-secondary);border-right:1px solid #2a2a3d;border-right:1px solid var(--border-color);bottom:0;flex-direction:column;left:0;position:fixed;top:56px;top:var(--header-height);transition:width .25s ease;transition:width var(--transition-normal);width:240px;width:var(--sidebar-width);z-index:900}.sidebar.collapsed{width:70px;width:var(--sidebar-width-collapsed)}.sidebar-nav{flex:1 1;overflow-y:auto;padding:16px 12px}.nav-item{align-items:center;border:1px solid #0000;border-radius:10px;color:#a0a0b0;color:var(--text-secondary);cursor:pointer;display:flex;gap:12px;margin-bottom:4px;padding:12px 16px;text-decoration:none;transition:all .15s ease;transition:all var(--transition-fast)}.nav-item:hover{background-color:#252538;background-color:var(--bg-hover);color:#e8e8ed;color:var(--text-primary)}.nav-item.active{background:linear-gradient(135deg,#7c3aed33,#a855f71a);border-color:#7c3aed4d;color:#a855f7;color:var(--accent-secondary)}.nav-icon{font-size:1.3rem;min-width:24px;text-align:center}.nav-label{font-size:.9rem;font-weight:500;opacity:1;transition:opacity .15s ease;transition:opacity var(--transition-fast);white-space:nowrap}.sidebar.collapsed .nav-label{opacity:0;overflow:hidden;width:0}.sidebar-footer{border-top:1px solid #2a2a3d;border-top:1px solid var(--border-color);padding:16px}.sidebar-toggle{align-items:center;background:#252538;background:var(--bg-hover);border:1px solid #2a2a3d;border:1px solid var(--border-color);border-radius:8px;color:#a0a0b0;color:var(--text-secondary);cursor:pointer;display:flex;justify-content:center;padding:10px;transition:all .15s ease;transition:all var(--transition-fast);width:100%}.sidebar-toggle:hover{background:#1a1a2e;background:var(--bg-card);color:#e8e8ed;color:var(--text-primary)}.sidebar-version{color:#6b6b7b;color:var(--text-muted);font-size:.75rem;margin-top:12px;text-align:center}.main-content{background-color:#0d0d14;background-color:var(--bg-primary);flex:1 1;margin-left:240px;margin-left:var(--sidebar-width);overflow-y:auto;padding:24px;transition:margin-left .25s ease;transition:margin-left var(--transition-normal)}.main-content.sidebar-collapsed,.sidebar.collapsed~.main-content{margin-left:70px;margin-left:var(--sidebar-width-collapsed)}.main-content::-webkit-scrollbar{width:8px}.main-content::-webkit-scrollbar-track{background:#151520;background:var(--bg-secondary)}.main-content::-webkit-scrollbar-thumb{background:#2a2a3d;background:var(--border-color);border-radius:4px}.main-content::-webkit-scrollbar-thumb:hover{background:#3a3a4d;background:var(--border-hover)}.card{background-color:#1a1a2e;background-color:var(--bg-card);border:1px solid #2a2a3d;border:1px solid var(--border-color);border-radius:12px;padding:20px;transition:all .15s ease;transition:all var(--transition-fast)}.card:hover{border-color:#3a3a4d;border-color:var(--border-hover);box-shadow:0 2px 4px #0000004d;box-shadow:var(--shadow-sm)}.card-title{color:#e8e8ed;color:var(--text-primary);display:flex;font-size:1rem;font-weight:600;margin-bottom:16px}.btn,.card-title{align-items:center;gap:8px}.btn{border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-size:.9rem;font-weight:500;justify-content:center;padding:10px 20px;transition:all .15s ease;transition:all var(--transition-fast)}.btn-primary{background:linear-gradient(135deg,#7c3aed,#a855f7);background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 100%)}.btn-primary:hover{box-shadow:0 0 20px #7c3aed4d;transform:translateY(-1px)}.btn-secondary{background:#252538;border:1px solid #2a2a3d;border:1px solid var(--border-color);color:#e8e8ed}.btn-secondary:hover{background:#1a1a2e;border-color:#3a3a4d;border-color:var(--border-hover)}.btn-success{background:#10b981;background:var(--success-color);color:#fff}.btn-danger{background:#ef4444;background:var(--error-color);color:#fff}.btn-warning{background:#f59e0b;background:var(--warning-color);color:#fff}.simulation-view{grid-gap:20px;display:grid;gap:20px;grid-template-columns:800px 1fr;grid-template-rows:auto 1fr auto;min-height:calc(100vh - 80px);padding:20px}.circuit-area{display:flex;flex-direction:column;grid-column:1;grid-row:1/4}.controls-area{align-content:flex-start;display:flex;flex-wrap:wrap;gap:12px;grid-column:2;grid-row:1;max-height:calc(100vh - 420px);overflow-y:auto}.controls-area .control-card{flex-basis:calc(50% - 6px);flex-grow:1;flex-shrink:1;min-width:280px;padding:16px}.visualizations-area{display:flex;flex-direction:column;gap:12px;grid-column:2;grid-row:2/4;min-height:400px}.visualization-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;display:flex;flex:1 1;flex-direction:column;min-height:380px;padding:16px}.visualization-card-title{align-items:center;color:var(--text-primary);display:flex;font-size:.9rem;font-weight:600;gap:8px;margin-bottom:12px}.visualization-canvas{align-items:center;display:flex;flex:1 1;justify-content:center;min-height:0;overflow:hidden}.visualization-canvas canvas{max-height:100%;max-width:100%;object-fit:contain}.visualization-canvas>div{align-items:center;display:flex;height:100%;justify-content:center;width:100%}@media (max-width:1400px){.simulation-view{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:12px}.circuit-area{grid-column:1;grid-row:1}.controls-area{grid-column:1;grid-row:2;max-height:none}.controls-area .control-card{flex:1 1 100%}.visualizations-area{grid-column:1;grid-row:3}}.circuit-container{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;padding:16px}.circuit-header{border-bottom:1px solid var(--border-color);justify-content:space-between;margin-bottom:16px;padding-bottom:12px}.circuit-header,.circuit-title{align-items:center;display:flex}.circuit-title{color:var(--text-primary);font-size:1rem;font-weight:600;gap:8px}.circuit-badge{background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 100%);border-radius:12px;color:#fff;font-size:.75rem;font-weight:600;padding:4px 10px}.circuit-canvas-wrapper{align-items:center;background:linear-gradient(180deg,#0a0a10,#12121c);border-radius:8px;display:flex;flex:1 1;justify-content:center;min-height:500px;overflow:hidden;position:relative}.circuit-canvas-wrapper canvas{max-height:100%;max-width:100%;object-fit:contain}.circuit-options{border-top:1px solid var(--border-color);display:flex;gap:16px;margin-top:12px;padding-top:12px}.circuit-option{align-items:center;color:var(--text-secondary);cursor:pointer;display:flex;font-size:.85rem;gap:8px}.circuit-option input[type=checkbox]{accent-color:var(--accent-primary)}.controls-panel{display:flex;flex-direction:column;gap:20px}.control-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:20px}.control-card-title{align-items:center;color:var(--text-primary);display:flex;font-size:1rem;font-weight:600;justify-content:space-between;margin-bottom:16px}.status-badge{border-radius:12px;font-size:.75rem;font-weight:600;padding:4px 12px;text-transform:uppercase}.status-badge.running{background:#10b98126;color:var(--success-color)}.status-badge.paused{background:#f59e0b26;color:var(--warning-color)}.status-badge.created,.status-badge.stopped{background:#ef444426;color:var(--error-color)}.sim-stats{grid-gap:12px;display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-bottom:20px}.stat-item{background:var(--bg-hover);border-radius:8px;padding:12px;text-align:center}.stat-label{color:var(--text-muted);font-size:.7rem;letter-spacing:.5px;margin-bottom:4px;text-transform:uppercase}.stat-value{color:var(--text-primary);font-size:1.1rem;font-weight:700}.stat-value.highlight{color:var(--accent-secondary)}.control-buttons{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}.control-btn{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-size:.85rem;font-weight:600;gap:6px;justify-content:center;padding:12px 16px;transition:all .2s}.control-btn.play{background:linear-gradient(135deg,var(--success-color) 0,#059669 100%);color:#fff}.control-btn.pause{background:linear-gradient(135deg,var(--warning-color) 0,#d97706 100%);color:#fff}.control-btn.stop{background:linear-gradient(135deg,var(--error-color) 0,#dc2626 100%);color:#fff}.control-btn.reset{background:linear-gradient(135deg,var(--info-color) 0,#2563eb 100%);color:#fff}.control-btn:hover:not(:disabled){box-shadow:var(--shadow-md);transform:translateY(-2px)}.control-btn:disabled{cursor:not-allowed;opacity:.5;transform:none}.speed-control{margin-top:16px}.speed-label{color:var(--text-secondary);display:flex;font-size:.85rem;justify-content:space-between;margin-bottom:8px}.speed-value{color:var(--accent-secondary);font-weight:600}.speed-slider{-webkit-appearance:none;background:var(--bg-hover);border-radius:3px;height:6px}.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 100%);border-radius:50%;cursor:pointer;height:18px;width:18px}.generation-progress{margin-top:16px}.progress-label{color:var(--text-secondary);display:flex;font-size:.85rem;justify-content:space-between;margin-bottom:8px}.progress-bar{background:var(--bg-hover)}.progress-fill{background:linear-gradient(90deg,var(--accent-primary) 0,var(--accent-secondary) 100%);border-radius:4px}.race-visualizer{position:relative}.visualizer-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.performance-btn{background:#0000;border:1px solid var(--border-color);border-radius:4px;color:var(--text-secondary);cursor:pointer;font-size:12px;padding:4px 8px}.performance-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.performance-metrics{align-items:center;display:flex;gap:8px}.educational-section,.genetic-algorithm-explainer,.interactive-examples,.neural-network-visualizer{color:var(--text-primary);font-family:Arial,sans-serif;margin:0 auto;max-width:1200px;padding:20px}.examples-header,.explainer-header,.visualizer-header{margin-bottom:30px;text-align:center}.examples-header h2,.explainer-header h2,.visualizer-header h2{color:var(--text-primary);font-size:1.5rem;margin-bottom:10px}.examples-header p,.explainer-header p,.visualizer-header p{color:var(--text-secondary);font-size:16px;margin:0 auto;max-width:600px}.action-controls,.architecture-controls,.controls-panel-edu,.input-controls,.parameters-panel,.visualization-controls{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;margin-bottom:20px;padding:20px}.architecture-controls h3,.controls-panel-edu h3,.input-controls h3,.parameters-panel h3,.visualization-controls h3{color:var(--text-primary);font-size:1rem;margin:0 0 15px}.layer-controls,.parameter-controls{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.input-slider,.layer-control,.parameter-group{display:flex;flex-direction:column;gap:5px}.input-slider label,.layer-control label,.parameter-group label{color:var(--text-secondary);font-size:.9rem;font-weight:500}.input-slider input[type=range],.layer-control input[type=range],.parameter-group input[type=range]{accent-color:var(--accent-primary);width:100%}.simulation-controls-edu{gap:10px;padding:15px}.simulation-controls-edu button{background:var(--accent-primary);border-radius:4px;color:#fff;font-size:14px}.simulation-controls-edu button:hover:not(:disabled){background:var(--accent-secondary)}.generation-info{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;margin-bottom:20px;padding:15px}.generation-info h3{color:var(--text-primary);margin:0 0 10px}.stats{display:flex;flex-wrap:wrap;gap:30px}.stat{display:flex;flex-direction:column;gap:5px}.stat .value{color:var(--accent-secondary);font-size:18px;font-weight:700}.stat .label{color:var(--text-muted);font-size:.85rem}.population-visualization{margin-bottom:30px}.population-visualization h3{color:var(--text-primary);margin-bottom:15px}.individuals-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.individual{background:var(--bg-card);border:2px solid var(--border-color);border-radius:8px;padding:10px;transition:all .3s ease}.individual.mutated{border-color:var(--accent-primary);box-shadow:0 0 10px var(--accent-glow)}.individual-header{align-items:center;display:flex;font-size:12px;justify-content:space-between;margin-bottom:8px}.rank{color:var(--text-muted)}.fitness,.rank{font-weight:700}.fitness{color:var(--success-color)}.genes{display:flex;gap:2px;height:60px;margin-bottom:8px}.gene{border-radius:2px;flex:1 1;transition:all .3s ease}.parents-info{color:var(--text-muted);font-size:10px;text-align:center}.evolution-chart{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;padding:20px}.evolution-chart h3{color:var(--text-primary);margin:0 0 15px}.chart-container{position:relative}.chart-legend{display:flex;gap:20px;margin-top:10px}.legend-item{color:var(--text-secondary);gap:8px}.legend-color{border-radius:2px;height:3px;width:20px}.network-visualization{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;margin-bottom:20px;padding:20px}.network-canvas{min-height:400px;width:100%}.propagation-steps{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;padding:20px}.propagation-steps h3{color:var(--text-primary);margin:0 0 15px}.step{border-bottom:1px solid var(--border-color);color:var(--text-secondary);padding:10px 0}.step:last-child{border-bottom:none}.step strong{color:var(--text-primary)}.control-options{display:flex;flex-direction:column;gap:10px;margin-bottom:15px}.control-options label{align-items:center;color:var(--text-secondary);cursor:pointer;display:flex;gap:8px}.control-options input[type=checkbox]{accent-color:var(--accent-primary)}.speed-control-edu{display:flex;flex-direction:column;gap:5px}.speed-control-edu label{color:var(--text-secondary);font-size:.9rem}.action-buttons{display:flex;flex-direction:column;gap:10px}.action-buttons button{border:none;border-radius:8px;cursor:pointer;font-weight:600;padding:12px 20px;transition:all .2s}.action-buttons button:first-child{background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 100%);color:#fff}.action-buttons button:last-child{background:var(--bg-hover);border:1px solid var(--border-color);color:var(--text-primary)}.interactive-examples h1{color:var(--text-primary);margin-bottom:10px;text-align:center}.interactive-examples>p{color:var(--text-secondary);margin-bottom:30px;text-align:center}.example-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;margin-bottom:24px;padding:24px}.example-card h2{align-items:center;color:var(--text-primary);display:flex;gap:8px;margin-bottom:8px}.example-card>p{color:var(--text-secondary);margin-bottom:20px}.calculator-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1fr 1fr}@media (max-width:768px){.calculator-grid{grid-template-columns:1fr}}.calculator-section h3{border-bottom:1px solid var(--border-color);color:var(--text-primary);margin-bottom:16px;padding-bottom:8px}.slider-group{margin-bottom:16px}.slider-group label{color:var(--text-secondary);display:block;margin-bottom:8px}.slider-group input[type=range]{accent-color:var(--accent-primary);width:100%}.result-card{background:var(--bg-hover);border-radius:8px;margin-top:20px;padding:16px}.result-card h3{color:var(--text-primary);margin-bottom:12px}.result-row{border-bottom:1px solid var(--border-color);color:var(--text-secondary);display:flex;justify-content:space-between;padding:8px 0}.result-row:last-child{border-bottom:none}.result-row span:last-child{color:var(--text-primary);font-weight:600}.loading-state{align-items:center;color:var(--text-secondary);display:flex;flex-direction:column;justify-content:center;padding:60px 20px}.loading-spinner{animation:spin 1s linear infinite;border:3px solid var(--border-color);border-radius:50%;border-top-color:var(--accent-primary);height:48px;margin-bottom:16px;width:48px}@keyframes spin{to{transform:rotate(1turn)}}.error-state{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:60px 20px;text-align:center}.error-icon{font-size:3rem;margin-bottom:16px}.error-message{color:var(--error-color);font-size:1.1rem;font-weight:500;margin-bottom:8px}.error-description{color:var(--text-muted);font-size:.9rem;max-width:400px}.documentation-view{max-width:900px}.doc-section{margin-bottom:32px}.doc-section h2{border-bottom:2px solid var(--accent-primary);color:var(--text-primary);font-size:1.3rem;margin-bottom:16px;padding-bottom:8px}.doc-section p{color:var(--text-secondary);line-height:1.7;margin-bottom:12px}.doc-section ul{color:var(--text-secondary);line-height:1.8;margin-left:20px}.doc-section code{background:var(--bg-hover);border-radius:4px;color:var(--accent-tertiary);font-family:Fira Code,Consolas,monospace;font-size:.9em;padding:2px 8px}.stats-panel{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:20px}.stats-panel.empty{padding:40px 20px;text-align:center}.stats-panel.empty .stats-empty-message{color:var(--text-muted)}.stats-panel-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;margin-bottom:16px;padding-bottom:12px}.stats-panel-header h3{color:var(--text-primary);font-size:1rem;margin:0}.generation-badge{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border-radius:12px;color:#fff;font-size:.75rem;font-weight:600;padding:4px 12px}.stats-summary{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin-bottom:20px}.summary-stat{background:var(--bg-hover);border-radius:8px;padding:12px;text-align:center}.summary-value{font-size:1.5rem;font-weight:700}.summary-value.alive{color:var(--success-color)}.summary-value.dead{color:var(--error-color)}.summary-value.time{color:var(--accent-secondary)}.summary-label{color:var(--text-muted);font-size:.7rem;margin-top:4px;text-transform:uppercase}.stats-section{border-bottom:1px solid var(--border-color);margin-bottom:16px;padding-bottom:16px}.stats-section:last-child{border-bottom:none;margin-bottom:0}.stats-section h4{color:var(--text-primary);font-size:.85rem;margin-bottom:12px}.stats-grid{grid-gap:8px;gap:8px;grid-template-columns:repeat(3,1fr)}.stats-grid .stat-item{align-items:center;display:flex;flex-direction:column;gap:2px}.stats-grid .stat-label{color:var(--text-muted);font-size:.7rem}.stats-grid .stat-value{color:var(--text-primary);font-size:1rem;font-weight:600}.stats-grid .stat-value.best{color:var(--success-color)}.stats-grid .stat-value.worst{color:var(--error-color)}.fitness-distribution{margin-top:12px;position:relative}.fitness-bar{border-radius:4px;height:8px;position:relative}.fitness-marker{background:#fff;border-radius:2px;height:16px;position:absolute;top:-4px;transform:translateX(-50%);width:4px}.collision-stat{align-items:baseline;display:flex;gap:8px}.collision-value{color:var(--warning-color);font-size:1.5rem;font-weight:700}.collision-label{color:var(--text-muted);font-size:.85rem}.top-agents{display:flex;flex-direction:column;gap:8px}.top-agent{align-items:center;background:var(--bg-hover);border-radius:6px;display:flex;font-size:.85rem;gap:10px;padding:8px 12px}.top-agent.dead{opacity:.6}.top-agent .rank{color:var(--accent-secondary);font-weight:700;width:24px}.top-agent .agent-id{color:var(--text-secondary);flex:1 1;font-family:monospace}.top-agent .agent-fitness{color:var(--text-primary);font-weight:600}.top-agent .agent-checkpoints,.top-agent .agent-status.alive{color:var(--success-color)}.top-agent .agent-status.dead{color:var(--error-color)}.circuit-info{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}.circuit-stat{align-items:center;display:flex;flex-direction:column;gap:4px}.circuit-stat .label{color:var(--text-muted);font-size:.7rem}.circuit-stat .value{color:var(--text-primary);font-size:.9rem;font-weight:600}.evolution-summary{display:flex;flex-direction:column;gap:8px}.summary-item{color:var(--text-secondary);display:flex;font-size:.85rem;justify-content:space-between}.summary-item span:last-child{color:var(--accent-secondary);font-weight:600}.loading-indicator{color:var(--text-muted);font-size:.85rem;font-style:italic}.educational-section{margin:0 auto;max-width:1200px}.educational-header{margin-bottom:30px;text-align:center}.educational-header h1{color:var(--text-primary);font-size:2rem;margin-bottom:12px}.educational-subtitle{color:var(--text-secondary);font-size:1rem;line-height:1.6;margin:0 auto;max-width:700px}.educational-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.edu-tab{align-items:center;background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);cursor:pointer;display:flex;gap:8px;padding:12px 20px;transition:all .2s}.edu-tab:hover{background:var(--bg-hover);color:var(--text-primary)}.edu-tab.active{background:linear-gradient(135deg,#7c3aed33,#a855f71a);border-color:var(--accent-primary);color:var(--accent-secondary)}.tab-icon{font-size:1.2rem}.tab-label{font-weight:500}.tab-description{background:var(--bg-secondary);border-left:3px solid var(--accent-primary);border-radius:8px;color:var(--text-muted);font-size:.9rem;margin-bottom:24px;padding:12px 16px}.educational-content{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;min-height:400px;padding:24px}.educational-loading{align-items:center;color:var(--text-secondary);display:flex;flex-direction:column;justify-content:center;padding:60px}.educational-footer{background:var(--bg-secondary);border-radius:12px;margin-top:24px;padding:20px}.footer-tips h4{color:var(--text-primary);margin-bottom:12px}.footer-tips ul{color:var(--text-secondary);line-height:1.8;margin-left:20px}.examples-grid{display:flex;flex-direction:column;gap:24px}.example-card.full-width{width:100%}.mutation-simulator{display:flex;flex-direction:column;gap:20px}.mutation-controls{display:flex;flex-direction:column;gap:16px}.mutation-buttons{display:flex;gap:12px}.mutation-buttons button{border:none;border-radius:8px;cursor:pointer;flex:1 1;font-weight:600;padding:10px 16px;transition:all .2s}.btn-primary{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff}.btn-primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px)}.btn-secondary{background:var(--bg-hover);border:1px solid var(--border-color)!important;color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-card)}.genes-comparison{align-items:center;display:flex;gap:20px}.genes-section{background:var(--bg-hover);border-radius:8px;flex:1 1;padding:16px}.genes-section h4{color:var(--text-primary);font-size:.85rem;margin-bottom:12px;text-align:center}.genes-display{align-items:flex-end;display:flex;gap:8px;height:100px;justify-content:center}.gene-bar{align-items:center;border-radius:4px 4px 0 0;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:4px;position:relative;transition:all .3s;width:40px}.gene-bar.mutated{box-shadow:0 0 10px var(--accent-glow)}.gene-value{color:#fff;font-size:.65rem;text-shadow:0 1px 2px #00000080}.gene-bar .mutation-indicator{font-size:12px;position:absolute;top:-16px}.mutation-arrow{color:var(--accent-secondary);font-size:2rem}.mutation-stats{display:flex;gap:40px;justify-content:center}.mutation-stats .stat-item{align-items:center;display:flex;flex-direction:column;gap:4px}.mutation-stats .stat-label{color:var(--text-muted);font-size:.75rem}.mutation-stats .stat-value{color:var(--accent-secondary);font-size:1.1rem;font-weight:600}.result-row.positive .positive{color:var(--success-color)}.result-row.penalty .negative{color:var(--error-color)}.result-row.total{border-top:2px solid var(--border-color);margin-top:8px;padding-top:12px}.result-row .total-value{color:var(--accent-secondary);font-size:1.3rem}.activation-functions{display:flex;flex-direction:column;gap:20px}.activation-input{background:var(--bg-hover);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:16px}.activation-input label{color:var(--text-secondary)}.activation-input strong{color:var(--accent-secondary)}.functions-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}@media (max-width:768px){.functions-grid{grid-template-columns:1fr}}.function-card{background:var(--bg-hover);border-radius:8px;padding:16px;text-align:center}.function-card h4{color:var(--text-primary);margin-bottom:8px}.function-formula{color:var(--text-muted);font-family:Fira Code,monospace;font-size:.85rem;margin-bottom:12px}.function-output{color:var(--accent-secondary);font-size:1.5rem;font-weight:700;margin-bottom:8px}.function-bar{background:var(--bg-secondary);border-radius:4px;height:8px;margin-bottom:8px;overflow:hidden}.function-fill{height:100%;transition:width .2s}.function-fill.sigmoid{background:linear-gradient(90deg,#3b82f6,#60a5fa)}.function-fill.tanh{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}.function-fill.relu{background:linear-gradient(90deg,#10b981,#34d399)}.function-range{color:var(--text-muted);font-size:.75rem}.function-characteristics{background:var(--bg-hover);border-radius:8px;padding:16px}.function-characteristics h4{color:var(--text-primary);margin-bottom:12px}.characteristics-grid{display:flex;flex-direction:column;gap:12px}.characteristic{border-left:3px solid var(--border-color);color:var(--text-secondary);font-size:.9rem;line-height:1.5;padding-left:12px}.characteristic.sigmoid{border-color:#3b82f6}.characteristic.tanh{border-color:#8b5cf6}.characteristic.relu{border-color:#10b981}.canvas-container{display:flex;justify-content:center;margin:20px 0}.canvas-container canvas{height:auto;max-width:100%}.explanation-panel{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;margin-top:20px;padding:20px}.explanation-panel h3{color:var(--text-primary);margin-bottom:16px}.explanation-content{display:flex;flex-direction:column;gap:12px}.explanation-content .step{background:var(--bg-hover);border-radius:6px;color:var(--text-secondary);font-size:.9rem;padding:8px 12px}.explanation-content .step strong{color:var(--accent-secondary)}.activation-control{align-items:center;display:flex;gap:12px;margin-top:16px}.activation-control label{color:var(--text-secondary)}.activation-control select{background:var(--bg-hover);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;padding:8px 12px}.activation-control select:focus{border-color:var(--accent-primary);outline:none}.action-controls{display:flex;flex-direction:column;gap:12px;margin-top:16px}.propagate-btn,.regenerate-btn{border:none;border-radius:8px;cursor:pointer;font-weight:600;padding:12px 20px;transition:all .2s}.propagate-btn{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff}.regenerate-btn{background:var(--bg-hover);border:1px solid var(--border-color);color:var(--text-primary)}.propagate-btn:hover:not(:disabled),.regenerate-btn:hover:not(:disabled){transform:translateY(-2px)}.propagate-btn:disabled,.regenerate-btn:disabled{cursor:not-allowed;opacity:.5}.simulation-controls-edu{align-items:center;background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;padding:16px}.simulation-controls-edu button{background:var(--bg-hover);border:none;border-radius:6px;color:var(--text-primary);cursor:pointer;padding:8px 16px;transition:all .2s}.simulation-controls-edu button:hover:not(:disabled){background:var(--accent-primary);color:#fff}.simulation-controls-edu button:disabled{cursor:not-allowed;opacity:.5}.simulation-controls-edu .speed-control{align-items:center;display:flex;gap:8px;margin-left:auto}.simulation-controls-edu .speed-control label{color:var(--text-muted);font-size:.85rem}.simulation-controls-edu .speed-control span{color:var(--accent-secondary);font-weight:600}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes glow{0%,to{box-shadow:0 0 5px var(--accent-glow)}50%{box-shadow:0 0 20px var(--accent-glow)}}.animate-fadeIn{animation:fadeIn .3s ease forwards}.animate-slideIn{animation:slideIn .3s ease forwards}.animate-glow{animation:glow 2s ease-in-out infinite}.race-simulator{background:linear-gradient(135deg,#0f0f0f,#1a1a1a);color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;min-height:100vh}.simulator-header{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000c;border-bottom:2px solid #333;display:flex;justify-content:space-between;padding:1rem 2rem}.simulator-title{-webkit-text-fill-color:#0000;background:linear-gradient(45deg,#0af,#08c);-webkit-background-clip:text;background-clip:text;font-size:1.8rem;font-weight:700;margin:0}.connection-status{align-items:center;border-radius:20px;display:flex;font-size:.9rem;font-weight:500;gap:.5rem;padding:.5rem 1rem}.connection-status.connected{background:#0f03;color:#0f0}.connection-status.connecting{background:#ff03;color:#ff0}.connection-status.disconnected{background:#f003;color:#f44}.status-dot{animation:pulse 2s infinite;background:currentColor;border-radius:50%;height:8px;width:8px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.race-canvas-section{padding:1rem 2rem}.race-canvas-container{background:#000;border:2px solid #333;border-radius:8px;box-shadow:0 4px 20px #00000080;overflow:hidden;position:relative}.race-canvas{display:block;height:auto;width:100%}.canvas-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000c;border-radius:4px;padding:.5rem;position:absolute;right:10px;top:10px}.canvas-info{display:flex;flex-direction:column;gap:.25rem}.info-item{display:flex;font-size:.8rem;gap:1rem;justify-content:space-between}.info-label{color:#aaa}.info-value{color:#fff;font-weight:500}.controls-config-section{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:1fr 1fr;padding:1rem 2rem}.config-column,.controls-column{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #333;border-radius:8px;padding:1.5rem}.stats-ranking-section{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:1fr 1fr;padding:1rem 2rem}.ranking-column,.stats-column{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #333;border-radius:8px;padding:1.5rem}.panel-title{border-bottom:2px solid #333;color:#0af;font-size:1.2rem;font-weight:600;margin:0 0 1rem;padding-bottom:.5rem}.config-section{margin-bottom:1.5rem}.section-title{color:#fa0;font-size:1rem;font-weight:500;margin:0 0 .75rem}.config-item{align-items:center;display:flex;gap:1rem;margin-bottom:.75rem}.config-label{color:#ccc;font-size:.9rem;min-width:120px}.config-input,.config-select{background:#ffffff1a;border:1px solid #555;border-radius:4px;color:#fff;flex:1 1;font-size:.9rem;padding:.4rem .6rem}.config-input:focus,.config-select:focus{border-color:#0af;box-shadow:0 0 0 2px #0af3;outline:none}.config-slider{flex:1 1;margin-right:.5rem}.config-value{color:#0af;font-weight:500;min-width:40px;text-align:right}.config-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.config-button{border:none;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:500;padding:.6rem 1rem;transition:all .2s ease}.config-button.primary{background:#0af;color:#fff}.config-button.primary:hover{background:#08c;transform:translateY(-1px)}.config-button.secondary{background:#ffffff1a;border:1px solid #555;color:#fff}.config-button.secondary:hover{background:#fff3;border-color:#777}.stats-section{margin-bottom:1.5rem}.stats-grid{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:1fr 1fr}.stat-item{border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:.4rem 0}.stat-label{color:#aaa;font-size:.9rem}.stat-value{color:#fff;font-weight:500}.no-data{color:#666;font-style:italic;padding:1rem;text-align:center}.chart-container{margin-top:.5rem}.fitness-chart{height:auto;width:100%}.event-log,.fitness-chart{border:1px solid #333;border-radius:4px}.event-log{background:#0000004d;max-height:200px;overflow-y:auto}.event-item{border-bottom:1px solid #ffffff0d;display:flex;font-size:.8rem;gap:.5rem;padding:.4rem .6rem}.event-item.checkpoint{border-left:3px solid #ff0}.event-item.finish{border-left:3px solid #0f0}.event-item.collision{border-left:3px solid #f44}.event-item.death{border-left:3px solid #f80}.event-item.generation{border-left:3px solid #0af}.event-time{color:#888;min-width:60px}.event-message{color:#ccc}.no-events{color:#666;font-style:italic;padding:1rem;text-align:center}.ranking-controls{border-bottom:1px solid #333;display:flex;gap:1rem;margin-bottom:1rem;padding-bottom:.5rem}.control-group{align-items:center;display:flex;gap:.5rem}.control-label{color:#ccc;font-size:.9rem}.control-select{background:#ffffff1a;border:1px solid #555;border-radius:4px;color:#fff;font-size:.8rem;padding:.3rem .5rem}.control-checkbox{align-items:center;color:#ccc;cursor:pointer;display:flex;font-size:.9rem;gap:.3rem}.agents-list{max-height:300px;overflow-y:auto}.agent-item{align-items:center;border:1px solid #0000;border-radius:4px;cursor:pointer;display:flex;gap:.75rem;margin-bottom:.25rem;padding:.5rem;transition:all .2s ease}.agent-item:hover{background:#ffffff0d;border-color:#555}.agent-item.selected{background:#0af3;border-color:#0af}.agent-item.dead{opacity:.6}.agent-rank{color:#fa0;font-weight:600;min-width:30px}.agent-color{border:1px solid #333;border-radius:50%;height:12px;width:12px}.agent-info{flex:1 1}.agent-id{font-size:.9rem;font-weight:500}.agent-stats{color:#aaa;display:flex;font-size:.8rem;gap:.5rem}.stat{background:#ffffff1a;border-radius:2px;padding:.1rem .3rem}.dead-indicator{font-size:.7rem}.agent-details{background:#0000004d;border-radius:4px;font-size:.8rem;margin-top:.5rem;padding:.5rem;width:100%}.detail-row{display:flex;justify-content:space-between;margin-bottom:.25rem}.historical-list{max-height:250px;overflow-y:auto}.historical-item{align-items:center;border-bottom:1px solid #ffffff0d;display:flex;gap:.75rem;padding:.4rem}.historical-rank{color:#fa0;font-size:.8rem;font-weight:600;min-width:25px}.historical-info{flex:1 1}.historical-header{align-items:center;display:flex;justify-content:space-between}.historical-gen{color:#0af;font-size:.8rem}.historical-fitness{color:#0f0;font-weight:600}.historical-stats{color:#aaa;display:flex;font-size:.7rem;gap:.4rem;margin-top:.2rem}.completed-indicator{font-size:.6rem}.quick-stats{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:1fr 1fr}.quick-stat{display:flex;font-size:.8rem;justify-content:space-between;padding:.3rem 0}.quick-label{color:#aaa}.quick-value{color:#fff;font-weight:500}.no-agents,.no-historical{color:#666;font-style:italic;padding:1rem;text-align:center}.educational-sections{padding:1rem 2rem}.educational-row{background:#ffffff08;border:1px solid #333;border-radius:8px;margin-bottom:2rem;overflow:hidden}.educational-content{display:grid;grid-template-columns:1fr 1fr;min-height:300px}.content-column{background:#0003;border-right:1px solid #333;padding:1.5rem}.explanation-column{padding:1.5rem}.explanation-header{margin-bottom:1rem}.explanation-title{align-items:center;color:#0af;cursor:pointer;display:flex;font-size:1.3rem;font-weight:600;justify-content:space-between;margin:0;transition:color .2s ease}.explanation-title:hover{color:#0cf}.expand-icon{color:#666;font-size:.8rem}.explanation-content{color:#ddd;line-height:1.6}.explanation-content h4{color:#fa0;font-size:1rem;margin:1rem 0 .5rem}.explanation-content h5{color:#0af;font-size:.9rem;margin:.75rem 0 .25rem}.explanation-content ol,.explanation-content ul{margin:.5rem 0;padding-left:1.5rem}.explanation-content li{margin-bottom:.25rem}.tip-box{background:#00aaff1a;border:1px solid #0af;border-radius:4px;font-size:.9rem;margin:1rem 0;padding:.75rem}.section-preview{align-items:center;color:#666;display:flex;flex-direction:column;height:200px;justify-content:center}.preview-icon{font-size:3rem;margin-bottom:.5rem}.preview-text{font-size:1.1rem;font-weight:500}.evolution-canvas,.genetic-canvas,.network-canvas,.sensors-canvas{background:#000;border:1px solid #333;border-radius:4px;height:auto;width:100%}.evolution-stats,.genetic-stats{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:1fr 1fr 1fr;margin-top:1rem}.stat-row{border-bottom:1px solid #ffffff1a;display:flex;font-size:.8rem;justify-content:space-between;padding:.3rem 0}.network-controls,.sensor-controls{align-items:center;display:flex;gap:.5rem;margin-bottom:1rem}.sensor-data{margin-top:1rem}.sensor-grid{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(4,1fr);margin-top:.5rem}.sensor-value{display:flex;flex-direction:column;gap:.2rem}.sensor-label{color:#aaa;font-size:.8rem}.sensor-number{color:#fff;font-size:.8rem;font-weight:500}.sensor-bar{border-radius:2px;height:4px;transition:width .2s ease}.network-info{margin-top:1rem}.architecture-info{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr);margin:.5rem 0}.layer-info{border-bottom:1px solid #ffffff1a;display:flex;font-size:.8rem;justify-content:space-between;padding:.3rem 0}.activation-legend{margin-top:1rem}.legend-item{align-items:center;display:flex;font-size:.8rem;gap:.5rem;margin-bottom:.3rem}.legend-color{border:1px solid #333;border-radius:50%;height:12px;width:12px}.legend-color.positive{background:#0f0}.legend-color.negative{background:red}.legend-color.neutral{background:#666}@media (max-width:1200px){.controls-config-section,.educational-content,.stats-ranking-section{grid-template-columns:1fr}.content-column{border-bottom:1px solid #333;border-right:none}}@media (max-width:768px){.simulator-header{flex-direction:column;gap:1rem;text-align:center}.simulator-title{font-size:1.4rem}.race-simulator{padding:0 1rem}.evolution-stats,.genetic-stats,.quick-stats,.stats-grid{grid-template-columns:1fr}.sensor-grid{grid-template-columns:repeat(2,1fr)}.architecture-info{grid-template-columns:1fr}}.simulation-controls{height:100%}.control-section{margin-bottom:1.5rem}.status-grid{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:1fr 1fr}.status-item{border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:.4rem 0}.status-label{color:#aaa;font-size:.9rem}.status-value{color:#fff;font-weight:500}.status-value.running{color:#0f0}.status-value.paused{color:#ff0}.status-value.stopped{color:#f44}.control-buttons{display:flex;flex-direction:column;gap:.5rem}.control-button{align-items:center;border:none;border-radius:6px;cursor:pointer;display:flex;font-size:.95rem;font-weight:500;gap:.5rem;justify-content:center;padding:.75rem 1rem;transition:all .2s ease}.control-button.primary{background:linear-gradient(135deg,#0af,#08c);color:#fff}.control-button.primary:hover:not(:disabled){background:linear-gradient(135deg,#08c,#069);box-shadow:0 4px 12px #00aaff4d;transform:translateY(-1px)}.control-button.secondary{background:#ffffff1a;border:1px solid #555;color:#fff}.control-button.secondary:hover:not(:disabled){background:#fff3;border-color:#777}.control-button:disabled{cursor:not-allowed;opacity:.5;transform:none}.speed-control{display:flex;flex-direction:column;gap:.5rem}.speed-label{color:#ccc;font-size:.9rem}.speed-slider{margin:.5rem 0;width:100%}.speed-marks{color:#666;display:flex;font-size:.8rem;justify-content:space-between}.progress-info{display:flex;flex-direction:column;gap:.5rem}.progress-item{align-items:center;display:flex;font-size:.9rem;gap:.5rem}.progress-bar{background:#ffffff1a;border-radius:4px;flex:1 1;height:8px;overflow:hidden}.progress-fill{height:100%;transition:width .3s ease}.progress-fill.alive{background:linear-gradient(90deg,#f44,#ff0,#0f0)}.quick-actions{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr)}.quick-button{background:#ffffff0d;border:1px solid #444;border-radius:4px;color:#ccc;cursor:pointer;font-size:.8rem;padding:.5rem;transition:all .2s ease}.quick-button:hover{background:#ffffff1a;border-color:#666;color:#fff}