* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0a0a0a;
  color: #d4d4d4;
  font: 15px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
}

/* The whole viewport — room, monitor and glass — is one WebGL canvas (src/crt.js). */
#crt, #flat {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
/* no WebGL: the flat screen sits where the glass would be */
#flat { inset: auto; }

/* chin details sit on the painted bezel; main.js positions the strip */
.chin {
  position: fixed;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.2%;
  pointer-events: none;
}
.js .chin { display: flex; }
.badge {
  font-size: clamp(8px, .9vw, 12px);
  letter-spacing: .34em;
  color: #3e3e3c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .07), 0 -1px 0 rgba(0, 0, 0, .55);
}
.led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c4c4;
  box-shadow: 0 0 4px 1px rgba(34, 196, 196, .75), 0 0 14px 3px rgba(34, 196, 196, .22), inset 0 -1px 1px rgba(0, 0, 0, .35);
}

/* ---- mail link ----------------------------------------------------------
   The address is painted on the screen in pixel type. This link sits exactly
   over it: invisible, but clickable, focusable and readable by screen
   readers. Without JS it is shown as plain text instead. */
.mail {
  position: fixed;
  left: 24px;
  bottom: 24px;
  color: #d4d4d4;
  text-decoration: none;
  z-index: 1;
}
.js .mail {
  bottom: auto;
  color: transparent;
  font-size: 1px;
  overflow: hidden;
}
.mail:focus-visible { outline: 1px solid #8a8a8a; outline-offset: 4px; }

.fallback-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(56vw, 520px);
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}