.app {
  min-height: 100vh;
  padding: 1rem;
  
  header {
    text-align: center;
    margin-bottom: 2rem;
    
    h1 {
      color: #333;
      font-size: 2rem;
    }
  }
  
  .main-content {
    display: grid;
    grid-template-columns: 450px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
      "controls viewer"
      "controls analysis";
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      grid-template-areas: 
        "controls"
        "viewer"
        "analysis";
      gap: 1rem;
    }
  }
  
  .controls-section {
    grid-area: controls;
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    
    > * {
      margin-bottom: 1.5rem;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  .viewer-section {
    grid-area: viewer;
    background: #000;
    padding: 1rem;
    border-radius: 8px;
  }
  
  .analysis-section {
    grid-area: analysis;
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
  }
}