.canvas-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;height:100%;overflow:auto;position:relative;background:var(--background)}.canvas-container canvas{max-width:100%;max-height:100%;image-rendering:-moz-crisp-edges;image-rendering:-webkit-crisp-edges;image-rendering:pixelated;image-rendering:crisp-edges;background:var(--background);transform:translateZ(0);backface-visibility:hidden;will-change:transform}.canvas-container .generation-counter{position:absolute;top:1rem;right:1rem;background:var(--surface);color:var(--text);padding:.5rem 1rem;font-weight:500;border:1px solid var(--surface-variant);background:var(--background);padding:.5rem;border-radius:4px;font-size:.875rem;opacity:.8}.controls-panel{padding:0;background:var(--surface);display:flex;flex-direction:column;width:300px;min-width:300px;height:100%;overflow-y:scroll}.controls-panel::-webkit-scrollbar{width:8px;height:8px}.controls-panel::-webkit-scrollbar-track{background:var(--surface)}.controls-panel::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}.controls-panel .app-title{display:block;margin:0;padding:1rem;font-size:1.5rem;font-weight:600;color:var(--primary);background:var(--surface);border-bottom:1px solid var(--border);word-wrap:break-word}.controls-panel .control-section{margin-bottom:24px;padding:0 1rem}.controls-panel .control-section:last-child{margin-bottom:0}.controls-panel .control-section h2{font-size:1.125rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between}.controls-panel .control-section h2 .rule-label{font-size:.875rem;font-weight:500;color:var(--primary)}.controls-panel .label-container{display:flex;gap:12px;margin-top:12px}.controls-panel .label-container .value-label{background-color:var(--primary);color:#fff;padding:6px 12px;border-radius:var(--border-radius);font-weight:500}.controls-panel .settings-grid{display:flex;flex-direction:column;gap:1rem;padding:0 1rem}.controls-panel .settings-grid .setting-item{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center}.controls-panel .settings-grid .setting-item label{font-size:.875rem;color:var(--text-secondary)}.controls-panel .settings-grid .setting-item span{font-size:.875rem;color:var(--text-secondary);min-width:4rem}.controls-panel .settings-grid .setting-item input[type=range]{width:100%;height:6px;background-color:var(--border);border-radius:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.controls-panel .settings-grid .setting-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:var(--primary);cursor:pointer;transition:all .2s ease}.controls-panel .settings-grid .setting-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.controls-panel .rules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(45px,1fr));gap:12px;margin-bottom:16px}.controls-panel .rule-toggle{display:flex;flex-direction:column;align-items:center;gap:8px}.controls-panel .rule-toggle .pattern{display:flex;justify-content:center;margin-bottom:4px}.controls-panel .rule-toggle .pattern .pattern-cell{width:8px;height:8px;border-radius:2px;margin:0 1px}.controls-panel .rule-toggle .pattern .pattern-cell.filled{background-color:var(--primary)}.controls-panel .rule-toggle .pattern .pattern-cell.empty{background-color:var(--border)}.controls-panel .rule-toggle input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:36px;height:20px;background-color:var(--border);border-radius:10px;position:relative;cursor:pointer;transition:all .3s ease}.controls-panel .rule-toggle input[type=checkbox]:before{content:"";position:absolute;width:16px;height:16px;border-radius:50%;top:2px;left:2px;background-color:var(--background);transition:all .3s ease}.controls-panel .rule-toggle input[type=checkbox]:checked{background-color:var(--primary)}.controls-panel .rule-toggle input[type=checkbox]:checked:before{transform:translate(16px)}.controls-panel .button-group{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1rem}.controls-panel .button-group button{flex:1;min-width:max-content;padding:.5rem 1rem;border:1px solid var(--surface-variant);border-radius:4px;background:var(--surface);color:var(--text);font-size:.875rem;cursor:pointer;transition:all .2s ease}.controls-panel .button-group button:hover{background:var(--surface-variant)}.controls-panel .button-group button.active{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}.controls-panel .button-group button.primary{background-color:var(--primary);color:#fff;border:none}.controls-panel .button-group button.primary:hover{background-color:var(--primary-dark)}.controls-panel .button-group button.control-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-width:100px}.controls-panel .button-group button.control-btn svg{width:18px;height:18px}.controls-panel .button-group.rule-presets{margin-top:1rem}.controls-panel .rule-presets{margin-top:16px}.controls-panel .renderer-info{margin-top:auto;padding-top:20px;border-top:1px solid var(--border);font-size:12px;color:var(--text-secondary)}:root{--primary: #6366f1;--primary-light: #818cf8;--primary-dark: #4f46e5;--on-primary: #ffffff;--surface: #fafafa;--surface-variant: #e5e7eb;--surface-variant-hover: #d1d5db;--background: #ffffff;--text: #1f2937;--text-secondary: #4b5563;--border: #e5e7eb;--border-radius: 12px;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)}@media (prefers-color-scheme: dark){:root{--primary: #6366f1;--primary-light: #818cf8;--primary-dark: #4f46e5;--on-primary: #ffffff;--surface: #1e1e1e;--surface-variant: #2d2d2d;--surface-variant-hover: #3d3d3d;--background: #121212;--text: #f3f4f6;--text-secondary: #9ca3af;--border: #374151}}*{box-sizing:border-box}html,body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--background);color:var(--text);height:100%;margin:0;padding:0;overflow:hidden}#root{height:100%}.container{width:100%;display:flex;flex-direction:column}#root{margin:0 auto;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.app{display:flex;flex-direction:row;height:100vh;width:100vw;background:var(--background);color:var(--text);overflow:hidden}