/* Palco 16:9 do interativo: o produto roda numa tela 1920×1080, então a página da bancada trava
   essa proporção em qualquer janela. O palco é o maior 16:9 que cabe, centralizado, com tarja preta
   no que sobra. A rem passa a ser a largura do palco / 120 (1rem = 16px no canvas 1920), e a grade
   fica sempre em 16 colunas, porque dentro do palco a largura da janela não decide mais nada.

   Carregar DEPOIS de grade.css: as regras de html daqui sobrepõem as dela pela ordem.
   O palco usa translate para centralizar, e isso faz dele o bloco de referência dos filhos
   position: fixed. Por isso as guias da grade.js (fixed, inset 0) cobrem só o palco. */

html {
  font-size: calc(min(100vw, 100vh * 16 / 9) / 120);
  --grade-coluna: calc((120rem - 15 * 0.625rem) / 17);
}

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.palco {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 120rem;
  height: 67.5rem;
  translate: -50% -50%;
  overflow: hidden;
}

.palco :where(.grade) {
  grid-template-columns: repeat(16, minmax(0, 1fr));
}