*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1e3c72 0%,#2a5298 100%);color:#fff;overflow:hidden}#app{height:100vh;display:flex;flex-direction:column}.header{background:rgba(0,0,0,.3);padding:1rem 2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}.header h1{font-size:1.8rem;margin-bottom:.5rem;background:linear-gradient(45deg,#64b3f4 0%,#c2e59c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header p{font-size:.9rem;opacity:.8}.main-content{flex:1;display:flex;overflow:hidden}.control-panel{width:300px;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid rgba(255,255,255,.1);padding:1.5rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.control-panel::-webkit-scrollbar{width:6px}.control-panel::-webkit-scrollbar-track{background:transparent}.control-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px}.panel-section{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.panel-section:last-child{border-bottom:none}.panel-section h3{font-size:1.1rem;margin-bottom:1rem;color:#64b3f4}.control-select,.control-input{width:100%;padding:.7rem;margin-bottom:.8rem;border:1px solid rgba(255,255,255,.2);border-radius:6px;background:rgba(255,255,255,.1);color:#fff;font-size:.9rem;transition:all .3s ease}.control-select:focus,.control-input:focus{outline:none;border-color:#64b3f4;background:rgba(255,255,255,.15);box-shadow:0 0 0 2px #64b3f433}.control-select option{background:#2a2a2a;color:#fff}.input-group{display:flex;gap:.5rem;margin-bottom:.8rem}.input-group .control-input{flex:1;margin-bottom:0}.control-btn{padding:.7rem 1.2rem;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.control-btn.primary{background:linear-gradient(45deg,#64b3f4,#4a90e2);color:#fff}.control-btn.primary:hover{background:linear-gradient(45deg,#5aa3e4,#3a80d2);transform:translateY(-1px);box-shadow:0 4px 12px #64b3f44d}.control-btn.secondary{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}.control-btn.secondary:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}.control-btn.danger{background:linear-gradient(45deg,#ff6b6b,#ee5a52);color:#fff}.control-btn.danger:hover{background:linear-gradient(45deg,#ff5b5b,#de4a42);transform:translateY(-1px);box-shadow:0 4px 12px #ff6b6b4d}.control-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.speed-control{margin-bottom:1rem}.speed-control label{display:block;margin-bottom:.5rem;font-size:.9rem}.slider{width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.2);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#64b3f4;cursor:pointer;box-shadow:0 2px 6px #0000004d}.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#64b3f4;cursor:pointer;border:none;box-shadow:0 2px 6px #0000004d}.status-info p{margin-bottom:.5rem;font-size:.9rem}.status-info span{color:#64b3f4;font-weight:500}.visualization-area{flex:1;position:relative;overflow:hidden}#threeCanvas{width:100%;height:100%;display:block}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:all .3s ease}.loading-overlay.show{opacity:1;visibility:visible}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-left:4px solid #64b3f4;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.footer{background:rgba(0,0,0,.3);padding:1rem 2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);max-height:120px;overflow-y:auto}.algorithm-info h4{color:#64b3f4;margin-bottom:.5rem;font-size:1rem}.algorithm-info p{font-size:.9rem;line-height:1.4;opacity:.9}@media (max-width: 1024px){.control-panel{width:250px}.header h1{font-size:1.5rem}}@media (max-width: 768px){.main-content{flex-direction:column}.control-panel{width:100%;max-height:300px;border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}.visualization-area{height:400px}.footer{display:none}}.fade-in{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.pulse{animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #64b3f4b3}70%{box-shadow:0 0 0 10px #64b3f400}to{box-shadow:0 0 #64b3f400}}