@container (max-aspect-ratio: 1/1) {
  .ui-title {
    width: 80cqw;
  }
  
  .ui-button {
    width: 40cqw;
  }
  
  .action-button {
    font-size: 3.5cqw;
    padding: 2cqh 5cqw;
  }
  
  .moon-container {
    width: 18cqw;
    height: 18cqw;
  }
  
  .cloud-container {
    width: 28cqw;
    height: 28cqw;
  }
  
  .torch-container {
    width: 20cqw;
    height: 20cqh;
  }
  
  .ui-logo {
    width: 15cqw;
  }
  
  .ui-counter {
    font-size: 5cqw;
    padding: 1.5cqh 4cqw;
  }
  
  .ui-text-box {
    width: 85cqw;
  }
  
  .instruction-text {
    font-size: 4cqw;
  }
  
  .speech-bubble-wrapper {
    width: 18cqw;
    height: 18cqw;
  }

  .speech-bubble {
    width: 28cqw;
    height: 28cqw;
    bottom: 82%;
  }

  .speech-bubble[data-position-y="below"] {
    top: 82%;
  }

  .speech-bubble-text {
    font-size: 2.2cqw;
  }
}