body { margin:0; overflow:hidden; background:#000; }
#info { position:fixed; top:10px; left:10px; color:#0f0;
        font:0.9rem monospace; pointer-events:none; }

#splash {
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  color:#0f0;
  font:2.5rem monospace;
  text-align:center;
  padding:20px;
  cursor:pointer;
  z-index:1000;
}

#caps {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:4px;
}
#caps .cap-item {
  background:#222;
  border:1px solid #555;
  border-radius:4px;
  color:#fff;
  cursor:pointer;
  padding:4px 6px;
  user-select:none;
  transition:background-color 0.15s ease, border-color 0.15s ease;
}
#caps .cap-item:hover {
  border-color:#777;
}
#caps .cap-item:focus-visible {
  outline:2px solid #0f0;
  outline-offset:1px;
}
#caps .cap-item--selected {
  background:#c60;
  border-color:#ffb347;
  color:#000;
}

input:disabled,
input[readonly],
textarea:disabled,
textarea[readonly],
select:disabled,
select[readonly] {
  background:#3a3a3a !important;
  border-color:#555 !important;
  color:#808080 !important;
  cursor:not-allowed !important;
  opacity:0.6;
}

input:disabled::placeholder,
input[readonly]::placeholder,
textarea:disabled::placeholder,
textarea[readonly]::placeholder {
  color:#707070 !important;
}