@media (min-width: 901px) {
  body {
    height: 100vh;
    min-height: 680px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .site-header {
    height: 64px;
    flex: 0 0 64px;
  }

  .brand img { width: 112px; }

  .workspace {
    flex: 1;
    min-height: 0;
    padding: 20px 0 16px;
    display: flex;
    flex-direction: column;
  }

  .intro {
    max-width: none;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: minmax(410px, .9fr) minmax(420px, 1.1fr);
    column-gap: 48px;
    align-items: end;
  }

  .intro .eyebrow { grid-column: 1; }
  .intro h1 {
    grid-column: 1;
    font-size: clamp(2.55rem, 4.4vw, 4.25rem);
    margin: 10px 0 0;
  }

  .intro p {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    padding-bottom: 4px;
  }

  .generator { flex: 1; min-height: 0; }
  .editor-panel, .styles-panel { height: 100%; min-height: 0; padding: 20px; }
  .editor-panel { display: flex; flex-direction: column; }
  .editor-panel textarea { min-height: 92px; flex: 1; resize: none; margin-top: 9px; }
  .result-card { margin-top: 14px; padding-top: 14px; }
  .output { height: 72px; margin: 9px 0; }
  .copy-button { height: 44px; }
  .styles-top { margin-bottom: 11px; }
  .styles-top h2 { font-size: 1.25rem; margin-top: 3px; }
  .search { height: 40px; }
  .buttons {
    max-height: none;
    height: calc(100% - 101px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
  }
  .style-option { height: 62px; padding: 8px 11px; }
  .style-option span { font-size: 1rem; }
  .style-option small { margin-top: 3px; font-size: .72rem; }
  footer { height: 49px; flex: 0 0 49px; padding: 15px 0; }
}

@media (min-width: 901px) and (max-height: 740px) {
  .site-header { height: 56px; flex-basis: 56px; }
  .workspace { padding-top: 12px; padding-bottom: 10px; }
  .intro { margin-bottom: 10px; }
  .intro h1 { font-size: 2.65rem; }
  .intro p { font-size: .96rem; line-height: 1.45; }
  .eyebrow { font-size: .68rem; }
  .editor-panel, .styles-panel { padding: 16px; }
  .editor-panel textarea { min-height: 72px; }
  .output { height: 62px; }
  .style-option { height: 55px; }
  footer { height: 42px; flex-basis: 42px; padding: 11px 0; }
}