We need build a single-page web app in current directory /workspace as index.html. Self-contained, inline CSS and JS, no external resources. Need 16-step drum machine, instruments: kick, snare, hi-hat, clap. Clickable grid. Play/stop and adjustable BPM. Sounds synthesized via Web Audio API.

We should create an HTML file with layout. Need row per instrument, 16 steps each. Step cells clickable to toggle. Play/stop button, BPM input/slider, current step indicator. Synthesizer for each instrument: kick = oscillator frequency envelope + gain; snare = noise + oscillator triangle maybe; hi-hat = high-pass filtered noise; clap = bandpass noise with multiple bursts.

No network. Use Web Audio API. Need resume AudioContext on user interaction.

Need good CSS. Maybe responsive. Should we include pattern? Empty grid. Option to clear? Not required but maybe nice. Add steps labels.

Need handle BPM timing using setInterval / requestAnimationFrame. Better use lookahead scheduler for accuracy. But simple setInterval for just 16-step at typical BPM is fine. Use AudioContext currentTime. Create a schedule: steps per beat? 16 steps per pattern. Common: 4 beats per pattern, each beat has 4 steps (16th notes). So step duration = 60/BPM/4 seconds. Scheduler plays upcoming step with precise audio time.

We can build a simple scheduler:

let audioCtx;
let isPlaying = false;
let currentStep = 0;
let nextStepTime = 0;
let timerID;
const lookahead = 25.0; // ms
const scheduleAheadTime = 0.1; // sec

function nextStep() { nextStepTime += stepDuration; currentStep = (currentStep+1)%16; }

function scheduleNote(stepNumber, time) {
  drawPlayhead(stepNumber);
  patterns.forEach((row, instrIndex) => { if (row[stepNumber]) playSound(instruments[instrIndex], time); });
}

function scheduler() {
  while (nextStepTime < audioCtx.currentTime + scheduleAheadTime) {
    scheduleNote(currentStep, nextStepTime);
    nextStep();
  }
  timerID = setTimeout(scheduler, lookahead);
}

Start: currentStep = 0; nextStepTime = audioCtx.currentTime + stepDuration; scheduler();

Stop: clearTimeout; draw reset.

Need UI update grid highlight for current playing step. Use requestAnimationFrame separate by setting data attribute on steps.

BPM slider/input update stepDuration. Instruments list: kick, snare, hi-hat, clap.

Synthesis functions:
- Kick(t): oscillator exponential ramp frequency from 150 to 0.01 over ~0.5s, gain attack short then exponential decay. Also add slight distortion? Use osc sine. Connect to masterGain.
- Snare(t): create noise buffer if not created. For noise: buffer of white noise. Use setValue 0. envelope. Add OscillatorNode triangle 180Hz for body, decay quick.
- HiHat(t): filtered noise highpass ~800Hz? 5000-10000Hz. Use bandpass/highpass. Decay ~0.05-0.1. Add metallic component using square wave? Typically noise only.
- Clap(t): filtered noise bandpass ~1500Hz with multiple bursts: envelope with 3-4 short bursts. Use setValueAtTime and linear ramps.

For noise buffer, create audioCtx.sampleRate length one second.

Add master gain maybe limiter. Include volume slider for each instrument? Not required, but could enhance. Keep required.

Need single file index.html. Provide all inline.

Need ensure start button triggers AudioContext resume. Also maybe initialize AudioContext lazily.

Let's create with current modern style. Use flex/grid. Include accessible labels. Add status.

Need to be careful with no external resources. No images. Could include small tone.js? No. Avoid.

Let's craft final. We need write file using write tool.

Potential pitfalls: Use `number` input for BPM. Slider. Add display.

Edge: If list patterns as array of booleans length 16 per instrument.

Current step highlight: each cell data-step. On schedule note, set state, requestAnimationFrame updates class.

Need maybe use CSS variables for colors. Row labels clickable? No.

BPM lower and upper 40-220.

Make sounds decent. Details:

