/* Code screen: readable across a room on a TV, still fits a phone. */
html, body { margin: 0; background: #000; color: #e8edf2; font-family: system-ui, sans-serif; }
main { min-height: 100vh; box-sizing: border-box; padding: 4vmin; display: flex; flex-direction: column;
       align-items: center; justify-content: center; text-align: center; }
h1 { font-size: 4.2vmin; font-weight: 600; color: #9fb0c2; margin: 0 0 4vmin; }
.pair { display: flex; align-items: center; justify-content: center; gap: 6vmin; flex-wrap: wrap; }
.qr { width: 42vmin; height: 42vmin; background: #fff; border-radius: 2vmin; padding: 1.5vmin; box-sizing: border-box; }
.qr svg { width: 100%; height: 100%; display: block; }
.side { text-align: left; max-width: 80vw; }
.lead { font-size: 4vmin; margin: 0; color: #9fb0c2; }
.code { font-size: 17vmin; font-weight: 700; letter-spacing: .12em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.how { font-size: 3.2vmin; line-height: 1.45; margin: 2vmin 0 0; }
.msg { font-size: 3vmin; color: #fbbf24; min-height: 1em; }
.alt { margin-top: 5vmin; font-size: 2.6vmin; }
.alt a { color: #93c5fd; }
.how b { overflow-wrap: anywhere; }
@media (max-aspect-ratio: 1/1) { .side { text-align: center; } .code { font-size: 22vw; } .how { font-size: 4.4vw; } .alt { font-size: 5vw; } }