/* Keep the live status readout and project deck title in separate vertical bands. */
.system-spine-readout {
  top: 14px;
  left: 18px;
  right: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(136, 196, 214, .28);
}

.system-spine-readout span,
.system-spine-readout strong {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.system-spine-readout span {
  color: #8edbd2;
  font-size: 8px;
}

.system-spine-readout strong {
  color: #c6e9e3;
  font-size: 8px;
  line-height: 1.35;
  text-align: left;
}

.system-spine-project-deck {
  padding-top: 112px;
}

.system-spine-project-deck-head {
  position: relative;
  z-index: 2;
  gap: 9px;
  padding-bottom: 16px;
}

.system-spine-project-deck-head span,
.system-spine-project-deck-head b {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .system-spine-readout {
    left: 14px;
    right: 14px;
  }
  .system-spine-project-deck { padding-top: 104px; }
}

@media (max-width: 640px) {
  .system-spine-readout { top: 10px; }
  .system-spine-project-deck { padding: 98px 14px 20px; }
  .system-spine-project-deck-head { gap: 7px; padding-bottom: 12px; }
  .system-spine-project-deck-head span { font-size: 8px; line-height: 1.35; }
  .system-spine-project-deck-head b { font-size: 8px; line-height: 1.4; }
}