Kick:
function playKick(time) {
 const osc = audioCtx.createOscillator();
 const gain = audioCtx.createGain();
 osc.connect(gain); gain.connect(masterGain);
 osc.frequency.setValueAtTime(150, time);
 osc.frequency.exponentialRampToValueAtTime(0.01, time+0.5);
 gain.gain.setValueAtTime(1, time);
 gain.gain.exponentialRampToValueAtTime(0.01, time+0.5);
 osc.start(time); osc.stop(time+0.5);
}

Snare:
function playSnare(time) {
 const noiseLen = 0.25;
 const noiseBuffer = getNoiseBuffer();
 const noise = audioCtx.createBufferSource(); noise.buffer = noiseBuffer;
 const noiseFilter = audioCtx.createBiquadFilter(); noiseFilter.type='bandpass'; noiseFilter.frequency.value=1000; noiseFilter.Q.value=1;
 const noiseGain = audioCtx.createGain();
 noise.connect(noiseFilter); noiseFilter.connect(noiseGain); noiseGain.connect(masterGain);
 noiseGain.gain.setValueAtTime(1, time); noiseGain.gain.exponentialRampToValueAtTime(0.01, time+0.25);
 noise.start(time); noise.stop(time+0.25);

 const osc = audioCtx.createOscillator(); osc.type='triangle'; osc.frequency.setValueAtTime(180,time);
 const oscGain = audioCtx.createGain(); oscGain.gain.setValueAtTime(0.7,time); oscGain.gain.exponentialRampToValueAtTime(0.01, time+0.1);
 osc.connect(oscGain); oscGain.connect(masterGain);
 osc.start(time); osc.stop(time+0.2);
}

HiHat:
function playHiHat(time) {
 const buf = getNoiseBuffer();
 const src = audioCtx.createBufferSource(); src.buffer = buf;
 const hp = audioCtx.createBiquadFilter(); hp.type='highpass'; hp.frequency.value=8000; maybe bandpass 10000 Q=1;
 const gain = audioCtx.createGain();
 src.connect(hp); hp.connect(gain); gain.connect(masterGain);
 gain.gain.setValueAtTime(0.6, time);
 gain.gain.exponentialRampToValueAtTime(0.01, time+0.05);
 src.start(time); src.stop(time+0.05);
}

Clap:
function playClap(time) {
 const buf = getNoiseBuffer();
 const src = audioCtx.createBufferSource(); src.buffer = buf;
 const bp = audioCtx.createBiquadFilter(); bp.type='bandpass'; bp.frequency.value=1500; bp.Q.value=2;
 const gain = audioCtx.createGain();
 src.connect(bp); bp.connect(gain); gain.connect(masterGain);
 gain.gain.setValueAtTime(0, time);
 // burst 1
 const base = time; const gap = 0.015; const d = 0.03;
 gain.gain.linearRampToValueAtTime(0.7, base);
 gain.gain.exponentialRampToValueAtTime(0.01, base+d);
 gain.gain.setValueAtTime(0, base+gap);
 gain.gain.linearRampToValueAtTime(0.6, base+gap+0.005);
 gain.gain.exponentialRampToValueAtTime(0.01, base+gap+d);
 ...
 src.start(base); src.stop(base+0.15);
}

Maybe easier use gain with curve values at exact times: at time t gain 1, at t+0.03 0.01, then t+0.03+epsilon set 0 to retrigger, etc. Use setValueAtTime(0, t+0.035); setValueAtTime(0.7, t+0.04); exponentialRampToValueAtTime(0.01, t+0.07). Ensure end > last time.

Could use length 0.2.

Need cache noise buffer created in audioCtx. If context created after first start, generate.

Let's inspect if current directory has files? Not necessary but good. We'll create new index.html; may overwrite if exists. Need maybe check. Use bash ls? Could.

Need include reset/clear button? Optional. Not requested, perhaps add.

The user wants "Build a 16-step drum machine...". We should output index.html and a brief note. Provide code with write tool. Must ensure all inline.

Before final, we need consider CSP? Since no external, fine.

Need ensure `document.querySelectorAll('.step').forEach` after generation. Could generate grid in JS and attach event listeners. That is clean.

