:root {
  --screen: #0000aa;
  --ink:    #ffffff;
  --label:  #aaaaaa;
  /* Type grows with the window's width but is capped by its height, so the
     whole screen fits without scrolling. Every spacing below is in em, so it
     scales with the type. svh is the height with mobile browser bars showing. */
  --fs: clamp(11px, min(calc(12.6px + 0.9vw), 2.75svh), 23px);
  --pad-y: clamp(14px, 6svh, 96px);
}
@media (orientation: portrait) {
  /* Narrow screens wrap into more lines, so the height cap is tighter. */
  :root { --fs: clamp(11px, min(calc(12.6px + 0.9vw), 2.2svh), 23px); }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--screen); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--screen);
  color: var(--ink);
  font-family: 'JetBrains Mono', 'Lucida Console', Monaco, ui-monospace, monospace;
  font-variant-ligatures: none;
}
::selection { background: var(--ink); color: var(--screen); }

.screen {
  min-height: 100vh;
  min-height: 100svh;
  max-width: 900px;
  margin: 0 auto;
  padding: var(--pad-y) clamp(18px, 5vw, 64px);
  font-size: var(--fs);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 1.6em;
}
main { margin-block: auto; display: flex; flex-direction: column; gap: 1.6em; }
p { margin: 0; }

/* ── header label ───────────────────────────────────────── */
.title { text-align: center; }
h1 {
  display: inline-block;
  margin: 0;
  padding: 0 .6em;
  background: var(--label);
  color: var(--screen);
  font-size: inherit;
  font-weight: 700;
  line-height: 1.5;
}

/* ── press lines ────────────────────────────────────────── */
.keys { list-style: none; margin: 0; padding: 0; }
.keys li {
  display: flex;
  align-items: baseline;
  gap: 1.5ch;
  padding: 8px 0;
}
.key {
  padding: .2em .4em;
  background: var(--ink);
  color: var(--screen);
  font-weight: 700;
  text-decoration: none;
}
.key:hover { background: var(--label); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.continue { text-align: center; }
.cursor { animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* ── technical information ──────────────────────────────── */
.tech {
  margin-top: 1.5em;
  font-size: .72em;
  opacity: .8;
  overflow-wrap: anywhere;
}
.tech h2 { margin: 0 0 .5em; font-size: inherit; font-weight: 400; }
.tech a { color: var(--ink); text-underline-offset: 3px; }

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  font-size: .66em;
  opacity: .7;
}

/* Phones held sideways: the type is already at its floor, so tighten the spacing. */
@media (max-height: 440px) {
  .screen, main { gap: .9em; }
  .keys li { padding: 2px 0; }
  .tech { margin-top: 0; }
}