:root {
  --vermelho: #e5161d;
  --rosa: #f07fe6;
  --verde: #0b7039;
  --amarelo: #fbb026;
  --branco: #ffffff;
  --azul: #1b3e84;
  --tinta: #141414;
  --serifa:
    "Instrument Serif",
    "Times New Roman",
    serif;
  --grotesca:
    "Archivo",
    "Helvetica Neue",
    Arial,
    sans-serif;
  --estreita:
    "Archivo Narrow",
    "Arial Narrow",
    sans-serif;
  --cursiva:
    "Pinyon Script",
    "Snell Roundhand",
    cursive;
  --interface:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}
[data-estilo="1"] {
  --fundo: var(--branco);
  --letra: var(--vermelho);
  --ui: var(--vermelho);
}
[data-estilo="2"] {
  --fundo: var(--branco);
  --letra: var(--vermelho);
  --ui: var(--vermelho);
}
[data-estilo="3"] {
  --fundo: var(--branco);
  --letra: var(--verde);
  --ui: var(--verde);
}
[data-estilo="4"] {
  --fundo: var(--verde);
  --letra: var(--branco);
  --ui: var(--branco);
}
[data-estilo="5"] {
  --fundo: var(--vermelho);
  --letra: var(--branco);
  --ui: var(--branco);
}
[data-estilo="6"] {
  --fundo: var(--azul);
  --letra: var(--branco);
  --ui: var(--branco);
}
[data-estilo="7"] {
  --fundo: var(--branco);
  --letra: var(--azul);
  --ui: var(--azul);
}
[data-estilo="8"] {
  --fundo: var(--amarelo);
  --letra: var(--branco);
  --ui: var(--azul);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  height: var(--alto, 100dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fundo);
  color: var(--ui);
  font-family: var(--interface);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(14px, env(safe-area-inset-top)) 16px 6px;
}
.estilos {
  display: flex;
  gap: 10px;
}
.ponto {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(
      circle,
      var(--b) 0 36%,
      var(--a) 39%);
  box-shadow: 0 0 0 1px rgba(20, 20, 20, .2);
}
.ponto[data-i="1"] {
  --a: var(--branco);
  --b: var(--vermelho);
}
.ponto[data-i="2"] {
  --a: var(--branco);
  --b: var(--amarelo);
}
.ponto[data-i="3"] {
  --a: var(--branco);
  --b: var(--verde);
}
.ponto[data-i="4"] {
  --a: var(--verde);
  --b: var(--amarelo);
}
.ponto[data-i="5"] {
  --a: var(--vermelho);
  --b: var(--branco);
}
.ponto[data-i="6"] {
  --a: var(--azul);
  --b: var(--branco);
}
.ponto[data-i="7"] {
  --a: var(--branco);
  --b: var(--azul);
}
.ponto[data-i="8"] {
  --a: var(--amarelo);
  --b: var(--azul);
}
.ponto[aria-checked=true] {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.ponto:focus-visible {
  outline: 2px dashed currentColor;
  outline-offset: 3px;
}
.casa {
  font-size: 12px;
  color: inherit;
  text-decoration: none;
  opacity: .7;
}
.casa:hover {
  opacity: 1;
}
.palco {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.palco {
  display: grid;
  place-items: center;
}
.arte {
  display: block;
  user-select: none;
  -webkit-user-select: none;
}
.controles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 16px max(16px, env(safe-area-inset-bottom));
}
.frase {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px .35em;
  width: 100%;
  max-width: 560px;
  margin: 0;
  padding: 10px 20px;
  border-radius: 22px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--tinta);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 20, 20, .14);
}
.frase .antes:empty,
.frase .depois:empty {
  display: none;
}
.lacuna input {
  min-width: 5ch;
  max-width: 100%;
  padding: 0 2px;
  font: inherit;
  color: inherit;
  text-align: center;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0;
  outline: none;
}
.lacuna input::placeholder {
  color: rgba(20, 20, 20, .38);
}
.lacuna input:focus {
  border-bottom-color: var(--vermelho);
}
.frase.dica .lacuna input {
  border-bottom-color: var(--vermelho);
}
.frase.dica .lacuna input::placeholder {
  color: var(--tinta);
}
.acoes {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}
.formatos {
  display: flex;
  padding: 2px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px currentColor;
}
.formatos button {
  padding: 5px 13px;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.formatos button[aria-pressed=true] {
  color: var(--fundo);
  background: var(--ui);
}
.baixar {
  padding: 7px 18px;
  font: inherit;
  font-weight: 600;
  color: var(--fundo);
  background: var(--ui);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.formatos button:focus-visible,
.baixar:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}