.daw {
  user-select: none;
}

.playhead {
  background: rgba(255, 255, 255, 0.75);
  bottom: 0;
  left: calc(
    var(--header-width) + (100% - var(--header-width)) * (var(--playhead-bar) - 1) / var(--bars)
  );
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 1px;
  z-index: 2;
}

.playhead-handle {
  border: 0.4rem solid transparent;
  border-top-color: rgba(255, 255, 255, 0.75);
  cursor: ew-resize;
  left: 50%;
  pointer-events: auto;
  position: absolute;
  top: 0;
  touch-action: none;
  transform: translateX(-50%);
}

.region {
  background: var(--track-color);
  border-radius: 5px;
  color: inherit;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

/* The span is inline on each region, so overriding it needs the weight */
@media (min-width: 75rem) {
  .region {
    grid-column-end: span 40 !important;
  }
}

@media (min-width: 90rem) {
  .region {
    grid-column-end: span 32 !important;
  }
}

.region-body {
  border-radius: 2px;
  flex: 1;
  margin: 0 0.4rem 0.4rem;
  position: relative;
  transition: opacity 350ms ease;
}

.region-note {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 1px;
  height: 2px;
  position: absolute;
}

.region-hover {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: clamp(0.9rem, 5cqw, 1.4rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding: 0.15rem 2.5rem;
  position: absolute;
  text-align: center;
  transform: translateY(60%);
  transition: opacity 350ms ease, transform 500ms ease;
  white-space: nowrap;
}

.region-hover-compact,
.region-hover-full {
  position: relative;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.region-hover-compact {
  display: none;
  font-size: clamp(0.9rem, 10cqw, 2rem);
}

.region-texture {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 350ms ease;
}

.region-texture.filmstrip {
  background-image:
    linear-gradient(to right, #fff 0 7px, transparent 7px 18px),
    linear-gradient(to right, #fff 0 7px, transparent 7px 18px),
    linear-gradient(to right, transparent 0 68px, rgba(0, 0, 0, 0.8) 68px 72px),
    url("/assets/muse-be9e47b5.png"),
    linear-gradient(#141414, #141414);
  background-position: 0 5px, 0 calc(100% - 5px), -4px center, -4px center, 0 0;
  background-repeat: repeat-x;
  background-size: 18px 6px, 18px 6px, 72px calc(100% - 34px), 72px calc(100% - 34px), 100% 100%;
}

.region-texture.sweep {
  background-image: linear-gradient(to right, transparent, rgba(255, 226, 168, 0.75), transparent);
  background-position: -30% 0;
  background-repeat: no-repeat;
  background-size: 22% 100%;
}

a.region:hover .region-texture,
a.region:focus-visible .region-texture {
  opacity: 0.35;
}

a.region:hover .region-texture.sweep,
a.region:focus-visible .region-texture.sweep {
  animation: staff-sweep 1400ms cubic-bezier(0.3, 0, 0.82, 0.28);
  opacity: 0.6;
}

@keyframes staff-sweep {
  from {
    background-position: -30% 0;
  }

  to {
    background-position: 130% 0;
  }
}

a.region:hover .region-texture.filmstrip,
a.region:focus-visible .region-texture.filmstrip {
  animation: filmstrip-scroll 900ms linear infinite;
  opacity: 0.85;
}

@keyframes filmstrip-scroll {
  to {
    background-position: 72px 5px, 72px calc(100% - 5px), 68px center, 68px center, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.region:hover .region-texture,
  a.region:focus-visible .region-texture {
    animation: none;
  }
}

.region-hover img {
  height: 100%;
  left: 0;
  mask-image: linear-gradient(to right, #000 70%, transparent);
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 350ms ease;
  width: auto;
}

a.region:hover .region-hover img,
a.region:focus-visible .region-hover img {
  opacity: 1;
}

.region-name {
  color: #fff;
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
  transition: opacity 350ms ease;
}

.timeline {
  --bars: 31;
  --slots: 124;
  --header-bg: #222;
  --header-pad: 0.75rem;
  --header-width: clamp(13rem, 15%, 21rem);
  --lane-bg: #1b1b1b;
  --lane-height: 5.5rem;
  --lane-line: #262626;

  border: 1px solid var(--rule);
  border-radius: 0 0 6px 6px;
  font-size: 0.8rem;
  overflow: hidden;
  position: relative;
}

.timeline-bar {
  grid-row: 1;
  padding: 0.25rem 0.35rem 0.9rem;
}

/* Dead space over the track headers: no scrubbing starts here */
.timeline-corner {
  align-self: stretch;
  cursor: default;
  grid-column: 1;
  grid-row: 1;
}

/* The locator band, shown only while cycling */
.timeline-cycle {
  background: rgba(224, 178, 47, 0.32);
  border-left: 1px solid #e0b22f;
  border-right: 1px solid #e0b22f;
  bottom: 0;
  box-sizing: border-box;
  cursor: grab;
  display: none;
  left: calc(
    var(--header-width) + (100% - var(--header-width)) * (var(--cycle-from) - 1) / var(--bars)
  );
  position: absolute;
  top: 0;
  touch-action: none;
  width: calc(
    (100% - var(--header-width)) * (var(--cycle-to) - var(--cycle-from)) / var(--bars)
  );
}

.timeline-cycle:active {
  cursor: grabbing;
}

.timeline.is-cycling .timeline-cycle {
  display: block;
}

/* A wide grab zone straddling each edge, so a near miss still resizes */
.timeline-locator {
  bottom: 0;
  cursor: ew-resize;
  position: absolute;
  top: 0;
  width: 0.9rem;
}

.timeline-locator:hover {
  background: rgba(224, 178, 47, 0.45);
}

.timeline-locator[data-edge="from"] {
  left: -0.45rem;
}

.timeline-locator[data-edge="to"] {
  right: -0.45rem;
}

.timeline-ruler {
  align-items: end;
  position: relative;
  background: var(--header-bg);
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  cursor: ew-resize;
  display: grid;
  grid-template-columns: var(--header-width) repeat(var(--slots), minmax(0, 1fr));
  touch-action: none;
}

.timeline-ticks {
  background-image:
    repeating-linear-gradient(
      to right,
      #5f5f5f 0 1px,
      transparent 1px calc(400% / var(--bars))
    ),
    repeating-linear-gradient(
      to right,
      #5f5f5f 0 1px,
      transparent 1px calc(100% / var(--bars))
    ),
    repeating-linear-gradient(
      to right,
      #5f5f5f 0 1px,
      transparent 1px calc(var(--pulse-step) / var(--bars))
    ),
    repeating-linear-gradient(
      to right,
      #414141 0 1px,
      transparent 1px calc(var(--beat-step) / var(--bars))
    );
  align-self: stretch;
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 45%, 100% 22%, 100% 11%;
  grid-column: 2 / -1;
  grid-row: 1;
}

.track {
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: var(--header-width) 1fr;
}

.track:last-child {
  border-bottom: 0;
}

.track-button-pair {
  display: flex;
}

.track-button-pair span {
  background: #2e2e2e;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.6rem;
  min-width: 1.05rem;
  padding: 0.05rem 0;
  text-align: center;
}

.track-button-pair .track-input.is-on {
  background: #b4552d;
  color: #fff;
}

.track-button-pair .track-solo.is-on {
  background: #d4a017;
  color: #fff;
}

.track-button-pair .track-mute.is-on {
  background: #14747a;
  color: #fff;
}

.track-button-pair .track-record {
  color: #b23b37;
}

.track-button-pair .track-record.is-on {
  animation: blink-record 2.2s steps(1) infinite;
  color: #fff;
}

@keyframes blink-record {
  0%,
  50% {
    background: #b23b37;
  }

  51%,
  100% {
    background: #2e2e2e;
  }
}

.track-button-pair span:first-child {
  border-radius: 3px 0 0 3px;
  border-right: 1px solid #1b1b1b;
}

.track-button-pair span:last-child {
  border-radius: 0 3px 3px 0;
}

.track-buttons {
  display: flex;
  flex: none;
  gap: 0.35rem;
}

.track-fader {
  background: #171717;
  border-radius: 999px;
  cursor: grab;
  flex: 1;
  height: 0.9rem;
  max-width: 45cqw;
  min-width: 1.5rem;
  position: relative;
  touch-action: none;
}

.track-fader:active {
  cursor: grabbing;
}

.track-fader.is-muted {
  cursor: default;
  opacity: 0.5;
}

.track-fader::after {
  aspect-ratio: 1;
  background: #8a8a8a;
  border-radius: 50%;
  content: "";
  height: 0.8rem;
  left: clamp(0.4rem, var(--fader, 70%), 100% - 0.4rem);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.track-knob {
  background-image:
    conic-gradient(
      #3ecf5a 0 max(var(--pan, 5deg), 0deg),
      transparent max(var(--pan, 5deg), 0deg) calc(360deg + min(var(--pan, 5deg), 0deg)),
      #3ecf5a calc(360deg + min(var(--pan, 5deg), 0deg)) 360deg
    ),
    conic-gradient(#3a3a3a 0 145deg, transparent 145deg 215deg, #3a3a3a 215deg 360deg);
  border-radius: 50%;
  cursor: grab;
  flex: none;
  height: 1.25rem;
  position: relative;
  touch-action: none;
  width: 1.25rem;
}

.track-knob:active {
  cursor: grabbing;
}

.track-knob::after {
  background: #8a8a8a;
  border-radius: 50%;
  content: "";
  inset: 3px;
  position: absolute;
}

.track-knob-center {
  background: #3ecf5a;
  height: 3px;
  left: calc(50% - 0.5px);
  position: absolute;
  top: 0;
  width: 1px;
  z-index: 2;
}

.track-knob::before {
  background: #1b1b1b;
  border-radius: 1px;
  content: "";
  height: 0.32rem;
  left: calc(50% - 0.5px);
  position: absolute;
  top: calc(50% - 0.32rem);
  transform: rotate(var(--pan, 5deg));
  transform-origin: 50% 100%;
  width: 1px;
  z-index: 1;
}

.track-row {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}

.track-details {
  container-type: inline-size;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}


.track-header {
  align-items: center;
  background: var(--header-bg);
  color: inherit;
  display: flex;
  gap: 0.75rem;
  overflow: hidden;
  padding: var(--header-pad);
  text-decoration: none;
}

.track:hover .track-header,
.track:focus-within .track-header {
  background-color: #2e2e2e;
}

.track:hover .track-lane,
.track:focus-within .track-lane {
  background-color: #242424;
}

.track-lane {
  align-items: stretch;
  background: var(--lane-bg);
  background-image: repeating-linear-gradient(
    to right,
    var(--lane-line) 0 1px,
    transparent 1px calc(100% / var(--bars))
  );
  display: grid;
  grid-template-columns: repeat(var(--slots), minmax(0, 1fr));
  min-height: var(--lane-height);
  padding: 0.15rem 0;
}

.track-name {
  color: var(--ink);
  font-size: inherit;
  font-weight: normal;
  margin: 0;
  white-space: nowrap;
}

.track-number {
  align-items: center;
  align-self: stretch;
  background: var(--track-color);
  color: rgba(0, 0, 0, 0.65);
  display: flex;
  flex: none;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  justify-content: center;
  margin: calc(var(--header-pad) * -1) 0 calc(var(--header-pad) * -1) calc(var(--header-pad) * -1);
  width: 1.2rem;
}

a.region:hover,
a.region:focus-visible {
  box-shadow: inset 0 -2.5rem 2.5rem -1.25rem rgba(0, 0, 0, 0.55);
}

a.region:hover .region-body,
a.region:focus-visible .region-body,
a.region:hover .region-name,
a.region:focus-visible .region-name {
  opacity: 0;
}

a.region:hover .region-hover,
a.region:focus-visible .region-hover {
  opacity: 1;
  transform: translateY(0);
}

/* The filmstrip already carries the motion, so its label just fades */
.region:has(.filmstrip) .region-hover {
  transform: none;
  transition: opacity 350ms ease;
}

@media (max-width: 60rem) {
  .region-hover-compact {
    display: inline;
  }

  .region-hover-full {
    display: none;
  }
}

@media (hover: none) {
  a.region:hover {
    box-shadow: none;
  }

  a.region:hover .region-body,
  a.region:hover .region-name {
    opacity: 1;
  }

  a.region:hover .region-hover,
  a.region:hover .region-hover img {
    opacity: 0;
  }

  a.region:hover .region-texture,
  a.region:hover .region-texture.filmstrip,
  a.region:hover .region-texture.sweep {
    animation: none;
    opacity: 0;
  }

  .track:hover .track-header {
    background-color: var(--header-bg);
  }

  .track:hover .track-lane {
    background-color: var(--lane-bg);
  }
}

@media (max-width: 40rem) {
  .track-button-pair .track-input,
  .track-fader,
  .track-knob {
    display: none;
  }

  .timeline {
    --header-width: clamp(6rem, 20%, 8.5rem);
  }

  .track-number {
    width: 0.8rem;
  }

  /* R is on its own once I is hidden, so it takes the whole pill */
  .track-button-pair .track-record:first-child {
    border-radius: 3px;
    border-right: 0;
  }
}

@media (max-height: 54rem) {
  .timeline {
    --header-pad: 0.6rem;
    --lane-height: 4.75rem;
  }
}

@media (max-height: 46rem) {
  .timeline {
    --header-pad: 0.45rem;
    --lane-height: 3.25rem;
  }

  .region-body {
    margin-bottom: 0.25rem;
  }

  .region-name {
    padding: 0 0.4rem;
  }
}