html, body { margin: 0; padding: 0; background: #000; color: #fff; height: 100%; }
body { font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }

/* Landing */
.landing main { max-width: 900px; margin: 0 auto; padding: 6vh 4vw; text-align: center; }
.landing h1 { font-size: 7vh; margin: 0 0 4vh; }
.landing label { display: block; font-size: 4vh; color: #aaa; margin-bottom: 2vh; }
.landing input { font-size: 12vh; width: 80%; text-align: center; letter-spacing: 0.15em; background: #111; color: #fff;
  border: 3px solid #9ad; border-radius: 16px; padding: 1vh 2vw; text-transform: uppercase; box-sizing: border-box; }
.landing button { display: block; margin: 4vh auto 0; font-size: 6vh; padding: 2vh 10vw; background: #2a7; color: #fff;
  border: 0; border-radius: 16px; }
.msg { font-size: 3.5vh; color: #fa6; min-height: 4vh; }
.last { font-size: 4vh; }
.last a { color: #9ad; }

/* Viewer */
.viewer { overflow: hidden; }
.captions { position: absolute; top: 0; left: 0; right: 0; bottom: 64px; overflow-y: auto; padding: 2vh 3vw;
  box-sizing: border-box; font-weight: 700; line-height: 1.2; font-size: 9vw; }
.captions p { margin: 0 0 0.25em; }
.captions .old { opacity: 0.6; }
.captions .partial { color: #9ad; }
.captions .hint { color: #777; font-weight: 600; }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center;
  padding: 0 2vw; background: #111; box-sizing: border-box; }
.bar .spacer { flex: 1; }
.bar button { font-size: 28px; width: 80px; height: 52px; margin-left: 12px; background: #333; color: #fff; border: 0; border-radius: 10px; }
.chip { font-size: 22px; padding: 6px 14px; border-radius: 20px; background: #333; color: #ccc; }
.chip.live { background: #164; color: #8f8; }
.chip.warn { background: #540; color: #fc6; }
.chip.bad { background: #600; color: #f99; }
.code { font-size: 22px; color: #888; margin-left: 16px; letter-spacing: 0.1em; }