diff --git a/light9/web/light9-timeline-audio.html b/light9/web/light9-timeline-audio.html
--- a/light9/web/light9-timeline-audio.html
+++ b/light9/web/light9-timeline-audio.html
@@ -6,7 +6,9 @@
     <style>
      :host {
          display: block;
-         background: red;
+         /* shouldn't be seen, but black is correct for 'no
+         audio'. Maybe loading stripes would be better */
+         background: black; 
      }
      div {
          width: 100%;
diff --git a/light9/web/timeline-elements.html b/light9/web/timeline-elements.html
--- a/light9/web/timeline-elements.html
+++ b/light9/web/timeline-elements.html
@@ -30,9 +30,6 @@
          position: absolute;
          left: 0; top: 0; right: 0; bottom: 0;
      }
-     light9-timeline-adjusters {
-         pointer-events: none; /* temporary */
-         }
     </style>
     <div>
       <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
@@ -74,7 +71,7 @@
      }
      light9-timeline-audio {
          width: 100%;
-         height: 90px;
+         height: 100px;
      }
      light9-timeline-graph-row {
          flex-grow: 1;
@@ -215,6 +212,10 @@
 <dom-module id="light9-timeline-adjusters">
   <template>
     <style>
+     :host {
+         pointer-events: none; /* restored on the individual adjusters */
+     }
+
     </style>
     <template is="dom-repeat" items="{{adjs}}">
       <light9-timeline-adjuster dia="{{dia}}" adj="{{item}}"></light9-timeline-adjuster>
@@ -248,6 +249,7 @@
          top: -40px; /* percent had no effect */
          z-index: 2;
          border-collapse: collapse;
+         pointer-events: all;
      }
      td {
          text-align: center;
diff --git a/light9/web/timeline.coffee b/light9/web/timeline.coffee
--- a/light9/web/timeline.coffee
+++ b/light9/web/timeline.coffee
@@ -73,20 +73,20 @@ Polymer
 
         @$.dia.setMouse(@viewState.mouse.pos())
 
+  latestMouseTime: ->
+    @zoomInX.invert(@viewState.mouse.pos().e(1))
+
   bindWheelZoom: ->
-    # tried d3.zoom but couldn't figure it out
-    zoom = d3.zoom()
-    zoom.filter ->
-      # LMB drag is for selection, but MMB can scroll
-      return !(event.type == 'mousedown' && event.button != 1)
-    zoom.extent([[0, 0], [196, 1]])
-    zoom.translateExtent([[0, 0], [196, 1]])
-    zoom.on 'zoom', (a,b,c) =>
-      xf = d3.event.transform
-      log('zoom', xf)
-      @viewState.zoomSpec.t1(xf.invertX(0))
-      @viewState.zoomSpec.t2(xf.invertX(@viewState.zoomSpec.duration()))
-    d3.select(@$.zoomed).call(zoom)
+    @$.zoomed.addEventListener 'mousewheel', (ev) =>
+      zs = @viewState.zoomSpec
+
+      center = @latestMouseTime()
+      left = center - zs.t1()
+      right = zs.t2() - center
+      scale = Math.pow(1.005, ev.deltaY)
+
+      zs.t1(center - left * scale)
+      zs.t2(center + right * scale)
 
   animatedZoom: (newT1, newT2, secs) ->
     fps = 30
@@ -99,7 +99,6 @@ Polymer
         gotoStep = =>
           @viewState.zoomSpec.t1((1 - frac) * oldT1 + frac * newT1)
           @viewState.zoomSpec.t2((1 - frac) * oldT2 + frac * newT2)
-          console.log('to', frac, @viewState.zoomSpec.t1(), @viewState.zoomSpec.t2())
         delay = frac * secs * 1000
         setTimeout(gotoStep, delay)
         lastTime = delay
@@ -110,9 +109,9 @@ Polymer
     
   bindKeys: ->
     shortcut.add "Ctrl+P", (ev) =>
-      @$.music.seekPlayOrPause(@zoomInX.invert(@viewState.mouse.pos().e(1)))
+      @$.music.seekPlayOrPause(@latestMouseTime())
 
-    zoomAnimSec = .2
+    zoomAnimSec = .1
     shortcut.add "Ctrl+Escape", =>
       @animatedZoom(0, @viewState.zoomSpec.duration(), zoomAnimSec)
     shortcut.add "Shift+Escape", =>