/* [project]/packages/web/app/styles/base.css [app-client] (css) */
:root {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --bg: #090b0f;
  --ink: #d8dee9;
  --ink-strong: #f4f7fb;
  --muted: #98a4b5;
  --muted-strong: #bac3d1;
  --line: #2c3545;
  --line-strong: #3a4659;
  --panel: #11151c;
  --panel-raised: #151a23;
  --panel-soft: #1b2130;
  --field: #080a0e;
  --field-disabled: #151a23;
  --accent: #2dd4bf;
  --accent-ink: #061312;
  --accent-soft: #2dd4bf24;
  --accent-border: #5eead47a;
  --blue: #93c5fd;
  --blue-soft: #3b82f629;
  --blue-border: #93c5fd73;
  --amber: #fbbf24;
  --amber-soft: #f59e0b2b;
  --amber-border: #fbbf2480;
  --violet: #c4b5fd;
  --violet-soft: #8b5cf626;
  --violet-border: #c4b5fd6b;
  --danger: #fca5a5;
  --danger-soft: #ef44442b;
  --danger-border: #fca5a580;
  --shadow-soft: 0 8px 22px #00000038;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--ink);
  letter-spacing: 0;
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
}

button, input, textarea, select {
  font: inherit;
}

audio {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

::selection {
  color: var(--ink-strong);
  background: #2dd4bf42;
}

.app-shell {
  min-height: 100vh;
  padding: 22px;
}

.app-shell:has(.stage-menu) {
  padding-top: 62px;
}

.page-header {
  grid-template-columns: minmax(280px, 1fr) minmax(340px, 620px);
  align-items: end;
  gap: 16px;
  margin: 18px 0 14px;
  display: grid;
}

.eyebrow {
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
}

h1, h2, h3, p {
  margin: 0;
}

h1 {
  font-size: 28px;
  line-height: 1.1;
}

.status-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.metric, .panel, .audio-strategy-panel, .strategy-generation-panel, .stage-menu {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  border-radius: 8px;
}

.timeline-sync-indicator {
  border-left: 1px solid var(--accent-border);
  z-index: 12;
  flex: 0 0 58px;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  margin-left: auto;
  padding: 0 8px;
  display: flex;
  position: relative;
}

.timeline-sync-dot {
  appearance: none;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
}

.timeline-sync-dot > span {
  background: #42d392;
  border: 2px solid #42d39247;
  border-radius: 999px;
  width: 10px;
  height: 10px;
  display: block;
  box-shadow: 0 0 0 4px #42d3921f;
}

.timeline-sync-dot.checking > span, .timeline-sync-dot.updating > span {
  background: #5ea4ff;
  border-color: #5ea4ff4d;
  animation: 1.2s ease-in-out infinite timeline-sync-pulse;
  box-shadow: 0 0 0 4px #5ea4ff1f;
}

.timeline-sync-dot.update-available > span, .timeline-sync-dot.offline > span {
  background: #f2b84b;
  border-color: #f2b84b4d;
  animation: 1.8s ease-in-out infinite timeline-sync-pulse;
  box-shadow: 0 0 0 4px #f2b84b1f;
}

.timeline-sync-dot.failed > span {
  background: #ff6577;
  border-color: #ff657752;
  animation: .8s steps(2, end) infinite timeline-sync-blink;
  box-shadow: 0 0 0 4px #ff657721;
}

.timeline-sync-popover {
  color: #eef2f9;
  z-index: 80;
  background: #151922;
  border: 1px solid #343b4b;
  border-radius: 12px;
  gap: 10px;
  width: min(360px, 100vw - 24px);
  padding: 14px;
  display: grid;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  box-shadow: 0 18px 48px #00000073;
}

.timeline-sync-popover-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.timeline-sync-popover-heading > div {
  gap: 3px;
  display: grid;
}

.timeline-sync-popover-actions button, .timeline-sync-dismiss {
  color: inherit;
  cursor: pointer;
  background: #222836;
  border: 1px solid #3a4355;
  border-radius: 7px;
  padding: 6px 9px;
}

.timeline-sync-popover p {
  color: #cbd3e1;
  margin: 0;
  line-height: 1.45;
}

.timeline-sync-popover > small, .timeline-sync-popover-heading small {
  color: #8f9bad;
}

.timeline-sync-popover-actions {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.timeline-sync-popover-actions .danger {
  color: #ffb4bd;
  border-color: #8d3c49;
}

.timeline-sync-dismiss {
  background: none;
  justify-self: start;
}

@keyframes timeline-sync-pulse {
  0%, 100% {
    opacity: .55;
    transform: scale(.86);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes timeline-sync-blink {
  50% {
    opacity: .25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-sync-dot > span {
    animation: none !important;
  }
}

.metric {
  min-width: 0;
  padding: 10px 12px;
}

.metric span, .label {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  display: block;
}

.metric strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: 15px;
  display: block;
  overflow: hidden;
}

.workbench {
  align-items: start;
  gap: 14px;
  display: grid;
}

.workbench-body {
  grid-template-columns: auto 260px minmax(360px, 1fr);
  align-items: start;
  gap: 14px;
  min-width: 0;
  display: grid;
}

.workbench-body.stage-content-only {
  grid-template-columns: auto minmax(0, 1fr);
}

.project-browser-layout {
  grid-template-columns: minmax(360px, 1fr) 340px;
  align-items: start;
  gap: 14px;
  display: grid;
}

.stage-menu, .audio-strategy-panel, .strategy-generation-panel, .panel {
  padding: 14px;
}

.stage-menu {
  top: 0;
  right: 0;
  left: var(--project-task-sidebar-effective-width, 0px);
  z-index: 100;
  border: 0;
  border-bottom: 1px solid var(--accent-border);
  background: #0a181bfb;
  border-radius: 0;
  width: auto;
  min-height: 52px;
  padding: 0;
  display: flex;
  position: fixed;
  overflow: visible;
  box-shadow: 0 8px 26px #0000004d;
}

.workflow-context-project {
  flex: 1;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 7px 16px;
  display: grid;
}

.workflow-context-project small {
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.workflow-context-project strong {
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
}

.project-target-resolution-control {
  flex: none;
  display: flex;
  position: relative;
}

.project-target-resolution-trigger {
  border: 0;
  border-left: 1px solid var(--accent-border);
  width: 196px;
  min-height: 48px;
  color: var(--ink-strong);
  cursor: pointer;
  text-align: left;
  background: none;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  display: grid;
}

.project-target-resolution-trigger:hover, .project-target-resolution-trigger[aria-expanded="true"] {
  background: #102828fa;
}

.project-target-resolution-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.project-target-resolution-trigger > span:first-child {
  gap: 1px;
  min-width: 0;
  display: grid;
}

.project-target-resolution-trigger small {
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.project-target-resolution-trigger strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  overflow: hidden;
}

.project-target-resolution-ratio {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 800;
}

.workflow-context-menu.project-target-resolution-menu {
  width: 392px;
  right: 0;
}

.project-target-resolution-menu-item {
  grid-template-columns: 26px minmax(0, 1fr);
}

.project-target-resolution-instruction, .project-target-resolution-error, .project-target-resolution-feedback {
  color: var(--muted-strong);
  border-radius: 7px;
  margin: 0;
  padding: 10px;
  font-size: 11px;
  line-height: 1.45;
}

.project-target-resolution-instruction {
  border: 1px dashed var(--line-strong);
}

.project-target-resolution-error {
  color: var(--bad);
}

.project-target-resolution-feedback {
  color: var(--good);
}

.workflow-context-trigger {
  border: 0;
  border-left: 1px solid var(--accent-border);
  width: 252px;
  min-height: 48px;
  color: var(--ink-strong);
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 0;
  flex: 0 0 252px;
  grid-template-columns: 18px 26px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  display: grid;
}

.workflow-context-trigger:hover, .workflow-context-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  background: #102828fa;
}

.workflow-context-trigger:focus-visible, .workflow-context-menu-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.workflow-context-icon {
  gap: 3px;
  display: grid;
}

.workflow-context-icon i {
  background: var(--muted-strong);
  border-radius: 999px;
  width: 15px;
  height: 2px;
  display: block;
}

.workflow-context-current {
  gap: 1px;
  min-width: 0;
  display: grid;
}

.workflow-context-current small {
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.workflow-context-current strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  overflow: hidden;
}

.workflow-context-chevron {
  color: var(--muted-strong);
  font-size: 18px;
  line-height: 1;
  transition: transform .14s;
}

.workflow-context-chevron.open {
  transform: rotate(180deg);
}

.workflow-context-menu {
  border: 1px solid var(--line-strong);
  background: #090d14fc;
  border-radius: 10px;
  gap: 4px;
  width: 264px;
  padding: 8px;
  display: grid;
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  box-shadow: 0 22px 58px #00000094;
}

.workflow-context-menu.pointer-positioned {
  position: fixed;
  right: auto;
}

.workflow-context-menu-heading {
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 6px 7px;
  display: flex;
}

.workflow-context-menu-heading span {
  color: var(--ink-strong);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 900;
}

.workflow-context-menu-heading small, .workflow-context-menu-hint {
  color: var(--muted);
  font-size: 9px;
}

.workflow-context-menu-item {
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 7px;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  display: grid;
}

.workflow-context-menu-item:hover {
  border-color: var(--line-strong);
  background: var(--panel-soft);
}

.workflow-context-menu-item.current {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.workflow-context-menu-item > span:nth-child(2) {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.workflow-context-menu-item strong {
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.workflow-context-menu-item small {
  color: var(--muted);
  font-size: 9px;
}

.workflow-context-menu-symbol, .workflow-context-check {
  color: var(--accent);
  text-align: center;
  font-size: 15px;
  font-weight: 900;
}

.workflow-context-menu-separator {
  background: var(--line);
  height: 1px;
  margin: 3px 4px;
}

.workflow-context-menu-hint {
  padding: 6px 6px 2px;
  line-height: 1.35;
  display: block;
}

.sidebar-stack {
  gap: 14px;
  display: grid;
}

.stage-index {
  background: var(--line);
  width: 24px;
  height: 24px;
  color: var(--muted-strong);
  border-radius: 50%;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.workflow-context-trigger .stage-index, .workflow-context-menu-item.current .stage-index {
  background: var(--accent);
  color: var(--accent-ink);
}

/* [project]/packages/web/app/styles/stage-config.css [app-client] (css) */
.stage-config-panel {
  gap: 14px;
  display: grid;
}

.stage-config-layout {
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr);
  align-items: start;
  gap: 14px;
  display: grid;
}

.stage-config-presets {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  display: grid;
}

.stage-config-preset {
  border: 1px solid var(--line);
  min-height: 140px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  background: #141a27d1;
  border-radius: 10px;
  align-content: start;
  gap: 6px;
  padding: 12px;
  display: grid;
}

.stage-config-preset:hover {
  border-color: var(--line-strong);
  background: #1b2130f5;
}

.stage-config-preset.selected {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px #2dd4bf29;
}

.stage-config-preset strong {
  color: var(--ink-strong);
  font-size: 14px;
  line-height: 1.25;
}

.stage-config-preset small, .stage-config-preset em, .stage-config-preset span {
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.stage-config-preset small, .stage-config-preset em {
  color: var(--muted);
}

.stage-config-preset span {
  color: var(--accent);
  margin-top: auto;
}

.stage-config-custom {
  border: 1px solid var(--line);
  background: #141a27bd;
  border-radius: 10px;
  gap: 12px;
  padding: 14px;
  display: grid;
}

.stage-config-custom .panel-title {
  margin-bottom: 0;
}

.stage-config-custom .secondary-action.active {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}

.stage-config-custom-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.stage-config-custom-grid label {
  gap: 6px;
  display: grid;
}

.stage-config-custom-grid input {
  border: 1px solid var(--line);
  background: var(--field);
  width: 100%;
  color: var(--ink);
  border-radius: 8px;
  padding: 9px 10px;
}

.stage-config-summary, .stage-config-actions {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.stage-config-actions .copy {
  max-width: 560px;
}

/* [project]/packages/web/app/styles/workbench-shared.css [app-client] (css) */
.audio-strategy-panel {
  align-content: start;
  gap: 10px;
  display: grid;
}

.strategy-generation-panel {
  align-content: start;
  gap: 12px;
  display: grid;
}

.strategy-generation-panel strong {
  color: var(--ink-strong);
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.2;
  display: block;
}

.strategy-generation-panel small {
  color: var(--muted);
  margin-top: 4px;
  font-size: 11px;
  font-weight: 850;
  display: block;
}

.strategy-generation-panel .secondary-action {
  justify-content: center;
  width: 100%;
}

.manual-strategy-form {
  border-top: 1px solid var(--line);
  gap: 8px;
  padding-top: 12px;
  display: grid;
}

.manual-strategy-form label {
  gap: 6px;
  display: grid;
}

.manual-strategy-form input {
  border: 1px solid var(--line);
  background: var(--field);
  width: 100%;
  color: var(--ink);
  border-radius: 8px;
  padding: 9px 10px;
}

.audio-strategy-panel .panel-title {
  margin-bottom: 2px;
}

.audio-strategy-output-list {
  gap: 7px;
  display: grid;
}

.audio-strategy-output {
  border: 1px solid var(--line);
  width: 100%;
  color: var(--ink);
  text-align: left;
  background: #1b2130bd;
  border-radius: 7px;
  gap: 7px;
  padding: 9px;
  display: grid;
}

.audio-strategy-output:hover {
  border-color: var(--line-strong);
  background: #1b2130f5;
}

.audio-strategy-output.current {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px #2dd4bf29;
}

.audio-strategy-output-main {
  width: 100%;
  color: inherit;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  gap: 7px;
  padding: 0;
  display: grid;
}

.audio-strategy-output-main:focus-visible, .audio-strategy-delete:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.audio-strategy-output-head, .audio-strategy-output-meta, .audio-strategy-output-generated, .audio-strategy-output-foot {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.audio-strategy-output-head strong {
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.2;
  overflow: hidden;
}

.audio-strategy-output-head em {
  border: 1px solid var(--accent-border);
  color: var(--accent);
  text-transform: uppercase;
  border-radius: 999px;
  flex: none;
  padding: 2px 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.audio-strategy-output-meta small, .audio-strategy-output-generated small, .audio-strategy-output-foot small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
}

.audio-strategy-output-meta small:first-child {
  color: var(--muted-strong);
}

.audio-strategy-output-generated small {
  color: var(--accent);
}

.audio-strategy-delete {
  color: #fca5a5;
  cursor: pointer;
  text-transform: uppercase;
  background: #7f1d1d2e;
  border: 1px solid #f8717147;
  border-radius: 999px;
  justify-self: end;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 900;
}

.audio-strategy-delete:hover:not(:disabled) {
  background: #7f1d1d4d;
  border-color: #f8717185;
}

.audio-strategy-delete:disabled {
  opacity: .58;
  cursor: progress;
}

.panel-stack {
  gap: 14px;
  min-width: 0;
  display: grid;
}

.app-shell:has(.project-task-sidebar-shell) {
  --project-task-sidebar-effective-width: var(--project-task-sidebar-dock-width, 320px);
}

.app-shell:has(.project-task-sidebar-shell) .page-header {
  margin-left: calc(var(--project-task-sidebar-effective-width) - 8px);
}

.app-shell:has(.project-task-sidebar-shell) .stage-menu {
  right: 0;
  left: var(--project-task-sidebar-effective-width);
  width: auto;
}

.project-task-sidebar-dock-space {
  width: var(--project-task-sidebar-effective-width, var(--project-task-sidebar-width, 320px));
  min-width: 240px;
  height: 1px;
  transition: width .16s;
}

.project-task-sidebar-dock-space.is-collapsed {
  width: 44px;
  min-width: 44px;
}

.project-task-sidebar-shell {
  z-index: 110;
  width: var(--project-task-sidebar-width, 320px);
  isolation: isolate;
  background: #11151c;
  min-width: 240px;
  height: auto;
  transition: width .16s;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}

.project-task-sidebar-shell.is-collapsed {
  width: 44px;
  min-width: 44px;
}

.project-task-sidebar-dock-space.is-resizing, .project-task-sidebar-shell.is-resizing {
  -webkit-user-select: none;
  user-select: none;
  transition: none;
}

.project-task-sidebar {
  border: 1px solid var(--line);
  background: #11151c;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  grid-template-rows: auto 1fr;
  height: 100%;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 8px 0 22px #00000038;
}

.project-task-sidebar-header {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  display: flex;
}

.project-task-sidebar-header h2 {
  color: var(--ink-strong);
  align-items: center;
  gap: 7px;
  font-size: 17px;
  display: flex;
}

.project-task-sidebar-header h2 span, .project-task-group h3 span {
  border: 1px solid var(--line-strong);
  min-width: 22px;
  height: 22px;
  color: var(--muted-strong);
  border-radius: 999px;
  place-items: center;
  font-size: 11px;
  display: inline-grid;
}

.project-task-header-actions {
  align-items: center;
  gap: 7px;
  display: flex;
}

.project-task-header-actions button {
  border: 1px solid var(--line-strong);
  background: var(--panel-soft);
  width: 30px;
  height: 30px;
  color: var(--ink-strong);
  cursor: pointer;
  border-radius: 6px;
  place-items: center;
  font-size: 22px;
  display: grid;
}

.project-task-connection {
  color: var(--muted);
  text-transform: uppercase;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.project-task-connection:before {
  background: var(--muted);
  content: "";
  border-radius: 999px;
  width: 7px;
  height: 7px;
}

.project-task-connection.live:before {
  background: var(--accent);
  box-shadow: 0 0 8px #2dd4bfb3;
}

.project-task-connection.reconnecting:before, .project-task-connection.connecting:before, .project-task-connection.replaying:before, .project-task-connection.resyncing:before {
  background: var(--amber);
}

.project-task-realtime-diagnostics {
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
  padding: .35rem 1rem 0;
  font-size: .7rem;
}

.project-task-live-region {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.project-task-sidebar-body {
  scrollbar-gutter: stable;
  padding: 10px;
  overflow: auto;
}

.project-task-diagnostics {
  background: #0f172a85;
  border: 1px solid #fbbf2438;
  border-radius: 10px;
  padding: 9px;
}

.project-task-diagnostic-list {
  gap: 7px;
  display: grid;
}

.project-task-diagnostic {
  background: #0206178a;
  border-left: 3px solid #64748b;
  gap: 3px;
  padding: 7px 8px;
  display: grid;
}

.project-task-diagnostic.level-warn {
  border-left-color: #f59e0b;
}

.project-task-diagnostic.level-error {
  border-left-color: #fb7185;
}

.project-task-diagnostic strong {
  color: var(--ink-strong);
  font-size: 11px;
  line-height: 1.35;
}

.project-task-diagnostic small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.project-task-empty {
  color: var(--muted);
  text-align: center;
  gap: 5px;
  padding: 24px 12px;
  display: grid;
}

.project-task-empty strong {
  color: var(--muted-strong);
}

.project-task-group + .project-task-group {
  margin-top: 12px;
}

.project-task-group h3 {
  color: var(--muted-strong);
  letter-spacing: .06em;
  text-transform: uppercase;
  align-items: center;
  gap: 7px;
  margin: 0 2px 5px;
  font-size: 11px;
  display: flex;
}

.project-task-list {
  gap: 5px;
  display: grid;
}

.project-task-row {
  border: 1px solid var(--line);
  background: var(--panel-raised);
  border-radius: 7px;
}

.project-task-row.is-stalled, .project-task-row.status-failed, .project-task-row.status-interrupted {
  border-color: var(--danger-border);
  background: linear-gradient(135deg, var(--danger-soft), var(--panel-raised) 55%);
}

.project-task-row summary {
  cursor: pointer;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: start;
  gap: 5px 7px;
  padding: 8px 9px;
  list-style: none;
  display: grid;
}

.project-task-row summary::-webkit-details-marker {
  display: none;
}

.project-task-row summary:focus-visible, .project-task-rail:focus-visible, .project-task-resize-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.project-task-row-heading {
  grid-column: 2;
  gap: 1px;
  min-width: 0;
  display: grid;
}

.project-task-row-heading strong, .project-task-row-heading small, .project-task-progress-copy {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.project-task-row-heading strong {
  color: var(--ink-strong);
  font-size: 13px;
  line-height: 1.2;
}

.project-task-row-heading small, .project-task-progress-copy {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.project-task-state-indicator {
  background: var(--muted);
  border-radius: 999px;
  grid-area: 1 / 1;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  box-shadow: 0 0 0 2px #94a3b814;
}

.status-running .project-task-state-indicator, .status-completed .project-task-state-indicator {
  background: var(--accent);
  box-shadow: 0 0 7px #2dd4bf75;
}

.status-queued .project-task-state-indicator, .status-waiting .project-task-state-indicator {
  background: var(--amber);
  box-shadow: 0 0 7px #f59e0b6b;
}

.is-stalled .project-task-state-indicator, .status-failed .project-task-state-indicator, .status-interrupted .project-task-state-indicator, .status-cancelled .project-task-state-indicator {
  background: var(--danger);
  box-shadow: 0 0 7px color-mix(in srgb, var(--danger) 48%, transparent);
}

.project-task-elapsed {
  color: var(--muted);
  white-space: nowrap;
  grid-area: 1 / 3;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  line-height: 1.2;
  display: flex;
}

.project-task-disclosure {
  color: var(--muted-strong);
  font-size: 15px;
  line-height: .8;
  transition: transform .12s;
  transform: rotate(0);
}

.project-task-row[open] .project-task-disclosure {
  transform: rotate(90deg);
}

.project-task-progress {
  background: #ffffff14;
  border-radius: 999px;
  grid-column: 2 / 4;
  height: 4px;
  position: relative;
  overflow: hidden;
}

.project-task-progress span {
  border-radius: inherit;
  background: var(--accent);
  position: absolute;
  inset: 0 auto 0 0;
}

.project-task-progress.estimated span {
  background: var(--blue);
}

.project-task-progress.indeterminate span {
  background: var(--violet);
  animation: 1.4s ease-in-out infinite alternate project-task-indeterminate;
}

.project-task-child-summary {
  color: var(--muted-strong);
  grid-column: 2 / 4;
  font-size: 10px;
  font-weight: 750;
}

.project-task-progress-copy {
  grid-column: 2 / 4;
}

@keyframes project-task-indeterminate {
  from {
    transform: translateX(-75%);
  }

  to {
    transform: translateX(250%);
  }
}

.project-task-detail {
  border-top: 1px solid var(--line);
  gap: 9px;
  padding: 10px;
  display: grid;
}

.project-task-detail-message {
  color: var(--muted-strong);
  text-overflow: ellipsis;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
}

.project-task-current-activity {
  border-left: 2px solid var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  gap: 3px;
  padding: 7px 9px;
  display: grid;
}

.project-task-current-activity span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
}

.project-task-current-activity strong {
  color: var(--muted-strong);
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.4;
}

.project-task-provider-telemetry {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, var(--panel-raised));
  border-radius: 6px;
  gap: 8px;
  padding: 8px;
  display: grid;
}

.project-task-provider-telemetry > header, .project-task-chunk-summary > div {
  gap: 2px;
  display: grid;
}

.project-task-provider-telemetry > header strong, .project-task-chunk-summary strong {
  color: var(--ink-strong);
  font-size: 11px;
}

.project-task-provider-telemetry > header span, .project-task-chunk-summary span, .project-task-provider-telemetry > p {
  color: var(--muted);
  margin: 0;
  font-size: 9px;
  line-height: 1.4;
}

.project-task-chunk-summary {
  gap: 6px;
  display: grid;
}

.project-task-chunk-track, .project-task-resource-grid i {
  background: #ffffff17;
  border-radius: 999px;
  height: 4px;
  display: block;
  position: relative;
  overflow: hidden;
}

.project-task-chunk-track i, .project-task-resource-grid i b {
  border-radius: inherit;
  background: var(--accent);
  position: absolute;
  inset: 0 auto 0 0;
}

.project-task-resource-grid {
  gap: 6px;
  display: grid;
}

.project-task-resource-grid > div {
  gap: 3px;
  display: grid;
}

.project-task-resource-grid > div > span {
  min-width: 0;
  color: var(--muted-strong);
  justify-content: space-between;
  gap: 6px;
  font-size: 9px;
  display: flex;
}

.project-task-resource-grid small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.project-task-resource-grid p, .project-task-resource-warning, .project-task-cancellation-state {
  color: var(--muted-strong);
  margin: 0;
  font-size: 9px;
}

.project-task-resource-warning {
  color: var(--amber);
}

.project-task-cancel-confirmation {
  border: 1px solid var(--danger-border);
  background: var(--danger-soft);
  border-radius: 7px;
  gap: 7px;
  padding: 9px;
  display: grid;
}

.project-task-cancel-confirmation strong {
  color: var(--ink-strong);
  font-size: 11px;
}

.project-task-cancel-confirmation p {
  color: var(--muted-strong);
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
}

.project-task-cancel-confirmation > div {
  justify-content: flex-end;
  gap: 6px;
  display: flex;
}

.project-task-phase-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.project-task-phase-list li {
  min-width: 0;
  color: var(--muted);
  text-align: center;
  justify-items: center;
  gap: 4px;
  font-size: 8px;
  display: grid;
}

.project-task-phase-list li > span {
  background: var(--line-strong);
  width: 100%;
  height: 3px;
}

.project-task-phase-list li.is-completed > span {
  background: var(--success);
}

.project-task-phase-list li.is-current {
  color: var(--ink-strong);
}

.project-task-phase-list li.is-current > span {
  background: var(--blue);
}

.project-task-phase-list strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.project-task-detail dl {
  gap: 5px;
  margin: 0;
  display: grid;
}

.project-task-detail dl div {
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  font-size: 10px;
  display: grid;
}

.project-task-detail dt {
  color: var(--muted);
}

.project-task-detail dd {
  color: var(--muted-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  overflow: hidden;
}

.project-task-error {
  border: 1px solid var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: 6px;
  padding: 8px;
  font-size: 11px;
  line-height: 1.45;
}

.project-task-children {
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.project-task-children li {
  border-left: 2px solid var(--line-strong);
  color: var(--muted-strong);
  background: #ffffff06;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  font-size: 10px;
  display: grid;
}

.project-task-children li.status-completed {
  border-left-color: var(--success);
}

.project-task-children li.status-failed, .project-task-children li.status-interrupted, .project-task-children li.status-cancelled {
  border-left-color: var(--danger);
}

.project-task-children span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.project-task-children small {
  color: var(--muted);
}

.project-task-actions {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.project-task-actions button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 800;
}

.project-task-cancel {
  border: 1px solid var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger);
  cursor: pointer;
  border-radius: 6px;
}

.project-task-retry {
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  cursor: pointer;
  border-radius: 6px;
}

.project-task-resize-handle {
  z-index: 2;
  cursor: ew-resize;
  width: 12px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -6px;
}

.project-task-resize-handle:after {
  background: var(--line-strong);
  content: "";
  border-radius: 999px;
  width: 2px;
  height: 54px;
  position: absolute;
  top: 42%;
  right: 4px;
}

.project-task-rail {
  border: 1px solid var(--line);
  background: var(--panel);
  width: 44px;
  height: 100%;
  color: var(--muted-strong);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  border-radius: 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 5px;
  display: flex;
}

.project-task-rail-count {
  border: 1px solid var(--line-strong);
  width: 26px;
  height: 26px;
  color: var(--ink-strong);
  border-radius: 999px;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  display: grid;
}

.project-task-rail-label {
  letter-spacing: .08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 900;
}

.project-task-rail-signal {
  background: var(--muted);
  border-radius: 999px;
  width: 8px;
  height: 8px;
}

.project-task-rail.is-running .project-task-rail-signal {
  background: var(--accent);
  box-shadow: 0 0 8px #2dd4bfcc;
}

.project-task-rail.has-warning .project-task-rail-signal {
  background: var(--danger);
  box-shadow: 0 0 8px #fca5a5cc;
}

@media (prefers-reduced-motion: reduce) {
  .project-task-sidebar-dock-space, .project-task-sidebar-shell {
    transition: none;
  }

  .project-task-progress.indeterminate span {
    animation: none;
    transform: none;
  }
}

.panel-title {
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  display: flex;
}

.panel-title h2 {
  font-size: 16px;
}

.copy {
  color: var(--muted-strong);
  line-height: 1.55;
}

.decision-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.decision-tile {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 8px;
  padding: 12px;
}

.decision-tile strong {
  margin-bottom: 5px;
  display: block;
}

.pill-row {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.pill {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted-strong);
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
}

.pill.audio {
  border-color: var(--blue-border);
  background: var(--blue-soft);
  color: var(--blue);
}

.pill.queue {
  border-color: var(--amber-border);
  background: var(--amber-soft);
  color: var(--amber);
}

.pill.review {
  border-color: var(--violet-border);
  background: var(--violet-soft);
  color: var(--violet);
}

.action-list {
  gap: 10px;
  display: grid;
}

.action-row {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}

.action-row strong {
  margin-bottom: 3px;
  display: block;
}

.runtime-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.runtime-stack, .service-list, .endpoint-list, .event-list, .project-form {
  gap: 9px;
  display: grid;
}

.project-list-scroll {
  overflow-x: auto;
}

.project-list {
  gap: 6px;
  min-width: 800px;
  display: grid;
}

.project-list-header, .project-row {
  grid-template-columns: minmax(220px, 1fr) 130px 170px 170px 90px;
  align-items: center;
  gap: 12px;
  display: grid;
}

.project-list-header {
  padding: 0 12px 5px;
}

.project-column-header {
  color: var(--muted-strong);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}

.project-column-header.sortable button {
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  display: inline-flex;
}

.project-column-header.sortable button:hover, .project-column-header.sortable button:focus-visible {
  color: var(--accent);
}

.project-sort-indicator {
  font-size: 10px;
}

.runtime-item, .endpoint-row, .event-row, .project-row {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 8px;
}

.runtime-item {
  min-width: 0;
  padding: 10px 11px;
}

.runtime-item span, .event-row span, .endpoint-row span, .project-row small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
  display: block;
  overflow: hidden;
}

.runtime-item strong {
  overflow-wrap: anywhere;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
  display: block;
}

.project-row {
  width: 100%;
  min-height: 58px;
  color: inherit;
  cursor: pointer;
  text-align: left;
  padding: 10px 12px;
}

.project-row:hover, .project-row.selected {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.project-row strong {
  margin-bottom: 3px;
  display: block;
}

.project-row time {
  color: var(--muted-strong);
  white-space: nowrap;
  font-size: 12px;
}

.project-name-cell {
  min-width: 0;
}

.stage-summary {
  gap: 11px;
  margin-bottom: 12px;
  display: grid;
}

.notice {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted-strong);
  border-radius: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  line-height: 1.5;
}

.notice.bad {
  border-color: var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger);
}

.project-form label {
  gap: 5px;
  display: grid;
}

.project-form input, .project-form textarea {
  border: 1px solid var(--line);
  background: var(--field);
  width: 100%;
  color: var(--ink);
  resize: vertical;
  border-radius: 8px;
  padding: 9px 10px;
}

.project-form input:focus, .project-form textarea:focus {
  outline-offset: 1px;
  border-color: var(--accent-border);
  outline: 2px solid #5eead438;
}

.project-form input[type="file"] {
  padding: 7px 8px;
}

.project-form input:disabled, .project-form textarea:disabled {
  background: var(--field-disabled);
  color: var(--muted);
}

.primary-action {
  border: 1px solid var(--accent-border);
  background: var(--accent);
  min-height: 38px;
  color: var(--accent-ink);
  cursor: pointer;
  border-radius: 8px;
  padding: 9px 12px;
  font-weight: 800;
}

.primary-action:disabled {
  border-color: var(--line);
  background: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.event-list {
  margin-top: 12px;
}

.event-row, .endpoint-row {
  padding: 10px 11px;
}

.event-row strong, .endpoint-row strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 3px;
  display: block;
  overflow: hidden;
}

.service-list {
  grid-template-columns: repeat(auto-fit, minmax(96px, max-content));
  margin: 10px 0;
}

/* [project]/packages/web/app/styles/stage-audio.css [app-client] (css) */
.autosave-status {
  color: var(--muted);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-right: auto;
  font-size: 12px;
  font-weight: 800;
}

.autosave-status.saving, .autosave-status.pending {
  color: var(--accent);
}

.autosave-status.error {
  color: var(--danger);
}

.generate-audio-footer {
  border-top: 1px solid var(--line);
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
}

.audio-generation-setup, .import-project-audio-panel, .manual-chunk-upload-panel, .strategy-workbench {
  background: #0f172a6b;
  border: 1px solid #5eead438;
  border-radius: 8px;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  display: grid;
}

.audio-generation-setup h3, .import-project-audio-panel h3, .manual-chunk-upload-panel h3, .strategy-workbench h3 {
  color: var(--ink-strong);
  margin: 2px 0 0;
  font-size: 16px;
}

.audio-generation-setup label, .import-project-audio-panel label, .manual-chunk-upload-panel label, .strategy-workbench label, .voice-config-panel {
  gap: 7px;
  display: grid;
}

.audio-generation-setup input, .audio-generation-setup select, .audio-generation-setup textarea, .import-project-audio-panel input, .manual-chunk-upload-panel input, .strategy-workbench input, .strategy-workbench select, .strategy-workbench textarea {
  border: 1px solid var(--line);
  background: var(--field);
  width: 100%;
  color: var(--ink);
  border-radius: 8px;
  padding: 9px 10px;
}

.import-project-audio-panel {
  background: #082f493d;
  border-color: #2dd4bf57;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  align-items: end;
}

.import-project-audio-panel > div:first-child {
  align-self: center;
}

.import-project-audio-panel > div:first-child span {
  color: var(--muted);
  margin-top: 4px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
  display: block;
}

.import-project-audio-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
}

.import-project-audio-actions .autosave-status {
  margin-right: auto;
}

.manual-chunk-upload-panel {
  background: #0f172a5c;
  border-color: #93c5fd47;
}

.manual-chunk-upload-list {
  gap: 8px;
  max-height: 430px;
  display: grid;
  overflow: auto;
}

.manual-chunk-upload-empty {
  background: #0206173d;
  border: 1px dashed #93c5fd57;
  border-radius: 8px;
  gap: 4px;
  padding: 12px;
  display: grid;
}

.manual-chunk-upload-empty strong {
  color: var(--ink-strong);
}

.manual-chunk-upload-empty small {
  color: var(--muted);
  font-weight: 780;
}

.manual-chunk-upload-row {
  border: 1px solid var(--line);
  background: #02061757;
  border-radius: 8px;
  grid-template-columns: minmax(160px, .65fr) minmax(260px, 1fr) max-content minmax(210px, .55fr);
  align-items: start;
  gap: 10px;
  padding: 10px;
  display: grid;
}

.manual-chunk-upload-row > div:first-child {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px 9px;
  min-width: 0;
  display: grid;
}

.manual-chunk-upload-row > div:first-child span {
  color: #bfdbfe;
  background: #93c5fd1a;
  border: 1px solid #93c5fd57;
  border-radius: 999px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-weight: 900;
  display: grid;
}

.manual-chunk-upload-row strong, .manual-chunk-upload-row small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.manual-chunk-upload-row strong {
  color: var(--ink-strong);
}

.manual-chunk-upload-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.manual-chunk-upload-row > div:first-child small {
  grid-column: 2;
}

.manual-chunk-upload-row audio {
  width: 100%;
}

.manual-chunk-transcript-controls {
  gap: 8px;
  min-width: 0;
  display: grid;
}

.manual-chunk-transcript-controls textarea {
  resize: vertical;
  min-height: 76px;
}

.manual-chunk-transcript-controls .inline-control {
  color: var(--muted);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}

.manual-chunk-transcript-controls .inline-control input {
  width: auto;
}

.manual-chunk-upload-row-status {
  align-items: center;
  display: flex;
}

.manual-chunk-upload-row-actions {
  align-items: center;
  gap: 8px;
  display: grid;
}

.manual-chunk-upload-row-actions .secondary-action {
  justify-self: start;
}

.manual-chunk-upload-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
}

.manual-chunk-upload-actions .autosave-status {
  margin-right: auto;
}

.voice-config-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.voice-settings-title-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.icon-toggle-action {
  width: 34px;
  height: 34px;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  background: #020617a3;
  border: 1px solid #2dd4bf7a;
  border-radius: 999px;
  place-items: center;
  padding: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  display: inline-grid;
}

.icon-toggle-action:hover:not(:disabled), .icon-toggle-action:focus-visible {
  color: var(--ink-strong);
  background: #14b8a624;
  border-color: #5eead4db;
}

.icon-toggle-action:disabled {
  cursor: not-allowed;
  opacity: .54;
}

.voice-config-panel {
  border: 1px solid var(--line);
  background: #02061757;
  border-radius: 8px;
  align-content: start;
  padding: 10px;
}

.voice-lock-actions {
  background: #02061766;
  border: 1px solid #2dd4bf3d;
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr) max-content;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: grid;
}

.voice-lock-actions strong {
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  display: block;
  overflow: hidden;
}

.voice-lock-actions small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
  display: block;
  overflow: hidden;
}

.voice-lock-actions audio {
  width: 100%;
}

.voice-upload-row {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  align-items: end;
  gap: 10px;
  display: grid;
}

.saved-voice-list {
  gap: 7px;
  display: grid;
}

.saved-voice-card, .fish-voice-card, .recent-fish-voice-card {
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  background: #02061757;
  border-radius: 8px;
}

.saved-voice-card {
  gap: 3px;
  padding: 9px 10px;
  display: grid;
}

.saved-voice-card.selected, .fish-voice-card.selected, .recent-fish-voice-card.selected {
  border-color: var(--accent-border);
  background: #2dd4bf1f;
  box-shadow: inset 0 0 0 1px #2dd4bf2e;
}

.saved-voice-card span, .saved-voice-card small, .fish-voice-card small, .recent-fish-voice-card small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.recent-fish-voices {
  gap: 7px;
  display: grid;
}

.recent-fish-voices-head {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.recent-fish-voices-head small {
  color: var(--muted);
}

.recent-fish-voice-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.recent-fish-voice-card {
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
  display: grid;
}

.recent-fish-voice-card strong {
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.voice-library-head, .fish-voice-search, .fish-voice-card {
  align-items: center;
  gap: 8px;
  display: flex;
}

.voice-library-head {
  justify-content: space-between;
}

.voice-library-head strong {
  color: var(--ink-strong);
  display: block;
}

.fish-voice-search input {
  min-width: 0;
}

.fish-voice-list {
  gap: 7px;
  max-height: 280px;
  padding-right: 2px;
  display: grid;
  overflow: auto;
}

.fish-voice-card {
  justify-content: space-between;
  padding: 8px;
}

.fish-voice-card > button:first-child {
  min-width: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  flex: 1;
  padding: 0;
  display: grid;
}

.fish-voice-card strong {
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.fish-voice-card .secondary-action {
  flex: none;
  min-height: 30px;
  padding: 6px 9px;
}

.fish-voice-preview {
  gap: 5px;
  display: grid;
}

.fish-voice-preview audio {
  width: 100%;
}

.voice-save-row {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
}

.fish-tag-row, .knob-grid {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.fish-tag-row span, .knob-grid span {
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--muted-strong);
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 800;
}

.strategy-temperature-control {
  flex: 1;
  gap: 6px;
  min-width: 220px;
  max-width: 420px;
  display: grid;
}

.strategy-temperature-control input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.strategy-analysis-grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
  gap: 12px;
  display: grid;
}

.strategy-detail-panel, .annotation-chunk-panel {
  border: 1px solid var(--line);
  background: #02061757;
  border-radius: 8px;
  padding: 12px;
}

.strategy-detail-copy {
  gap: 9px;
  display: grid;
}

.strategy-detail-copy p, .annotation-chunk-meta p {
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.strategy-detail-copy strong, .annotation-chunk-meta strong {
  color: var(--ink-strong);
  margin-bottom: 3px;
  display: block;
}

.strategy-global-knobs {
  background: #2dd4bf0f;
  border: 1px solid #2dd4bf38;
  border-radius: 8px;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  display: grid;
}

.strategy-global-knobs-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.strategy-global-knobs-head strong {
  color: var(--ink-strong);
  display: block;
}

.knob-rationale-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  display: grid;
}

.knob-rationale-grid article {
  border: 1px solid var(--line);
  background: var(--field);
  border-radius: 8px;
  padding: 9px;
}

.knob-rationale-grid strong, .knob-rationale-grid span {
  display: block;
}

.knob-rationale-grid strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.knob-rationale-grid span {
  color: var(--accent);
  margin-top: 2px;
  font-size: 14px;
  font-weight: 900;
}

.knob-rationale-grid p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
}

.annotated-prompt-preview {
  border: 1px solid var(--line);
  max-height: 360px;
  color: var(--ink);
  white-space: pre-wrap;
  background: #020617;
  border-radius: 8px;
  margin: 0;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
  font-size: 12px;
  line-height: 1.55;
  overflow: auto;
}

.annotation-chunk-list {
  gap: 10px;
  display: grid;
}

.annotation-chunk-panel summary {
  cursor: pointer;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  display: grid;
}

.annotation-chunk-panel summary span {
  border: 1px solid var(--accent-border);
  width: 28px;
  height: 28px;
  color: var(--accent);
  background: #2dd4bf1f;
  border-radius: 999px;
  place-items: center;
  font-weight: 900;
  display: grid;
}

.annotation-chunk-panel summary strong {
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.annotation-chunk-panel summary small {
  color: var(--muted);
  font-weight: 800;
}

.annotation-chunk-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  display: grid;
}

.sentence-annotation-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  gap: 0;
  margin-top: 12px;
  display: grid;
  overflow: auto;
}

.sentence-annotation-table [role="row"] {
  grid-template-columns: minmax(90px, .55fr) minmax(260px, 1.7fr) minmax(110px, .65fr) minmax(220px, 1fr);
  display: grid;
}

.sentence-annotation-table [role="row"] + [role="row"] {
  border-top: 1px solid var(--line);
}

.sentence-annotation-table [role="columnheader"], .sentence-annotation-table [role="cell"] {
  min-width: 0;
  color: var(--muted);
  padding: 8px 9px;
  font-size: 12px;
  line-height: 1.35;
}

.sentence-annotation-table [role="columnheader"] {
  color: var(--muted-strong);
  text-transform: uppercase;
  background: #0f172ad6;
  font-weight: 900;
}

.sentence-annotation-table [role="cell"]:nth-child(2) {
  color: var(--ink);
}

.audio-generation-progress {
  background: linear-gradient(#2dd4bf1a, #0f172a33);
  border: 1px solid #5eead442;
  border-radius: 8px;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  display: grid;
}

.audio-generation-progress h3 {
  color: var(--ink-strong);
  margin: 2px 0 0;
  font-size: 16px;
}

.generation-progress-track {
  border: 1px solid var(--line);
  background: var(--field);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.generation-progress-track span {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #93c5fd);
  height: 100%;
  transition: width .28s;
  display: block;
  box-shadow: 0 0 18px #2dd4bf59;
}

.generation-progress-meta, .generation-event-row {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.generation-progress-meta {
  color: var(--muted-strong);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
}

.generation-event-list {
  gap: 6px;
  display: grid;
}

.generation-event-row {
  border: 1px solid var(--line);
  background: #0206176b;
  border-radius: 7px;
  padding: 8px 9px;
}

.generation-event-row span {
  color: var(--muted);
  flex: none;
  font-size: 12px;
}

.generation-event-row strong {
  color: var(--ink);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.chunking-notes {
  background: #3b82f614;
  border: 1px solid #93c5fd3d;
  border-radius: 8px;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  display: grid;
}

.chunking-notes .panel-title {
  margin-bottom: 0;
}

.chunking-notes h3 {
  margin-top: 2px;
  font-size: 15px;
}

.audio-redetection-review {
  background: #14b8a614;
  border: 1px solid #2dd4bf47;
  border-radius: 8px;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  display: grid;
}

.audio-redetection-header, .audio-redetection-row {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.audio-redetection-header .panel-title {
  margin-bottom: 0;
}

.audio-redetection-header h3 {
  margin-top: 2px;
  font-size: 15px;
}

.audio-redetection-list {
  gap: 8px;
  display: grid;
}

.audio-redetection-row {
  background: #080a0e8c;
  border: 1px solid #2c3545e6;
  border-radius: 7px;
  padding: 10px;
}

.audio-redetection-actions, .audio-redetection-footer-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.audio-redetection-row > div {
  min-width: 0;
}

.audio-redetection-row strong, .audio-redetection-row span {
  display: block;
}

.audio-redetection-row span, .audio-redetection-row p, .muted-copy {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.audio-redetection-row p {
  margin-top: 6px;
}

.video-notes-panel {
  background: #3b82f614;
  border: 1px solid #93c5fd3d;
  border-radius: 8px;
  gap: 10px;
  padding: 12px;
  display: grid;
}

.video-notes-panel .panel-title {
  margin-bottom: 0;
}

.video-notes-panel h3 {
  margin-top: 2px;
  font-size: 15px;
}

.video-notes-panel textarea {
  min-height: 220px;
  color: var(--ink-strong);
  resize: vertical;
  background: #080a0ed1;
  border: 1px solid #2c3545e6;
  border-radius: 7px;
  padding: 11px 12px;
  font: 13px / 1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
}

.chunking-note-list {
  gap: 8px;
  display: grid;
}

.chunking-note-row {
  background: #080a0ebd;
  border: 1px solid #2c3545e6;
  border-radius: 7px;
  gap: 8px;
  padding: 10px;
  display: grid;
}

.chunking-note-row > div {
  grid-template-columns: 28px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
  display: grid;
}

.chunking-note-row > div span {
  background: var(--blue-soft);
  width: 24px;
  height: 24px;
  color: var(--blue);
  border-radius: 50%;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  display: grid;
}

.chunking-note-row strong {
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.chunking-note-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.chunking-note-row p {
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.5;
}

.chunking-note-row ul {
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.chunking-note-row li {
  color: var(--blue);
  background: #3b82f61f;
  border: 1px solid #93c5fd47;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 850;
}

.section-list, .candidate-list, .voice-reference-list {
  gap: 10px;
  display: grid;
}

.form-row {
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
  display: grid;
}

.section-list, .candidate-list, .voice-reference-list {
  margin-top: 12px;
}

.section-row, .candidate-row, .voice-reference-row {
  border: 1px solid var(--line);
  background: var(--panel-raised);
  border-radius: 8px;
  padding: 10px 11px;
}

.section-row strong, .section-row span, .candidate-row strong, .candidate-row > div > span, .voice-reference-row strong, .voice-reference-row span, .voice-reference-row small {
  display: block;
}

.section-row span, .candidate-row > div > span, .voice-reference-row span, .voice-reference-row small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
}

.section-row p {
  color: var(--muted-strong);
  margin-top: 6px;
  line-height: 1.5;
}

.section-audio-attachment {
  background: #2dd4bf12;
  border: 1px solid #5eead43d;
  border-radius: 8px;
}

.section-audio-attachment strong, .section-audio-attachment span {
  display: block;
}

.section-audio-attachment span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.section-audio-attachment audio {
  width: min(100%, 520px);
  height: 34px;
}

.analysis-console {
  background: #071015;
  border: 1px solid #2dd4bf38;
  border-radius: 8px;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 18px 42px #00000047;
}

.analysis-console-header {
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  display: flex;
}

.analysis-console-header p {
  color: #cbd5e1;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 900;
}

.analysis-console-header h3 {
  color: var(--ink-strong);
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.2;
}

.analysis-console-header span, .analysis-console-header dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.analysis-console-header dl {
  border: 1px solid var(--line);
  background: #050a10b8;
  border-radius: 6px;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  min-width: min(100%, 300px);
  margin: 0;
  display: grid;
}

.analysis-console-header dl div {
  padding: 8px 10px;
}

.analysis-console-header dl div + div {
  border-left: 1px solid #2c3545cc;
}

.analysis-console-header dd {
  color: var(--ink-strong);
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 850;
}

.analysis-console-actions, .partial-signal-actions {
  align-items: center;
  gap: 12px;
  display: flex;
}

.analysis-console-actions {
  border: 1px solid var(--line);
  background: #050a108f;
  border-radius: 7px;
  justify-content: space-between;
  padding: 10px;
}

.partial-signal-actions .primary-action {
  min-height: 34px;
  padding: 8px 13px;
}

.partial-signal-progress {
  flex: 1;
  grid-template-columns: minmax(160px, 1fr) max-content minmax(180px, .7fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: grid;
}

.partial-signal-progress strong {
  color: var(--ink-strong);
  font-size: 12px;
  font-weight: 900;
}

.partial-signal-progress small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
}

.partial-signal-progress-track {
  background: #050a10bd;
  border: 1px solid #2dd4bf38;
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.partial-signal-progress-track span {
  border-radius: inherit;
  background: linear-gradient(90deg, #2dd4bfeb, #93c5fddb);
  height: 100%;
  transition: width .22s;
  display: block;
  box-shadow: 0 0 18px #2dd4bf47;
}

.analysis-scale-row, .analysis-legend, .analysis-tick-scale, .analysis-window-scale {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.analysis-scale-row {
  justify-content: space-between;
}

.analysis-legend span, .analysis-tick-scale span, .analysis-window-scale span {
  color: var(--muted);
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.analysis-legend i, .analysis-layer-panel i {
  border-radius: 999px;
  width: 8px;
  height: 8px;
  display: inline-block;
  box-shadow: 0 0 12px;
}

.analysis-tick-scale {
  justify-content: flex-end;
  margin-left: auto;
}

.analysis-window-scale {
  justify-content: flex-end;
  min-width: min(100%, 220px);
}

.analysis-window-scale input {
  width: 136px;
  accent-color: var(--accent);
}

.analysis-tick-scale button, .analysis-player button, .analysis-layer-panel button, .analysis-chunk-nav button {
  border: 1px solid var(--line);
  color: var(--muted-strong);
  cursor: pointer;
  background: #0a1118;
}

.analysis-tick-scale button {
  border-radius: 5px;
  min-width: 46px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 850;
}

.analysis-tick-scale button.active {
  color: var(--ink-strong);
  background: #2dd4bf47;
  border-color: #2dd4bfb3;
}

.analysis-stage {
  grid-template-columns: minmax(0, 1fr) 154px;
  align-items: start;
  gap: 10px;
  display: grid;
}

.analysis-plot-stack {
  gap: 8px;
  min-width: 0;
  display: grid;
}

.analysis-chart-frame {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: #071015;
  border: 1px solid #1f3040;
  border-radius: 7px;
  min-width: 0;
  overflow: hidden;
}

.analysis-chart-frame.is-panning {
  cursor: grabbing;
}

.analysis-chart-frame svg {
  width: 100%;
  height: auto;
  display: block;
}

.analysis-chunk-label-action {
  color: #5eead4;
  cursor: pointer;
  background: #2dd4bf24;
  border: 1px solid #2dd4bf73;
  border-radius: 999px;
  width: 100%;
  height: 22px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.analysis-chunk-label-action:disabled {
  color: #94a3b8bd;
  cursor: not-allowed;
  background: #0f172aad;
  border-color: #64748b6b;
}

.analysis-horizontal-scroll {
  grid-template-columns: max-content minmax(120px, 1fr) max-content;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
  display: grid;
}

.analysis-horizontal-scroll span {
  color: var(--muted);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 850;
}

.analysis-horizontal-scroll input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.analysis-horizontal-scroll input[type="range"]:disabled {
  opacity: .42;
}

.analysis-player {
  grid-template-columns: max-content max-content max-content max-content minmax(120px, 1fr) max-content;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  display: grid;
}

.analysis-player button {
  min-width: 34px;
  min-height: 32px;
  color: var(--ink-strong);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.analysis-player .analysis-play-toggle {
  min-width: 70px;
  color: var(--accent);
  background: #2dd4bf1f;
  border-color: #2dd4bf99;
}

.analysis-player span, .analysis-player strong {
  color: var(--muted-strong);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}

.analysis-player input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.analysis-layer-panel {
  border: 1px solid var(--line);
  background: #090f16e0;
  border-radius: 7px;
  align-content: start;
  gap: 7px;
  padding: 10px;
  display: grid;
}

.analysis-layer-panel strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.analysis-layer-panel button {
  color: var(--muted);
  text-align: left;
  background: none;
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 800;
  display: flex;
}

.analysis-layer-panel button span {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: inline-flex;
}

.analysis-layer-panel button b {
  border: 1px solid var(--line);
  background: #050a10;
  border-radius: 999px;
  width: 18px;
  height: 10px;
}

.analysis-layer-panel button.active {
  color: var(--ink-strong);
}

.analysis-layer-panel button.active b {
  background: var(--accent);
  border-color: #2dd4bfb3;
}

.analysis-layer-divider {
  background: #2c3545c2;
  height: 1px;
  margin: 3px 0;
  display: block;
}

.analysis-transcript-panel {
  border: 1px solid var(--line);
  background: #050a1094;
  border-radius: 7px;
  grid-template-columns: 178px minmax(0, 1fr);
  min-height: 168px;
  display: grid;
}

.analysis-chunk-nav {
  border-right: 1px solid var(--line);
  align-content: start;
  gap: 5px;
  padding: 9px;
  display: grid;
}

.analysis-chunk-nav strong {
  color: var(--ink-strong);
  margin-bottom: 4px;
  font-size: 12px;
}

.analysis-chunk-nav button {
  text-align: left;
  background: #0a1118a3;
  border: 1px solid #2c3545c7;
  border-radius: 5px;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 1px 6px;
  min-height: 42px;
  padding: 5px 6px;
  display: grid;
}

.analysis-chunk-nav button:hover {
  background: #0f1922e6;
  border-color: #5eead452;
}

.analysis-chunk-nav button.active {
  color: var(--ink-strong);
  background: #2dd4bf38;
  border-color: #2dd4bf9e;
}

.analysis-chunk-nav button span {
  color: var(--muted-strong);
  grid-row: span 2;
  font-weight: 900;
  line-height: 1;
}

.analysis-chunk-nav button em {
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-weight: 850;
  line-height: 1.15;
  overflow: hidden;
}

.analysis-chunk-nav button small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
}

.analysis-transcript-copy {
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px 18px 0;
  display: flex;
}

.analysis-tagged-transcript {
  align-content: start;
  gap: 12px;
  display: grid;
}

.analysis-tagged-line {
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  display: grid;
}

.analysis-tagged-line-tags {
  align-content: start;
  gap: 6px;
  min-height: 31px;
  display: grid;
}

.analysis-tag-chip {
  --tag-color: #64748b;
  border-left: 2px solid var(--tag-color);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tag-color) 20%, transparent), #090f1647);
  width: fit-content;
  max-width: 100%;
  color: var(--tag-color);
  border-radius: 5px;
  grid-template-columns: 7px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 7px;
  display: inline-grid;
}

.analysis-tag-chip i {
  background: var(--tag-color);
  width: 7px;
  height: 7px;
  box-shadow: 0 0 12px var(--tag-color);
  border-radius: 999px;
}

.analysis-tag-chip strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
}

.analysis-tag-placeholder {
  color: #94a3b847;
  font-size: 12px;
  font-weight: 900;
}

.analysis-emotion-tags {
  align-content: start;
  gap: 7px;
  display: grid;
}

.analysis-emotion-tag-line {
  --tag-color: #64748b;
  border-left: 2px solid var(--tag-color);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tag-color) 18%, transparent), #090f1661);
  width: fit-content;
  max-width: 100%;
  color: var(--muted-strong);
  border-radius: 5px;
  grid-template-columns: 9px max-content minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 6px 9px 6px 8px;
  display: grid;
}

.analysis-emotion-tags.empty .analysis-emotion-tag-line {
  --tag-color: #64748b;
  opacity: .74;
}

.analysis-emotion-tag-line i {
  background: var(--tag-color);
  width: 7px;
  height: 7px;
  box-shadow: 0 0 12px var(--tag-color);
  border-radius: 999px;
}

.analysis-emotion-tag-line strong {
  color: var(--tag-color);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
}

.analysis-emotion-tag-line span {
  color: #cbd5e1b8;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
}

.analysis-transcript-copy p {
  color: #cbd5e1;
  white-space: normal;
  flex: 1;
  margin: 0;
  font-size: 17px;
  line-height: 1.72;
}

.analysis-tagged-line p {
  flex: unset;
}

.analysis-transcript-copy p span {
  color: #cbd5e1ad;
  border-radius: 4px;
  padding: 1px;
  display: inline;
}

.analysis-transcript-copy p span.past {
  color: #cbd5e1e6;
}

.analysis-transcript-copy p span.active {
  color: #ecfeff;
  background: #2dd4bf6b;
  box-shadow: 0 0 0 1px #5eead438;
}

.analysis-transcript-footer {
  border-top: 1px solid var(--line);
  color: var(--muted-strong);
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
  margin: 16px -18px 0;
  font-size: 12px;
  font-weight: 850;
  display: grid;
}

/* [project]/packages/web/app/styles/overlays.css [app-client] (css) */
.modal-backdrop {
  z-index: 50;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #01060ab8;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.chunk-regeneration-modal {
  background: #071015;
  border: 1px solid #2dd4bf47;
  border-radius: 8px;
  gap: 16px;
  width: min(100%, 560px);
  padding: 18px;
  display: grid;
  box-shadow: 0 24px 80px #00000070;
}

.chunk-regeneration-modal h3 {
  color: var(--ink-strong);
  margin: 4px 0;
  font-size: 18px;
}

.chunk-regeneration-modal span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.chunk-regeneration-modal label {
  gap: 7px;
  display: grid;
}

.chunk-regeneration-modal textarea {
  resize: vertical;
  width: 100%;
}

.modal-actions {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.analysis-transcript-footer span {
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 10px 12px;
  overflow: hidden;
}

.analysis-transcript-footer span + span {
  border-left: 1px solid var(--line);
}

.analysis-hidden-audio {
  display: none;
}

.analysis-metrics {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  display: grid;
}

.analysis-metrics span {
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--muted-strong);
  border-radius: 7px;
  padding: 8px;
  font-weight: 800;
}

.section-audio-attachment {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  padding: 9px;
  display: grid;
}

.candidate-row {
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  align-items: center;
  gap: 10px;
  display: grid;
}

.voice-reference-row {
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px;
  display: grid;
}

.secondary-action {
  background: var(--field);
  min-height: 34px;
  color: var(--accent);
  cursor: pointer;
  border: 1px solid #5eead457;
  border-radius: 8px;
  padding: 7px 10px;
  font-weight: 800;
}

.secondary-action:disabled {
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.secondary-action.full-width {
  width: 100%;
}

.tiny-action {
  min-height: 26px;
  color: var(--accent);
  cursor: pointer;
  background: #0d121cf5;
  border: 1px solid #5eead447;
  border-radius: 7px;
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 850;
}

.tiny-action:disabled {
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.file-import {
  border: 1px dashed var(--line);
  background: var(--field);
  border-radius: 8px;
  padding: 8px;
}

.candidate-row audio, .voice-reference-row audio {
  width: min(100%, 320px);
  height: 34px;
  margin-top: 8px;
}

/* [project]/packages/web/app/styles/stage-storyboard.css [app-client] (css) */
:root {
  --storyboard-layer-status-bar: 150;
  --storyboard-layer-motion-library: 160;
  --storyboard-layer-motion-viewer: 170;
}

.vertical-storyboard-editor {
  gap: 12px;
  display: grid;
}

.storyboard-playback-workspace {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "content";
  align-items: start;
  gap: 12px;
  min-width: 0;
  display: grid;
}

.storyboard-playback-workspace-content {
  grid-area: content;
  min-width: 0;
}

.storyboard-playback-preview-stack {
  place-items: stretch stretch;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.storyboard-playback-media-frame {
  background: #000;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  position: relative;
  overflow: hidden;
}

.storyboard-preview-diagnostics {
  background: #080c12c7;
  border: 1px solid #64748b57;
  border-radius: 8px;
  overflow: hidden;
}

.storyboard-preview-diagnostics > header {
  min-height: 38px;
  color: var(--muted-strong);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 850;
  display: flex;
}

.storyboard-preview-diagnostics dl {
  background: #64748b2e;
  border-top: 1px solid #64748b3d;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  display: grid;
}

.storyboard-preview-diagnostics dl > div {
  background: #050a10f0;
  gap: 2px;
  padding: 8px 10px;
  display: grid;
}

.storyboard-preview-diagnostics dt, .storyboard-preview-diagnostics dd {
  margin: 0;
}

.storyboard-preview-diagnostics dt {
  color: var(--muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
}

.storyboard-preview-diagnostics dd {
  color: var(--ink-strong);
  font-size: 11px;
}

.storyboard-preview-diagnostics > small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 10px;
  font-size: 9px;
  display: block;
  overflow: hidden;
}

.storyboard-preview-diagnostics-empty {
  min-height: 150px;
  color: var(--muted-strong);
  text-align: center;
  border-top: 1px solid #64748b3d;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 18px;
  display: grid;
}

.storyboard-preview-diagnostics-empty small {
  max-width: 280px;
  color: var(--muted);
  line-height: 1.45;
}

.storyboard-live-operation-inspector {
  color: var(--ink-strong);
  background: #050c12eb;
  border: 1px solid #2dd4bf52;
  border-radius: 8px;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  display: grid;
}

.storyboard-live-operation-inspector > header, .storyboard-live-operation-detail > header, .storyboard-live-operation-list button, .storyboard-live-operation-waterfall li {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.storyboard-live-operation-inspector header div, .storyboard-live-operation-list button > span:first-child {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.storyboard-live-operation-inspector small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.storyboard-live-operation-filters {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  display: grid;
}

.storyboard-live-operation-filters input, .storyboard-live-operation-filters select {
  min-width: 0;
  color: var(--ink-strong);
  background: #07111a;
  border: 1px solid #64748b80;
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 10px;
}

.storyboard-live-operation-layout {
  gap: 8px;
  min-width: 0;
  display: grid;
}

.storyboard-live-operation-list, .storyboard-live-operation-waterfall {
  gap: 2px;
  max-height: 180px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  overflow: auto;
}

.storyboard-live-operation-list button {
  width: 100%;
  color: inherit;
  text-align: left;
  background: #0f172ab8;
  border: 1px solid #0000;
  border-radius: 5px;
  padding: 6px 7px;
}

.storyboard-live-operation-list button[aria-pressed="true"] {
  background: #0d948829;
  border-color: #2dd4bfb8;
}

.storyboard-live-operation-list .is-slow {
  color: #fbbf24;
}

.storyboard-live-operation-detail {
  border-top: 1px solid #64748b47;
  gap: 8px;
  min-width: 0;
  padding-top: 8px;
  display: grid;
}

.storyboard-live-operation-detail dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  display: grid;
}

.storyboard-live-operation-detail dl div {
  background: #0f172a99;
  min-width: 0;
  padding: 5px;
}

.storyboard-live-operation-detail dt, .storyboard-live-operation-detail dd {
  text-overflow: ellipsis;
  margin: 0;
  font-size: 9px;
  overflow: hidden;
}

.storyboard-live-operation-waterfall li {
  background: #0f172a85;
  padding: 4px 5px;
  font-size: 9px;
}

.storyboard-live-operation-waterfall i {
  color: #5eead4;
  margin-right: 6px;
  font-style: normal;
}

.storyboard-playback-empty {
  min-height: 220px;
  color: var(--muted-strong);
  text-align: center;
  background: #080c1294;
  border: 1px dashed #64748b6b;
  border-radius: 9px;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 24px;
  display: grid;
}

.storyboard-playback-empty small {
  max-width: 280px;
  color: var(--muted);
  line-height: 1.4;
}

.storyboard-playback-panel {
  z-index: 125;
  isolation: isolate;
  opacity: 1;
  background: #050a10;
  border: 1px solid #38bdf86b;
  border-radius: 10px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  transition: opacity .12s, box-shadow .12s;
  display: grid;
  position: fixed;
  overflow: hidden;
  box-shadow: 0 24px 70px #00000094;
}

.storyboard-playback-diagnostics-panel {
  isolation: isolate;
  opacity: 1;
  background: #050a10;
  border: 1px solid #a78bfa80;
  border-radius: 10px;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  transition: opacity .12s, box-shadow .12s;
  display: grid;
  position: fixed;
  overflow: hidden;
  box-shadow: 0 24px 70px #00000094;
}

.storyboard-playback-panel.is-hidden, .storyboard-playback-diagnostics-panel.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.storyboard-playback-panel.is-moving, .storyboard-playback-panel.is-resizing, .storyboard-playback-diagnostics-panel.is-moving, .storyboard-playback-diagnostics-panel.is-resizing {
  -webkit-user-select: none;
  user-select: none;
  transition: none;
}

.storyboard-playback-panel.is-moving, .storyboard-playback-diagnostics-panel.is-moving {
  box-shadow: 0 30px 86px #000000ad;
}

.storyboard-playback-panel-header, .storyboard-playback-diagnostics-panel-header {
  cursor: move;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: #08121a;
  border-bottom: 1px solid #38bdf838;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  display: flex;
}

.storyboard-playback-diagnostics-panel-header {
  border-bottom-color: #a78bfa4d;
}

.storyboard-playback-panel-header:focus-visible, .storyboard-playback-diagnostics-panel-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.storyboard-playback-panel-header > div:first-child, .storyboard-playback-diagnostics-panel-header > div:first-child {
  gap: 1px;
  min-width: 0;
  display: grid;
}

.storyboard-playback-panel-header p, .storyboard-playback-panel-header h2, .storyboard-playback-diagnostics-panel-header p, .storyboard-playback-diagnostics-panel-header h2 {
  margin: 0;
}

.storyboard-playback-panel-header h2, .storyboard-playback-diagnostics-panel-header h2 {
  color: var(--ink-strong);
  font-size: 16px;
}

.storyboard-playback-panel-header small, .storyboard-playback-diagnostics-panel-header small {
  max-width: min(320px, calc(var(--storyboard-playback-panel-width, 480px) - 110px));
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.storyboard-playback-diagnostics-panel-header button {
  width: 30px;
  height: 30px;
  color: var(--muted-strong);
  cursor: pointer;
  background: #0f172ae0;
  border: 1px solid #64748b94;
  border-radius: 7px;
  flex: none;
  place-items: center;
  padding: 0;
  font-size: 18px;
  display: grid;
}

.storyboard-playback-diagnostics-panel-header button:hover, .storyboard-playback-diagnostics-panel-header button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.storyboard-playback-panel-actions {
  flex: none;
  align-items: center;
  gap: 9px;
  display: flex;
}

.storyboard-playback-panel-actions button {
  width: 30px;
  height: 30px;
  color: var(--muted-strong);
  cursor: pointer;
  background: #0f172ae0;
  border: 1px solid #64748b94;
  border-radius: 7px;
  place-items: center;
  padding: 0;
  font-size: 18px;
  display: grid;
}

.storyboard-playback-panel-actions button:hover, .storyboard-playback-panel-actions button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.storyboard-playback-panel-actions .storyboard-playback-diagnostics-toggle {
  letter-spacing: .04em;
  text-transform: uppercase;
  gap: 6px;
  width: auto;
  min-width: 30px;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 900;
  display: flex;
}

.storyboard-playback-diagnostics-toggle[aria-pressed="true"] {
  color: #ddd6fe;
  background: #4c1d9547;
  border-color: #a78bfabd;
}

.storyboard-playback-captions-toggle[aria-pressed="true"] {
  color: #8ff8eb;
  background: #0d948838;
  border-color: #2dd4bfb8;
  box-shadow: 0 0 14px #2dd4bf2e;
}

.storyboard-playback-captions-toggle:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.storyboard-playback-diagnostics-tone {
  background: #64748b;
  border-radius: 999px;
  flex: none;
  width: 7px;
  height: 7px;
}

.storyboard-playback-diagnostics-tone.matched {
  background: #2dd4bf;
  box-shadow: 0 0 8px #2dd4bfb8;
}

.storyboard-playback-diagnostics-tone.mismatch {
  background: #fb7185;
  box-shadow: 0 0 8px #fb7185b3;
}

.storyboard-playback-diagnostics-tone.unavailable {
  background: #64748b;
}

.storyboard-playback-panel-body {
  background: #050a10;
  min-width: 0;
  min-height: 0;
  padding: 6px;
  display: grid;
  overflow: hidden;
}

.storyboard-playback-panel-body .storyboard-playback-media-frame .storyboard-preview-stage {
  background: #000;
  border-radius: 8px;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.storyboard-playback-panel-controls {
  background: #03080e;
  border-top: 1px solid #38bdf838;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  min-height: 0;
  padding: 10px 12px;
  display: grid;
}

.storyboard-playback-diagnostics-panel-body {
  background: #050a10;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  overflow: auto;
}

.storyboard-playback-panel-controls .storyboard-timeline-transport-controls {
  flex-wrap: wrap;
  grid-column: 1 / -1;
}

.storyboard-playback-panel-controls .storyboard-timeline-statusbar-active {
  text-align: left;
  justify-content: start;
}

.storyboard-playback-panel-controls > .storyboard-playback-scrubber {
  grid-column: 1 / -1;
}

.storyboard-playback-panel-controls .storyboard-timeline-statusbar-active > span:not(.storyboard-timeline-status-indicator) {
  max-width: 250px;
}

.storyboard-playback-panel-controls .storyboard-timeline-audio-volume {
  flex: 120px;
  grid-template-columns: minmax(96px, 1fr);
}

.storyboard-playback-panel-controls .storyboard-timeline-audio-volume input {
  width: 100%;
}

.storyboard-playback-scrubber {
  grid-template-columns: minmax(68px, auto) minmax(80px, 1fr) minmax(68px, auto);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 2px 0;
  display: grid;
}

.storyboard-playback-scrubber-time {
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 850;
}

.storyboard-playback-scrubber-time.is-elapsed {
  text-align: right;
}

.storyboard-playback-scrubber-time.is-duration {
  text-align: left;
}

.storyboard-playback-scrubber input[type="range"] {
  appearance: none;
  cursor: pointer;
  background: none;
  width: 100%;
  min-width: 0;
  height: 18px;
  margin: 0;
}

.storyboard-playback-scrubber input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    var(--accent) 0,
    var(--accent) var(--storyboard-playback-scrubber-progress),
    #4755699e var(--storyboard-playback-scrubber-progress),
    #4755699e 100%);
  border-radius: 999px;
  height: 5px;
}

.storyboard-playback-scrubber input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: var(--accent);
  border: 2px solid #031017;
  border-radius: 999px;
  width: 15px;
  height: 15px;
  margin-top: -5px;
  box-shadow: 0 0 0 1px #5eead4b8, 0 0 10px #2dd4bf6b;
}

.storyboard-playback-scrubber input[type="range"]::-moz-range-track {
  background: #4755699e;
  border-radius: 999px;
  height: 5px;
}

.storyboard-playback-scrubber input[type="range"]::-moz-range-progress {
  background: var(--accent);
  border-radius: 999px;
  height: 5px;
}

.storyboard-playback-scrubber input[type="range"]::-moz-range-thumb {
  background: var(--accent);
  border: 2px solid #031017;
  border-radius: 999px;
  width: 15px;
  height: 15px;
  box-shadow: 0 0 0 1px #5eead4b8, 0 0 10px #2dd4bf6b;
}

.storyboard-playback-scrubber input[type="range"]:focus-visible {
  outline: none;
}

.storyboard-playback-scrubber input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #2dd4bf38, 0 0 12px #2dd4bfad;
}

.storyboard-playback-scrubber.is-scrubbing input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #2dd4bf38, 0 0 12px #2dd4bfad;
}

.storyboard-playback-scrubber input[type="range"]:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.storyboard-playback-panel-resize-handle {
  z-index: 4;
  touch-action: none;
  position: absolute;
}

.storyboard-playback-panel-resize-handle.edge-north, .storyboard-playback-panel-resize-handle.edge-south {
  cursor: ns-resize;
  height: 10px;
  left: 10px;
  right: 10px;
}

.storyboard-playback-panel-resize-handle.edge-north {
  top: -5px;
}

.storyboard-playback-panel-resize-handle.edge-south {
  bottom: -5px;
}

.storyboard-playback-panel-resize-handle.edge-east, .storyboard-playback-panel-resize-handle.edge-west {
  cursor: ew-resize;
  width: 10px;
  top: 10px;
  bottom: 10px;
}

.storyboard-playback-panel-resize-handle.edge-east {
  right: -5px;
}

.storyboard-playback-panel-resize-handle.edge-west {
  left: -5px;
}

.storyboard-playback-panel-resize-handle.edge-north-east, .storyboard-playback-panel-resize-handle.edge-north-west, .storyboard-playback-panel-resize-handle.edge-south-east, .storyboard-playback-panel-resize-handle.edge-south-west {
  width: 18px;
  height: 18px;
}

.storyboard-playback-panel-resize-handle.edge-north-east {
  cursor: nesw-resize;
  top: -5px;
  right: -5px;
}

.storyboard-playback-panel-resize-handle.edge-north-west {
  cursor: nwse-resize;
  top: -5px;
  left: -5px;
}

.storyboard-playback-panel-resize-handle.edge-south-east {
  cursor: nwse-resize;
  bottom: -5px;
  right: -5px;
}

.storyboard-playback-panel-resize-handle.edge-south-west {
  cursor: nesw-resize;
  bottom: -5px;
  left: -5px;
}

.storyboard-playback-panel-resize-handle.edge-south-east:after {
  content: "";
  border-bottom: 2px solid #2dd4bfb3;
  border-right: 2px solid #2dd4bfb3;
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.storyboard-playback-panel-resize-handle.edge-south-east:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.storyboard-timeline-transport-controls {
  align-items: center;
  gap: 6px;
  display: flex;
}

.storyboard-timeline-audio-divider {
  background: #64748b6b;
  width: 1px;
  height: 24px;
  margin: 0 2px;
}

.storyboard-timeline-audio-volume {
  grid-template-columns: 82px;
  align-items: center;
  gap: 1px;
  display: grid;
}

.storyboard-timeline-audio-volume input {
  width: 82px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}

.storyboard-timeline-audio-volume input:disabled {
  cursor: not-allowed;
  opacity: .4;
}

.storyboard-timeline-audio-volume small {
  color: var(--muted);
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 800;
  overflow: hidden;
}

.storyboard-timeline-transport-controls button {
  width: 34px;
  height: 34px;
  color: var(--ink-strong);
  cursor: pointer;
  background: #0f172aeb;
  border: 1px solid #64748bad;
  border-radius: 8px;
  place-items: center;
  padding: 0;
  display: grid;
}

.storyboard-timeline-transport-controls button:hover:not(:disabled), .storyboard-timeline-transport-controls button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px #2dd4bf29;
}

.storyboard-timeline-transport-controls button:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.storyboard-timeline-transport-controls .storyboard-timeline-play-toggle {
  color: var(--accent);
  background: #0f766e38;
  border-color: #2dd4bf94;
}

.storyboard-timeline-transport-controls .storyboard-timeline-preview-toggle[aria-pressed="true"] {
  color: #7dd3fc;
  background: #0e749047;
  border-color: #38bdf8b8;
  box-shadow: inset 0 0 0 1px #38bdf81f;
}

.storyboard-timeline-transport-controls .storyboard-timeline-project-playback-toggle[aria-pressed="true"] {
  color: #c4b5fd;
  background: #6d28d942;
  border-color: #a78bfab8;
}

.storyboard-timeline-transport-controls .storyboard-timeline-mute-toggle[aria-pressed="true"] {
  color: #fca5a5;
  border-color: #f871719e;
}

.storyboard-timeline-transport-controls button span {
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
}

.storyboard-timeline-statusbar-time {
  font-variant-numeric: tabular-nums;
  align-items: baseline;
  gap: 7px;
  min-width: 132px;
  display: flex;
}

.storyboard-timeline-statusbar-time > small:first-child {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 850;
}

.storyboard-timeline-statusbar-time strong {
  color: var(--ink-strong);
  letter-spacing: .02em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 15px;
}

.storyboard-timeline-statusbar-time span, .storyboard-timeline-statusbar-time small {
  color: var(--muted);
  font-size: 11px;
}

.storyboard-timeline-statusbar-active {
  min-width: 0;
  color: var(--muted-strong);
  text-align: right;
  grid-template-columns: 8px minmax(0, max-content) minmax(0, 1fr);
  justify-content: end;
  align-items: center;
  gap: 8px;
  display: grid;
}

.storyboard-timeline-statusbar-active > span:not(.storyboard-timeline-status-indicator) {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(42vw, 520px);
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
}

.storyboard-timeline-statusbar-active small {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
}

.storyboard-timeline-status-indicator {
  background: #64748b;
  border-radius: 999px;
  width: 7px;
  height: 7px;
}

.storyboard-timeline-status-indicator.playing, .storyboard-timeline-status-indicator.scrubbing {
  background: var(--accent);
  box-shadow: 0 0 10px #2dd4bfcc;
}

.storyboard-preview-stage {
  --preview-layer-media: 1;
  --preview-layer-retained-frame: 2;
  --preview-layer-caption: 3;
  --preview-layer-status: 4;
  --preview-layer-recovery: 5;
  isolation: isolate;
  background: linear-gradient(135deg, #0f172a8f, #02060c2e), #000;
  border: 1px solid #38bdf857;
  border-radius: 10px;
  justify-self: center;
  width: min(100%, 960px);
  max-height: 68vh;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 50px #00000057;
  container-type: inline-size;
}

.storyboard-preview-stage-media, .storyboard-preview-stage-media video {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.storyboard-preview-stage-media video {
  z-index: var(--preview-layer-media);
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  background: #000;
  display: block;
}

.storyboard-preview-stage-media video.is-active {
  z-index: var(--preview-layer-media);
  opacity: 1;
}

.storyboard-preview-stage-canvas {
  z-index: var(--preview-layer-retained-frame);
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  background: none;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.storyboard-preview-stage-canvas[data-frame-ready="true"] {
  opacity: 1;
}

.storyboard-preview-stage-head, .storyboard-preview-stage-status {
  z-index: var(--preview-layer-status);
  color: var(--ink-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #02060cc2;
  border: 1px solid #94a3b83d;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  display: flex;
  position: absolute;
}

.storyboard-preview-stage-head {
  top: 10px;
  left: 10px;
}

.storyboard-preview-stage-status {
  bottom: 10px;
  right: 10px;
}

.storyboard-preview-stage-head span, .storyboard-preview-stage-status span {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 950;
}

.storyboard-preview-stage-head small, .storyboard-preview-stage-status small {
  color: #94a3b8;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(52vw, 420px);
  font-size: 10px;
  font-weight: 750;
  overflow: hidden;
}

.storyboard-preview-parity {
  background: #64748b33;
  border-radius: 999px;
  padding: 2px 6px;
}

.storyboard-preview-parity.matched {
  color: #5eead4;
  background: #14b8a633;
}

.storyboard-preview-parity.mismatch {
  color: #fda4af;
  background: #f43f5e33;
}

.storyboard-preview-stage-message {
  z-index: auto;
  color: #cbd5e1;
  text-align: center;
  pointer-events: none;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 28px;
  display: grid;
  position: absolute;
  inset: 0;
}

.storyboard-preview-stage-message strong, .storyboard-preview-stage-message small {
  z-index: var(--preview-layer-retained-frame);
  position: relative;
}

.storyboard-preview-stage-message strong {
  font-size: 14px;
}

.storyboard-preview-stage-message small {
  color: #94a3b8;
  max-width: 620px;
  line-height: 1.45;
}

.storyboard-preview-stage-recovery {
  z-index: var(--preview-layer-recovery);
  pointer-events: auto;
  align-items: center;
  gap: 8px;
  display: flex;
  position: relative;
}

.storyboard-preview-stage:has([data-testid="storyboard-playback-caption-overlay"]) .storyboard-preview-stage-message > :not(.storyboard-preview-stage-recovery) {
  opacity: .48;
}

.storyboard-preview-stage-recovery button, .storyboard-preview-stage-recovery a {
  color: #99f6e4;
  font: inherit;
  cursor: pointer;
  background: #0f172adb;
  border: 1px solid #5eead47a;
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}

.storyboard-stage-shell {
  width: 100%;
  min-width: 0;
}

.app-shell:has(.storyboard-stage-shell) {
  padding-left: 0;
  padding-right: 8px;
}

.app-shell:has(.storyboard-stage-shell) .workbench-body.stage-content-only {
  gap: 0;
}

.storyboard-toolbar {
  background: #0e131cd1;
  border: 1px solid #93c5fd38;
  border-radius: 8px;
  justify-content: flex-end;
  padding: 12px;
  display: flex;
}

.workflow-context-storyboard-actions-host {
  border-right: 1px solid var(--accent-border);
  flex: none;
  align-items: stretch;
  display: flex;
}

.storyboard-action-menu-root {
  width: auto;
  display: flex;
  position: relative;
}

.storyboard-action-menu-trigger {
  width: 52px;
  color: var(--muted-strong);
  cursor: pointer;
  background: none;
  border: 0;
  flex: 0 0 52px;
  grid-template-columns: 18px 12px;
  place-content: center;
  gap: 4px;
  padding: 0;
  display: grid;
}

.storyboard-top-controls {
  align-items: stretch;
  display: flex;
}

.storyboard-top-control {
  border-left: 1px solid var(--accent-border);
  align-content: center;
  gap: 2px;
  width: 116px;
  padding: 4px 8px;
  display: grid;
}

.storyboard-top-control span {
  color: var(--muted);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 850;
  line-height: 1;
}

.storyboard-top-control select {
  border: 1px solid var(--line);
  background: var(--field);
  width: 100%;
  min-height: 25px;
  color: var(--ink-strong);
  font: inherit;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 750;
}

.storyboard-top-control select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.storyboard-playback-menubar-toggle {
  border: 0;
  border-left: 1px solid var(--accent-border);
  min-width: 116px;
  color: var(--muted-strong);
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 0;
  flex: none;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  display: grid;
}

.storyboard-playback-menubar-toggle > span:last-child {
  gap: 1px;
  display: grid;
}

.storyboard-playback-menubar-toggle strong {
  color: var(--ink-strong);
  font-size: 11px;
}

.storyboard-playback-menubar-toggle small {
  color: var(--muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 800;
}

.storyboard-playback-menubar-toggle:hover, .storyboard-playback-menubar-toggle.is-active {
  color: var(--accent);
  background: #102828fa;
}

.storyboard-playback-menubar-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.storyboard-action-menu-trigger:hover, .storyboard-action-menu-trigger[aria-expanded="true"] {
  color: var(--accent);
  background: #102828fa;
}

.storyboard-action-menu-trigger:focus-visible, .storyboard-action-menu [role^="menuitem"]:focus-visible {
  z-index: 1;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.storyboard-action-menu-icon {
  gap: 3px;
  display: grid;
}

.storyboard-action-menu-icon i {
  background: currentColor;
  border-radius: 999px;
  width: 16px;
  height: 2px;
  display: block;
}

.storyboard-action-menu-trigger .workflow-context-chevron {
  font-size: 14px;
}

.storyboard-action-menu {
  z-index: 2;
  border: 1px solid var(--line-strong);
  background: #090d14fc;
  border-radius: 10px;
  gap: 4px;
  width: 292px;
  padding: 8px;
  display: grid;
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  box-shadow: 0 22px 58px #00000094;
}

.storyboard-action-menu [role^="menuitem"] {
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 7px;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px;
  text-decoration: none;
  display: grid;
}

.storyboard-action-menu [role^="menuitem"]:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--panel-soft);
}

.storyboard-action-menu [role^="menuitem"]:disabled {
  cursor: not-allowed;
  opacity: .46;
}

.storyboard-action-menu [role^="menuitem"] > span:first-child {
  color: var(--accent);
  text-align: center;
  font-size: 16px;
  font-weight: 900;
}

.storyboard-action-menu [role^="menuitem"] > span:last-child {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.storyboard-action-menu [role^="menuitem"] strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.storyboard-action-menu [role^="menuitem"] small {
  color: var(--muted);
  font-size: 9px;
}

.storyboard-toolbar h3, .storyboard-container-head h3 {
  margin-top: 2px;
  font-size: 17px;
  line-height: 1.25;
}

.storyboard-toolbar-actions, .storyboard-container-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: end;
  gap: 8px;
  display: flex;
}

.storyboard-control {
  gap: 4px;
  min-width: 104px;
  display: grid;
}

.storyboard-control select {
  border: 1px solid var(--line);
  background: var(--field);
  min-height: 34px;
  color: var(--ink);
  border-radius: 7px;
  padding: 6px 8px;
}

.storyboard-final-output-history {
  border: 1px solid var(--line);
  border-radius: 6px;
  gap: 12px;
  padding: 14px;
  display: grid;
}

.storyboard-project-render-progress {
  border: 1px solid var(--accent);
  border-radius: 6px;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 2fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: grid;
}

.storyboard-project-render-progress > div {
  flex-direction: column;
  display: flex;
}

.storyboard-project-render-progress-actions {
  align-items: flex-end;
  gap: 6px;
}

.storyboard-vace-preflight-summary {
  flex-wrap: wrap;
  gap: .45rem;
  display: flex;
}

.storyboard-vace-preflight-summary span {
  background: color-mix(in srgb, var(--panel-accent, #5f7cff) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--panel-accent, #5f7cff) 28%, transparent);
  border-radius: 999px;
  padding: .2rem .5rem;
}

.storyboard-project-render-progress progress {
  width: 100%;
}

.storyboard-final-output-history-head, .storyboard-final-output-history-head > div, .storyboard-final-output-card > div, .storyboard-final-output-badges {
  gap: 8px;
  display: flex;
}

.storyboard-final-output-history-head {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
}

.storyboard-final-output-history-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
}

.storyboard-final-output-delete {
  color: #fecaca;
  border-color: #f8717194;
}

.storyboard-final-output-delete:hover:not(:disabled), .storyboard-final-output-delete:focus-visible {
  background: #7f1d1d57;
  border-color: #f87171e6;
}

.storyboard-final-output-history-head > div, .storyboard-final-output-card > div {
  flex-direction: column;
  align-items: flex-start;
}

.storyboard-final-output-group {
  border-top: 1px solid var(--line);
  cursor: pointer;
  gap: 8px;
  padding-top: 10px;
  display: grid;
}

.storyboard-final-output-group.selected {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 80%, transparent);
  padding-left: 10px;
}

.storyboard-final-output-group > header {
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.storyboard-final-output-group-selection {
  cursor: pointer;
  align-items: center;
  gap: 9px;
  display: flex;
}

.storyboard-final-output-group-selection input {
  accent-color: var(--accent);
  margin: 0;
}

.storyboard-final-output-group-selection > span {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  display: flex;
}

.storyboard-final-output-group-selection time {
  color: var(--muted);
  font-size: .78rem;
}

.storyboard-final-output-group-stages {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  display: grid;
}

.storyboard-final-output-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  display: grid;
}

.storyboard-final-output-card.active {
  border-color: var(--accent);
}

.storyboard-final-output-preview, .storyboard-final-output-card .storyboard-video-manifest-preview {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  width: 96px;
  height: auto;
}

.storyboard-final-output-preview {
  cursor: zoom-in;
  background: #05070a;
  border: 0;
  padding: 0;
  overflow: hidden;
}

.storyboard-final-output-preview:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.storyboard-final-output-badges {
  flex-wrap: wrap;
  align-items: center;
}

.storyboard-final-output-history {
  background: radial-gradient(circle at 55% 12%, #1d666c14, #0000 34%), #050a0e;
  border-color: #28343e;
  border-radius: 9px;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
}

.storyboard-final-output-history-head {
  cursor: default;
  grid-template-columns: minmax(220px, 1fr) minmax(390px, 560px) minmax(280px, 1fr);
  gap: 18px;
  display: grid;
}

.storyboard-final-output-history-head > div:first-child {
  gap: 6px;
  display: grid;
}

.storyboard-final-output-history-head h2 {
  color: #f4f7f8;
  letter-spacing: -.035em;
  margin: 0;
  font-size: 26px;
}

.storyboard-final-output-history-head p {
  color: #9099a1;
  margin: 0;
  font-size: 13px;
}

.storyboard-final-output-summary {
  background: linear-gradient(#0d151c, #091016);
  border: 1px solid #26333d;
  border-radius: 8px;
  grid-template-columns: repeat(3, 1fr);
  align-self: center;
  min-height: 50px;
  display: grid;
  overflow: hidden;
}

.storyboard-final-output-summary span {
  color: #cbd2d7;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  display: flex;
}

.storyboard-final-output-summary span + span {
  border-left: 1px solid #263039;
}

.storyboard-final-output-summary i, .storyboard-final-output-render-number i {
  background: currentColor;
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.storyboard-final-output-summary .rendering {
  color: #59d9d5;
}

.storyboard-final-output-summary .queued {
  color: #ffc657;
}

.storyboard-final-output-summary .retained {
  color: #82add3;
}

.storyboard-final-output-summary strong {
  color: #f4f7f8;
  font-size: 17px;
}

.storyboard-final-output-active {
  padding-bottom: 2px;
  overflow-x: auto;
}

.storyboard-final-output-pipeline-head, .storyboard-final-output-group.active-pipeline {
  min-width: 1330px;
}

.storyboard-final-output-pipeline-head {
  grid-template-columns: 220px repeat(5, minmax(210px, 1fr));
  min-height: 78px;
  display: grid;
}

.storyboard-final-output-pipeline-head > div {
  align-items: center;
  gap: 11px;
  padding: 10px 18px;
  display: flex;
  position: relative;
}

.storyboard-final-output-pipeline-head > div:not(:last-child):after {
  content: "";
  background: #707b82;
  width: 38%;
  height: 1px;
  position: absolute;
  top: 50%;
  right: -12%;
}

.storyboard-final-output-pipeline-head i {
  z-index: 1;
  color: #56d8d3;
  background: linear-gradient(145deg, #13252b, #0b1419);
  border: 1px solid #33444d;
  border-radius: 8px;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 16px;
  font-style: normal;
  display: grid;
  position: relative;
}

.storyboard-final-output-pipeline-head .stage-final i {
  color: #f4b526;
  background: linear-gradient(145deg, #30230e, #171008);
  border-color: #785416;
}

.storyboard-final-output-pipeline-head > div > span {
  z-index: 1;
  background: #050a0e;
  gap: 3px;
  padding-right: 8px;
  display: grid;
  position: relative;
}

.storyboard-final-output-pipeline-head strong {
  color: #eef3f5;
  font-size: 15px;
}

.storyboard-final-output-pipeline-head small {
  color: #a6afb6;
  font-size: 11px;
}

.storyboard-final-output-active-list {
  gap: 8px;
  display: grid;
}

.storyboard-final-output-group.active-pipeline {
  cursor: default;
  background: linear-gradient(105deg, #0a1117, #071016);
  border: 1px solid #283640;
  border-radius: 8px;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  display: grid;
  overflow: hidden;
}

.storyboard-final-output-run-meta {
  border-right: 1px solid #2b3942;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 9px;
  padding: 16px 18px;
  display: flex;
}

.storyboard-final-output-run-meta > strong {
  color: #f0f4f5;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 15px;
  overflow: hidden;
}

.storyboard-final-output-run-meta small, .storyboard-final-output-run-meta time {
  color: #a8b1b7;
  font-size: 11px;
}

.storyboard-final-output-render-number {
  color: #58d9d5;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.storyboard-final-output-group.active-pipeline .storyboard-final-output-group-stages {
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 0;
  padding: 0;
  display: grid;
}

.storyboard-final-output-group-stages > .stage-concat {
  grid-column: 1;
}

.storyboard-final-output-group-stages > .stage-latentsync {
  grid-column: 2;
}

.storyboard-final-output-group-stages > .stage-rife {
  grid-column: 3;
}

.storyboard-final-output-group-stages > .stage-upscale {
  grid-column: 4;
}

.storyboard-final-output-group-stages > .stage-final {
  grid-column: 5;
}

.storyboard-final-output-card {
  background: #081117;
  border-color: #47636a;
  border-radius: 8px;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  margin: 11px 14px;
  padding: 0;
  display: flex;
  position: relative;
}

.active-pipeline .storyboard-final-output-card:not(.stage-final):after {
  z-index: 3;
  content: "";
  background: #59d9d5;
  width: 29px;
  height: 1px;
  position: absolute;
  top: 50%;
  right: -29px;
}

.active-pipeline .storyboard-final-output-card:not(.stage-final):before {
  z-index: 4;
  content: "";
  background: #10252a;
  border: 1px solid #67e1dd;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  position: absolute;
  top: calc(50% - 6px);
  right: -22px;
}

.storyboard-final-output-card.status-running {
  border-color: #55dcd7;
}

.storyboard-final-output-card.status-failed {
  border-color: #c75e5e;
}

.storyboard-final-output-card.status-pending, .storyboard-final-output-card.status-queued {
  background: linear-gradient(145deg, #211a0e, #0e0d0a);
  border-color: #9b6e17;
}

.storyboard-final-output-card.active {
  border-color: #4ade80;
  box-shadow: inset 0 0 24px #4ade800d;
}

.storyboard-final-output-card > div {
  display: flex;
}

.storyboard-final-output-card-visual {
  background: #05090d;
  border-radius: 7px 7px 0 0;
  flex-direction: column;
  min-height: 116px;
  position: relative;
  overflow: hidden;
}

.storyboard-final-output-preview, .storyboard-final-output-card .storyboard-final-output-placeholder {
  aspect-ratio: auto;
  border-radius: 0;
  place-items: center;
  width: 100%;
  min-height: 116px;
  display: grid;
}

.storyboard-final-output-preview {
  height: 100%;
}

.storyboard-final-output-preview > * {
  width: 100%;
  height: 100%;
}

.storyboard-final-output-placeholder {
  color: #d3d9dc;
  text-align: center;
  align-content: center;
  gap: 5px;
  position: relative;
}

.storyboard-final-output-placeholder:after {
  width: min(24%, 44px);
  aspect-ratio: var(--storyboard-output-aspect);
  content: "";
  opacity: .7;
  border: 1px solid #94a3b833;
  border-radius: 4px;
  position: absolute;
  inset: 10px auto 10px 10px;
}

.storyboard-final-output-placeholder small {
  color: #9ea7ad;
}

.storyboard-final-output-status-icon {
  color: #55d9d5;
  font-size: 28px;
}

.status-pending .storyboard-final-output-status-icon, .status-queued .storyboard-final-output-status-icon {
  color: #f4b526;
}

.status-failed .storyboard-final-output-status-icon {
  color: #f87171;
}

.storyboard-final-output-card-visual footer {
  color: #b9c1c6;
  background: #070c10ed;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  padding: 0 10px;
  font-size: 10px;
  display: flex;
}

.storyboard-final-output-card-body {
  flex-direction: column;
  gap: 6px;
  padding: 0 11px 11px;
  display: flex;
  align-items: stretch !important;
}

.storyboard-final-output-card-heading, .storyboard-final-output-progress-copy, .storyboard-final-output-card-meta {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.storyboard-final-output-card-heading > strong {
  color: #eef3f5;
  font-size: 13px;
}

.storyboard-final-output-card-body > small {
  color: #a8b0b6;
  font-size: 10px;
  line-height: 1.35;
}

.storyboard-final-output-card-meta {
  color: #929ca3;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-size: 10px;
}

.storyboard-final-output-message {
  overflow-wrap: anywhere;
}

.storyboard-final-output-error {
  overflow-wrap: anywhere;
  color: #fca5a5 !important;
}

.storyboard-final-output-slot-progress {
  gap: 5px;
  display: grid;
}

.storyboard-final-output-progress-copy {
  color: #59d9d5;
  font-size: 11px;
}

.storyboard-final-output-slot-progress progress {
  accent-color: #55d9d5;
  width: 100%;
  height: 8px;
}

.storyboard-final-output-slot-progress.indeterminate progress {
  accent-color: #7ac8c5;
}

.storyboard-final-output-history-list {
  gap: 6px;
  display: grid;
}

.storyboard-final-output-history-row {
  background: linear-gradient(90deg, #0a1117, #081016);
  border: 1px solid #26343e;
  border-radius: 8px;
  overflow: hidden;
}

.storyboard-final-output-history-row.selected {
  border-color: #59d9d5;
}

.storyboard-final-output-history-row > header {
  color: #aeb7bd;
  grid-template-columns: 52px minmax(160px, 1.25fr) minmax(110px, .75fr) minmax(170px, 1fr) auto auto 36px;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 12px;
  font-size: 12px;
  display: grid;
}

.storyboard-final-output-history-row > header > strong {
  color: #eef3f5;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.storyboard-final-output-history-row > header time {
  white-space: nowrap;
}

.storyboard-final-output-history-success {
  color: #4ade80;
  border: 2px solid #4ade80;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  display: grid;
}

.storyboard-final-output-history-chevron {
  color: #dce3e6;
  background: none;
  border: 0;
  font-size: 20px;
}

.storyboard-final-output-history-row > .storyboard-final-output-group-stages {
  border-top: 1px solid #26343e;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  display: grid;
}

@media (max-width: 1180px) {
  .storyboard-final-output-history-head {
    grid-template-columns: 1fr;
  }

  .storyboard-final-output-summary {
    width: min(560px, 100%);
  }

  .storyboard-final-output-history-controls {
    justify-content: flex-start;
  }
}

.parallel-timing-spine {
  background: #080d12ad;
  border: 1px solid #2dd4bf42;
  border-radius: 8px;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  display: grid;
}

.parallel-timing-spine-head, .parallel-timing-ruler {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.parallel-timing-spine-head strong {
  min-width: 0;
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.parallel-timing-spine-head span, .parallel-timing-ruler span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.parallel-timing-ruler {
  border-top: 1px solid #94a3b829;
  padding-top: 5px;
}

.parallel-timing-row {
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: grid;
}

.parallel-timing-row-label {
  color: var(--muted-strong);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
}

.parallel-timing-track {
  background: #0f172ab8;
  border: 1px solid #94a3b82e;
  border-radius: 999px;
  min-width: 0;
  height: 24px;
  position: relative;
  overflow: hidden;
}

.parallel-timing-segment {
  min-width: 18px;
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  position: absolute;
  top: 3px;
  bottom: 3px;
  overflow: hidden;
}

.parallel-timing-segment.audio {
  background: linear-gradient(90deg, #2dd4bfb8, #60a5fa9e);
}

.parallel-timing-segment.video {
  background: linear-gradient(90deg, #fbbf24b8, #f8717194);
}

.parallel-timing-segment.invalidated {
  outline-offset: 1px;
  outline: 2px dashed #fbbf24cc;
}

.parallel-timing-empty {
  height: 100%;
  color: var(--muted);
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.audio-overlay-strip {
  background: #0f172ad9;
  border: 1px solid #2dd4bf52;
  border-radius: 999px;
  align-items: stretch;
  gap: 2px;
  min-width: min(420px, 100%);
  max-width: 100%;
  height: 18px;
  display: flex;
  overflow: hidden;
}

.audio-overlay-segment {
  min-width: 18px;
  color: var(--ink-strong);
  background: linear-gradient(90deg, #2dd4bf59, #60a5fa59);
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.timing-source-badge, .timing-warning-badge {
  border-radius: 999px;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
}

.timing-source-badge {
  color: var(--accent);
  background: #2dd4bf1a;
  border: 1px solid #2dd4bf6b;
}

.timing-warning-badge {
  color: #fbbf24;
  background: #fbbf241a;
  border: 1px solid #fbbf246b;
}

.timing-warning-badge.error {
  color: #fca5a5;
  background: #f871711f;
  border-color: #f8717180;
}

.storyboard-timing-source-marker {
  width: max-content;
  max-width: 100%;
  color: var(--accent);
  background: #2dd4bf1a;
  border: 1px solid #2dd4bf61;
  border-radius: 999px;
  align-items: center;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
}

.storyboard-empty-state {
  border: 1px dashed var(--line-strong);
  background: #11151cb3;
  border-radius: 8px;
  gap: 5px;
  padding: 18px;
  display: grid;
}

.storyboard-container-stack, .storyboard-timeline-run {
  gap: 14px;
  display: grid;
}

.storyboard-timeline-run {
  position: relative;
}

.storyboard-timeline-run:before {
  display: none;
}

.storyboard-timeline-run.dragging:before {
  box-shadow: 0 0 0 4px #2dd4bf1a;
}

.storyboard-container-card {
  background: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  display: grid;
  position: relative;
}

.storyboard-container-panel {
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.storyboard-timeline-span {
  display: none;
}

.storyboard-container-timing-control {
  align-self: start;
  min-width: 220px;
}

.storyboard-container-timing-control > summary {
  color: var(--muted);
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}

.storyboard-container-timing-control form {
  grid-template-columns: minmax(58px, auto) minmax(88px, 1fr) auto;
  align-items: end;
  gap: 8px;
  margin-top: 8px;
  display: grid;
}

.storyboard-container-timing-control label {
  color: var(--muted);
  gap: 4px;
  font-size: 11px;
  display: grid;
}

.storyboard-container-timing-control input, .storyboard-container-timing-control output {
  box-sizing: border-box;
  min-height: 34px;
}

.storyboard-span-body, .storyboard-span-handle {
  z-index: 3;
  color: #0000;
  cursor: grab;
  width: 28px;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  position: absolute;
  left: 34px;
}

.storyboard-span-body:disabled, .storyboard-span-handle:disabled {
  cursor: not-allowed;
}

.storyboard-span-handle {
  cursor: ns-resize;
  height: 24px;
}

.storyboard-span-handle.top {
  top: -4px;
}

.storyboard-span-handle.bottom {
  bottom: -4px;
}

.storyboard-span-body {
  cursor: grab;
  top: 14px;
  bottom: 14px;
}

.storyboard-span-register {
  z-index: 2;
  background: linear-gradient(180deg, var(--accent), var(--amber));
  pointer-events: none;
  border-radius: 999px;
  width: 12px;
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 42px;
  box-shadow: 0 0 0 2px #080a0eb8;
}

.storyboard-span-register:before, .storyboard-span-register:after {
  background: var(--ink-strong);
  content: "";
  border-radius: 999px;
  width: 22px;
  height: 4px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.storyboard-span-register:before {
  top: 0;
}

.storyboard-span-register:after {
  bottom: 0;
}

.storyboard-span-time, .storyboard-span-duration {
  z-index: 2;
  color: var(--muted-strong);
  pointer-events: none;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  position: absolute;
  left: 61px;
}

.storyboard-span-time.start {
  top: 6px;
}

.storyboard-span-time.end {
  bottom: 6px;
}

.storyboard-span-duration {
  color: var(--accent);
  top: 50%;
  transform: translateY(-50%);
}

.storyboard-container-head {
  border-bottom: 1px solid var(--line);
  background: #151a23e0;
  grid-template-columns: minmax(220px, 1fr) max-content;
  align-items: start;
  gap: 12px;
  padding: 12px;
  display: grid;
}

.storyboard-container-head small {
  color: var(--muted);
  margin-top: 4px;
  display: block;
}

.storyboard-container-warning-list {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  display: flex;
}

.storyboard-container-warning-list.compact {
  margin-top: 4px;
}

.storyboard-composition-render-plan {
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  max-width: 220px;
  display: flex;
}

.storyboard-composition-render-plan small {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.storyboard-composition-render-plan-status {
  color: #99f6e4;
  background: #14b8a61f;
  border: 1px solid #2dd4bf6b;
  border-radius: 999px;
  align-items: center;
  width: max-content;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
}

.storyboard-composition-render-plan-status.blocked {
  color: #fecaca;
  background: #7f1d1d38;
  border-color: #f871717a;
}

.storyboard-file-button {
  background: var(--field);
  min-height: 34px;
  color: var(--blue);
  cursor: grab;
  border: 1px solid #93c5fd57;
  border-radius: 8px;
  place-items: center;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 800;
  display: inline-grid;
  position: relative;
}

.storyboard-file-button.disabled {
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.storyboard-file-button input {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  inset: 0;
}

.storyboard-file-button.disabled input {
  cursor: not-allowed;
}

.storyboard-container-body {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  padding: 12px 0 0;
  display: grid;
  position: relative;
}

.storyboard-frame-progress {
  background: #080d12b8;
  border: 1px solid #2dd4bf3d;
  border-radius: 8px;
  gap: 7px;
  padding: 10px;
  display: grid;
}

.storyboard-frame-progress.failed {
  border-color: #f871716b;
}

.storyboard-frame-progress.completed {
  border-color: #4ade805c;
}

.storyboard-frame-progress-head {
  color: var(--ink);
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  display: flex;
}

.storyboard-frame-progress-track {
  background: #1f2937e0;
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}

.storyboard-frame-progress-track span {
  border-radius: inherit;
  background: linear-gradient(90deg, #2dd4bf, #f59e0b);
  height: 100%;
  transition: width .18s;
  display: block;
}

.storyboard-frame-progress.failed .storyboard-frame-progress-track span {
  background: #f87171;
}

.storyboard-frame-progress.completed .storyboard-frame-progress-track span {
  background: #4ade80;
}

.storyboard-frame-progress small {
  color: var(--muted);
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.35;
}

.audio-extraction-toast-stack {
  z-index: 70;
  pointer-events: none;
  gap: 10px;
  width: min(430px, 100vw - 36px);
  display: grid;
  position: fixed;
  top: 18px;
  right: 18px;
}

.audio-extraction-toast {
  border: 1px solid #2dd4bf61;
  border-left: 4px solid var(--accent);
  pointer-events: auto;
  background: #050a10f7;
  border-radius: 8px;
  gap: 8px;
  padding: 12px;
  display: grid;
  box-shadow: 0 18px 48px #00000061;
}

.audio-extraction-toast.completed {
  border-left-color: #4ade80;
}

.audio-extraction-toast.failed {
  border-left-color: #f87171;
}

.audio-extraction-toast-head {
  justify-content: space-between;
  align-items: start;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.audio-extraction-toast-head div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.audio-extraction-toast-head span {
  color: var(--accent);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
}

.audio-extraction-toast.completed .audio-extraction-toast-head span {
  color: #86efac;
}

.audio-extraction-toast.failed .audio-extraction-toast-head span {
  color: #fca5a5;
}

.audio-extraction-toast-head strong {
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
}

.audio-extraction-toast-head button {
  width: 26px;
  height: 26px;
  color: var(--muted-strong);
  cursor: pointer;
  background: #0f172ab8;
  border: 1px solid #94a3b852;
  border-radius: 999px;
  flex: none;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  display: grid;
}

.audio-extraction-toast p {
  color: var(--ink);
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

.audio-extraction-toast-progress {
  background: #2c3545b8;
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.audio-extraction-toast-progress span {
  border-radius: inherit;
  background: linear-gradient(90deg, #2dd4bf, #60a5fa);
  height: 100%;
  transition: width .18s;
  display: block;
}

.audio-extraction-toast.completed .audio-extraction-toast-progress span {
  background: #4ade80;
}

.audio-extraction-toast.failed .audio-extraction-toast-progress span {
  background: #f87171;
}

.audio-extraction-toast-log {
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.audio-extraction-toast-log li {
  min-width: 0;
  color: var(--muted);
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px;
  font-size: 11px;
  line-height: 1.25;
  display: grid;
}

.audio-extraction-toast-log li.error {
  color: #fca5a5;
}

.audio-extraction-toast-log time {
  color: var(--muted-strong);
  font-weight: 800;
}

.audio-extraction-toast-log span {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.debug-log-drawer {
  z-index: 45;
  bottom: 0;
  right: 18px;
  left: calc(var(--project-task-sidebar-effective-width, 0px) + 18px);
  pointer-events: none;
  display: grid;
  position: fixed;
}

.debug-log-tab, .debug-log-panel {
  pointer-events: auto;
}

.debug-log-tab {
  width: min(620px, 100%);
  min-height: 38px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  background: #050a10f5;
  border: 1px solid #2dd4bf47;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  justify-self: end;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  display: grid;
  box-shadow: 0 -10px 28px #00000047;
}

.debug-log-tab span {
  color: var(--ink-strong);
  font-size: 12px;
  font-weight: 900;
}

.debug-log-tab strong {
  min-width: 24px;
  height: 22px;
  color: var(--accent);
  background: #2dd4bf24;
  border-radius: 999px;
  place-items: center;
  font-size: 11px;
  display: grid;
}

.debug-log-tab small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 750;
  overflow: hidden;
}

.debug-log-panel {
  background: #050a10fa;
  border: 1px solid #2dd4bf47;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  max-height: min(44vh, 420px);
  display: none;
  box-shadow: 0 -18px 48px #00000061;
}

.debug-log-drawer.open .debug-log-tab {
  display: none;
}

.debug-log-drawer.open .debug-log-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
  display: grid;
}

.debug-log-head {
  border-bottom: 1px solid #2c3545db;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: flex;
}

.debug-log-head h3 {
  color: var(--ink-strong);
  margin: 2px 0 0;
  font-size: 15px;
}

.debug-log-actions {
  gap: 8px;
  display: flex;
}

.debug-log-filters {
  border-bottom: 1px solid #2c3545b8;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  display: flex;
}

.debug-log-filter {
  min-height: 28px;
  color: var(--muted);
  cursor: pointer;
  text-transform: uppercase;
  background: #0f172a85;
  border: 1px solid #2c3545e6;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
}

.debug-log-filter.active {
  color: var(--ink-strong);
  background: #2dd4bf1f;
}

.debug-log-filter.error.active {
  border-color: #f87171c2;
}

.debug-log-filter.warn.active {
  border-color: #fbbf24c2;
}

.debug-log-filter.info.active {
  border-color: #2dd4bfc2;
}

.debug-log-filter.debug.active {
  border-color: #94a3b8c2;
}

.debug-log-filter strong {
  min-width: 20px;
  height: 20px;
  color: inherit;
  background: #02061794;
  border-radius: 999px;
  place-items: center;
  font-size: 10px;
  display: grid;
}

.debug-log-list {
  align-content: start;
  gap: 4px;
  padding: 8px 12px 12px;
  display: grid;
  overflow: auto;
}

.debug-log-entry {
  background: #0f172aa3;
  border: 1px solid #2c3545db;
  border-left: 3px solid #94a3b8b8;
  border-radius: 6px;
  grid-template-columns: max-content max-content max-content minmax(180px, 1fr) minmax(160px, .65fr);
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 8px;
  display: grid;
}

.debug-log-entry.info {
  border-left-color: var(--accent);
}

.debug-log-entry.warn {
  border-left-color: var(--amber);
}

.debug-log-entry.error {
  border-left-color: #f87171;
}

.debug-log-entry time, .debug-log-entry strong, .debug-log-entry em, .debug-log-entry p, .debug-log-entry code {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.debug-log-entry time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}

.debug-log-entry strong {
  color: var(--ink-strong);
  text-transform: capitalize;
}

.debug-log-entry em {
  color: var(--muted);
  text-transform: uppercase;
  font-style: normal;
}

.debug-log-entry p {
  color: var(--ink);
  margin: 0;
  font-size: 12px;
  line-height: 1;
}

.debug-log-entry code {
  color: var(--muted-strong);
  background: #020617b8;
  border-radius: 6px;
  margin: 0;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1;
}

.debug-log-empty {
  color: var(--muted);
  border: 1px dashed #2c3545e6;
  border-radius: 8px;
  margin: 0;
  padding: 14px;
  font-size: 12px;
}

.storyboard-sentence-list {
  align-content: start;
  gap: 6px;
  min-width: 0;
  display: grid;
}

.storyboard-sentence-row {
  background: #080a0e70;
  border: 1px solid #2c3545ad;
  border-radius: 7px;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 7px 8px;
  display: grid;
}

.storyboard-sentence-row span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.storyboard-sentence-row p {
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.35;
}

.storyboard-media-track-wrap, .storyboard-inclusion-area, .storyboard-transcript-area, .storyboard-container-parallel-timing, .storyboard-frame-area {
  gap: 8px;
  min-width: 0;
  display: grid;
}

.storyboard-transcript-area {
  z-index: 12;
  background: #10151d;
  border: 1px solid #2c3545db;
  border-radius: 8px;
  align-self: start;
  width: min(100vw, 100%);
  max-width: 100vw;
  padding: 8px;
  display: block;
  position: sticky;
  left: 0;
  box-shadow: 10px 0 20px #0000003d;
}

.storyboard-transcript-toggle {
  cursor: pointer;
  list-style: none;
}

.storyboard-transcript-toggle::-webkit-details-marker {
  display: none;
}

.storyboard-transcript-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.storyboard-transcript-toggle-label {
  align-items: center;
  gap: 8px;
  display: flex;
}

.storyboard-transcript-chevron {
  color: var(--muted-strong);
}

.storyboard-transcript-area[open] .storyboard-transcript-chevron {
  transform: rotate(90deg);
}

.storyboard-transcript-area:not([open]) .storyboard-transcript-toggle {
  border-bottom: 0;
  padding-bottom: 0;
}

.storyboard-transcript-body {
  gap: 8px;
  min-width: 0;
  padding-top: 8px;
  display: grid;
}

.storyboard-frame-area, .storyboard-transcript-area, .storyboard-inclusion-area {
  align-content: start;
}

.storyboard-inclusion-form {
  grid-template-columns: minmax(120px, 1fr) 104px minmax(220px, 2fr) minmax(180px, 1.4fr) auto;
  align-items: stretch;
  gap: 8px;
  display: grid;
}

.storyboard-inclusion-form input, .storyboard-inclusion-form select, .storyboard-inclusion-form textarea, .storyboard-inclusion-card textarea {
  min-width: 0;
  color: var(--ink);
  font: inherit;
  background: #05070ac7;
  border: 1px solid #2c3545f2;
  border-radius: 6px;
  padding: 8px;
  font-size: 12px;
}

.storyboard-inclusion-form textarea, .storyboard-inclusion-card textarea {
  resize: vertical;
}

.storyboard-inclusion-sequence {
  background: #080a0e6b;
  border: 1px solid #2c3545e6;
  border-radius: 8px;
  gap: 10px;
  min-width: 520px;
  padding: 10px;
  display: flex;
  overflow-x: auto;
}

.storyboard-inclusion-card {
  background: #0d121cf0;
  border: 1px solid #93c5fd57;
  border-radius: 8px;
  flex: 0 0 220px;
  grid-template-rows: 84px auto auto minmax(76px, auto) auto;
  gap: 7px;
  min-width: 200px;
  padding: 7px;
  display: grid;
}

.storyboard-inclusion-card strong, .storyboard-inclusion-card small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.storyboard-inclusion-card strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.storyboard-inclusion-card small {
  color: var(--muted);
  font-size: 11px;
}

.storyboard-ref-toggle {
  color: var(--muted-strong);
  align-items: center;
  gap: 6px;
  font-size: 11px;
  display: inline-flex;
}

.storyboard-empty-hint {
  color: var(--muted);
  background: #080a0e5c;
  border: 1px dashed #2c3545e6;
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
}

.storyboard-transcript-list {
  background: #080a0e6b;
  border: 1px solid #2c3545db;
  border-radius: 8px;
  max-height: 220px;
  display: grid;
  overflow: auto;
}

.storyboard-container-audio-strip {
  background: #080a0e6b;
  border: 1px solid #2c3545db;
  border-radius: 8px;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, auto);
  align-items: center;
  gap: 10px;
  padding: 9px;
  display: grid;
}

.storyboard-container-audio-strip.available {
  border-color: #2dd4bf61;
}

.storyboard-container-audio-strip.stale {
  border-color: #fbbf247a;
}

.storyboard-container-audio-strip.handoff-stale {
  box-shadow: inset 0 0 0 1px #fb923c47;
}

.storyboard-container-audio-strip strong, .storyboard-container-audio-strip small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.storyboard-container-audio-strip strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.storyboard-container-audio-strip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.storyboard-container-audio-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.storyboard-container-audio-actions audio {
  width: 180px;
  max-width: 100%;
  height: 32px;
}

.storyboard-audio-redetection-review {
  background: #14b8a614;
  border: 1px solid #2dd4bf57;
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  display: grid;
}

.storyboard-audio-redetection-review strong, .storyboard-audio-redetection-review small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.storyboard-audio-redetection-review strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.storyboard-audio-redetection-review small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 740;
}

.storyboard-audio-redetection-error {
  color: #fecaca;
  background: #7f1d1d47;
  border: 1px solid #f871716b;
  border-radius: 8px;
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 760;
}

.storyboard-transcript-row {
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 8px 10px;
  display: grid;
}

.storyboard-transcript-row + .storyboard-transcript-row {
  border-top: 1px solid #2c3545b8;
}

.storyboard-transcript-row span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.storyboard-transcript-row p {
  color: var(--muted-strong);
  margin: 0;
  font-size: 12px;
  line-height: 1.42;
}

.storyboard-transcript-row.transcript-colored {
  background: color-mix(in srgb, var(--transcript-segment-color) 12%, transparent);
}

.storyboard-transcript-row.transcript-colored span, .storyboard-transcript-row.transcript-colored p {
  color: var(--transcript-segment-color, var(--accent));
}

.storyboard-frame-area-head {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding-bottom: 7px;
  display: flex;
}

.storyboard-frame-area-head strong {
  color: var(--muted-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.storyboard-frame-area-head-meta {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.storyboard-selected-composition-badge {
  border: 1px solid color-mix(in srgb, var(--composition-color) 62%, #94a3b85c);
  background: color-mix(in srgb, var(--composition-color) 16%, #080a0edb);
  min-width: 0;
  max-width: min(360px, 48vw);
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
  overflow: hidden;
}

.storyboard-selected-composition-badge span {
  background: var(--composition-color);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--composition-color) 24%, transparent);
  border-radius: 50%;
  flex: none;
}

.storyboard-sequence-visual-segment {
  z-index: 2;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--storyboard-sequence-segment-color, var(--accent));
  color: #f8fafcd1;
  min-width: 10px;
  height: 10px;
  box-shadow: 0 0 0 2px #080a0e9e, 0 0 16px color-mix(in srgb, var(--storyboard-sequence-segment-color, var(--accent)) 42%, transparent);
  border-radius: 999px;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  display: grid;
  position: absolute;
  top: 11px;
  overflow: hidden;
}

.storyboard-sequence-visual-segment.invalidated {
  outline-offset: 2px;
  outline: 2px dashed #fbbf24d9;
}

.storyboard-sequence-frame-pin {
  z-index: 3;
  box-sizing: border-box;
  background: #ccfbf1f5;
  border: 3px solid #080a0ee0;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 16px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px #2dd4bfc7;
}

.storyboard-sequence-frame-pin.video {
  background: #fdba74f2;
  border-radius: 999px;
}

.storyboard-sequence-guide {
  z-index: 1;
  pointer-events: none;
  background: #94a3b857;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
}

.storyboard-sequence-guide.frame-marker {
  background: #cbd5e16b;
}

.storyboard-sequence-track-shell {
  min-width: 0;
  overflow: visible;
}

.storyboard-sequence-track {
  gap: 8px;
  display: grid;
}

.storyboard-tick-rail, .storyboard-media-track, .storyboard-frame-sequence {
  min-width: 520px;
  position: relative;
}

.storyboard-tick-rail {
  border-bottom: 1px solid var(--line);
}

.storyboard-tick-rail span {
  color: var(--muted);
  white-space: nowrap;
  gap: 2px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
}

.storyboard-tick-rail span:before {
  background: var(--line-strong);
  content: "";
  width: 1px;
  height: 8px;
  margin: 0 auto;
  display: block;
}

.storyboard-media-track, .storyboard-frame-sequence {
  background: #080a0e80;
  border: 1px solid #2c3545e6;
  border-radius: 8px;
  min-height: 246px;
  overflow-x: auto;
}

.storyboard-frame-sequence {
  align-items: stretch;
  gap: 14px;
  padding: 14px;
  display: flex;
}

.storyboard-frame-sequence-grid {
  align-items: stretch;
  gap: 0;
  padding: 14px 0;
  display: grid;
  overflow: visible;
}

.storyboard-frame-sequence-grid .storyboard-placement-card, .storyboard-frame-sequence-grid .storyboard-placement-add-card, .storyboard-frame-sequence-grid .storyboard-placement-add-stack {
  min-width: 0;
}

.storyboard-frame-sequence-grid .storyboard-placement-card {
  isolation: isolate;
}

.storyboard-frame-sequence-grid .storyboard-placement-card[draggable="true"] {
  cursor: grab;
}

.storyboard-frame-sequence-grid .storyboard-placement-card.dragging {
  opacity: .58;
  cursor: grabbing;
  outline: 2px solid #2dd4bfb8;
}

.storyboard-variation-card.animation {
  background: #0d1a20eb;
  border-color: #2dd4bf7a;
}

.storyboard-flf-pair-row {
  background: #080a0e66;
  border: 1px solid #2c3545db;
  border-radius: 8px;
  gap: 0;
  min-width: 520px;
  padding: 12px 0;
  display: grid;
  overflow: visible;
}

.storyboard-flf-pair-slot {
  align-content: start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  display: grid;
}

.storyboard-flf-pair-slot.mixed {
  gap: 10px;
}

.storyboard-flf-pair-slot.entry {
  border-right: 1px solid #f59e0b38;
  padding-right: 8px;
}

.storyboard-flf-pair-slot.exit {
  border-left: 1px solid #f59e0b38;
  padding-left: 8px;
}

.storyboard-boundary-transition-status {
  width: fit-content;
  color: var(--ink-muted);
  text-transform: capitalize;
  border: 1px solid #94a3b857;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 800;
}

.storyboard-boundary-transition-status.queued, .storyboard-boundary-transition-status.running {
  color: #7dd3fc;
  border-color: #38bdf87a;
}

.storyboard-boundary-transition-status.completed {
  color: #5eead4;
  border-color: #2dd4bf7a;
}

.storyboard-boundary-transition-status.stale, .storyboard-boundary-transition-status.failed {
  color: #fda4af;
  border-color: #fb71857a;
}

.storyboard-flf-pair-slot.empty {
  min-height: 132px;
}

.storyboard-flf-pair-head {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.storyboard-flf-pair-head .primary-action, .storyboard-flf-pair-head .secondary-action {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 11px;
}

.storyboard-flf-pair-card {
  background: #111827e6;
  border: 1px solid #fbbf245c;
  border-radius: 8px;
  justify-self: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 220px;
  padding: 8px;
  display: grid;
  position: relative;
}

.storyboard-flf-pair-card.mixed {
  background: #0c121eeb;
  border-color: #60a5fa57;
}

.storyboard-flf-pair-card.resolving {
  background: #0d1a20eb;
  border-color: #2dd4bf94;
  min-height: 126px;
}

.storyboard-flf-pair-card.invalidated {
  background: #1a140feb;
  border-color: #fb923cb8;
}

.storyboard-flf-pair-card.active {
  border-color: #2dd4bfc7;
  box-shadow: 0 0 0 1px #2dd4bf3d;
}

.storyboard-flf-pair-card.collapsed {
  gap: 6px;
}

.storyboard-active-marker {
  color: #99f6e4;
  background: #14b8a633;
  border: 1px solid #2dd4bf80;
  border-radius: 999px;
  align-items: center;
  width: max-content;
  padding: 2px 7px;
  display: inline-flex;
}

.storyboard-format-mismatch-marker {
  color: #f9a8d4;
  background: #9d174d38;
  border: 1px solid #f472b680;
  border-radius: 999px;
  align-items: center;
  width: max-content;
  padding: 2px 7px;
  display: inline-flex;
}

.storyboard-invalidated-marker {
  color: #fed7aa;
  background: #9a341247;
  border: 1px solid #fb923c80;
  border-radius: 999px;
  align-items: center;
  width: max-content;
  padding: 2px 7px;
  display: inline-flex;
}

.storyboard-flf-pair-card .storyboard-attachment-preview {
  width: 100%;
  max-width: 100%;
}

.storyboard-flf-pair-card .storyboard-attachment-preview img, .storyboard-flf-pair-card .storyboard-attachment-preview video {
  object-fit: contain;
  width: 100%;
  min-width: 0;
  height: 100%;
  display: block;
}

.storyboard-transition-kind-label {
  color: var(--muted);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
}

.storyboard-flf-pair-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.storyboard-flf-pair-actions .tiny-action.active {
  color: #99f6e4;
  background: #14b8a62e;
  border-color: #2dd4bfb8;
}

.storyboard-section-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.storyboard-section-head.compact {
  border-bottom: 1px solid #2c3545c7;
  padding-bottom: 7px;
}

.storyboard-section-head strong, .storyboard-section-head small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.storyboard-section-head strong {
  color: var(--ink-strong);
  font-size: 13px;
}

.storyboard-section-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.storyboard-composition-version-controls {
  flex: auto;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  min-width: 220px;
  display: flex;
  position: relative;
}

.storyboard-composition-version-controls select {
  min-width: 180px;
  max-width: 320px;
  color: var(--ink);
  font: inherit;
  background: #03070cd6;
  border: 1px solid #2c3545f0;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 780;
}

.storyboard-composition-version-mode {
  appearance: none;
  color: var(--muted-strong);
  text-transform: uppercase;
  border: 1px solid #2c3545e0;
  border-radius: 999px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 860;
}

button.storyboard-composition-version-mode {
  cursor: pointer;
}

button.storyboard-composition-version-mode:disabled {
  cursor: default;
}

.storyboard-composition-version-mode.frozen {
  color: #d8b4fe;
  background: #581c872e;
  border-color: #a855f79e;
}

.storyboard-composition-version-mode.working {
  color: #99f6e4;
  background: #14b8a61f;
  border-color: #2dd4bf80;
}

.storyboard-composition-version-artifacts {
  color: #cbd5e1;
  white-space: nowrap;
  background: #0f172ab8;
  border: 1px solid #94a3b859;
  border-radius: 8px;
  align-items: center;
  min-height: 28px;
  padding: 0 .65rem;
  font-size: 11px;
  font-weight: 780;
  display: inline-flex;
}

.storyboard-artifact-inventory {
  background: var(--surface-raised, #111827);
  border: 1px solid var(--accent-cyan, #2dd4bf);
  z-index: 12;
  border-radius: 8px;
  gap: 10px;
  width: min(760px, 90vw);
  max-width: min(760px, 90vw);
  max-height: 420px;
  padding: 12px;
  display: grid;
  position: absolute;
  top: 52px;
  right: 12px;
  overflow: auto;
}

.storyboard-artifact-inventory-head, .storyboard-artifact-inventory-summary, .storyboard-artifact-inventory-item {
  align-items: center;
  gap: 10px;
  display: flex;
}

.storyboard-artifact-inventory-head {
  justify-content: space-between;
}

.storyboard-artifact-inventory-summary {
  flex-wrap: wrap;
  font-size: .75rem;
}

.storyboard-artifact-inventory-list {
  gap: 6px;
  display: grid;
}

.storyboard-artifact-inventory-item {
  border-left: 3px solid var(--accent-cyan, #2dd4bf);
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 8px;
}

.storyboard-artifact-inventory-item.missing {
  border-left-color: #fb7185;
}

.storyboard-artifact-inventory-item small {
  color: var(--text-muted, #94a3b8);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.storyboard-composition-version-artifacts.complete {
  color: #99f6e4;
  border-color: #2dd4bf73;
}

.storyboard-composition-version-artifacts.partial {
  color: #fde68a;
  border-color: #facc158c;
}

.storyboard-composition-version-artifacts.degraded {
  color: #fca5a5;
  border-color: #f871719e;
}

.storyboard-vace-cache-badge {
  color: #cbd5e1;
  white-space: nowrap;
  background: #0f172ab8;
  border: 1px solid #94a3b859;
  border-radius: 8px;
  align-items: center;
  min-height: 28px;
  padding: 0 .65rem;
  font-size: 11px;
  font-weight: 860;
  display: inline-flex;
}

.storyboard-vace-cache-state {
  align-items: center;
  gap: .4rem;
  min-width: 0;
  display: inline-flex;
}

.storyboard-vace-cache-details {
  scrollbar-width: thin;
  align-items: center;
  gap: .25rem;
  max-width: min(34vw, 420px);
  display: inline-flex;
  overflow-x: auto;
}

.storyboard-vace-cache-pill {
  color: #cbd5e1;
  white-space: nowrap;
  background: #0f172a85;
  border: 1px solid #94a3b847;
  border-radius: 7px;
  align-items: center;
  min-height: 24px;
  padding: 0 .45rem;
  font-size: 10px;
  font-weight: 820;
  display: inline-flex;
}

.storyboard-vace-cache-badge.ready {
  color: #bbf7d0;
  border-color: #22c55e8c;
}

.storyboard-vace-cache-pill.ready {
  color: #bbf7d0;
  border-color: #22c55e80;
}

.storyboard-vace-cache-badge.missing, .storyboard-vace-cache-badge.processing {
  color: #fde68a;
  border-color: #eab3088c;
}

.storyboard-vace-cache-pill.missing, .storyboard-vace-cache-pill.processing {
  color: #fde68a;
  border-color: #eab30873;
}

.storyboard-vace-cache-badge.stale, .storyboard-vace-cache-badge.failed {
  color: #fecdd3;
  border-color: #f43f5e99;
}

.storyboard-vace-cache-pill.stale, .storyboard-vace-cache-pill.failed {
  color: #fecdd3;
  border-color: #f43f5e80;
}

.secondary-action.compact {
  min-height: 28px;
  padding: 5px 9px;
  font-size: 12px;
}

.storyboard-composition-section {
  background: none;
  border: 0;
  border-radius: 0;
  grid-column: 1 / -1;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 0;
  display: grid;
  overflow: visible;
}

.storyboard-composition-section > .storyboard-section-head.compact {
  border-bottom: 0;
  padding-bottom: 0;
}

.storyboard-composition-grid {
  --timeline-z-gutter-backdrop: 27;
  --timeline-z-gutter-content: 28;
  overflow-anchor: none;
  overscroll-behavior-x: contain;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "timeline";
  gap: 10px;
  min-width: 0;
  display: grid;
  position: relative;
  overflow-x: auto;
}

.storyboard-timeline-sticky-gutter-backdrop {
  z-index: var(--timeline-z-gutter-backdrop);
  width: calc(var(--timeline-label-gutter, 140px) + 19px);
  pointer-events: none;
  background: #000;
  border-right: 1px solid #2c3545eb;
  grid-area: timeline;
  justify-self: start;
  height: 100%;
  position: sticky;
  left: 0;
  box-shadow: 12px 0 16px -15px #94a3b8d1;
}

.storyboard-frame-area.integrated {
  grid-template-columns: var(--timeline-label-gutter, 140px) minmax(var(--composition-timeline-track-width, 0px), 1fr);
  gap: 8px calc(10px + var(--timeline-leading-buffer, 0px));
  border-top: 1px solid #2c3545c7;
  min-width: 0;
  padding-top: 8px;
  display: grid;
}

.storyboard-frame-area.integrated .storyboard-sequence-track-shell {
  grid-column: 2;
}

.storyboard-status-bar-workspace {
  padding-bottom: calc(var(--workbench-bottom-dock-height, 82px) + 8px);
  min-width: 0;
}

.storyboard-bottom-dock {
  bottom: 0;
  left: var(--project-task-sidebar-effective-width, 0px);
  z-index: var(--storyboard-layer-status-bar);
  position: fixed;
  right: 0;
}

.storyboard-timeline-status-bar {
  height: var(--workbench-status-bar-height, 56px);
  box-sizing: border-box;
  background: #080e15;
  border-top: 1px solid #2c3545e0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 18px;
  display: flex;
}

.storyboard-timeline-status-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--muted);
  flex: 100px;
  font-size: 12px;
  overflow: hidden;
}

.storyboard-timeline-status-control, .storyboard-timeline-status-fallback {
  flex-shrink: 0;
  min-width: 0;
}

.storyboard-timeline-status-control:empty, .storyboard-timeline-status-control:not(:empty) + .storyboard-timeline-status-fallback {
  display: none;
}

body:has(.storyboard-timeline-status-bar) {
  --workbench-status-bar-height: 56px;
  --workbench-timeline-scroll-height: 26px;
  --workbench-bottom-dock-height: calc(var(--workbench-status-bar-height) + var(--workbench-timeline-scroll-height));
}

.storyboard-timeline-status-debug {
  flex: 0 620px;
  min-width: 90px;
}

.debug-log-drawer.docked {
  pointer-events: auto;
  display: block;
  position: static;
}

.debug-log-drawer.docked .debug-log-tab {
  width: 100%;
  min-height: 32px;
  box-shadow: none;
  border: 1px solid #2dd4bf47;
  border-radius: 6px;
  padding: 4px 8px;
  display: grid;
}

.debug-log-drawer.docked .debug-log-panel {
  position: absolute;
  bottom: calc(100% + 1px);
  left: 8px;
  right: 8px;
}

.debug-log-drawer.docked.open .debug-log-tab {
  background: #2dd4bf24;
}

@media (max-width: 600px) {
  .storyboard-timeline-status-bar {
    gap: 6px;
    padding-inline: 8px;
  }

  .storyboard-timeline-status-debug {
    flex: none;
  }

  .debug-log-drawer.docked .debug-log-tab {
    grid-template-columns: max-content;
  }

  .debug-log-drawer.docked .debug-log-tab strong, .debug-log-drawer.docked .debug-log-tab small {
    display: none;
  }

  .storyboard-timeline-status-bar .storyboard-timeline-scale-control {
    grid-template-columns: 12px minmax(32px, 1fr) 16px max-content;
    gap: 4px;
    width: min(240px, 55vw);
    padding-inline: 4px;
  }
}

.storyboard-timeline-scale-control {
  background: #080a0e80;
  border: 1px solid #2c3545e0;
  border-radius: 8px;
  grid-template-columns: 18px minmax(120px, 220px) 24px minmax(42px, auto);
  align-items: center;
  gap: 8px;
  width: min(348px, 100%);
  max-width: 100%;
  padding: 7px 9px;
  display: inline-grid;
}

.storyboard-timeline-scale-control input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.storyboard-timeline-scale-control output {
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}

.storyboard-timeline-scale-icon {
  height: 16px;
  display: inline-block;
  position: relative;
}

.storyboard-timeline-scale-icon.compact:before, .storyboard-timeline-scale-icon.compact:after {
  content: "";
  border-bottom: 6px solid #94a3b8bf;
  border-left: 5px solid #0000;
  border-right: 5px solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  bottom: 3px;
}

.storyboard-timeline-scale-icon.compact:before {
  left: 1px;
  transform: scale(.65);
}

.storyboard-timeline-scale-icon.compact:after {
  right: 1px;
}

.storyboard-timeline-scale-icon.expanded:before, .storyboard-timeline-scale-icon.expanded:after {
  content: "";
  border-bottom: 10px solid #94a3b8c7;
  border-left: 7px solid #0000;
  border-right: 7px solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  bottom: 2px;
}

.storyboard-timeline-scale-icon.expanded:before {
  left: 0;
  transform: translateX(-1px)scale(.78);
}

.storyboard-timeline-scale-icon.expanded:after {
  right: 0;
}

.storyboard-composition-timeline {
  background: #080a0e61;
  border: 1px solid #2c3545c7;
  border-radius: 8px;
  grid-area: timeline;
  gap: 6px;
  width: max-content;
  min-width: 100%;
  padding: 8px;
  display: grid;
  position: relative;
  overflow-x: visible;
}

.storyboard-composition-timeline [data-storyboard-timeline-sticky-gutter] {
  z-index: var(--timeline-z-gutter-content);
  position: sticky;
  left: 8px;
}

.storyboard-frame-association-overlay {
  z-index: 7;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}

.storyboard-frame-association-connector {
  fill: none;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  stroke-width: 1.5px;
  opacity: .9;
  filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 55%, transparent));
  pointer-events: none;
}

.storyboard-frame-association-connector.stale {
  opacity: .62;
  filter: drop-shadow(0 0 4px #f59e0bb8);
}

.storyboard-frame-association-connector.invalid {
  stroke-dasharray: 2 7;
  opacity: .48;
  filter: drop-shadow(0 0 4px #fb7185ad);
}

.storyboard-frame-association-connector.missing {
  stroke-dasharray: 3 8;
  opacity: .42;
}

.storyboard-frame-association-connector.dragging {
  opacity: .12;
}

.storyboard-frame-association-source {
  opacity: .92;
  pointer-events: none;
}

.storyboard-frame-association-source.stale, .storyboard-frame-association-source.invalid, .storyboard-frame-association-source.missing {
  opacity: .5;
}

.storyboard-frame-association-anchor {
  z-index: 0;
  pointer-events: none;
  width: 2px;
  height: 2px;
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
}

.storyboard-composition-ruler {
  width: var(--timeline-canvas-width, var(--composition-timeline-track-width, 0px));
  height: 22px;
  margin-left: calc(var(--timeline-label-gutter, 140px) + 10px + var(--timeline-leading-buffer, 0px));
  cursor: crosshair;
  touch-action: none;
  border-bottom: 1px solid #94a3b838;
  transition: border-color .12s ease-out, background .12s ease-out;
  position: relative;
}

.storyboard-composition-ruler:hover, .storyboard-composition-ruler:focus-visible, .storyboard-composition-ruler.active {
  background: linear-gradient(#0000, #2dd4bf0f);
  border-bottom-color: #2dd4bf9e;
  outline: none;
}

.storyboard-composition-ruler.scrubbing {
  cursor: ew-resize;
  background: linear-gradient(#0000, #2dd4bf1f);
}

.storyboard-composition-ruler span {
  color: var(--muted);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 850;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.storyboard-composition-ruler span:after {
  content: "";
  background: #94a3b885;
  width: 1px;
  height: 8px;
  margin: 4px auto 0;
  display: block;
}

.storyboard-timeline-playhead-rail {
  z-index: 24;
  width: var(--timeline-canvas-width, var(--composition-timeline-track-width, 0px));
  top: 8px;
  bottom: 8px;
  left: calc(18px + var(--timeline-label-gutter, 140px) + var(--timeline-leading-buffer, 0px));
  pointer-events: none;
  position: absolute;
  overflow: visible;
}

.storyboard-timeline-playhead {
  background: #fbbf24;
  width: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-1px);
  box-shadow: 0 0 0 1px #070b12d1, 0 0 9px #fbbf246b;
}

.storyboard-timeline-playhead:before {
  content: "";
  background: #fbbf24;
  border: 2px solid #070b12e6;
  border-radius: 999px;
  width: 11px;
  height: 11px;
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px #fbbf24, 0 0 12px #fbbf2480;
}

.storyboard-timeline-playhead.playing, .storyboard-timeline-playhead.scrubbing {
  background: var(--accent);
  box-shadow: 0 0 0 1px #070b12d1, 0 0 12px #2dd4bfb8;
}

.storyboard-timeline-playhead.playing:before, .storyboard-timeline-playhead.scrubbing:before {
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 14px #2dd4bfad;
}

.storyboard-composition-transcript-row, .storyboard-composition-audio-row, .storyboard-composition-vace-row, .storyboard-composition-overview-row, .storyboard-composition-layer-row {
  grid-template-columns: var(--timeline-label-gutter, 140px) var(--timeline-canvas-width, var(--composition-timeline-track-width, 0px));
  gap: calc(10px + var(--timeline-leading-buffer, 0px));
  min-width: calc(var(--timeline-label-gutter, 140px)
    + 10px
    + var(--timeline-leading-buffer, 0px)
    + var(--timeline-canvas-width, var(--composition-timeline-track-width, 0px)));
  display: grid;
}

.storyboard-composition-row-label {
  min-width: 0;
  color: var(--muted-strong);
  text-transform: uppercase;
  background: #000;
  align-items: center;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  box-shadow: 12px 0 14px -14px #94a3b8b8;
}

.storyboard-composition-row-label.timeline-details-trigger {
  text-align: left;
  cursor: pointer;
  background: #000;
  border: 0;
  width: 100%;
  padding: 0;
}

.storyboard-composition-row-label.timeline-details-trigger:hover, .storyboard-composition-row-label.timeline-details-trigger:focus-visible, .storyboard-composition-row-label.timeline-details-trigger[aria-expanded="true"] {
  color: var(--accent);
  outline: none;
}

.storyboard-composition-row-label.timeline-details-trigger:focus-visible {
  text-underline-offset: 4px;
  text-decoration: underline;
}

.storyboard-composition-row-label.audio {
  color: var(--accent);
}

.storyboard-composition-row-label.transcript {
  color: var(--muted-strong);
}

.storyboard-composition-row-label.vace-joins {
  color: #d8b4fe;
}

.storyboard-transition-attachment-details {
  z-index: 90;
  color: #e2e8f0;
  background: #080e18f7;
  border: 1px solid #60a5fa94;
  border-radius: 10px;
  gap: 8px;
  width: min(480px, 100vw - 36px);
  padding: 12px;
  font-size: 11px;
  display: grid;
  position: fixed;
  bottom: 72px;
  right: 18px;
  box-shadow: 0 18px 54px #0000007a;
}

.storyboard-transition-attachment-details > div {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.storyboard-transition-attachment-details .error {
  color: #fbbf24;
}

.storyboard-transition-attachment-details > section, .storyboard-transition-attachment-details > section > article {
  gap: 4px;
  display: grid;
}

.storyboard-transition-attachment-details > section {
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}

.storyboard-transition-attachment-details > section > article {
  background: #0f172ab8;
  border: 1px solid #60a5fa3d;
  border-radius: 8px;
  padding: 8px;
}

.storyboard-transition-attachment-details > section > article[data-active="true"] {
  border-color: #2dd4bfb8;
  box-shadow: inset 3px 0 #2dd4bfd1;
}

.storyboard-transition-attachment-details > section > article > button {
  color: #dbeafe;
  text-align: left;
  background: #070d17d1;
  border: 1px solid #60a5fa57;
  border-radius: 6px;
  gap: 3px;
  padding: 8px;
  display: grid;
}

.storyboard-transition-attachment-details > section > article > button:hover:not(:disabled), .storyboard-transition-attachment-details > section > article > button:focus-visible:not(:disabled) {
  border-color: #2dd4bfcc;
  outline: none;
}

.storyboard-transition-attachment-details > section > article > button small, .storyboard-transition-attachment-details > section > article > button span {
  color: #94a3b8;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.storyboard-transition-attention-notice {
  z-index: 96;
  color: #fde68a;
  background: #110e07f7;
  border: 1px solid #fbbf24b3;
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  max-width: min(560px, 100vw - 36px);
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  position: fixed;
  bottom: 72px;
  right: 18px;
  box-shadow: 0 16px 42px #00000070;
}

.storyboard-transition-attention-notice > span {
  flex: 1;
}

.storyboard-transition-attention-notice button {
  color: #fef3c7;
  font: inherit;
  cursor: pointer;
  background: #78350f5c;
  border: 1px solid #fbbf2480;
  border-radius: 6px;
  padding: 5px 8px;
}

.storyboard-composition-row-track {
  isolation: isolate;
  background: #080a0e6b;
  border: 1px solid #2c3545e6;
  border-radius: 8px;
  min-width: 0;
  min-height: 42px;
  position: relative;
  overflow: hidden;
}

.storyboard-composition-row-track[data-timeline-canvas] {
  box-sizing: border-box;
  width: var(--timeline-canvas-width, var(--composition-timeline-track-width, 0px));
  min-width: var(--timeline-canvas-width, var(--composition-timeline-track-width, 0px));
}

.storyboard-composition-row-track[data-timeline-seek-surface] {
  cursor: crosshair;
}

.storyboard-composition-row-track [data-timeline-seek-blocker] {
  cursor: default;
}

.storyboard-composition-row-track.audio {
  min-height: 70px;
  padding-right: 48px;
}

.storyboard-composition-row-track.transcript {
  min-height: 64px;
}

.storyboard-composition-row-track.vace-joins {
  background: #080a0e52;
  min-height: 34px;
}

.storyboard-timeline-data-backdrop {
  z-index: 82;
  background: #01060adb;
  padding: 18px;
}

.storyboard-timeline-data-modal {
  background: #05090d;
  border: 1px solid #5eead461;
  border-radius: 8px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  width: min(100%, 960px);
  max-height: calc(100vh - 36px);
  padding: 16px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 26px 90px #000000a3;
}

.storyboard-timeline-data-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  display: flex;
}

.storyboard-timeline-data-head > div {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.storyboard-timeline-data-head span {
  color: var(--accent);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 900;
}

.storyboard-timeline-data-head h2 {
  color: var(--ink-strong);
  margin: 0;
  font-size: 18px;
}

.storyboard-timeline-data-head small {
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
}

.storyboard-timeline-data-table-scroll {
  background: #080a0eb8;
  border: 1px solid #2c3545e6;
  border-radius: 6px;
  min-width: 0;
  overflow: auto;
}

.storyboard-timeline-data-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  color: var(--ink-strong);
  font-size: 12px;
}

.storyboard-timeline-data-table th, .storyboard-timeline-data-table td {
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #2c3545b8;
  padding: 10px 12px;
}

.storyboard-timeline-data-table th {
  z-index: 1;
  color: var(--muted-strong);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #0b1118;
  font-size: 10px;
  position: sticky;
  top: 0;
}

.storyboard-composition-overview-table td:nth-child(-n+4) {
  font-variant-numeric: tabular-nums;
}

.storyboard-vace-details-table {
  min-width: 980px;
}

.storyboard-vace-details-tabs {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.storyboard-vace-details-tabs button {
  color: var(--muted-strong);
  cursor: pointer;
  font: inherit;
  background: #0f172ac7;
  border: 1px solid #94a3b857;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
}

.storyboard-vace-details-tabs button.active {
  color: var(--ink-strong);
  background: #0d94882e;
  border-color: #2dd4bfd1;
}

.storyboard-vace-details-table td:nth-child(2) {
  font-variant-numeric: tabular-nums;
}

.storyboard-vace-details-table td:last-child {
  text-overflow: ellipsis;
  max-width: 320px;
  overflow: hidden;
}

.storyboard-vace-details-group th {
  color: var(--muted-strong);
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  background: #14b8a614;
  padding: 8px 10px;
  font-size: 10px;
}

.storyboard-vace-details-status {
  color: var(--muted-strong);
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid #94a3b861;
  border-radius: 999px;
  align-items: center;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
}

.storyboard-vace-details-status.cached {
  color: #6ee7b7;
  border-color: #34d3997a;
}

.storyboard-vace-details-status.rendering {
  color: var(--accent);
  border-color: #2dd4bf8a;
}

.storyboard-vace-details-status.stale {
  color: #fda4af;
  border-color: #fb718585;
}

.storyboard-vace-details-status.missing {
  color: #fde047;
  border-color: #facc157a;
}

.storyboard-timeline-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.storyboard-timeline-data-table tbody tr:hover {
  background: #2dd4bf12;
}

.storyboard-timeline-data-empty {
  color: var(--muted-strong);
  text-align: center;
  border: 1px dashed #5eead447;
  border-radius: 6px;
  margin: 0;
  padding: 24px;
}

@media (max-width: 640px) {
  .storyboard-timeline-data-backdrop {
    padding: 8px;
  }

  .storyboard-timeline-data-modal {
    max-height: calc(100vh - 16px);
    padding: 12px;
  }

  .storyboard-timeline-data-head {
    flex-direction: column;
    align-items: stretch;
  }

  .storyboard-timeline-data-head .secondary-action {
    align-self: flex-end;
  }
}

.storyboard-composition-visual-timing-overlay {
  z-index: 3;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.storyboard-composition-visual-timing-overlay .storyboard-sequence-visual-segment {
  z-index: 4;
  opacity: .96;
  cursor: help;
  pointer-events: auto;
  transition: box-shadow .12s ease-out, filter .12s ease-out, transform .12s ease-out;
  top: 50%;
  transform: translateY(-50%);
}

.storyboard-composition-visual-timing-overlay .storyboard-sequence-visual-segment:hover, .storyboard-composition-visual-timing-overlay .storyboard-sequence-visual-segment:focus-visible {
  z-index: 7;
  filter: brightness(1.22) saturate(1.16);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #080a0edb,
    0 0 20px color-mix(in srgb, var(--storyboard-sequence-segment-color, var(--accent)) 86%, transparent),
    0 0 34px color-mix(in srgb, var(--storyboard-sequence-segment-color, var(--accent)) 48%, transparent);
  outline: 2px solid #f8fafceb;
  transform: translateY(-50%)scaleY(1.45);
}

.storyboard-composition-visual-timing-overlay .storyboard-sequence-frame-pin {
  z-index: 5;
  top: 50%;
}

.storyboard-composition-visual-timing-overlay .storyboard-sequence-guide {
  z-index: 1;
}

.storyboard-visual-segment-tooltip {
  z-index: 100;
  color: #f8fafc;
  pointer-events: none;
  background: #040b12f5;
  border: 1px solid #5eead49e;
  border-radius: 7px;
  gap: 2px;
  min-width: 180px;
  max-width: min(300px, 100vw - 24px);
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.25;
  display: grid;
  position: fixed;
  transform: translate(14px, calc(-100% - 12px));
  box-shadow: 0 8px 22px #00000070;
}

.storyboard-visual-segment-tooltip strong {
  font-size: 12px;
  font-weight: 900;
}

.storyboard-visual-segment-tooltip span {
  color: #99f6e4;
  font-weight: 750;
}

.storyboard-visual-segment-tooltip small {
  color: #e2e8f0cc;
  font-size: 10px;
}

.storyboard-sequence-diagnostic-badge {
  z-index: 8;
  color: #fecaca;
  text-align: center;
  background: #450a0af0;
  border: 1px solid #fb7185d9;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 900;
  line-height: 16px;
  position: absolute;
  top: 3px;
  right: 3px;
}

.storyboard-composition-vace-line {
  z-index: 1;
  pointer-events: none;
  background: #94a3b857;
  border-radius: 999px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  transform: translateY(-50%);
}

.storyboard-composition-vace-dot {
  z-index: 2;
  border: 2px solid #080a0ef2;
  border-radius: 999px;
  width: 13px;
  height: 13px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.storyboard-composition-vace-dot.projected-final-output {
  border-color: #d8b4feeb;
  width: 11px;
  height: 11px;
}

.storyboard-composition-boundary-dot {
  z-index: 6;
  pointer-events: auto;
  border: 1px solid #080a0eeb;
  border-radius: 2px;
  width: 8px;
  height: 18px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.storyboard-composition-boundary-dot.continuous-padding {
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf86b;
}

.storyboard-composition-boundary-dot.boundary-flf-covered, .storyboard-composition-boundary-dot.intentional-hard-cut, .storyboard-composition-boundary-dot.trimmed-or-occluded {
  opacity: .76;
  background: #94a3b8;
}

.storyboard-composition-boundary-dot.invalid-unmaterialized {
  background: #fb7185;
  width: 10px;
  height: 24px;
  box-shadow: 0 0 0 2px #fb718552, 0 0 14px #fb718594;
}

.storyboard-composition-vace-dot.ready {
  background: #22c55e;
  box-shadow: 0 0 0 1px #22c55e85, 0 0 12px #22c55e5c;
}

.storyboard-composition-vace-dot.missing {
  background: #64748b;
  box-shadow: 0 0 0 1px #94a3b86b, 0 0 10px #94a3b82e;
}

.storyboard-composition-vace-dot.stale {
  background: #eab308;
  box-shadow: 0 0 0 1px #eab3088f, 0 0 12px #eab30852;
}

.storyboard-composition-vace-dot.render-processing, .storyboard-composition-overview-span.render-processing, .storyboard-composition-block.render-processing, .storyboard-composition-generated-clip.render-processing {
  z-index: 9;
  outline-offset: 1px;
  outline: 2px solid #f8fafcf5;
  animation: 1.05s ease-in-out infinite storyboard-render-target-pulse;
  box-shadow: 0 0 0 4px #2dd4bf6b, 0 0 24px #2dd4bfd1, inset 0 0 0 1px #ffffffbd;
}

.storyboard-composition-vace-dot.render-processing {
  outline-offset: 3px;
  outline-width: 3px;
}

@keyframes storyboard-render-target-pulse {
  0%, 100% {
    filter: brightness(1.04) saturate(1.04);
    outline-offset: 1px;
  }

  50% {
    filter: brightness(1.32) saturate(1.2);
    outline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .storyboard-composition-vace-dot.render-processing, .storyboard-composition-overview-span.render-processing, .storyboard-composition-block.render-processing, .storyboard-composition-generated-clip.render-processing {
    filter: brightness(1.18);
    animation: none;
  }
}

.storyboard-composition-sentence-band {
  z-index: 1;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--transcript-segment-color) 18%, transparent),
      color-mix(in srgb, var(--transcript-segment-color) 10%, transparent)),
    #0f172a14;
  pointer-events: none;
  border-radius: 6px;
  min-width: 2px;
  position: absolute;
  top: 5px;
  bottom: 5px;
}

.storyboard-composition-sentence-boundary, .storyboard-composition-transcript-boundary {
  z-index: 4;
  background-image: repeating-linear-gradient(to bottom,
    color-mix(in srgb, var(--transcript-segment-color) 88%, white 8%) 0 4px,
    transparent 4px 8px);
  pointer-events: none;
  border-radius: 999px;
  width: 2px;
  position: absolute;
  top: 6px;
  bottom: 6px;
  transform: translateX(-1px);
  box-shadow: 0 0 0 1px #080a0e7a;
}

.storyboard-composition-flf-snap-guide {
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(#fbbf24eb 0 3px, #0000 3px 6px);
  width: 1px;
  position: absolute;
  top: 3px;
  bottom: 3px;
  transform: translateX(-.5px);
  box-shadow: 0 0 10px #fbbf243d;
}

.storyboard-composition-transcript-segment {
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--transcript-segment-color) 82%, white 10%);
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--transcript-segment-color) 26%, transparent),
      color-mix(in srgb, var(--transcript-segment-color) 16%, transparent)),
    #0f172a6b;
  min-width: 2px;
  color: var(--ink-strong);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--transcript-segment-color) 50%, transparent),
    inset 0 0 0 999px color-mix(in srgb, var(--transcript-segment-color) 9%, transparent);
  border-radius: 6px;
  align-content: center;
  padding: 6px 10px;
  display: grid;
  position: absolute;
  top: 7px;
  bottom: 7px;
  overflow: hidden;
}

.storyboard-composition-transcript-segment.label-hidden {
  padding-inline: 0;
}

.storyboard-composition-transcript-segment strong, .storyboard-composition-transcript-segment small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.storyboard-composition-transcript-segment strong {
  color: #f8fafcf0;
  font-size: 11px;
  font-weight: 900;
}

.storyboard-composition-transcript-segment small {
  color: #e2e8f0d6;
  font-size: 11px;
  font-weight: 750;
}

.storyboard-composition-audio-segment {
  z-index: 2;
  color: #e0f2fef5;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #14b8a657;
  border: 1px solid #2dd4bfb8;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  min-width: 26px;
  font-size: 12px;
  font-weight: 850;
  display: flex;
  position: absolute;
  top: 7px;
  bottom: 7px;
  overflow: hidden;
}

.storyboard-composition-audio-segment-waveform {
  z-index: 1;
  opacity: .72;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  gap: 2px;
  min-width: 0;
  display: flex;
  position: absolute;
  inset: 8px;
}

.storyboard-composition-audio-segment-waveform span {
  background: #2dd4bfb8;
  border-radius: 999px;
  flex: 1 1 0;
  min-width: 1px;
  max-width: 8px;
  box-shadow: 0 0 8px #2dd4bf33;
}

.storyboard-composition-audio-segment-label {
  z-index: 2;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #080d1447;
  border-radius: 999px;
  max-width: calc(100% - 14px);
  padding: 0 7px;
  position: relative;
  overflow: hidden;
}

.storyboard-composition-audio-segment.composition-audio {
  cursor: context-menu;
  background: #0ea5e95c;
  border-color: #f8fafcd1;
  box-shadow: inset 0 -2px #2dd4bfb8;
}

.storyboard-file-button.storyboard-composition-audio-add {
  z-index: 6;
  color: #f0fdfafa;
  border-radius: 50%;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.storyboard-composition-audio-error {
  z-index: 6;
  max-width: min(360px, 58%);
  color: var(--danger);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  position: absolute;
  bottom: 5px;
  right: 45px;
  overflow: hidden;
}

.storyboard-composition-guide {
  z-index: 1;
  pointer-events: none;
  background: #94a3b857;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
}

.storyboard-composition-guide.frame-marker {
  background: #cbd5e16b;
}

.storyboard-composition-guide.time-tick {
  z-index: 0;
  background: #94a3b829;
}

.storyboard-composition-overview-span, .storyboard-composition-block {
  z-index: 2;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--composition-color) 86%, white 8%);
  background: color-mix(in srgb, var(--composition-color) 36%, #0f172af5);
  min-width: 42px;
  color: var(--ink-strong);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 6px;
  align-items: center;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  position: absolute;
  top: 8px;
  bottom: 8px;
  overflow: hidden;
}

.storyboard-composition-overview-span {
  justify-content: center;
  min-width: 0;
  padding: 0 8px;
}

.storyboard-composition-block.resolved-visible, .storyboard-composition-trim-ghost {
  min-width: 0;
}

.storyboard-composition-overview-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.storyboard-composition-overview-span.generated-layer {
  padding: 0 3px;
}

.storyboard-composition-overview-span.compact {
  padding: 0 2px;
}

.storyboard-composition-overview-span.compact .storyboard-composition-overview-label {
  display: none;
}

.storyboard-composition-overview-span.generated-layer:before {
  content: "↔";
  color: var(--ink-strong);
  text-align: center;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  display: block;
  overflow: hidden;
}

.storyboard-composition-overview-span.resolved {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--composition-color) 68%, transparent);
}

.storyboard-composition-overview-span.selected, .storyboard-composition-block.selected {
  box-shadow: 0 0 0 2px #2dd4bf6b, 0 0 18px color-mix(in srgb, var(--composition-color) 42%, transparent);
}

.storyboard-composition-overview-span.selected {
  box-shadow: inset 0 0 0 2px #e2e8f0c7,
    inset 0 -2px 0 color-mix(in srgb, var(--composition-color) 68%, transparent);
}

.storyboard-composition-overview-span.boundary-flf {
  --flf-accent: #5eead4;
  z-index: 3;
  border-color: color-mix(in srgb, var(--flf-accent) 86%, white 8%);
  background: color-mix(in srgb, var(--flf-accent) 48%, #040b12e6);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--flf-accent) 72%, transparent);
  color: #f8fafc;
  gap: 4px;
}

.storyboard-composition-overview-span.boundary-flf.exit {
  --flf-accent: #fbbf24;
}

.storyboard-composition-overview-span.boundary-flf.queued, .storyboard-composition-overview-span.boundary-flf.running, .storyboard-composition-overview-span.boundary-flf.optimistic {
  background-image: repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--flf-accent) 48%, #040b12e6) 0,
    color-mix(in srgb, var(--flf-accent) 48%, #040b12e6) 6px,
    color-mix(in srgb, var(--flf-accent) 24%, #040b12f0) 6px,
    color-mix(in srgb, var(--flf-accent) 24%, #040b12f0) 12px);
  background-size: 17px 17px;
  animation: .8s linear infinite storyboard-boundary-flf-progress;
}

.storyboard-composition-overview-span.boundary-flf.stale {
  --flf-accent: #f59e0b;
}

.storyboard-composition-overview-span.boundary-flf.failed {
  --flf-accent: #f87171;
}

.storyboard-composition-overview-span.boundary-flf em {
  background: #020617b8;
  border-radius: 999px;
  flex: none;
  place-items: center;
  min-width: 14px;
  height: 14px;
  font-size: 8px;
  font-style: normal;
  display: grid;
}

.storyboard-composition-overview-span.boundary-flf:hover, .storyboard-composition-overview-span.boundary-flf:focus-visible {
  filter: brightness(1.18);
  outline-offset: 1px;
  outline: 1px solid #f8fafcd1;
}

.storyboard-composition-overview-span.transition {
  --overview-transition-accent: #38bdf8;
  z-index: 4;
  border-color: color-mix(in srgb, var(--overview-transition-accent) 82%, white 10%);
  background: color-mix(in srgb, var(--overview-transition-accent) 34%, #020617f0);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--overview-transition-accent) 70%, transparent);
  color: #f8fafc;
  cursor: default;
  gap: 4px;
}

.storyboard-composition-overview-span.transition.ghost, .storyboard-composition-overview-span.transition.empty, .storyboard-composition-overview-span.transition.configured, .storyboard-composition-overview-span.transition:not(.playability-active) {
  box-shadow: none;
  border-style: dashed;
}

.storyboard-composition-overview-span.transition.ghost, .storyboard-composition-overview-span.transition.empty {
  --overview-transition-accent: #94a3b8;
  background-image: repeating-linear-gradient(-45deg, #0000 0 8px, #94a3b824 8px 16px);
}

.storyboard-composition-overview-span.transition.queued, .storyboard-composition-overview-span.transition.running {
  background-image: repeating-linear-gradient(-45deg, #0000 0 5px, #ffffff24 5px 10px);
  animation: .8s linear infinite storyboard-boundary-flf-progress;
}

.storyboard-composition-overview-span.transition.stale {
  --overview-transition-accent: #f59e0b;
}

.storyboard-composition-overview-span.transition.failed, .storyboard-composition-overview-span.transition.blocked, .storyboard-composition-overview-span.transition.invalid, .storyboard-composition-overview-span.transition.projection-overlap {
  --overview-transition-accent: #f87171;
}

.storyboard-composition-overview-span.transition.speculative {
  opacity: .72;
  outline-offset: 1px;
  outline: 1px dashed #e2e8f0c7;
}

@media (prefers-reduced-motion: reduce) {
  .storyboard-composition-overview-span.transition.queued, .storyboard-composition-overview-span.transition.running {
    animation: none;
  }
}

.storyboard-composition-layer-list {
  gap: 4px;
  display: grid;
}

.storyboard-composition-layer-label {
  min-width: 0;
  color: var(--muted);
  cursor: grab;
  font: inherit;
  text-align: left;
  background: #0f172ab8;
  border: 1px solid #2c3545e6;
  border-radius: 8px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 2px 8px;
  padding: 7px;
  display: grid;
  box-shadow: 12px 0 14px -14px #94a3b8b8;
}

.storyboard-composition-layer-label:active {
  cursor: grabbing;
}

.storyboard-composition-layer-label.editing {
  cursor: default;
}

.storyboard-composition-layer-row.add-layer {
  align-items: center;
}

.storyboard-composition-add-layer-button {
  color: #ccfbf1f5;
  cursor: pointer;
  width: 36px;
  height: 36px;
  font: inherit;
  background: #0f172ab8;
  border: 1px solid #2dd4bf7a;
  border-radius: 8px;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  display: grid;
}

.storyboard-composition-add-layer-button:hover:not(:disabled), .storyboard-composition-add-layer-button:focus-visible {
  background: #14b8a629;
  border-color: #5eead4d1;
  outline: none;
  box-shadow: 0 0 0 2px #2dd4bf29;
}

.storyboard-composition-add-layer-button:disabled {
  color: #94a3b88a;
  cursor: not-allowed;
  border-color: #47556985;
}

.storyboard-composition-row-track.add-layer {
  background: none;
  border-color: #0000;
  min-height: 56px;
}

.storyboard-composition-row-track.add-layer.annotations {
  background: #080a0e38;
  border-top: 1px solid #94a3b824;
  border-bottom: 1px solid #94a3b824;
  overflow: visible;
}

.storyboard-composition-layer-row.dragging-layer {
  opacity: .72;
}

.storyboard-composition-layer-label span:not(.storyboard-composition-drag-grip), .storyboard-composition-layer-label strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.storyboard-composition-layer-label strong {
  grid-column: 2;
  font-size: 12px;
}

.storyboard-composition-layer-name-input {
  width: 100%;
  min-width: 0;
  color: var(--ink-strong);
  font: inherit;
  background: #020617d1;
  border: 1px solid #2dd4bfad;
  border-radius: 6px;
  grid-column: 2;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 850;
}

.storyboard-composition-layer-name-input:focus {
  border-color: #5eead4e6;
  outline: none;
  box-shadow: 0 0 0 2px #2dd4bf2e;
}

.storyboard-composition-context-menu {
  z-index: 80;
  background: #080d16fa;
  border: 1px solid #2dd4bf57;
  border-radius: 8px;
  min-width: 178px;
  padding: 5px;
  display: grid;
  position: fixed;
  overflow: hidden;
  box-shadow: 0 18px 48px #0000006b;
}

.storyboard-composition-context-menu button {
  min-height: 34px;
  color: var(--ink-strong);
  cursor: pointer;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  align-items: center;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 850;
  display: flex;
}

.storyboard-composition-context-menu button:hover:not(:disabled), .storyboard-composition-context-menu button:focus-visible {
  background: #2dd4bf1f;
  outline: none;
}

.storyboard-composition-context-menu button.danger {
  color: #fecaca;
}

.storyboard-composition-context-menu button.danger:hover:not(:disabled), .storyboard-composition-context-menu button.danger:focus-visible {
  background: #7f1d1d52;
}

.storyboard-composition-context-menu button:disabled {
  color: #94a3b88f;
  cursor: not-allowed;
}

.storyboard-composition-drag-grip {
  color: #94a3b8b8;
  letter-spacing: 1px;
  grid-row: 1 / span 2;
  font-size: 14px;
  font-weight: 900;
}

.storyboard-composition-block {
  z-index: 2;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: none;
  background: none;
  border-color: #0000;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 4px;
  padding: 6px 12px;
  display: grid;
  top: 5px;
  bottom: 5px;
}

.storyboard-composition-block.selected {
  box-shadow: none;
}

.storyboard-composition-layer-label.generated-layer, .storyboard-composition-block.generated-layer {
  cursor: default;
}

.storyboard-composition-layer-row.generated-layer .storyboard-composition-drag-grip {
  opacity: .36;
}

.storyboard-composition-block.generated-layer:active {
  cursor: default;
}

.storyboard-composition-generated-clip {
  z-index: 3;
  border: 1px solid color-mix(in srgb, var(--composition-color) 86%, white 8%);
  background: color-mix(in srgb, var(--composition-color) 42%, #0f172afa);
  min-width: 0;
  color: var(--ink-strong);
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--composition-color) 58%, transparent);
  border-radius: 6px;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding: 5px 10px;
  display: grid;
  position: absolute;
  top: 5px;
  bottom: 5px;
  overflow: hidden;
}

.storyboard-composition-generated-clip.stale {
  opacity: .72;
  border-style: dashed;
}

.storyboard-composition-generated-clip span, .storyboard-composition-generated-clip small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.storyboard-composition-generated-clip span {
  font-size: 11px;
  font-weight: 900;
}

.storyboard-composition-generated-clip small {
  color: #e2e8f0c7;
  font-size: 9px;
  font-weight: 800;
}

.storyboard-composition-trim-ghost {
  z-index: 1;
  border: 1px dashed color-mix(in srgb, var(--composition-color) 62%, transparent);
  background: repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--composition-color) 16%, transparent) 0 6px,
      transparent 6px 12px),
    color-mix(in srgb, var(--composition-color) 10%, transparent);
  opacity: .82;
  pointer-events: none;
  border-radius: 6px;
  min-width: 42px;
  position: absolute;
  top: 5px;
  bottom: 5px;
}

.storyboard-composition-block:active, .storyboard-composition-block.dragging {
  cursor: grabbing;
}

.storyboard-composition-block.dragging {
  box-shadow: 0 0 0 2px #2dd4bf94, 0 0 22px color-mix(in srgb, var(--composition-color) 48%, transparent);
}

.storyboard-composition-trim-handle {
  cursor: ew-resize;
  touch-action: none;
  background: #f8fafceb;
  border-radius: 999px;
  width: 6px;
  position: absolute;
  top: 7px;
  bottom: 7px;
  box-shadow: 0 0 0 1px #080a0ed1;
}

.storyboard-composition-trim-handle.left {
  left: 3px;
}

.storyboard-composition-trim-handle.right {
  right: 3px;
}

.storyboard-composition-media-coverage-controls {
  z-index: 7;
  pointer-events: none;
  border-block: 1px solid #f8fafc2e;
  min-width: 1px;
  position: absolute;
  top: 5px;
  bottom: 5px;
}

.storyboard-composition-trim-handle.media-coverage {
  box-sizing: border-box;
  appearance: none;
  pointer-events: auto;
  border: 0;
  margin: 0;
  padding: 0;
}

.storyboard-composition-trim-handle.media-coverage.left {
  left: 0;
  transform: translateX(-50%);
}

.storyboard-composition-trim-handle.media-coverage.right {
  right: 0;
  transform: translateX(50%);
}

.storyboard-composition-block-time {
  color: #f8fafceb;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.storyboard-composition-chip-list {
  gap: 4px;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.storyboard-composition-item-chip {
  background: #080a0e73;
  border: 1px solid #f8fafc2e;
  border-radius: 5px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 4px;
  min-width: 58px;
  max-width: 118px;
  padding: 2px 4px;
  display: inline-grid;
}

.storyboard-composition-item-chip img, .storyboard-composition-item-chip video {
  object-fit: cover;
  border-radius: 3px;
  grid-row: 1 / span 2;
  width: 28px;
  height: 18px;
}

.storyboard-composition-item-chip strong, .storyboard-composition-item-chip small {
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1.1;
  overflow: hidden;
}

.storyboard-composition-item-chip small {
  color: var(--muted);
}

.storyboard-composition-item-chip.more {
  color: var(--ink-strong);
  justify-content: center;
  display: inline-flex;
}

.storyboard-composition-empty {
  height: 100%;
  color: var(--muted);
  pointer-events: none;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.storyboard-attachment-preview {
  aspect-ratio: 16 / 9;
  min-width: 0;
  color: var(--ink);
  cursor: zoom-in;
  background: #05070a;
  border: 1px solid #fbbf2438;
  border-radius: 6px;
  place-items: center;
  padding: 0;
  display: grid;
  overflow: hidden;
}

.storyboard-attachment-preview.resolving {
  cursor: progress;
  border-color: #2dd4bf57;
}

.storyboard-resolving-media {
  background: linear-gradient(135deg, #2dd4bf33, #93c5fd14), #05070a;
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
}

.storyboard-resolving-media span {
  border: 3px solid #2dd4bf3d;
  border-top-color: #2dd4bff2;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  animation: .85s linear infinite storyboard-resolving-spin;
}

.storyboard-pending-endpoint-preview {
  width: 100%;
  min-height: 150px;
  color: var(--ink);
  text-align: center;
  grid-template-rows: minmax(96px, 1fr) auto auto;
  align-content: stretch;
  gap: 6px;
  padding-bottom: 10px;
  display: grid;
}

.storyboard-pending-endpoint-preview strong, .storyboard-pending-endpoint-preview > span {
  padding: 0 10px;
}

.storyboard-pending-endpoint-preview > span {
  color: var(--muted);
  font-size: 11px;
}

.storyboard-pending-endpoint-preview.failed {
  color: #fecaca;
}

@keyframes storyboard-resolving-spin {
  to {
    transform: rotate(360deg);
  }
}

.storyboard-attachment-preview:disabled {
  cursor: default;
  opacity: .72;
}

.storyboard-attachment-preview:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.storyboard-attachment-preview .storyboard-asset-thumbnail {
  background: #05070a;
  width: 100%;
  height: 100%;
}

.storyboard-asset-thumbnail {
  background: #05070a;
  place-items: center;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: grid;
  position: relative;
  overflow: hidden;
}

.storyboard-asset-thumbnail > img {
  object-fit: contain;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: block;
}

.storyboard-asset-thumbnail.preparing, .storyboard-asset-thumbnail.unavailable {
  color: var(--muted);
  text-align: center;
  background: linear-gradient(135deg, #1e293bb8, #02060ceb);
  padding: 8px;
  font-size: 11px;
  font-weight: 800;
}

.storyboard-asset-thumbnail.preparing {
  color: var(--teal);
}

.storyboard-thumbnail-video-badge {
  color: #99f6e4;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #02060cd6;
  border: 1px solid #5eead47a;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 900;
  position: absolute;
  bottom: 6px;
  right: 6px;
}

.storyboard-attachment-meta {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.storyboard-attachment-meta strong, .storyboard-attachment-meta small, .storyboard-attachment-meta time {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.storyboard-attachment-meta strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.storyboard-attachment-meta small, .storyboard-attachment-meta time {
  color: var(--muted);
  font-size: 11px;
}

.storyboard-attachment-delete {
  z-index: 4;
  color: #fecaca;
  cursor: pointer;
  opacity: 0;
  background: #080a0edb;
  border: 1px solid #f871717a;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  transition: opacity .14s, transform .14s, background .14s, border-color .14s;
  display: grid;
  position: absolute;
  top: 6px;
  right: 6px;
  transform: scale(.92);
}

.storyboard-flf-pair-card:hover .storyboard-attachment-delete, .storyboard-flf-pair-card:focus-within .storyboard-attachment-delete {
  opacity: 1;
  transform: scale(1);
}

.storyboard-attachment-delete:hover, .storyboard-attachment-delete:focus-visible {
  background: #7f1d1deb;
  border-color: #f87171db;
  outline: none;
}

.storyboard-attachment-delete:disabled {
  cursor: default;
  opacity: 0;
}

.storyboard-placement-card {
  background: #111827f0;
  border: 1px solid #5eead459;
  border-radius: 8px;
  flex: 0 0 clamp(280px, 34vw, 380px);
  grid-template-rows: auto auto auto auto;
  gap: 8px;
  min-width: 260px;
  padding: 9px;
  display: grid;
  position: relative;
  box-shadow: 0 8px 16px #00000042;
}

.storyboard-placement-add-stack {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 180px;
  min-height: 100%;
  display: grid;
}

.storyboard-placement-add-card {
  color: #5eead4eb;
  cursor: pointer;
  background: #080a0e61;
  border: 2px dashed #5eead47a;
  border-radius: 8px;
  flex: 0 0 clamp(180px, 22vw, 240px);
  align-self: stretch;
  place-items: center;
  min-width: 180px;
  min-height: 100%;
  transition: border-color .14s, background .14s, color .14s;
  display: grid;
  position: relative;
}

.storyboard-placement-add-card:hover, .storyboard-placement-add-card:focus-within {
  color: var(--ink-strong);
  background: #0d94881f;
  border-color: #5eead4d1;
}

.storyboard-placement-add-card.disabled {
  color: #94a3b894;
  cursor: not-allowed;
  border-color: #64748b6b;
}

.storyboard-placement-add-card input {
  opacity: 0;
  cursor: inherit;
  position: absolute;
  inset: 0;
}

.storyboard-placement-add-card span {
  border: 1px solid;
  border-radius: 50%;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  display: grid;
}

.storyboard-placement-import-card {
  color: #ccfbf1f0;
  cursor: pointer;
  font: inherit;
  background: #0d948824;
  border: 1px solid #5eead473;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
}

.storyboard-placement-import-card:hover:not(:disabled), .storyboard-placement-import-card:focus-visible {
  background: #0d94883d;
  border-color: #5eead4cc;
}

.storyboard-placement-import-card:disabled {
  color: #94a3b894;
  cursor: not-allowed;
  border-color: #64748b61;
}

.storyboard-source-badge {
  color: #bae6fdf5;
  background: #0e74902e;
  border: 1px solid #7dd3fc8c;
  border-radius: 999px;
  width: fit-content;
  padding: 2px 8px;
  display: inline-flex;
}

.cross-product-import-modal {
  background: #080d16fa;
  border: 1px solid #5eead452;
  border-radius: 8px;
  width: min(860px, 100vw - 32px);
  max-height: min(760px, 100vh - 48px);
  padding: 18px;
  overflow: auto;
  box-shadow: 0 24px 80px #00000073;
}

.cross-product-import-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 14px 0;
  display: grid;
}

.cross-product-import-search {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 12px;
  display: grid;
}

.cross-product-import-search label {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.cross-product-import-search span {
  color: var(--ink-muted);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
}

.cross-product-import-search input {
  width: 100%;
  color: var(--ink-strong);
  background: #020617c7;
  border: 1px solid #475569e6;
  border-radius: 8px;
  padding: 9px 10px;
}

.cross-product-import-option {
  color: var(--ink-strong);
  text-align: left;
  cursor: pointer;
  background: #0f172aeb;
  border: 1px solid #475569d6;
  border-radius: 8px;
  gap: 8px;
  padding: 8px;
  display: grid;
}

.cross-product-import-option:hover, .cross-product-import-option:focus-visible {
  border-color: #5eead4d1;
  outline: none;
}

.cross-product-import-option img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #020617e0;
  border-radius: 6px;
  width: 100%;
}

.cross-product-import-option span {
  gap: 3px;
  display: grid;
}

.storyboard-placement-card.video {
  border-color: #fbbf2473;
}

.storyboard-placement-card.rendering {
  border-color: #2dd4bfb8;
  box-shadow: 0 0 0 1px #2dd4bf2e, 0 10px 22px #00000052;
}

.storyboard-placement-card.failed {
  border-color: #f87171a3;
}

.storyboard-placement-delete, .storyboard-placement-copy, .storyboard-placement-comfy {
  z-index: 4;
  cursor: pointer;
  opacity: 0;
  background: #080a0edb;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  line-height: 1;
  transition: opacity .14s, transform .14s, background .14s, border-color .14s;
  display: grid;
  position: absolute;
  top: 14px;
  transform: scale(.92);
}

.storyboard-placement-delete {
  color: #fecaca;
  border: 1px solid #f8717180;
  font-size: 17px;
  font-weight: 900;
  right: 14px;
}

.storyboard-placement-copy {
  color: #dbeafe;
  border: 1px solid #94a3b880;
  left: 52px;
}

.storyboard-placement-comfy {
  color: #99f6e4;
  border: 1px solid #2dd4bf8c;
  left: 90px;
}

.storyboard-placement-comfy svg {
  width: 15px;
  height: 15px;
}

.storyboard-placement-comfy.linked {
  color: #86efac;
  border-color: #4ade80b3;
}

.storyboard-placement-copy span, .storyboard-placement-copy span:before {
  content: "";
  border: 1.6px solid;
  border-radius: 3px;
  width: 11px;
  height: 13px;
  display: block;
}

.storyboard-placement-copy span {
  position: relative;
  transform: translate(2px, 1px);
}

.storyboard-placement-copy span:before {
  background: #080a0edb;
  position: absolute;
  top: -5px;
  left: -5px;
}

.storyboard-placement-card:hover .storyboard-placement-delete, .storyboard-placement-card:hover .storyboard-placement-copy, .storyboard-placement-card:hover .storyboard-placement-comfy, .storyboard-placement-card:focus-within .storyboard-placement-delete, .storyboard-placement-card:focus-within .storyboard-placement-copy, .storyboard-placement-card:focus-within .storyboard-placement-comfy {
  opacity: 1;
  transform: scale(1);
}

.storyboard-placement-delete:hover, .storyboard-placement-delete:focus-visible {
  background: #7f1d1deb;
  border-color: #f87171db;
  outline: none;
}

.storyboard-placement-copy:hover, .storyboard-placement-copy:focus-visible {
  background: #1e293bf0;
  border-color: #bfdbfedb;
  outline: none;
}

.storyboard-placement-comfy:hover, .storyboard-placement-comfy:focus-visible {
  background: #0f766ee6;
  border-color: #5eead4eb;
  outline: none;
}

.storyboard-placement-delete:disabled, .storyboard-placement-copy:disabled, .storyboard-placement-comfy:disabled {
  cursor: default;
  opacity: 0;
}

.storyboard-comfy-loadout-backdrop {
  z-index: 80;
}

.storyboard-comfy-loadout-modal {
  background: #070c14fa;
  border: 1px solid #2dd4bf7a;
  border-radius: 14px;
  width: min(1120px, 100vw - 48px);
  max-height: calc(100vh - 48px);
  padding: 20px;
  overflow: auto;
  box-shadow: 0 28px 80px #00000094;
}

.storyboard-comfy-loadout-head, .storyboard-comfy-loadout-actions, .storyboard-comfy-mask-toolbar {
  align-items: center;
  gap: 12px;
  display: flex;
}

.storyboard-comfy-loadout-head {
  justify-content: space-between;
  margin-bottom: 18px;
}

.storyboard-comfy-loadout-head > div {
  gap: 4px;
  display: grid;
}

.storyboard-comfy-loadout-head span, .storyboard-comfy-prompt-column > span {
  color: var(--teal);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 850;
}

.storyboard-comfy-loadout-head h2 {
  margin: 0;
}

.storyboard-comfy-loadout-body {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr);
  gap: 18px;
  display: grid;
}

.storyboard-comfy-mask-column, .storyboard-comfy-prompt-column {
  align-content: start;
  gap: 10px;
  display: grid;
}

.storyboard-comfy-mask-toolbar {
  flex-wrap: wrap;
}

.storyboard-comfy-mask-toolbar label {
  align-items: center;
  gap: 8px;
  min-width: min(260px, 100%);
  display: flex;
}

.storyboard-comfy-mask-toolbar input {
  flex: 1;
}

.storyboard-comfy-mask-mode {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.storyboard-comfy-mask-mode button {
  min-height: 38px;
  color: var(--ink-muted);
  background: #0f172ab8;
  border: 1px solid #64748b8c;
  border-radius: 8px;
  font-weight: 850;
}

.storyboard-comfy-mask-mode button.active {
  color: #ccfbf1;
  background: #0f766e52;
  border-color: #2dd4bfd1;
}

.storyboard-comfy-outpaint-inputs {
  grid-template-columns: repeat(4, minmax(86px, 1fr));
  gap: 8px;
  display: grid;
}

.storyboard-comfy-outpaint-inputs label {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 8px;
  display: grid;
}

.storyboard-comfy-outpaint-inputs label > span {
  color: var(--ink-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 800;
}

.storyboard-comfy-outpaint-inputs input {
  width: 100%;
}

.storyboard-comfy-outpaint-inputs small {
  color: var(--ink-muted);
}

.storyboard-comfy-mask-surface {
  cursor: crosshair;
  touch-action: none;
  background: #020617;
  border: 1px solid #5eead461;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.storyboard-comfy-mask-surface img {
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: auto;
  max-height: 62vh;
  display: block;
}

.storyboard-comfy-mask-surface canvas {
  touch-action: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.storyboard-comfy-outpaint-surface {
  touch-action: none;
  background-color: #172033;
  background-image: linear-gradient(45deg, #94a3b824 25%, #0000 25%), linear-gradient(-45deg, #94a3b824 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #94a3b824 75%), linear-gradient(-45deg, #0000 75%, #94a3b824 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  border: 1px solid #5eead47a;
  border-radius: 10px;
  width: 100%;
  min-height: 240px;
  max-height: 58vh;
  position: relative;
  overflow: hidden;
}

.storyboard-comfy-outpaint-source {
  border: 1px solid #ffffffb8;
  position: absolute;
  overflow: hidden;
  box-shadow: 0 0 0 9999px #2dd4bf14;
}

.storyboard-comfy-outpaint-source img {
  object-fit: fill;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  display: block;
}

.storyboard-comfy-outpaint-handle {
  z-index: 3;
  touch-action: none;
  background: none;
  border: 0;
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  position: absolute;
}

.storyboard-comfy-outpaint-handle.top, .storyboard-comfy-outpaint-handle.bottom {
  cursor: ns-resize;
  height: 12px;
  left: 16px;
  right: 16px;
}

.storyboard-comfy-outpaint-handle.left, .storyboard-comfy-outpaint-handle.right {
  cursor: ew-resize;
  width: 12px;
  top: 16px;
  bottom: 16px;
}

.storyboard-comfy-outpaint-handle.top {
  top: 0;
}

.storyboard-comfy-outpaint-handle.right {
  right: 0;
}

.storyboard-comfy-outpaint-handle.bottom {
  bottom: 0;
}

.storyboard-comfy-outpaint-handle.left {
  left: 0;
}

.storyboard-comfy-outpaint-handle.top-left, .storyboard-comfy-outpaint-handle.top-right, .storyboard-comfy-outpaint-handle.bottom-right, .storyboard-comfy-outpaint-handle.bottom-left {
  width: 22px;
  height: 22px;
}

.storyboard-comfy-outpaint-handle.top-left {
  cursor: nwse-resize;
  top: 0;
  left: 0;
}

.storyboard-comfy-outpaint-handle.top-right {
  cursor: nesw-resize;
  top: 0;
  right: 0;
}

.storyboard-comfy-outpaint-handle.bottom-right {
  cursor: nwse-resize;
  bottom: 0;
  right: 0;
}

.storyboard-comfy-outpaint-handle.bottom-left {
  cursor: nesw-resize;
  bottom: 0;
  left: 0;
}

.storyboard-comfy-outpaint-handle:after {
  content: "";
  border: 1px solid #5eead4b8;
  border-radius: 4px;
  position: absolute;
  inset: 3px;
}

.storyboard-comfy-prompt-column textarea {
  resize: vertical;
  min-height: 300px;
}

.storyboard-comfy-loadout-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

@media (max-width: 900px) {
  .storyboard-comfy-loadout-body {
    grid-template-columns: 1fr;
  }

  .storyboard-comfy-prompt-column textarea {
    min-height: 150px;
  }

  .storyboard-comfy-outpaint-inputs {
    grid-template-columns: repeat(2, minmax(86px, 1fr));
  }
}

.storyboard-placement-camera {
  z-index: 3;
  width: 32px;
  height: 32px;
  min-height: 32px;
  color: var(--ink-strong);
  cursor: pointer;
  opacity: 0;
  background: #0b121ce0;
  border: 1px solid #5eead48c;
  border-radius: 999px;
  place-items: center;
  padding: 0;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  transition: opacity .14s, transform .14s, background .14s, border-color .14s;
  display: grid;
  position: absolute;
  top: 14px;
  left: 14px;
  transform: scale(.92);
  box-shadow: 0 8px 18px #00000052;
}

.storyboard-placement-card:hover .storyboard-placement-camera, .storyboard-placement-card:focus-within .storyboard-placement-camera {
  opacity: 1;
  transform: scale(1);
}

.storyboard-placement-camera:hover, .storyboard-placement-camera:focus-visible {
  background: #0f766ee6;
  border-color: #5eead4e0;
  outline: none;
}

.storyboard-placement-camera:disabled {
  cursor: default;
  opacity: 0;
}

.storyboard-placement-camera svg {
  width: 18px;
  height: 18px;
}

.storyboard-next-prompt-backdrop {
  z-index: 78;
  background: #01060ac7;
  padding: 18px;
}

.storyboard-next-prompt-modal {
  background: #080c12;
  border: 1px solid #5eead45c;
  border-radius: 8px;
  gap: 14px;
  width: min(100%, 640px);
  max-height: calc(100vh - 36px);
  padding: 14px;
  display: grid;
  overflow-y: auto;
  box-shadow: 0 24px 80px #0000008c;
}

.storyboard-next-prompt-modal.with-motion-shaping {
  width: min(100%, 1180px);
}

.storyboard-next-prompt-layout, .storyboard-next-prompt-primary {
  align-content: start;
  gap: 14px;
  min-width: 0;
  display: grid;
}

.storyboard-next-prompt-layout.with-motion-shaping {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
}

.storyboard-motion-shaping {
  background: #050c12b8;
  border: 1px solid #5eead447;
  border-radius: 8px;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  display: grid;
}

.storyboard-motion-shaping > .label {
  color: var(--muted-strong);
}

.storyboard-motion-shaping-sliders {
  gap: 12px;
  display: grid;
}

label.storyboard-motion-shaping-slider {
  cursor: ew-resize;
  background: #05070ae6;
  border: 1px solid #5eead457;
  border-radius: 5px;
  min-height: 44px;
  display: block;
  position: relative;
  overflow: hidden;
}

label.storyboard-motion-shaping-slider:not(.read-only):hover, label.storyboard-motion-shaping-slider:not(.read-only):focus-within {
  border-color: #5eead4d1;
  box-shadow: 0 0 0 1px #5eead42e;
}

.storyboard-motion-shaping-slider input[type="range"] {
  appearance: none;
  background: linear-gradient(to right,
    #4b7c7bc7 0,
    #4b7c7bc7 var(--storyboard-motion-shaping-fill),
    #05070ae6 var(--storyboard-motion-shaping-fill),
    #05070ae6 100%);
  cursor: ew-resize;
  border: 0;
  border-radius: 0;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}

.storyboard-motion-shaping-slider.read-only {
  cursor: default;
}

.storyboard-motion-shaping-slider.read-only input[type="range"] {
  cursor: default;
  opacity: 1;
}

.storyboard-motion-shaping-slider input[type="range"]::-webkit-slider-runnable-track {
  background: none;
  height: 100%;
}

.storyboard-motion-shaping-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: none;
  border: 0;
  width: 1px;
  height: 100%;
}

.storyboard-motion-shaping-slider input[type="range"]::-moz-range-track {
  background: none;
  border: 0;
  height: 100%;
}

.storyboard-motion-shaping-slider input[type="range"]::-moz-range-progress {
  background: none;
  border: 0;
  height: 100%;
}

.storyboard-motion-shaping-slider input[type="range"]::-moz-range-thumb {
  background: none;
  border: 0;
  border-radius: 0;
  width: 1px;
  height: 100%;
}

.storyboard-motion-shaping-slider > span, .storyboard-motion-shaping-slider > output {
  z-index: 1;
  color: var(--ink-strong);
  pointer-events: none;
  font-size: 12px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.storyboard-motion-shaping-slider > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 82px);
  left: 12px;
  overflow: hidden;
}

.storyboard-motion-shaping-slider > output {
  font-variant-numeric: tabular-nums;
  right: 12px;
}

.storyboard-motion-shaping small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .storyboard-next-prompt-layout.with-motion-shaping {
    grid-template-columns: 1fr;
  }
}

.storyboard-next-prompt-head {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.storyboard-next-prompt-head strong {
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  overflow: hidden;
}

.storyboard-generate-next-source {
  background: #0d948814;
  border: 1px solid #5eead447;
  border-radius: 8px;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px;
  display: grid;
}

.storyboard-generate-next-source-preview {
  aspect-ratio: 16 / 9;
  background: #02060ce0;
  border: 1px solid #94a3b847;
  border-radius: 6px;
  overflow: hidden;
}

.storyboard-generate-next-source-preview img, .storyboard-generate-next-source-preview video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.storyboard-generate-next-source > div:last-child {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.storyboard-generate-next-source strong, .storyboard-generate-next-source small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.storyboard-generate-next-source strong {
  color: var(--ink-strong);
  font-size: 13px;
}

.storyboard-generate-next-source small {
  color: var(--muted);
  font-size: 10px;
}

.storyboard-flf-modal-player {
  background: #02060ceb;
  border: 1px solid #5eead457;
  border-radius: 8px;
  gap: 8px;
  padding: 8px;
  display: grid;
  overflow: hidden;
}

.storyboard-flf-modal-tabs {
  background: #02060cb8;
  border: 1px solid #5eead43d;
  border-radius: 7px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  display: grid;
}

.storyboard-flf-modal-tabs button {
  color: var(--muted-strong);
  cursor: pointer;
  font: inherit;
  background: none;
  border: 1px solid #0000;
  border-radius: 5px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 850;
}

.storyboard-flf-modal-tabs button.active {
  color: var(--ink-strong);
  background: #0d948833;
  border-color: #5eead480;
}

.storyboard-flf-modal-tabs button:hover, .storyboard-flf-modal-tabs button:focus-visible {
  color: var(--ink-strong);
  outline: none;
}

.storyboard-flf-modal-player video {
  object-fit: contain;
  background: #000;
  border-radius: 5px;
  width: 100%;
  max-height: min(42vh, 420px);
  display: block;
}

.storyboard-flf-modal-player > div {
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.storyboard-flf-modal-player strong, .storyboard-flf-modal-player small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.storyboard-flf-modal-player strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.storyboard-flf-modal-player small {
  color: var(--teal);
  font-size: 10px;
}

.storyboard-next-prompt-modal > .storyboard-video-player {
  max-height: min(56vh, 520px);
}

.storyboard-next-prompt-modal > .storyboard-video-player video {
  max-height: min(42vh, 420px);
}

.storyboard-next-prompt-close {
  width: 28px;
  height: 28px;
  color: var(--muted-strong);
  cursor: pointer;
  background: #0f172adb;
  border: 1px solid #94a3b852;
  border-radius: 50%;
  place-items: center;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  display: grid;
}

.storyboard-next-prompt-close:hover, .storyboard-next-prompt-close:focus-visible {
  color: var(--ink-strong);
  border-color: #5eead4c7;
  outline: none;
}

.storyboard-next-prompt-modal label {
  gap: 7px;
  min-width: 0;
  display: grid;
}

.storyboard-next-seed-settings {
  grid-template-columns: minmax(150px, .55fr) minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  display: grid;
}

.storyboard-next-seed-settings p {
  color: var(--muted);
  margin: 0;
  padding-bottom: 9px;
  font-size: 11px;
  line-height: 1.45;
}

.storyboard-next-prompt-modal textarea, .storyboard-next-prompt-modal input, .storyboard-next-prompt-modal select {
  min-width: 0;
  color: var(--ink);
  font: inherit;
  resize: vertical;
  background: #05070ad1;
  border: 1px solid #2c3545f2;
  border-radius: 6px;
  padding: 9px;
  font-size: 13px;
}

.storyboard-next-prompt-modal .storyboard-finishing-toggle {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  display: flex;
}

.storyboard-next-prompt-modal .storyboard-finishing-toggle input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
}

.storyboard-next-prompt-modal input, .storyboard-next-prompt-modal select {
  resize: none;
  width: 100%;
}

.storyboard-vace-upscale-source {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.storyboard-vace-upscale-measurements {
  color: var(--muted-strong);
  background: #080d12ad;
  border: 1px solid #2dd4bf47;
  border-radius: 6px;
  gap: 4px;
  padding: 9px 10px;
  display: grid;
}

.storyboard-video-preparation-controls {
  gap: 6px;
  min-width: 0;
  margin-top: 4px;
  display: grid;
}

.storyboard-video-preparation-controls label {
  color: var(--muted);
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.storyboard-video-preparation-controls select {
  border: 1px solid var(--line);
  background: var(--field);
  width: 100%;
  min-width: 0;
  color: var(--ink);
  font: inherit;
  border-radius: 6px;
  padding: 6px 7px;
}

.storyboard-video-assessment, .storyboard-video-derivative-status {
  border: 1px solid var(--line);
  width: max-content;
  max-width: 100%;
  color: var(--muted-strong);
  border-radius: 999px;
  padding: 3px 7px;
  font-weight: 850;
}

.storyboard-video-assessment.ready {
  color: #86efac;
  border-color: #4ade8073;
}

.storyboard-video-assessment.enhance {
  color: #fcd34d;
  border-color: #fbbf2480;
}

.storyboard-vace-upscale-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.storyboard-active-marker {
  color: #86efac;
  font-weight: 900;
}

.storyboard-flf-lora-editor {
  gap: 8px;
  min-width: 0;
  display: grid;
}

.storyboard-generation-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
  display: grid;
}

.storyboard-generation-mode button {
  min-height: 34px;
  color: var(--muted-strong);
  cursor: pointer;
  font: inherit;
  background: #0f172ac7;
  border: 1px solid #475569e6;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 850;
}

.storyboard-generation-mode button.active {
  color: #ccfbf1fa;
  background: #0d948847;
  border-color: #2dd4bfe0;
}

.storyboard-static-hold-settings {
  background: #0812188f;
  border: 1px solid #2dd4bf47;
  border-radius: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  padding: 10px;
  display: grid;
}

.storyboard-static-hold-settings .notice {
  grid-column: 1 / -1;
  margin: 0;
}

.storyboard-flf-lora-head {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.storyboard-flf-lora-list {
  gap: 8px;
  min-width: 0;
  display: grid;
}

.storyboard-flf-lora-group {
  background: #08121894;
  border: 1px solid #5eead447;
  border-radius: 8px;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  display: grid;
}

.storyboard-flf-lora-group legend {
  color: var(--ink-strong);
  padding: 0 6px;
  font-size: 12px;
  font-weight: 900;
}

.storyboard-flf-lora-add-row {
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: end;
  gap: 8px;
  min-width: 0;
  display: grid;
}

.storyboard-flf-lora-row {
  grid-template-columns: minmax(0, 1fr) 104px 92px 28px;
  align-items: end;
  gap: 8px;
  min-width: 0;
  display: grid;
}

.storyboard-flf-lora-group.workflow-owned {
  background: #0f172ab8;
  border-color: #60a5fa61;
}

.storyboard-flf-lora-group.workflow-owned .storyboard-flf-lora-row {
  color: var(--muted-strong);
  grid-template-columns: minmax(0, 1fr) 64px 82px;
  align-items: center;
  font-size: 11px;
}

.storyboard-flf-lora-group.workflow-owned code {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.storyboard-flf-lora-row.missing input {
  color: var(--muted);
  border-style: dashed;
}

.storyboard-next-prompt-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.storyboard-placement-preview {
  aspect-ratio: 16 / 9;
  background: #05070a;
  border-radius: 6px;
  place-items: center;
  display: grid;
  overflow: hidden;
}

.storyboard-placement-preview.clickable {
  cursor: zoom-in;
}

.storyboard-placement-preview.clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.storyboard-placement-preview-crop {
  background: #05070a;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.storyboard-placement-preview-crop img {
  object-fit: fill;
  display: block;
  position: absolute;
}

.storyboard-placement-preview img, .storyboard-placement-preview video {
  object-fit: contain;
  background: #05070a;
  width: 100%;
  height: 100%;
}

.storyboard-video-manifest-preview {
  width: 100%;
  height: 100%;
  color: var(--text);
  text-align: center;
  background: #100c06b8;
  border: 1px solid #fbbf245c;
  place-items: center;
  gap: 4px;
  padding: 10px;
  display: grid;
}

.storyboard-video-manifest-preview strong {
  max-width: 100%;
  color: var(--amber);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.storyboard-fullscreen-backdrop {
  --storyboard-focused-viewer-top-clearance: 88px;
  z-index: 80;
  padding: var(--storyboard-focused-viewer-top-clearance) 18px 18px;
  background: #01060ae0;
}

.storyboard-video-player-backdrop {
  --storyboard-focused-viewer-top-clearance: 88px;
  z-index: var(--storyboard-layer-motion-viewer);
  padding: var(--storyboard-focused-viewer-top-clearance) 18px 18px;
  background: #01060ae6;
}

.storyboard-video-player-backdrop:has(.storyboard-motion-output-layout) {
  --storyboard-focused-viewer-top-clearance: 16px;
  padding-inline: 16px;
  align-items: flex-start;
  padding-bottom: 16px;
}

.motion-output-concept-stage {
  color: #dbe6e9;
  background: #050a0f;
  min-height: 100dvh;
}

.motion-output-concept-app {
  grid-template-columns: 76px 1fr;
  min-height: 100dvh;
  display: grid;
}

.motion-output-concept-app > aside {
  color: #50636d;
  text-align: center;
  border-right: 1px solid #18303a;
  align-content: start;
  gap: 42px;
  padding: 72px 10px;
  font-size: 10px;
  display: grid;
}

.motion-output-concept-app > aside strong {
  color: #4ed5c8;
}

.motion-output-concept-app > section > header {
  box-sizing: border-box;
  color: #819099;
  border-bottom: 1px solid #18303a;
  height: 58px;
  padding: 18px 28px;
}

.motion-output-concept-app > section > header small {
  color: #5d7079;
  margin-left: 26px;
}

.motion-output-concept-timeline {
  background: linear-gradient(90deg, #0000 0 12%, #4ed5c821 12% 27%, #0000 27% 32%, #f2b13e1a 32% 50%, #0000 50%), repeating-linear-gradient(90deg, #0000 0 170px, #3e545f4d 170px 171px), repeating-linear-gradient(0deg, #0000 0 130px, #3e545f47 130px 131px);
  height: 100%;
}

.storyboard-video-player-modal {
  width: min(100%, 1320px);
  height: min(860px, calc(100dvh - var(--storyboard-focused-viewer-top-clearance) - 18px));
  max-height: calc(100dvh - var(--storyboard-focused-viewer-top-clearance) - 18px);
  background: #05070a;
  border: 1px solid #5eead461;
  border-radius: 8px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 26px 90px #000000a3;
}

.storyboard-video-player-modal:has(.storyboard-motion-output-layout) {
  width: min(1680px, 100vw - 32px);
  height: calc(100dvh - var(--storyboard-focused-viewer-top-clearance) - 16px);
  background: #071018;
  border-color: #3dd7cbc2;
  border-radius: 11px;
  grid-template-rows: minmax(0, 1fr);
  max-height: none;
  padding: 0;
  overflow: hidden;
}

.storyboard-motion-output-layout {
  background: #071018;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 380px);
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: grid;
  position: relative;
  overflow: hidden;
}

.storyboard-motion-output-player {
  background: #071018;
  border-radius: 10px 0 0 10px;
  grid-template-rows: minmax(180px, 1fr) auto;
  gap: 0;
  min-width: 0;
  min-height: 0;
  padding: 14px 14px 0;
  display: grid;
  overflow: hidden;
}

.storyboard-motion-output-video {
  background: #020609;
  border: 1px solid #425b6a8c;
  place-items: center;
  min-width: 0;
  min-height: 0;
  display: grid;
  position: relative;
  overflow: hidden;
  container-type: size;
}

.storyboard-motion-output-video img, .storyboard-motion-output-video video {
  width: min(100cqw, calc(100cqh * var(--storyboard-motion-source-aspect, 1.77778)));
  height: min(100cqh, calc(100cqw / var(--storyboard-motion-source-aspect, 1.77778)));
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--storyboard-motion-source-aspect, auto);
  object-fit: contain;
  background: #020609;
  display: block;
}

.storyboard-motion-trim-preview-status {
  z-index: 2;
  color: #ffd889;
  pointer-events: none;
  background: #040a0edb;
  border: 1px solid #ffc45a9e;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.storyboard-flf-effective-sampling-summary {
  display: contents;
}

.storyboard-flf-sampling-controls {
  border-top: 1px solid #70ddd238;
  gap: 10px;
  padding-top: 10px;
  display: grid;
}

.storyboard-flf-sampling-controls > header {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.storyboard-flf-sampling-controls > header strong {
  color: #c9d7dc;
  font-size: 11px;
}

.storyboard-flf-sampling-controls > header button {
  padding: 4px 7px;
  font-size: 10px;
}

.storyboard-flf-sampling-controls > label {
  gap: 5px;
  display: grid;
}

.storyboard-flf-sampling-controls > label > small {
  color: #7f939e;
  font-size: 9px;
}

.storyboard-motion-trim-editor {
  grid-template-rows: 54px 22px 40px;
  min-width: 0;
  padding-top: 18px;
  display: grid;
}

.storyboard-motion-trim-track {
  cursor: pointer;
  touch-action: none;
  background: #060c11;
  border: 1px solid #354b58b8;
  min-width: 0;
  margin-top: 2px;
  position: relative;
}

.storyboard-motion-trim-filmstrip {
  position: absolute;
  inset: 5px 0;
  overflow: hidden;
}

.storyboard-motion-trim-filmstrip-fallback {
  grid-template-columns: repeat(15, minmax(0, 1fr));
  width: 100%;
  height: 100%;
  display: grid;
}

.storyboard-motion-trim-filmstrip-fallback > span {
  background-color: #152b36;
  border-right: 1px solid #061018;
  place-items: center;
  min-width: 0;
  display: grid;
  overflow: hidden;
}

.storyboard-motion-trim-frame {
  object-fit: contain;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
}

.storyboard-motion-trim-frame.placeholder {
  filter: saturate(.9) brightness(.72);
  background-image: linear-gradient(145deg, #4adec9b3, #0000 48%), linear-gradient(30deg, #f4a933b8, #0000 56%), linear-gradient(#172731, #091017);
  background-position: center;
  background-size: cover;
}

.storyboard-motion-trim-filmstrip-fallback > span:nth-child(3n+1) .placeholder {
  background-position: 28%;
}

.storyboard-motion-trim-filmstrip-fallback > span:nth-child(3n+2) .placeholder {
  background-position: 55%;
}

.storyboard-motion-trim-filmstrip-fallback > span:nth-child(3n) .placeholder {
  background-position: 76%;
}

.storyboard-motion-trim-excluded {
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, #2f44526b 0 2px, #0000 2px 13px), #02070be0;
  position: absolute;
  inset-block: 0;
}

.storyboard-motion-trim-excluded.start {
  left: 0;
}

.storyboard-motion-trim-excluded.end {
  right: 0;
}

.storyboard-motion-trim-retained {
  z-index: 4;
  pointer-events: none;
  border-block: 2px solid #f2b13e;
  position: absolute;
  inset-block: 0;
  box-shadow: inset 0 0 0 1px #f2b13e3d;
}

.storyboard-motion-trim-boundary {
  z-index: 7;
  width: 13px;
  color: inherit;
  cursor: ew-resize;
  touch-action: none;
  background: #f2b13e29;
  border: 2px solid #f2b13e;
  border-radius: 5px;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px #080c10e0, 0 0 10px #f2b13e38;
}

.storyboard-motion-trim-boundary:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #72eee3;
}

.storyboard-motion-trim-boundary:disabled {
  cursor: not-allowed;
  opacity: .66;
}

.storyboard-motion-trim-boundary strong {
  color: #ffc654;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
  background: #17130c;
  border: 1px solid #f2b13e;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 10px;
  line-height: 1;
  position: absolute;
  bottom: calc(100% + 17px);
  box-shadow: 0 4px 16px #00000059;
}

.storyboard-motion-trim-boundary strong:after {
  border: 5px solid #0000;
  content: "";
  border-top-color: #f2b13e;
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
}

.storyboard-motion-trim-boundary.start strong {
  left: -31px;
}

.storyboard-motion-trim-boundary.start strong:after {
  left: 28px;
}

.storyboard-motion-trim-boundary.end strong {
  right: -31px;
}

.storyboard-motion-trim-boundary.end strong:after {
  right: 28px;
}

.storyboard-motion-trim-playhead {
  z-index: 8;
  pointer-events: none;
  background: #f2f6f7;
  width: 2px;
  position: absolute;
  top: -5px;
  bottom: -27px;
  transform: translateX(-50%);
  box-shadow: 0 0 6px #ffffff40;
}

.storyboard-motion-trim-playhead i {
  background: #f5f8f8;
  border-radius: 2px 2px 6px 6px;
  width: 9px;
  height: 7px;
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
}

.storyboard-motion-trim-ticks {
  color: #84959f;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid #3d505c8c;
  font-size: 9px;
  position: relative;
}

.storyboard-motion-trim-ticks:before {
  content: "";
  opacity: .7;
  background: repeating-linear-gradient(90deg, #43535c 0 1px, #0000 1px 18px);
  height: 6px;
  position: absolute;
  inset: 0 0 auto;
}

.storyboard-motion-trim-ticks span {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
}

.storyboard-motion-trim-ticks span:first-child {
  transform: none;
}

.storyboard-motion-trim-ticks span:last-child {
  transform: translateX(-100%);
}

.storyboard-motion-player-controls {
  grid-template-columns: 105px minmax(0, 1fr) 118px auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 0;
  display: grid;
  position: relative;
}

.storyboard-motion-player-controls output {
  color: #e4ecef;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

.storyboard-motion-player-controls output span {
  color: #778892;
}

.storyboard-motion-transport {
  justify-content: center;
  align-items: center;
  gap: 7px;
  display: flex;
}

.storyboard-motion-transport button, .storyboard-motion-output-inspector button, .storyboard-motion-unsaved-dialog button {
  color: #dae5e9;
  background: none;
  border: 1px solid #0000;
  justify-content: center;
  align-items: center;
  display: inline-grid;
}

.storyboard-motion-transport button {
  width: 26px;
  height: 26px;
  padding: 4px;
}

.storyboard-motion-transport button.primary {
  background: #101820;
  border-color: #59d8cc;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  box-shadow: 0 0 0 1px #060a0dd9, 0 0 14px #4ed5c829;
}

.storyboard-motion-transport button.rangeReplay {
  color: #4ed5c8;
  margin-left: 9px;
}

.storyboard-motion-transport svg, .storyboard-motion-volume svg, .storyboard-motion-player-controls small svg {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8px;
  width: 16px;
  height: 16px;
}

.storyboard-motion-volume {
  color: #dae5e9;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  display: flex;
}

.storyboard-motion-volume input {
  accent-color: #4ed5c8;
  width: 72px;
}

.storyboard-motion-player-controls small {
  color: #4ed5c8;
  white-space: nowrap;
  pointer-events: none;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  display: flex;
  position: static;
  transform: none;
}

.storyboard-motion-player-controls small svg {
  width: 11px;
  height: 11px;
}

.storyboard-motion-output-inspector {
  background: #0a131c;
  border-left: 1px solid #334c58b8;
  border-radius: 0 10px 10px 0;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  padding: 20px 20px 24px;
  display: grid;
}

.storyboard-motion-output-inspector header {
  border-bottom: 1px solid #5669756b;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  display: flex;
}

.storyboard-motion-output-inspector h2 {
  color: #eff5f6;
  letter-spacing: -.015em;
  margin: 0;
  font-size: 23px;
}

.storyboard-motion-output-inspector header button, .storyboard-motion-unsaved-dialog .close {
  color: #c8d4d9;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 30px;
  font-weight: 200;
}

.storyboard-motion-output-inspector dl {
  border-bottom: 1px solid #5669756b;
  gap: 0;
  margin: 10px 0 0;
  padding-bottom: 10px;
  display: grid;
}

.storyboard-motion-output-inspector dl > div {
  color: #c5d0d4;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 47px;
  font-size: 14px;
  display: flex;
}

.storyboard-motion-output-inspector dl > div.fps {
  justify-content: flex-start;
}

.storyboard-motion-output-inspector dt, .storyboard-motion-output-inspector dd {
  margin: 0;
}

.storyboard-motion-output-inspector dd {
  color: #eef3f4;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.storyboard-motion-output-inspector > p {
  color: #b5c1c6;
  margin: 25px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

.storyboard-motion-output-inspector > footer {
  grid-row: 5;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  display: flex;
}

.storyboard-motion-output-inspector footer button, .storyboard-motion-unsaved-dialog footer button {
  color: #e1eaed;
  background: #101a23;
  border: 1px solid #536673;
  border-radius: 5px;
  min-height: 48px;
  padding: 0 24px;
  font-size: 14px;
}

.storyboard-motion-output-inspector footer button {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 12px;
}

.storyboard-motion-output-inspector footer .primary-action, .storyboard-motion-unsaved-dialog footer .primary-action {
  color: #051211;
  background: #4ed5c8;
  border-color: #45cfc2;
  font-weight: 700;
}

.storyboard-motion-output-inspector button:disabled, .storyboard-motion-unsaved-dialog button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.storyboard-motion-unsaved-dialog {
  z-index: 10;
  box-sizing: border-box;
  color: #e4edef;
  background: #0b151f;
  border: 1px solid #50d5c9;
  border-radius: 10px;
  grid-template-rows: auto auto 1fr;
  width: 485px;
  min-height: 205px;
  padding: 31px 32px 27px;
  display: grid;
  position: absolute;
  top: 365px;
  right: -32px;
  box-shadow: 0 22px 70px #0009;
}

.storyboard-motion-unsaved-dialog .close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.storyboard-motion-unsaved-dialog h3 {
  color: #f0f5f6;
  margin: 0;
  font-size: 22px;
}

.storyboard-motion-unsaved-dialog p {
  color: #d4dde0;
  margin: 14px 0 23px;
  font-size: 14px;
}

.storyboard-motion-unsaved-dialog footer {
  justify-content: flex-end;
  align-items: end;
  gap: 12px;
  display: flex;
}

.storyboard-motion-unsaved-dialog footer button {
  white-space: nowrap;
  min-height: 44px;
  padding-inline: 18px;
}

.storyboard-video-player-modal-content {
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, .8fr);
  gap: 12px;
  min-width: 0;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.storyboard-video-player-modal-media {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.storyboard-video-generation-details {
  min-width: 0;
  min-height: 0;
  color: var(--ink-muted);
  background: #0a0f17eb;
  border: 1px solid #94a3b842;
  border-radius: 7px;
  padding: 12px;
  overflow: auto;
}

.storyboard-video-generation-details.empty {
  align-content: start;
}

.storyboard-video-generation-details.empty p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.storyboard-video-generation-details > .storyboard-motion-shaping {
  margin-top: 14px;
}

.storyboard-video-generation-details-head, .storyboard-generation-detail-label {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.storyboard-video-generation-details-head > div {
  gap: 3px;
  display: grid;
}

.storyboard-video-generation-details-head .eyebrow, .storyboard-generation-prompt > span, .storyboard-generation-detail-label > span, .storyboard-generation-detail-section > span {
  color: var(--teal);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
}

.storyboard-video-generation-details-head strong {
  color: var(--ink-strong);
  font-size: 15px;
}

.storyboard-generation-prompt, .storyboard-generation-detail-section, .storyboard-generation-technical-details {
  border-top: 1px solid #94a3b82e;
  margin-top: 14px;
  padding-top: 12px;
}

.storyboard-generation-prompt p {
  max-height: 180px;
  color: var(--ink-strong);
  white-space: pre-wrap;
  background: #02060ac2;
  border-radius: 5px;
  margin: 7px 0 0;
  padding: 9px;
  font-size: 12px;
  line-height: 1.5;
  overflow: auto;
}

.storyboard-generation-prompt.secondary p {
  max-height: 90px;
  color: var(--ink-muted);
}

.storyboard-generation-detail-grid {
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: 6px 10px;
  margin: 14px 0 0;
  font-size: 11px;
  display: grid;
}

.storyboard-generation-detail-grid dt, .storyboard-generation-detail-grid dd {
  min-width: 0;
  margin: 0;
}

.storyboard-generation-detail-grid dt {
  color: var(--ink-muted);
}

.storyboard-generation-detail-grid dd {
  overflow-wrap: anywhere;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

.storyboard-generation-detail-section ul {
  gap: 5px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.storyboard-generation-detail-section li {
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  display: flex;
}

.storyboard-generation-detail-section li code {
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.storyboard-generation-detail-grid.shaping {
  grid-template-columns: 1fr;
  margin-top: 8px;
  display: grid;
}

.storyboard-generation-detail-grid.shaping > div {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  display: grid;
}

.storyboard-generation-technical-details summary {
  cursor: pointer;
  color: var(--teal);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .storyboard-video-player-modal:has(.storyboard-motion-output-layout) {
    height: calc(100dvh - var(--storyboard-focused-viewer-top-clearance) - 18px);
    overflow: auto;
  }

  .storyboard-motion-output-layout {
    grid-template-columns: 1fr;
    min-height: 920px;
  }

  .storyboard-motion-output-player {
    min-height: 610px;
  }

  .storyboard-motion-output-inspector {
    border-top: 1px solid #334c58b8;
    border-left: 0;
  }

  .storyboard-motion-unsaved-dialog {
    width: min(485px, 100% - 40px);
    top: auto;
    bottom: 170px;
    right: 20px;
  }

  .storyboard-video-player-modal-content {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .storyboard-video-player-modal-media {
    height: min(540px, 60dvh);
    min-height: 320px;
  }

  .storyboard-video-generation-details {
    overflow: visible;
  }
}

.storyboard-video-player {
  background: #020406;
  border: 1px solid #5eead447;
  border-radius: 7px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 8px;
  display: grid;
  overflow: hidden;
}

.storyboard-video-player video {
  object-fit: contain;
  background: #000;
  border-radius: 5px;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: block;
}

.storyboard-video-player-meta {
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.storyboard-video-player-meta strong, .storyboard-video-player-meta small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.storyboard-video-player-meta strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.storyboard-video-player-meta small {
  color: var(--teal);
  font-size: 10px;
}

.storyboard-fullscreen-viewer {
  width: min(100%, 1180px);
  height: min(860px, calc(100vh - var(--storyboard-focused-viewer-top-clearance) - 18px));
  max-height: calc(100vh - var(--storyboard-focused-viewer-top-clearance) - 18px);
  background: #05070a;
  border: 1px solid #94a3b857;
  border-radius: 8px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  display: grid;
  box-shadow: 0 26px 90px #0009;
}

.storyboard-fullscreen-head {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.storyboard-fullscreen-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.storyboard-fullscreen-head strong {
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.storyboard-fullscreen-content {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 12px;
  min-height: 0;
  display: grid;
}

.storyboard-fullscreen-media-pane, .storyboard-fullscreen-sidebar {
  min-height: 0;
}

.storyboard-fullscreen-sidebar {
  align-content: start;
  gap: 12px;
  display: grid;
  overflow: auto;
}

.storyboard-fullscreen-media {
  background: #020406;
  border-radius: 6px;
  place-items: center;
  min-height: 0;
  display: grid;
  overflow: auto;
}

.storyboard-fullscreen-media img, .storyboard-fullscreen-media video {
  object-fit: contain;
  max-width: 100%;
  max-height: calc(100vh - 126px);
  display: block;
}

.storyboard-fullscreen-media > .storyboard-crop-editor {
  width: 100%;
  height: 100%;
}

.storyboard-fullscreen-image-stack {
  gap: 12px;
  width: 100%;
  display: grid;
}

.storyboard-crop-derived-preview {
  background: #0f172a66;
  border-top: 1px solid #94a3b829;
  gap: 8px;
  padding: 10px;
  display: grid;
}

.storyboard-crop-derived-preview img {
  object-fit: contain;
  width: 100%;
  max-height: 260px;
}

.storyboard-prompt-review {
  background: #02060bb8;
  border: 1px solid #94a3b83d;
  border-radius: 8px;
  min-width: 0;
}

.storyboard-prompt-review.compact {
  background: #0f172a8a;
  border-color: #94a3b82e;
}

.storyboard-prompt-review summary {
  cursor: pointer;
  min-width: 0;
  min-height: 32px;
  color: var(--ink-strong);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 850;
  display: flex;
}

.storyboard-prompt-review summary small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.storyboard-prompt-review-grid {
  gap: 8px;
  max-height: calc(100vh - 190px);
  padding: 0 9px 9px;
  display: grid;
  overflow: auto;
}

.storyboard-prompt-review.compact .storyboard-prompt-review-grid {
  max-height: 210px;
}

.storyboard-prompt-review section {
  gap: 3px;
  display: grid;
}

.storyboard-prompt-review section strong {
  color: var(--ink-strong);
  text-transform: uppercase;
  font-size: 10px;
}

.storyboard-prompt-review section p {
  color: var(--muted);
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.storyboard-prompt-review-tags {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.storyboard-focus-regenerate {
  background: #082f492e;
  border: 1px solid #2dd4bf47;
  border-radius: 8px;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  display: grid;
}

.storyboard-focus-regenerate label {
  gap: 6px;
  display: grid;
}

.storyboard-focus-regenerate textarea {
  min-width: 0;
  color: var(--ink);
  font: inherit;
  resize: vertical;
  background: #05070ad1;
  border: 1px solid #2c3545f2;
  border-radius: 6px;
  padding: 9px;
  font-size: 12px;
  line-height: 1.45;
}

.storyboard-focus-regenerate .primary-action {
  justify-content: center;
}

.storyboard-focus-panel {
  background: #02060bb8;
  border: 1px solid #94a3b83d;
  border-radius: 8px;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  display: grid;
}

.storyboard-focus-panel.seedvr2 {
  border-color: #a78bfa42;
}

.storyboard-focus-panel.frame-replacement {
  background: #082f4933;
  border-color: #2dd4bf57;
}

.storyboard-focus-panel-head {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.storyboard-focus-panel-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.storyboard-focus-panel label {
  gap: 6px;
  display: grid;
}

.storyboard-focus-panel select {
  min-width: 0;
  color: var(--ink);
  font: inherit;
  background: #05070ad1;
  border: 1px solid #2c3545f2;
  border-radius: 6px;
  padding: 9px;
  font-size: 12px;
}

.storyboard-frame-replacement-note, .storyboard-frame-replacement-empty {
  color: var(--muted);
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
}

.storyboard-frame-replacement-scope {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.storyboard-frame-replacement-scope button, .storyboard-frame-replacement-upload {
  min-height: 30px;
  color: var(--muted-strong);
  cursor: pointer;
  background: #05070abd;
  border: 1px solid #94a3b847;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  display: flex;
}

.storyboard-frame-replacement-scope button.active {
  color: var(--ink-strong);
  background: #0d948833;
  border-color: #2dd4bfb8;
}

.storyboard-frame-replacement-search {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  font: inherit;
  background: #05070ad1;
  border: 1px solid #2c3545f2;
  border-radius: 6px;
  padding: 8px 9px;
  font-size: 11px;
}

.storyboard-frame-replacement-upload {
  color: var(--teal);
  border-color: #2dd4bf80;
}

.storyboard-frame-replacement-upload.disabled {
  cursor: wait;
  opacity: .55;
}

.storyboard-frame-replacement-upload input {
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  position: absolute;
}

.storyboard-frame-replacement-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 260px;
  display: grid;
  overflow: auto;
}

.storyboard-frame-replacement-grid > button {
  min-width: 0;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  background: #02060bd6;
  border: 1px solid #94a3b833;
  border-radius: 6px;
  grid-template-rows: 72px auto;
  padding: 0;
  display: grid;
  overflow: hidden;
}

.storyboard-frame-replacement-grid > button.current {
  border-color: #2dd4bfbf;
  box-shadow: inset 0 0 0 1px #2dd4bf33;
}

.storyboard-frame-replacement-grid > button:disabled:not(.current) {
  cursor: wait;
  opacity: .55;
}

.storyboard-frame-replacement-grid img, .storyboard-frame-replacement-grid .missing {
  object-fit: contain;
  background: #020406;
  place-items: center;
  width: 100%;
  height: 72px;
  display: grid;
}

.storyboard-frame-replacement-grid > button > span:last-child {
  gap: 2px;
  min-width: 0;
  padding: 6px;
  display: grid;
}

.storyboard-frame-replacement-grid strong, .storyboard-frame-replacement-grid small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.storyboard-frame-replacement-grid strong {
  font-size: 10px;
}

.storyboard-frame-replacement-grid small {
  color: var(--muted);
  font-size: 9px;
}

.storyboard-focus-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

@media (max-width: 820px) {
  .storyboard-fullscreen-viewer {
    height: calc(100vh - var(--storyboard-focused-viewer-top-clearance) - 18px);
  }

  .storyboard-fullscreen-content {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  .storyboard-fullscreen-media-pane {
    min-height: 320px;
  }

  .storyboard-fullscreen-sidebar {
    overflow: visible;
  }
}

.storyboard-crop-editor {
  gap: 8px;
  min-height: 0;
  display: grid;
}

.storyboard-crop-canvas {
  cursor: crosshair;
  touch-action: none;
  background: #010409eb;
  border: 1px solid #94a3b829;
  border-radius: 8px;
  flex: auto;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  display: grid;
  overflow: auto;
}

.storyboard-crop-canvas.disabled {
  cursor: default;
}

.storyboard-crop-image-stage {
  max-width: 100%;
  max-height: calc(100vh - 180px);
  display: inline-block;
  position: relative;
}

.storyboard-crop-image-stage img {
  max-width: 100%;
  max-height: calc(100vh - 180px);
  display: block;
}

.storyboard-crop-region {
  cursor: move;
  border: 2px solid #2dd4bff2;
  border-radius: 4px;
  position: absolute;
  box-shadow: 0 0 0 9999px #01060a94;
}

.storyboard-crop-handle {
  background: var(--teal);
  border: 2px solid #021217;
  border-radius: 999px;
  width: 12px;
  height: 12px;
  position: absolute;
}

.storyboard-crop-handle.nw {
  cursor: nwse-resize;
  top: -7px;
  left: -7px;
}

.storyboard-crop-handle.ne {
  cursor: nesw-resize;
  top: -7px;
  right: -7px;
}

.storyboard-crop-handle.sw {
  cursor: nesw-resize;
  bottom: -7px;
  left: -7px;
}

.storyboard-crop-handle.se {
  cursor: nwse-resize;
  bottom: -7px;
  right: -7px;
}

.storyboard-crop-placeholder {
  color: var(--muted);
  text-align: center;
  background: #02060bb8;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
}

.storyboard-crop-metrics {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.storyboard-crop-metrics small {
  color: var(--muted);
  font-size: 11px;
}

.storyboard-crop-metrics.inline {
  gap: 4px;
  display: grid;
}

.storyboard-crop-indicator {
  color: var(--teal);
  font-size: 10px;
  font-weight: 800;
}

.storyboard-prompt-review-tags span {
  max-width: 100%;
  color: var(--teal);
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #5eead43d;
  border-radius: 999px;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 850;
  overflow: hidden;
}

.storyboard-video-manifest-preview span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.storyboard-placement-preview span {
  color: var(--muted);
  font-size: 12px;
}

.storyboard-placement-meta {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.storyboard-placement-meta strong, .storyboard-placement-meta small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.storyboard-placement-meta strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.storyboard-placement-meta small {
  color: var(--muted);
  font-size: 11px;
}

.storyboard-placement-time {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 5px;
  display: grid;
}

.storyboard-placement-time input {
  border: 1px solid var(--line);
  background: var(--field);
  width: 100%;
  min-height: 28px;
  color: var(--ink);
  border-radius: 6px;
  padding: 4px 5px;
  font-size: 12px;
}

.storyboard-placement-time .secondary-action {
  min-height: 28px;
  padding: 4px 7px;
  font-size: 12px;
}

.storyboard-empty-track {
  min-height: 172px;
  color: var(--muted);
  text-align: center;
  place-items: center;
  font-size: 13px;
  display: grid;
}

.storyboard-empty-track.compact {
  background: #080a0e57;
  border: 1px dashed #2c3545b8;
  border-radius: 8px;
  min-height: 58px;
  padding: 10px;
}

.storyboard-join-queue {
  border: 1px solid var(--line);
  background: #050a109e;
  border-radius: 8px;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  display: grid;
}

.storyboard-join-queue-head, .storyboard-join-queue-row, .storyboard-join-queue-actions {
  align-items: center;
  display: flex;
}

.storyboard-join-queue-head {
  justify-content: space-between;
  gap: 12px;
}

.storyboard-join-queue-head > div, .storyboard-join-queue-row > div:first-child {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.storyboard-join-queue-list {
  gap: 6px;
  display: grid;
}

.storyboard-join-queue-row {
  background: #0b121ca8;
  border: 1px solid #2c3545b8;
  border-radius: 6px;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
}

.storyboard-join-queue-row strong, .storyboard-join-queue-row small, .storyboard-join-queue-row p {
  text-overflow: ellipsis;
  overflow: hidden;
}

.storyboard-join-queue-row small, .storyboard-join-queue-row p {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
}

.storyboard-join-queue-actions {
  flex-shrink: 0;
  gap: 8px;
}

.storyboard-join-queue-actions a {
  color: var(--teal);
  border: 1px solid #5eead452;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}

.storyboard-join-status {
  color: var(--muted);
  text-transform: uppercase;
  border: 1px solid #94a3b857;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 850;
}

.storyboard-join-status.completed {
  color: var(--teal);
  border-color: #5eead470;
}

.storyboard-join-status.queued, .storyboard-join-status.running {
  color: #bfdbfe;
  border-color: #60a5fa85;
}

.storyboard-join-status.missing {
  color: #f8e7a3;
  border-color: #f4c4307a;
}

.storyboard-join-status.stale, .storyboard-join-status.failed {
  color: #fecaca;
  border-color: #f8717194;
}

.storyboard-join-queue-note {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
}

.storyboard-composition-timeline-container {
  pointer-events: none;
  min-width: 1px;
  position: absolute;
  inset-block: 0;
}

.storyboard-composition-timeline-container > * {
  pointer-events: auto;
}

.storyboard-composition-local-origin {
  z-index: 5;
  border-left: 1px dashed color-mix(in srgb, var(--composition-color, #2dd4bf) 90%, white 10%);
  width: 1px;
  box-shadow: 0 0 7px color-mix(in srgb, var(--composition-color, #2dd4bf) 42%, transparent);
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  pointer-events: none !important;
}

.storyboard-composition-local-origin:before {
  max-width: 90px;
  color: color-mix(in srgb, var(--composition-color, #2dd4bf) 74%, white 26%);
  content: attr(data-offset-label);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #02060bd1;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 7px;
  font-weight: 850;
  line-height: 1.2;
  position: absolute;
  top: 1px;
  left: 4px;
  overflow: hidden;
}

.storyboard-composition-local-segment {
  z-index: 4;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--composition-color, #2dd4bf) 76%, white 14%);
  background: color-mix(in srgb, var(--composition-color, #2dd4bf) 72%, #02060bf5);
  color: #f8fafc;
  border-radius: 6px;
  min-width: 2px;
  height: auto;
  position: absolute;
  top: 5px;
  bottom: 5px;
  overflow: hidden;
  box-shadow: 0 0 4px #02060bb8;
  pointer-events: none !important;
}

.storyboard-composition-timeline-container.selected .storyboard-composition-local-segment {
  box-shadow: 0 0 0 2px #2dd4bf6b, 0 0 18px color-mix(in srgb, var(--composition-color) 42%, transparent);
}

.storyboard-composition-local-segment.frame-hold {
  background: color-mix(in srgb, var(--composition-color, #2dd4bf) 32%, #02060bf5);
  border-style: dotted;
}

.storyboard-composition-local-segment.media {
  background: #4170abfc;
}

.storyboard-composition-local-segment.missing, .storyboard-composition-local-segment.stale {
  background: repeating-linear-gradient(-45deg, #f59e0b9e 0 3px, #02060bdb 3px 6px);
  border-color: #fbbf24;
}

.storyboard-composition-local-segment > span {
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 3px;
  font-size: 6px;
  font-weight: 900;
  line-height: 22px;
  display: block;
  overflow: hidden;
}

.storyboard-composition-local-frame-marker {
  z-index: 5;
  border: 1px solid color-mix(in srgb, var(--composition-color, #2dd4bf) 72%, white 28%);
  color: #f8fafc;
  background: #02060bf5;
  border-radius: 999px;
  place-items: center;
  width: 12px;
  height: 12px;
  font-size: 6px;
  font-weight: 950;
  line-height: 1;
  display: grid;
  position: absolute;
  bottom: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px #02060bb8;
  pointer-events: none !important;
}

@keyframes storyboard-boundary-flf-progress {
  to {
    background-position: 17px 0;
  }
}

.storyboard-dual-stage-steps {
  border: 1px solid #50dbcb40;
  border-radius: .65rem;
  gap: .45rem;
  padding: .75rem;
  display: grid;
}

.storyboard-dual-stage-step-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  display: grid;
}

.storyboard-dual-stage-steps p, .storyboard-dual-stage-steps small {
  margin: 0;
}

.storyboard-lora-family-editor {
  border-top: 1px solid #64748b52;
  gap: 10px;
  padding-top: 12px;
  display: grid;
}

.storyboard-lora-family-editor > header {
  gap: 3px;
  display: grid;
}

.storyboard-lora-family-editor > header small, .storyboard-lora-family-editor > small {
  color: var(--muted);
}

.storyboard-lora-family-picker {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  display: grid;
}

.storyboard-lora-family-picker label, .storyboard-lora-family-card > label {
  gap: 5px;
  display: grid;
}

.storyboard-lora-family-picker label > span, .storyboard-lora-family-card > label > span {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 800;
}

.storyboard-lora-family-picker select, .storyboard-lora-family-card input {
  min-height: 36px;
}

.storyboard-lora-family-list {
  gap: 9px;
  display: grid;
}

.storyboard-lora-family-card {
  background: #080f16b8;
  border: 1px solid #64748b61;
  border-radius: 9px;
  gap: 9px;
  padding: 10px;
  display: grid;
}

.storyboard-lora-family-card > header, .storyboard-lora-family-card > header > div, .storyboard-lora-family-badges {
  align-items: center;
  gap: 8px;
  display: flex;
}

.storyboard-lora-family-card > header {
  justify-content: space-between;
}

.storyboard-lora-family-card > header > div {
  flex-wrap: wrap;
  min-width: 0;
}

.storyboard-lora-family-badges span {
  color: #99f6e4;
  letter-spacing: .05em;
  background: #0d948824;
  border: 1px solid #2dd4bf7a;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 900;
}

.storyboard-lora-family-card details {
  color: var(--muted);
  font-size: 11px;
}

.storyboard-lora-family-card details dl, .storyboard-lora-family-card details div {
  gap: 5px;
  display: grid;
}

.storyboard-lora-family-card details div {
  grid-template-columns: 42px minmax(0, 1fr);
}

.storyboard-lora-family-card details code {
  overflow-wrap: anywhere;
}

.storyboard-lora-family-error {
  color: #fca5a5;
  margin: 0;
  font-size: 11px;
}

@media (max-width: 720px) {
  .storyboard-lora-family-picker {
    grid-template-columns: 1fr;
  }
}

.storyboard-render-options-backdrop {
  z-index: 140;
}

.storyboard-render-options-backdrop fieldset {
  border: 1px solid #5eead43d;
  border-radius: 8px;
  min-width: 0;
  padding: 12px;
}

.storyboard-render-options-backdrop fieldset label {
  align-items: center;
  gap: 8px;
  display: flex;
}

.storyboard-render-options-backdrop fieldset select {
  width: 100%;
  margin: 6px 0;
}

.storyboard-render-options-backdrop fieldset input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
}

.storyboard-lora-family-search {
  gap: .4rem;
  min-width: 0;
  display: grid;
}

.storyboard-lora-family-search input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.storyboard-lora-family-switches {
  flex-wrap: wrap;
  gap: .75rem;
  display: flex;
}

.storyboard-lora-family-switches label {
  align-items: center;
  gap: .4rem;
  display: inline-flex;
}

.storyboard-lora-family-switches input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.storyboard-timeline-status-global, .storyboard-timeline-status-container {
  flex: none;
  align-items: center;
  min-width: 0;
  display: flex;
}

@media (max-width: 700px) {
  body:has(.storyboard-timeline-status-bar) {
    --workbench-status-bar-height: 96px;
  }

  .storyboard-timeline-status-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label debug"
                         "global container";
    align-content: center;
    gap: 6px 12px;
    display: grid;
  }

  .storyboard-timeline-status-label {
    grid-area: label;
  }

  .storyboard-timeline-status-debug {
    grid-area: debug;
    min-width: 0;
  }

  .storyboard-timeline-status-global {
    grid-area: global;
  }

  .storyboard-timeline-status-container {
    grid-area: container;
  }

  .storyboard-timeline-status-container .storyboard-timeline-scale-control {
    grid-template-columns: 12px minmax(32px, 1fr) 16px max-content;
    gap: 4px;
    width: min(240px, 40vw);
    padding-inline: 4px;
  }
}

[data-docked-timeline-scroll="true"] {
  scrollbar-width: none;
}

[data-docked-timeline-scroll="true"]::-webkit-scrollbar {
  display: none;
}

.storyboard-timeline-scroll-destination:empty {
  display: none;
}

.storyboard-video-layer-header {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.storyboard-video-layer-header button {
  color: inherit;
  background: #111e27;
  border: 1px solid #344551;
  border-radius: 4px;
  padding: 3px 6px;
}

.storyboard-video-layer-header button[draggable="true"] {
  cursor: grab;
}

.storyboard-video-layer-header button:disabled {
  opacity: .4;
  cursor: default;
}

.storyboard-video-layer-order-buttons {
  gap: 4px;
  display: flex;
}

[data-unified-timeline-layer][data-layer-dragging="true"] {
  outline-offset: -2px;
  opacity: .75;
  outline: 2px solid #24cbbb;
}

.storyboard-video-layer-order-announcement {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

[data-layer-dragging="true"] {
  border-top: 3px solid var(--accent, #2dd4bf);
}

/* [project]/packages/web/app/styles/responsive.css [app-client] (css) */
@media (max-width: 1100px) {
  .app-shell:has(.project-task-sidebar-shell) {
    --project-task-sidebar-effective-width: min(var(--project-task-sidebar-dock-width, 44px),
      max(240px, calc(100vw - 300px)));
  }

  .page-header, .project-browser-layout {
    grid-template-columns: 1fr;
  }

  .app-shell:has(.project-task-sidebar-shell) .page-header {
    margin-left: 36px;
  }

  .workbench-body, .workbench-body.stage-content-only {
    grid-template-columns: var(--project-task-sidebar-effective-width) minmax(0, 1fr);
  }

  .workbench-body:not(.stage-content-only) .sidebar-stack, .workbench-body .panel-stack {
    grid-column: 2;
  }

  .project-task-sidebar-dock-space {
    width: var(--project-task-sidebar-effective-width);
    min-width: var(--project-task-sidebar-effective-width);
  }

  .project-task-sidebar-shell {
    width: 44px;
    min-width: 44px;
    height: auto;
    top: 0;
  }

  .project-task-sidebar-shell:not(.is-collapsed) {
    z-index: 120;
    width: var(--project-task-sidebar-effective-width);
    min-width: var(--project-task-sidebar-effective-width);
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .analysis-stage, .analysis-transcript-panel, .stage-config-layout {
    grid-template-columns: 1fr;
  }

  .analysis-layer-panel {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  .analysis-layer-panel strong {
    grid-column: 1 / -1;
  }

  .analysis-chunk-nav {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  }

  .analysis-chunk-nav strong {
    grid-column: 1 / -1;
  }

  .voice-config-grid, .import-project-audio-panel, .voice-lock-actions, .manual-chunk-upload-row, .strategy-analysis-grid, .annotation-chunk-meta, .storyboard-toolbar, .storyboard-container-head, .storyboard-container-body {
    grid-template-columns: 1fr 1fr;
  }

  .storyboard-toolbar, .storyboard-container-head {
    align-items: start;
  }

  .storyboard-toolbar-actions, .storyboard-container-actions {
    justify-content: flex-start;
  }

  .storyboard-container-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .storyboard-fullscreen-content {
    grid-template-columns: 1fr;
  }

  .storyboard-timeline-run:before {
    left: 43px;
  }

  .storyboard-span-body, .storyboard-span-handle {
    left: 30px;
  }

  .storyboard-span-register {
    left: 38px;
  }

  .storyboard-span-time, .storyboard-span-duration {
    left: 56px;
  }
}

@media (max-width: 640px) {
  .app-shell:has(.stage-menu) {
    padding-top: 58px;
  }

  .storyboard-preview-stage-head, .storyboard-preview-stage-status {
    flex-wrap: wrap;
    max-width: calc(100% - 20px);
  }

  .storyboard-preview-stage-head small, .storyboard-preview-stage-status small {
    max-width: 100%;
  }

  .storyboard-playback-panel-controls .storyboard-timeline-audio-volume {
    flex-basis: 100%;
  }

  .stage-menu {
    top: 0;
    right: 0;
    left: var(--project-task-sidebar-effective-width, 0px);
    width: auto;
  }

  .timeline-sync-popover {
    position: fixed;
    top: 58px;
    right: 8px;
  }

  .workflow-context-project {
    padding-inline: 10px;
  }

  .workflow-context-project small {
    display: none;
  }

  .workflow-context-project strong {
    font-size: 12px;
  }

  .workflow-context-trigger {
    flex-basis: min(224px, 55vw);
    width: min(224px, 55vw);
  }

  .project-target-resolution-trigger {
    width: 164px;
  }

  .project-target-resolution-ratio {
    display: none;
  }

  .app-shell {
    padding: 14px;
  }

  .app-shell:has(.project-task-sidebar-shell) .page-header {
    margin-left: 44px;
  }

  .workbench-body, .workbench-body.stage-content-only {
    gap: 8px;
  }

  .status-strip, .decision-grid, .runtime-grid, .candidate-row, .import-project-audio-actions, .manual-chunk-upload-actions, .manual-chunk-upload-row, .voice-reference-row, .section-audio-attachment, .analysis-tagged-line, .form-row {
    grid-template-columns: 1fr;
  }

  .autosave-status {
    margin-right: 0;
  }

  .generate-audio-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .voice-config-grid, .voice-lock-actions, .voice-upload-row, .manual-chunk-upload-row, .strategy-analysis-grid, .annotation-chunk-meta, .storyboard-toolbar, .storyboard-container-head, .storyboard-container-body, .stage-config-custom-grid {
    grid-template-columns: 1fr;
  }

  .stage-step {
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 7px;
  }

  .storyboard-container-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .storyboard-timeline-run:before {
    left: 31px;
  }

  .storyboard-span-body, .storyboard-span-handle {
    left: 18px;
  }

  .storyboard-span-register {
    left: 26px;
  }

  .storyboard-span-time, .storyboard-span-duration {
    font-size: 10px;
    left: 42px;
  }

  .storyboard-media-track-wrap, .storyboard-transcript-area {
    overflow-x: auto;
  }

  .storyboard-placement-time {
    grid-template-columns: 1fr;
  }

  .voice-save-row {
    flex-direction: column;
    align-items: stretch;
  }

  .generation-progress-meta, .generation-event-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .generation-event-row strong {
    text-align: left;
    white-space: normal;
  }

  .analysis-console {
    padding: 10px;
  }

  .analysis-console-header, .analysis-scale-row {
    justify-content: stretch;
    display: grid;
  }

  .analysis-console-header dl {
    grid-template-columns: 1fr;
  }

  .analysis-console-header dl div + div {
    border-top: 1px solid #2c3545cc;
    border-left: 0;
  }

  .analysis-tick-scale {
    justify-content: start;
    margin-left: 0;
  }

  .analysis-window-scale {
    justify-content: start;
  }

  .analysis-player {
    grid-template-columns: max-content max-content max-content 1fr;
  }

  .analysis-player input, .analysis-player strong {
    grid-column: 1 / -1;
  }

  .analysis-transcript-copy p {
    font-size: 15px;
  }
}

/* [project]/packages/web/app/styles/project-switcher.css [app-client] (css) */
button.project-switcher-trigger {
  text-align: left;
  min-width: 0;
  color: inherit;
  cursor: pointer;
  background: none;
  border-radius: 0;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.project-switcher-trigger > span:first-child {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.project-switcher-trigger strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.project-switcher-trigger:hover {
  background: #49d3c914;
}

.project-switcher-trigger:focus-visible {
  outline-offset: -3px;
  outline: 2px solid #50d4cc;
}

.project-switcher-popup {
  z-index: 15000;
  box-sizing: border-box;
  color: #d9e6eb;
  background: #0b1820;
  border: 1px solid #4cbcb6;
  border-radius: 12px;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 18px 60px #000a;
}

.project-switcher-popup input {
  box-sizing: border-box;
  width: 100%;
  color: inherit;
  background: #061017;
  border: 1px solid #42616c;
  border-radius: 6px;
  flex-shrink: 0;
  padding: 12px;
}

.project-switcher-popup input:focus {
  outline: 2px solid #50d4cc;
}

.project-switcher-results {
  min-height: 0;
  overflow-y: auto;
}

.project-switcher-option {
  cursor: pointer;
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: flex;
}

.project-switcher-option > span {
  overflow-wrap: anywhere;
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.project-switcher-option.highlighted {
  outline-offset: -1px;
  background: #173d40;
  outline: 1px solid #397b7d;
}

.project-switcher-option[aria-selected="true"] {
  color: #66ded5;
}

.project-switcher-option > small {
  white-space: nowrap;
}

.project-switcher-popup small, .project-switcher-popup p {
  font-size: 12px;
}

.project-switcher-popup p {
  margin: 0;
}

.project-switcher-hint {
  color: #9bb3be;
}

.workbench-navigation-notice {
  z-index: 20000;
  box-sizing: border-box;
  color: #e0eeee;
  background: #10272e;
  border: 1px solid #51c9c4;
  border-radius: 10px;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 16px;
  display: flex;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 12px 40px #000a;
}

.workbench-navigation-notice button, .project-switcher-popup button {
  color: inherit;
  cursor: pointer;
  background: #193c43;
  border: 1px solid #4a7e87;
  border-radius: 6px;
  padding: 8px 12px;
}

/* [project]/packages/web/app/styles/project-lifecycle.css [app-client] (css) */
.project-catalog {
  min-width: 0;
}

.project-catalog-toolbar {
  justify-content: flex-end;
  margin-bottom: 12px;
  display: flex;
}

.project-catalog-toolbar button, .project-trash-actions button, .project-catalog [role="status"] button, .project-row .project-danger, .project-lifecycle-dialog button {
  border: 1px solid var(--line-strong);
  background: var(--panel-raised);
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
  padding: 9px 14px;
}

.project-catalog button:focus-visible, .project-lifecycle-dialog button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.project-catalog button:disabled, .project-lifecycle-dialog button:disabled {
  opacity: .5;
  cursor: default;
}

.project-open-button {
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 4px 0;
  font-weight: 700;
}

.project-open-button:hover {
  text-decoration: underline;
}

.project-catalog .project-danger, .project-lifecycle-dialog .project-danger {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-soft);
}

.project-lifecycle-dialog {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  width: min(540px, 100vw - 32px);
  max-height: calc(100dvh - 32px);
  padding: 24px;
  overflow: auto;
}

.project-lifecycle-dialog h2 {
  margin: 0;
}

.project-lifecycle-dialog p {
  margin: 12px 0;
  line-height: 1.5;
}

.project-lifecycle-dialog::backdrop {
  background: #0009;
}

.project-lifecycle-dialog footer {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  display: flex;
}

.project-trash-list {
  padding: 0;
  list-style: none;
}

.project-trash-list li {
  border-bottom: 1px solid var(--line-strong);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  display: flex;
}

.project-trash-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

@media (max-width: 600px) {
  .project-trash-list li {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* [project]/packages/web/app/globals.css [app-client] (css) */


/*# sourceMappingURL=packages_web_app_0yq7syl._.css.map*/