.scene-viewport {
  max-height: calc(100svh - 97px);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: none;
  scrollbar-width: none;
}

.scene-viewport::-webkit-scrollbar { display: none; }

.offscreen-hint-label {
  visibility: hidden;
}

.offscreen-hint {
  border: 0;
  background: transparent;
  color: #f8ead2;
}

.offscreen-hint .q {
  border: 2px solid #e8dcc8;
  background: rgb(41 41 41 / 94%);
  color: #fff7e8;
  box-shadow: 0 2px 4px #000a;
}

.offscreen-hint > span:not(.q):not(.offscreen-hint-label) {
  font: bold 21px/1 Georgia, serif;
  color: #f8ead2;
}

.scene-alert {
  position: relative;
  padding-block: 6px;
  max-height: none;
  overflow: visible;
}

@media (max-width: 900px) {
  .scene-viewport { max-height: calc(100svh - 160px); }
}

@media (max-width: 430px) {
  .scene-alert {
    padding: 4px 8px;
    font-size: clamp(11px, 3.1vw, 12px);
  }

}