*{box-sizing:border-box;margin:0;padding:0}body{color:#eee;background:#1a1a2e;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;overflow:hidden}.container{height:100vh;display:flex}#simulation{cursor:crosshair;image-rendering:pixelated;background:#0f0f23;flex:1}.controls{background:#16213e;border-left:2px solid #0f3460;flex-direction:column;flex-shrink:0;gap:20px;width:280px;min-width:280px;max-width:280px;padding:20px;display:flex}.control-group{flex-direction:column;gap:10px;display:flex}.control-group label{color:#a0a0a0;font-size:14px;font-weight:500}.particle-selector{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.particle-btn{color:#eee;cursor:pointer;background:#1a1a2e;border:2px solid #0f3460;border-radius:8px;padding:12px 16px;font-size:14px;font-weight:500;transition:all .2s}.particle-btn:hover{border-color:#e94560;transform:translateY(-2px)}.particle-btn.active{color:#fff;background:#e94560;border-color:#e94560}.particle-btn[data-type=sand].active{background:linear-gradient(135deg,#d4a574,#8b6914)}.particle-btn[data-type=water].active{background:linear-gradient(135deg,#4fc3f7,#0288d1)}.particle-btn[data-type=fire].active{background:linear-gradient(135deg,#ff6b6b,#c0392b)}.particle-btn[data-type=wood].active{background:linear-gradient(135deg,#8b4513,#5d4037)}#brush-size{-webkit-appearance:none;background:#0f3460;border-radius:4px;outline:none;width:100%;height:8px}#brush-size::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#e94560;border-radius:50%;width:20px;height:20px}#brush-size::-moz-range-thumb{cursor:pointer;background:#e94560;border:none;border-radius:50%;width:20px;height:20px}#resolution{-webkit-appearance:none;background:#0f3460;border-radius:4px;outline:none;width:100%;height:8px;margin-top:5px}#resolution::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#e94560;border-radius:50%;width:20px;height:20px}#resolution::-moz-range-thumb{cursor:pointer;background:#e94560;border:none;border-radius:50%;width:20px;height:20px}button{color:#fff;cursor:pointer;background:#e94560;border:none;border-radius:8px;padding:12px 20px;font-size:14px;font-weight:600;transition:all .2s}button:hover{background:#ff6b6b;transform:translateY(-2px)}button:active{transform:translateY(0)}.stats{color:#a0a0a0;background:#0f3460;border-radius:8px;justify-content:space-between;padding:15px;font-size:13px;display:flex}.stats span{text-align:center}#particle-count,#fps-counter{color:#fff;font-size:16px;font-weight:600}