<View style="font-family: Arial, sans-serif; background: #f0f2f5; padding: 12px;">
  
  <!-- Instructions -->
  <View style="background: #e8f0fe; border: 1px solid #c5d4f5; border-radius: 4px; padding: 12px; margin-bottom: 12px;">
    <Header value="Forced Alignment Workspace" size="5" style="margin: 0 0 8px 0; color: #1565C0;"/>
    <Text name="instructions" value="1. Use Transcript Labels (left) to highlight text.&#10;2. Use Waveform Labels (right) to draw audio regions." />
  </View>

  <View style="display: flex; gap: 16px; align-items: stretch; min-height: 600px;">
    
    <!-- LEFT: Transcript Panel -->
    <View style="width: 400px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;">
      <!-- Transcript Labels -->
      <View style="background: #ffffff; border: 1px solid #ddd; border-radius: 4px; padding: 10px;">
        <Header value="Transcript Labels (Select here first)" size="6" style="margin-top: 0; color: #555;"/>
        <Labels name="text_labels" toName="transcript" choice="single">
          <Label value="Sentence" background="#1565C0" hotkey="1"/>
          <Label value="Word" background="#2E7D32" hotkey="2"/>
        </Labels>
      </View>
      
      <!-- Transcript Text -->
      <View style="flex: 1; background: #ffffff; border: 1px solid #ddd; border-radius: 4px; padding: 12px; overflow-y: auto;">
        <Text name="transcript" value="$transcript" granularity="word" highlightColor="#a0d2ff" />
      </View>
    </View>
    
    <!-- RIGHT: Waveform Panel -->
    <View style="flex: 1; display: flex; flex-direction: column; gap: 12px;">
      <!-- Audio Labels -->
      <View style="background: #ffffff; border: 1px solid #ddd; border-radius: 4px; padding: 10px;">
        <Header value="Waveform Labels (Draw region here next)" size="6" style="margin-top: 0; color: #555;"/>
        <Labels name="labels" toName="audio" choice="single">
          <Label value="Sentence" background="#1976D2" hotkey="3"/>
          <Label value="Word" background="#388E3C" hotkey="4"/>
        </Labels>
      </View>
      
      <!-- Audio Waveform -->
      <View style="flex: 1; background: #ffffff; border: 1px solid #ddd; border-radius: 4px; padding: 12px;">
        <Audio name="audio" value="$audio" zoom="true" waveHeight="250" speed="true" volume="true"/>
      </View>
    </View>
    
  </View>
  
  <Relations>
    <Relation value="Aligns With" />
  </Relations>
</View>