:root {
  --site-content-gutter: max(6vw, calc((100vw - 1320px) / 2));
}

header {
  padding-left: var(--site-content-gutter);
  padding-right: var(--site-content-gutter);
}

main {
  width: calc(100% - var(--site-content-gutter) * 2);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

footer {
  padding-left: var(--site-content-gutter);
  padding-right: var(--site-content-gutter);
}

.left-column {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 22px;
}

.upload {
  position: static;
  top: auto;
}

.empty {
  grid-column: 2;
  grid-row: 1;
}

#results {
  grid-column: 2;
  grid-row: 1;
}

/* 默认页右侧等待面板与左侧两个面板组成的整列等高。 */
.waiting .empty {
  align-self: stretch;
  height: 100%;
  box-sizing: border-box;
  min-height: 0;
  padding: 30px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#results[hidden],
.empty[hidden] {
  display: none !important;
}

.waiting #results {
  display: none !important;
}

@media (max-width: 900px) {
  .left-column,
  .empty,
  #results {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 520px) {
  :root {
    --site-content-gutter: 20px;
  }
}