/* @v1d/web-kit 0.178.0, built from Cutkit 06a2c286e tools/studio_static/kit/molecules/timeview/timeview.css. Generated: Cutkit's kit is the only copy, never edit this one. */
.time-view { position: relative; width: 100%; background: var(--tl-bg); }
.time-view-canvas { display: block; width: 100%; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.time-view-controls { display: flex; justify-content: flex-end; gap: var(--space-1); padding: var(--space-1) 2px 2px; }
.time-view-button { min-width: var(--control-h); height: var(--control-h); padding: 0 var(--space-2);
  border: 1px solid var(--tl-line); border-radius: var(--radius);
  background: var(--tl-panel); color: var(--tl-text); font: var(--button-font) var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; }
.time-view-button.bands { display: inline-flex; align-items: center; gap: 5px; }
.time-view-button.bands[hidden] { display: none; }
.time-view-button[aria-pressed="true"] { background: var(--control); border-color: var(--tl-head); color: var(--fg); }
.time-view-button:active:not(:disabled) { background: var(--control); }
.time-view-button:focus-visible { outline: 2px solid var(--tl-head); outline-offset: 1px; }
@media (pointer: coarse) { .time-view-button { min-width: 44px; height: 44px; } }
.time-view.still .time-view-canvas { cursor: default; touch-action: auto; pointer-events: none; }