*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:#f5f5f5;min-height:100vh;font-family:system-ui,-apple-system,sans-serif}#app{max-width:1200px;margin:0 auto;padding:24px}h1{margin-bottom:16px;font-size:24px;font-weight:600}.controls{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;display:flex}button{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:6px;padding:8px 16px;font-size:14px;transition:background .15s}button:hover:not(:disabled){background:#e8e8e8}button:disabled{opacity:.4;cursor:not-allowed}#btn-start{color:#fff;background:#32f;border-color:#32f}#btn-start:hover:not(:disabled){background:#21d}.params{background:#fff;border:1px solid #ddd;border-radius:8px;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:16px;padding:12px 16px;display:flex}.params label{white-space:nowrap;align-items:center;gap:6px;font-size:13px;display:flex}.params input[type=range]{width:80px}.params span{color:#666;font-variant-numeric:tabular-nums;min-width:28px;font-size:12px}.params select{border:1px solid #ccc;border-radius:4px;padding:4px 6px;font-size:13px}.params input[type=color]{cursor:pointer;border:1px solid #ccc;border-radius:4px;width:28px;height:28px;padding:0}#canvas{background:#fff;border:1px solid #ddd;border-radius:8px;padding:8px;overflow-x:auto}