*{box-sizing:border-box;margin:0;padding:0}body{color:#c8c8d8;background:#0d0d1a;height:100vh;font-family:system-ui,sans-serif;overflow:hidden}#app{flex-direction:column;height:100vh;display:flex}header{background:#12122a;border-bottom:1px solid #2a2a4a;align-items:baseline;gap:16px;padding:12px 20px;display:flex}header h1{color:#e0e0f0;font-size:20px;font-weight:600}.subtitle{color:#7070a0;font-size:13px}#main-container{flex:1;display:flex;overflow:hidden}#viewport-container{flex:1;min-width:0;position:relative}#viewport-container canvas{display:block}#loading-overlay{z-index:10;background:#0a0a1af2;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}.spinner{border:3px solid #2a2a4a;border-top-color:#6080d0;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#side-panel{background:#12122a;border-left:1px solid #2a2a4a;width:320px;padding:8px;overflow-y:auto}.panel-section{background:#161630;border:1px solid #1e1e3a;border-radius:6px;margin-bottom:12px;padding:10px}.panel-section h3{color:#8090c0;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:13px;font-weight:600}.panel-section h4{color:#9090b0;margin:6px 0 4px;font-size:12px}#preset-buttons{flex-wrap:wrap;gap:4px;display:flex}.preset-btn{color:#a0a0c0;cursor:pointer;background:#1a1a3a;border:1px solid #3a3a5a;border-radius:4px;padding:5px 10px;font-size:12px;transition:all .2s}.preset-btn:hover{color:#d0d0f0;background:#2a2a5a}.preset-btn.active{color:#fff;background:#304080;border-color:#5070d0}#custom-input{gap:4px;display:flex}#reaction-input{color:#d0d0e0;background:#1a1a3a;border:1px solid #3a3a5a;border-radius:4px;flex:1;padding:6px 8px;font-family:monospace;font-size:12px}#btn-analyze{color:#fff;cursor:pointer;white-space:nowrap;background:#3050a0;border:none;border-radius:4px;padding:6px 12px;font-size:12px}#btn-analyze:hover{background:#4060c0}#animation-controls{justify-content:center;gap:4px;margin-bottom:8px;display:flex}#animation-controls button{color:#a0a0c0;cursor:pointer;background:#1a1a3a;border:1px solid #3a3a5a;border-radius:4px;width:34px;height:30px;font-size:14px}#animation-controls button:hover:not(:disabled){background:#2a2a5a}#animation-controls button:disabled{opacity:.4;cursor:default}#progress-container{background:#1a1a3a;border-radius:2px;height:4px;overflow:hidden}#progress-bar{background:linear-gradient(90deg,#4060d0,#6090f0);border-radius:2px;width:0%;height:100%;transition:width .1s linear}#mechanism-info p{margin-bottom:4px;font-size:12px;line-height:1.5}#mech-desc{color:#9090b0;font-size:11px}.panel-section ul{color:#9090b0;font-size:11px;list-style:none}.panel-section li{border-bottom:1px solid #1a1a3a;padding:3px 0}#mech-type{color:#6090e0;font-weight:600}