body {
    margin: 24px 12px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    --accent-color: #076EFF;
    color: #202124;
  }

  #auth-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border: 1px solid #ddd;
  }
  
  main, .api-key-banner {
    width: 100%;
    padding: 24px 12px;
    max-width: 460px;
    margin: 0 auto;
    border-radius: 20px;
  }
  
  * {
    outline-color: var(--accent-color);
  }
  
  #auth-section form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  main {
    background-color: #fff;
  }
  
  h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    font-size: 24px;
    justify-content: center;
  }

  .api-key-banner {
    background-color: #FFDDB7;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .api-key-banner a {
    color: var(--accent-color);
  }
  
  .title::before {
    content: '';
    display: inline-block;
    background: url(images/gemini.svg);
    width: 40px;
    height: 40px;
    background-size: cover;
  }
  
  form {
    margin: 0;
  }
  
  .image-picker {
    display: flex;
    width: 100%;
    gap: 8px;
    margin-top: 24px;
  }
  
  .image-choice {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
  }
  
  .image-choice:has(:checked)::before {
    pointer-events: none;
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 1;
    color: white;
    content: '✓';
    background-color: var(--accent-color);
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    font-weight: bold;
    border-radius: 100px;
    box-shadow: 0 0 0 2px #fff;
  }
  
  .image-choice:has(:checked)::after {
    content: '';
    position: absolute;
    pointer-events: none;
    inset: 0;
    border-radius: 8px;
    box-shadow:
      0 0 0 2px var(--accent-color) inset,
      0 0 0 4px #fff inset;
  }
  
  .image-choice img {
    width: 100%;
  }
  
  .image-choice input {
    opacity: 0;
    position: absolute;
  }
  
  .image-choice:focus-within::after {
    box-shadow: 0 0 0 4px var(--accent-color) inset;
  }
  
  .prompt-box {
    margin: 24px 0;
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: flex-end;
  }
  
  label {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
  }
  
  input,
  button {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 16px;
    font-family: unset;
    font-size: 16px;
  }
  
  button {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    color: white;
    font-weight: bold;
    cursor: pointer;
    opacity: 1;
  }
  
  button:focus-visible {
    outline: 2px solid white;
    outline-offset: -4px;
  }
  
  button:hover {
    opacity: 0.95;
  }

  .output {
    padding: 10;
    border-radius: 8px;
    box-shadow:
      0 0 0 2px darkgray inset,
      0 0 0 4px #fff inset;
  }

  .output .tag {
    cursor: pointer;
    border-radius: 8px;
    display: inline;
    margin: 10px 5px;
    padding: 4px;
    background-color: rgb(144, 202, 249);
    &:hover {
      background-color: rgb(100, 169, 226);
    }
  }

  #auth-section input[type="email"],
  #auth-section input[type="password"],
  #auth-section button {
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }