/* Persistent context for the existing scene arrows; never an extra control. */
#site .scene-controls { align-items: center; }
#site .scene-controls-label {
  color: #c6ccc5;
  font: 12px/1.3 monospace;
  margin-right: 4px;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 360px) {
  #site .scene-controls-label { font-size: 11px; margin-right: 2px; }
}
/* Keep the narrow-screen top row clear; caption the pair from underneath. */
@media (max-width: 600px) {
  #site .scene-controls { padding-bottom: 23px; }
  #site .scene-controls-label {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 11px;
  }
}
/* Separate magnetic contact links from the two-row phone interaction footer. */
@media (max-width: 600px) and (min-height: 501px) {
  #site .sp-magnetic .art-title { bottom: calc(160px + env(safe-area-inset-bottom)); }
}