.react-workspace .cloud-header { grid-template-columns: auto minmax(0,1fr); }
.react-workspace h1 { color: var(--ink); }
.react-stepper { isolation: isolate; }
.react-stepper ol { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 0; margin: 0 0 var(--space-5); }
.react-stepper li { position: relative; min-width: 0; }
.react-stepper li:not(:last-child)::after { content: ''; position: absolute; height: 2px; top: 25px; inset-inline: calc(50% + 18px) calc(-50% + 18px); background: var(--line-strong); z-index: -1; }
.react-stepper li[data-complete="true"]::after { background: var(--accent); }
.react-stepper button { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 100%; min-height: 88px; padding: var(--space-2); border: 0; background: transparent; color: var(--dim); text-align: center; line-height: 1.5; }
.react-stepper button:disabled { opacity: 1; cursor: default; }
.react-stepper button[aria-current="step"] { color: var(--ink); font-weight: 600; }
.react-stepper button small { display: block; font-weight: 400; color: var(--dim); font-size: var(--fs-xs); margin-top: 4px; }
.react-step-number { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--panel); font-size: var(--fs-sm); font-weight: 600; }
.react-stepper [aria-current="step"] .react-step-number, .react-stepper [data-complete="true"] .react-step-number { background: var(--accent); border-color: var(--accent); color: #fff; }
.react-file-pill { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); margin-block: var(--space-4); background: var(--panel2); }
.react-file-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.react-file-type { font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 8px; background: var(--panel); }
.react-workspace .react-player .browser-media-heading { grid-template-columns: minmax(0,1fr) auto; }
.react-player .browser-preview-name { margin: 0; overflow-wrap: anywhere; }
.react-player .browser-preview-meta { margin: 0; white-space: nowrap; }
.react-player video { max-height: min(48vh,28rem); object-fit: contain; }
.react-transport { display: grid; grid-template-columns: 44px minmax(60px,1fr) auto; align-items: center; gap: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); }
.react-play { min-width: 44px; min-height: 44px; padding: var(--space-2); }
.react-wave-seek { position: relative; min-width: 0; height: 56px; }
.react-wave-seek canvas { display: block; width: 100%; height: 56px; }
.react-wave-seek input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; background: transparent; appearance: none; accent-color: var(--accent); cursor: pointer; border: 0; }
.react-wave-seek input::-webkit-slider-runnable-track { height: 2px; background: transparent; }
.react-wave-seek input::-moz-range-track { background: transparent; height: 2px; }
.react-wave-seek input::-webkit-slider-thumb { appearance: none; width: 12px; height: 44px; margin-top: -21px; border: 2px solid var(--panel); border-radius: 4px; background: var(--accent); }
.react-wave-seek input::-moz-range-thumb { width: 8px; height: 40px; border: 2px solid var(--panel); border-radius: 4px; background: var(--accent); }
.react-transport-options { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); }
.react-volume { display: flex; align-items: center; gap: var(--space-2); margin-inline-end: auto; }
.react-volume button { min-width: 44px; min-height: 44px; padding: var(--space-2); }
.react-volume input { width: 88px; min-height: 44px; padding: 0; accent-color: var(--accent); }
#browserWorkspace .react-transport select { width: auto; margin: 0; min-height: 44px; }
.react-generation-options { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-5); }
.react-generation-options > div { min-width: 10rem; }
#browserWorkspace .react-generation-options select { margin: 4px 0 0; }
.react-generation-options > button { margin-inline-start: auto; }
.react-auto-sfx { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.react-auto-sfx input { width: 20px; height: 20px; padding: 0; accent-color: var(--accent); }
.react-review-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.react-preview-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-2); }
.react-preview-actions span { font-size: var(--fs-xs); }
.react-suggestions { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); margin-block: var(--space-3); }
.react-suggestions ul { list-style: none; padding: 0; }
.react-suggestions li { display: grid; gap: var(--space-2); padding-block: var(--space-3); border-top: 1px solid var(--line); }
.react-suggestions :is(del,ins) { overflow-wrap: anywhere; }
.react-suggestions ins { text-decoration: none; font-weight: 600; }
.react-workspace .browser-key-dialog svg { width: 18px; height: 18px; }
.react-workspace .cloud-back { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; }
.react-stepper button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }
.react-source-preview { min-width: 0; }
@media (min-width: 1200px) { .react-review-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: start; gap: var(--space-5); } }
@media (max-width: 640px) {
  .react-workspace .cloud-header { grid-template-columns: 1fr; gap: var(--space-2); }
  .react-stepper button { font-size: var(--fs-xs); padding-inline: 2px; }
  .react-stepper button small { font-size: .75rem; }
  .react-transport { grid-template-columns: auto minmax(0,1fr); gap: var(--space-2); padding: var(--space-2); }
  .react-transport > output { grid-row: 2; grid-column: 1 / -1; }
  .react-workspace .react-player .browser-media-heading { grid-template-columns: 1fr; }
  .react-generation-options { align-items: stretch; flex-direction: column; gap: var(--space-2); }
  .react-generation-options > button { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) { .react-workspace *, .react-workspace *::before, .react-workspace *::after { scroll-behavior: auto; transition: none; } }
@media (forced-colors: active) { .react-wave-seek input::-webkit-slider-thumb { background: Highlight; border-color: Canvas; } .react-step-number { border: 1px solid ButtonText; } }