*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color:#6366f1;--primary-dark:#4f46e5;--primary-light:#818cf8;--background:#0f172a;--surface:#1e293b;--surface-light:#334155;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--border:#334155;--success:#10b981;--shadow:rgba(0,0,0,.3)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#0f172a,#1e293b);color:var(--text-primary);min-height:100vh;padding:20px}.container{max-width:1400px;margin:0 auto}header{text-align:center;margin-bottom:40px;padding:20px}header h1{font-size:3rem;font-weight:700;background:linear-gradient(135deg,var(--primary-light) 0,var(--primary-color) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px}.subtitle{color:var(--text-secondary);font-size:1.1rem}.content{display:grid;grid-template-columns:350px 1fr;grid-gap:30px;gap:30px;align-items:start}.controls-panel{background:var(--surface);border-radius:16px;padding:30px;box-shadow:0 10px 30px var(--shadow);border:1px solid var(--border)}.control-group{margin-bottom:30px}.control-group label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.label-text{font-weight:600;font-size:.95rem;color:var(--text-primary)}.value-display{font-size:1.1rem;font-weight:700;color:var(--primary-light);background:var(--surface-light);padding:4px 12px;border-radius:8px}input[type=range]{width:100%;height:6px;background:var(--surface-light);border-radius:10px;outline:none;-webkit-appearance:none;margin-bottom:8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--primary-color);cursor:pointer;border-radius:50%;box-shadow:0 2px 8px rgba(99,102,241,.5);-webkit-transition:all .2s;transition:all .2s}input[type=range]::-webkit-slider-thumb:hover{background:var(--primary-light);transform:scale(1.1)}input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--primary-color);cursor:pointer;border-radius:50%;border:none;box-shadow:0 2px 8px rgba(99,102,241,.5);-moz-transition:all .2s;transition:all .2s}input[type=range]::-moz-range-thumb:hover{background:var(--primary-light);transform:scale(1.1)}.range-labels{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-muted)}.generate-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-dark) 100%);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 15px rgba(99,102,241,.4);margin-bottom:25px}.generate-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,.6)}.generate-btn:active{transform:translateY(0)}.generate-btn.loading{opacity:.7;cursor:not-allowed}.btn-icon{font-size:1.3rem;transition:transform .3s}.generate-btn:hover .btn-icon{transform:translateX(4px)}.info-panel{background:var(--surface-light);border-radius:12px;padding:20px;margin-bottom:25px}.info-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.info-item:last-child{border-bottom:none}.info-label{color:var(--text-secondary);font-size:.9rem}.info-value{color:var(--text-primary);font-weight:600;font-size:1rem}.description{color:var(--text-secondary);line-height:1.6}.description h3{color:var(--text-primary);margin-bottom:12px;font-size:1.1rem}.description p{margin-bottom:12px;font-size:.9rem}.description em{color:var(--primary-light);font-style:italic}.visualization-panel{background:var(--surface);border-radius:16px;padding:30px;box-shadow:0 10px 30px var(--shadow);border:1px solid var(--border);min-height:500px}.image-container{position:relative;width:100%;min-height:500px;display:flex;align-items:center;justify-content:center;background:var(--background);border-radius:12px;overflow:hidden}.placeholder{text-align:center;color:var(--text-muted)}.placeholder-icon{font-size:4rem;margin-bottom:20px;opacity:.5}.placeholder p{font-size:1.1rem}.loader{display:none;flex-direction:column;align-items:center;gap:20px}.loader.active{display:flex}.spinner{width:50px;height:50px;border:4px solid var(--surface-light);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.loader p{color:var(--text-secondary);font-size:1rem}.percolation-image{display:none;max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 20px var(--shadow)}.percolation-image.visible{display:block}@media (max-width:1024px){.content{grid-template-columns:1fr}header h1{font-size:2.5rem}}@media (max-width:640px){body{padding:10px}header h1{font-size:2rem}.controls-panel,.visualization-panel{padding:20px}}