*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#1a1a2e;color:#e0e0e0;overflow:hidden}#app{display:grid;grid-template-areas:"header header header" "main main stats" "main main stats" "log log log";grid-template-columns:1fr 1fr 300px;grid-template-rows:60px 1fr 1fr 150px;height:100vh;gap:10px;padding:10px}.control-panel{grid-area:header;background:#16213e;border-radius:8px;padding:10px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px rgba(0,0,0,.3)}.control-panel h1{font-size:24px;background:linear-gradient(135deg,#4285f4,#34a853);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0}.control-panel .mode-selector{display:flex;gap:10px}.control-panel .mode-selector .mode-btn{padding:8px 20px;background:transparent;border:2px solid #2c3e50;color:#e0e0e0;border-radius:5px;cursor:pointer;transition:all .3s ease;font-size:14px;font-weight:500}.control-panel .mode-selector .mode-btn:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}.control-panel .mode-selector .mode-btn.active{background:#4285f4;border-color:#4285f4;color:#fff}.visualization-container{grid-area:main;background:#16213e;border-radius:8px;position:relative;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.3)}.visualization-container #three-canvas{width:100%;height:100%;position:relative}.visualization-container #three-canvas canvas{width:100%!important;height:100%!important}.visualization-container .controls-panel{position:absolute;top:20px;left:20px;background:rgba(22,33,62,.95);border-radius:8px;padding:20px;width:300px;max-height:calc(100% - 40px);overflow-y:auto;backdrop-filter:blur(10px);box-shadow:0 4px 20px rgba(0,0,0,.5)}.visualization-container .controls-panel h2{color:#4285f4;margin-bottom:15px;font-size:18px;border-bottom:2px solid #2c3e50;padding-bottom:10px}.visualization-container .controls-panel .control-group{margin-bottom:15px}.visualization-container .controls-panel .control-group label{display:block;margin-bottom:5px;font-size:13px;color:#b0b0b0;font-weight:500}.visualization-container .controls-panel .control-group input[type=range]{width:100%;margin:5px 0;-webkit-appearance:none;appearance:none;height:6px;background:#2c3e50;border-radius:3px;outline:none}.visualization-container .controls-panel .control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:#4285f4;border-radius:50%;cursor:pointer;transition:all .2s}.visualization-container .controls-panel .control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 10px #4285f4}.visualization-container .controls-panel .control-group input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#4285f4;border-radius:50%;cursor:pointer}.visualization-container .controls-panel .control-group textarea{width:100%;background:rgba(0,0,0,.3);border:1px solid #2c3e50;color:#e0e0e0;padding:8px;border-radius:4px;font-family:Courier New,monospace;font-size:12px;resize:vertical}.visualization-container .controls-panel .control-group textarea:focus{outline:none;border-color:#4285f4}.visualization-container .controls-panel .control-group button{width:100%;padding:8px;background:#4285f4;color:#fff;border:none;border-radius:4px;cursor:pointer;margin-top:5px;transition:all .3s}.visualization-container .controls-panel .control-group button:hover{background:#1266f1;transform:translateY(-2px);box-shadow:0 4px 10px rgba(66,133,244,.4)}.visualization-container .controls-panel .control-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.visualization-container .controls-panel .control-buttons button{padding:10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:5px;cursor:pointer;font-weight:500;transition:all .3s}.visualization-container .controls-panel .control-buttons button:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(102,126,234,.4)}.visualization-container .controls-panel .control-buttons button:active{transform:translateY(0)}.visualization-container .controls-panel .formula-display{background:rgba(0,0,0,.3);padding:15px;border-radius:5px;margin-bottom:20px;text-align:center}.visualization-container .controls-panel .formula-display p{margin:0;font-size:16px;color:#34a853;font-weight:500}.visualization-container .controls-panel .result-display{background:linear-gradient(135deg,rgba(66,133,244,.1),rgba(52,168,83,.1));padding:15px;border-radius:5px;margin-top:20px;border:1px solid #2c3e50}.visualization-container .controls-panel .result-display h3{color:#34a853;margin-bottom:10px;font-size:16px}.visualization-container .controls-panel .result-display p{margin:5px 0;font-size:14px}.visualization-container .controls-panel .result-display p span{color:#fbbc04;font-weight:700;font-size:16px}.stats-panel{grid-area:stats;background:#16213e;border-radius:8px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.3)}.stats-panel h2{color:#34a853;margin-bottom:20px;font-size:18px;border-bottom:2px solid #2c3e50;padding-bottom:10px}.stats-panel .stat-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}.stats-panel .stat-item label{color:#b0b0b0;font-size:14px}.stats-panel .stat-item span{color:#fbbc04;font-weight:700;font-size:16px;font-family:Courier New,monospace}.stats-panel .stat-item:last-child{border-bottom:none}.log-panel{grid-area:log;background:#16213e;border-radius:8px;padding:15px;box-shadow:0 2px 10px rgba(0,0,0,.3)}.log-panel h3{color:#4285f4;margin-bottom:10px;font-size:16px}.log-panel #event-log{height:calc(100% - 30px);overflow-y:auto;font-family:Courier New,monospace;font-size:12px}.log-panel #event-log .log-entry{padding:5px;margin-bottom:3px;border-radius:3px;display:flex;align-items:center}.log-panel #event-log .log-entry .log-time{color:#666;margin-right:10px;min-width:80px}.log-panel #event-log .log-entry .log-message{flex:1}.log-panel #event-log .log-entry.log-info{background:rgba(66,133,244,.1);border-left:3px solid #4285f4}.log-panel #event-log .log-entry.log-warning{background:rgba(251,188,4,.1);border-left:3px solid #fbbc04}.log-panel #event-log .log-entry.log-error{background:rgba(234,67,53,.1);border-left:3px solid #ea4335}.log-panel #event-log::-webkit-scrollbar{width:8px}.log-panel #event-log::-webkit-scrollbar-track{background:rgba(0,0,0,.2);border-radius:4px}.log-panel #event-log::-webkit-scrollbar-thumb{background:#2c3e50;border-radius:4px}.log-panel #event-log::-webkit-scrollbar-thumb:hover{background:#3e5871}@media (max-width: 1200px){#app{grid-template-areas:"header header" "main main" "stats stats" "log log";grid-template-columns:1fr 1fr;grid-template-rows:60px 1fr auto 150px}.stats-panel{display:flex;flex-wrap:wrap;gap:20px}.stats-panel .stat-item{flex:1;min-width:150px}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes glow{0%{box-shadow:0 0 5px rgba(66,133,244,.5)}50%{box-shadow:0 0 20px rgba(66,133,244,.8)}to{box-shadow:0 0 5px rgba(66,133,244,.5)}}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading:after{content:"";display:block;width:50px;height:50px;border:3px solid #4285f4;border-radius:50%;border-top-color:transparent;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}