body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8f9fa;color:#333}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{max-width:1200px;margin:0 auto;padding:20px;transition:all .3s ease}.simulation-container{display:flex;flex-direction:column;gap:20px}.canvas-container{width:100%;height:500px;border-radius:12px;overflow:hidden;box-shadow:0 8px 30px #0000001f;transition:all .3s ease;position:relative}.canvas-container:hover{transform:translateY(-5px);box-shadow:0 12px 40px #00000026}.canvas-container.transitioning{opacity:.7;transform:scale(.98)}.controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;padding:15px;background-color:#fff;border-radius:12px;box-shadow:0 4px 15px #0000000d}.button-group{display:flex;flex-wrap:wrap;gap:10px;flex-grow:1;justify-content:flex-end}.animation-controls{display:flex;align-items:center;gap:20px;padding:15px;background-color:#fff;border-radius:12px;box-shadow:0 4px 15px #0000000d;margin-bottom:20px}.play-button{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:12px 24px;border-radius:8px;font-weight:600;font-size:16px;border:none;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 10px #6366f14d;min-width:120px}.play-button:hover{transform:translateY(-2px);box-shadow:0 6px 15px #6366f166}.play-button.playing{background:linear-gradient(135deg,#ef4444,#f97316);box-shadow:0 4px 10px #ef44444d}.play-button.playing:hover{box-shadow:0 6px 15px #ef444466}.speed-control{display:flex;align-items:center;gap:10px;flex-grow:1}.speed-control label{font-weight:500;color:#4b5563;min-width:40px}.speed-control input[type=range]{flex-grow:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#e2e8f0;border-radius:3px;outline:none;max-width:300px}.speed-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#6366f1;cursor:pointer;transition:all .2s ease}.speed-control input[type=range]::-webkit-slider-thumb:hover{background:#4f46e5;transform:scale(1.1)}.speed-control input[type=range]:disabled::-webkit-slider-thumb{background:#cbd5e1}.speed-control span{font-weight:500;color:#6366f1;min-width:50px;text-align:center}button{padding:10px 18px;background-color:#4a90e2;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;box-shadow:0 2px 5px #0000001a}button:hover{background-color:#357ab8;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}button:active{transform:translateY(0);box-shadow:0 2px 3px #0000001a}button:disabled{background-color:#cbd5e1;color:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}button.active{background-color:#2c5282;box-shadow:inset 0 2px 4px #0003;transform:translateY(1px)}button[data-state=initial]{background-color:#4299e1}button[data-state=initial].active{background-color:#2b6cb0}button[data-state=binding]{background-color:#38b2ac}button[data-state=binding].active{background-color:#2c7a7b}button[data-state=catalysis]{background-color:#ed8936}button[data-state=catalysis].active{background-color:#c05621}button[data-state=release]{background-color:#9f7aea}button[data-state=release].active{background-color:#6b46c1}select{padding:10px 15px;border-radius:8px;border:1px solid #e2e8f0;background-color:#fff;font-size:14px;box-shadow:0 2px 5px #0000000d;transition:all .2s ease;min-width:200px}select:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e233}.info-panel{background-color:#fff;padding:25px;border-radius:12px;box-shadow:0 8px 30px #00000014;transition:all .3s ease;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{box-shadow:0 0 #6366f166}70%{box-shadow:0 0 0 10px #6366f100}to{box-shadow:0 0 #6366f100}}.playing{animation:pulse 2s infinite}h1,h2,h3{color:#2d3748;margin-top:0}h1{font-size:2.2rem;margin-bottom:.5rem;background:linear-gradient(90deg,#4a90e2,#805ad5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center}h2{font-size:1.5rem;border-bottom:2px solid #f0f4f8;padding-bottom:10px;margin-bottom:20px}h3{font-size:1.2rem;margin-top:25px;margin-bottom:10px}.reaction-info{margin-top:20px;line-height:1.7}.reaction-info p{margin-bottom:15px}.reaction-info ul{padding-left:20px}.reaction-info li{margin-bottom:8px;position:relative}.chemical-structure-container{margin-top:15px;margin-bottom:25px;background-color:#fff;border-radius:12px;padding:20px;box-shadow:0 4px 15px #0000000d;transition:all .3s ease}.structure-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.structure-header h3{margin:0;color:#2d3748}.toggle-button{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:8px 16px;border-radius:6px;font-size:14px;border:none;cursor:pointer;transition:all .2s ease}.toggle-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #6366f14d}.structure-content{animation:fadeIn .5s ease-out}.structure-image{margin-bottom:20px;text-align:center;background-color:#f8f9fa;padding:20px;border-radius:8px;overflow:hidden}.structure-image img{max-width:100%;height:auto;border-radius:4px}.structure-placeholder{min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;background-color:#f1f5f9;border-radius:8px;border:1px dashed #cbd5e1}.placeholder-text{font-size:18px;margin-bottom:15px;text-align:center}.placeholder-text code{background-color:#e2e8f0;padding:5px 10px;border-radius:4px;font-family:Courier New,monospace}.placeholder-note{font-size:14px;color:#64748b;font-style:italic}.structure-description{line-height:1.7;color:#4b5563;background-color:#f8f9fa;padding:15px;border-radius:8px;border-left:4px solid #6366f1}@media (max-width: 768px){.container{padding:15px}.canvas-container{height:400px}h1{font-size:1.8rem}.controls,.animation-controls{flex-direction:column}select{width:100%}.button-group{justify-content:center;margin-top:10px}.speed-control{width:100%;margin-top:10px}}