body{margin:0;padding:0}#root{min-height:100vh}:root{--bg-primary:#0d0d1a;--bg-secondary:#141420;--bg-card:#1a1a2e;--accent:#00d4ff;--accent-glow:#00d4ff4d;--text-primary:#fff;--text-secondary:#a0a0b0;--border:#2a2a3e;--success:#0f8;--warning:#fa0}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app{flex-direction:column;min-height:100vh;display:flex}.header{text-align:center;background:linear-gradient(180deg, var(--bg-secondary) 0%, transparent 100%);border-bottom:1px solid var(--border);padding:2rem}.header h1{background:linear-gradient(135deg, var(--accent) 0%, #0f8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem;font-size:2.5rem;font-weight:700}.header p{color:var(--text-secondary);font-size:1.1rem}.main{flex:1;gap:2rem;width:100%;max-width:1400px;margin:0 auto;padding:2rem;display:flex}.controls-panel{flex-direction:column;flex-shrink:0;gap:1.5rem;width:320px;display:flex}.control-group{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.5rem}.control-group h2{text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:1rem;font-size:1rem}.control-group label{flex-direction:column;gap:.5rem;margin-bottom:1rem;display:flex}.control-group label span{color:var(--text-secondary);font-size:.9rem}.control-group input[type=range]{-webkit-appearance:none;background:var(--bg-secondary);cursor:pointer;border-radius:4px;outline:none;width:100%;height:8px}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;width:18px;height:18px;box-shadow:0 0 10px var(--accent-glow);border-radius:50%;transition:transform .2s}.control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.toggle-btn{background:var(--bg-secondary);border:1px solid var(--border);width:100%;color:var(--text-primary);cursor:pointer;border-radius:10px;margin-bottom:.75rem;padding:.875rem 1rem;font-size:.95rem;transition:all .3s}.toggle-btn:hover{border-color:var(--accent);box-shadow:0 0 15px var(--accent-glow)}.toggle-btn.active{border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow);background:linear-gradient(135deg,#00d4ff33 0%,#0f83 100%)}.reset-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff6b6b 0%,#ee5a24 100%);border:none;border-radius:10px;width:100%;margin-top:.5rem;padding:.875rem 1rem;font-size:.95rem;font-weight:600;transition:all .3s}.reset-btn:hover{transform:translateY(-2px);box-shadow:0 5px 20px #ff6b6b66}.insights-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.5rem}.insights-panel h2{text-transform:uppercase;letter-spacing:.1em;color:var(--warning);margin-bottom:1rem;font-size:1rem}.insights-panel p{color:var(--text-secondary);border-bottom:1px solid var(--border);padding:.5rem 0;font-size:.9rem;line-height:1.5}.insights-panel p:last-child{border-bottom:none}.info-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.5rem}.info-panel h2{text-transform:uppercase;letter-spacing:.1em;color:#b4d4ff;margin-bottom:1rem;font-size:1rem}.info-panel p{color:var(--text-secondary);font-size:.85rem;line-height:1.6}.visualization{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;flex-direction:column;flex:1;align-items:center;padding:1.5rem;display:flex}.visualization canvas{border-radius:12px;box-shadow:0 0 40px #00d4ff1a}.legend{width:100%;max-width:700px;color:var(--text-secondary);justify-content:space-between;margin-top:1rem;padding:0 1rem;font-size:.85rem;display:flex}.footer{text-align:center;border-top:1px solid var(--border);color:var(--text-secondary);padding:1.5rem;font-size:.9rem}@media (width<=900px){.main{flex-direction:column}.controls-panel{width:100%}.visualization canvas{width:100%;height:auto}}