Let's design HTML body: header, controls (play, stop, bpm input, clear, maybe master volume). Grid container.

CSS: dark theme. Steps squares. Active step with bright color per instrument. Current step highlight white border/glow. Labels in left.

Use grid with columns 1fr repeat(16, 1fr). Each row grid. On small screens, use square buttons, min-width. 16 columns; horizontal scroll maybe.

Let's produce file.

We need use write tool with content. Then maybe read? The final answer can say created file.

Need be mindful editing can do. Let's first check current directory quickly via bash? Use read not needed. But I might use bash ls to see if index.html exists.

 Need to write index.html with Web Audio API synthesized drums, 16 step grid, play stop, bpm. Use inline CSS and JS, no external resources. Need support audio context resume after user interaction. Need create oscillators/noise buffers for drum sounds. Build kick (sine freq sweep, gain env), snare (noise + triangle), hi-hat (high-pass filtered noise short), clap (noise burst with multiple). Grid clickable toggles. Play/stop button, BPM range. Current step indicator. Use requestAnimationFrame or setInterval? Use Web Audio scheduling for precise timing. Need HTML layout: 16 columns, rows for instruments, controls. No networking. Self-contained file. Let's design structure.

We should write file. Let's create synth functions:

- createAudioCtx() returns new (window.AudioContext || window.webkitAudioContext)(); must be created/resumed by button click.
- Kick: t0=t, osc freq from 150 to 0.01 exponential, gain attack 0.001 decay 0.5 to 0.001. Use when scheduled. 
- Snare: noise buffer (random -1..1) through bandpass around 1000Hz, plus osc triangle freq 180? Apply gain env.
- Hat: highpass 5000+Hz noise, short decay 0.05, high pass. Maybe create pink-ish noise.
- Clap: noise through bandpass ~1500Hz and envelope of multiple bursts: fast attack, 0.01 decay, then repeats at ~0.03 intervals 2-3 with decay to simulate reverb. Actually simple: noise over 0.2s with multiple gains.

Scheduling: steps and lookahead using audioContext time. Use a global nextNoteTime, currentStep, then setInterval timer to schedule ahead. Update UI current step based on scheduled time. Need scheduler in JS. Use seconds per beat = 60/BPM, each step = quarter? For 16 step loop at 1/4 note each step = one bar. So stepTime = 60/BPM/4. Or maybe each step is 16th note, so stepTime=60/BPM/4. Good.

UI grid: For each instrument create row with label and 16 toggle buttons. Use data attributes instrument and step. Also a row legend number 1-16.

State: pattern = {kick: Array(16).fill(false), snare: ..., hihat: ..., clap: ...}. Toggling updates pattern and class active.

Controls: play/stop button, BPM input range 40-220. Transport start schedules.

Styling: dark theme, neon button active colors per instrument. Use flex or grid.

Need ensure audio context sync: startTransport resumes ctx; stopTransport suspends? Better not suspend, just stop scheduling. On play resume audioCtx.

Edge cases: on load audio context not allowed; only create in button click. But we can declare ctx variable initialized on first play. Need use `const AudioContext = window.AudioContext || window.webkitAudioContext;`. Some browsers need `ctx.resume()`.

Tone shaping: Use GainNodes and filters created per note, connected to masterGain. masterGain to destination. To prevent clipping, master gain 0.7.

Let's implement noise buffer once. Snare and hat can use same noise buffer but different duration via envelope (stop source). Pass duration into playSnare etc.

Let's write code carefully.

