@font-face {
      font-family: "Roboto Flex Local";
      src: url("../reference/Instal Font - RobotoFlex.ttf") format("truetype");
      font-display: swap;
    }

    :root {
      --ink: #f4f0e7;
      --ink-soft: #bcb3a6;
      --ink-dim: #a89d90;
      --void: #070706;
      --floor: #0e0d0b;
      --panel: #14120f;
      --panel-lift: #1c1813;
      --rail: #262017;
      --line: #342c22;
      --line-bright: #53483a;
      --orange: #f15a24;
      --orange-quiet: #3b1d12;
      --yellow: #e5e517;
      --cyan: #17e5e5;
      --red: #e51717;
      --green: #47eb70;
      --blue: #5e82ed;
      --shadow: 0 18px 50px rgba(0, 0, 0, 0.46);
      --radius: 8px;
      --target: 44px;
      --focus-ring: #e5e517;
      --font-ui: "Aptos", "Avenir Next", "Helvetica Neue", sans-serif;
      --font-cwi: "Roboto Flex Local", "Aptos", "Avenir Next", sans-serif;
      --surface-root-start: #0b0a09;
      --surface-topbar: rgba(12, 11, 10, 0.96);
      --surface-phone: #12100d;
      --surface-timeline: #0a0908;
      --surface-grid: #080706;
      --surface-row-label: #100e0c;
      --surface-inspector: #0c0b0a;
      --surface-preview-control: rgba(5, 5, 4, 0.78);
      --surface-caption: rgba(0, 0, 0, 0.9);
      --media-border: #3a3025;
      --media-border-strong: #705f4b;
      --primary-button-ink: #160804;
      --safe-guide: rgba(244, 240, 231, 0.14);
      --caption-idle: #dddddd;
      --status-pass-bg: rgba(24, 70, 38, 0.34);
      --status-pass-border: rgba(71, 235, 112, 0.45);
      --status-pass-kicker: #8ef0a7;
      --status-fail-bg: rgba(96, 24, 20, 0.52);
      --status-fail-border: rgba(255, 147, 124, 0.72);
      --status-fail-kicker: #ffb4a8;
      color-scheme: dark;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    body {
      margin: 0;
      overflow: hidden;
      background: var(--void);
      color: var(--ink);
      font-family: var(--font-ui);
      font-size: 0.875rem;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }

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

    button {
      color: inherit;
      cursor: pointer;
    }

    label {
      color: inherit;
    }

    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    .word:focus-visible,
    .segment:focus-visible,
    .timeline-scroll:focus-visible,
    .phone-frame:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 3px;
    }

    svg {
      width: 16px;
      height: 16px;
      display: block;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .app {
      height: 100vh;
      display: grid;
      grid-template-rows: 52px minmax(0, 1fr);
      background: linear-gradient(180deg, var(--surface-root-start) 0%, var(--void) 100%);
    }

    .topbar {
      display: grid;
      grid-template-columns: minmax(240px, 1fr) auto;
      align-items: center;
      gap: 16px;
      padding: 0 16px;
      border-bottom: 1px solid var(--line);
      background: var(--surface-topbar);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      row-gap: 6px;
      min-width: 0;
    }

    .brand-mark {
      width: 20px;
      height: 20px;
      border: 2px solid var(--orange);
      border-radius: 50%;
      position: relative;
      flex: 0 0 auto;
    }

    .brand-mark::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      right: -3px;
      bottom: -3px;
      border-radius: 50%;
      background: var(--yellow);
      border: 2px solid var(--void);
    }

    .brand-title {
      font-weight: 800;
      font-size: 14px;
      white-space: nowrap;
    }

    .project-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--ink-soft);
      min-width: 0;
    }

    .project-name {
      color: var(--ink);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 210px;
    }

    .small-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 26px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--panel);
      color: var(--ink-soft);
      white-space: nowrap;
    }

    .top-actions {
      justify-self: end;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .text-button,
    .primary-button {
      min-height: 32px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--panel);
      color: var(--ink-soft);
      display: inline-block;
      gap: 8px;
      padding: 0 13px;
    }

    .primary-button {
      border-color: var(--orange);
      background: var(--orange);
      color: var(--primary-button-ink);
      font-weight: 800;
    }

    .text-button,
    .primary-button {
      min-height: var(--target);
    }

    .workspace {
      --inspector-size: 360px;
      min-height: 0;
      display: grid;
      grid-template-columns: clamp(300px, 27vw, 380px) minmax(0, 1fr) 10px var(--inspector-size);
      grid-template-rows: 44px minmax(0, 1fr);
    }

    .stage {
      grid-column: 2;
      grid-row: 1 / 3;
      min-width: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr) 176px;
      border-left: 1px solid var(--line);
    }

    .preview-zone {
      position: relative;
      min-height: 0;
      display: grid;
      place-items: center;
      padding: 12px;
      overflow: hidden;
      background: var(--floor);
    }

    .preview-shell {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-rows: auto auto;
      align-items: center;
      justify-items: center;
      align-content: center;
      gap: 10px;
    }

    .phone-frame {
      width: min(100%, calc((100vh - 226px) * 16 / 9));
      min-width: 0;
      max-height: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 8px;
      position: relative;
      overflow: hidden;
      background: var(--surface-phone);
      border: 1px solid var(--media-border-strong);
      box-shadow: var(--shadow);
    }

    .phone-frame::before {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px dashed var(--safe-guide);
      pointer-events: none;
      z-index: 4;
    }

    .media {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 1;
      filter: none;
    }

    .media-vignette {
      position: absolute;
      inset: 0;
      display: none;
      background: transparent;
      z-index: 1;
    }

    .caption-safe {
      position: absolute;
      left: 5.5%;
      right: 5.5%;
      bottom: 0;
      height: 20%;
      text-align: center;
      z-index: 2;
      font-family: var(--font-cwi);
      pointer-events: none;
    }

    .caption-stack {
      position: absolute;
      inset: 1px 0 0;
      display: grid;
      grid-template-rows: 25% 12.5% 25% 37.5%;
      align-items: center;
      justify-items: center;
      width: 100%;
      height: calc(100% - 1px);
    }

    .caption-stack.one-line .caption-line {
      grid-row: 3;
    }

    .caption-stack.two-lines .caption-line:first-child {
      grid-row: 1;
    }

    .caption-stack.two-lines .caption-line:last-child {
      grid-row: 3;
    }

    .caption-line {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.28em;
      max-width: 100%;
      max-height: 100%;
      padding: var(--caption-box-padding-y, 0.42em) var(--caption-box-padding-x, 2.22em);
      background: var(--surface-caption);
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      color: var(--caption-idle);
      font-size: var(--caption-font-size, 27px);
      font-weight: 400;
      line-height: 1.14;
      text-transform: none;
      white-space: nowrap;
      overflow: visible;
    }

    .caption-overflow .caption-line {
      white-space: normal;
      overflow-wrap: anywhere;
      text-wrap: balance;
    }

    .caption-word {
      display: inline-block;
      margin: 0;
      transform-origin: center center;
      line-height: 1.14;
      transition: color 90ms linear;
      will-change: transform;
    }

    .caption-word.spoken {
      color: var(--cyan);
    }

    .caption-word.intent {
      z-index: 1;
    }

    .caption-word.anticipating {
      z-index: 1;
    }

    .caption-word.off-camera {
      font-style: italic;
    }

    .caption-empty {
      opacity: 0;
    }

    .preview-control {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 52px;
      padding: 0 14px;
      background: var(--surface-preview-control);
      border: 1px solid var(--safe-guide);
      border-radius: 999px;
      color: var(--ink-soft);
    }

    .play-icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--void);
      background: var(--ink);
    }

    .preview-button {
      width: var(--target);
      height: var(--target);
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--ink-soft);
      display: grid;
      place-items: center;
    }

    .time-readout {
      font-variant-numeric: tabular-nums;
      font-size: 11px;
      min-width: 104px;
    }

    .timeline {
      min-height: 0;
      min-width: 0;
      overflow: hidden;
      background: var(--surface-timeline);
      border-top: 1px solid var(--line);
      display: grid;
      grid-template-rows: minmax(0, 1fr);
    }

    .timeline-grid {
      min-width: 0;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      position: relative;
      display: grid;
      grid-template-columns: 90px minmax(0, 1fr);
      grid-template-rows: 24px 54px 54px 54px;
      background: var(--surface-grid);
    }

    .timeline-scroll {
      grid-column: 2;
      grid-row: 1 / 5;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      position: relative;
      display: grid;
      grid-template-rows: 24px 54px 54px 54px;
      background:
        repeating-linear-gradient(90deg, transparent 0, transparent 89px, rgba(244, 240, 231, 0.06) 90px),
        var(--surface-grid);
    }

    .timeline-scroll:focus-visible {
      z-index: 8;
    }

    .timeline-corner {
      grid-column: 1;
      grid-row: 1;
      border-bottom: 1px solid var(--line);
      border-right: 1px solid var(--line);
      background: var(--surface-row-label);
    }

    .ruler {
      border-bottom: 1px solid var(--line);
      position: relative;
      color: var(--ink-dim);
      font-size: 10px;
      font-variant-numeric: tabular-nums;
    }

    .ruler span {
      position: absolute;
      top: 6px;
    }

    .row {
      display: grid;
      grid-template-columns: 90px minmax(0, 1fr);
      border-bottom: 1px solid rgba(52, 44, 34, 0.78);
    }

    .row-label {
      grid-column: 1;
      z-index: 6;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid rgba(52, 44, 34, 0.78);
      background: var(--surface-row-label);
      color: var(--ink-dim);
      display: flex;
      align-items: center;
      padding-left: 12px;
      font-size: 11px;
      font-weight: 700;
    }

    .row-content {
      position: relative;
      min-width: 760px;
      border-bottom: 1px solid rgba(52, 44, 34, 0.78);
    }

    .wave {
      position: absolute;
      inset: 5px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1px;
      opacity: 0.72;
    }

    .wave i {
      display: block;
      width: 2px;
      flex: 0 0 2px;
      border-radius: 999px;
      background: var(--line-bright);
    }

    .segment {
      position: absolute;
      top: 5px;
      min-height: var(--target);
      border: 1px solid var(--line-bright);
      border-radius: 5px;
      background: var(--panel-lift);
      color: var(--ink-soft);
      display: flex;
      align-items: center;
      padding: 0 10px;
      font-size: 11px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .segment.active {
      border-color: var(--orange);
      background: var(--orange-quiet);
      color: var(--ink);
    }

    .playhead {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 42%;
      width: 1px;
      background: var(--orange);
      z-index: 4;
    }

    .playhead::before {
      content: "";
      position: absolute;
      top: 0;
      left: -5px;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 8px solid var(--orange);
    }

    .side-panel {
      display: contents;
    }

    .tabs {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      align-items: end;
      border-bottom: 1px solid var(--line);
      border-right: 1px solid var(--line);
      padding: 0 12px;
      gap: 4px;
      background: var(--panel);
    }

    .tab {
      height: 44px;
      padding: 0 10px;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: var(--ink-dim);
    }

    .tab.active {
      color: var(--ink);
      border-color: var(--orange);
      font-weight: 800;
    }

    .transcript {
      grid-column: 1;
      grid-row: 2;
      min-height: 0;
      overflow: auto;
      padding: 14px;
      border-right: 1px solid var(--line);
      background: var(--panel);
    }

    .cue {
      display: grid;
      gap: 10px;
      padding: 10px 8px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      margin-bottom: 8px;
      background: transparent;
    }

    .cue-select-surface {
      display: grid;
      grid-template-columns: 68px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      width: 100%;
      min-height: var(--target);
      border: 0;
      background: transparent;
      color: inherit;
      padding: 0;
      text-align: left;
      cursor: pointer;
    }

    .cue-select-surface:hover {
      color: var(--ink);
    }

    .cue.active {
      background: var(--panel-lift);
      border-color: var(--line-bright);
    }

    .cue-time {
      color: var(--ink-dim);
      font-size: 11px;
      font-variant-numeric: tabular-nums;
    }

    .speaker {
      margin-top: 6px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--ink-soft);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .speaker i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--cyan);
    }

    .cue-copy {
      color: var(--ink-soft);
      line-height: 1.6;
    }

    .cue-copy.sound,
    .cue-copy.music {
      color: var(--ink);
      font-style: italic;
    }

    .cue-edit-grid {
      display: grid;
      gap: 10px;
      padding-top: 2px;
    }

    .cue-edit-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .danger-button {
      min-height: var(--target);
      border: 1px solid var(--status-fail-border);
      border-radius: 999px;
      background: var(--status-fail-bg);
      color: var(--status-fail-kicker);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 13px;
    }

    .transcript-panel {
      min-height: 100%;
      grid-template-rows: minmax(0, 1fr) auto;
      align-content: stretch;
    }

    .transcript-list {
      display: grid;
      align-content: start;
    }

    .transcript-actions {
      position: sticky;
      bottom: -14px;
      margin: 0 -14px -14px;
      padding: 12px 14px 14px;
      border-top: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(20, 18, 15, 0.78) 0%, var(--panel) 42%);
      z-index: 3;
    }

    .word {
      display: inline-block;
      padding: 1px 4px;
      margin: 0 -1px;
      border-radius: 4px;
      border: 1px solid transparent;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
    }

    .word.selected {
      color: var(--void);
      background: var(--yellow);
      font-weight: 800;
    }

    .word.warn {
      border-bottom-color: var(--orange);
      color: var(--ink);
    }

    .word.live {
      color: var(--yellow);
      border-bottom-color: var(--yellow);
    }

    .inspector-resize {
      grid-column: 3;
      grid-row: 1 / 3;
      border: 0;
      border-left: 1px solid var(--line);
      border-right: 1px solid var(--line);
      background: var(--surface-inspector);
      color: var(--ink-dim);
      cursor: col-resize;
      display: grid;
      place-items: center;
      touch-action: none;
      padding: 0;
    }

    .inspector-resize::before {
      content: "";
      width: 3px;
      height: 42px;
      border-radius: 999px;
      background: var(--line-bright);
    }

    .inspector-resize:hover::before,
    .inspector-resize:focus-visible::before,
    body.is-resizing-inspector .inspector-resize::before {
      background: var(--orange);
    }

    .inspector {
      grid-column: 4;
      grid-row: 1 / 3;
      min-height: 0;
      display: grid;
      grid-template-rows: 45px minmax(0, 1fr);
      background: var(--surface-inspector);
    }

    .inspector-head {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 14px;
      border-bottom: 1px solid var(--line);
    }

    .inspector-title {
      font-weight: 800;
      text-transform: uppercase;
      font-size: 11px;
    }

    .inspector-title span {
      color: var(--yellow);
    }

    .inspector-body {
      overflow: auto;
      padding: 14px;
      display: grid;
      gap: 16px;
      align-content: start;
    }

    .editor-section {
      display: grid;
      gap: 14px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }

    .editor-section:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .editor-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .editor-section-title {
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--ink);
    }

    .word-picker {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .word-picker-button,
    .word-nav-button {
      min-height: var(--target);
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--panel);
      color: var(--ink-soft);
      padding: 0 10px;
    }

    .word-picker-button.active {
      border-color: var(--yellow);
      background: var(--yellow);
      color: var(--void);
      font-weight: 800;
    }

    .word-editor-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .control-group {
      display: grid;
      gap: 8px;
    }

    .control-label {
      color: var(--ink-dim);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .segmented {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .segmented button,
    .select-like {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--panel);
      color: var(--ink-soft);
      min-height: var(--target);
      padding: 0 10px;
    }

    .segmented .active {
      border-color: var(--yellow);
      color: var(--void);
      background: var(--yellow);
      font-weight: 800;
    }

    .control-input,
    .control-select,
    .control-textarea {
      width: 100%;
      min-height: var(--target);
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      color: var(--ink);
      padding: 0 11px;
    }

    .control-textarea {
      min-height: 72px;
      padding: 10px 11px;
      resize: vertical;
      line-height: 1.45;
    }

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

    .field-row.compact {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .advanced-control {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(244, 240, 231, 0.03);
      padding: 10px;
    }

    .advanced-control summary {
      min-height: 28px;
      display: flex;
      align-items: center;
      color: var(--ink-soft);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      cursor: pointer;
    }

    .advanced-control[open] summary {
      margin-bottom: 8px;
      color: var(--ink);
    }

    .control-help {
      margin: 0 0 10px;
      color: var(--ink-dim);
      font-size: 11px;
      line-height: 1.4;
    }

    .checkbox-grid {
      display: grid;
      gap: 8px;
    }

    .checkbox-row {
      display: flex;
      min-height: 34px;
      align-items: center;
      gap: 9px;
      color: var(--ink-soft);
    }

    .checkbox-row input {
      width: 18px;
      height: 18px;
      accent-color: var(--orange);
    }

    .swatches {
      display: flex;
      gap: 9px;
      align-items: center;
      flex-wrap: wrap;
    }

    .swatch {
      width: var(--target);
      height: var(--target);
      border-radius: 50%;
      border: 1px solid rgba(244, 240, 231, 0.25);
      background: var(--orange);
      padding: 0;
    }

    .swatch.active {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
    }

    .range-row {
      display: grid;
      grid-template-columns: 1fr 46px;
      gap: 12px;
      align-items: center;
    }

    .range-row.wide {
      grid-template-columns: 1fr 68px;
    }

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

    .speakers-panel {
      min-height: 100%;
      grid-template-rows: minmax(0, 1fr) auto;
      align-content: stretch;
    }

    .speaker-list {
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .speaker-card,
    .qa-card,
    .empty-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(28, 24, 19, 0.58);
      padding: 12px;
    }

    .speaker-card {
      display: grid;
      gap: 0;
    }

    .speaker-card.is-editing {
      gap: 12px;
      border-color: var(--line-bright);
    }

    .speaker-card-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }

    .speaker-card-head[role="button"] {
      cursor: pointer;
    }

    .speaker-select-content {
      min-height: var(--target);
      border: 1px solid transparent;
      border-radius: 6px;
      background: transparent;
      color: inherit;
      width: 100%;
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      padding: 0 4px;
      text-align: left;
      min-width: 0;
    }

    .speaker-card-head[role="button"]:hover .speaker-select-content {
      background: rgba(244, 240, 231, 0.04);
    }

    .speaker-select-content .speaker-name,
    .speaker-select-content .speaker-meta {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .speaker-select-copy {
      min-width: 0;
    }

    .speaker-card.is-editing .speaker-select-content {
      border-color: var(--yellow);
      background: rgba(229, 229, 23, 0.08);
    }

    .speaker-custom-select {
      position: relative;
    }

    .speaker-custom-select.is-open {
      z-index: 8;
    }

    .speaker-custom-trigger,
    .speaker-option {
      width: 100%;
      min-height: var(--target);
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr) 18px;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      color: inherit;
      padding: 10px;
      text-align: left;
    }

    .speaker-custom-trigger {
      cursor: pointer;
    }

    .speaker-custom-trigger::after {
      content: "";
      width: 9px;
      height: 9px;
      justify-self: end;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg) translateY(-2px);
      color: var(--ink-soft);
    }

    .speaker-custom-select.is-open .speaker-custom-trigger::after {
      transform: rotate(225deg) translateY(-1px);
    }

    .speaker-custom-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .speaker-custom-copy .speaker-name,
    .speaker-custom-copy .speaker-meta {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .speaker-options {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      display: grid;
      gap: 6px;
      max-height: 260px;
      overflow: auto;
      padding: 6px;
      border: 1px solid var(--line-bright);
      border-radius: 8px;
      background: var(--surface-inspector);
      box-shadow: var(--shadow);
    }

    .speaker-option {
      grid-template-columns: 18px minmax(0, 1fr);
      border-color: transparent;
      border-radius: 6px;
      cursor: pointer;
      min-height: var(--target);
    }

    .speaker-option:hover,
    .speaker-option[aria-selected="true"],
    .speaker-option:focus-visible {
      border-color: var(--line-bright);
      background: var(--panel-lift);
    }

    .speaker-chip,
    .speaker-chip-large {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid rgba(244, 240, 231, 0.28);
      justify-self: center;
    }

    .speaker-chip-large {
      width: 28px;
      height: 28px;
    }

    .speaker-name,
    .qa-title {
      font-weight: 800;
      color: var(--ink);
    }

    .speaker-meta,
    .qa-body,
    .empty-card {
      color: var(--ink-soft);
      font-size: 12px;
      line-height: 1.45;
    }

    .import-guidance {
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .import-guidance p {
      margin: 0;
    }

    .empty-title {
      color: var(--ink);
      font-weight: 800;
    }

    .speaker-edit-grid {
      display: grid;
      gap: 10px;
      padding-top: 4px;
    }

    .speaker-edit-row {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
      gap: 10px;
    }

    .speaker-color-select {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }

    .panel-action-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }

    .speaker-actions {
      position: sticky;
      bottom: -14px;
      margin: 0 -14px -14px;
      padding: 12px 14px 14px;
      border-top: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(20, 18, 15, 0.78) 0%, var(--panel) 42%);
      z-index: 3;
      justify-content: space-between;
    }

    .speaker-help {
      position: relative;
    }

    .speaker-help-button {
      width: var(--target);
      height: var(--target);
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--panel);
      color: var(--ink-soft);
      font-weight: 900;
      padding: 0;
    }

    .speaker-help-text {
      position: absolute;
      right: 0;
      bottom: calc(100% + 8px);
      width: min(280px, calc(100vw - 48px));
      padding: 10px 12px;
      border: 1px solid var(--line-bright);
      border-radius: var(--radius);
      background: var(--surface-inspector);
      color: var(--ink-soft);
      font-size: 12px;
      line-height: 1.45;
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(4px);
      pointer-events: none;
      transition: opacity 120ms ease, transform 120ms ease;
    }

    .speaker-help:hover .speaker-help-text,
    .speaker-help:focus-within .speaker-help-text {
      opacity: 1;
      transform: translateY(0);
    }

    .qa-card {
      display: grid;
      gap: 5px;
      border-color: var(--line);
    }

    .qa-card.pass {
      border-color: var(--status-pass-border);
      background: var(--status-pass-bg);
    }

    .qa-card.pass .qa-kicker {
      color: var(--status-pass-kicker);
    }

    .qa-card.fail {
      border-color: var(--status-fail-border);
      background: var(--status-fail-bg);
    }

    .qa-card.fail .qa-kicker {
      color: var(--status-fail-kicker);
    }

    .qa-kicker {
      color: var(--ink-dim);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    input[type="range"] {
      width: 100%;
      min-height: var(--target);
      accent-color: var(--orange);
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
      }

      .caption-word.intent,
      .caption-word.anticipating {
        transform: none !important;
      }
    }

    @media (max-width: 1120px) {
      .workspace {
        --inspector-size: 320px;
        grid-template-columns: 260px minmax(0, 1fr) 10px var(--inspector-size);
      }

      .stage {
        grid-template-rows: minmax(0, 1fr) 156px;
      }

      .phone-frame {
        width: min(100%, calc((100vh - 210px) * 16 / 9));
        min-width: 0;
      }
    }

    @media (max-width: 900px) {
      .workspace {
        --inspector-size: 300px;
        grid-template-columns: 1fr;
        grid-template-rows: auto 44px minmax(360px, auto) 10px var(--inspector-size);
      }

      .stage {
        grid-column: 1;
        grid-row: 1;
        min-height: 448px;
        grid-template-rows: auto 148px;
        border-left: 0;
      }

      .preview-zone {
        min-height: 300px;
        padding: 12px;
      }

      .tabs {
        grid-column: 1;
        grid-row: 2;
        border-top: 1px solid var(--line);
        border-right: 0;
      }

      .transcript {
        grid-column: 1;
        grid-row: 3;
        border-right: 0;
      }

      .speaker-edit-row {
        grid-template-columns: 1fr;
      }

      .side-panel {
        display: contents;
      }

      .inspector-resize {
        grid-column: 1;
        grid-row: 4;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        cursor: row-resize;
      }

      .inspector-resize::before {
        width: 42px;
        height: 3px;
      }

      .inspector {
        grid-column: 1;
        grid-row: 5;
      }
    }

    @media (max-width: 760px) {
      body {
        overflow: auto;
      }

      .app {
        height: auto;
        min-height: 100vh;
      }

      .topbar {
        grid-template-columns: 1fr;
        height: auto;
        padding: 10px 12px;
        gap: 10px;
      }

      .brand {
        flex-wrap: wrap;
      }

      .project-meta {
        flex: 1 1 100%;
      }

      .project-name {
        max-width: calc(100vw - 132px);
      }

      .top-actions {
        justify-self: start;
        width: 100%;
        gap: 8px;
      }

      .text-button,
      .primary-button {
        flex: 1 1 108px;
        padding: 0 10px;
      }

      .preview-shell {
        grid-template-columns: 1fr;
      }

      .stage {
        min-height: 0;
      }

      .preview-zone {
        min-height: 250px;
        padding: 12px;
      }

      .phone-frame {
        width: min(100%, 560px);
        min-width: 0;
      }

      .timeline-grid {
        min-width: 0;
      }

    }