/* Paint the fixed rain above the page background and below every content layer. */
body {
  isolation: isolate;
}

.matrix-rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.matrix-playback {
  width: auto;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid #42584a;
  background: #142019;
  color: #b6d7bd;
  font: 12px/1.4 Verdana, Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.matrix-playback:hover { background: #213427; }
.matrix-playback:focus-visible { outline: 2px solid #b5eac1; outline-offset: 2px; }
.wordmark-row > .matrix-playback { margin-inline: auto 12px; }
.panel-title + .matrix-playback { margin: 10px 12px 0; }
.login > .matrix-playback, .denied-page .box > .matrix-playback { margin-top: 8px; }

@media (max-width: 700px) {
  .wordmark-row > .matrix-playback { margin-inline-end: 0; }
}

@media (pointer: coarse) {
  .matrix-playback { min-height: 44px; }
}

@media print, (forced-colors: active) {
  .matrix-rain, .matrix-playback { display: none; }
}