Audio graph functions:
```
function createNoiseBuffer() {
  if (noiseBuffer) return;
  const length = ctx.sampleRate * 2; // 2 seconds
  const buf = ctx.createBuffer(1, length, ctx.sampleRate);
  const data = buf.getChannelData(0);
  for (let i=0;i<length;i++) data[i]=Math.random()*2-1;
  noiseBuffer=buf;
}
```
Snare: source = ctx.createBufferSource(); source.buffer=noiseBuffer; source.loop=true; source.playbackRate.value=1; noiseFilter = ctx.createBiquadFilter(); default bandpass? use 'bandpass', freq 1000, Q 1. For snap add triangle oscillator. We can just noise. Envelope gain: t0, attack 0.005, decay to 0.001 by 0.2, exponential, stop at 0.25. Connect to instrument output. For triangle snap: osc triangle freq 220 maybe with short decay. Could skip to keep simple.
Hat: source loop=true -> highpass 5000Hz maybe bandpass high. Envelope attack 0.001, decay 0.05, curve exponential. Add hi-pass maybe secondary. 
Clap: noise -> bandpass 1500Hz. Envelope: build multiple with gain setValueAtTime(0,t), linearRampToValueAtTime(1,t+0.001), exponentialRampToValueAtTime(0.001,t+0.02); then small bumps via gain.setValueAtTime(0.6, t+0.03) etc. Use curve. Then connect.

UI step highlight: maintain `lastStep = -1`, timer calls `draw()` (requestAnimationFrame) with `while (nextNoteTime < ctx.currentTime + scheduleAheadTime) scheduleNote(currentStep, nextNoteTime)`, and `draw()` updates DOM `current-step` class: remove old from all steps, add to current? Use per-instrument step cells querySelector. To minimize, keep array. Use `stepCells[inst][step]`. In scheduler schedule currentStep at nextNoteTime then advance. The UI lags by lookahead; better `draw()` sets class based on `currentStep` at time of draw? Standard method: scheduler increments currentStep immediately. A drawPlayhead() could calculate current step based on ctx.currentTime relative to start. But using `currentStep` immediate works with lookahead. We'll add a default conversion: when scheduling note, mark `currentStep` in DOM with a slight delay? Simpler: schedule each step and also update lastStep scheduled after some time? For our purposes acceptable. But better: create a `stepIndicator` variable updated by scheduler, and `draw()` sets class. However lookahead means playhead appears before actual audio? Maybe set scheduleAheadTime to 0.05, so visually okay. 

Could implement `requestAnimationFrame` draw that calls scheduler and then updates playhead using `currentStep` that was advanced; since scheduler increments for notes more ahead. Maybe to align, use `lastStep` only increment after note time passes? We can set a `notesInQueue` array of {step,time}. In draw, iterate queue and pop passed events, set lastStep to current. Let's implement robustly: `const notesInQueue=[]`; scheduler pushes {step,time}; draw uses `while(notesInQueue.length && notesInQueue[0].time < ctx.currentTime){lastStep=notesInQueue.shift().step;}`. That aligns with audio. Then update DOM with lastStep.

Also loop highlight across rows: class `playing` on step cells of index current (all rows). Maybe add a highlight line.

Transport: `isPlaying`, timerID (setInterval 25ms). Start: nextNoteTime = ctx.currentTime + 0.05; currentStep = 0; timerID = setInterval(scheduler, 25). Scheduler while nextNoteTime < ctx.currentTime + scheduleAheadTime. scheduleNote(currentStep, nextNoteTime). Then nextNoteTime += stepTime; currentStep = (currentStep+1)%16.

Stop: clear interval; reset currentStep highlighting; set isPlaying false.

BPM changed updates stepDuration. Need parse. 

Let's include presets? Randomize/clear buttons optional but not requested. Could include "Clear" and maybe fill dynamic. Keep simple.

Need answer no explanation? Better output final short summary.

Write file via write tool. Let's craft full content.

Potential issues: exponential ramp to 0 invalid. Use exponentialRampToValueAtTime(value, time) with value >0, then gain.setTargetAtTime? Simpler: linear fade to 0. Use `gain.gain.setValueAtTime(1, t); gain.gain.exponentialRampToValueAtTime(0.001, t+decay); source.stop(t+decay+0.05)`. That is standard. For decay 0.001 target works. Clap use linear ramps for bumps with set to 0 quickly.

Master gain: 0.6. Add limiter? Can use DynamicsCompressorNode to be safe. `const masterComp = ctx.createDynamicsCompressor(); masterGain.connect(masterComp); masterComp.connect(ctx.destination)`.

Need initialize only when play. But for play synthesized notes, need ctx; create context lazily via `initAudio()`.

