.grid-replace-container{display:flex}.main-grid-container{flex:1;display:flex;flex-direction:column;align-items:center}.main-grid-size-inputs{display:flex;gap:.5rem;margin-bottom:.5rem}.main-grid-size-inputs input{width:3rem;background-color:#fff;border:1px solid #ccc;border-radius:4px}.main-grid-wrapper{position:relative;width:fit-content;height:fit-content;margin:0 auto;--max-width:45vw;--max-height:65vh;--cell-size:min(calc(var(--max-width) / var(--cols)),calc(var(--max-height) / var(--rows)));--cell-font-size:calc(var(--cell-size) * 0.5)}.main-grid-editor{display:flex;flex-direction:column;width:fit-content;border-top:1px solid #999;border-left:1px solid #999}.main-grid-row{display:flex}.main-grid-cell{width:var(--cell-size);height:var(--cell-size);text-align:center;border-right:1px solid #999;border-bottom:1px solid #999;outline:none;justify-content:center;align-items:center;font-size:var(--cell-font-size)}.highlight-area{position:absolute;pointer-events:none;box-sizing:border-box;top:calc(var(--match-row) * var(--cell-size));left:calc(var(--match-col) * var(--cell-size));width:calc(var(--rule-cols) * var(--cell-size));height:calc(var(--rule-rows) * var(--cell-size))}.highlight-area.highlight-current{border:3px solid var(--current-highlight-color,#eb0);z-index:1}.highlight-area.highlight-next{border:3px dashed var(--next-highlight-color,#0af);z-index:2}.rules-container{flex:1;max-height:65vh;overflow-y:auto;display:flex;flex-direction:column;gap:.3rem;border:1px solid #ccc;padding:.5rem;border-radius:4px;background-color:#fbfbfb}.rule-card{border:2px solid #ccc;border-radius:4px;padding:.2rem .5rem;background-color:#fff;box-sizing:border-box}.rule-card.highlight-current{border:2px solid var(--current-highlight-color,#eb0)}.rule-card.highlight-both,.rule-card.highlight-next{outline:2px dashed var(--next-highlight-color,#0af);outline-offset:-5px}.rule-card.highlight-both{border:2px solid var(--current-highlight-color,#eb0)}.rule-card-index{font-weight:700;font-size:1.2rem}.rule-card-body{display:flex;justify-content:space-between;gap:.3rem}.rule-card-left-container{display:flex;flex-direction:column;margin-bottom:.3rem}.rule-card-size-inputs{gap:.3rem;margin-bottom:.3rem}.rule-card-size-input{box-sizing:border-box;min-width:0;width:1rem;border:1px solid #ccc;border-radius:4px}.rule-card-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.rule-card-size-inputs{display:flex;gap:.5rem}.rule-card-size-inputs input{width:3rem}.rule-card-buttons{display:flex;flex-direction:column;gap:.3rem;margin-left:auto}.rule-card-buttons button{padding:.2rem .4rem;font-size:.8rem;border:1px solid #ccc;background:#f9f9f9;border-radius:4px;cursor:pointer;white-space:nowrap}.rule-card-buttons .delete-button{background-color:#f8d7da;border-color:#f5c6cb;color:#721c24}.rule-card-buttons button:hover{background-color:#e0e0e0}.rule-card-buttons .delete-button:hover{background-color:#f5c6cb}.rule-card-buttons button:disabled{background-color:#ccc;cursor:not-allowed}.rule-card-buttons .delete-button:disabled{background-color:#d0b6b8;cursor:not-allowed}.rule-card-grids{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.rule-card-arrow:before{content:"→";font-size:1.5rem}.rule-grid-editor{display:flex;flex-direction:column;width:fit-content;border-top:1px solid #999;border-left:1px solid #999}.rule-grid-row{display:flex}.rule-grid-cell{width:2rem;height:2rem;text-align:center;border-right:1px solid #999;border-bottom:1px solid #999;outline:none;justify-content:center;align-items:center;font-size:1rem}.add-rule-button{padding:.2rem .4rem;cursor:pointer;align-self:center;background-color:#f0f0f0;border:1px solid #ccc;border-radius:4px}.add-rule-button:hover{background-color:#e0e0e0}.add-rule-button:disabled{background-color:#ccc;cursor:not-allowed}.control-panel{width:90vw;display:flex;flex-direction:column;gap:1rem;margin:1rem auto;border-radius:8px;border:1px solid #ccc;background-color:#fff;padding:1rem}.control-panel details,.rule-card details{border:1px solid #ddd;border-radius:4px;padding:.2rem .3rem;background-color:#fafafa;margin-bottom:auto}.control-panel summary,.rule-card summary{font-weight:700;cursor:pointer;user-select:none}.edit-controls,.view-controls{display:flex;flex-direction:column;justify-content:center;gap:.5rem}.dual-input-fieldset{border:1px solid #ccc;padding:.5rem}.dual-input-fieldset legend{font-weight:700}.dual-inputs{display:flex;align-items:center;gap:.5rem}.dual-input-range{flex:1;cursor:pointer}.dual-input-number{width:5rem;padding:3px 6px;border:1px solid #ccc;border-radius:4px}.playback-buttons{display:flex;justify-content:center;align-items:center;gap:.5rem}.playback-buttons button{padding:.5rem 1rem;font-size:1rem;border:1px solid #ccc;background:#f9f9f9;border-radius:4px;cursor:pointer}.playback-buttons button:hover{background-color:#e0e0e0}.playback-buttons button:disabled{background-color:#ccc;cursor:not-allowed}.edit-initial-button,.start-simulation-button{padding:.5rem 1rem;font-size:1rem;border:1px solid #ccc;background:#eef;border-radius:4px;margin:auto;cursor:pointer;text-align:center;font-weight:700}.edit-initial-button:hover,.start-simulation-button:hover{background-color:#dde}.highlight-controls-container{align-items:center;display:flex;flex-direction:column;justify-content:center}.toggle-highlight{display:flex;align-items:center;gap:.5rem;margin-left:.5rem}.toggle-highlight input[type=checkbox]{margin-right:.3rem}.highlight-color-controls{display:flex;gap:1rem;align-items:center;margin-left:.5rem}.highlight-color-controls label{display:flex;align-items:center;gap:.3rem}.highlight-color-controls input[type=color]{width:26px;height:26px;padding:0;border:1px solid #ccc;border-radius:4px;cursor:pointer;background:none}.output-gif-controls-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.gif-cell-size-input{margin-left:.5rem}.gif-cell-size-input input{width:4rem;background-color:#fff;border:1px solid #ccc;border-radius:4px}.export-gif-button button{padding:.5rem 1rem;font-size:1rem;border:1px solid #ccc;background:#efe;border-radius:4px;cursor:pointer;text-align:center;font-weight:700;margin:.5rem auto;display:block}.export-gif-button button:hover{background-color:#dfd}.color-rules-container{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:.5rem}.color-rule{gap:.8rem;background-color:#fff;padding:.3rem .6rem;border:1px solid #ccc;border-radius:4px;font-size:.9rem}.color-rule,.color-rule label{display:flex;align-items:center}.color-rule label{gap:.3rem}.color-rule input[type=text]{width:2rem;text-align:center;padding:2px;border:1px solid #ccc;border-radius:4px;font-weight:700;background-color:#fff}.color-rule input[type=color]{width:26px;height:26px;padding:0;border:1px solid #ccc;border-radius:4px;cursor:pointer;background:none}.color-rule-buttons{display:flex;gap:.5rem;margin-top:.3rem}.color-rule-add button,.color-rule-remove button{padding:.3rem .8rem;font-size:.85rem;border:1px solid #ccc;background-color:#f9f9f9;border-radius:4px;cursor:pointer}.color-rule-add button:hover,.color-rule-remove button:hover:not(:disabled){background-color:#e0e0e0}.color-rule-remove button:disabled{background-color:#ccc;cursor:not-allowed}.io-controls{display:flex;justify-content:center;gap:.5rem}.io-controls button{padding:.4rem .8rem;font-size:.85rem;border:1px solid #ccc;background-color:#f9f9f9;border-radius:4px;cursor:pointer}.io-controls button:hover{background-color:#e0e0e0}.danger-buttons{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:.5rem}.clear-button,.reset-button{text-align:center}.clear-button button,.reset-button button{padding:.4rem .8rem;font-size:.85rem;border-radius:4px;cursor:pointer}.reset-button button{border:1px solid #ffeeba;background-color:#fff3cd;color:#856404}.reset-button button:hover{background-color:#ffe8a1}.clear-button button{border:1px solid #f5c6cb;background-color:#f8d7da;color:#721c24}.clear-button button:hover{background-color:#f1b0b7}@media (max-width:600px){.grid-replace-container{flex-direction:column}.main-grid-wrapper{--max-width:90vw}}