:root {
  /* One letter cell: as large as fits four across and still leaves room below. */
  --size: min(calc(100vw / 5.5), calc(100vh / 3.2));
  --fg: #fff;
  --dim: #8a8a8a;
  --bg: #000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  text-align: center;
}

main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--size) / 5);
  padding: 1rem;
}

a {
  color: var(--fg);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-shadow: 0 0 5px var(--fg);
  outline: none;
}

#word {
  display: grid;
  grid-template-columns: repeat(4, var(--size));
  font-size: var(--size);
  line-height: var(--size);
}

#word a {
  height: var(--size);
  text-shadow: 0 0 5px var(--fg);
}

/* rqtk is an isogram: each letter turns into what it stands for. */
#word a:hover span,
#word a:focus-visible span {
  display: none;
}

#word a:hover::after,
#word a:focus-visible::after {
  content: var(--glyph);
}

#r { --glyph: '§'; }
#q { --glyph: '?'; }
#t { --glyph: '✓'; }
#k { --glyph: '~'; }

#pitch {
  color: var(--dim);
  font-size: max(0.9rem, calc(var(--size) / 9));
  line-height: 1.5;
  text-wrap: balance;
}

#install {
  /* Fits the whole command on one line down to phone widths. */
  font-size: max(11px, min(calc(var(--size) / 11), 3.1vw));
  padding: 0.6em 1.2em;
  border: 1px solid #333;
  max-width: 100%;
  overflow-x: auto;
  user-select: all;
}

#install::before {
  content: '$ ';
  color: var(--dim);
  user-select: none;
}

#links {
  display: grid;
  grid-template-columns: repeat(4, var(--size));
  font-size: max(0.85rem, calc(var(--size) / 9));
}

@media (max-width: 480px) {
  :root {
    --size: min(calc(100vw / 4.6), calc(100vh / 3.2));
  }

  #pitch br {
    display: none;
  }

  #install {
    padding: 0.6em 0.8em;
  }

  #links {
    grid-template-columns: repeat(2, calc(var(--size) * 2));
    row-gap: 0.75rem;
  }
}