Let's code.

Need ensure that all step cells accessible; generate HTML via JS? Could generate grid in JS for easier arrays. But we need style. Simpler generate rows dynamically. index.html includes container div id=grid. JS builds. Add header, controls.

Let's make instrument config:
```
const instruments = [
 {name:'kick', label:'Kick', color:'#ff3b30'},
 {name:'snare', label:'Snare', color:'#ff9500'},
 {name:'hihat', label:'Hi-Hat', color:'#4cd964'},
 {name:'clap', label:'Clap', color:'#34aadc'}
];
```

Default pattern maybe kick on steps 0,4,8,12, snare 4,12, hihat every other, clap 4,12. But no default requested. Could initialize with a basic groove. Let's provide starter pattern:
```
const patterns = {
 kick: [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0],
 snare: [0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0],
 hihat: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
 clap: [0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0]
};
```
This is fine.

CSS: body dark, grid uses `display:grid; grid-template-columns: 80px repeat(16,1fr); gap:.5rem;`. Top header numbers use same columns. Step buttons shaped squares with aspect-ratio 1; active uses instrument color. Highlight class current-step adds ring/background. 

Build grid: row label + 16 buttons. Use `stepButtons[instrument][stepIndex]` map.

Event listeners: click toggle updates patterns and class. Controls: playBtn, bpmRange, bpmDisplay. togglePlay, updateTempo.

Keyboard: Space to toggle. Add? Not needed maybe.

Need prevent AudioContext suspended after stop. Keep.

Edge: button click on first load could not start audio if play not pressed; fine.

Let's write file. Ensure no external fonts/CDNs. Use system fonts.

Let's use `write` tool.

  Need ensure file meets requirements. Verify no external resources. Open maybe read? Could test via headless browser? We can quickly validate by checking content. The file uses inline CSS/JS. Good.

But maybe need double-check audio scheduling and graph: `connectToMaster` does `node.connect(masterGain);` but also unused stopTime. Fine.

Potential issue: `createEnvelope` uses `exponentialRampToValueAtTime(0.001,...)` after linear ramp. For clap I customized. In `playClap` I set `exponentialRampToValueAtTime(0.05, t + 0.05)` after `setValueAtTime(0.5, t+0.03)`. The exponential target 0.05 (>0). Then `g.setValueAtTime(0.25, t+0.07); exponentialRampToValueAtTime(0.001, t+0.18)`. Could have issue: previous value at t+0.05 is 0.05, so setValueAtTime(0.25,t+0.07) jumps to 0.25 then exponential down. Fine. But between t+0.05 and t+0.07 value remains 0.05 then jumps. Fine.

Potential issue: `noiseSrc.loop = true` but we stop at time, envelope controls gain. Should be fine.

Potential UI issue: when window resized small, grid columns could overflow. Container width min 1100, overflow maybe. On mobile min. The grid uses 16 columns plus label; fine with scroll? Body padding; grid inside panel. Could overflow panel. Acceptable.

Potential issue: In `draw`, after stopping, scheduling may have already advanced currentStep before stop; if stop clears interval, requestAnimationFrame will run one more call and remove playing classes. Fine.

Could we add click on first load creates AudioContext? Only play button does. Clicking steps doesn't initAudio. That's fine but won't preview a sound on step toggle unless playing or context initialized elsewhere. User asked grid clickable; doesn't necessarily need preview per click. Could add preview for good UX: in step click, initAudio() and play instrument briefly. But not required. Maybe add initAudio on first step click so audible. Let's consider. There is no requirement to preview individual hits. However typical drum machine allows clicking to hear. It would be nice. I could add a preview. But current file good.

Need maybe mention file created. Final answer short.

However, before final, let's run a quick sanity check with a headless browser? We don't have a browser tool. We could use `python3 -m http.server`? Not needed. Use `bash` to check file size and grep external.

   Need verify computation of stepDuration. Good. Need final. mention no external resources. Done.
The user asked "Build a 16-step drum machine...". We built index.html. We should respond concisely with file path and features. The instructions say "End with index.html present." It's present. Final.