@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/timeline-sound.css

@@ -0,0 +1,1003 @@
+/* ── SOUND MODE: the dock as a small DAW ──────────────────────────────────
+   One row per audio track, a channel strip in the sticky label column, the
+   film's shots as a thin reference row on top, and the mixer (or the
+   Generate drawer) in the right column. SoundMode.tsx and GenerateDrawer.tsx
+   are the markup; Paper page 26 is the picture.
+
+   Track rows are 72px: an 8px inset above and below the clip leaves the
+   waveform `SOUND_WAVE_H` (72 - 1 border - 16 inset - 2 clip border). The
+   shots row is 24px. Both are mirrored in SoundMode.tsx. */
+
+.sound-lanes {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Beat and bar lines. UNDER the clips: the overlay comes first in the tree
+   and every row after it paints over it, so a grid line never crosses a
+   waveform. The sticky strip column (z 4) covers it on a horizontal scroll. */
+.sound-overlay {
+  z-index: 0;
+}
+
+.sound-beat,
+.sound-bar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--line-soft);
+}
+
+.sound-bar {
+  background: var(--line);
+}
+
+/* The razor's one-time hint, floating over the lanes. */
+.sound-notice {
+  position: absolute;
+  top: var(--space-2);
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
+  font: var(--type-sm)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-1);
+  background: var(--surface-raised);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-tab);
+  box-shadow: var(--shadow-popover);
+}
+
+.sound-notice-key {
+  padding: 0 var(--space-2);
+  font: var(--type-micro)/var(--leading-xs) var(--font-mono);
+  color: var(--ink-2);
+  background: var(--fill-rest);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-xs);
+}
+
+/* ── ROWS ────────────────────────────────────────────────────────────── */
+.sound-row {
+  display: flex;
+  align-items: stretch;
+  flex: none;
+  border-bottom: 1px solid var(--line);
+}
+
+/* The same sticky recipe as `.audio-label-cell`: above the clips and above
+   the dock overlay (3), so a scrolled lane slides under the strips. */
+.sound-strip-cell {
+  position: sticky;
+  left: 0;
+  z-index: 4;
+  flex: none;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  background-color: var(--surface-panel);
+  border-right: 1px solid var(--line);
+}
+
+.sound-shots-row {
+  height: 24px;
+}
+
+.sound-shots-label {
+  padding: 0 var(--space-6) 0 var(--space-7);
+  font: var(--weight-semibold) var(--type-sm)/var(--leading-xs) var(--font-sans);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+.sound-shots {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+.sound-shot-pill {
+  position: absolute;
+  top: 4px;
+  height: 16px;
+  padding: 0 var(--space-3);
+  border: 0;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--type-micro)/16px var(--font-sans);
+  color: var(--ink-3);
+  background: var(--fill-rest);
+  border-radius: var(--radius-xs);
+}
+
+.sound-shot-pill:hover {
+  color: var(--ink-1);
+}
+
+/* The shot under the playhead. */
+.sound-shot-pill.is-current {
+  color: var(--accent-ink);
+  background: var(--accent-quiet);
+}
+
+.sound-track-row {
+  height: 72px;
+}
+
+.sound-add-row {
+  height: 32px;
+}
+
+.sound-add-track {
+  gap: var(--space-3);
+  height: var(--control-h);
+  margin-left: var(--space-5);
+  padding-inline: var(--space-3);
+  font: var(--type-md)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-2);
+  white-space: nowrap;
+}
+
+.sound-add-track svg {
+  flex: none;
+  width: 12px;
+  height: 12px;
+}
+
+.sound-note {
+  margin: 0;
+  padding: var(--space-6);
+  font: var(--type-md)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-3);
+}
+
+.sound-lane {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+.sound-lane .audio-clip {
+  top: var(--space-4);
+  bottom: var(--space-4);
+  border-radius: var(--radius-sm);
+}
+
+/* An empty track says what it takes, at the lane's left edge. */
+.sound-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding-left: var(--space-6);
+  font: var(--type-md)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-3);
+}
+
+.sound-empty-btn {
+  color: var(--ink-2);
+}
+
+/* A muted track keeps its clips on screen, dimmed and dashed, as a muted
+   clip is: mute is a decision the author has to see to undo. */
+.sound-track-row.is-muted .audio-clip {
+  opacity: 0.45;
+  border-style: dashed;
+}
+
+/* Another track is soloed: this one is out of the mix, so it recedes. */
+.sound-track-row.is-unsoloed .sound-lane,
+.sound-mixer-strip.is-unsoloed {
+  opacity: 0.4;
+}
+
+.sound-track-row.is-over .sound-lane {
+  background: color-mix(in srgb, var(--audio-clip) 14%, transparent);
+  outline: 1px dashed var(--audio-clip);
+  outline-offset: -1px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .sound-track-row.is-revealed .sound-lane { animation: row-revealed 900ms var(--ease); }
+}
+
+/* ── CLIPS ───────────────────────────────────────────────────────────── */
+.audio-clip.is-selected {
+  outline: 1px solid var(--accent);
+  outline-offset: -1px;
+}
+
+.audio-clip.is-selected .audio-clip-name {
+  color: var(--accent-ink);
+}
+
+.audio-clip-badge {
+  margin-left: var(--space-2);
+  padding: 0 var(--space-2);
+  font: var(--type-micro)/var(--leading-xs) var(--font-mono);
+  color: var(--ink-2);
+  background: var(--fill-rest);
+  border-radius: var(--radius-2xs);
+}
+
+/* A video's own sound: read-only here, so it reads as a reference. */
+.audio-clip.is-video {
+  cursor: default;
+  border-style: dashed;
+  background: color-mix(in srgb, var(--audio-clip) 8%, transparent);
+}
+
+.audio-clip.is-video:hover {
+  background: color-mix(in srgb, var(--audio-clip) 8%, transparent);
+}
+
+.audio-clip-lock {
+  display: inline-flex;
+  vertical-align: -2px;
+  margin-right: var(--space-1);
+}
+
+.audio-clip-lock svg {
+  width: 11px;
+  height: 11px;
+}
+
+/* ── THE CHANNEL STRIP: name, M, S. Level and pan live on the mixer ──── */
+.sound-strip {
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  padding: 0 var(--space-6) 0 var(--space-7);
+}
+
+.sound-strip-top {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+/* The track's colour: every track is audio, so every dot is the clip teal. */
+.sound-strip-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  margin-right: var(--space-2);
+  background: var(--audio-clip);
+  border-radius: var(--radius-2xs);
+}
+
+.sound-strip-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--weight-semibold) var(--type-md)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-1);
+  cursor: default;
+}
+
+.sound-strip-rename {
+  flex: 1;
+  min-width: 0;
+  height: 20px;
+  padding: 0 var(--space-2);
+  font: var(--weight-medium) var(--type-md)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-1);
+  background: var(--surface-panel);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-xs);
+  outline: none;
+  user-select: text;
+}
+
+.sound-ms {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 18px;
+  padding: 0;
+  font: var(--weight-bold) var(--type-micro)/1 var(--font-mono);
+  color: var(--ink-2);
+  background: transparent;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-xs);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+
+.sound-ms:hover {
+  background: var(--fill-hover);
+}
+
+.sound-ms.is-mute.is-on {
+  color: var(--surface-well);
+  background: var(--warn);
+  border-color: var(--warn);
+}
+
+.sound-ms.is-solo.is-on {
+  color: var(--on-accent);
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+/* The mixer strip's pan knob, above its level. The master keeps the slot
+   empty so every strip's meters start on one line. */
+.sound-pan,
+.sound-pan-slot {
+  flex: none;
+  width: 18px;
+  height: 18px;
+}
+
+.sound-pan {
+  cursor: ns-resize;
+  touch-action: none;
+  border-radius: var(--radius-full);
+}
+
+.sound-pan:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.sound-pan circle {
+  fill: var(--fill-rest);
+  stroke: var(--line-strong);
+}
+
+.sound-pan path {
+  fill: none;
+  stroke: var(--ink-1);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+}
+
+/* ── THE MIXER: the right column in Sound mode ───────────────────────── */
+.sound-mixer,
+.sound-gen {
+  grid-column: 3;
+  grid-row: 2;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  border-left: 1px solid var(--line);
+}
+
+.sound-mixer {
+  overflow: hidden;
+}
+
+/* "Mixer  -6.2 dB peak  [Duck under voice]" over the strips. */
+.sound-mixer-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  height: var(--panel-head-h);
+  padding-inline: var(--space-6);
+  border-bottom: 1px solid var(--line);
+}
+
+.sound-mixer-title {
+  flex: none;
+  font: var(--weight-semibold) var(--type-lg)/var(--leading-sm) var(--font-sans);
+  color: var(--ink-1);
+}
+
+.sound-mixer-peak {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--type-sm)/var(--leading-xs) var(--font-mono);
+  font-variant-numeric: var(--numeric);
+  color: var(--ink-3);
+}
+
+.sound-solo-chip {
+  flex: none;
+  height: 20px;
+  margin-right: auto;
+  padding: 0 var(--space-3);
+  font: var(--weight-medium) var(--type-micro)/1 var(--font-sans);
+  color: var(--on-accent);
+  background: var(--accent);
+  border: 0;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+/* The duck. Disabled it still reads as a button: its tooltip says what turns
+   it on, so the capability is never hidden. */
+.sound-duck {
+  flex: none;
+  height: 24px;
+  padding-inline: var(--space-4);
+  font: var(--weight-medium) var(--type-sm)/1 var(--font-sans);
+  color: var(--ink-2);
+  white-space: nowrap;
+  background: var(--fill-rest);
+  border: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+
+.sound-duck:hover:not(:disabled) {
+  color: var(--ink-1);
+  background: var(--fill-hover);
+}
+
+.sound-duck[aria-pressed="true"] {
+  color: var(--accent-ink);
+  background: var(--accent-quiet);
+}
+
+.sound-duck:disabled {
+  color: var(--ink-3);
+  cursor: default;
+}
+
+.sound-duck:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* The strips share the column's width and fill its height. Past a handful of
+   tracks they keep a 46px floor and the row scrolls. */
+.sound-mixer-strips {
+  flex: 1;
+  display: flex;
+  gap: var(--space-3);
+  min-height: 0;
+  padding: var(--space-6);
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.sound-mixer-strip {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+  min-width: 46px;
+  min-height: 0;
+  padding: var(--space-5) var(--space-2);
+  background: var(--surface-raised);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-tab);
+}
+
+.sound-mixer-strip.is-muted .sound-mixer-body {
+  opacity: 0.45;
+}
+
+/* The master: the one strip the whole mix passes through. */
+.sound-mixer-strip.is-master {
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 33%, transparent);
+}
+
+.sound-mixer-db {
+  font: var(--type-micro)/var(--leading-xs) var(--font-mono);
+  font-variant-numeric: var(--numeric);
+  color: var(--ink-2);
+}
+
+.sound-mixer-strip.is-master .sound-mixer-db,
+.sound-mixer-strip.is-master .sound-mixer-name {
+  color: var(--accent-ink);
+}
+
+.sound-mixer-body {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  gap: var(--space-3);
+  min-height: 0;
+}
+
+.sound-mixer-ms {
+  display: flex;
+  gap: var(--space-1);
+}
+
+.sound-mixer-ms .sound-ms {
+  width: 18px;
+  height: 16px;
+  font-size: var(--type-micro);
+}
+
+.sound-mixer-name {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--weight-semibold) var(--type-sm)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-2);
+}
+
+.sound-meter-pair {
+  display: flex;
+  gap: var(--space-1);
+}
+
+.sound-meter {
+  position: relative;
+  width: 6px;
+  height: 100%;
+  overflow: hidden;
+  background: var(--fill-rest);
+  border-radius: var(--radius-2xs);
+}
+
+.sound-meter-lit {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--meter-lit);
+}
+
+.sound-meter-lit.is-hot {
+  background: var(--warn);
+}
+
+.sound-meter-hold {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--ink-1);
+}
+
+/* A 20px hit column around a 4px rail. */
+.sound-vfader {
+  position: relative;
+  width: 20px;
+  height: 100%;
+  cursor: ns-resize;
+  touch-action: none;
+}
+
+.sound-vfader::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 8px;
+  width: 4px;
+  background: var(--fill-rest);
+  border-radius: var(--radius-2xs);
+}
+
+.sound-vfader-thumb {
+  position: absolute;
+  left: 0;
+  width: 20px;
+  height: 12px;
+  background: var(--ink-1);
+  border-radius: var(--radius-2xs);
+  transform: translateY(50%);
+}
+
+.sound-vfader:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* ── HEAD TOOLS: the BPM chip, Library and Generate ──────────────────── */
+/* All three sit in the dock head at the control height and never wrap. */
+.sound-head-btn {
+  flex: none;
+  height: var(--control-h);
+  padding-inline: var(--space-5);
+  white-space: nowrap;
+}
+
+/* Generate is the head's one accent verb. */
+.sound-head-btn.is-accent {
+  color: var(--accent-ink);
+  background: var(--accent-soft);
+}
+
+.sound-head-btn.is-accent:hover:not(:disabled),
+.sound-head-btn.is-accent[aria-pressed="true"] {
+  background: var(--accent-quiet);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+.sound-head-btn svg,
+.sound-bpm-chip svg {
+  width: 13px;
+  height: 13px;
+  flex: none;
+}
+
+.sound-bpm-chip {
+  flex: none;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: 28px;
+  padding: 0 var(--space-5);
+  font: var(--type-sm)/var(--leading-xs) var(--font-mono);
+  font-variant-numeric: var(--numeric);
+  color: var(--ink-1);
+  background: transparent;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-tab);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease);
+}
+
+.sound-bpm-chip svg {
+  color: var(--ink-2);
+}
+
+.sound-bpm-chip:hover,
+.sound-bpm-chip[aria-expanded="true"] {
+  background: var(--fill-hover);
+}
+
+.sound-bpm-chip.is-unset {
+  color: var(--ink-2);
+  border-style: dashed;
+}
+
+/* ── THE TEMPO POPOVER ───────────────────────────────────────────────── */
+.sound-tempo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  width: 296px;
+  padding: var(--space-6);
+}
+
+.sound-tempo-head,
+.sound-tempo-bpm,
+.sound-tempo-field,
+.sound-tempo-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.sound-tempo-head,
+.sound-tempo-field {
+  justify-content: space-between;
+}
+
+.sound-tempo-title {
+  font: var(--weight-semibold) var(--type-lg)/var(--leading-sm) var(--font-sans);
+  color: var(--ink-1);
+}
+
+.sound-tempo-scope,
+.sound-tempo-hint {
+  font: var(--type-sm)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-3);
+}
+
+.sound-tempo-input {
+  width: 84px;
+  height: 28px;
+  font-family: var(--font-mono);
+  font-variant-numeric: var(--numeric);
+  user-select: text;
+}
+
+.sound-tempo-unit {
+  font: var(--type-sm)/var(--leading-xs) var(--font-mono);
+  color: var(--ink-2);
+}
+
+.sound-tempo-tap {
+  margin-left: auto;
+}
+
+.sound-tempo-label {
+  display: flex;
+  flex-direction: column;
+  font: var(--type-md)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-1);
+}
+
+.sound-tempo-seg {
+  display: inline-flex;
+  gap: var(--space-1);
+  padding: var(--space-1);
+  background: var(--surface-well);
+  border-radius: var(--radius-tab);
+}
+
+.sound-tempo-seg-btn {
+  width: 26px;
+  height: 22px;
+  padding: 0;
+  font: var(--type-sm)/1 var(--font-mono);
+  color: var(--ink-2);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.sound-tempo-seg-btn:hover {
+  color: var(--ink-1);
+}
+
+.sound-tempo-seg-btn.is-on {
+  color: var(--ink-1);
+  background: var(--fill-selected);
+}
+
+.sound-tempo-rule {
+  height: 1px;
+  background: var(--line);
+}
+
+.sound-tempo-detect {
+  flex: 1;
+}
+
+.sound-tempo-warn {
+  margin: 0;
+  padding: var(--space-3) var(--space-4);
+  font: var(--type-sm)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-1);
+  background: color-mix(in srgb, var(--warn) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--warn) 33%, transparent);
+  border-radius: var(--radius-sm);
+}
+
+/* ── THE GENERATE DRAWER: the mixer's column, swapped ────────────────── */
+.sound-gen {
+  overflow: hidden;
+}
+
+.sound-gen-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  height: var(--panel-head-h);
+  padding: 0 var(--space-2) 0 var(--space-6);
+  border-bottom: 1px solid var(--line);
+}
+
+.sound-gen-glyph {
+  display: inline-flex;
+  color: var(--accent);
+}
+
+.sound-gen-glyph svg {
+  width: 14px;
+  height: 14px;
+}
+
+.sound-gen-title {
+  flex: 1;
+  font: var(--weight-semibold) var(--type-lg)/var(--leading-sm) var(--font-sans);
+  color: var(--ink-1);
+}
+
+.sound-gen-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  min-height: 0;
+  padding: var(--space-6);
+  overflow-y: auto;
+}
+
+.sound-gen-kinds {
+  flex: none;
+}
+
+.sound-gen-prompt {
+  flex: none;
+  resize: vertical;
+  min-height: 52px;
+  font: var(--type-md)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-1);
+  user-select: text;
+}
+
+.sound-gen-row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--space-5);
+}
+
+.sound-gen-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.sound-gen-row .sound-gen-field {
+  flex: 1;
+}
+
+.sound-gen-label {
+  font: var(--weight-semibold) var(--type-micro)/var(--leading-xs) var(--font-sans);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+.sound-gen-select {
+  width: 100%;
+}
+
+.sound-gen-seconds {
+  font-family: var(--font-mono);
+  font-variant-numeric: var(--numeric);
+  user-select: text;
+}
+
+.sound-gen-check {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: var(--control-h);
+  font: var(--type-md)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-2);
+  cursor: pointer;
+}
+
+.sound-gen-check input {
+  margin: 0;
+  accent-color: var(--accent);
+}
+
+.sound-gen-price {
+  font: var(--type-sm)/var(--leading-xs) var(--font-mono);
+  font-variant-numeric: var(--numeric);
+  color: var(--ink-3);
+}
+
+/* No workspace key yet: where an Owner or Admin adds one. */
+.sound-gen-key-link {
+  color: var(--accent-ink);
+  text-decoration: none;
+  border-radius: var(--radius-xs);
+}
+
+.sound-gen-key-link:hover {
+  text-decoration: underline;
+}
+
+.sound-gen-key-link:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.sound-gen-go {
+  flex: none;
+  width: 100%;
+}
+
+.sound-gen-error {
+  margin: 0;
+  padding: var(--space-3) var(--space-4);
+  font: var(--type-sm)/var(--leading-xs) var(--font-sans);
+  color: var(--danger-ink);
+  background: color-mix(in srgb, var(--danger) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--danger) 33%, transparent);
+  border-radius: var(--radius-sm);
+  user-select: text;
+}
+
+.sound-gen-take {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-5);
+  background: var(--surface-secondary);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+}
+
+.sound-gen-take-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--weight-medium) var(--type-md)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-1);
+}
+
+.sound-gen-audio {
+  width: 100%;
+  height: 32px;
+}
+
+.sound-gen-take-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+/* One take: its name, its player and its Add, the kept one first. */
+.sound-gen-take-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.sound-gen-take-row + .sound-gen-take-row {
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--line);
+}
+
+/* Why the kept take was kept, and the tone check: measured, never heard. */
+.sound-gen-why {
+  margin: 0;
+  font: var(--type-sm)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-2);
+  user-select: text;
+}
+
+.sound-gen-take-actions .btn:last-child {
+  flex: 1;
+}
+
+.sound-gen-recent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.sound-gen-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sound-gen-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: var(--control-h);
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.sound-gen-item-kind {
+  flex: none;
+  font: var(--type-micro)/var(--leading-xs) var(--font-mono);
+  color: var(--ink-3);
+}
+
+.sound-gen-item-prompt {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--type-md)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-2);
+}
+
+.sound-gen-item-add {
+  flex: none;
+}