*{box-sizing:border-box}body{margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f0f0f0;overflow:hidden}#canvas{display:block;cursor:default;background-color:#fff}.controls-panel{position:fixed;top:10px;left:10px;width:240px;background:#fffffff2;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 8px #0000001a;z-index:100;backdrop-filter:blur(10px)}.controls-header{background:#2196f3;color:#fff;padding:6px 10px;border-radius:4px 4px 0 0;margin:0}.controls-header h3{margin:0;font-size:13px;font-weight:600}.controls-content{padding:10px}.control-group{margin-bottom:10px}.control-group label{display:block;margin-bottom:3px;font-weight:500;color:#333;font-size:12px}.control-group input[type=range]{width:100%;margin-bottom:4px}.control-group button{background:#2196f3;color:#fff;border:none;padding:4px 8px;border-radius:3px;cursor:pointer;margin-right:4px;margin-bottom:4px;font-size:11px;transition:background-color .2s ease}.control-group button:hover{background:#1976d2}.control-group button:active{background:#1565c0}#speed-value{font-weight:700;color:#2196f3;margin-left:4px;font-size:11px}.instructions{margin-top:8px;padding-top:8px;border-top:1px solid #eee}.instructions p{margin:0 0 4px;font-weight:500;color:#333;font-size:11px}.instructions ul{margin:4px 0 0;padding-left:15px;font-size:10px;color:#666}.instructions li{margin-bottom:2px}.rules-panel{position:fixed;top:10px;right:10px;width:380px;max-height:85vh;background:#fffffff2;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 8px #0000001a;z-index:100;backdrop-filter:blur(10px);overflow:hidden;display:flex;flex-direction:column}.rules-panel.hidden{display:none}.rules-header{background:#4caf50;color:#fff;padding:6px 10px;display:flex;justify-content:space-between;align-items:center}.rules-header h3{margin:0;font-size:13px;font-weight:600}.rules-header button{background:none;border:none;color:#fff;font-size:16px;font-weight:700;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:background-color .2s ease}.rules-header button:hover{background:#fff3}.rules-content{padding:10px;flex:1;overflow-y:auto}.rules-content p{margin:0 0 6px;color:#333;font-size:11px}#rules-textarea{width:100%;font-family:Courier New,monospace;font-size:10px;padding:6px;border:1px solid #ddd;border-radius:3px;resize:vertical;background:#f9f9f9;color:#333;line-height:1.3;min-height:120px}#rules-textarea:focus{outline:none;border-color:#4caf50;background:#fff}.rules-actions{margin:8px 0;display:flex;gap:4px}.rules-actions button{background:#4caf50;color:#fff;border:none;padding:4px 8px;border-radius:3px;cursor:pointer;font-size:11px;transition:background-color .2s ease}.rules-actions button:hover{background:#45a049}.rules-actions button:nth-child(2){background:#ff9800}.rules-actions button:nth-child(2):hover{background:#f57c00}.rules-help{margin-top:16px;padding-top:16px;border-top:1px solid #eee}.rules-help p{margin:0 0 8px;font-weight:500;color:#333}.rules-help pre{background:#f5f5f5;border:1px solid #ddd;border-radius:4px;padding:12px;font-family:Courier New,monospace;font-size:11px;line-height:1.4;color:#333;margin:0;overflow-x:auto}.rules-help ul{margin:8px 0 0;padding-left:20px;font-size:12px;color:#666}.rules-help li{margin-bottom:4px}.preset-section{margin:8px 0;padding:8px 0;border-top:1px solid #eee;border-bottom:1px solid #eee}.preset-section p{margin:0 0 6px;font-weight:500;color:#333;font-size:11px}.preset-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:4px}.preset-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:6px 8px;border-radius:3px;cursor:pointer;font-size:10px;font-weight:500;transition:all .2s ease;text-align:left;box-shadow:0 1px 2px #0000001a}.preset-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #00000026;background:linear-gradient(135deg,#5a6fd8,#6a4190)}.preset-btn:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}.preset-btn[data-preset=langton],.preset-btn[data-preset=rainbow]{background:linear-gradient(135deg,#667eea,#764ba2)}.preset-btn[data-preset=colorMix],.preset-btn[data-preset=wallFollower]{background:linear-gradient(135deg,#f093fb,#f5576c)}.preset-btn[data-preset=spiral],.preset-btn[data-preset=heatSeeker]{background:linear-gradient(135deg,#4facfe,#00f2fe)}.preset-btn[data-preset=gradient],.preset-btn[data-preset=mathWave]{background:linear-gradient(135deg,#43e97b,#38f9d7)}.preset-btn[data-preset=averager],.preset-btn[data-preset=amplifier]{background:linear-gradient(135deg,#fa709a,#fee140)}.preset-btn[data-preset=colorMix]:hover,.preset-btn[data-preset=wallFollower]:hover{background:linear-gradient(135deg,#e081f9,#f3455a)}.preset-btn[data-preset=spiral]:hover,.preset-btn[data-preset=heatSeeker]:hover{background:linear-gradient(135deg,#3d9afc,#00e0fc)}.preset-btn[data-preset=gradient]:hover,.preset-btn[data-preset=mathWave]:hover{background:linear-gradient(135deg,#31d769,#26e7c5)}.preset-btn[data-preset=averager]:hover,.preset-btn[data-preset=amplifier]:hover{background:linear-gradient(135deg,#f85f88,#fccf2e)}@media (max-width: 768px){.controls-panel{width:calc(100vw - 40px);top:10px;left:20px}.rules-panel{width:calc(100vw - 40px);top:10px;right:20px;max-height:70vh}}@media (max-width: 480px){.controls-panel,.rules-panel{width:calc(100vw - 20px);left:10px;right:10px}.rules-panel{right:10px}.preset-buttons{grid-template-columns:1fr}.preset-btn{font-size:12px;padding:8px 10px}}.controls-panel,.rules-panel{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.modal.hidden{display:none}.modal-content{background:#fff;border:1px solid #ddd;border-radius:4px;width:95%;max-width:900px;max-height:95vh;overflow-y:auto;box-shadow:0 4px 16px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:1px solid #eee;background:#f8f9fa}.modal-header h3{margin:0;color:#333;font-size:13px}.modal-header button{background:none;border:none;font-size:16px;color:#666;cursor:pointer;padding:2px;border-radius:3px}.modal-header button:hover{background:#eee;color:#333}.modal-body{padding:8px}.modal-footer{display:flex;justify-content:flex-end;gap:4px;padding:6px 8px;border-top:1px solid #eee;background:#f8f9fa}.modal-footer button{padding:4px 8px;border:1px solid #ddd;border-radius:3px;background:#fff;color:#333;cursor:pointer;transition:all .2s ease;font-size:11px}.modal-footer button:hover{background:#4caf50;color:#fff;border-color:#4caf50}.builder-section h4{margin:0 0 6px;color:#333;font-size:12px}.builder-rule{background:#fff;border:1px solid #ddd;border-radius:3px;margin-bottom:6px;overflow:hidden;box-shadow:0 1px 2px #0000001a}.rule-header{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;background:#f8f9fa;border-bottom:1px solid #eee}.rule-header h5{margin:0;color:#333;font-size:11px}.delete-rule{background:none;border:none;color:#666;cursor:pointer;padding:2px;border-radius:3px;font-size:12px}.delete-rule:hover{background:#dc3545;color:#fff}.rule-content{padding:6px}.condition-section,.action-section{margin-bottom:8px}.condition-section h6,.action-section h6{margin:0 0 4px;color:#333;font-size:10px;font-weight:600}.condition-type,.condition-target,.condition-property,.condition-operator,.action-turn,.surrounding-direction{padding:3px 4px;background:#fff;border:1px solid #ddd;border-radius:3px;color:#333;margin-right:3px;margin-bottom:3px;font-size:10px}.condition-value,.condition-tolerance,.cell-r,.cell-g,.cell-b,.ant-r,.ant-g,.ant-b{padding:3px 4px;background:#fff;border:1px solid #ddd;border-radius:3px;color:#333;width:80px;margin-right:3px;margin-bottom:3px;font-size:10px}.simple-condition{display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:4px;background:#f8f9fa;border-radius:3px;border:1px solid #eee}.condition-group{background:#f8f9fa;border-radius:3px;padding:4px;border:1px solid #eee}.group-condition-item{background:#fff;border:1px solid #ddd;border-radius:3px;padding:4px;margin-bottom:3px;display:flex;flex-wrap:wrap;align-items:center;gap:3px}.add-condition-btn,.remove-condition-btn{padding:3px 6px;background:#4caf50;border:none;border-radius:3px;color:#fff;cursor:pointer;font-size:10px;transition:all .2s ease}.add-condition-btn:hover{background:#45a049}.remove-condition-btn{background:#dc3545;margin-left:auto}.remove-condition-btn:hover{background:#c82333}.action-builder{display:flex;flex-direction:column;gap:6px}.action-group{background:#f8f9fa;border-radius:3px;padding:4px;border:1px solid #eee}.action-group label{display:flex;align-items:center;color:#333;margin-bottom:3px;font-weight:500;font-size:10px}.action-group input[type=checkbox]{margin-right:3px;transform:scale(.8)}.setCellState-inputs,.setAntState-inputs,.spawn-inputs{display:flex;gap:3px;flex-wrap:wrap;margin-top:3px}.spawn-inputs{flex-direction:column;align-items:flex-start}.spawn-inputs label{margin-bottom:2px;margin-top:4px;font-size:9px}.spawn-direction,.spawn-r,.spawn-g,.spawn-b{padding:3px 4px;background:#fff;border:1px solid #ddd;border-radius:3px;color:#333;margin-right:3px;margin-bottom:3px;font-size:10px}.spawn-direction{width:120px}.spawn-r,.spawn-g,.spawn-b{width:80px}.add-btn{padding:4px 8px;background:#4caf50;border:none;border-radius:3px;color:#fff;cursor:pointer;font-weight:500;transition:all .2s ease;margin-top:6px;font-size:10px}.add-btn:hover{background:#45a049}.hidden{display:none!important}