@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap";:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-tertiary:#1a1a25;--bg-card:#0d0d14;--neon-cyan:#00fff2;--neon-magenta:#f0f;--neon-green:#0f8;--neon-orange:#ff6b00;--text-primary:#e0e0e0;--text-secondary:#88a;--text-muted:#556;--glow-cyan:0 0 10px #00fff280, 0 0 20px #00fff24d;--glow-magenta:0 0 10px #ff00ff80, 0 0 20px #ff00ff4d;--glow-green:0 0 10px #00ff8880;--border-color:#2a2a3a;--border-glow:0 0 5px #00fff24d;--font-display:"JetBrains Mono", "Fira Code", "Source Code Pro", monospace;--font-body:"JetBrains Mono", "Fira Code", monospace;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--transition-fast:.15s ease;--transition-medium:.3s ease;--transition-slow:.5s ease}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%}body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;position:relative;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#00000008 2px 4px);width:100%;height:100%;position:fixed;top:0;left:0}#root{min-height:100%;padding:var(--space-lg);justify-content:center;align-items:center;display:flex}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:var(--neon-cyan);color:var(--bg-primary)}.app{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;flex-direction:column;animation:.5s ease-out fadeIn;display:inline-flex;overflow:hidden;box-shadow:0 0 40px #00fff20d,0 20px 60px #00000080}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.header{padding:var(--space-md) var(--space-lg);background:linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-card) 100%);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;display:flex;position:relative}.header:after{content:"";background:linear-gradient(90deg, transparent 0%, var(--neon-cyan) 20%, var(--neon-magenta) 80%, transparent 100%);opacity:.5;width:100%;height:1px;position:absolute;bottom:0;left:0}.header h1{color:var(--text-primary);letter-spacing:1px;text-transform:uppercase;font-size:18px;font-weight:600;position:relative}.header h1:before{content:"▶";margin-right:var(--space-sm);color:var(--neon-cyan);text-shadow:var(--glow-cyan);animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.generation{color:var(--neon-green);font-variant-numeric:tabular-nums;text-shadow:var(--glow-green);padding:var(--space-xs) var(--space-sm);background:#00ff881a;border:1px solid #0f83;border-radius:4px;font-size:14px;font-weight:500}.canvas-container{padding:var(--space-md);background:var(--bg-primary);position:relative}.canvas-container:before{content:"";background:radial-gradient(ellipse at center, transparent 0%, var(--bg-primary) 70%);pointer-events:none;position:absolute;inset:0}.toolbar{gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:linear-gradient(0deg, var(--bg-secondary) 0%, var(--bg-card) 100%);border-top:1px solid var(--border-color);flex-wrap:wrap;justify-content:center;align-items:center;display:flex}.controls{gap:var(--space-sm);align-items:center;display:flex}button{padding:var(--space-sm) var(--space-md);border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);font-family:var(--font-body);cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.5px;border-radius:6px;font-size:12px;font-weight:500;position:relative;overflow:hidden}button:before{content:"";background:linear-gradient(90deg,#0000,#00fff21a,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}button:hover{background:var(--bg-secondary);border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:var(--glow-cyan);transform:translateY(-1px)}button:hover:before{left:100%}button:active{transform:translateY(0)}button:disabled{opacity:.3;cursor:not-allowed;transform:none}button:disabled:hover{background:var(--bg-tertiary);border-color:var(--border-color);color:var(--text-primary);box-shadow:none}button:disabled:before{display:none}.controls button:first-child{border-color:var(--neon-cyan);color:var(--neon-cyan);background:linear-gradient(135deg,#00fff226 0%,#00ff8826 100%)}.controls button:first-child:hover{box-shadow:var(--glow-cyan);background:linear-gradient(135deg,#00fff240 0%,#00ff8840 100%)}.speed-slider{align-items:center;display:flex}.speed-slider label{align-items:center;gap:var(--space-sm);color:var(--text-secondary);font-size:12px;display:flex}.speed-slider .speed-value{color:var(--neon-orange);text-shadow:0 0 8px #ff6b0080;text-align:right;min-width:70px;font-weight:600}input[type=range]{appearance:none;background:var(--bg-tertiary);cursor:pointer;border-radius:2px;outline:none;width:100px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--neon-cyan);cursor:pointer;width:14px;height:14px;box-shadow:var(--glow-cyan);transition:transform var(--transition-fast);border-radius:50%}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-moz-range-thumb{background:var(--neon-cyan);cursor:pointer;width:14px;height:14px;box-shadow:var(--glow-cyan);border:none;border-radius:50%}.pattern-picker{gap:var(--space-xs);flex-wrap:wrap;align-items:center;display:flex}.pattern-picker .label{color:var(--text-muted);margin-right:var(--space-xs);font-size:12px}.pattern-picker button{padding:var(--space-xs) var(--space-sm);border-color:var(--border-color);background:0 0;font-size:11px}.pattern-picker button:hover{border-color:var(--neon-magenta);color:var(--neon-magenta);box-shadow:var(--glow-magenta)}@media (width<=700px){.app{max-width:100%}.header{gap:var(--space-sm);text-align:center;flex-direction:column}.toolbar{gap:var(--space-sm);flex-direction:column}.controls{flex-wrap:wrap;justify-content:center}.pattern-picker{justify-content:center}}